feat: Add PageLoadingDynamicPaymentMethods component with timeout

src/payment/PageLoading.jsx

@@ -1,7 +1,5 @@
 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() {
@@ -17,17 +15,6 @@ 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
@@ -47,11 +34,4 @@ 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/PageLoadingDynamicPaymentMethods.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { logInfo } from '@edx/frontend-platform/logging';
+
+const PageLoadingDynamicPaymentMethods = ({ srMessage, orderNumber }) => {
+  useEffect(() => {
+    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}`;
+
+    const timer = setTimeout(() => {
+      if (getConfig().ENVIRONMENT !== 'test') {
+        /* istanbul ignore next */
+        global.location.assign(`${getConfig().ECOMMERCE_BASE_URL}/checkout/receipt/?${queryParams}`);
+      }
+    }, 4000); // Delay the redirect to receipt page by 4 seconds to make sure ecomm order fulfillment is done.
+
+    return () => clearTimeout(timer); // On unmount, clear the timer
+  }, [orderNumber]);
+
+  const renderSrMessage = () => {
+    if (!srMessage) {
+      return null;
+    }
+
+    return (
+      <span className="sr-only">
+        {srMessage}
+      </span>
+    );
+  };
+
+  return (
+    <div>
+      <div
+        className="d-flex justify-content-center align-items-center flex-column"
+        style={{
+          height: '50vh',
+        }}
+      >
+        <div className="spinner-border text-primary" data-testid="loading-page" role="status">
+          {renderSrMessage()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PageLoadingDynamicPaymentMethods.propTypes = {
+  srMessage: PropTypes.string.isRequired,
+  orderNumber: PropTypes.string,
+};
+
+PageLoadingDynamicPaymentMethods.defaultProps = {
+  orderNumber: null,
+};
+
+export default PageLoadingDynamicPaymentMethods;

src/payment/PaymentPage.jsx

@@ -26,6 +26,7 @@ import EmptyCartMessage from './EmptyCartMessage';
 import Cart from './cart/Cart';
 import Checkout from './checkout/Checkout';
 import { FormattedAlertList } from '../components/formatted-alert-list/FormattedAlertList';
+import PageLoadingDynamicPaymentMethods from './PageLoadingDynamicPaymentMethods';
 
 class PaymentPage extends React.Component {
   constructor(props) {
@@ -113,9 +114,8 @@ class PaymentPage extends React.Component {
     // lag between when the paymentStatus is no longer null but the redirect hasn't happened yet.
     if (shouldRedirectToReceipt) {
       return (
-        <PageLoading
+        <PageLoadingDynamicPaymentMethods
           srMessage={this.props.intl.formatMessage(messages['payment.loading.payment'])}
-          shouldRedirectToReceipt={shouldRedirectToReceipt}
           orderNumber={orderNumber}
         />
       );