Merge pull request #69 from sharetribe/update-v4.0.0-from-upstream

Update from upstream
sharetribe · Dec 20, 2019 · 383b582 · 383b582
2 parents 106eaa1 + e982223
commit 383b582
Show file tree

Hide file tree

Showing 61 changed files with 2,401 additions and 1,011 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,33 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2019-XX-XX
 
+## [v6.0.0] 2019-12-20
+
+This is update from from [upstream](https://github.com/sharetribe/ftw-daily): v4.0.0
+
+- [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)
+
+[v6.0.0]: https://github.com/sharetribe/ftw-hourly/compare/v5.1.0...v6.0.0
+
 ## [v5.1.0] 2019-12-09
 
 - [change] Make it easier to reorder EditListingWizard tabs/panels.
@@ -26,7 +53,7 @@ https://github.com/sharetribe/flex-template-web/
   https://support.stripe.com/questions/connect-address-validation).
 - [add] Add IconEdit [#1237](https://github.com/sharetribe/ftw-daily/pull/1237)
 
-  [v5.1.0]: https://github.com/sharetribe/flex-template-web/compare/v5.0.3...v5.1.0
+  [v5.1.0]: https://github.com/sharetribe/ftw-hourly/compare/v5.0.3...v5.1.0
 
 ## [v5.0.3] 2019-12-09
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "v5.1.0",
+  "version": "v6.0.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
@@ -53,7 +53,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",

diff --git a/src/components/Button/Button.js b/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,

diff --git a/src/components/EditListingWizard/EditListingWizard.js b/src/components/EditListingWizard/EditListingWizard.js
@@ -5,15 +5,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,
@@ -172,6 +175,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) {
@@ -191,15 +231,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({
@@ -216,10 +273,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
@@ -237,8 +292,18 @@ class EditListingWizard extends Component {
       intl,
       errors,
       fetchInProgress,
+      payoutDetailsSaveInProgress,
+      payoutDetailsSaved,
       onManageDisableScrolling,
       onPayoutDetailsFormChange,
+      onGetStripeConnectAccountLink,
+      getAccountLinkInProgress,
+      createStripeAccountError,
+      updateStripeAccountError,
+      fetchStripeAccountError,
+      stripeAccountFetched,
+      stripeAccount,
+      currentUser,
       ...rest
     } = this.props;
 
@@ -286,6 +351,44 @@ class EditListingWizard extends Component {
         this.setState({ portalRoot: document.getElementById('portal-root') });
       }
     };
+    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} ref={setPortalRootAfterInitialRender}>
@@ -335,14 +438,49 @@ 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>
           </Portal>
@@ -369,6 +507,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({
@@ -391,8 +533,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,
 

diff --git a/src/components/IconSuccess/IconSuccess.css b/src/components/IconSuccess/IconSuccess.css
@@ -0,0 +1,8 @@
+@import '../../marketplace.css';
+
+.root {
+}
+
+.fillColor {
+  fill: var(--successColor);
+}
diff --git a/src/components/IconSuccess/IconSuccess.example.js b/src/components/IconSuccess/IconSuccess.example.js
@@ -0,0 +1,7 @@
+import IconSuccess from './IconSuccess';
+
+export const Icon = {
+  component: IconSuccess,
+  props: {},
+  group: 'icons',
+};