New master

.env

@@ -21,6 +21,8 @@ REFRESH_ACCESS_TOKEN_ENDPOINT=null
 SEGMENT_KEY=null
 SITE_NAME=null
 USER_INFO_COOKIE_NAME=null
+USER_LOCATION_COOKIE_NAME=null
+LOCATION_OVERRIDE_COOKIE=null
 CURRENCY_COOKIE_NAME=null
 SUPPORT_URL=null
 CYBERSOURCE_URL=null

.env.development

@@ -19,6 +19,8 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY='VMsX2obE9Xveo4se3c6CmfdG0LZVc7qI'
 SITE_NAME='edX'
 USER_INFO_COOKIE_NAME='edx-user-info'
+USER_LOCATION_COOKIE_NAME='prod-edx-cf-loc'
+LOCATION_OVERRIDE_COOKIE='location-override'
 CURRENCY_COOKIE_NAME='edx-price-l10n'
 SUPPORT_URL='http://localhost:18000/support'
 CYBERSOURCE_URL='https://testsecureacceptance.cybersource.com/silent/pay'

.env.development-stage

@@ -19,6 +19,8 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='/proxy/lms/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
 USER_INFO_COOKIE_NAME='npmstage-edx-user-info'
+USER_LOCATION_COOKIE_NAME='prod-edx-cf-loc'
+LOCATION_OVERRIDE_COOKIE='location-override'
 CURRENCY_COOKIE_NAME='edx-price-l10n'
 SUPPORT_URL='/proxy/lms/support'
 CYBERSOURCE_URL='https://testsecureacceptance.cybersource.com/silent/pay'

.env.test

@@ -17,6 +17,8 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
 USER_INFO_COOKIE_NAME='edx-user-info'
+USER_LOCATION_COOKIE_NAME='prod-edx-cf-loc'
+LOCATION_OVERRIDE_COOKIE='location-override'
 
 # App specific
 CURRENCY_COOKIE_NAME='edx-price-l10n'

CODEOWNERS

@@ -1,3 +1,3 @@
 # PCI compliance requires stricter scrutiny, see PR template
-/src	@openedx/revenue-squad
-CODEOWNERS  @openedx/revenue-squad
+/src	@edx/revenue-squad
+CODEOWNERS  @edx/revenue-squad

README.rst

@@ -3,7 +3,9 @@
 frontend-app-payment
 ====================
 
-Please tag **@edx/revenue-squad** on any PRs or issues.  Thanks.
+Please tag **@edx/revenue-squad** on any PRs or issues.  Thanks!
+
+This repo is intended for the use of 2U employees.
 
 Introduction
 ------------

audit-ci.json

@@ -1,9 +1,6 @@
 {
     "allowlist": [
-        "GHSA-hpx4-r86g-5jrg",
         "GHSA-wf5p-g6vw-rhxx",
-        "GHSA-cxjh-pqwp-8mfp",
-        "GHSA-wr3j-pwj9-hqq6",
         "GHSA-rv95-896h-c2vc"
     ],
     "moderate": true

docs/how_tos/feedback.rst

@@ -374,6 +374,7 @@ pre-built APIs that do not follow the format of the feedback module in the:
 * `feedback/data/sagas.js`_
 
     * ``basket-changed-error-message``
+    * ``dynamic-payment-methods-country-not-compatible``
     * ``transaction-declined-message``
     * ``error_message`` in URL parameters
 

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/components/formatted-alert-list/FormattedAlertList.jsx

@@ -8,6 +8,7 @@ import {
   EnrollmentCodeQuantityUpdated,
   TransactionDeclined,
   BasketChangedError,
+  DynamicPaymentMethodsNotCompatibleError,
   CaptureKeyTimeoutTwoMinutes,
   CaptureKeyTimeoutOneMinute,
 } from '../../payment/AlertCodeMessages';
@@ -47,6 +48,9 @@ export const FormattedAlertList = (props) => {
         'basket-changed-error-message': (
           <BasketChangedError />
         ),
+        'dynamic-payment-methods-country-not-compatible': (
+          <DynamicPaymentMethodsNotCompatibleError />
+        ),
         'capture-key-2mins-message': (
           <CaptureKeyTimeoutTwoMinutes />
         ),

src/feedback/data/sagas.js

@@ -19,7 +19,7 @@ export function* handleErrors(e, clearExistingMessages) {
   if (e.errors !== undefined) {
     for (let i = 0; i < e.errors.length; i++) { // eslint-disable-line no-plusplus
       const error = e.errors[i];
-      if (error.code === 'basket-changed-error-message') {
+      if (error.code === 'basket-changed-error-message' || error.code === 'dynamic-payment-methods-country-not-compatible') {
         yield put(addMessage(error.code, error.userMessage, {}, MESSAGE_TYPES.ERROR));
       } else if (error.data === undefined && error.messageType === null) {
         yield put(addMessage('transaction-declined-message', error.userMessage, {}, MESSAGE_TYPES.ERROR));

src/payment/AlertCodeMessages.jsx

@@ -73,6 +73,14 @@ export const TransactionDeclined = () => (
   />
 );
 
+export const DynamicPaymentMethodsNotCompatibleError = () => (
+  <FormattedMessage
+    id="payment.messages.transaction.error.dynamic_payment_methods_not_compatible"
+    defaultMessage="The payment method you have selected is not available in your country. Please select another payment method."
+    description="Notifies the user their billing country is not compatible with the Dynamic Payment Method selected."
+  />
+);
+
 export const BasketChangedError = () => (
   <FormattedMessage
     id="payment.messages.transaction.error.basket_changed"

src/payment/AlertCodeMessages.test.jsx

@@ -8,6 +8,8 @@ import {
   SingleEnrollmentCodeWarning,
   EnrollmentCodeQuantityUpdated,
   TransactionDeclined,
+  DynamicPaymentMethodsNotCompatibleError,
+  BasketChangedError,
 } from './AlertCodeMessages';
 
 const mockStore = configureMockStore();
@@ -51,3 +53,27 @@ describe('TransactionDeclined', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe('DynamicPaymentMethodsNotCompatibleError', () => {
+  it('should render with values', () => {
+    const component = (
+      <IntlProvider locale="en">
+        <DynamicPaymentMethodsNotCompatibleError />
+      </IntlProvider>
+    );
+    const { container: tree } = render(component);
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('BasketChangedError', () => {
+  it('should render with values', () => {
+    const component = (
+      <IntlProvider locale="en">
+        <BasketChangedError />
+      </IntlProvider>
+    );
+    const { container: tree } = render(component);
+    expect(tree).toMatchSnapshot();
+  });
+});

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();
+  });
+});