feat: addd countries changes for embargo

Author: sundasnoreen12

src/profile/data/actions.js

@@ -25,12 +25,14 @@ export const fetchProfileSuccess = (
   preferences,
   courseCertificates,
   isAuthenticatedUserProfile,
+  countries,
 ) => ({
   type: FETCH_PROFILE.SUCCESS,
   account,
   preferences,
   courseCertificates,
   isAuthenticatedUserProfile,
+  countries,
 });
 
 export const fetchProfileReset = () => ({

src/profile/data/reducers.js

@@ -22,6 +22,7 @@ export const initialState = {
   drafts: {},
   isLoadingProfile: true,
   isAuthenticatedUserProfile: false,
+  countries: [],
 };
 
 const profilePage = (state = initialState, action = {}) => {
@@ -42,6 +43,7 @@ const profilePage = (state = initialState, action = {}) => {
         courseCertificates: action.courseCertificates,
         isLoadingProfile: false,
         isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
+        countries: action.countries,
       };
     case SAVE_PROFILE.BEGIN:
       return {

src/profile/data/sagas.js

@@ -41,6 +41,7 @@ export function* handleFetchProfile(action) {
   let preferences = {};
   let account = userAccount;
   let courseCertificates = null;
+  let countries = [];
 
   try {
     yield put(fetchProfileBegin());
@@ -49,6 +50,7 @@ export function* handleFetchProfile(action) {
     const calls = [
       call(ProfileApiService.getAccount, username),
       call(ProfileApiService.getCourseCertificates, username),
+      call(ProfileApiService.getCountryList),
     ];
 
     if (isAuthenticatedUserProfile) {
@@ -61,9 +63,9 @@ export function* handleFetchProfile(action) {
     const result = yield all(calls);
 
     if (isAuthenticatedUserProfile) {
-      [account, courseCertificates, preferences] = result;
+      [account, courseCertificates, countries, preferences] = result;
     } else {
-      [account, courseCertificates] = result;
+      [account, courseCertificates, countries] = result;
     }
 
     // Set initial visibility values for account
@@ -89,6 +91,7 @@ export function* handleFetchProfile(action) {
       preferences,
       courseCertificates,
       isAuthenticatedUserProfile,
+      countries,
     ));
 
     yield put(fetchProfileReset());

src/profile/data/selectors.js

@@ -23,6 +23,7 @@ export const isLoadingProfileSelector = state => state.profilePage.isLoadingProf
 export const currentlyEditingFieldSelector = state => state.profilePage.currentlyEditingField;
 export const accountErrorsSelector = state => state.profilePage.errors;
 export const isAuthenticatedUserProfileSelector = state => state.profilePage.isAuthenticatedUserProfile;
+export const countriesSelector = state => state.profilePage.countries;
 
 export const editableFormModeSelector = createSelector(
   profileAccountSelector,
@@ -112,7 +113,17 @@ export const sortedLanguagesSelector = createSelector(
 
 export const sortedCountriesSelector = createSelector(
   localeSelector,
-  locale => getCountryList(locale),
+  countriesSelector,
+  profileAccountSelector,
+  (locale, countries, profileAccount) => {
+    const countryList = getCountryList(locale);
+    const countriesCodes = new Set(countries.map(country => country.code));
+
+    return countryList.filter(({ code }) => {
+      const isUserCountry = code === profileAccount.country || countriesCodes.has(code);
+      return isUserCountry;
+    });
+  },
 );
 
 export const preferredLanguageSelector = createSelector(
@@ -130,10 +141,12 @@ export const countrySelector = createSelector(
   editableFormSelector,
   sortedCountriesSelector,
   countryMessagesSelector,
-  (editableForm, sortedCountries, countryMessages) => ({
+  countriesSelector,
+  (editableForm, sortedCountries, countryMessages, countries) => ({
     ...editableForm,
     sortedCountries,
     countryMessages,
+    countries,
   }),
 );
 

src/profile/data/services.js

@@ -147,3 +147,21 @@ export async function getCourseCertificates(username) {
     return [];
   }
 }
+
+function extractCountryList(data) {
+  return data?.fields
+    .find(({ name }) => name === 'country')
+    ?.options?.map(({ value, name }) => ({ code: value, name })) || [];
+}
+
+export async function getCountryList() {
+  const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`;
+
+  try {
+    const { data } = await getHttpClient().get(url);
+    return extractCountryList(data);
+  } catch (e) {
+    logError(e);
+    return [];
+  }
+}

src/profile/forms/Country.jsx

@@ -23,6 +23,7 @@ class Country extends React.Component {
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.handleOpen = this.handleOpen.bind(this);
+    this.isDisabledCountry = this.isDisabledCountry.bind(this);
   }
 
   handleChange(e) {
@@ -46,6 +47,13 @@ class Country extends React.Component {
     this.props.openHandler(this.props.formId);
   }
 
+  isDisabledCountry = (country) => {
+    const { countries } = this.props;
+    const countriesCodes = new Set(countries.map(countryObj => countryObj.code));
+
+    return !countriesCodes.has(country);
+  };
+
   render() {
     const {
       formId,
@@ -85,7 +93,7 @@ class Country extends React.Component {
                   >
                     <option value="">&nbsp;</option>
                     {sortedCountries.map(({ code, name }) => (
-                      <option key={code} value={code}>{name}</option>
+                      <option key={code} value={code} disabled={this.isDisabledCountry(code)}>{name}</option>
                     ))}
                   </select>
                   {error !== null && (
@@ -157,6 +165,10 @@ Country.propTypes = {
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
+  countries: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  })).isRequired,
   countryMessages: PropTypes.objectOf(PropTypes.string).isRequired,
 
   // Actions