change: [M3-8009] - Upgrade country-region-data to 3.0.0

packages/manager/.changeset/pr-10464-tech-stories-1715711350251.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Upgrade country-region-data to 3.0.0 ([#10464](https://github.com/linode/manager/pull/10464))

packages/manager/package.json

@@ -32,7 +32,7 @@
     "braintree-web": "^3.92.2",
     "chart.js": "~2.9.4",
     "copy-to-clipboard": "^3.0.8",
-    "country-region-data": "^1.4.5",
+    "country-region-data": "^3.0.0",
     "dompurify": "^3.1.0",
     "flag-icons": "^6.6.5",
     "font-logos": "^0.18.0",

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx

@@ -1,6 +1,6 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
-import countryData from 'country-region-data';
+import Grid from '@mui/material/Unstable_Grid2';
+import { allCountries } from 'country-region-data';
 import * as React from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
@@ -113,10 +113,23 @@ const ContactInformation = (props: Props) => {
     }
   }, [editContactDrawerOpen, history.location.state]);
 
-  // Finding the country from the countryData JSON
-  const countryName = countryData?.find(
-    (_country) => _country.countryShortCode === country
-  )?.countryName;
+  /**
+   * Finding the country from the countryData JSON
+   * `country-region-data` mapping:
+   *
+   * COUNTRY
+   * - country[0] is the readable name of the country (e.g. "United States")
+   * - country[1] is the ISO 3166-1 alpha-2 code of the country (e.g. "US")
+   * - country[2] is an array of regions for the country
+   *
+   * REGION
+   * - region[0] is the readable name of the region (e.g. "Alabama")
+   * - region[1] is the ISO 3166-2 code of the region (e.g. "AL")
+   */
+  const countryName = allCountries?.find((_country) => {
+    const countryCode = _country[1];
+    return countryCode === country;
+  })?.[0];
 
   const sxGrid = {
     flex: 1,

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx

@@ -1,7 +1,6 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import countryData, { Region } from 'country-region-data';
+import { allCountries } from 'country-region-data';
 import { useFormik } from 'formik';
-import { pathOr } from 'ramda';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -16,8 +15,6 @@ import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useProfile } from 'src/queries/profile';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
-import { Country } from './types';
-
 interface Props {
   focusEmail: boolean;
   onClose: () => void;
@@ -107,36 +104,44 @@ const UpdateContactInformationForm = ({ focusEmail, onClose }: Props) => {
 
   const generalError = errorMap.none;
 
-  const countryResults: Item<string>[] = countryData.map((country: Country) => {
+  /**
+   * `country-region-data` mapping:
+   *
+   * COUNTRY
+   * - country[0] is the readable name of the country (e.g. "United States")
+   * - country[1] is the ISO 3166-1 alpha-2 code of the country (e.g. "US")
+   * - country[2] is an array of regions for the country
+   *
+   * REGION
+   * - region[0] is the readable name of the region (e.g. "Alabama")
+   * - region[1] is the ISO 3166-2 code of the region (e.g. "AL")
+   */
+  const countryResults: Item<string>[] = allCountries.map((country) => {
     return {
-      label: country.countryName,
-      value: country.countryShortCode,
+      label: country[0],
+      value: country[1],
     };
   });
 
-  const currentCountryResult = countryData.filter((country: Country) =>
+  const currentCountryResult = allCountries.filter((country) =>
     formik.values.country
-      ? country.countryShortCode === formik.values.country
-      : country.countryShortCode === account?.country
+      ? country[1] === formik.values.country
+      : country[1] === account?.country
   );
 
-  const countryRegions: Region[] = pathOr(
-    [],
-    ['0', 'regions'],
-    currentCountryResult
-  );
+  const countryRegions = currentCountryResult?.[0]?.[2] ?? [];
 
   const regionResults = countryRegions.map((region) => {
-    if (formik.values.country === 'US' && region.name === 'Virgin Islands') {
+    if (formik.values.country === 'US' && region[0] === 'Virgin Islands') {
       return {
         label: 'Virgin Islands, U.S.',
-        value: region.shortCode,
+        value: region[1],
       };
     }
 
     return {
-      label: region.name,
-      value: region.shortCode,
+      label: region[0],
+      value: region[1],
     };
   });
 

yarn.lock

@@ -5951,10 +5951,10 @@ cosmiconfig@^8.1.3:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
-country-region-data@^1.4.5:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/country-region-data/-/country-region-data-1.11.0.tgz#ffaeb70c1b23b44556b3b8b2307fc665ad4b663a"
-  integrity sha512-DmhrMor9U7e0RE5sOtNvjWdhzYeg+uYcREWFYwpfDvxV8kJvz04nNY/ONn+tnZ0PNtallocWArlymwuzAZc5Pw==
+country-region-data@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/country-region-data/-/country-region-data-3.0.0.tgz#9251cff57c22e450cbe96a7e50a3a23362d4304a"
+  integrity sha512-jpZwc6coXayi3aAv2HHTC9vhwRJB2zdur+coBlIZo1IVMonzylRR4Asf5j7evtUzdZPODdHrJ8CzEFK6MGUAgg==
 
 create-eslint-index@^1.0.0:
   version "1.0.0"