feat: implemented restricted country implementation

src/common-components/data/actions.js

@@ -13,9 +13,15 @@ export const getThirdPartyAuthContextBegin = () => ({
   type: THIRD_PARTY_AUTH_CONTEXT.BEGIN,
 });
 
-export const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalFields, thirdPartyAuthContext) => ({
+export const getThirdPartyAuthContextSuccess = (
+  fieldDescriptions,
+  optionalFields,
+  thirdPartyAuthContext,
+  countries) => ({
   type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
-  payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+  payload: {
+    fieldDescriptions, optionalFields, thirdPartyAuthContext, countries,
+  },
 });
 
 export const getThirdPartyAuthContextFailure = () => ({

src/common-components/data/constants.js

@@ -77,3 +77,7 @@ export const progressiveProfilingFields = {
     },
   },
 };
+
+export const FIELD_LABELS = {
+  COUNTRY: 'country',
+};

src/common-components/data/reducers.js

@@ -35,6 +35,7 @@ const reducer = (state = defaultState, action = {}) => {
         optionalFields: action.payload.optionalFields,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
         thirdPartyAuthApiStatus: COMPLETE_STATE,
+        countries: action.payload.countries,
       };
     }
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:

src/common-components/data/sagas.js

@@ -10,6 +10,7 @@ import {
 } from './actions';
 import { progressiveProfilingFields, registerFields } from './constants';
 import {
+  getCountryList,
   getThirdPartyAuthContext,
 } from './service';
 import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
@@ -20,6 +21,7 @@ export function* fetchThirdPartyAuthContext(action) {
     const {
       fieldDescriptions, optionalFields, thirdPartyAuthContext,
     } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
+    const countries = (yield call(getCountryList)) || [];
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
     // hard code country field, level of education and gender fields
@@ -28,9 +30,10 @@ export function* fetchThirdPartyAuthContext(action) {
         registerFields,
         progressiveProfilingFields,
         thirdPartyAuthContext,
+        countries,
       ));
     } else {
-      yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
+      yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext, countries));
     }
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());

src/common-components/data/service.js

@@ -1,5 +1,8 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
+
+import { FIELD_LABELS } from './constants';
 
 // eslint-disable-next-line import/prefer-default-export
 export async function getThirdPartyAuthContext(urlParams) {
@@ -23,3 +26,28 @@
     thirdPartyAuthContext: data.contextData || {},
   };
 }
+
+function extractCountryList(data) {
+  return data?.fields
+    .find(({ name }) => name === FIELD_LABELS.COUNTRY)
+    ?.options?.map(({ value, name }) => ({ code: value, name })) || [];
+}
+
+export async function getCountryList() {
+  try {
+    const requestConfig = {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      isPublic: true,
+    };
+
+    const { data } = await getAuthenticatedHttpClient()
+      .get(
+      `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`,
+      requestConfig,
+      );
+    return extractCountryList(data);
+  } catch (e) {
+    logError(e);
+    return [];
+  }
+}

src/common-components/data/tests/sagas.test.js

@@ -8,6 +8,11 @@ import * as api from '../service';
 
 const { loggingService } = initializeMockLogging();
 
+jest.mock('../service', () => ({
+  getCountryList: jest.fn(),
+  getThirdPartyAuthContext: jest.fn(),
+}));
+
 describe('fetchThirdPartyAuthContext', () => {
   const params = {
     payload: { urlParams: {} },
@@ -31,6 +36,7 @@ describe('fetchThirdPartyAuthContext', () => {
         thirdPartyAuthContext: data,
         fieldDescriptions: {},
         optionalFields: {},
+        countries: [],
       }));
 
     const dispatched = [];
@@ -44,7 +50,7 @@ describe('fetchThirdPartyAuthContext', () => {
     expect(dispatched).toEqual([
       actions.getThirdPartyAuthContextBegin(),
       setCountryFromThirdPartyAuthContext(),
-      actions.getThirdPartyAuthContextSuccess({}, {}, data),
+      actions.getThirdPartyAuthContextSuccess({}, {}, data, []),
     ]);
     getThirdPartyAuthContext.mockClear();
   });

src/register/RegistrationPage.jsx

@@ -93,6 +93,7 @@ const RegistrationPage = (props) => {
   const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
   const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
   const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
+  const countries = useSelector(state => state.commonComponents.countries);
 
   const backendValidations = useSelector(getBackendValidations);
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
@@ -392,6 +393,7 @@ const RegistrationPage = (props) => {
                   setFormFields={setConfigurableFormFields}
                   autoSubmitRegisterForm={autoSubmitRegForm}
                   fieldDescriptions={fieldDescriptions}
+                  countries={countries}
                 />
                 <StatefulButton
                   id="register-user"

src/register/components/ConfigurableRegistrationForm.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
@@ -37,6 +37,7 @@ const ConfigurableRegistrationForm = (props) => {
     setFieldErrors,
     setFormFields,
     autoSubmitRegistrationForm,
+    countries,
   } = props;
   const dispatch = useDispatch();
 
@@ -45,10 +46,6 @@ const ConfigurableRegistrationForm = (props) => {
   confused and unable to create an account. So we added the United States entry in the dropdown list.
  */
 
-  const countryList = useMemo(() => (
-    getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]).filter(country => country.code !== 'RU')
-  ), []);
-
   let showTermsOfServiceAndHonorCode = false;
   let showCountryField = false;
 
@@ -82,6 +79,17 @@ const ConfigurableRegistrationForm = (props) => {
     }
   }, [autoSubmitRegistrationForm]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const removeDisabledCountries = useCallback((countryList) => {
+    if (!countries.length) {
+      return countryList;
+    }
+    const allowedCountries = new Set(countries.map(({ code }) => code));
+    return countryList.filter(({ code }) => allowedCountries.has(code));
+  }, [countries]);
+
+  const countryList = useMemo(() => removeDisabledCountries(
+    getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []), [removeDisabledCountries]);
+
   const handleErrorChange = (fieldName, error) => {
     if (fieldName) {
       setFieldErrors(prevErrors => ({
@@ -262,11 +270,16 @@ ConfigurableRegistrationForm.propTypes = {
   setFieldErrors: PropTypes.func.isRequired,
   setFormFields: PropTypes.func.isRequired,
   autoSubmitRegistrationForm: PropTypes.bool,
+  countries: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  })),
 };
 
 ConfigurableRegistrationForm.defaultProps = {
   fieldDescriptions: {},
   autoSubmitRegistrationForm: false,
+  countries: [],
 };
 
 export default ConfigurableRegistrationForm;

src/register/components/tests/ConfigurableRegistrationForm.test.jsx

@@ -192,6 +192,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
         autoSubmitRegistrationForm: true,
+        countries: [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }],
       };
 
       render(routerWrapper(reduxWrapper(