feat: added country disabling feature

src/profile/data/reducers.js

@@ -22,6 +22,7 @@ export const initialState = {
   drafts: {},
   isLoadingProfile: true,
   isAuthenticatedUserProfile: false,
+  disabledCountries: ['RU'],
 };
 
 const profilePage = (state = initialState, action = {}) => {

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 disabledCountriesSelector = state => state.profilePage.disabledCountries;
 
 export const editableFormModeSelector = createSelector(
   profileAccountSelector,
@@ -130,10 +131,14 @@ export const countrySelector = createSelector(
   editableFormSelector,
   sortedCountriesSelector,
   countryMessagesSelector,
-  (editableForm, sortedCountries, countryMessages) => ({
+  disabledCountriesSelector,
+  profileAccountSelector,
+  (editableForm, sortedCountries, countryMessages, disabledCountries, account) => ({
     ...editableForm,
     sortedCountries,
     countryMessages,
+    disabledCountries,
+    committedCountry: account.country,
   }),
 );
 

src/profile/forms/Country.jsx

@@ -35,7 +35,11 @@ class Country extends React.Component {
 
   handleSubmit(e) {
     e.preventDefault();
-    this.props.submitHandler(this.props.formId);
+    const { country, disabledCountries, formId, submitHandler } = this.props;
+
+    if (!disabledCountries.includes(country)) {
+      submitHandler(formId);
+    }
   }
 
   handleClose() {
@@ -46,6 +50,26 @@ class Country extends React.Component {
     this.props.openHandler(this.props.formId);
   }
 
+ isDisabledCountry = (country) => {
+    const { disabledCountries } = this.props;
+    return disabledCountries.includes(country);
+  };
+
+  filteredCountries = (countryList) => {
+    const { disabledCountries, committedCountry } = this.props;
+
+    if (!disabledCountries.length) {
+      return countryList;
+    }
+
+    return countryList.filter(({ code }) => {
+      const isDisabled = this.isDisabledCountry(code);
+      const isUserCountry = code === committedCountry;
+
+      return !isDisabled || isUserCountry;
+    });
+  };
+
   render() {
     const {
       formId,
@@ -58,6 +82,7 @@ class Country extends React.Component {
       sortedCountries,
       countryMessages,
     } = this.props;
+    const filteredCountries = this.filteredCountries(sortedCountries);
 
     return (
       <SwitchContent
@@ -84,8 +109,8 @@ class Country extends React.Component {
                     onChange={this.handleChange}
                   >
                     <option value="">&nbsp;</option>
-                    {sortedCountries.map(({ code, name }) => (
-                      <option key={code} value={code}>{name}</option>
+                    {filteredCountries.map(({ code, name }) => (
+                      <option key={code} value={code} disabled={this.isDisabledCountry(code)}>{name}</option>
                     ))}
                   </select>
                   {error !== null && (
@@ -157,7 +182,9 @@ Country.propTypes = {
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
+  disabledCountries: PropTypes.arrayOf(PropTypes.string),
   countryMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+  committedCountry: PropTypes.string,
 
   // Actions
   changeHandler: PropTypes.func.isRequired,
@@ -175,6 +202,8 @@ Country.defaultProps = {
   country: null,
   visibilityCountry: 'private',
   error: null,
+  disabledCountries: [],
+  committedCountry: '',
 };
 
 export default connect(