feat: added paypal param redirect

audit-ci.json

@@ -1,7 +1,9 @@
 {
     "allowlist": [
         "GHSA-wf5p-g6vw-rhxx",
-        "GHSA-rv95-896h-c2vc"
+        "GHSA-rv95-896h-c2vc",
+        "GHSA-grv7-fg5c-xmjg",
+        "GHSA-3h5v-q93c-6h6q"
     ],
     "moderate": true
 }

public/index.html

@@ -26,6 +26,5 @@
       </div>
     </div>
 
-    <script type="text/javascript" src="https://flex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js"></script>
   </body>
 </html>

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(() => {
+    const timer = setTimeout(() => {
+      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}`);
+      }
+    }, 3000); // Delay the redirect to receipt page by 3 seconds to make sure ecomm order fulfillment is done.
+
+    return () => clearTimeout(timer); // On unmount, clear the timer
+  }, [srMessage, 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/PageLoadingDynamicPaymentMethods.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { render, act } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { logInfo } from '@edx/frontend-platform/logging';
+
+import createRootReducer from '../data/reducers';
+import PageLoadingDynamicPaymentMethods from './PageLoadingDynamicPaymentMethods';
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logInfo: jest.fn(),
+}));
+
+describe('PageLoadingDynamicPaymentMethods', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore(createRootReducer());
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('renders <PageLoadingDynamicPaymentMethods />', () => {
+    const component = (
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <PageLoadingDynamicPaymentMethods
+            srMessage=""
+            orderNumber="EDX-100001"
+          />
+        </Provider>
+      </IntlProvider>
+    );
+    const { container: tree } = render(component);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('it redirects to receipt page after 3 seconds delay', () => {
+    const orderNumber = 'EDX-100001';
+    const logMessage = `Dynamic Payment Methods payment succeeded for edX order number ${orderNumber}, redirecting to ecommerce receipt page.`;
+    render(
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <PageLoadingDynamicPaymentMethods
+            srMessage=""
+            orderNumber={orderNumber}
+          />
+        </Provider>
+      </IntlProvider>,
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(logInfo).toHaveBeenCalledWith(expect.stringMatching(logMessage));
+  });
+
+  it('cleans up the timer on unmount', () => {
+    const { unmount } = render(
+      <PageLoadingDynamicPaymentMethods
+        srMessage=""
+        orderNumber="EDX-100001"
+      />,
+    );
+    unmount();
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(logInfo).not.toHaveBeenCalled();
+  });
+});

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}
         />
       );

src/payment/__snapshots__/PageLoadingDynamicPaymentMethods.test.jsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageLoadingDynamicPaymentMethods renders <PageLoadingDynamicPaymentMethods /> 1`] = `
+<div>
+  <div>
+    <div
+      class="d-flex justify-content-center align-items-center flex-column"
+      style="height: 50vh;"
+    >
+      <div
+        class="spinner-border text-primary"
+        data-testid="loading-page"
+        role="status"
+      />
+    </div>
+  </div>
+</div>
+`;

src/payment/checkout/Checkout.jsx

@@ -26,10 +26,28 @@ import { PayPalButton } from '../payment-methods/paypal';
 import { ORDER_TYPES } from '../data/constants';
 
 class Checkout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasRedirectedToPaypal: false,
+    };
+  }
+
   componentDidMount() {
     this.props.fetchClientSecret();
   }
 
+  handleRedirectToPaypal = () => {
+    const { loading, isBasketProcessing, isPaypalRedirect } = this.props;
+    const { hasRedirectedToPaypal } = this.state;
+    const submissionDisabled = loading || isBasketProcessing;
+
+    if (!submissionDisabled && isPaypalRedirect && !hasRedirectedToPaypal) {
+      this.setState({ hasRedirectedToPaypal: true });
+      this.handleSubmitPayPal();
+    }
+  };
+
   handleSubmitPayPal = () => {
     // TO DO: after event parity, track data should be
     // sent only if the payment is processed, not on click
@@ -161,6 +179,8 @@ class Checkout extends React.Component {
     const isBulkOrder = orderType === ORDER_TYPES.BULK_ENROLLMENT;
     const isQuantityUpdating = isBasketProcessing && loaded;
 
+    this.handleRedirectToPaypal();
+
     // Stripe element config
     // TODO: Move these to a better home
     const options = {
@@ -314,6 +334,7 @@ Checkout.propTypes = {
   enableStripePaymentProcessor: PropTypes.bool,
   stripe: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   clientSecretId: PropTypes.string,
+  isPaypalRedirect: PropTypes.bool,
 };
 
 Checkout.defaultProps = {
@@ -327,6 +348,7 @@ Checkout.defaultProps = {
   enableStripePaymentProcessor: false,
   stripe: null,
   clientSecretId: null,
+  isPaypalRedirect: false,
 };
 
 const mapStateToProps = (state) => ({

src/payment/data/redux.test.js

@@ -114,6 +114,7 @@ describe('redux tests', () => {
           isEmpty: false,
           isPaymentRedirect: false,
           isRedirect: false,
+          isPaypalRedirect: false,
         });
       });
 
@@ -135,6 +136,7 @@ describe('redux tests', () => {
           isEmpty: false,
           isPaymentRedirect: false,
           isRedirect: true, // this is also now true.
+          isPaypalRedirect: false,
         });
       });
 
@@ -156,6 +158,7 @@ describe('redux tests', () => {
           isEmpty: false,
           isPaymentRedirect: true, // this is now true
           isRedirect: false,
+          isPaypalRedirect: false,
         });
       });
     });

src/payment/data/selectors.js

@@ -39,10 +39,13 @@ export const paymentSelector = createSelector(
       && queryParams.coupon_redeem_redirect == 1; // eslint-disable-line eqeqeq
     const isPaymentRedirect = !!queryParams
       && Boolean(queryParams.payment_intent); // Only klarna has redirect_status on URL
+    const isPaypalRedirect = !!queryParams
+      && queryParams.paypal_redirect == 1; // eslint-disable-line eqeqeq
     return {
       ...basket,
       isCouponRedeemRedirect,
       isPaymentRedirect,
+      isPaypalRedirect,
       isEmpty:
         basket.loaded && !basket.redirect && (!basket.products || basket.products.length === 0),
       isRedirect: