chore: Syncing 2u/project-theseus with master [2023-08-29] (#800)

* chore(i18n): update translations

* feat: added transaction_declined error handler (#756)

* chore(i18n): update translations

* feat: use `atlas` in `make pull_translations` (#732)

Changes
-------
 - Bump frontend-platform to bring intl-imports.js script
 - Move all i18n imports into `src/i18n/index.js` so intl-imports.js can
   override it with latest translations
 - Add `atlas` into `make pull_translations` when `OPENEDX_ATLAS_PULL`
   environment variable is set.

Refs: [FC-0012 project](https://openedx.atlassian.net/l/cp/XGS0iCcQ) implementing Translation Infrastructure OEP-58.

* feat: removed the Localized Currency for subscription (#758)

* PON-281: SDN error handling (#759)

* feat: fixed the program_tile italic and subscribe checkout state

* feat: added SDN error check with feedback saga

* test: fixed borken tests

* test: removed the screen.debug call

* feat: do not display any error alert on the checkout page for sdn

* fix: fixed the config name for feedback saga alert

* Mrazadar/pon 178/unit test checkout (#760)

* test: added stripe service unit test

* test: added api service unit test

* test: working on improving subscription checkout test

* test: checkout test with react-testing-library

* test: removed the commented code

* feat: (PON-326) updated localize date for billing (#764)

* refactor: the Legal support URL to used with env variable

* feat: add localize date with billing information

* test: fixed the broken tests

* refactor: updated SUBSCRIPTION_LEGAL_URL with LEARNER_SUPPORT_URL

* test: trying to fix the failing tests

* test: fixed the broken tests

* feat: update the LEARNER_SUPPORT_URL key

* feat: no localize date for resubscribe case

* fix: update allowlist to unblock translations pr (#767)

* chore(i18n): update translations

* feat: update react & react-dom to v17 (#761)

* feat: update react & react-dom to v17

* build: update paragon version

* refactor: updated edx packages

* refactor: updated header, footer, frontend-build & semver packages to resolve vulnerabilities

---------

Co-authored-by: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com>

* feat: 3DS checkout flow for subscriptions (#773)

* feat: 3DS iframe with modal implementation

* feat: 3DS removed commented code

* feat: 3DS added a redirect page

* feat: added subscription status saga methods

* feat: setting up the 3DS status redux sagas

* feat: handles the happy flow

* feat: updates the error message

* feat: updated styles as per stripe portal 3DS styles

* test: updated tests for subscription/service.tests.js

* test: added tests for subscriptions/data/utils

* feat: updated Secure3DModal to handle stripe-checkout-complete response

* feat: updated subscription status redux to handle stripe-checkout-complete

* feat: incorporated PR feedback

* test: added unit test for Secure3DModal

* feat: fixed the broken styles

* feat: added stripe redirect content-security-policy tag (#776)

* Mrazadar/pon 161/content security fix (#777)

* revert: the react-helmet

* feat: added content-security-policy meta tag at the top

* revert: removed the meta tag from index.html (#778)

* feat: added new relic logs for 3ds (#784)

* fix: Checkout Bulk purchase 'Max' alignment fixed (#781)

* fix: Checkout Bulk purchase 'Max' alignment fixed

* fix: Updated snapshots for cart & payment

* test: added temp logs for testing 3ds (#785)

* revert: removed the previously temporary new-relic logs

* feat: added console logs for loading 3ds details

* feat: removed previous logs and added new relic logs (#786)

* feat: change console to logInfo

* feat: added one more log

* feat: sending program_uuid with stripe-checkout-complete (#788)

* docs: add feedback.rst HOWTO (#782)

* docs: include error handling in feedback.rst title

* docs: move sub-TOCs to relevant sections for clarity

* docs: move feedback.rst sections around

* refactor: updated workflow (#775)

* feat: added readme docs for subscription feature (#793)

* feat: updating readme.md for subscription related work

* feat: added subscription related docs

* feat: fixed the code formatting

* refactor: remove the new relic logs previously added for 3DS testing

* feat: reverted the readme.rst changes

---------

Co-authored-by: Jenkins <sre+jenkins@edx.org>
Co-authored-by: Raza Dar <5585262+mrazadar@users.noreply.github.com>
Co-authored-by: Omar Al-Ithawi <i@omardo.com>
Co-authored-by: Juliana Kang <julianajlk@gmail.com>
Co-authored-by: Mashal Malik <107556986+Mashal-m@users.noreply.github.com>
Co-authored-by: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com>
Co-authored-by: Mobeen Ali <46916730+mobeenali12@users.noreply.github.com>
Co-authored-by: Phillip Shiu <pshiu@edx.org>

.env

@@ -38,5 +38,6 @@ STRIPE_RESPONSE_URL=null
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL=null
 ENABLE_B2C_SUBSCRIPTIONS=false
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=null
 COMMERCE_COORDINATOR_BASE_URL=null
 WAFFLE_FLAGS=null

.env.development

@@ -36,5 +36,6 @@ STRIPE_RESPONSE_URL=http://localhost:18130/payment/stripe/checkout/
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL='http://localhost:18750'
 ENABLE_B2C_SUBSCRIPTIONS=true
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=null
 COMMERCE_COORDINATOR_BASE_URL='http://localhost:8140'
 WAFFLE_FLAGS=null

.env.development-stage

@@ -36,5 +36,6 @@ STRIPE_RESPONSE_URL=http://localhost:18130/payment/stripe/checkout/
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL='http://localhost:18750'
 ENABLE_B2C_SUBSCRIPTIONS=false
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=null
 COMMERCE_COORDINATOR_BASE_URL='http://localhost:8140'
 WAFFLE_FLAGS=null

.env.test

@@ -37,5 +37,6 @@ STRIPE_RESPONSE_URL=http://localhost:18130/payment/stripe/checkout/
 STRIPE_DEFERRED_INTENT_BETA_FLAG=elements_enable_deferred_intent_beta_1
 SUBSCRIPTIONS_BASE_URL='http://localhost:18750'
 ENABLE_B2C_SUBSCRIPTIONS=false
+SUBSCRIPTIONS_LEARNER_HELP_CENTER_URL=https://support.edx.org/sample/article/1234567
 COMMERCE_COORDINATOR_BASE_URL='http://localhost:8140'
 WAFFLE_FLAGS=""

.github/workflows/ci.yml

@@ -22,8 +22,7 @@ jobs:
       uses: actions/setup-node@v3
       with:
         node-version: ${{ env.NODE_VER }}
-    - run: npm install -g npm@${{ matrix.npm }}
-
+
     - name: Install dependencies
       run: npm ci
 

Makefile

@@ -1,6 +1,7 @@
 export TRANSIFEX_RESOURCE = frontend-app-payment
 transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -42,9 +43,24 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f -t --mode reviewed --languages=$(transifex_langs)
+	tx pull -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+      && atlas pull --filter=$(transifex_langs) \
+               translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+               translations/paragon/src/i18n/messages:paragon \
+               translations/frontend-app-payment/src/i18n/messages:frontend-app-payment
+
+	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-payment
+endif
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

docs/how_tos/feedback.rst

@@ -1,5 +1,5 @@
-Feedback HOWTO
-==============
+Feedback & Error Handling HOWTO
+===============================
 
 Status: Draft
 
@@ -15,16 +15,96 @@ This HOWTO explains how the API should act to use this feedback module within
 the `payment module`_ and overviews where and how frontend-app-payment puts the
 message from the API's response.
 
+This HOWTO also explores how frontend-app-payment handles API call errors in
+the payment module. The payment module catches most API call errors and sends
+them to the feedback module to show the user a nicely formatted error.
+
 .. _feedback module: https://github.com/openedx/frontend-app-payment/tree/master/src/feedback
 .. _payment module: https://github.com/openedx/frontend-app-payment/tree/master/src/payment
 
 .. contents:: Table of Contents
+   :depth: 1
+
+
+How does the feedback module work?
+----------------------------------
+
+Via exceptions
+~~~~~~~~~~~~~~
+
+* `payment/data/service.js`_ catches most exceptions thrown by the Axios client
+  calling the APIs and runs `handleBasketApiError()`_
+
+* `handleBasketApiError()`_ calls `payment/data/handleRequestError.js`_, which
+  reformats and transforms the feedback module JSON and re-throws the error.
+
+* `payment/data/sagas.js`_ catches most errors thrown by
+  `payment/data/service.js`_ and calls `feedback/data/sagas.js`_
+  `handleErrors()`_.
+
+* `handleErrors()`_ uses the ``addMessage()`` action and the associated
+  `addMessage() reducer helper function`_ to store the feedback message in
+  Redux's store.
+
+* `feedback/AlertList.jsx`_ is connected to the Redux store and formats each
+  feedback message into the props of a new `feedback/AlertMessage.jsx`_.
+
+.. _addMessage() reducer helper function: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/feedback/data/reducers.js#L22-L34
+.. _feedback/AlertList.jsx: https://github.com/openedx/frontend-app-payment/blob/master/src/feedback/AlertList.jsx
+.. _feedback/AlertMessage.jsx: https://github.com/openedx/frontend-app-payment/blob/master/src/feedback/AlertMessage.jsx
+
+.. _Via messages:
+
+Via messages
+~~~~~~~~~~~~
+
+* `payment/data/sagas.js`_ passes selected API responses into
+  `handleMessages()`_.
+
+* `handleMessages()`_ works similarly to `handleErrors()`_. See above.
+
+.. _handleMessages(): https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/feedback/data/sagas.js#L39
+
+
+How do I add a new error message in the payment module?
+-------------------------------------------------------
+
+* In `payment/data/service.js`_, add ``.catch(handleBasketApiError)`` to the
+  method chain of the Axios request (usually ``post()`` or ``get()``) to
+  reformat the error into the correct format, then rethrow.
+
+    * `handleBasketApiError()`_ is a thin wrapper around
+      `payment/data/handleRequestError.js`_.
+
+* In `payment/data/sagas.js`_, add a try-catch that catches the error
+  reformatted and rethrown by `handleBasketApiError()`_ and calls the
+  appropriate error handler:
+
+    * ``yield call(handleErrors, error, clearExistingMessages)`` for the
+      `List of errors`_ or `Single error`_ formats
+    * ``yield call(handleReduxFormValidationErrors, error,
+      clearExistingMessages)`` for the `Dictionary of field errors`_ format
+
+* In `payment/AlertCodeMessages.jsx`_, add a new component for your message.
+
+* In `components/formatted-alert-list/FormattedAlertList.jsx`_, add the new
+  component you created in ``<AlertCodeMessages>`` to ``messagesCode`` under
+  key named after the ``error_code`` you want the API to call to trigger this
+  error message.
+
+.. _payment/data/service.js: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/payment/data/service.js
+.. _payment/data/handleRequestError.js: https://github.com/openedx/frontend-app-payment/blob/master/src/payment/data/handleRequestError.js
+.. _payment/data/sagas.js: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/payment/data/sagas.js
+.. _payment/AlertCodeMessages.jsx: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/payment/AlertCodeMessages.jsx
+.. _components/formatted-alert-list/FormattedAlertList.jsx: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/components/formatted-alert-list/FormattedAlertList.jsx
 
 
 What should the API do?
 -----------------------
 
-Return a JSON response with in one of the following formats.
+Return a JSON response with in one of the following formats:
+
+.. contents:: :local:
 
 The feedback module will ignore dictionary keys not listed in the formats
 below. Thus, it is safe to include additional keys in the API's response.
@@ -203,44 +283,15 @@ Some error codes are connected to pre-built components. See:
 .. _AlertCodeMessages: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/payment/AlertCodeMessages.jsx
 
 
-How does the feedback module work?
-----------------------------------
-
-Via exceptions
-~~~~~~~~~~~~~~
-
-* `payment/data/service.js`_ catches most exceptions thrown by the Axios client
-  calling the APIs and runs `handleBasketApiError()`_
-
-* `handleBasketApiError()`_ calls `payment/data/handleRequestError.js`_, which
-  reformats and transforms the feedback module JSON and re-throws the error.
-
-* `payment/data/sagas.js`_ catches most errors thrown by
-  `payment/data/service.js`_ and calls `feedback/data/sagas.js`_
-  `handleErrors()`_.
-
-* `handleErrors()`_ uses the ``addMessage()`` action and the associated
-  `addMessage() reducer helper function`_ to store the feedback message in
-  Redux's store.
-
-* `feedback/AlertList.jsx`_ is connected to the Redux store and formats each
-  feedback message into the props of a new `feedback/AlertMessage.jsx`_.
-
-.. _addMessage() reducer helper function: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/feedback/data/reducers.js#L22-L34
-.. _feedback/AlertList.jsx: https://github.com/openedx/frontend-app-payment/blob/master/src/feedback/AlertList.jsx
-.. _feedback/AlertMessage.jsx: https://github.com/openedx/frontend-app-payment/blob/master/src/feedback/AlertMessage.jsx
-
-.. _Via messages:
-
-Via messages
-~~~~~~~~~~~~
-
-* `payment/data/sagas.js`_ passes selected API responses into
-  `handleMessages()`_.
+What is the fallback error?
+---------------------------
 
-* `handleMessages()`_ works similarly to `handleErrors()`_. See above.
+If a saga calls `handleErrors()`_ but the API response is not in one of the
+formats above or ``error_code`` is ``fallback-error``, ``handleErrors()`` will
+throw up the `FallbackErrorMessage`_.
 
-.. _handleMessages(): https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/feedback/data/sagas.js#L39
+.. _FallbackErrorMessage: https://github.com/openedx/frontend-app-payment/blob/master/src/feedback/FallbackErrorMessage.jsx
+.. _handleErrors(): https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/feedback/data/sagas.js#L10C22-L10C22
 
 
 How to clear the list of feedback?
@@ -272,50 +323,6 @@ See the `URL parameter error message implementation`_.
 .. _URL parameter error message implementation: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/feedback/data/sagas.js#L49-L53
 
 
-How do I add a new error message in the payment module?
--------------------------------------------------------
-
-* In `payment/data/service.js`_, add ``.catch(handleBasketApiError)`` to the
-  method chain of the Axios request (usually ``post()`` or ``get()``) to
-  reformat the error into the correct format, then rethrow.
-
-    * `handleBasketApiError()`_ is a thin wrapper around
-      `payment/data/handleRequestError.js`_.
-
-* In `payment/data/sagas.js`_, add a try-catch that catches the error
-  reformatted and rethrown by `handleBasketApiError()`_ and calls the
-  appropriate error handler:
-
-    * ``yield call(handleErrors, error, clearExistingMessages)`` for the
-      `List of errors`_ or `Single error`_ formats
-    * ``yield call(handleReduxFormValidationErrors, error,
-      clearExistingMessages)`` for the `Dictionary of field errors`_ format
-
-* In `payment/AlertCodeMessages.jsx`_, add a new component for your message.
-
-* In `components/formatted-alert-list/FormattedAlertList.jsx`_, add the new
-  component you created in ``<AlertCodeMessages>`` to ``messagesCode`` under
-  key named after the ``error_code`` you want the API to call to trigger this
-  error message.
-
-.. _payment/data/service.js: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/payment/data/service.js
-.. _payment/data/handleRequestError.js: https://github.com/openedx/frontend-app-payment/blob/master/src/payment/data/handleRequestError.js
-.. _payment/data/sagas.js: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/payment/data/sagas.js
-.. _payment/AlertCodeMessages.jsx: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/payment/AlertCodeMessages.jsx
-.. _components/formatted-alert-list/FormattedAlertList.jsx: https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/components/formatted-alert-list/FormattedAlertList.jsx
-
-
-What is the fallback error?
----------------------------
-
-If a saga calls `handleErrors()`_ but the API response is not in one of the
-formats above or ``error_code`` is ``fallback-error``, ``handleErrors()`` will
-throw up the `FallbackErrorMessage`_.
-
-.. _FallbackErrorMessage: https://github.com/openedx/frontend-app-payment/blob/master/src/feedback/FallbackErrorMessage.jsx
-.. _handleErrors(): https://github.com/openedx/frontend-app-payment/blob/1d631c51035eb8405ce9b03e0fa64a5a6e386268/src/feedback/data/sagas.js#L10C22-L10C22
-
-
 When are snake_case dictionary keys auto-converted to camelCase?
 ----------------------------------------------------------------
 
@@ -357,6 +364,8 @@ implementation in `feedback/data/sagas.js`_.
 Future work
 -----------
 
+.. contents:: :local:
+
 Remove special error codes
 ~~~~~~~~~~~~~~~~~~~~~~~~~~
 There are certain error codes which receive special handling due to using