diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx index 6c2e336d8..f67e71762 100644 --- a/src/account-settings/AccountSettingsPage.jsx +++ b/src/account-settings/AccountSettingsPage.jsx @@ -120,7 +120,15 @@ 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 +155,28 @@ class AccountSettingsPage extends React.Component { })), })); + removeDisabledCountries = (countryList) => { + const { disabledCountries, committedValues } = this.props; + + if (!disabledCountries.length) { + return countryList; + } + + return countryList.filter(({ value, disabled }) => { + const isUserCountry = value === committedValues.country; + return !disabled || 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 +218,11 @@ class AccountSettingsPage extends React.Component { } }; + isDisabledCountry = (country) => { + const { disabledCountries } = this.props; + return disabledCountries.includes(country); + }; + isEditable(fieldName) { return !this.props.staticFields.includes(fieldName); } @@ -476,7 +506,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'); @@ -880,6 +911,7 @@ AccountSettingsPage.propTypes = { name: PropTypes.string, useVerifiedNameForCerts: PropTypes.bool, verified_name: PropTypes.string, + country: PropTypes.string, }), drafts: PropTypes.shape({}), formErrors: PropTypes.shape({ @@ -938,6 +970,7 @@ AccountSettingsPage.propTypes = { ), navigate: PropTypes.func.isRequired, location: PropTypes.string.isRequired, + disabledCountries: PropTypes.arrayOf(PropTypes.string), }; AccountSettingsPage.defaultProps = { @@ -947,6 +980,7 @@ AccountSettingsPage.defaultProps = { committedValues: { useVerifiedNameForCerts: false, verified_name: null, + country: '', }, drafts: {}, formErrors: {}, @@ -963,6 +997,7 @@ AccountSettingsPage.defaultProps = { verifiedName: null, mostRecentVerifiedName: {}, verifiedNameHistory: [], + disabledCountries: [], }; export default withLocation(withNavigate(connect(accountSettingsPageSelector, { diff --git a/src/account-settings/EditableSelectField.jsx b/src/account-settings/EditableSelectField.jsx index 63a1f7d1c..bc1757e07 100644 --- a/src/account-settings/EditableSelectField.jsx +++ b/src/account-settings/EditableSelectField.jsx @@ -107,6 +107,7 @@ const EditableSelectField = (props) => { @@ -115,7 +116,7 @@ const EditableSelectField = (props) => { ); } return ( - ); diff --git a/src/account-settings/data/reducers.js b/src/account-settings/data/reducers.js index 7edb53a4e..35de9effc 100644 --- a/src/account-settings/data/reducers.js +++ b/src/account-settings/data/reducers.js @@ -39,6 +39,7 @@ export const defaultState = { verifiedName: null, mostRecentVerifiedName: {}, verifiedNameHistory: {}, + disabledCountries: ['RU'], }; const reducer = (state = defaultState, action = {}) => { diff --git a/src/account-settings/data/selectors.js b/src/account-settings/data/selectors.js index 1e6eb2497..99480a7f9 100644 --- a/src/account-settings/data/selectors.js +++ b/src/account-settings/data/selectors.js @@ -206,6 +206,11 @@ const activeAccountSelector = createSelector( accountSettings => accountSettings.values.is_active, ); +const disabledCountriesSelector = createSelector( + accountSettingsSelector, + accountSettings => accountSettings.disabledCountries, +); + export const siteLanguageSelector = createSelector( previousSiteLanguageSelector, draftsSelector, @@ -237,6 +242,7 @@ export const accountSettingsPageSelector = createSelector( mostRecentApprovedVerifiedNameValueSelector, mostRecentVerifiedNameSelector, sortedVerifiedNameHistorySelector, + disabledCountriesSelector, ( accountSettings, siteLanguageOptions, @@ -254,6 +260,7 @@ export const accountSettingsPageSelector = createSelector( verifiedName, mostRecentVerifiedName, verifiedNameHistory, + disabledCountries, ) => ({ siteLanguageOptions, siteLanguage, @@ -274,6 +281,7 @@ export const accountSettingsPageSelector = createSelector( verifiedName, mostRecentVerifiedName, verifiedNameHistory, + disabledCountries, }), );