Create PayoutDetailsAddress subcomponent and edit address config

src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js

@@ -134,7 +134,7 @@ class TokenInputFieldComponent extends Component {
     };
 
     // Include input values with correct stripe keys
-    const inputValueObj = mapInputsToStripeAccountKeys(country, inputsNeeded, values);
+    const inputValueObj = mapInputsToStripeAccountKeys(country, values);
     accountData = { ...accountData, ...inputValueObj };
 
     // https://stripe.com/docs/stripe-js/reference#collecting-bank-account-details

src/config.js

@@ -90,7 +90,12 @@ const stripeSupportedCountries = [
     // Australia
     code: 'AU',
     currency: 'AUD',
-    payoutAddressRequired: false,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+      state: true,
+    },
     accountConfig: {
       bsb: true,
       accountNumber: true,
@@ -100,7 +105,11 @@ const stripeSupportedCountries = [
     // Austria
     code: 'AT',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -109,7 +118,11 @@ const stripeSupportedCountries = [
     // Belgium
     code: 'BE',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -118,7 +131,11 @@ const stripeSupportedCountries = [
     // Denmark
     code: 'DK',
     currency: 'DKK',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -127,7 +144,11 @@ const stripeSupportedCountries = [
     // Finland
     code: 'FI',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -136,7 +157,11 @@ const stripeSupportedCountries = [
     // France
     code: 'FR',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -145,7 +170,11 @@ const stripeSupportedCountries = [
     // Germany
     code: 'DE',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -154,7 +183,11 @@ const stripeSupportedCountries = [
     // Ireland
     code: 'IE',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -163,7 +196,11 @@ const stripeSupportedCountries = [
     // Italy
     code: 'IT',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -172,7 +209,11 @@ const stripeSupportedCountries = [
     // Luxembourg
     code: 'LU',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -181,7 +222,11 @@ const stripeSupportedCountries = [
     // Netherlands
     code: 'NL',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -190,7 +235,11 @@ const stripeSupportedCountries = [
     // Portugal
     code: 'PT',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -199,7 +248,11 @@ const stripeSupportedCountries = [
     // Spain
     code: 'ES',
     currency: 'EUR',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -208,7 +261,11 @@ const stripeSupportedCountries = [
     // Sweden
     code: 'SE',
     currency: 'SEK',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       iban: true,
     },
@@ -217,7 +274,11 @@ const stripeSupportedCountries = [
     // United Kingdom
     code: 'GB',
     currency: 'GBP',
-    payoutAddressRequired: true,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+    },
     accountConfig: {
       sortCode: true,
       accountNumber: true,
@@ -227,7 +288,12 @@ const stripeSupportedCountries = [
     // United States
     code: 'US',
     currency: 'USD',
-    payoutAddressRequired: false,
+    addressConfig: {
+      addressLine: true,
+      city: true,
+      postalCode: true,
+      state: true,
+    },
     accountConfig: {
       routingNumber: true,
       accountNumber: true,

src/ducks/user.duck.js

@@ -397,6 +397,7 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
     streetAddress,
     postalCode,
     city,
+    state,
     bankAccountToken,
   } = payoutDetails;
 

src/forms/PayoutDetailsForm/PayoutDetailsAddress.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { bool, object, string } from 'prop-types';
+import { FieldTextInput } from '../../components';
+import * as validators from '../../util/validators';
+
+import { stripeCountryConfigs } from './PayoutDetailsForm';
+import css from './PayoutDetailsForm.css';
+
+const PayoutDetailsAddress = props => {
+  const { country, intl, disabled, form } = props;
+  const countryConfig = country ? stripeCountryConfigs(country).addressConfig : null;
+
+  const isRequired = (countryConfig, field) => {
+    return countryConfig[field];
+  };
+
+  const showAddressLine = country && isRequired(countryConfig, 'addressLine');
+
+  const streetAddressLabel = intl.formatMessage({
+    id: 'PayoutDetailsForm.streetAddressLabel',
+  });
+  const streetAddressPlaceholder = intl.formatMessage({
+    id: 'PayoutDetailsForm.streetAddressPlaceholder',
+  });
+  const streetAddressRequired = validators.required(
+    intl.formatMessage({
+      id: 'PayoutDetailsForm.streetAddressRequired',
+    })
+  );
+
+  const showPostalCode = country && isRequired(countryConfig, 'postalCode');
+
+  const postalCodeLabel = intl.formatMessage({ id: 'PayoutDetailsForm.postalCodeLabel' });
+  const postalCodePlaceholder = intl.formatMessage({
+    id: 'PayoutDetailsForm.postalCodePlaceholder',
+  });
+  const postalCodeRequired = validators.required(
+    intl.formatMessage({
+      id: 'PayoutDetailsForm.postalCodeRequired',
+    })
+  );
+
+  const showCity = country && isRequired(countryConfig, 'city');
+
+  const cityLabel = intl.formatMessage({ id: 'PayoutDetailsForm.cityLabel' });
+  const cityPlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.cityPlaceholder' });
+  const cityRequired = validators.required(
+    intl.formatMessage({
+      id: 'PayoutDetailsForm.cityRequired',
+    })
+  );
+
+  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',
+    })
+  );
+
+  return (
+    <div>
+      {showAddressLine ? (
+        <FieldTextInput
+          id="streetAddress"
+          name="streetAddress"
+          disabled={disabled}
+          className={css.field}
+          type="text"
+          autoComplete="street-address"
+          label={streetAddressLabel}
+          placeholder={streetAddressPlaceholder}
+          validate={streetAddressRequired}
+          onUnmount={() => form.change('streetAddress', undefined)}
+        />
+      ) : null}
+      <div className={css.formRow}>
+        {showPostalCode ? (
+          <FieldTextInput
+            id="postalCode"
+            name="postalCode"
+            disabled={disabled}
+            className={css.postalCode}
+            type="text"
+            autoComplete="postal-code"
+            label={postalCodeLabel}
+            placeholder={postalCodePlaceholder}
+            validate={postalCodeRequired}
+            onUnmount={() => form.change('postalCode', undefined)}
+          />
+        ) : null}
+        {showCity ? (
+          <FieldTextInput
+            id="city"
+            name="city"
+            disabled={disabled}
+            className={css.city}
+            type="text"
+            autoComplete="address-level2"
+            label={cityLabel}
+            placeholder={cityPlaceholder}
+            validate={cityRequired}
+            onUnmount={() => form.change('city', undefined)}
+          />
+        ) : null}
+      </div>
+      {showState ? (
+        <FieldTextInput
+          id="state"
+          name="state"
+          disabled={disabled}
+          className={css.state}
+          type="text"
+          autoComplete="state"
+          label={stateLabel}
+          placeholder={statePlaceholder}
+          validate={stateRequired}
+          onUnmount={() => form.change('state', undefined)}
+        />
+      ) : null}
+    </div>
+  );
+};
+PayoutDetailsAddress.defaultProps = {
+  country: null,
+  disabled: false,
+};
+
+PayoutDetailsAddress.propTypes = {
+  country: string,
+  disabled: bool,
+  form: object.isRequired,
+};
+
+export default PayoutDetailsAddress;

src/forms/PayoutDetailsForm/PayoutDetailsForm.js

@@ -17,6 +17,7 @@ import {
 import * as validators from '../../util/validators';
 import { isStripeInvalidPostalCode } from '../../util/errors';
 
+import PayoutDetailsAddress from './PayoutDetailsAddress';
 import css from './PayoutDetailsForm.css';
 
 const MIN_STRIPE_ACCOUNT_AGE = 18;
@@ -32,11 +33,6 @@ export const stripeCountryConfigs = countryCode => {
   return country;
 };
 
-const requiresAddress = countryCode => {
-  const country = stripeCountryConfigs(countryCode);
-  return country.payoutAddressRequired;
-};
-
 const countryCurrency = countryCode => {
   const country = stripeCountryConfigs(countryCode);
   return country.currency;
@@ -114,38 +110,6 @@ const PayoutDetailsFormComponent = props => (
         })
       );
 
-      const streetAddressLabel = intl.formatMessage({
-        id: 'PayoutDetailsForm.streetAddressLabel',
-      });
-      const streetAddressPlaceholder = intl.formatMessage({
-        id: 'PayoutDetailsForm.streetAddressPlaceholder',
-      });
-      const streetAddressRequired = validators.required(
-        intl.formatMessage({
-          id: 'PayoutDetailsForm.streetAddressRequired',
-        })
-      );
-
-      const postalCodeLabel = intl.formatMessage({ id: 'PayoutDetailsForm.postalCodeLabel' });
-      const postalCodePlaceholder = intl.formatMessage({
-        id: 'PayoutDetailsForm.postalCodePlaceholder',
-      });
-      const postalCodeRequired = validators.required(
-        intl.formatMessage({
-          id: 'PayoutDetailsForm.postalCodeRequired',
-        })
-      );
-
-      const cityLabel = intl.formatMessage({ id: 'PayoutDetailsForm.cityLabel' });
-      const cityPlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.cityPlaceholder' });
-      const cityRequired = validators.required(
-        intl.formatMessage({
-          id: 'PayoutDetailsForm.cityRequired',
-        })
-      );
-
-      const showAddressFields = country && requiresAddress(country);
-
       // StripeBankAccountTokenInputField handles the error messages
       // internally, we just have to make sure we require a valid token
       // out of the field. Therefore the empty validation message.
@@ -245,48 +209,8 @@ const PayoutDetailsFormComponent = props => (
                 </option>
               ))}
             </FieldSelect>
-            {showAddressFields ? (
-              <div>
-                <FieldTextInput
-                  id="streetAddress"
-                  name="streetAddress"
-                  disabled={disabled}
-                  className={css.field}
-                  type="text"
-                  autoComplete="street-address"
-                  label={streetAddressLabel}
-                  placeholder={streetAddressPlaceholder}
-                  validate={streetAddressRequired}
-                  onUnmount={() => form.change('streetAddress', undefined)}
-                />
-                <div className={css.formRow}>
-                  <FieldTextInput
-                    id="postalCode"
-                    name="postalCode"
-                    disabled={disabled}
-                    className={css.postalCode}
-                    type="text"
-                    autoComplete="postal-code"
-                    label={postalCodeLabel}
-                    placeholder={postalCodePlaceholder}
-                    validate={postalCodeRequired}
-                    onUnmount={() => form.change('postalCode', undefined)}
-                  />
-                  <FieldTextInput
-                    id="city"
-                    name="city"
-                    disabled={disabled}
-                    className={css.city}
-                    type="text"
-                    autoComplete="address-level2"
-                    label={cityLabel}
-                    placeholder={cityPlaceholder}
-                    validate={cityRequired}
-                    onUnmount={() => form.change('city', undefined)}
-                  />
-                </div>
-              </div>
-            ) : null}
+
+            <PayoutDetailsAddress country={country} intl={intl} disabled={disabled} form={form} />
           </div>
           {country ? (
             <div className={css.sectionContainer}>

src/translations/en.json

@@ -480,6 +480,9 @@
   "PayoutDetailsForm.postalCodeLabel": "Postal code",
   "PayoutDetailsForm.postalCodePlaceholder": "00100",
   "PayoutDetailsForm.postalCodeRequired": "This field is required",
+  "PayoutDetailsForm.stateLabel": "State",
+  "PayoutDetailsForm.statePlaceholder": "Enter your state",
+  "PayoutDetailsForm.stateRequired": "This field is required",
   "PayoutDetailsForm.streetAddressLabel": "Street address",
   "PayoutDetailsForm.streetAddressPlaceholder": "Enter your street address…",
   "PayoutDetailsForm.streetAddressRequired": "This field is required",