Add stripe business accounts

CHANGELOG.md

@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [add] Support for Stripe company accounts. `PayoutDetailsForm` was separated into smaller
+  subcomponents. Multiple new translation keys were added and they might not be translated into
+  French yet. [#980](https://github.com/sharetribe/flex-template-web/pull/980)
 - Manage availability of listings. This works for listings that have booking unit type:
   'line-item/night', or 'line-item/day'. There's also 'manage availability' link in the
   ManageListingCards of "your listings" page.

src/components/EditListingWizard/EditListingWizard.css

@@ -102,3 +102,14 @@
     margin-bottom: 0;
   }
 }
+
+.modalTitle {
+  @apply --marketplaceModalTitleStyles;
+}
+
+.modalPayoutDetailsWrapper {
+  @media (--viewportMedium) {
+    width: 604px;
+    padding-top: 11px;
+  }
+}

src/components/EditListingWizard/EditListingWizard.js

@@ -264,7 +264,7 @@ class EditListingWizard extends Component {
           onClose={this.handlePayoutModalClose}
           onManageDisableScrolling={onManageDisableScrolling}
         >
-          <div className={css.modalHeaderWrapper}>
+          <div className={css.modalPayoutDetailsWrapper}>
             <h1 className={css.modalTitle}>
               <FormattedMessage id="EditListingPhotosPanel.payoutModalTitleOneMoreThing" />
               <br />
@@ -273,14 +273,14 @@ class EditListingWizard extends Component {
             <p className={css.modalMessage}>
               <FormattedMessage id="EditListingPhotosPanel.payoutModalInfo" />
             </p>
+            <PayoutDetailsForm
+              className={css.payoutDetails}
+              inProgress={fetchInProgress}
+              createStripeAccountError={errors ? errors.createStripeAccountError : null}
+              onChange={onPayoutDetailsFormChange}
+              onSubmit={this.handlePayoutSubmit}
+            />
           </div>
-          <PayoutDetailsForm
-            className={css.payoutDetails}
-            inProgress={fetchInProgress}
-            createStripeAccountError={errors ? errors.createStripeAccountError : null}
-            onChange={onPayoutDetailsFormChange}
-            onSubmit={this.handlePayoutSubmit}
-          />
         </Modal>
       </div>
     );

src/components/FieldRadioButton/FieldRadioButton.css

@@ -15,6 +15,16 @@
     display: inline;
   }
 
+  /* Highlight the borders if the checkbox is hovered, focused or checked */
+  &:hover + label .notChecked,
+  &:hover + label .required,
+  &:focus + label .notChecked,
+  &:focus + label .required,
+  &:checked + label .notChecked,
+  &:checked + label .required {
+    stroke: var(--matterColorDark);
+  }
+
   /* Hightlight the text on checked, hover and focus */
   &:focus + label .text,
   &:hover + label .text,
@@ -26,13 +36,13 @@
 .label {
   display: flex;
   align-items: center;
-  padding: 0;
+  padding-top: 6px;
 }
 
 .radioButtonWrapper {
   /* This should follow line-height */
   height: 32px;
-  margin-top: -1px;
+  margin-top: -2px;
   margin-right: 12px;
   align-self: baseline;
 
@@ -49,10 +59,16 @@
 
 .notChecked {
   stroke: var(--matterColorAnti);
+  &:hover {
+    stroke: pink;
+  }
 }
 
 .required {
   stroke: var(--attentionColor);
+  &:hover {
+    stroke: pink;
+  }
 }
 
 .text {

src/components/IconAdd/IconAdd.css

@@ -0,0 +1,5 @@
+@import '../../marketplace.css';
+
+.root {
+  fill: var(--marketplaceColor);
+}

src/components/IconAdd/IconAdd.example.js

@@ -0,0 +1,7 @@
+import IconAdd from './IconAdd';
+
+export const Icon = {
+  component: IconAdd,
+  props: {},
+  group: 'icons',
+};

src/components/IconAdd/IconAdd.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './IconAdd.css';
+
+const IconAdd = props => {
+  const { className, rootClassName } = props;
+  const classes = classNames(rootClassName || css.root, className);
+
+  return (
+    <svg className={classes} width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.89 10.4V6.888h3.509a.889.889 0 1 0 0-1.779H6.89V1.6a.89.89 0 0 0-1.778 0v3.511h-3.51a.888.888 0 1 0 0 1.778h3.51v3.51a.889.889 0 1 0 1.778 0"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+const { string } = PropTypes;
+
+IconAdd.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+IconAdd.propTypes = {
+  className: string,
+  rootClassName: string,
+};
+
+export default IconAdd;

src/components/IconClose/IconClose.example.js

@@ -5,3 +5,11 @@ export const Icon = {
   props: {},
   group: 'icons',
 };
+
+export const IconSmall = {
+  component: IconClose,
+  props: {
+    size: 'small',
+  },
+  group: 'icons',
+};

src/components/IconClose/IconClose.js

@@ -3,11 +3,23 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconClose.css';
+const SIZE_SMALL = 'small';
 
 const IconClose = props => {
-  const { className, rootClassName } = props;
+  const { className, rootClassName, size } = props;
   const classes = classNames(rootClassName || css.root, className);
 
+  if (size === SIZE_SMALL) {
+    return (
+      <svg className={classes} width="9" height="9" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M2.175 8.396l2.482-2.482 2.482 2.482a.889.889 0 1 0 1.258-1.257L5.914 4.657l2.482-2.483A.89.89 0 0 0 7.139.917L4.657 3.4 2.175.918A.888.888 0 1 0 .917 2.174L3.4 4.657.918 7.139a.889.889 0 1 0 1.257 1.257"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  }
+
   return (
     <svg
       className={classes}

src/components/index.js

@@ -30,6 +30,7 @@ export { default as FieldSelect } from './FieldSelect/FieldSelect';
 export { default as FieldTextInput } from './FieldTextInput/FieldTextInput';
 export { default as Footer } from './Footer/Footer';
 export { default as Form } from './Form/Form';
+export { default as IconAdd } from './IconAdd/IconAdd';
 export { default as IconArrowHead } from './IconArrowHead/IconArrowHead';
 export { default as IconBannedUser } from './IconBannedUser/IconBannedUser';
 export { default as IconCheckmark } from './IconCheckmark/IconCheckmark';

src/containers/AuthenticationPage/AuthenticationPage.css

@@ -62,7 +62,7 @@
   padding-top: 40px;
 
   @media (--viewportMedium) {
-    width: 571px;
+    width: 604px;
     padding-top: 11px;
   }
 }

src/ducks/user.duck.js

@@ -389,28 +389,66 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
 
   dispatch(stripeAccountCreateRequest());
 
+  const { accountType, country } = payoutDetails;
+
+  let payoutDetailValues;
+  if (accountType === 'company') {
+    payoutDetailValues = payoutDetails['company'];
+  } else if (accountType === 'individual') {
+    payoutDetailValues = payoutDetails['individual'];
+  }
+
   const {
     firstName,
     lastName,
     birthDate,
-    country,
-    streetAddress,
-    postalCode,
-    city,
-    state,
-    province,
+    address,
     bankAccountToken,
     personalIdNumber,
-  } = payoutDetails;
+    companyName,
+    companyTaxId,
+    personalAddress,
+    additionalOwners,
+  } = payoutDetailValues;
+
+  const hasProvince = address.province && !address.state;
+
+  const addressValue = {
+    city: address.city,
+    line1: address.streetAddress,
+    postal_code: address.postalCode,
+    state: hasProvince ? address.province : address.state ? address.state : '',
+  };
 
-  const hasProvince = province && !state;
+  let personalAddressValue;
+  if (personalAddress) {
+    personalAddressValue = {
+      city: personalAddress.city,
+      line1: personalAddress.streetAddress,
+      postal_code: personalAddress.postalCode,
+      state: hasProvince
+        ? personalAddress.province
+        : personalAddress.state
+        ? personalAddress.state
+        : '',
+    };
+  }
 
-  const address = {
-    city,
-    line1: streetAddress,
-    postal_code: postalCode,
-    state: hasProvince ? province : state,
-  };
+  const additionalOwnersValue = additionalOwners
+    ? additionalOwners.map(owner => {
+        return {
+          first_name: owner.firstName,
+          last_name: owner.lastName,
+          dob: owner.birthDate,
+          address: {
+            city: owner.city,
+            line1: owner.streetAddress,
+            postal_code: owner.postalCode,
+            state: hasProvince ? owner.province : owner.state ? owner.state : '',
+          },
+        };
+      })
+    : [];
 
   const idNumber =
     country === 'US' ? { ssn_last_4: personalIdNumber } : { personal_id_number: personalIdNumber };
@@ -420,9 +458,13 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
     legal_entity: {
       first_name: firstName,
       last_name: lastName,
-      address: omitBy(address, isUndefined),
+      address: omitBy(addressValue, isUndefined),
       dob: birthDate,
-      type: 'individual',
+      type: accountType,
+      business_name: companyName,
+      business_tax_id: companyTaxId,
+      personal_address: personalAddressValue,
+      additional_owners: additionalOwnersValue,
       ...idNumber,
     },
     tos_shown_and_accepted: true,

src/examples.js

@@ -20,6 +20,7 @@ import * as FieldReviewRating from './components/FieldReviewRating/FieldReviewRa
 import * as FieldSelect from './components/FieldSelect/FieldSelect.example';
 import * as FieldTextInput from './components/FieldTextInput/FieldTextInput.example';
 import * as Footer from './components/Footer/Footer.example';
+import * as IconAdd from './components/IconAdd/IconAdd.example';
 import * as IconBannedUser from './components/IconBannedUser/IconBannedUser.example';
 import * as IconCheckmark from './components/IconCheckmark/IconCheckmark.example';
 import * as IconClose from './components/IconClose/IconClose.example';
@@ -118,6 +119,7 @@ export {
   FieldSelect,
   FieldTextInput,
   Footer,
+  IconAdd,
   IconBannedUser,
   IconCheckmark,
   IconClose,