dev: moved geolocation utils from wccom to here (woocommerce#38356)

packages/js/onboarding/changelog/dev-move-geolocation-utils

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Moved geolocation country matching functions to @woocommerce/onboarding

packages/js/onboarding/jest.config.json

@@ -0,0 +1,4 @@
+{
+	"rootDir": "./src",
+	"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
+}

packages/js/onboarding/package.json

@@ -37,14 +37,19 @@
 		"@wordpress/components": "wp-6.0",
 		"@wordpress/element": "wp-6.0",
 		"@wordpress/i18n": "wp-6.0",
+		"string-similarity": "4.0.4",
 		"gridicons": "^3.4.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.17.5",
+		"@testing-library/react": "^12.1.3",
+		"@types/string-similarity" : "4.0.0",
 		"@types/wordpress__components": "^19.10.3",
 		"@types/wordpress__data": "^6.0.0",
+		"@types/jest": "^27.4.1",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
+		"@woocommerce/internal-js-tests": "workspace:*",
 		"@wordpress/browserslist-config": "wp-6.0",
 		"css-loader": "^3.6.0",
 		"eslint": "^8.32.0",
@@ -62,6 +67,7 @@
 	},
 	"scripts": {
 		"turbo:build": "pnpm run build:js && pnpm run build:css",
+		"turbo:test": "jest --config ./jest.config.json",
 		"prepare": "composer install",
 		"changelog": "composer exec -- changelogger",
 		"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
@@ -70,12 +76,15 @@
 		"build:js": "tsc --project tsconfig.json && tsc --project tsconfig-cjs.json",
 		"build:css": "webpack",
 		"start": "concurrently \"tsc --project tsconfig.json --watch\" \"tsc --project tsconfig-cjs.json --watch\" \"webpack --watch\"",
+		"test": "pnpm -w exec turbo run turbo:test --filter=$npm_package_name",
 		"prepack": "pnpm run clean && pnpm run build",
-		"lint:fix": "eslint src --fix"
+		"lint:fix": "eslint src --fix",
+		"test-staged": "jest --bail --config ./jest.config.json --findRelatedTests"
 	},
 	"lint-staged": {
 		"*.(t|j)s?(x)": [
-			"pnpm lint:fix"
+			"pnpm lint:fix",
+			"pnpm test-staged"
 		]
 	}
 }

packages/js/onboarding/src/index.ts

@@ -15,3 +15,4 @@ export { WooPaymentGatewayConfigure } from './components/WooPaymentGatewayConfig
 export { WooOnboardingTaskListItem } from './components/WooOnboardingTaskListItem';
 export { WooOnboardingTaskListHeader } from './components/WooOnboardingTaskListHeader';
 export { WooOnboardingTask } from './components/WooOnboardingTask';
+export * from './utils/countries';

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

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import stringSimilarity from 'string-similarity';
+
+/**
+ * Internal dependencies
+ */
+import { getMappingRegion } from './location-mapping';
+
+/**
+ * Country state option.
+ */
+export type CountryStateOption = {
+	key: string;
+	label: string;
+};
+
+export type Location = {
+	country_short?: string;
+	region?: string;
+	city?: string;
+};
+
+/**
+ * Returns a country option for the given location.
+ */
+export const findCountryOption = (
+	countryStateOptions: CountryStateOption[],
+	location: Location | undefined,
+	minimumSimilarity = 0.7
+) => {
+	if ( ! location ) {
+		return null;
+	}
+
+	let match = null;
+	let matchSimilarity = minimumSimilarity;
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return -- don't want to put this inside the loop
+	const mappingRegion = getMappingRegion( location );
+
+	for ( const option of countryStateOptions ) {
+		// Country matches exactly.
+		if ( option.key === location.country_short ) {
+			return option;
+		}
+
+		// Countries have regions such as 'US:CA'.
+		const countryCode = option.key.split( ':' )[ 0 ];
+		if (
+			countryCode === location.country_short &&
+			option.label.includes( '—' )
+		) {
+			const wcRegion = option.label.split( '—' )[ 1 ].trim();
+
+			// Region matches exactly with mapping.
+			if ( mappingRegion === wcRegion ) {
+				return option;
+			}
+
+			// Find the region with the highest similarity.
+			const similarity = Math.max(
+				stringSimilarity.compareTwoStrings(
+					wcRegion,
+					location.region || ''
+				),
+				stringSimilarity.compareTwoStrings(
+					wcRegion,
+					location.city || ''
+				)
+			);
+			if ( similarity >= matchSimilarity ) {
+				match = option;
+				matchSimilarity = similarity;
+			}
+		}
+	}
+	return match;
+};

packages/js/onboarding/src/utils/countries/location-mapping.ts

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Location } from '.';
+
+/**
+ * This file is used to map a location to a WC region label
+ * so that we can find the correct country option
+ * since WPCOM geolocation returns a different
+ * region or city name.
+ */
+
+// Key is the country code, value is an object with keys as region/city names and values as WC region labels.
+const MAPPING: Record< string, Record< string, string > > = {
+	PH: {
+		'National Capital Region': __( 'Metro Manila', 'woocommerce' ),
+	},
+	IT: {
+		Rome: __( 'Roma', 'woocommerce' ),
+	},
+};
+
+/**
+ * Returns a WC mapping region name for the given country, region and city.
+ */
+export const getMappingRegion = ( {
+	country_short: countryCode,
+	region = '',
+	city = '',
+}: Location ) => {
+	if ( ! countryCode ) {
+		return null;
+	}
+
+	const countryMapping = MAPPING[ countryCode ];
+	if ( ! countryMapping ) {
+		return null;
+	}
+
+	const regionMapping = countryMapping[ region ];
+	if ( regionMapping ) {
+		return regionMapping;
+	}
+
+	const cityMapping = countryMapping[ city ];
+	if ( cityMapping ) {
+		return cityMapping;
+	}
+
+	return null;
+};
+
+export default MAPPING;