Merge pull request #14467 from mozilla/train-245-uplift-1

Train 245 uplift 1

Author: StaberindeZA

.gitignore

@@ -8,6 +8,10 @@
 
 # Secrets
 .env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 .keys
 public-key.json
 secret-key.json
@@ -39,6 +43,8 @@ tailwind.out.*
 # Dependencies
 **/node_modules
 **/browser_modules
+/.pnp
+.pnp.js
 
 # Logging
 *.log*
@@ -117,6 +123,8 @@ packages/fxa-customs-server/test/mocks/temp.netset
 
 # fxa-payments-server
 packages/fxa-payments-server/fxa-content-server-l10n/
+packages/fxa-payments-server/public/locales
+packages/fxa-payments-server/test
 
 # fxa-profile-server
 packages/fxa-profile-server/var

_scripts/clone-l10n.sh

@@ -135,7 +135,7 @@ AUTH="fxa-auth-server"
 # Copy .ftl files for payments, settings, and auth (emails)
 case "$MODULE" in
     "$PAYMENTS")
-        copy_ftl "main"
+        copy_ftl "payments"
         ;;
     "$SETTINGS")
         copy_ftl "settings"

packages/fxa-auth-server/lib/payments/paypal/client.ts

@@ -260,7 +260,15 @@ export class PayPalClientError extends Error {
   constructor(raw: string, data: NVPResponse, ...params: any) {
     super(...params);
     this.name = 'PayPalClientError';
-    this.errorCode = data.L?.length ? parseInt(data.L[0].ERRORCODE) : undefined;
+    let errors: NVPResponse['L'] = [];
+    // We can get severity "Error" or "Warning" so filter for "Error" as a priority.
+    if (data.L?.length) {
+      errors = data.L.filter((error) => error.SEVERITYCODE === 'Error');
+      if (errors.length === 0) {
+        errors = [data.L[0]];
+      }
+    }
+    this.errorCode = errors?.length ? parseInt(errors[0].ERRORCODE) : undefined;
     if (!this.message) {
       this.message = `PayPal NVP returned a non-success ACK. See "this.raw" or "this.data" for more details. PayPal error code: ${this.errorCode}`;
     }

packages/fxa-auth-server/test/local/payments/paypal-client.js

@@ -480,4 +480,46 @@ describe('PayPalClient', () => {
       assert.equal(response, searchTransactionResponse);
     });
   });
+
+  describe('PaypalClientError', () => {
+    const raw = 'blah';
+    const data = {
+      L: [
+        {
+          ERRORCODE: 10413,
+          LONGMESSAGE:
+            'The totals of the cart item amounts do not match order amounts.',
+          SEVERITYCODE: 'Warning',
+          SHORTMESSAGE:
+            'Transaction refused because of an invalid argument. See additional error messages for details.',
+        },
+        {
+          ERRORCODE: 10417,
+          LONGMESSAGE:
+            'Instruct the customer to retry the transaction using an alternative payment method from the customers PayPal wallet. The transaction did not complete with the customers selected payment method.',
+          SEVERITYCODE: 'Error',
+          SHORTMESSAGE: 'Transaction cannot complete.',
+        },
+      ],
+    };
+
+    it('handles multiple errors when one error is a warning', () => {
+      const paypalClientError = new PayPalClientError(raw, data);
+      assert.deepEqual(paypalClientError.errorCode, 10417);
+    });
+
+    it('falls back to the first error if multiple errors are found', () => {
+      const dataTwoErrors = deepCopy(data);
+      dataTwoErrors.L[0].SEVERITYCODE = 'Error';
+      const paypalClientError = new PayPalClientError(raw, dataTwoErrors);
+      assert.deepEqual(paypalClientError.errorCode, 10413);
+    });
+
+    it('takes the first response code if no errors are returned', () => {
+      const dataNoErrors = deepCopy(data);
+      dataNoErrors.L = [dataNoErrors.L.shift()];
+      const paypalClientError = new PayPalClientError(raw, dataNoErrors);
+      assert.deepEqual(paypalClientError.errorCode, 10413);
+    });
+  });
 });

packages/fxa-payments-server/.gitignore

@@ -95,7 +95,7 @@ export const MockApp = ({
       <AppLocalizationProvider
         baseDir="./locales"
         userLocales={languages}
-        bundles={['main']}
+        bundles={['payments']}
       >
         <StripeProvider stripe={mockStripe}>
           <MockLoader>

packages/fxa-payments-server/.storybook/components/MockApp.tsx

@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use strict';
+
+module.exports = function (grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    concat: {
+      ftl: {
+        src: [
+          // 'src/branding.ftl' is temporary
+          // and will be replaced with '../fxa-shared/lib/l10n/branding.ftl'
+          // in a later ticket - will require coordination with l10n to resolve
+          // conflicting IDs for identical terms.
+          'src/branding.ftl',
+          'src/**/*.ftl',
+        ],
+        dest: 'public/locales/en/payments.ftl',
+      },
+
+      // We need this for tests because we pull the latest from `fxa-content-server-l10n`
+      // and place those in our `public` directory at `postinstall` time, and sometimes we have
+      // FTL updates on our side that haven't landed yet on the l10n side. We want to test
+      // against _our_ latest, and not necessarily the l10n repo's latest.
+      'ftl-test': {
+        src: ['src/branding.ftl', 'src/**/*.ftl'],
+        dest: 'test/payments.ftl',
+      },
+    },
+    watch: {
+      ftl: {
+        files: ['src/**/*.ftl'],
+        tasks: ['merge-ftl'],
+        options: {
+          interrupt: true,
+        },
+      },
+    },
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+
+  grunt.registerTask('merge-ftl', ['concat:ftl']);
+  grunt.registerTask('merge-ftl:test', ['concat:ftl-test']);
+  grunt.registerTask('watch-ftl', ['watch:ftl']);
+};

packages/fxa-payments-server/Gruntfile.js

@@ -84,6 +84,10 @@ We use rescripts and yarn workspaces to manage our node packages. If you are enc
 
 This launch config currently only works for the tests under the `/src` directory in the `fxa-payments-server` package, not the `/server` directory.
 
+### L10N
+
+Strings are automatically extracted to the [`fxa-content-server-l10n` repo](https://github.com/mozilla/fxa-content-server-l10n) where they reach Pontoon for translations to occur by our l10n team and contributors. This is achieved by concatenating all of our .ftl (Fluent) files into a single `payments.ftl` file with the `merge-ftl` grunttask, and the script that runs in `fxa-content-server-l10n` on a weekly cadence. For more detailed information, check out the [ecosystem platform l10n](https://mozilla.github.io/ecosystem-platform/reference/localization) doc.
+
 ## License
 
 MPL-2.0

packages/fxa-payments-server/README.md

@@ -1,5 +1,5 @@
 basepath = "."
 
 [[paths]]
-  reference = "public/locales/en-US/*.ftl"
+  reference = "public/locales/en/*.ftl"
   l10n = "public/locales/{locale}/*.ftl"

packages/fxa-payments-server/l10n.toml

@@ -8,19 +8,22 @@
     "lint": "npm-run-all --parallel lint:eslint",
     "lint:eslint": "eslint . .storybook",
     "audit": "npm audit --json | audit-filter --nsp-config=.nsprc --audit=-",
-    "start": "tsc --build ../fxa-react && npm run build-css && pm2 start pm2.config.js && ../../_scripts/check-url.sh localhost:3031/__lbheartbeat__",
+    "start": "tsc --build ../fxa-react && npm run build-css && grunt merge-ftl && pm2 start pm2.config.js && ../../_scripts/check-url.sh localhost:3031/__lbheartbeat__",
     "stop": "pm2 stop pm2.config.js",
     "restart": "tsc --build ../fxa-react && npm run build-css && pm2 restart pm2.config.js",
     "delete": "pm2 delete pm2.config.js",
     "build": "tsc --build ../fxa-react && NODE_ENV=production npm run build-css && SKIP_PREFLIGHT_CHECK=true PUBLIC_URL=/ INLINE_RUNTIME_CHUNK=false CI=false rescripts build",
     "eject": "react-scripts eject",
     "test": "npm-run-all test:frontend test:server",
-    "test:frontend": "SKIP_PREFLIGHT_CHECK=true PUBLIC_URL=/ INLINE_RUNTIME_CHUNK=false rescripts test --watchAll=false",
+    "test:frontend": "yarn merge-ftl:test && SKIP_PREFLIGHT_CHECK=true PUBLIC_URL=/ INLINE_RUNTIME_CHUNK=false rescripts test --watchAll=false",
     "test:frontend:watch": "SKIP_PREFLIGHT_CHECK=true PUBLIC_URL=/ INLINE_RUNTIME_CHUNK=false rescripts test",
     "test:server": "jest --runInBand --coverage --verbose --config server/jest.config.js --forceExit",
     "format": "prettier --write --config ../../_dev/.prettierrc '**'",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "NODE_ENV=production npm run build-css && build-storybook && cp -r public/locales public/images storybook-static/"
+    "build-storybook": "NODE_ENV=production npm run build-css && build-storybook && cp -r public/images storybook-static/",
+    "merge-ftl": "grunt merge-ftl",
+    "merge-ftl:test": "grunt merge-ftl:test",
+    "watch-ftl": "grunt watch-ftl"
   },
   "eslintConfig": {
     "extends": [
@@ -87,6 +90,10 @@
     "eslint-plugin-jest": "^27.1.3",
     "eslint-plugin-react": "^7.31.10",
     "express-http-proxy": "^1.6.3",
+    "grunt": "^1.5.3",
+    "grunt-cli": "^1.4.3",
+    "grunt-contrib-concat": "^2.1.0",
+    "grunt-contrib-watch": "^1.1.0",
     "handlebars": "^4.7.7",
     "intl": "1.2.5",
     "jest": "27.5.1",

packages/fxa-payments-server/package.json

@@ -72,5 +72,14 @@ module.exports = {
       ignore_watch: ['src/styles/tailwind.out.*'],
       time: true,
     },
+    {
+      name: 'payments-ftl',
+      script: 'yarn grunt watch-ftl',
+      cwd: __dirname,
+      filter_env: ['npm_'],
+      max_restarts: '1',
+      min_uptime: '2m',
+      time: true,
+    },
   ],
 };