Use test data for billing details

sharetribe · Feb 5, 2021 · 709a9ea · 709a9ea
1 parent a775964
commit 709a9ea
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 28 deletions.
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';
@@ -67,10 +68,10 @@ const ONETIME_PAYMENT = 'ONETIME_PAYMENT';
 const PAY_AND_SAVE_FOR_LATER_USE = 'PAY_AND_SAVE_FOR_LATER_USE';
 const USE_SAVED_CARD = 'USE_SAVED_CARD';
 
-const paymentFlow = (selectedPaymentMethod, saveAfterOnetimePayment) => {
+const paymentFlow = (selectedPaymentMethod, saveAfterOnetimePayment, useDefaultTestData) => {
   // Payment mode could be 'replaceCard', but without explicit saveAfterOnetimePayment flag,
   // we'll handle it as one-time payment
-  return selectedPaymentMethod === 'defaultCard'
+  return selectedPaymentMethod === 'defaultCard' && !useDefaultTestData
     ? USE_SAVED_CARD
     : saveAfterOnetimePayment
     ? PAY_AND_SAVE_FOR_LATER_USE
@@ -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() {
@@ -242,7 +245,12 @@ export class CheckoutPageComponent extends Component {
       ? ensuredDefaultPaymentMethod.attributes.stripePaymentMethodId
       : null;
 
-    const selectedPaymentFlow = paymentFlow(selectedPaymentMethod, saveAfterOnetimePayment);
+
+    const selectedPaymentFlow = paymentFlow(
+      selectedPaymentMethod,
+      saveAfterOnetimePayment,
+      this.state.useDefaultTestData
+    );
 
     // Step 1: initiate order by requesting payment from Marketplace API
     const fnRequestPayment = fnParams => {
@@ -462,6 +470,10 @@ export class CheckoutPageComponent extends Component {
       });
   }
 
+  handleInitialTestData = () => {
+    this.setState({ useDefaultTestData: true });
+  };
+
   onStripeInitialized(stripe) {
     this.stripe = stripe;
 
@@ -746,7 +758,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 +806,34 @@ 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}
-                />
+                <>
+                  <Button onClick={this.handleInitialTestData}>Fill with test data</Button>
+                  <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
+                        : this.state.useDefaultTestData
+                        ? config.stripe.testData.basicTestCardDetails
+                        : null
+                    }
+                    paymentIntent={paymentIntent}
+                    onStripeInitialized={this.onStripeInitialized}
+                    useDefaultTestData={this.state.useDefaultTestData}
+                  />
+                </>
               ) : null}
               {isPaymentExpired ? (
                 <p className={css.orderError}>

diff --git a/src/forms/StripePaymentForm/StripePaymentForm.js b/src/forms/StripePaymentForm/StripePaymentForm.js
@@ -298,7 +298,11 @@ class StripePaymentForm extends Component {
 
     const params = {
       message: initialMessage ? initialMessage.trim() : null,
-      card: this.card,
+      card: this.props.useDefaultTestData
+        ? {
+            token: config.stripe.testData.basicTestCardToken,
+          }
+        : card,
       formId,
       formValues: values,
       paymentMethod: getPaymentMethod(
@@ -328,6 +332,7 @@ class StripePaymentForm extends Component {
       form,
       hasHandledCardPayment,
       defaultPaymentMethod,
+      useDefaultTestData,
     } = formRenderProps;
 
     this.finalFormAPI = form;
@@ -392,9 +397,8 @@ class StripePaymentForm extends Component {
       this.state.paymentMethod,
       showPaymentMethodSelector
     );
-    const showOnetimePaymentFields = ['onetimeCardPayment', 'replaceCard'].includes(
-      selectedPaymentMethod
-    );
+    const showOnetimePaymentFields =
+      !!useDefaultTestData || ['onetimeCardPayment', 'replaceCard'].includes(selectedPaymentMethod);
     return hasStripeKey ? (
       <Form className={classes} onSubmit={handleSubmit}>
         {billingDetailsNeeded && !loadingData ? (