Fix: Browser back button error in Payment page

src/payment/PaymentPage.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
+import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent } from '@edx/frontend-platform/analytics';
 
 import messages from './PaymentPage.messages';
@@ -42,8 +43,24 @@ class PaymentPage extends React.Component {
   }
 
   componentDidMount() {
-    sendPageEvent();
-    this.props.fetchBasket();
+    const rawSkus = localStorage.getItem('skus');
+    const skus = JSON.parse(rawSkus);
+
+    // Check if SKU is not null
+    if (skus !== null) {
+      const baseURL = getConfig().ECOMMERCE_BASE_URL;
+      // Constructing the URL with the sku parameters
+      let ecommerceBasketURL = `${baseURL}/basket/add/?`;
+      // Appending each sku value to the URL
+      Object.values(skus).forEach(sku => { ecommerceBasketURL += `sku=${sku}&`; });
+      // Removing the extra '&' character at the end
+      ecommerceBasketURL = ecommerceBasketURL.slice(0, -1);
+      window.location.href = ecommerceBasketURL;
+      localStorage.removeItem('skus');
+    } else {
+      this.props.fetchBasket();
+      sendPageEvent();
+    }
   }
 
   renderContent() {

src/payment/checkout/Checkout.jsx

@@ -47,6 +47,16 @@ class Checkout extends React.Component {
     );
 
     this.props.submitPayment({ method: 'paypal' });
+
+    // eslint-disable-next-line react/prop-types
+    const { products } = this.props;
+    const skus = [];
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const product of products) {
+      skus.push(product.sku);
+    }
+    localStorage.setItem('skus', JSON.stringify(skus));
   };
 
   // eslint-disable-next-line react/no-unused-class-component-methods

src/payment/checkout/Checkout.test.jsx

@@ -103,6 +103,16 @@ describe('<Checkout />', () => {
       expect(store.getActions().pop()).toEqual(submitPayment({ method: 'paypal' }));
     });
 
+    it('should call submitPayment and store skus in localStorage when handleSubmitPayPal is called', async () => {
+      const paypalButton = await screen.findByTestId('PayPalButton');
+      fireEvent.click(paypalButton);
+
+      expect(store.getActions().pop()).toEqual(submitPayment({ method: 'paypal' }));
+      // Check if skus are stored in localStorage
+      const storedSkus = JSON.parse(localStorage.getItem('skus'));
+      expect(storedSkus.length).toBeGreaterThan(0);
+    });
+
     // Apple Pay temporarily disabled per REV-927 - https://github.com/openedx/frontend-app-payment/pull/256
 
     it('submits and tracks the payment form', () => {

src/payment/data/reducers.js

@@ -35,7 +35,8 @@ const basket = (state = basketInitialState, action = null) => {
         loaded: true,
       };
 
-      case BASKET_DATA_RECEIVED: return { ...state, ...action.payload };
+      case BASKET_DATA_RECEIVED:
+        return { ...state, ...action.payload };
 
       case BASKET_PROCESSING: return {
         ...state,

src/setupTest.js

@@ -18,3 +18,20 @@ mergeConfig({
   APPLE_PAY_MERCHANT_CAPABILITIES: process.env.APPLE_PAY_MERCHANT_CAPABILITIES && process.env.APPLE_PAY_MERCHANT_CAPABILITIES.split(','),
   WAFFLE_FLAGS: {},
 });
+
+const localStorageMock = jest.fn(() => {
+  let store = {};
+  return {
+    getItem: (key) => (store[key] || null),
+    setItem: (key, value) => {
+      store[key] = value.toString();
+    },
+    clear: () => {
+      store = {};
+    },
+    removeItem: (key) => {
+      delete store[key];
+    },
+  };
+})();
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });