8662 qa items in countries modal not displayed correctly for de pl and tr

src/app/cdk/side-bar/modals/modal-country/modal-country.component.html

@@ -98,7 +98,7 @@
                       let countryCode of countryCodes | sortBy : 'asc' : 'key'
                     "
                   >
-                    <mat-option [value]="countryCode.key">
+                    <mat-option [value]="countryCode.value">
                       {{ countryCode.key }}
                     </mat-option>
                   </ng-container>
@@ -126,9 +126,8 @@
                   #descriptionInput
                   [attr.aria-label]="ariaLabelCountryLocationReadOnly"
                   matInput
-                  formControlName="country"
-                  placeholder=" {{ ngOrcidCountry }}"
                   [ngClass]="{ 'website-input': screenDirection === 'rtl' }"
+                  [value]="country.countryName || ''"
                 />
                 <mat-hint *ngIf="country.putCode.indexOf('new') < 0">
                   <app-source-hit

src/app/cdk/side-bar/modals/modal-country/modal-country.component.spec.ts

@@ -141,12 +141,10 @@ describe('ModalCountryComponent', () => {
     //   countriesSelects.map((select) => select.isDisabled())
     // )
 
-    expect(countriesForm.controls[1].value.country).toBe('Albania')
-    expect(countriesForm.controls[2].getRawValue().country).toBe(
-      'United States'
-    )
-    expect(countriesForm.controls[3].getRawValue().country).toBe('Kosovo')
-    expect(countriesForm.controls['new-0'].value.country).toBe('Afghanistan')
+    expect(countriesForm.controls[1].value.country).toBe('AL')
+    expect(countriesForm.controls[2].getRawValue().country).toBe('US')
+    expect(countriesForm.controls[3].getRawValue().country).toBe('XK')
+    expect(countriesForm.controls['new-0'].value.country).toBe('AF')
     expect(countriesInputs.length).toBe(2)
     expect(countriesSelects.length).toBe(2)
   })
@@ -159,6 +157,9 @@ function getAddresses(): Address[] {
       countryName: 'Albania',
       source: '0000-0000-0000-000X',
       sourceName: 'Test Record',
+      iso2Country: {
+        value: 'AL',
+      },
       visibility: {
         visibility: 'PUBLIC',
       },
@@ -168,13 +169,19 @@ function getAddresses(): Address[] {
       countryName: 'United States',
       source: '0000-0000-0000-000Z',
       sourceName: 'ORCID',
+      iso2Country: {
+        value: 'US',
+      },
       visibility: {
         visibility: 'PRIVATE',
       },
     } as Address,
     {
       putCode: '3',
       countryName: 'Kosovo',
+      iso2Country: {
+        value: 'XK',
+      },
       source: '0000-0000-0000-000Z',
       sourceName: 'ORCID',
       visibility: {

src/app/cdk/side-bar/modals/modal-country/modal-country.component.ts

@@ -101,7 +101,7 @@ export class ModalCountryComponent implements OnInit, OnDestroy {
 
     countries.forEach((country) => {
       group[country.putCode] = new UntypedFormGroup({
-        country: new UntypedFormControl(country.countryName),
+        country: new UntypedFormControl(country.iso2Country.value),
         visibility: new UntypedFormControl(country.visibility.visibility, {}),
       })
     })
@@ -121,14 +121,15 @@ export class ModalCountryComponent implements OnInit, OnDestroy {
       // Clear empty inputs
       .filter((key) => countryForm.getRawValue()[key].country)
       .forEach((key, i) => {
-        const countryName = countryForm.getRawValue()[key].country
+        const countryCode = countryForm.getRawValue()[key].country
         const visibility = countryForm.getRawValue()[key].visibility
         if (countryForm.getRawValue()[key]) {
           countries.addresses.push({
             putCode: key.indexOf('new-') === 0 ? null : key,
-            countryName,
+            countryName: this.countryCodes.find((x) => x.value === countryCode)
+              ?.key,
             iso2Country: {
-              value: this.countryCodes.find((x) => x.key === countryName).value,
+              value: countryCode,
             },
             displayIndex: i + 1,
             visibility: {

src/app/core/google-tag-manager/google-tag-manager.service.ts

@@ -13,7 +13,6 @@ import { ItemGTM } from '../../types/item_gtm'
 import { ERROR_REPORT } from '../../errors'
 import { ErrorHandlerService } from '../error-handler/error-handler.service'
 import { WINDOW } from 'src/app/cdk/window'
-import { log } from 'console'
 
 @Injectable({
   providedIn: 'root',

src/app/core/record-countries/record-countries.service.ts

@@ -1,9 +1,12 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { Observable, of, ReplaySubject } from 'rxjs'
+import { forkJoin, merge, Observable, of, ReplaySubject } from 'rxjs'
 import { retry, catchError, tap, map } from 'rxjs/operators'
 import { CountriesEndpoint } from 'src/app/types/record-country.endpoint'
-import { UserRecordOptions } from 'src/app/types/record.local'
+import {
+  SideBarPublicUserRecord,
+  UserRecordOptions,
+} from 'src/app/types/record.local'
 import { environment } from 'src/environments/environment'
 import { ErrorHandlerService } from '../error-handler/error-handler.service'
 import { RecordPublicSideBarService } from '../record-public-side-bar/record-public-side-bar.service'
@@ -297,9 +300,20 @@ export class RecordCountriesService {
     }
   ): Observable<CountriesEndpoint> {
     if (options.publicRecordId) {
-      return this._recordPublicSidebar
-        .getPublicRecordSideBar(options)
-        .pipe(map((value) => value.countries))
+      return forkJoin([
+        this._recordPublicSidebar.getPublicRecordSideBar(options),
+        this.getCountryCodes(),
+      ]).pipe(
+        map((value) => {
+          const countries = value[0].countries
+          const countryCodes = value[1]
+          countries.addresses.forEach((country) => {
+            //Overrride backend country name translations
+            country.countryName = countryCodes[country.iso2Country.value] || ''
+          })
+          return countries
+        })
+      )
     }
 
     if (!this.$addresses) {