diff --git a/src/payment/PaymentPage.jsx b/src/payment/PaymentPage.jsx index 597ed74b9..5b7b4d132 100644 --- a/src/payment/PaymentPage.jsx +++ b/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() { diff --git a/src/payment/checkout/Checkout.jsx b/src/payment/checkout/Checkout.jsx index 7831f459a..23630fd38 100644 --- a/src/payment/checkout/Checkout.jsx +++ b/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 diff --git a/src/payment/checkout/Checkout.test.jsx b/src/payment/checkout/Checkout.test.jsx index f153eda09..27d67dc77 100644 --- a/src/payment/checkout/Checkout.test.jsx +++ b/src/payment/checkout/Checkout.test.jsx @@ -103,6 +103,16 @@ describe('', () => { 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', () => { diff --git a/src/payment/data/reducers.js b/src/payment/data/reducers.js index 204a08fbf..fcf5dc41f 100644 --- a/src/payment/data/reducers.js +++ b/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, diff --git a/src/setupTest.js b/src/setupTest.js index 3a65fb810..5c61ce7dc 100755 --- a/src/setupTest.js +++ b/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 });