Add field for personal id number to PayoutDetailsForm

sharetribe · Dec 5, 2018 · 4194e5e · 4194e5e
1 parent 401ed97
commit 4194e5e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/src/ducks/user.duck.js b/src/ducks/user.duck.js
@@ -400,6 +400,7 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
     state,
     province,
     bankAccountToken,
+    personalIdNumber,
   } = payoutDetails;
 
   const hasProvince = province && !state;
@@ -419,6 +420,7 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
       address: omitBy(address, isUndefined),
       dob: birthDate,
       type: 'individual',
+      personal_id_number: personalIdNumber,
     },
     tos_shown_and_accepted: true,
   };

diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
@@ -115,6 +115,27 @@ const PayoutDetailsFormComponent = props => (
       // out of the field. Therefore the empty validation message.
       const bankAccountRequired = validators.required(' ');
 
+      const showPersonalIdNumber =
+        country && stripeCountryConfigs(country).personalIdNumberRequired;
+
+      const personalIdNumberLabel = showPersonalIdNumber
+        ? intl.formatMessage({
+            id: `PayoutDetailsForm.personalIdNumberLabel.${country}`,
+          })
+        : null;
+      const personalIdNumberPlaceholder = showPersonalIdNumber
+        ? intl.formatMessage({
+            id: `PayoutDetailsForm.personalIdNumberPlaceholder.${country}`,
+          })
+        : null;
+      const personalIdNumberRequired = showPersonalIdNumber
+        ? validators.required(
+            intl.formatMessage({
+              id: `PayoutDetailsForm.personalIdNumberRequired`,
+            })
+          )
+        : null;
+
       const classes = classNames(css.root, className, {
         [css.disabled]: disabled,
       });
@@ -142,7 +163,6 @@ const PayoutDetailsFormComponent = props => (
           <FormattedMessage id="PayoutDetailsForm.stripeConnectedAccountTermsLink" />
         </ExternalLink>
       );
-
       return (
         <Form className={classes} onSubmit={handleSubmit}>
           <div className={css.sectionContainer}>
@@ -228,6 +248,25 @@ const PayoutDetailsFormComponent = props => (
             </div>
           ) : null}
           {error}
+
+          {showPersonalIdNumber ? (
+            <div className={css.sectionContainer}>
+              <h3 className={css.subTitle}>
+                <FormattedMessage id="PayoutDetailsForm.personalIdNumberTitle" />
+              </h3>
+              <FieldTextInput
+                id="personalIdNumber"
+                name="personalIdNumber"
+                disabled={disabled}
+                className={css.personalIdNumber}
+                type="text"
+                label={personalIdNumberLabel}
+                placeholder={personalIdNumberPlaceholder}
+                validate={personalIdNumberRequired}
+              />
+            </div>
+          ) : null}
+
           <p className={css.termsText}>
             <FormattedMessage
               id="PayoutDetailsForm.stripeToSText"

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -489,6 +489,8 @@
   "PayoutDetailsForm.lastNamePlaceholder": "Doe",
   "PayoutDetailsForm.lastNameRequired": "This field is required",
   "PayoutDetailsForm.personalDetailsTitle": "Personal details",
+  "PayoutDetailsForm.personalIdNumberTitle": "Personal id number",
+  "PayoutDetailsForm.personalIdNumberRequired": "This field is required",
   "PayoutDetailsForm.postalCodeLabel": "Postal code",
   "PayoutDetailsForm.postalCodePlaceholder": "00100",
   "PayoutDetailsForm.postalCodeRequired": "This field is required",