From 338fb79f576eedc919475e6238f65fdb5d21c9e5 Mon Sep 17 00:00:00 2001
From: Jenni Nurmi <jenni@sharetribe.com>
Date: Tue, 18 Dec 2018 12:10:44 +0200
Subject: [PATCH] Create PayoutDetailsBankDetails subcomponent

---
 .../PayoutDetailsBankDetails.js               | 52 +++++++++++++++++++
 .../PayoutDetailsForm/PayoutDetailsForm.css   |  4 ++
 .../PayoutDetailsFormCompany.js               | 28 ++--------
 .../PayoutDetailsFormIndividual.js            | 32 ++----------
 4 files changed, 62 insertions(+), 54 deletions(-)
 create mode 100644 src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js

diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js b/src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js
new file mode 100644
index 00000000..7dd84e6d
--- /dev/null
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { bool, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { StripeBankAccountTokenInputField } from '../../components';
+import * as validators from '../../util/validators';
+
+import { stripeCountryConfigs } from './PayoutDetailsForm';
+import css from './PayoutDetailsForm.css';
+
+const countryCurrency = countryCode => {
+  const country = stripeCountryConfigs(countryCode);
+  return country.currency;
+};
+
+const PayoutDetailsBankDetails = props => {
+  const { country, disabled } = props;
+
+  // 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.
+  const bankAccountRequired = validators.required(' ');
+
+  return (
+    <div className={css.sectionContainer}>
+      <h3 className={css.subTitle}>
+        <FormattedMessage id="PayoutDetailsForm.bankDetails" />
+      </h3>
+      <StripeBankAccountTokenInputField
+        className={css.bankDetailsStripeField}
+        disabled={disabled}
+        name="bankAccountToken"
+        formName="PayoutDetailsForm"
+        country={country}
+        currency={countryCurrency(country)}
+        validate={bankAccountRequired}
+      />
+    </div>
+  );
+};
+PayoutDetailsBankDetails.defaultProps = {
+  country: null,
+  disabled: false,
+  fieldId: null,
+};
+
+PayoutDetailsBankDetails.propTypes = {
+  country: string,
+  disabled: bool,
+  fieldId: string,
+};
+
+export default PayoutDetailsBankDetails;
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
index abb1828c..bcc1d572 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
@@ -105,3 +105,7 @@
     cursor: pointer;
   }
 }
+
+.bankDetailsStripeField p {
+  @apply --marketplaceH4FontStyles;
+}
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
index 1addd8cd..cd4822e7 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
@@ -2,19 +2,14 @@ import React from 'react';
 import { bool, object, string } from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { StripeBankAccountTokenInputField, FieldTextInput } from '../../components';
+import { FieldTextInput } from '../../components';
 import * as validators from '../../util/validators';
 
 import PayoutDetailsAddress from './PayoutDetailsAddress';
+import PayoutDetailsBankDetails from './PayoutDetailsBankDetails';
 import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
-import { stripeCountryConfigs } from './PayoutDetailsForm';
 import css from './PayoutDetailsForm.css';
 
-const countryCurrency = countryCode => {
-  const country = stripeCountryConfigs(countryCode);
-  return country.currency;
-};
-
 const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
   const { disabled, form, intl, values } = fieldRenderProps;
   const { country } = values;
@@ -39,11 +34,6 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
     })
   );
 
-  // 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.
-  const bankAccountRequired = validators.required(' ');
-
   return (
     <React.Fragment>
       {country ? (
@@ -86,19 +76,7 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
             companyAddress
           />
 
-          <div className={css.sectionContainer}>
-            <h3 className={css.subTitle}>
-              <FormattedMessage id="PayoutDetailsForm.bankDetails" />
-            </h3>
-            <StripeBankAccountTokenInputField
-              disabled={disabled}
-              name="bankAccountToken"
-              formName="PayoutDetailsForm"
-              country={country}
-              currency={countryCurrency(country)}
-              validate={bankAccountRequired}
-            />
-          </div>
+          <PayoutDetailsBankDetails country={country} disabled={disabled} />
 
           <PayoutDetailsPersonalDetails
             intl={intl}
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
index 6cf1a7cd..a0311639 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
@@ -1,29 +1,16 @@
 import React from 'react';
 import { bool, object } from 'prop-types';
 import { compose } from 'redux';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { StripeBankAccountTokenInputField } from '../../components';
-import * as validators from '../../util/validators';
+import { injectIntl, intlShape } from 'react-intl';
 
 import PayoutDetailsAddress from './PayoutDetailsAddress';
+import PayoutDetailsBankDetails from './PayoutDetailsBankDetails';
 import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
-import { stripeCountryConfigs } from './PayoutDetailsForm';
-import css from './PayoutDetailsForm.css';
-
-const countryCurrency = countryCode => {
-  const country = stripeCountryConfigs(countryCode);
-  return country.currency;
-};
 
 const PayoutDetailsFormIndividualComponent = ({ fieldRenderProps }) => {
   const { disabled, form, intl, values } = fieldRenderProps;
   const { country } = values;
 
-  // 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.
-  const bankAccountRequired = validators.required(' ');
-
   return (
     <React.Fragment>
       <PayoutDetailsPersonalDetails
@@ -33,20 +20,7 @@ const PayoutDetailsFormIndividualComponent = ({ fieldRenderProps }) => {
         country={country}
       />
       <PayoutDetailsAddress country={country} intl={intl} disabled={disabled} form={form} />
-
-      <div className={css.sectionContainer}>
-        <h3 className={css.subTitle}>
-          <FormattedMessage id="PayoutDetailsForm.bankDetails" />
-        </h3>
-        <StripeBankAccountTokenInputField
-          disabled={disabled}
-          name="bankAccountToken"
-          formName="PayoutDetailsForm"
-          country={country}
-          currency={countryCurrency(country)}
-          validate={bankAccountRequired}
-        />
-      </div>
+      <PayoutDetailsBankDetails country={country} disabled={disabled} />
     </React.Fragment>
   );
 };