feat: remove the country flag in the Phone select, change the label f…

…or country/region (#2628)
Adyen · Apr 5, 2024 · e45fced · e45fced
1 parent 9902c45
commit e45fced
Show file tree

Hide file tree

Showing 34 changed files with 95 additions and 109 deletions.
diff --git a/.changeset/rare-falcons-bow.md b/.changeset/rare-falcons-bow.md
@@ -0,0 +1,5 @@
+---
+"@adyen/adyen-web": minor
+---
+
+Remove the country flag in the Phone select, change the label to `Country/Region` for the country/region field.
diff --git a/packages/lib/src/components/QiwiWallet/utils.ts b/packages/lib/src/components/QiwiWallet/utils.ts
@@ -12,11 +12,10 @@ export const formatPrefixName = item => {
         return false;
     }
 
-    const flag = item.code.toUpperCase().replace(/./g, char => (String.fromCodePoint ? String.fromCodePoint(char.charCodeAt(0) + 127397) : ''));
     return {
         ...item,
-        name: `${flag} ${item.name} (${item.id})`,
-        selectedOptionName: flag
+        name: `${item.name} (${item.id})`,
+        selectedOptionName: item.id
     };
 };
 

diff --git a/packages/lib/src/components/Riverty/Riverty.test.tsx b/packages/lib/src/components/Riverty/Riverty.test.tsx
@@ -66,7 +66,7 @@ describe('Riverty', () => {
             render(<Riverty {...withDeliveryAddressData} />);
             const firstName = await screen.findByLabelText('Recipient first name', { selector: 'input' });
             const lastName = await screen.findByLabelText('Recipient last name', { selector: 'input' });
-            const country = await screen.findAllByLabelText('Country');
+            const country = await screen.findAllByLabelText('Country/Region');
             const street = await screen.findAllByLabelText('Street');
             const houseNumber = await screen.findAllByLabelText('House number');
             const postalCode = await screen.findAllByLabelText('Postal code');

diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInput.scss b/packages/lib/src/components/internal/PhoneInput/PhoneInput.scss
@@ -22,7 +22,7 @@
             border-bottom-right-radius: 0;
 
             &::after {
-                left: 40px;
+                left: 60px;
                 box-sizing: revert;
                 height: 10px;
             }

diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInput.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInput.tsx
@@ -61,8 +61,6 @@ export function PhoneInput(props) {
                                 />
 
                                 <div className="adyen-checkout__phoneNumber">
-                                    <div>{data.phonePrefix}</div>
-
                                     <input
                                         type="tel"
                                         name={props.phoneName}

diff --git a/packages/lib/src/components/internal/PhoneInputNew/usePhonePrefixes.test.tsx b/packages/lib/src/components/internal/PhoneInputNew/usePhonePrefixes.test.tsx
@@ -6,15 +6,6 @@ import AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';
 
 jest.mock('../../../core/Services/get-dataset');
 
-const getFlagEmoji = ({ id }) => {
-    const codePoints: number[] = id
-        .toUpperCase()
-        .split('')
-        .map(char => 127397 + char.charCodeAt(0));
-
-    return String.fromCodePoint ? String.fromCodePoint(...codePoints) + '\u00A0\u00A0' : '';
-};
-
 describe('usePhonePrefixes', () => {
     const props = { allowedCountries: [], loadingContext: 'test', handleError: jest.fn() };
 
@@ -29,8 +20,8 @@ describe('usePhonePrefixes', () => {
         const { result } = renderHook(() => usePhonePrefixes(props));
         const expectedPrefixes = datasetMock.map(item => ({
             id: item.prefix,
-            name: `${getFlagEmoji(item)} ${item.prefix} (${item.id})`,
-            selectedOptionName: `${getFlagEmoji(item)} ${item.prefix}`
+            name: `${item.prefix} (${item.id})`,
+            selectedOptionName: item.prefix
         }));
         await waitFor(() => expect(result.current).toEqual({ loadingStatus: 'ready', phonePrefixes: expectedPrefixes }));
     });
@@ -46,8 +37,8 @@ describe('usePhonePrefixes', () => {
         const expectedPrefixes = [
             {
                 id: datasetMock[0].prefix,
-                name: `${getFlagEmoji(datasetMock[0])} ${datasetMock[0].prefix} (${datasetMock[0].id})`,
-                selectedOptionName: `${getFlagEmoji(datasetMock[0])} ${datasetMock[0].prefix}`
+                name: `${datasetMock[0].prefix} (${datasetMock[0].id})`,
+                selectedOptionName: `${datasetMock[0].prefix}`
             }
         ];
         await waitFor(() => expect(result.current).toEqual({ loadingStatus: 'ready', phonePrefixes: expectedPrefixes }));

diff --git a/packages/lib/src/components/internal/PhoneInputNew/usePhonePrefixes.ts b/packages/lib/src/components/internal/PhoneInputNew/usePhonePrefixes.ts
@@ -13,18 +13,11 @@ function usePhonePrefixes({ allowedCountries, loadingContext, handleError }): Ph
             .then(response => {
                 const countriesFilter = country => allowedCountries.includes(country.id);
                 const filteredCountries = allowedCountries.length ? response.filter(countriesFilter) : response;
-                const mappedCountries = filteredCountries.map(item => {
-                    // Get country flags (magic! - shifts the country code characters to the correct position of the emoji in the unicode space)
-                    const codePoints: number[] = item.id
-                        .toUpperCase()
-                        .split('')
-                        .map(char => 127397 + char.charCodeAt(0));
-
-                    // Get flag emoji + space at end (it doesn't work to add spaces in the template literal, below)
-                    const flag = String.fromCodePoint ? String.fromCodePoint(...codePoints) + '\u00A0\u00A0' : '';
-
-                    return { id: item.prefix, name: `${flag} ${item.prefix} (${item.id})`, selectedOptionName: `${flag} ${item.prefix}` };
-                });
+                const mappedCountries = filteredCountries.map(({ prefix, id }) => ({
+                    id: prefix,
+                    name: `${prefix} (${id})`,
+                    selectedOptionName: prefix
+                }));
 
                 setPhonePrefixes(mappedCountries || []);
                 setLoadingStatus('ready');

diff --git a/packages/lib/src/language/locales/ar.json b/packages/lib/src/language/locales/ar.json
@@ -74,7 +74,7 @@
     "billingAddress": "عنوان الفواتير",
     "street": "الشارع",
     "stateOrProvince": "الولاية أو المقاطعة",
-    "country": "البلد",
+    "country": "البلد/المنطقة",
     "houseNumberOrName": "رقم المنزل",
     "separateDeliveryAddress": "حدد عنوان تسليم منفصل",
     "deliveryAddress": "عنوان التسليم",
@@ -116,7 +116,7 @@
     "boleto.sendCopyToEmail": "إرسال نسخة إلى بريدي الإلكتروني",
     "button.copy": "نسخ",
     "button.download": "تنزيل",
-    "boleto.socialSecurityNumber.invalid": "الحقل غير صحيح",
+    "boleto.socialSecurityNumber.invalid": "أدخل رقم CPF/CNPJ صالحًا",
     "creditCard.storedCard.description.ariaLabel": "تنتهي البطاقة المخزنة في %@",
     "voucher.entity": "الكيان",
     "donateButton": "التبرع",
@@ -153,7 +153,7 @@
     "select.state": "حدد الولاية",
     "select.stateOrProvince": "حدد الولاية أو المقاطعة",
     "select.provinceOrTerritory": "حدد المقاطعة أو الإقليم",
-    "select.country": "حدد البلد",
+    "select.country": "حدد البلد/المنطقة",
     "select.noOptionsFound": "لا توجد خيارات",
     "select.filter.placeholder": "بحث...",
     "telephoneNumber.invalid": "رقم هاتف غير صحيح",

diff --git a/packages/lib/src/language/locales/cs-CZ.json b/packages/lib/src/language/locales/cs-CZ.json
@@ -74,7 +74,7 @@
     "billingAddress": "Fakturační adresa",
     "street": "Ulice",
     "stateOrProvince": "Kraj nebo okres",
-    "country": "Země",
+    "country": "Země/region",
     "houseNumberOrName": "Číslo popisné",
     "separateDeliveryAddress": "Zadat dodací adresu odlišnou od fakturační",
     "deliveryAddress": "Dodací adresa",
@@ -116,7 +116,7 @@
     "boleto.sendCopyToEmail": "Poslat mi kopii na e-mail",
     "button.copy": "Kopírovat",
     "button.download": "Stáhnout",
-    "boleto.socialSecurityNumber.invalid": "Pole není platné",
+    "boleto.socialSecurityNumber.invalid": "Zadejte platné číslo CPF/CNPJ",
     "creditCard.storedCard.description.ariaLabel": "Uložená karta končí na %@",
     "voucher.entity": "Subjekt",
     "donateButton": "Přispět",
@@ -153,7 +153,7 @@
     "select.state": "Vyberte stát",
     "select.stateOrProvince": "Vyberte kraj nebo okres",
     "select.provinceOrTerritory": "Vyberte provincii nebo teritorium",
-    "select.country": "Vyberte zemi",
+    "select.country": "Vyberte zemi/region",
     "select.noOptionsFound": "Nebyly nalezeny žádné možnosti",
     "select.filter.placeholder": "Hledat...",
     "telephoneNumber.invalid": "Neplatné telefonní číslo",

diff --git a/packages/lib/src/language/locales/da-DK.json b/packages/lib/src/language/locales/da-DK.json
@@ -74,7 +74,7 @@
     "billingAddress": "Faktureringsadresse",
     "street": "Gade",
     "stateOrProvince": "Region eller kommune",
-    "country": "Land",
+    "country": "Land/region",
     "houseNumberOrName": "Husnummer",
     "separateDeliveryAddress": "Angiv en separat leveringsadresse",
     "deliveryAddress": "Leveringsadresse",
@@ -117,7 +117,7 @@
     "button.copy": "Kopiér",
     "button.download": "Download",
     "boleto.socialSecurityNumber": "CPF / CNPJ",
-    "boleto.socialSecurityNumber.invalid": "Feltet er ugyldigt",
+    "boleto.socialSecurityNumber.invalid": "Indtast et gyldigt CPF/CNPJ-nummer",
     "creditCard.storedCard.description.ariaLabel": "Gemt kort ender på %@",
     "voucher.entity": "Enhed",
     "donateButton": "Giv et bidrag",
@@ -154,7 +154,7 @@
     "select.state": "Vælg stat",
     "select.stateOrProvince": "Vælg region eller kommune",
     "select.provinceOrTerritory": "Vælg provins eller territorium",
-    "select.country": "Vælg land",
+    "select.country": "Vælg land/region",
     "select.noOptionsFound": "Ingen muligheder fundet",
     "select.filter.placeholder": "Søg...",
     "telephoneNumber.invalid": "Ugyldigt telefonnummer",

diff --git a/packages/lib/src/language/locales/de-DE.json b/packages/lib/src/language/locales/de-DE.json
@@ -74,7 +74,7 @@
     "billingAddress": "Rechnungsadresse",
     "street": "Straße",
     "stateOrProvince": "Bundesland",
-    "country": "Land",
+    "country": "Land/Region",
     "houseNumberOrName": "Hausnummer",
     "separateDeliveryAddress": "Abweichende Lieferadresse angeben",
     "deliveryAddress": "Lieferadresse",
@@ -116,7 +116,7 @@
     "boleto.sendCopyToEmail": "Eine Kopie an meine E-Mail-Adresse senden",
     "button.copy": "Kopieren",
     "button.download": "Herunterladen",
-    "boleto.socialSecurityNumber.invalid": "Feld ist ungültig",
+    "boleto.socialSecurityNumber.invalid": "Geben Sie eine gültige CPF-/CNPJ-Nummer ein",
     "creditCard.storedCard.description.ariaLabel": "Gespeicherte Karte endet auf %@",
     "voucher.entity": "Entität",
     "donateButton": "Spenden",
@@ -153,7 +153,7 @@
     "select.state": "Bundesstaat auswählen",
     "select.stateOrProvince": "Bundesland oder Provinz/Region auswählen",
     "select.provinceOrTerritory": "Provinz oder Territorium auswählen",
-    "select.country": "Land auswählen",
+    "select.country": "Land/Region auswählen",
     "select.noOptionsFound": "Keine Optionen gefunden",
     "select.filter.placeholder": "Suche…",
     "telephoneNumber.invalid": "Ungültige Telefonnummer",

diff --git a/packages/lib/src/language/locales/el-GR.json b/packages/lib/src/language/locales/el-GR.json
@@ -74,7 +74,7 @@
     "billingAddress": "Διεύθυνση τιμολόγησης",
     "street": "Οδός",
     "stateOrProvince": "Πολιτεία ή επαρχία",
-    "country": "Χώρα",
+    "country": "Χώρα/Περιοχή",
     "houseNumberOrName": "Αριθμός οικίας",
     "separateDeliveryAddress": "Καθορίστε μια ξεχωριστή διεύθυνση παράδοσης",
     "deliveryAddress": "Διεύθυνση παράδοσης",
@@ -116,7 +116,7 @@
     "boleto.sendCopyToEmail": "Αποστολή αντιγράφου στη διεύθυνση email μου",
     "button.copy": "Αντιγραφή",
     "button.download": "Λήψη",
-    "boleto.socialSecurityNumber.invalid": "Το πεδίο δεν είναι έγκυρο",
+    "boleto.socialSecurityNumber.invalid": "Εισαγάγετε  έγκυρο αριθμό CPF/CNPJ",
     "creditCard.storedCard.description.ariaLabel": "Η αποθηκευμένη κάρτα τελειώνει σε %@",
     "voucher.entity": "Οντότητα",
     "donateButton": "Δωρεά",
@@ -153,7 +153,7 @@
     "select.state": "Επιλέξτε πολιτεία",
     "select.stateOrProvince": "Επιλέξτε πολιτεία ή επαρχία",
     "select.provinceOrTerritory": "Επιλέξτε επαρχία ή περιφέρεια",
-    "select.country": "Επιλέξτε χώρα",
+    "select.country": "Επιλέξτε χώρα/περιοχή",
     "select.noOptionsFound": "Δεν βρέθηκαν επιλογές",
     "select.filter.placeholder": "Αναζήτηση...",
     "telephoneNumber.invalid": "Μη έγκυρος αριθμός τηλεφώνου",

diff --git a/packages/lib/src/language/locales/en-US.json b/packages/lib/src/language/locales/en-US.json
@@ -74,7 +74,7 @@
     "billingAddress": "Billing address",
     "street": "Street",
     "stateOrProvince": "State or province",
-    "country": "Country",
+    "country": "Country/Region",
     "houseNumberOrName": "House number",
     "separateDeliveryAddress": "Specify a separate delivery address",
     "deliveryAddress": "Delivery Address",
@@ -117,7 +117,7 @@
     "button.copy": "Copy",
     "button.download": "Download",
     "boleto.socialSecurityNumber": "CPF/CNPJ",
-    "boleto.socialSecurityNumber.invalid": "Field is not valid",
+    "boleto.socialSecurityNumber.invalid": "Enter a valid CPF/CNPJ number",
     "creditCard.storedCard.description.ariaLabel": "Stored card ends in %@",
     "voucher.entity": "Entity",
     "donateButton": "Donate",
@@ -154,7 +154,7 @@
     "select.state": "Select state",
     "select.stateOrProvince": "Select state or province",
     "select.provinceOrTerritory": "Select province or territory",
-    "select.country": "Select country",
+    "select.country": "Select country/region",
     "select.noOptionsFound": "No options found",
     "select.filter.placeholder": "Search...",
     "telephoneNumber.invalid": "Invalid telephone number",

diff --git a/packages/lib/src/language/locales/es-ES.json b/packages/lib/src/language/locales/es-ES.json
@@ -72,7 +72,7 @@
     "billingAddress": "Dirección de facturación",
     "street": "Calle",
     "stateOrProvince": "Provincia o estado",
-    "country": "País",
+    "country": "País o región",
     "houseNumberOrName": "Número de vivienda",
     "separateDeliveryAddress": "Especificar otra dirección de envío",
     "deliveryAddress": "Dirección de envío",
@@ -114,7 +114,7 @@
     "boleto.sendCopyToEmail": "Enviar copia a mi correo electrónico",
     "button.copy": "Copiar",
     "button.download": "Descargar",
-    "boleto.socialSecurityNumber.invalid": "Campo no válido",
+    "boleto.socialSecurityNumber.invalid": "Introduzca un número CPF/CNPJ válido",
     "creditCard.storedCard.description.ariaLabel": "La tarjeta almacenada termina en %@",
     "voucher.entity": "Entidad",
     "donateButton": "Donar",
@@ -150,7 +150,7 @@
     "select.state": "Seleccione el estado",
     "select.stateOrProvince": "Seleccione el estado o provincia",
     "select.provinceOrTerritory": "Seleccione la provincia o territorio",
-    "select.country": "Seleccione el país",
+    "select.country": "Seleccione el país o la región",
     "select.noOptionsFound": "No se encontraron opciones",
     "select.filter.placeholder": "Buscar...",
     "telephoneNumber.invalid": "El número de teléfono no es válido",

diff --git a/packages/lib/src/language/locales/fi-FI.json b/packages/lib/src/language/locales/fi-FI.json
@@ -74,7 +74,7 @@
     "billingAddress": "Laskutusosoite",
     "street": "Katu",
     "stateOrProvince": "Osavaltio tai lääni",
-    "country": "Maa",
+    "country": "Maa/alue",
     "houseNumberOrName": "Talon numero",
     "separateDeliveryAddress": "Määritä erillinen toimitusosoite",
     "deliveryAddress": "Toimitusosoite",
@@ -116,7 +116,7 @@
     "boleto.sendCopyToEmail": "Lähetä kopio sähköpostiini",
     "button.copy": "Kopio",
     "button.download": "Lataa",
-    "boleto.socialSecurityNumber.invalid": "Kenttä ei kelpaa",
+    "boleto.socialSecurityNumber.invalid": "Anna kelvollinen CPF- tai CNPJ-numero.",
     "creditCard.storedCard.description.ariaLabel": "Tallennetun kortin viimeiset luvut ovat %@",
     "voucher.entity": "Kokonaisuus",
     "donateButton": "Lahjoita",
@@ -153,7 +153,7 @@
     "select.state": "Valitse osavaltio",
     "select.stateOrProvince": "Valitse osavaltio tai lääni",
     "select.provinceOrTerritory": "Valitse maakunta tai alue",
-    "select.country": "Valitse maa",
+    "select.country": "Valitse maa/alue",
     "select.noOptionsFound": "Vaihtoehtoja ei löytynyt",
     "select.filter.placeholder": "Hae...",
     "telephoneNumber.invalid": "Ei-kelvollinen puhelinnumero",

diff --git a/packages/lib/src/language/locales/fr-FR.json b/packages/lib/src/language/locales/fr-FR.json
@@ -74,7 +74,7 @@
     "billingAddress": "Adresse de facturation",
     "street": "Rue",
     "stateOrProvince": "État ou province",
-    "country": "Pays",
+    "country": "Pays/Région",
     "houseNumberOrName": "Numéro de rue",
     "separateDeliveryAddress": "Indiquer une adresse de livraison distincte",
     "deliveryAddress": "Adresse de livraison",
@@ -116,7 +116,7 @@
     "boleto.sendCopyToEmail": "Envoyer une copie à mon adresse e-mail",
     "button.copy": "Copier",
     "button.download": "Télécharger",
-    "boleto.socialSecurityNumber.invalid": "Champ non valide",
+    "boleto.socialSecurityNumber.invalid": "Saisissez un numéro CPF/CNPJ valide",
     "creditCard.storedCard.description.ariaLabel": "La carte enregistrée se termine en %@",
     "voucher.entity": "Entité",
     "donateButton": "Faire un don",
@@ -153,7 +153,7 @@
     "select.state": "Sélectionnez l'État",
     "select.stateOrProvince": "Sélectionnez l'État ou la province",
     "select.provinceOrTerritory": "Sélectionnez la province ou le territoire",
-    "select.country": "Sélectionnez le pays",
+    "select.country": "Sélectionnez le pays/la région",
     "select.noOptionsFound": "Aucune option trouvée",
     "select.filter.placeholder": "Recherche...",
     "telephoneNumber.invalid": "Numéro de téléphone incorrect",

diff --git a/packages/lib/src/language/locales/hr-HR.json b/packages/lib/src/language/locales/hr-HR.json
@@ -74,7 +74,7 @@
     "billingAddress": "Adresa za račun",
     "street": "Ulica",
     "stateOrProvince": "Država ili pokrajina",
-    "country": "Zemlja",
+    "country": "Zemlja/regija",
     "houseNumberOrName": "Kućni broj",
     "separateDeliveryAddress": "Navedite zasebnu adresu za dostavu",
     "deliveryAddress": "Adresa za dostavu",
@@ -116,7 +116,7 @@
     "boleto.sendCopyToEmail": "Pošalji kopiju na moju e-poštu",
     "button.copy": "Kopiraj",
     "button.download": "Preuzmi",
-    "boleto.socialSecurityNumber.invalid": "Polje je nevažeće",
+    "boleto.socialSecurityNumber.invalid": "Unesite valjani CPF/CNPJ broj",
     "creditCard.storedCard.description.ariaLabel": "Pohranjena kartica završava na %@",
     "voucher.entity": "Entitet",
     "donateButton": "Doniraj",
@@ -153,7 +153,7 @@
     "select.state": "Odaberite saveznu državu",
     "select.stateOrProvince": "Odaberite državu ili provinciju",
     "select.provinceOrTerritory": "Odaberite provinciju ili teritorij",
-    "select.country": "Odaberite državu",
+    "select.country": "Odaberite zemlju/regiju",
     "select.noOptionsFound": "Nije pronađena nijedna opcija",
     "select.filter.placeholder": "Traži...",
     "telephoneNumber.invalid": "Nevažeći telefonski broj",