Stripe Connect Onboarding - base branch

CHANGELOG.md

@@ -14,13 +14,31 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+## [v4.0.0] 2019-12-19
+
+- [change] Use Stripe's [Connect onboarding](https://stripe.com/docs/connect/connect-onboarding) for
+  adding and updating the identity information of the Stripe account.
+  - Before updating to this version you should check
+    [the related pull request](https://github.com/sharetribe/ftw-daily/pull/1234)
+  - Read more from documentation:
+    [How to handle provider onboarding and identity verification on FTW](https://www.sharetribe.com/docs/guides/provider-onboarding-and-identity-verification/)
+
+**Note:** In this update we have deprecated the old `PayoutDetailsForm` and `PayoutPreferencesPage`.
+Form now on Stripe will handle collecting the identity information required for verificating the
+Stripe account. On FTW we will only handle creating the new account and adding and updating
+information about bank account (e.g. IBAN number). If you want to keep using the custom form inside
+your application you need to make sure that you are collecting all the required information and
+enabling users to update the account so that it doesn't get restricted.
+
 - [fix] Add missing props to examples related to EditListingWizard
   [#1247](https://github.com/sharetribe/ftw-daily/pull/1247)
 - [fix] Add missing props to tests related to EditListingWizard
   [#1246](https://github.com/sharetribe/ftw-daily/pull/1246)
 - [fix] Update links to API Reference docs.
   [#1231](https://github.com/sharetribe/ftw-daily/pull/1231)
 
+  [v4.0.0]: https://github.com/sharetribe/flex-template-web/compare/v3.7.0...v4.0.0
+
 ## [v3.7.0] 2019-12-09
 
 - [change] Make it easier to reorder EditListingWizard tabs/panels.

package.json

@@ -51,7 +51,7 @@
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "seedrandom": "^3.0.3",
-    "sharetribe-flex-sdk": "^1.5.0",
+    "sharetribe-flex-sdk": "^1.8.0",
     "sharetribe-scripts": "3.1.1",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.9",

src/components/Button/Button.js

@@ -14,7 +14,17 @@ class Button extends Component {
     this.setState({ mounted: true }); // eslint-disable-line react/no-did-mount-set-state
   }
   render() {
-    const { children, className, rootClassName, inProgress, ready, disabled, ...rest } = this.props;
+    const {
+      children,
+      className,
+      rootClassName,
+      spinnerClassName,
+      checkmarkClassName,
+      inProgress,
+      ready,
+      disabled,
+      ...rest
+    } = this.props;
 
     const rootClass = rootClassName || css.root;
     const classes = classNames(rootClass, className, {
@@ -25,9 +35,9 @@ class Button extends Component {
     let content;
 
     if (inProgress) {
-      content = <IconSpinner rootClassName={css.spinner} />;
+      content = <IconSpinner rootClassName={spinnerClassName || css.spinner} />;
     } else if (ready) {
-      content = <IconCheckmark rootClassName={css.checkmark} />;
+      content = <IconCheckmark rootClassName={checkmarkClassName || css.checkmark} />;
     } else {
       content = children;
     }
@@ -50,6 +60,8 @@ const { node, string, bool } = PropTypes;
 Button.defaultProps = {
   rootClassName: null,
   className: null,
+  spinnerClassName: null,
+  checkmarkClassName: null,
   inProgress: false,
   ready: false,
   disabled: false,
@@ -59,6 +71,8 @@ Button.defaultProps = {
 Button.propTypes = {
   rootClassName: string,
   className: string,
+  spinnerClassName: string,
+  checkmarkClassName: string,
 
   inProgress: bool,
   ready: bool,

src/components/EditListingWizard/EditListingWizard.js

@@ -4,15 +4,18 @@ import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import config from '../../config';
+import routeConfiguration from '../../routeConfiguration';
+import { createResourceLocatorString } from '../../util/routes';
 import { withViewport } from '../../util/contextHelpers';
 import {
   LISTING_PAGE_PARAM_TYPE_DRAFT,
   LISTING_PAGE_PARAM_TYPE_NEW,
   LISTING_PAGE_PARAM_TYPES,
 } from '../../util/urlHelpers';
-import { ensureListing, ensureCurrentUser } from '../../util/data';
-import { PayoutDetailsForm } from '../../forms';
-import { Modal, NamedRedirect, Tabs } from '../../components';
+import { ensureCurrentUser, ensureListing } from '../../util/data';
+
+import { Modal, NamedRedirect, Tabs, StripeConnectAccountStatusBox } from '../../components';
+import { StripeConnectAccountForm } from '../../forms';
 
 import EditListingWizardTab, {
   AVAILABILITY,
@@ -133,6 +136,43 @@ const scrollToTab = (tabPrefix, tabId) => {
   }
 };
 
+// Create return URL for the Stripe onboarding form
+const createReturnURL = (returnURLType, rootURL, routes, pathParams) => {
+  const path = createResourceLocatorString(
+    'EditListingStripeOnboardingPage',
+    routes,
+    { ...pathParams, returnURLType },
+    {}
+  );
+  const root = rootURL.replace(/\/$/, '');
+  return `${root}${path}`;
+};
+
+// Get attribute: stripeAccountData
+const getStripeAccountData = stripeAccount => stripeAccount.attributes.stripeAccountData || null;
+
+// Get last 4 digits of bank account returned in Stripe account
+const getBankAccountLast4Digits = stripeAccountData =>
+  stripeAccountData && stripeAccountData.external_accounts.data.length > 0
+    ? stripeAccountData.external_accounts.data[0].last4
+    : null;
+
+// Check if there's requirements on selected type: 'past_due', 'currently_due' etc.
+const hasRequirements = (stripeAccountData, requirementType) =>
+  stripeAccountData != null &&
+  stripeAccountData.requirements &&
+  Array.isArray(stripeAccountData.requirements[requirementType]) &&
+  stripeAccountData.requirements[requirementType].length > 0;
+
+// Redirect user to Stripe's hosted Connect account onboarding form
+const handleGetStripeConnectAccountLinkFn = (getLinkFn, commonParams) => type => () => {
+  getLinkFn({ type, ...commonParams })
+    .then(url => {
+      window.location.href = url;
+    })
+    .catch(err => console.error(err));
+};
+
 // Create a new or edit listing through EditListingWizard
 class EditListingWizard extends Component {
   constructor(props) {
@@ -151,15 +191,32 @@ class EditListingWizard extends Component {
     this.handlePayoutSubmit = this.handlePayoutSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { stripeOnboardingReturnURL } = this.props;
+
+    if (stripeOnboardingReturnURL != null) {
+      this.setState({ showPayoutDetails: true });
+    }
+  }
+
   handleCreateFlowTabScrolling(shouldScroll) {
     this.hasScrolledToTab = shouldScroll;
   }
 
   handlePublishListing(id) {
-    const { onPublishListingDraft, currentUser } = this.props;
+    const { onPublishListingDraft, currentUser, stripeAccount } = this.props;
+
     const stripeConnected =
       currentUser && currentUser.stripeAccount && !!currentUser.stripeAccount.id;
-    if (stripeConnected) {
+
+    const stripeAccountData = stripeConnected ? getStripeAccountData(stripeAccount) : null;
+
+    const requirementsMissing =
+      stripeAccount &&
+      (hasRequirements(stripeAccountData, 'past_due') ||
+        hasRequirements(stripeAccountData, 'currently_due'));
+
+    if (stripeConnected && !requirementsMissing) {
       onPublishListingDraft(id);
     } else {
       this.setState({
@@ -176,10 +233,8 @@ class EditListingWizard extends Component {
   handlePayoutSubmit(values) {
     this.props
       .onPayoutDetailsSubmit(values)
-      .then(() => {
-        this.setState({ showPayoutDetails: false });
+      .then(response => {
         this.props.onManageDisableScrolling('EditListingWizard.payoutModal', false);
-        this.props.onPublishListingDraft(this.state.draftId);
       })
       .catch(() => {
         // do nothing
@@ -197,8 +252,18 @@ class EditListingWizard extends Component {
       intl,
       errors,
       fetchInProgress,
+      payoutDetailsSaveInProgress,
+      payoutDetailsSaved,
       onManageDisableScrolling,
       onPayoutDetailsFormChange,
+      onGetStripeConnectAccountLink,
+      getAccountLinkInProgress,
+      createStripeAccountError,
+      updateStripeAccountError,
+      fetchStripeAccountError,
+      stripeAccountFetched,
+      stripeAccount,
+      currentUser,
       ...rest
     } = this.props;
 
@@ -241,6 +306,45 @@ class EditListingWizard extends Component {
       return { name: 'EditListingPage', params: { ...params, tab } };
     };
 
+    const formDisabled = getAccountLinkInProgress;
+    const ensuredCurrentUser = ensureCurrentUser(currentUser);
+    const currentUserLoaded = !!ensuredCurrentUser.id;
+    const stripeConnected = currentUserLoaded && !!stripeAccount && !!stripeAccount.id;
+
+    const rootURL = config.canonicalRootURL;
+    const routes = routeConfiguration();
+    const { returnURLType, ...pathParams } = params;
+    const successURL = createReturnURL('success', rootURL, routes, pathParams);
+    const failureURL = createReturnURL('failure', rootURL, routes, pathParams);
+
+    const accountId = stripeConnected ? stripeAccount.id : null;
+    const stripeAccountData = stripeConnected ? getStripeAccountData(stripeAccount) : null;
+
+    const requirementsMissing =
+      stripeAccount &&
+      (hasRequirements(stripeAccountData, 'past_due') ||
+        hasRequirements(stripeAccountData, 'currently_due'));
+
+    const savedCountry = stripeAccountData ? stripeAccountData.country : null;
+
+    const handleGetStripeConnectAccountLink = handleGetStripeConnectAccountLinkFn(
+      onGetStripeConnectAccountLink,
+      {
+        accountId,
+        successURL,
+        failureURL,
+      }
+    );
+
+    const returnedNormallyFromStripe = returnURLType === 'success';
+    const showVerificationError = returnURLType === 'failure';
+    const showVerificationNeeded = stripeConnected && requirementsMissing;
+
+    // Redirect from success URL to basic path for StripePayoutPage
+    if (returnedNormallyFromStripe && stripeConnected && !requirementsMissing) {
+      return <NamedRedirect name="EditListingPage" params={pathParams} />;
+    }
+
     return (
       <div className={classes}>
         <Tabs
@@ -286,14 +390,47 @@ class EditListingWizard extends Component {
             <p className={css.modalMessage}>
               <FormattedMessage id="EditListingPhotosPanel.payoutModalInfo" />
             </p>
-            <PayoutDetailsForm
-              className={css.payoutDetails}
-              inProgress={fetchInProgress}
-              createStripeAccountError={errors ? errors.createStripeAccountError : null}
-              currentUserId={ensureCurrentUser(this.props.currentUser).id}
-              onChange={onPayoutDetailsFormChange}
-              onSubmit={this.handlePayoutSubmit}
-            />
+            {!currentUserLoaded ? (
+              <FormattedMessage id="StripePayoutPage.loadingData" />
+            ) : (
+              <StripeConnectAccountForm
+                disabled={formDisabled}
+                inProgress={payoutDetailsSaveInProgress}
+                ready={payoutDetailsSaved}
+                stripeBankAccountLastDigits={getBankAccountLast4Digits(stripeAccountData)}
+                savedCountry={savedCountry}
+                submitButtonText={intl.formatMessage({
+                  id: 'StripePayoutPage.submitButtonText',
+                })}
+                stripeAccountError={
+                  createStripeAccountError || updateStripeAccountError || fetchStripeAccountError
+                }
+                stripeAccountFetched={stripeAccountFetched}
+                onChange={onPayoutDetailsFormChange}
+                onSubmit={rest.onPayoutDetailsSubmit}
+                onGetStripeConnectAccountLink={handleGetStripeConnectAccountLink}
+                stripeConnected={stripeConnected}
+              >
+                {stripeConnected && (showVerificationError || showVerificationNeeded) ? (
+                  <StripeConnectAccountStatusBox
+                    type={showVerificationError ? 'verificationError' : 'verificationNeeded'}
+                    inProgress={getAccountLinkInProgress}
+                    onGetStripeConnectAccountLink={handleGetStripeConnectAccountLink(
+                      'custom_account_verification'
+                    )}
+                  />
+                ) : stripeConnected && savedCountry ? (
+                  <StripeConnectAccountStatusBox
+                    type="verificationSuccess"
+                    inProgress={getAccountLinkInProgress}
+                    disabled={payoutDetailsSaveInProgress}
+                    onGetStripeConnectAccountLink={handleGetStripeConnectAccountLink(
+                      'custom_account_update'
+                    )}
+                  />
+                ) : null}
+              </StripeConnectAccountForm>
+            )}
           </div>
         </Modal>
       </div>
@@ -318,6 +455,10 @@ EditListingWizard.propTypes = {
     type: oneOf(LISTING_PAGE_PARAM_TYPES).isRequired,
     tab: oneOf(TABS).isRequired,
   }).isRequired,
+  history: shape({
+    push: func.isRequired,
+    replace: func.isRequired,
+  }).isRequired,
 
   // We cannot use propTypes.listing since the listing might be a draft.
   listing: shape({
@@ -340,8 +481,11 @@ EditListingWizard.propTypes = {
     createStripeAccountError: object,
   }).isRequired,
   fetchInProgress: bool.isRequired,
+  payoutDetailsSaveInProgress: bool.isRequired,
+  payoutDetailsSaved: bool.isRequired,
   onPayoutDetailsFormChange: func.isRequired,
   onPayoutDetailsSubmit: func.isRequired,
+  onGetStripeConnectAccountLink: func.isRequired,
   onManageDisableScrolling: func.isRequired,
   updateInProgress: bool,
 

src/components/IconSuccess/IconSuccess.css

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

src/components/IconSuccess/IconSuccess.example.js

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