[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"
2025-02-25 18:55:24 -06:00 · 2023-10-16 11:23:22 -04:00 · 2023-10-16 11:23:22 -04:00 · 8f2ae32e82
commit 8f2ae32e82
parent cb83bd154b
10 changed files with 62 additions and 90 deletions
--- a/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
+++ b/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}
-                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'}
+                value={country || undefined}
            />
            <div className='form-row'>
                <Input
--- a/webapp/channels/src/components/payment_form/address_form.tsx
+++ b/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'>
--- a/webapp/channels/src/components/payment_form/country_selector.tsx
+++ b/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;
--- a/webapp/channels/src/components/payment_form/payment_form.scss
+++ b/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 {
--- a/webapp/channels/src/components/payment_form/payment_form.tsx
+++ b/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
--- a/webapp/channels/src/components/payment_form/state_selector.tsx
+++ b/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'}
            />
        );
    }
--- a/webapp/channels/src/components/self_hosted_purchases/address.tsx
+++ b/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={
-                        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'}
+                    value={props.country}
                />
            </div>
            <div className='form-row'>
--- a/webapp/channels/src/components/start_trial_form_modal/snapshots/start_trial_form_modal.test.tsx.snap
+++ b/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"
--- a/webapp/channels/src/components/start_trial_form_modal/index.tsx
+++ b/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={
-                            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'}
+                        value={country}
                    />
                </div>
                <div className='disclaimer'>
--- a/webapp/channels/src/i18n/en.json
+++ b/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",