Remove accents from country labels to match geo detected country data (#39110)

* Remove accent for comparison

* Add changelog

* Use localCompare instead

packages/js/onboarding/changelog/fix-38947-geolocation-compare-issue

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Remove accent from country labels when comparing against geo detected country

packages/js/onboarding/src/utils/countries/index.ts

@@ -51,6 +51,9 @@ export const findCountryOption = (
 			countryCode === location.country_short &&
 			option.label.includes( '—' )
 		) {
+			// WP GEO API Returns regions without accents.
+			// Remove accents from the region to compare.
+			// Málaga -> Malaga
 			const wcRegion = option.label.split( '—' )[ 1 ].trim();
 
 			// Region matches exactly with mapping.
@@ -58,6 +61,17 @@ export const findCountryOption = (
 				return option;
 			}
 
+			if (
+				wcRegion.localeCompare( location.region || '', 'en', {
+					sensitivity: 'base',
+				} ) === 0 ||
+				wcRegion.localeCompare( location.city || '', 'en', {
+					sensitivity: 'base',
+				} ) === 0
+			) {
+				return option;
+			}
+
 			// Find the region with the highest similarity.
 			const similarity = Math.max(
 				stringSimilarity.compareTwoStrings(
@@ -81,7 +95,7 @@ export const findCountryOption = (
 /**
  * Returns just the country portion of a country:state string that is delimited with a colon.
  *
- * @param  countryPossiblyWithState Country string that may or may not have a state. e.g 'US:CA', 'UG:UG312'
+ * @param countryPossiblyWithState Country string that may or may not have a state. e.g 'US:CA', 'UG:UG312'
  * @return Just the country portion of the string, or undefined if input is undefined. e.g 'US', 'UG'
  */
 export const getCountry = ( countryPossiblyWithState: string ) =>

packages/js/onboarding/src/utils/countries/tests/utils/index.test.ts

@@ -21,6 +21,18 @@ describe( 'findCountryOption', () => {
 		expect( findCountryOption( countryStateOptions, location ) ).toBeNull();
 	} );
 
+	it( 'should ignore accents for comparsion', () => {
+		const location = {
+			city: 'Malaga',
+			region: 'Andalucia',
+			country_short: 'ES',
+		};
+		expect( findCountryOption( countryStateOptions, location ) ).toEqual( {
+			key: 'ES:MA',
+			label: 'Spain — Málaga',
+		} );
+	} );
+
 	it.each( [
 		{
 			location: { country_short: 'TW' },