feat: Use country-state-city to populate state dropdown in StateProvi…

…nceFormInput (openedx#849)

REV-3842

package.json

@@ -47,6 +47,7 @@
     "bootstrap": "4.6.1",
     "classnames": "^2.3.1",
     "core-js": "^3.23.5",
+    "country-state-city": "^3.2.1",
     "form-urlencoded": "^6.0.6",
     "lodash.camelcase": "^4.3.0",
     "lodash.snakecase": "^4.1.1",

src/payment/checkout/payment-form/StateProvinceFormInput.jsx

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 
+import { getCountryStatesMap } from './utils/form-validators';
 import FormInput from './FormInput';
 import FormSelect from './FormSelect';
-import getStates from './utils/countryStatesMap';
 import messages from './StateProvinceFormInput.messages';
 
 class StateProvinceFormInput extends React.Component {
   getOptions() {
     const options = [];
     const { country } = this.props;
-    const states = getStates(country);
+    const states = getCountryStatesMap(country);
 
     if (states) {
       options.push([(

src/payment/checkout/payment-form/StripePaymentForm.test.jsx

@@ -128,16 +128,35 @@ describe('<StripePaymentForm />', () => {
           lastName: '',
           address: '',
           city: '',
-          country: 'GB',
+          country: 'AQ', // Antarctica does not have states, postal code not required
+          optionalField: '',
+        },
+        {
+          firstName: '',
+          lastName: '',
+          address: '',
+          city: '',
+          country: 'GB', // United Kingdom has states, state becomes required, postal code is required
           postalCode: '',
+          state: '',
+          optionalField: '',
+        },
+        {
+          firstName: '',
+          lastName: '',
+          address: '',
+          city: '',
+          country: 'CA', // Canada state and postal code are required
+          postalCode: '',
+          state: '',
           optionalField: '',
         },
         {
           firstName: '',
           lastName: '',
           address: '',
           city: '',
-          country: 'US',
+          country: 'US', // United States state and postal code are required
           postalCode: '',
           state: '',
           optionalField: '',
@@ -147,7 +166,7 @@ describe('<StripePaymentForm />', () => {
           lastName: '',
           address: '',
           city: '',
-          country: 'IN',
+          country: 'IN', // India state is required
           state: '',
           optionalField: '',
         },

src/payment/checkout/payment-form/utils/form-validators.js

@@ -1,4 +1,18 @@
-import getStates from './countryStatesMap';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { State } from 'country-state-city';
+
+export const getCountryStatesMap = (country) => {
+  const states = State.getStatesOfCountry(country);
+
+  if (!states.length) {
+    return null;
+  }
+  const statesMap = {};
+  states.forEach((state) => {
+    statesMap[state.isoCode] = state.name;
+  });
+  return country && statesMap;
+};
 
 // eslint-disable-next-line import/prefer-default-export
 export function isPostalCodeRequired(selectedCountry) {
@@ -39,7 +53,9 @@ export function getRequiredFields(fieldValues, isBulkOrder = false, enableStripe
     requiredFields.postalCode = postalCode;
   }
 
-  if (getStates(country)) {
+  // By using the country-state-city library to populate states, every country that
+  //  has states from the ISO 3166-2 list will have states as a required field
+  if (getCountryStatesMap(country)) {
     requiredFields.state = state;
   }