sharetribe · OtterleyW · Feb 11, 2021 · Feb 5, 2021 · Feb 5, 2021 · Feb 5, 2021
diff --git a/src/components/EditListingWizard/EditListingWizard.js b/src/components/EditListingWizard/EditListingWizard.js
@@ -15,7 +15,13 @@ import {
 } from '../../util/urlHelpers';
 import { ensureCurrentUser, ensureListing } from '../../util/data';
 
-import { Modal, NamedRedirect, Tabs, StripeConnectAccountStatusBox } from '../../components';
+import {
+  Button,
+  Modal,
+  NamedRedirect,
+  Tabs,
+  StripeConnectAccountStatusBox,
+} from '../../components';
 import { StripeConnectAccountForm } from '../../forms';
 
 import EditListingWizardTab, {
@@ -193,6 +199,7 @@ class EditListingWizard extends Component {
     this.state = {
       draftId: null,
       showPayoutDetails: false,
+      useDefaultTestData: false,
     };
     this.handleCreateFlowTabScrolling = this.handleCreateFlowTabScrolling.bind(this);
     this.handlePublishListing = this.handlePublishListing.bind(this);
@@ -366,6 +373,15 @@ class EditListingWizard extends Component {
       return <NamedRedirect name="EditListingPage" params={pathParams} />;
     }
 
+    const handleStripeTestData = () => {
+      this.setState({ useDefaultTestData: true });
+    };
+
+    const stripeDefaultTestData = config.stripe.testData;
+    const stripeInitialValues = this.state.useDefaultTestData
+      ? { accountType: stripeDefaultTestData.accountType, country: stripeDefaultTestData.country }
+      : null;
+
     return (
       <div className={classes}>
         <Tabs
@@ -420,6 +436,9 @@ class EditListingWizard extends Component {
                 <p className={css.modalMessage}>
                   <FormattedMessage id="EditListingWizard.payoutModalInfo" />
                 </p>
+                <Button className={css.stripeTestDataButton} onClick={handleStripeTestData}>
+                  <FormattedMessage id="EditListingWizard.fillInTestDetails" />
+                </Button>
                 <StripeConnectAccountForm
                   disabled={formDisabled}
                   inProgress={payoutDetailsSaveInProgress}
@@ -437,6 +456,8 @@ class EditListingWizard extends Component {
                   onSubmit={rest.onPayoutDetailsSubmit}
                   onGetStripeConnectAccountLink={handleGetStripeConnectAccountLink}
                   stripeConnected={stripeConnected}
+                  initialValues={stripeInitialValues}
+                  useDefaultTestData={this.state.useDefaultTestData}
                 >
                   {stripeConnected && !returnedAbnormallyFromStripe && showVerificationNeeded ? (
                     <StripeConnectAccountStatusBox

diff --git a/src/components/EditListingWizard/EditListingWizard.module.css b/src/components/EditListingWizard/EditListingWizard.module.css
@@ -116,3 +116,10 @@
 .modalMessage {
   @apply --marketplaceModalParagraphStyles;
 }
+
+.stripeTestDataButton {
+  @apply --marketplaceSmallFontStyles;
+  width: 100%;
+  min-height: 40px;
+  margin-top: 24px;
+}
diff --git a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js
@@ -40,9 +40,11 @@ class TokenInputFieldComponent extends Component {
     };
 
     // Fill initialState with input type specific data
+    // Demo specific: If the user wants to use default test values,
+    // we need to add the default bankAccountNumber as inital value
     BANK_ACCOUNT_INPUTS.forEach(inputType => {
       this.initialState[inputType] = {
-        value: '',
+        value: this.props.useDefaultTestData ? config.stripe.testData.bankAccountNumber : null,
         touched: false,
         error: formatFieldMessage(intl, inputType, 'required'),
       };
@@ -76,6 +78,19 @@ class TokenInputFieldComponent extends Component {
     }
     this.stripe = window.Stripe(config.stripe.publishableKey);
     this._isMounted = true;
+
+    // Demo specific: If the user wants to use default test values,
+    // we need to trigger fetching the bank account token from Stripe
+    // separately (as the value is initial value and the field has not changed yet actually).
+    // This is a bit hacky, but it keeps the diff in minimum.
+    if (!!this.props.useDefaultTestData) {
+      this.handleInputChange(
+        { target: { value: config.stripe.testData.bankAccountNumber } },
+        config.stripe.testData.bankAccountType,
+        config.stripe.testData.country,
+        this.props.intl
+      );
+    }
   }
 
   componentDidUpdate(prevProps) {

diff --git a/src/config.js b/src/config.js
@@ -1,6 +1,6 @@
 import * as custom from './marketplace-custom-config.js';
 import defaultLocationSearches from './default-location-searches';
-import { defaultMCC, stripePublishableKey, stripeCountryDetails } from './stripe-config';
+import { defaultMCC, stripePublishableKey, stripeCountryDetails, testData } from './stripe-config';
 import { currencyConfiguration } from './currency-config';
 
 const env = process.env.REACT_APP_ENV;
@@ -229,6 +229,7 @@ const config = {
     defaultMCC: defaultMCC,
     publishableKey: stripePublishableKey,
     supportedCountries: stripeCountryDetails,
+    testData: testData,
   },
   canonicalRootURL,
   address: {

diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js
@@ -39,6 +39,7 @@ import {
   NamedRedirect,
   Page,
   ResponsiveImage,
+  Button,
 } from '../../components';
 import { StripePaymentForm } from '../../forms';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
@@ -101,13 +102,15 @@ export class CheckoutPageComponent extends Component {
       pageData: {},
       dataLoaded: false,
       submitting: false,
+      useDefaultTestData: false,
     };
     this.stripe = null;
 
     this.onStripeInitialized = this.onStripeInitialized.bind(this);
     this.loadInitialData = this.loadInitialData.bind(this);
     this.handlePaymentIntent = this.handlePaymentIntent.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInitialTestData = this.handleInitialTestData.bind(this);
   }
 
   componentDidMount() {
@@ -462,6 +465,10 @@ export class CheckoutPageComponent extends Component {
       });
   }
 
+  handleInitialTestData = () => {
+    this.setState({ useDefaultTestData: true });
+  };
+
   onStripeInitialized(stripe) {
     this.stripe = stripe;
 
@@ -746,7 +753,9 @@ export class CheckoutPageComponent extends Component {
     // If your marketplace works mostly in one country you can use initial values to select country automatically
     // e.g. {country: 'FI'}
 
-    const initalValuesForStripePayment = { name: userName };
+    const initalValuesForStripePayment = !this.state.useDefaultTestData
+      ? { name: userName }
+      : { name: userName, ...config.stripe.testData.address };
 
     return (
       <Page {...pageProps}>
@@ -792,26 +801,39 @@ export class CheckoutPageComponent extends Component {
                 </p>
               ) : null}
               {showPaymentForm ? (
-                <StripePaymentForm
-                  className={css.paymentForm}
-                  onSubmit={this.handleSubmit}
-                  inProgress={this.state.submitting}
-                  formId="CheckoutPagePaymentForm"
-                  paymentInfo={intl.formatMessage({ id: 'CheckoutPage.paymentInfo' })}
-                  authorDisplayName={currentAuthor.attributes.profile.displayName}
-                  showInitialMessageInput={showInitialMessageInput}
-                  initialValues={initalValuesForStripePayment}
-                  initiateOrderError={initiateOrderError}
-                  confirmCardPaymentError={confirmCardPaymentError}
-                  confirmPaymentError={confirmPaymentError}
-                  hasHandledCardPayment={hasPaymentIntentUserActionsDone}
-                  loadingData={!stripeCustomerFetched}
-                  defaultPaymentMethod={
-                    hasDefaultPaymentMethod ? currentUser.stripeCustomer.defaultPaymentMethod : null
-                  }
-                  paymentIntent={paymentIntent}
-                  onStripeInitialized={this.onStripeInitialized}
-                />
+                <>
+                  {!hasDefaultPaymentMethod ? (
+                    <Button
+                      className={css.stripeTestDataButton}
+                      onClick={this.handleInitialTestData}
+                    >
+                      <FormattedMessage id="CheckoutPage.fillInTestDetails" />
+                    </Button>
+                  ) : null}
+                  <StripePaymentForm
+                    className={css.paymentForm}
+                    onSubmit={this.handleSubmit}
+                    inProgress={this.state.submitting}
+                    formId="CheckoutPagePaymentForm"
+                    paymentInfo={intl.formatMessage({ id: 'CheckoutPage.paymentInfo' })}
+                    authorDisplayName={currentAuthor.attributes.profile.displayName}
+                    showInitialMessageInput={showInitialMessageInput}
+                    initialValues={initalValuesForStripePayment}
+                    initiateOrderError={initiateOrderError}
+                    confirmCardPaymentError={confirmCardPaymentError}
+                    confirmPaymentError={confirmPaymentError}
+                    hasHandledCardPayment={hasPaymentIntentUserActionsDone}
+                    loadingData={!stripeCustomerFetched}
+                    defaultPaymentMethod={
+                      hasDefaultPaymentMethod
+                        ? currentUser.stripeCustomer.defaultPaymentMethod
+                        : null
+                    }
+                    paymentIntent={paymentIntent}
+                    onStripeInitialized={this.onStripeInitialized}
+                    useDefaultTestData={this.state.useDefaultTestData}
+                  />
+                </>
               ) : null}
               {isPaymentExpired ? (
                 <p className={css.orderError}>

diff --git a/src/containers/CheckoutPage/CheckoutPage.module.css b/src/containers/CheckoutPage/CheckoutPage.module.css
@@ -141,12 +141,11 @@
 
   @media (--viewportMedium) {
     margin-top: 27px;
-    margin-bottom: 30px;
+    margin-bottom: 22px;
   }
 
   @media (--viewportLarge) {
     margin-top: 0px;
-    margin-bottom: 54px;
     padding: 0;
   }
 }
@@ -331,3 +330,10 @@
     margin: 0 48px;
   }
 }
+
+.stripeTestDataButton {
+  @apply --marketplaceSmallFontStyles;
+  width: 100%;
+  min-height: 40px;
+  margin-bottom: 16px;
+}
diff --git a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap
@@ -98,6 +98,21 @@ exports[`CheckoutPage matches snapshot 1`] = `
       <section
         className="paymentContainer"
       >
+        <Button
+          checkmarkClassName={null}
+          className="stripeTestDataButton"
+          disabled={false}
+          inProgress={false}
+          onClick={[Function]}
+          ready={false}
+          rootClassName={null}
+          spinnerClassName={null}
+        >
+          <FormattedMessage
+            id="CheckoutPage.fillInTestDetails"
+            values={Object {}}
+          />
+        </Button>
         <injectIntl(StripePaymentForm)
           authorDisplayName="author display name"
           className="paymentForm"
@@ -118,6 +133,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
           paymentInfo="CheckoutPage.paymentInfo"
           paymentIntent={null}
           showInitialMessageInput={true}
+          useDefaultTestData={false}
         />
       </section>
     </div>

diff --git a/src/containers/PaymentMethodsPage/PaymentMethodsPage.js b/src/containers/PaymentMethodsPage/PaymentMethodsPage.js
@@ -2,13 +2,15 @@ import React, { useState } from 'react';
 import { bool, func, object } from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import config from '../../config';
 import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import { ensureCurrentUser, ensureStripeCustomer, ensurePaymentMethodCard } from '../../util/data';
 import { propTypes } from '../../util/types';
 import { savePaymentMethod, deletePaymentMethod } from '../../ducks/paymentMethods.duck';
 import { handleCardSetup } from '../../ducks/stripe.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
 import {
+  Button,
   SavedCardDetails,
   LayoutSideNavigation,
   LayoutWrapperMain,
@@ -28,6 +30,7 @@ import css from './PaymentMethodsPage.module.css';
 const PaymentMethodsPageComponent = props => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [cardState, setCardState] = useState(null);
+  const [useDefaultTestData, setUseDefaultTestData] = useState(false);
 
   const {
     currentUser,
@@ -117,6 +120,7 @@ const PaymentMethodsPageComponent = props => {
 
   const handleRemovePaymentMethod = () => {
     onDeletePaymentMethod().then(() => {
+      setUseDefaultTestData(false);
       fetchStripeCustomer();
     });
   };
@@ -136,7 +140,13 @@ const PaymentMethodsPageComponent = props => {
     ? `${ensuredCurrentUser.attributes.profile.firstName} ${ensuredCurrentUser.attributes.profile.lastName}`
     : null;
 
-  const initalValuesForStripePayment = { name: userName };
+  const initalValuesForStripePayment = !useDefaultTestData
+    ? { name: userName }
+    : { name: userName, ...config.stripe.testData.address };
+
+  const handleInitialTestData = () => {
+    setUseDefaultTestData(true);
+  };
 
   const card = hasDefaultPaymentMethod
     ? ensurePaymentMethodCard(currentUser.stripeCustomer.defaultPaymentMethod).attributes.card
@@ -173,19 +183,25 @@ const PaymentMethodsPageComponent = props => {
                   />
                 ) : null}
                 {showForm ? (
-                  <PaymentMethodsForm
-                    className={css.paymentForm}
-                    formId="PaymentMethodsForm"
-                    initialValues={initalValuesForStripePayment}
-                    onSubmit={handleSubmit}
-                    handleRemovePaymentMethod={handleRemovePaymentMethod}
-                    hasDefaultPaymentMethod={hasDefaultPaymentMethod}
-                    addPaymentMethodError={addPaymentMethodError}
-                    deletePaymentMethodError={deletePaymentMethodError}
-                    createStripeCustomerError={createStripeCustomerError}
-                    handleCardSetupError={handleCardSetupError}
-                    inProgress={isSubmitting}
-                  />
+                  <>
+                    <Button className={css.stripeTestDataButton} onClick={handleInitialTestData}>
+                      <FormattedMessage id="PaymentMethodsPage.fillInTestDetails" />
+                    </Button>
+                    <PaymentMethodsForm
+                      className={css.paymentForm}
+                      formId="PaymentMethodsForm"
+                      initialValues={initalValuesForStripePayment}
+                      onSubmit={handleSubmit}
+                      handleRemovePaymentMethod={handleRemovePaymentMethod}
+                      hasDefaultPaymentMethod={hasDefaultPaymentMethod}
+                      addPaymentMethodError={addPaymentMethodError}
+                      deletePaymentMethodError={deletePaymentMethodError}
+                      createStripeCustomerError={createStripeCustomerError}
+                      handleCardSetupError={handleCardSetupError}
+                      inProgress={isSubmitting}
+                      useDefaultTestData={useDefaultTestData}
+                    />
+                  </>
                 ) : null}
               </>
             )}