refactor: DPM loading lag for successful payments redirect (#6)

REV-4009

src/payment/PageLoading.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { logInfo } from '@edx/frontend-platform/logging';
 
 export default class PageLoading extends Component {
   renderSrMessage() {
@@ -15,6 +17,17 @@ export default class PageLoading extends Component {
   }
 
   render() {
+    const { shouldRedirectToReceipt, orderNumber } = this.props;
+
+    if (shouldRedirectToReceipt) {
+      logInfo(`Dynamic Payment Methods payment succeeded for edX order number ${orderNumber}, redirecting to ecommerce receipt page.`);
+      const queryParams = `order_number=${orderNumber}&disable_back_button=${Number(true)}&dpm_enabled=${true}`;
+      if (getConfig().ENVIRONMENT !== 'test') {
+        /* istanbul ignore next */
+        global.location.assign(`${getConfig().ECOMMERCE_BASE_URL}/checkout/receipt/?${queryParams}`);
+      }
+    }
+
     return (
       <div>
         <div
@@ -34,4 +47,11 @@ export default class PageLoading extends Component {
 
 PageLoading.propTypes = {
   srMessage: PropTypes.string.isRequired,
+  shouldRedirectToReceipt: PropTypes.bool,
+  orderNumber: PropTypes.string,
+};
+
+PageLoading.defaultProps = {
+  shouldRedirectToReceipt: false,
+  orderNumber: null,
 };

src/payment/PaymentPage.jsx

@@ -2,14 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { loadStripe } from '@stripe/stripe-js';
-import { getConfig } from '@edx/frontend-platform';
 import {
   FormattedMessage,
   getLocale,
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { logInfo } from '@edx/frontend-platform/logging';
 import { AppContext } from '@edx/frontend-platform/react';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
 
@@ -95,15 +93,6 @@ class PaymentPage extends React.Component {
     }
   };
 
-  redirectToReceiptPage(orderNumber) {
-    logInfo(`Payment succeeded for edX order number ${orderNumber}, redirecting to ecommerce receipt page.`);
-    const queryParams = `order_number=${orderNumber}&disable_back_button=${Number(true)}&dpm_enabled=${true}`;
-    if (getConfig().ENVIRONMENT !== 'test') {
-      /* istanbul ignore next */
-      global.location.assign(`${getConfig().ECOMMERCE_BASE_URL}/checkout/receipt/?${queryParams}`);
-    }
-  }
-
   renderContent() {
     const { isEmpty, isRedirect, isPaymentRedirect } = this.props;
 
@@ -117,13 +106,10 @@ class PaymentPage extends React.Component {
       orderNumber,
     } = this.state;
 
-    // If this is a redirect from Stripe Dynamic Payment Methods with a successful payment, redirect to the receipt page
-    if (paymentStatus === 'succeeded') {
-      this.redirectToReceiptPage(orderNumber);
-    }
+    const shouldRedirectToReceipt = paymentStatus === 'succeeded';
 
     // If this is a redirect from Stripe Dynamic Payment Methods, show loading icon until getPaymentStatus is done.
-    if (isPaymentRedirect && paymentStatus === null) {
+    if (isPaymentRedirect && paymentStatus !== undefined && paymentStatus === null) {
       return (
         <PageLoading
           srMessage={this.props.intl.formatMessage(messages['payment.loading.payment'])}
@@ -148,6 +134,19 @@ class PaymentPage extends React.Component {
       );
     }
 
+    // If this is a redirect from Stripe Dynamic Payment Methods with a successful payment,
+    // redirect to the receipt page. PageLoading render is required first otherwise there is a
+    // lag between when the paymentStatus is no longer null but the redirect hasn't happened yet.
+    if (shouldRedirectToReceipt) {
+      return (
+        <PageLoading
+          srMessage={this.props.intl.formatMessage(messages['payment.loading.payment'])}
+          shouldRedirectToReceipt={shouldRedirectToReceipt}
+          orderNumber={orderNumber}
+        />
+      );
+    }
+
     // In all other cases, we want to render the basket content.  This is used before we've loaded
     // anything, during loading, and after we've loaded a basket with a product in it.
 

src/payment/cart/CouponForm.jsx

@@ -44,7 +44,7 @@ class CouponForm extends Component {
 
     return (
       <form onSubmit={this.handleAddSubmit} className="summary-row d-flex align-items-end">
-        <Form.Group controlId={id} invalid={false} className="mb-0 mr-2">
+        <Form.Group controlId={id} invalid={false.toString()} className="mb-0 mr-2">
           <label className="h6 d-block" htmlFor={id}>
             <FormattedMessage
               id="payment.coupon.label"

src/payment/cart/__snapshots__/Cart.test.jsx.snap

@@ -205,6 +205,7 @@ exports[`<Cart /> renders a basic, one product cart with coupon form 1`] = `
         >
           <div
             class="pgn__form-group mb-0 mr-2"
+            invalid="false"
           >
             <label
               class="h6 d-block"

src/payment/cart/__snapshots__/CouponForm.test.jsx.snap

@@ -27,6 +27,7 @@ exports[`CouponForm should render a form when there is no coupon 1`] = `
   >
     <div
       class="pgn__form-group mb-0 mr-2"
+      invalid="false"
     >
       <label
         class="h6 d-block"

src/payment/checkout/payment-form/StripePaymentForm.jsx

@@ -74,10 +74,10 @@ const StripePaymentForm = ({
 
   // Check if should show PaymentMethodMessagingElement, as it only renders
   // for specific countries, if country code and currency are known, and they must match
-  const userLocationCountryCode = new Cookies().get(getConfig().LOCATION_OVERRIDE_COOKIE)
-    || new Cookies().get(getConfig().USER_LOCATION_COOKIE_NAME);
+  const userLocationCountryCode = new Cookies().get(getConfig().USER_LOCATION_COOKIE_NAME)
+    || new Cookies().get(getConfig().LOCATION_OVERRIDE_COOKIE);
   const shouldDisplayPaymentMethodMessagingElement = (
-    (!!userLocationCountryCode || !!locationCountryCode) && !!orderTotal && !!currency
+    !!(userLocationCountryCode || locationCountryCode) && !!orderTotal && !!currency
   );
 
   // Loading button should appear when: basket and stripe elements are loading, quantity is updating and not submitting

src/payment/payment-methods/stripe/service.js

@@ -84,7 +84,7 @@ export default async function checkout(
   const postData = formurlencoded({
     payment_intent_id: result.paymentIntent.id,
     skus,
-    dynamic_payment_methods_enabled: basket.isDynamicPaymentMethodsEnabled,
+    dynamic_payment_methods_enabled: basket.isDynamicPaymentMethodsEnabled || false,
   });
   await getAuthenticatedHttpClient()
     .post(