Revert "Revert "feat: Use country-state-city to populate state dropdo…

…wn in StateProvinceFormInput"" (#856)

* Revert "Revert "feat: Use country-state-city to populate state dropdown in St…"

This reverts commit 9dc662f.

* test: Update CardHolderInformation test with new getCountryStatesMap

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/CardHolderInformation.test.jsx

@@ -13,16 +13,16 @@ import { createStore } from 'redux';
 import CardHolderInformation from './CardHolderInformation';
 import PaymentForm from './PaymentForm';
 import createRootReducer from '../../../data/reducers';
-import countryStatesMap from './utils/countryStatesMap';
+import { getCountryStatesMap, isPostalCodeRequired } from './utils/form-validators';
 
 import '../../__factories__/userAccount.factory';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
-jest.mock('./utils/countryStatesMap', () => ({
-  __esModule: true,
-  default: jest.fn(),
+jest.mock('./utils/form-validators', () => ({
+  getCountryStatesMap: jest.fn(),
+  isPostalCodeRequired: jest.fn(),
 }));
 
 configureI18n({
@@ -73,7 +73,8 @@ describe('<CardHolderInformation />', () => {
 
       fireEvent.change(screen.getByLabelText('Country (required)'), { target: { value: 'US' } });
 
-      expect(countryStatesMap).toHaveBeenCalledWith('US');
+      expect(getCountryStatesMap).toHaveBeenCalledWith('US');
+      expect(isPostalCodeRequired).toHaveBeenCalledWith('US');
     });
   });
   describe('purchasedForOrganization field', () => {

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

@@ -125,16 +125,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: '',
@@ -144,7 +163,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;
   }