[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/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={
-                        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'}
+                    value={props.address.country}
                 />
             </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={
-                        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'}
+                    value={state.country}
                 />
                 <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'}
             />
         );
     }