Merge pull request #1232 from sharetribe/add-state-dropdown-to-payout…

…-details Show states and provinces as dropdown on PayoutDetailsForm
sharetribe · Dec 3, 2019 · 0970f11 · 0970f11
2 parents f861ce5 + d1a7cd6
commit 0970f11
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [change] In `PayoutDetailsForm` show states (US and AU) and provinces (CA) in dropdown instead of
+  input. Since November 18, 2019 Stripe has been validating these values (read more
+  https://support.stripe.com/questions/connect-address-validation).
 - [add] Add IconEdit [#1237](https://github.com/sharetribe/ftw-daily/pull/1237)
 
 ## [v3.6.1] 2019-11-26

diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js b/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js
@@ -5,24 +5,9 @@ import * as validators from '../../util/validators';
 import { FieldSelect, FieldTextInput } from '../../components';
 
 import { stripeCountryConfigs } from './PayoutDetailsForm';
+import { CA_PROVINCES, US_STATES, AU_STATES } from './statesAndProvinces';
 import css from './PayoutDetailsForm.css';
 
-const CANADIAN_PROVINCES = [
-  'AB',
-  'BC',
-  'MB',
-  'NB',
-  'NL',
-  'NS',
-  'NT',
-  'NU',
-  'ON',
-  'PE',
-  'QC',
-  'SK',
-  'YT',
-];
-
 const PayoutDetailsAddress = props => {
   const { className, country, intl, disabled, form, fieldId } = props;
   const countryConfig = country ? stripeCountryConfigs(country).addressConfig : null;
@@ -78,27 +63,41 @@ const PayoutDetailsAddress = props => {
     })
   );
 
-  const showState = country && isRequired(countryConfig, 'state');
-
-  const stateLabel = intl.formatMessage({ id: 'PayoutDetailsForm.stateLabel' });
-  const statePlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.statePlaceholder' });
-  const stateRequired = validators.required(
-    intl.formatMessage({
-      id: 'PayoutDetailsForm.stateRequired',
-    })
-  );
-
-  const showProvince = country && isRequired(countryConfig, 'province');
-
-  const provinceLabel = intl.formatMessage({ id: 'PayoutDetailsForm.canadianProvinceLabel' });
-  const provincePlaceholder = intl.formatMessage({
-    id: 'PayoutDetailsForm.canadianProvincePlaceholder',
-  });
-  const provinceRequired = validators.required(
-    intl.formatMessage({
-      id: 'PayoutDetailsForm.canadianProvinceRequired',
-    })
-  );
+  const showStateUS = country && isRequired(countryConfig, 'stateUS');
+  const showStateAU = country && isRequired(countryConfig, 'stateAU');
+  const showProvinceCA = country && isRequired(countryConfig, 'provinceCA');
+
+  // Choose the correct list of states/provinces to the source of data for dropdown
+  const states = showStateUS
+    ? US_STATES
+    : showProvinceCA
+    ? CA_PROVINCES
+    : showStateAU
+    ? AU_STATES
+    : [];
+
+  // Choose the translations depending on if the text should be province or state
+  const stateLabel = showProvinceCA
+    ? intl.formatMessage({ id: 'PayoutDetailsForm.canadianProvinceLabel' })
+    : intl.formatMessage({ id: 'PayoutDetailsForm.stateLabel' });
+
+  const statePlaceholder = showProvinceCA
+    ? intl.formatMessage({
+        id: 'PayoutDetailsForm.canadianProvincePlaceholder',
+      })
+    : intl.formatMessage({ id: 'PayoutDetailsForm.statePlaceholder' });
+
+  const stateRequired = showProvinceCA
+    ? validators.required(
+        intl.formatMessage({
+          id: 'PayoutDetailsForm.canadianProvinceRequired',
+        })
+      )
+    : validators.required(
+        intl.formatMessage({
+          id: 'PayoutDetailsForm.stateRequired',
+        })
+      );
 
   return (
     <div className={className ? className : css.sectionContainer}>
@@ -148,37 +147,23 @@ const PayoutDetailsAddress = props => {
           />
         ) : null}
       </div>
-      {showState ? (
-        <FieldTextInput
+
+      {states.length > 0 ? (
+        <FieldSelect
           id={`${fieldId}.state`}
           name={`${fieldId}.state`}
           disabled={disabled}
-          className={css.state}
-          type="text"
+          className={css.selectCountry}
           autoComplete="address-level1"
           label={stateLabel}
-          placeholder={statePlaceholder}
           validate={stateRequired}
-          onUnmount={() => form.change(`${fieldId}.state`, undefined)}
-        />
-      ) : null}
-
-      {showProvince ? (
-        <FieldSelect
-          id={`${fieldId}.province`}
-          name={`${fieldId}.province`}
-          disabled={disabled}
-          className={css.selectCountry}
-          autoComplete="address-level1"
-          label={provinceLabel}
-          validate={provinceRequired}
         >
           <option disabled value="">
-            {provincePlaceholder}
+            {statePlaceholder}
           </option>
-          {CANADIAN_PROVINCES.map(p => (
-            <option key={p} value={p}>
-              {intl.formatMessage({ id: `PayoutDetailsForm.canadianProvinceNames.${p}` })}
+          {states.map(p => (
+            <option key={p.key} value={p.key}>
+              {p.label}
             </option>
           ))}
         </FieldSelect>

diff --git a/src/forms/PayoutDetailsForm/statesAndProvinces.js b/src/forms/PayoutDetailsForm/statesAndProvinces.js
@@ -0,0 +1,84 @@
+// Sates and provinces in the format Stripe validation will accept
+// Read more: https://support.stripe.com/questions/connect-address-validation
+
+export const CA_PROVINCES = [
+  { key: 'AB', label: 'Alberta' },
+  { key: 'BC', label: 'British Columbia' },
+  { key: 'MB', label: 'Manitoba' },
+  { key: 'NB', label: 'New Brunswick' },
+  { key: 'NL', label: 'Newfoundland and Labrador' },
+  { key: 'NS', label: 'Nova Scotia' },
+  { key: 'NT', label: 'Northwest Territories' },
+  { key: 'NU', label: 'Nunavut' },
+  { key: 'ON', label: 'Ontario' },
+  { key: 'PE', label: 'Prince Edward Island' },
+  { key: 'QC', label: 'Quebec' },
+  { key: 'SK', label: 'Saskatchewan' },
+  { key: 'YT', label: 'Yukon' },
+];
+
+export const US_STATES = [
+  { key: 'AL', label: 'Alabama' },
+  { key: 'AK', label: 'Alaska' },
+  { key: 'AZ', label: 'Arizona' },
+  { key: 'AR', label: 'Arkansas' },
+  { key: 'CA', label: 'California' },
+  { key: 'CO', label: 'Colorado' },
+  { key: 'CT', label: 'Connecticut' },
+  { key: 'DE', label: 'Delaware' },
+  { key: 'DC', label: 'District of Columbia' },
+  { key: 'FL', label: 'Florida' },
+  { key: 'GA', label: 'Georgia' },
+  { key: 'HI', label: 'Hawaii' },
+  { key: 'ID', label: 'Idaho' },
+  { key: 'IL', label: 'Illinois' },
+  { key: 'IN', label: 'Indiana' },
+  { key: 'IA', label: 'Iowa' },
+  { key: 'KS', label: 'Kansas' },
+  { key: 'KY', label: 'Kentucky' },
+  { key: 'LA', label: 'Louisiana' },
+  { key: 'ME', label: 'Maine' },
+  { key: 'MD', label: 'Maryland' },
+  { key: 'MA', label: 'Massachusetts' },
+  { key: 'MI', label: 'Michigan' },
+  { key: 'MN', label: 'Minnesota' },
+  { key: 'MS', label: 'Mississippi' },
+  { key: 'MO', label: 'Missouri' },
+  { key: 'MT', label: 'Montana' },
+  { key: 'NE', label: 'Nebraska' },
+  { key: 'NV', label: 'Nevada' },
+  { key: 'NH', label: 'New Hampshire' },
+  { key: 'NJ', label: 'New Jersey' },
+  { key: 'NM', label: 'New Mexico' },
+  { key: 'NY', label: 'New York' },
+  { key: 'NC', label: 'North Carolina' },
+  { key: 'ND', label: 'North Dakota' },
+  { key: 'OH', label: 'Ohio' },
+  { key: 'OK', label: 'Oklahoma' },
+  { key: 'OR', label: 'Oregon' },
+  { key: 'PA', label: 'Pennsylvania' },
+  { key: 'PR', label: 'Puerto Rico' },
+  { key: 'RI', label: 'Rhode Island' },
+  { key: 'SC', label: 'South Carolina' },
+  { key: 'SD', label: 'South Dakota' },
+  { key: 'TN', label: 'Tennessee' },
+  { key: 'TX', label: 'Texas' },
+  { key: 'UT', label: 'Utah' },
+  { key: 'VT', label: 'Vermont' },
+  { key: 'VA', label: 'Virginia' },
+  { key: 'WA', label: 'Washington' },
+  { key: 'WV', label: 'West Virginia' },
+  { key: 'WI', label: 'Wisconsin' },
+  { key: 'WY', label: 'Wyoming' },
+];
+
+export const AU_STATES = [
+  { key: 'ACT', label: 'Australian Capital Territory' },
+  { key: 'NSW', label: 'New South Wales' },
+  { key: 'NT', label: 'Northern Territory' },
+  { key: 'QLD', label: 'Queensland' },
+  { key: 'SA', label: 'South Australia' },
+  { key: 'TAS', label: 'Tasmania' },
+  { key: 'VIC', label: 'Victoria' },
+  { key: 'WA', label: 'Western Australia' },
+];
diff --git a/src/stripe-config.js b/src/stripe-config.js
@@ -23,7 +23,7 @@ export const stripeSupportedCountries = [
       addressLine: true,
       city: true,
       postalCode: true,
-      state: true,
+      stateAU: true,
     },
     accountConfig: {
       bsb: true,
@@ -72,7 +72,7 @@ export const stripeSupportedCountries = [
       addressLine: true,
       city: true,
       postalCode: true,
-      province: true,
+      provinceCA: true,
     },
     accountConfig: {
       transitNumber: true,
@@ -383,7 +383,7 @@ export const stripeSupportedCountries = [
       addressLine: true,
       city: true,
       postalCode: true,
-      state: true,
+      stateUS: true,
     },
     accountConfig: {
       routingNumber: true,

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -506,19 +506,6 @@
   "PayoutDetailsForm.businessURLPlaceholder": "Business’s publicly available website",
   "PayoutDetailsForm.businessURLRequired": "Valid business URL is required",
   "PayoutDetailsForm.canadianProvinceLabel": "Province",
-  "PayoutDetailsForm.canadianProvinceNames.AB": "Alberta",
-  "PayoutDetailsForm.canadianProvinceNames.BC": "British Columbia",
-  "PayoutDetailsForm.canadianProvinceNames.MB": "Manitoba",
-  "PayoutDetailsForm.canadianProvinceNames.NB": "New Brunswick",
-  "PayoutDetailsForm.canadianProvinceNames.NL": "Newfoundland and Labrador",
-  "PayoutDetailsForm.canadianProvinceNames.NS": "Nova Scotia",
-  "PayoutDetailsForm.canadianProvinceNames.NT": "Northwest Territories",
-  "PayoutDetailsForm.canadianProvinceNames.NU": "Nunavut",
-  "PayoutDetailsForm.canadianProvinceNames.ON": "Ontario",
-  "PayoutDetailsForm.canadianProvinceNames.PE": "Prince Edward Island",
-  "PayoutDetailsForm.canadianProvinceNames.QC": "Quebec",
-  "PayoutDetailsForm.canadianProvinceNames.SK": "Saskatchewan",
-  "PayoutDetailsForm.canadianProvinceNames.YT": "Yukon",
   "PayoutDetailsForm.canadianProvincePlaceholder": "Province",
   "PayoutDetailsForm.canadianProvinceRequired": "This field is required",
   "PayoutDetailsForm.cityLabel": "City",