From a11256cb5095dc728f897189e743127277556b6f Mon Sep 17 00:00:00 2001
From: Reino Muhl <reino.muhl@gmail.com>
Date: Wed, 6 Mar 2024 14:51:14 -0500
Subject: [PATCH] feat(next): add l10n grunt scripts Because:

* Add grunt script used to manage and update l10n ftl files used by
  payments next

This commit:

* Adds grunt scripts copy:branding-ftl, concat:ftl and watch:ftl

Closes #FXA-8819
---
 .gitignore                                    |  3 ++
 apps/payments/next/Gruntfile.js               | 48 +++++++++++++++++++
 apps/payments/next/project.json               |  3 ++
 apps/payments/next/public/l10n/de-DE.ftl      | 18 +++----
 apps/payments/next/public/l10n/en-US.ftl      | 18 +++----
 apps/payments/next/public/l10n/es-ES.ftl      | 18 +++----
 apps/payments/next/public/l10n/fr-FR.ftl      | 18 +++----
 .../ui/src/lib/server/purchase-details.ftl    | 20 ++++++++
 .../ui/src/lib/server/purchase-details.tsx    | 13 ++---
 .../ui/src/lib/server/terms-and-privacy.ftl   |  5 ++
 .../ui/src/lib/utils/terms-and-privacy.ts     | 10 ++--
 package.json                                  |  5 ++
 yarn.lock                                     |  7 ++-
 13 files changed, 138 insertions(+), 48 deletions(-)
 create mode 100644 apps/payments/next/Gruntfile.js
 create mode 100644 libs/payments/ui/src/lib/server/purchase-details.ftl
 create mode 100644 libs/payments/ui/src/lib/server/terms-and-privacy.ftl

diff --git a/.gitignore b/.gitignore
index 7a5fb79c04..2cbec1d18a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -134,6 +134,9 @@ packages/fxa-payments-server/fxa-content-server-l10n/
 packages/fxa-payments-server/public/locales
 packages/fxa-payments-server/test
 
+# payments-next
+apps/payments/next/public/locales
+
 # fxa-profile-server
 packages/fxa-profile-server/var
 packages/fxa-profile-server/BUCKET_NAME
diff --git a/apps/payments/next/Gruntfile.js b/apps/payments/next/Gruntfile.js
new file mode 100644
index 0000000000..e6142413f1
--- /dev/null
+++ b/apps/payments/next/Gruntfile.js
@@ -0,0 +1,48 @@
+/* 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/. */
+
+module.exports = function (grunt) {
+  const srcPaths = [
+    '.license.header',
+    'app/**/*.ftl',
+    '../../../libs/payments/ui/src/lib/**/*.ftl'
+  ];
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    // make a copy of the local branding terms available for local development
+    // before they are extracted to the l10n repo
+    // this file will not be included in the string extraction process, so should not lead to duplication
+    copy: {
+      'branding-ftl': {
+        nonull: true,
+        src: '../../../libs/shared/l10n/src/lib/branding.ftl',
+        dest: 'public/locales/en/branding.ftl',
+      },
+    },
+    concat: {
+      ftl: {
+        src: srcPaths,
+        dest: 'public/locales/en/payments.ftl',
+      },
+    },
+    watch: {
+      ftl: {
+        files: srcPaths,
+        tasks: ['merge-ftl'],
+        options: {
+          interrupt: true,
+        },
+      },
+    },
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+
+  grunt.registerTask('merge-ftl', ['copy:branding-ftl', 'concat:ftl']);
+  grunt.registerTask('watch-ftl', ['watch:ftl']);
+};
+
diff --git a/apps/payments/next/project.json b/apps/payments/next/project.json
index 503fae2767..e5f9b52bd1 100644
--- a/apps/payments/next/project.json
+++ b/apps/payments/next/project.json
@@ -79,6 +79,9 @@
     "delete": {
       "command": "pm2 delete apps/payments/next/pm2.config.js"
     },
+    "l10n-merge": {
+      "command": "yarn grunt --gruntfile='apps/payments/next/Gruntfile.js' merge-ftl"
+    },
     "storybook": {
       "executor": "@nx/storybook:storybook",
       "options": {
diff --git a/apps/payments/next/public/l10n/de-DE.ftl b/apps/payments/next/public/l10n/de-DE.ftl
index d0463a0f19..fd6647b5c2 100644
--- a/apps/payments/next/public/l10n/de-DE.ftl
+++ b/apps/payments/next/public/l10n/de-DE.ftl
@@ -1,15 +1,15 @@
 ## Component - PlanDetails
 
-plan-details-header = Produktdetails
-plan-details-list-price = Listenpreis
-plan-details-show-button = Details anzeigen
-plan-details-hide-button = Details ausblenden
-plan-details-total-label = Gesamt
-plan-details-tax = Steuern und Gebühren
+next-plan-details-header = Produktdetails
+next-plan-details-list-price = Listenpreis
+next-plan-details-show-button = Details anzeigen
+next-plan-details-hide-button = Details ausblenden
+next-plan-details-total-label = Gesamt
+next-plan-details-tax = Steuern und Gebühren
 
-terms = Nutzungsbedingungen
-privacy = Datenschutzhinweis
-terms-download = Nutzungsbedingungen herunterladen
+next-terms = Nutzungsbedingungen
+next-privacy = Datenschutzhinweis
+next-terms-download = Nutzungsbedingungen herunterladen
 
 payment-confirmation-thanks-heading = Vielen Dank!
 
diff --git a/apps/payments/next/public/l10n/en-US.ftl b/apps/payments/next/public/l10n/en-US.ftl
index e7dda1e2d5..1e18f8c074 100644
--- a/apps/payments/next/public/l10n/en-US.ftl
+++ b/apps/payments/next/public/l10n/en-US.ftl
@@ -1,11 +1,11 @@
 ## Component - PlanDetails
 
-plan-details-header = Product details
-plan-details-list-price = List Price
-plan-details-show-button = Show details
-plan-details-hide-button = Hide details
-plan-details-total-label = Total
-plan-details-tax = Taxes and Fees
+next-plan-details-header = Product details
+next-plan-details-list-price = List Price
+next-plan-details-show-button = Show details
+next-plan-details-hide-button = Hide details
+next-plan-details-total-label = Total
+next-plan-details-tax = Taxes and Fees
 
 ## Subscription upgrade plan details - shared by multiple components, including plan details and payment form
 ## $amount (Number) - The amount billed. It will be formatted as currency.
@@ -24,9 +24,9 @@ plan-price-interval-yearly = { $amount } yearly
 list-positive-amount = { $amount }
 list-negative-amount = - { $amount }
 
-terms = Terms of Service
-privacy = Privacy Notice
-terms-download = Download Terms
+next-terms = Terms of Service
+next-privacy = Privacy Notice
+next-terms-download = Download Terms
 
 payment-confirmation-thanks-heading = Thank you!
 
diff --git a/apps/payments/next/public/l10n/es-ES.ftl b/apps/payments/next/public/l10n/es-ES.ftl
index b72fefb1e5..dc735fcb30 100644
--- a/apps/payments/next/public/l10n/es-ES.ftl
+++ b/apps/payments/next/public/l10n/es-ES.ftl
@@ -1,11 +1,11 @@
 ## Component - PlanDetails
 
-plan-details-header = Detalles del producto
-plan-details-list-price = Lista de precios
-plan-details-show-button = Mostrar detalles
-plan-details-hide-button = Ocultar detalles
-plan-details-total-label = Total
-plan-details-tax = Impuestos y tasas
+next-plan-details-header = Detalles del producto
+next-plan-details-list-price = Lista de precios
+next-plan-details-show-button = Mostrar detalles
+next-plan-details-hide-button = Ocultar detalles
+next-plan-details-total-label = Total
+next-plan-details-tax = Impuestos y tasas
 
 plan-price-interval-day =
     { $intervalCount ->
@@ -51,9 +51,9 @@ plan-price-interval-year =
            *[other] { $amount } cada { $intervalCount } años
         }
 
-terms = Términos del servicio
-privacy = Aviso de privacidad
-terms-download = Descargar términos
+next-terms = Términos del servicio
+next-privacy = Aviso de privacidad
+next-terms-download = Descargar términos
 
 payment-confirmation-thanks-heading = ¡Gracias!
 
diff --git a/apps/payments/next/public/l10n/fr-FR.ftl b/apps/payments/next/public/l10n/fr-FR.ftl
index aa1ee298d0..522bbfc10d 100644
--- a/apps/payments/next/public/l10n/fr-FR.ftl
+++ b/apps/payments/next/public/l10n/fr-FR.ftl
@@ -1,11 +1,11 @@
 ## Component - PlanDetails
 
-plan-details-header = Détails du produit
-plan-details-list-price = Prix courant
-plan-details-show-button = Afficher les détails
-plan-details-hide-button = Masquer les détails
-plan-details-total-label = Total
-plan-details-tax = Taxes et frais
+next-plan-details-header = Détails du produit
+next-plan-details-list-price = Prix courant
+next-plan-details-show-button = Afficher les détails
+next-plan-details-hide-button = Masquer les détails
+next-plan-details-total-label = Total
+next-plan-details-tax = Taxes et frais
 
 ## Subscription upgrade plan details - shared by multiple components, including plan details and payment form
 ## $amount (Number) - The amount billed. It will be formatted as currency.
@@ -24,9 +24,9 @@ plan-price-interval-yearly = { $amount } par an
 list-positive-amount = { $amount }
 list-negative-amount = - { $amount }
 
-terms = Conditions d’utilisation
-privacy = Politique de confidentialité
-terms-download = Télécharger les conditions
+next-terms = Conditions d’utilisation
+next-privacy = Politique de confidentialité
+next-terms-download = Télécharger les conditions
 
 payment-confirmation-thanks-heading = Merci !
 
diff --git a/libs/payments/ui/src/lib/server/purchase-details.ftl b/libs/payments/ui/src/lib/server/purchase-details.ftl
new file mode 100644
index 0000000000..23a6ae7ad3
--- /dev/null
+++ b/libs/payments/ui/src/lib/server/purchase-details.ftl
@@ -0,0 +1,20 @@
+## Component - PurchaseDetails
+
+next-plan-details-header = Product details
+next-plan-details-list-price = List Price
+next-plan-details-tax = Taxes and Fees
+next-plan-details-total-label = Total
+
+# Title of container where a user can input a coupon code to get a discount on a subscription.
+next-coupon-promo-code = Promo Code
+
+## Purchase details - shared by multiple components, including purchase details and payment form
+## $amount (Number) - The amount billed. It will be formatted as currency.
+
+plan-price-interval-daily = { $amount } daily
+plan-price-interval-weekly = { $amount } weekly
+plan-price-interval-monthly = { $amount } monthly
+plan-price-interval-6monthly = { $amount } every 6 months
+plan-price-interval-yearly = { $amount } yearly
+list-positive-amount = { $amount }
+list-negative-amount = - { $amount }
diff --git a/libs/payments/ui/src/lib/server/purchase-details.tsx b/libs/payments/ui/src/lib/server/purchase-details.tsx
index 46b07217e2..2afe78341c 100644
--- a/libs/payments/ui/src/lib/server/purchase-details.tsx
+++ b/libs/payments/ui/src/lib/server/purchase-details.tsx
@@ -118,7 +118,7 @@ export async function PurchaseDetails(props: PurchaseDetailsProps) {
       </div>
 
       <h3 className="text-grey-600 font-semibold my-4">
-        {l10n.getMessage('plan-details-header')?.value?.toString() ||
+        {l10n.getMessage('next-plan-details-header')?.value?.toString() ||
           `Plan Details`}
       </h3>
 
@@ -134,7 +134,7 @@ export async function PurchaseDetails(props: PurchaseDetailsProps) {
         {!!listAmount && (
           <ListLabelItem
             {...{
-              labelLocalizationId: 'plan-details-list-price',
+              labelLocalizationId: 'next-plan-details-list-price',
               labelFallbackText: 'List Price',
               amount: listAmount,
               currency,
@@ -146,7 +146,7 @@ export async function PurchaseDetails(props: PurchaseDetailsProps) {
         {!!discountAmount && (
           <ListLabelItem
             {...{
-              labelLocalizationId: 'coupon-promo-code',
+              labelLocalizationId: 'next-coupon-promo-code',
               labelFallbackText: 'Promo Code',
               amount: discountAmount,
               currency,
@@ -159,7 +159,7 @@ export async function PurchaseDetails(props: PurchaseDetailsProps) {
         {exclusiveTaxRates.length === 1 && (
           <ListLabelItem
             {...{
-              labelLocalizationId: 'plan-details-tax',
+              labelLocalizationId: 'next-plan-details-tax',
               labelFallbackText: 'Taxes and Fees',
               amount: exclusiveTaxRates[0].amount,
               currency,
@@ -185,8 +185,9 @@ export async function PurchaseDetails(props: PurchaseDetailsProps) {
 
       <div className="plan-details-item pt-4 pb-6 font-semibold">
         <span className="text-base">
-          {l10n.getMessage('plan-details-total-label')?.value?.toString() ||
-            `Total`}
+          {l10n
+            .getMessage('next-plan-details-total-label')
+            ?.value?.toString() || `Total`}
         </span>
         <span
           className="overflow-hidden text-ellipsis text-lg whitespace-nowrap"
diff --git a/libs/payments/ui/src/lib/server/terms-and-privacy.ftl b/libs/payments/ui/src/lib/server/terms-and-privacy.ftl
new file mode 100644
index 0000000000..0a2ea996ca
--- /dev/null
+++ b/libs/payments/ui/src/lib/server/terms-and-privacy.ftl
@@ -0,0 +1,5 @@
+## Component - TermsAndPrivacy
+
+next-terms = Terms of Service
+next-privacy = Privacy Notice
+next-terms-download = Download Terms
diff --git a/libs/payments/ui/src/lib/utils/terms-and-privacy.ts b/libs/payments/ui/src/lib/utils/terms-and-privacy.ts
index 4258b1f6c3..1795a58e2c 100644
--- a/libs/payments/ui/src/lib/utils/terms-and-privacy.ts
+++ b/libs/payments/ui/src/lib/utils/terms-and-privacy.ts
@@ -88,13 +88,13 @@ export function buildFirefoxAccountsTerms(
           key: 'fxa-terms-1',
           href: `${contentServerURL}/legal/terms`,
           text: 'Terms of Service',
-          localizationId: 'terms',
+          localizationId: 'next-terms',
         },
         {
           key: 'fxa-terms-2',
           href: `${contentServerURL}/legal/privacy`,
           text: 'Privacy Notice',
-          localizationId: 'privacy',
+          localizationId: 'next-privacy',
         },
       ],
     },
@@ -114,7 +114,7 @@ export function buildProductTerms(
       key: 'product-terms-1',
       href: termsOfService,
       text: 'Terms of Service',
-      localizationId: 'terms',
+      localizationId: 'next-terms',
     });
   }
 
@@ -123,7 +123,7 @@ export function buildProductTerms(
       key: 'product-terms-2',
       href: privacyNotice,
       text: 'Privacy Notice',
-      localizationId: 'privacy',
+      localizationId: 'next-privacy',
     });
   }
 
@@ -132,7 +132,7 @@ export function buildProductTerms(
       key: 'product-terms-3',
       href: termsOfServiceDownload,
       text: 'Download Terms',
-      localizationId: 'terms-download',
+      localizationId: 'next-terms-download',
     });
   }
 
diff --git a/package.json b/package.json
index 67f6a9e50b..847336bdc9 100644
--- a/package.json
+++ b/package.json
@@ -194,6 +194,11 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "grunt": "^1.6.1",
+    "grunt-cli": "^1.4.3",
+    "grunt-contrib-concat": "^2.1.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-watch": "^1.1.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-environment-node": "^29.7.0",
diff --git a/yarn.lock b/yarn.lock
index fe4a352574..634a0a877a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -38711,6 +38711,11 @@ fsevents@~2.1.1:
     eslint-plugin-react-hooks: 4.6.0
     graphql: ^16.8.0
     graphql-request: ^6.1.0
+    grunt: ^1.6.1
+    grunt-cli: ^1.4.3
+    grunt-contrib-concat: ^2.1.0
+    grunt-contrib-copy: ^1.0.0
+    grunt-contrib-watch: ^1.1.0
     hot-shots: ^10.0.0
     husky: ^4.2.5
     jest: ^29.5.0
@@ -40092,7 +40097,7 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
-"grunt-contrib-copy@npm:1.0.0":
+"grunt-contrib-copy@npm:1.0.0, grunt-contrib-copy@npm:^1.0.0":
   version: 1.0.0
   resolution: "grunt-contrib-copy@npm:1.0.0"
   dependencies: