feat: implemented restricted countries functionalities

src/account-settings/AccountSettingsPage.jsx

@@ -120,7 +120,10 @@ class AccountSettingsPage extends React.Component {
     countryOptions: [{
       value: '',
       label: this.props.intl.formatMessage(messages['account.settings.field.country.options.empty']),
-    }].concat(getCountryList(locale).map(({ code, name }) => ({ value: code, label: name }))),
+    }].concat(this.removeDisabledCountries(
+      getCountryList(locale)
+        .map(({ code, name }) => ({ value: code, label: name, disabled: this.isDisabledCountry(code) })),
+    )),
     stateOptions: [{
       value: '',
       label: this.props.intl.formatMessage(messages['account.settings.field.state.options.empty']),
@@ -147,11 +150,28 @@ class AccountSettingsPage extends React.Component {
     })),
   }));
 
+  removeDisabledCountries = (countryList) => {
+    const { countries, committedValues } = this.props;
+    const countriesCodes = new Set(this.props.countries.map(countryObj => countryObj.value));
+
+    if (!countries.length) {
+      return countryList;
+    }
+
+    return countryList.filter(({ value }) => {
+      const isUserCountry = value === committedValues.country || countriesCodes.has(value);
+      return isUserCountry;
+    });
+  };
+
   handleEditableFieldChange = (name, value) => {
     this.props.updateDraft(name, value);
   };
 
   handleSubmit = (formId, values) => {
+    if (formId === 'country' && this.isDisabledCountry(values)) {
+      return;
+    }
     const { formValues } = this.props;
     let extendedProfileObject = {};
 
@@ -193,6 +213,13 @@ class AccountSettingsPage extends React.Component {
     }
   };
 
+  isDisabledCountry = (country) => {
+    const { countries } = this.props;
+    const countriesCodes = new Set(countries.map(countryObj => countryObj.value));
+
+    return !countriesCodes.has(country);
+  };
+
   isEditable(fieldName) {
     return !this.props.staticFields.includes(fieldName);
   }
@@ -466,7 +493,8 @@ class AccountSettingsPage extends React.Component {
     } = this.getLocalizedOptions(this.context.locale, this.props.formValues.country);
 
     // Show State field only if the country is US (could include Canada later)
-    const showState = this.props.formValues.country === COUNTRY_WITH_STATES;
+    const { country } = this.props.formValues;
+    const showState = country === COUNTRY_WITH_STATES && !this.isDisabledCountry(country);
     const { verifiedName } = this.props;
 
     const hasWorkExperience = !!this.props.formValues?.extended_profile?.find(field => field.field_name === 'work_experience');
@@ -870,6 +898,7 @@ AccountSettingsPage.propTypes = {
     name: PropTypes.string,
     useVerifiedNameForCerts: PropTypes.bool,
     verified_name: PropTypes.string,
+    country: PropTypes.string,
   }),
   drafts: PropTypes.shape({}),
   formErrors: PropTypes.shape({
@@ -928,6 +957,12 @@ AccountSettingsPage.propTypes = {
   ),
   navigate: PropTypes.func.isRequired,
   location: PropTypes.string.isRequired,
+  countries: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    }),
+  ),
 };
 
 AccountSettingsPage.defaultProps = {
@@ -953,6 +988,7 @@ AccountSettingsPage.defaultProps = {
   verifiedName: null,
   mostRecentVerifiedName: {},
   verifiedNameHistory: [],
+  countries: [],
 };
 
 export default withLocation(withNavigate(connect(accountSettingsPageSelector, {

src/account-settings/EditableSelectField.jsx

@@ -107,6 +107,7 @@ const EditableSelectField = (props) => {
             <option
               value={subOption.value}
               key={`${subOption.value}-${subOption.label}`}
+              disabled={subOption?.disabled}
             >
               {subOption.label}
             </option>
@@ -115,7 +116,7 @@ const EditableSelectField = (props) => {
       );
     }
     return (
-      <option value={option.value} key={`${option.value}-${option.label}`}>
+      <option value={option.value} key={`${option.value}-${option.label}`} disabled={option?.disabled}>
         {option.label}
       </option>
     );

src/account-settings/data/actions.js

@@ -27,6 +27,7 @@ export const fetchSettingsSuccess = ({
   profileDataManager,
   timeZones,
   verifiedNameHistory,
+  countries,
 }) => ({
   type: FETCH_SETTINGS.SUCCESS,
   payload: {
@@ -35,6 +36,7 @@ export const fetchSettingsSuccess = ({
     profileDataManager,
     timeZones,
     verifiedNameHistory,
+    countries,
   },
 });
 

src/account-settings/data/reducers.js

@@ -39,6 +39,7 @@ export const defaultState = {
   verifiedName: null,
   mostRecentVerifiedName: {},
   verifiedNameHistory: {},
+  countries: [],
 };
 
 const reducer = (state = defaultState, action = {}) => {
@@ -64,6 +65,7 @@ const reducer = (state = defaultState, action = {}) => {
         loaded: true,
         loadingError: null,
         verifiedNameHistory: action.payload.verifiedNameHistory,
+        countries: action.payload.countries,
       };
     case FETCH_SETTINGS.FAILURE:
       return {

src/account-settings/data/sagas.js

@@ -53,7 +53,7 @@ export function* handleFetchSettings() {
     const { username, userId, roles: userRoles } = getAuthenticatedUser();
 
     const {
-      thirdPartyAuthProviders, profileDataManager, timeZones, ...values
+      thirdPartyAuthProviders, profileDataManager, timeZones, countries, ...values
     } = yield call(
       getSettings,
       username,
@@ -71,6 +71,7 @@ export function* handleFetchSettings() {
       profileDataManager,
       timeZones,
       verifiedNameHistory,
+      countries,
     }));
   } catch (e) {
     yield put(fetchSettingsFailure(e.message));

src/account-settings/data/selectors.js

@@ -88,6 +88,11 @@ const previousSiteLanguageSelector = createSelector(
   accountSettings => accountSettings.previousSiteLanguage,
 );
 
+const countriesSelector = createSelector(
+  accountSettingsSelector,
+  accountSettings => accountSettings.countries,
+);
+
 const editableFieldErrorSelector = createSelector(
   editableFieldNameSelector,
   accountSettingsSelector,
@@ -237,6 +242,7 @@ export const accountSettingsPageSelector = createSelector(
   mostRecentApprovedVerifiedNameValueSelector,
   mostRecentVerifiedNameSelector,
   sortedVerifiedNameHistorySelector,
+  countriesSelector,
   (
     accountSettings,
     siteLanguageOptions,
@@ -254,6 +260,7 @@ export const accountSettingsPageSelector = createSelector(
     verifiedName,
     mostRecentVerifiedName,
     verifiedNameHistory,
+    countries,
   ) => ({
     siteLanguageOptions,
     siteLanguage,
@@ -274,6 +281,7 @@ export const accountSettingsPageSelector = createSelector(
     verifiedName,
     mostRecentVerifiedName,
     verifiedNameHistory,
+    countries,
   }),
 );
 

src/account-settings/data/service.js

@@ -186,9 +186,18 @@ export async function postVerifiedName(data) {
     .catch(error => handleRequestError(error));
 }
 
+export async function getCountryList() {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`);
+
+  return data?.fields
+    .find(({ name }) => name === 'country')
+    ?.options?.map(({ value, name }) => ({ value, label: name })) || [];
+}
+
 /**
- * A single function to GET everything considered a setting. Currently encapsulates Account, Preferences, and
- * ThirdPartyAuth.
+ * A single function to GET everything considered a setting. Currently encapsulates Account, Preferences, countriesList
+ * and ThirdPartyAuth.
  */
 export async function getSettings(username, userRoles) {
   const [
@@ -197,12 +206,14 @@ export async function getSettings(username, userRoles) {
     thirdPartyAuthProviders,
     profileDataManager,
     timeZones,
+    countries,
   ] = await Promise.all([
     getAccount(username),
     getPreferences(username),
     getThirdPartyAuthProviders(),
     getProfileDataManager(username, userRoles),
     getTimeZones(),
+    getCountryList(),
   ]);
 
   return {
@@ -211,6 +222,7 @@ export async function getSettings(username, userRoles) {
     thirdPartyAuthProviders,
     profileDataManager,
     timeZones,
+    countries,
   };
 }