[CLD-6077] Changes to Country Selectors throughout Webapp (#24868)

* Standardize country selectors into using a central component - don't use Country Name, use Country Code

* Fix colour of placeholder

* Updates

* Update state selector to reflect changes from Country Name to Country Code

* Fix linter"

webapp/channels/src/components/admin_console/billing/company_info_edit.tsx

@@ -12,13 +12,12 @@ import {getCloudCustomer, updateCloudCustomer, updateCloudCustomerAddress} from
 import {setNavigationBlocked} from 'actions/admin_actions.jsx';
 
 import BlockableLink from 'components/admin_console/blockable_link';
-import DropdownInput from 'components/dropdown_input';
+import CountrySelector from 'components/payment_form/country_selector';
 import StateSelector from 'components/payment_form/state_selector';
 import SaveButton from 'components/save_button';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 import Input from 'components/widgets/inputs/input/input';
 
-import {COUNTRIES} from 'utils/countries';
 import * as Utils from 'utils/utils';
 
 import type {GlobalState} from 'types/store';
@@ -138,16 +137,12 @@ const CompanyInfoEdit: React.FC<Props> = () => {
 
     const companyAddressInput = (
         <>
-            <DropdownInput
+            <CountrySelector
                 onChange={(option) => {
                     setCountry(option.value);
                     setContentChanged(true);
                 }}
-                value={country ? {value: country, label: country} : undefined}
+                value={country || undefined}
-                options={COUNTRIES.map((c) => ({value: c.name, label: c.name}))}
-                legend={Utils.localizeMessage('admin.billing.company_info.country', 'Country')}
-                placeholder={Utils.localizeMessage('admin.billing.company_info.country', 'Country')}
-                name={'country_dropdown'}
             />
             <div className='form-row'>
                 <Input

webapp/channels/src/components/payment_form/address_form.tsx

@@ -7,11 +7,9 @@ import type {MessageDescriptor} from 'react-intl';
 
 import type {Address} from '@mattermost/types/cloud';
 
-import DropdownInput from 'components/dropdown_input';
 import Input from 'components/widgets/inputs/input/input';
 
-import {COUNTRIES} from 'utils/countries';
+import CountrySelector from './country_selector';
-
 import StateSelector from './state_selector';
 
 import './payment_form.scss';
@@ -64,24 +62,9 @@ const AddressForm = (props: AddressFormProps) => {
                 />
             </div>
             <div className='third-dropdown-sibling-wrapper'>
-                <DropdownInput
+                <CountrySelector
                     onChange={handleCountryChange}
-                    value={
+                    value={props.address.country}
-                        props.address.country ? {value: props.address.country, label: props.address.country} : undefined
-                    }
-                    options={COUNTRIES.map((country) => ({
-                        value: country.name,
-                        label: country.name,
-                    }))}
-                    legend={formatMessage({
-                        id: 'payment_form.country',
-                        defaultMessage: 'Country',
-                    })}
-                    placeholder={formatMessage({
-                        id: 'payment_form.country',
-                        defaultMessage: 'Country',
-                    })}
-                    name={'billing_dropdown'}
                 />
             </div>
             <div className='form-row'>

webapp/channels/src/components/payment_form/country_selector.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {getName} from 'country-list';
+import React from 'react';
+import {useIntl} from 'react-intl';
+
+import DropdownInput from 'components/dropdown_input';
+
+import {COUNTRIES} from 'utils/countries';
+
+type CountrySelectorProps = {
+    onChange: (option: any) => void;
+    value?: string;
+    testId?: string;
+}
+
+const CountrySelector = (props: CountrySelectorProps) => {
+    const {formatMessage} = useIntl();
+
+    return (
+        <DropdownInput
+            testId={props.testId || 'CountrySelector'}
+            onChange={props.onChange}
+            value={props.value ? {value: props.value, label: getName(props.value) || ''} : undefined}
+            options={COUNTRIES.map((country) => ({
+                value: country.code,
+                label: country.name,
+            }))}
+            legend={formatMessage({
+                id: 'payment_form.country',
+                defaultMessage: 'Country',
+            })}
+            placeholder={formatMessage({
+                id: 'payment_form.country',
+                defaultMessage: 'Country',
+            })}
+            name={'country_dropdown'}
+        />
+    );
+};
+
+export default CountrySelector;

webapp/channels/src/components/payment_form/payment_form.scss

@@ -45,10 +45,6 @@
         .DropDown__control {
             min-height: 0;
             background-color: var(--center-channel-bg) !important;
-
-            .DropDown__value-container > div {
-                color: var(--center-channel-color) !important;
-            }
         }
 
         .DropDown__menu {

webapp/channels/src/components/payment_form/payment_form.tsx

@@ -11,16 +11,14 @@ import type {CloudCustomer, PaymentMethod} from '@mattermost/types/cloud';
 
 import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
 
-import DropdownInput from 'components/dropdown_input';
 import Input from 'components/widgets/inputs/input/input';
 
-import {COUNTRIES} from 'utils/countries';
-
 import type {BillingDetails} from 'types/cloud/sku';
 
 import CardImage from './card_image';
 import CardInput from './card_input';
 import type {CardInputType} from './card_input';
+import CountrySelector from './country_selector';
 import {GatherIntent, GatherIntentModal} from './gather_intent';
 import StateSelector from './state_selector';
 
@@ -165,18 +163,9 @@ const PaymentForm: React.FC<Props> = (props: Props) => {
                         defaultMessage='Billing address'
                     />
                 </div>
-                <DropdownInput
+                <CountrySelector
                     onChange={handleCountryChange}
-                    value={
+                    value={state.country}
-                        state.country ? {value: state.country, label: state.country} : undefined
-                    }
-                    options={COUNTRIES.map((country) => ({
-                        value: country.name,
-                        label: country.name,
-                    }))}
-                    legend={formatMessage({id: 'payment_form.country', defaultMessage: 'Country'})}
-                    placeholder={formatMessage({id: 'payment_form.country', defaultMessage: 'Country'})}
-                    name={'billing_dropdown'}
                 />
                 <div className='form-row'>
                     <Input

webapp/channels/src/components/payment_form/state_selector.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {getName} from 'country-list';
 import React from 'react';
 import {useIntl} from 'react-intl';
 
@@ -29,9 +28,9 @@ export default function StateSelector(props: Props) {
     };
 
     let stateList = [] as StateCode[];
-    if (props.country === getName('US')) {
+    if (props.country === 'US') {
         stateList = US_STATES;
-    } else if (props.country === getName('CA')) {
+    } else if (props.country === 'CA') {
         stateList = CA_PROVINCES;
     }
 
@@ -51,7 +50,7 @@ export default function StateSelector(props: Props) {
                 }))}
                 legend={formatMessage({id: 'admin.billing.subscription.stateprovince', defaultMessage: 'State/Province'})}
                 placeholder={formatMessage({id: 'admin.billing.subscription.stateprovince', defaultMessage: 'State/Province'})}
-                name={'billing_dropdown'}
+                name={'country_dropdown'}
             />
         );
     }

webapp/channels/src/components/self_hosted_purchases/address.tsx

@@ -5,12 +5,10 @@ import classNames from 'classnames';
 import React from 'react';
 import {useIntl} from 'react-intl';
 
-import DropdownInput from 'components/dropdown_input';
+import CountrySelector from 'components/payment_form/country_selector';
 import StateSelector from 'components/payment_form/state_selector';
 import Input from 'components/widgets/inputs/input/input';
 
-import {COUNTRIES} from 'utils/countries';
-
 interface Props {
     type: 'shipping' | 'billing';
     testPrefix?: string;
@@ -45,25 +43,10 @@ export default function Address(props: Props) {
     return (
         <>
             <div className={classNames({'third-dropdown-sibling-wrapper': props.type === 'shipping'})}>
-                <DropdownInput
+                <CountrySelector
                     testId={countrySelectorId}
                     onChange={props.changeCountry}
-                    value={
+                    value={props.country}
-                        props.country ? {value: props.country, label: props.country} : undefined
-                    }
-                    options={COUNTRIES.map((country) => ({
-                        value: country.name,
-                        label: country.name,
-                    }))}
-                    legend={intl.formatMessage({
-                        id: 'payment_form.country',
-                        defaultMessage: 'Country',
-                    })}
-                    placeholder={intl.formatMessage({
-                        id: 'payment_form.country',
-                        defaultMessage: 'Country',
-                    })}
-                    name={'billing_dropdown'}
                 />
             </div>
             <div className='form-row'>

webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap

@@ -225,7 +225,7 @@ Object {
               >
                 <div
                   class="DropdownInput Input_container"
-                  data-testid=""
+                  data-testid="CountrySelector"
                 >
                   <fieldset
                     class="Input_fieldset"

webapp/channels/src/components/start_trial_form_modal/index.tsx

@@ -22,11 +22,11 @@ import useCWSAvailabilityCheck from 'components/common/hooks/useCWSAvailabilityC
 import useGetTotalUsersNoBots from 'components/common/hooks/useGetTotalUsersNoBots';
 import DropdownInput from 'components/dropdown_input';
 import ExternalLink from 'components/external_link';
+import CountrySelector from 'components/payment_form/country_selector';
 import Input, {SIZE} from 'components/widgets/inputs/input/input';
 import type {CustomMessageInputType} from 'components/widgets/inputs/input/input';
 
 import {AboutLinks, LicenseLinks, ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
-import {COUNTRIES} from 'utils/countries';
 import {t} from 'utils/i18n';
 
 import type {GlobalState} from 'types/store';
@@ -312,24 +312,9 @@ function StartTrialFormModal(props: Props): JSX.Element | null {
                     name='company_size_dropdown'
                 />
                 <div className='countries-section'>
-                    <DropdownInput
+                    <CountrySelector
                         onChange={(e) => setCountry(e.value)}
-                        value={
+                        value={country}
-                            country ? {value: country, label: country} : undefined
-                        }
-                        options={COUNTRIES.map((country) => ({
-                            value: country.name,
-                            label: country.name,
-                        }))}
-                        legend={formatMessage({
-                            id: 'payment_form.country',
-                            defaultMessage: 'Country',
-                        })}
-                        placeholder={formatMessage({
-                            id: 'payment_form.country',
-                            defaultMessage: 'Country',
-                        })}
-                        name={'country_dropdown'}
                     />
                 </div>
                 <div className='disclaimer'>

webapp/channels/src/i18n/en.json

@@ -245,7 +245,6 @@
   "admin.billing.company_info.city": "City",
   "admin.billing.company_info.companyAddress": "Company Address",
   "admin.billing.company_info.companyName": "Company name",
-  "admin.billing.company_info.country": "Country",
   "admin.billing.company_info.employees": "{employees} employees",
   "admin.billing.company_info.numEmployees": "Number of employees (optional)",
   "admin.billing.company_info.title": "Company Information",