Merge pull request #18910 from mozilla/FXA-11717-add-localization-to-page-metadata

elizabeth-ilina · web-flow · commit db2770fb70e4 · 2025-05-28T13:04:11.000-04:00
fix(payments-next): Add localization to page metadata
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/error/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/error/page.tsx
@@ -13,6 +13,7 @@ import {
   CheckoutParams,
   SupportedPages,
   getErrorFtlInfo,
+  buildPageMetadata,
 } from '@fxa/payments/ui/server';
 import {
   getCartOrRedirectAction,
@@ -21,7 +22,6 @@ import {
 import { config } from 'apps/payments/next/config';
 import type { Metadata } from 'next';
 import { CartErrorReasonId } from '@fxa/shared/db/mysql/account';
-import { buildPageMetadata } from '@fxa/payments/ui';
 
 // forces dynamic rendering
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
@@ -38,8 +38,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Error',
-    description: 'There was an error processing your subscription. If this problem persists, please contact support.',
     page: 'error',
     pageType: 'checkout',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/needs_input/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/needs_input/page.tsx
@@ -7,9 +7,12 @@ import {
   LoadingSpinner,
   StripeWrapper,
   PaymentInputHandler,
-  buildPageMetadata,
 } from '@fxa/payments/ui';
-import { getApp, SupportedPages } from '@fxa/payments/ui/server';
+import {
+  getApp,
+  SupportedPages,
+  buildPageMetadata,
+} from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import type { Metadata } from 'next';
@@ -26,8 +29,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Action required',
-    description: 'Please complete the required action to proceed with your payment.',
     page: 'needs_input',
     pageType: 'checkout',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/processing/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/processing/page.tsx
@@ -6,9 +6,8 @@ import {
   PaymentStateObserver,
   CheckoutParams,
   LoadingSpinner,
-  buildPageMetadata,
 } from '@fxa/payments/ui';
-import { getApp, SupportedPages } from '@fxa/payments/ui/server';
+import { getApp, SupportedPages, buildPageMetadata } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { validateCartStateAndRedirectAction } from '@fxa/payments/ui/actions';
 import type { Metadata } from 'next';
@@ -25,8 +24,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Processing',
-    description: 'Please wait while we finish processing your payment.',
     page: 'processing',
     pageType: 'checkout',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx
@@ -11,13 +11,13 @@ import {
   ButtonVariant,
   PaymentSection,
   SignInForm,
-  buildPageMetadata,
 } from '@fxa/payments/ui';
 import {
   getApp,
   SupportedPages,
   CheckoutParams,
   SignedIn,
+  buildPageMetadata,
 } from '@fxa/payments/ui/server';
 import AppleLogo from '@fxa/shared/assets/images/apple-logo.svg';
 import GoogleLogo from '@fxa/shared/assets/images/google-logo.svg';
@@ -40,10 +40,9 @@ export async function generateMetadata(
     searchParams: Record<string, string> | undefined;
   },
 ): Promise<Metadata> {
+
   return buildPageMetadata({
     params,
-    titlePrefix: 'Checkout',
-    description: 'Enter your payment details to complete your purchase.',
     page: 'start',
     pageType: 'checkout',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/success/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/success/page.tsx
@@ -6,7 +6,7 @@ import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import Image from 'next/image';
 import { auth } from 'apps/payments/next/auth';
-import { getCardIcon, buildPageMetadata } from '@fxa/payments/ui';
+import { getCardIcon } from '@fxa/payments/ui';
 import {
   fetchCMSData,
   getCartOrRedirectAction,
@@ -16,6 +16,7 @@ import {
   getApp,
   CheckoutParams,
   SupportedPages,
+  buildPageMetadata,
 } from '@fxa/payments/ui/server';
 import { config } from 'apps/payments/next/config';
 
@@ -32,8 +33,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Success',
-    description: 'Congratulations! You have successfully completed your purchase.',
     page: 'success',
     pageType: 'checkout',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/error/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/error/page.tsx
@@ -12,14 +12,14 @@ import {
   CheckoutParams,
   SupportedPages,
   getErrorFtlInfo,
+  buildPageMetadata,
 } from '@fxa/payments/ui/server';
 import {
   getCartOrRedirectAction,
   recordEmitterEventAction,
 } from '@fxa/payments/ui/actions';
 import { config } from 'apps/payments/next/config';
 import { Metadata } from 'next';
-import { buildPageMetadata } from '@fxa/payments/ui';
 
 // forces dynamic rendering
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
@@ -36,8 +36,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Error',
-    description: 'There was an error processing your upgrade. If this problem persists, please contact support.',
     page: 'error',
     pageType: 'upgrade',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/needs_input/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/needs_input/page.tsx
@@ -7,9 +7,12 @@ import {
   LoadingSpinner,
   StripeWrapper,
   PaymentInputHandler,
-  buildPageMetadata,
 } from '@fxa/payments/ui';
-import { getApp, SupportedPages } from '@fxa/payments/ui/server';
+import {
+  getApp,
+  SupportedPages,
+  buildPageMetadata,
+} from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import { Metadata } from 'next';
@@ -26,8 +29,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Action required',
-    description: 'Please complete the required action to proceed with your payment.',
     page: 'needs_input',
     pageType: 'upgrade',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/processing/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/processing/page.tsx
@@ -6,9 +6,12 @@ import {
   PaymentStateObserver,
   CheckoutParams,
   LoadingSpinner,
-  buildPageMetadata,
 } from '@fxa/payments/ui';
-import { getApp, SupportedPages } from '@fxa/payments/ui/server';
+import {
+  getApp,
+  SupportedPages,
+  buildPageMetadata,
+} from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { validateCartStateAndRedirectAction } from '@fxa/payments/ui/actions';
 import { Metadata } from 'next';
@@ -25,8 +28,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Processing',
-    description: 'Please wait while we finish processing your payment.',
     page: 'processing',
     pageType: 'upgrade',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/success/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/success/page.tsx
@@ -4,8 +4,12 @@
 
 import { headers } from 'next/headers';
 import { auth } from 'apps/payments/next/auth';
-import { getCardIcon, buildPageMetadata } from '@fxa/payments/ui';
-import { SupportedPages, getApp } from '@fxa/payments/ui/server';
+import { getCardIcon } from '@fxa/payments/ui';
+import {
+  SupportedPages,
+  getApp,
+  buildPageMetadata,
+} from '@fxa/payments/ui/server';
 import {
   fetchCMSData,
   getCartOrRedirectAction,
@@ -29,8 +33,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Success',
-    description: 'Congratulations! You have successfully completed your upgrade.',
     page: 'success',
     pageType: 'upgrade',
     acceptLanguage: headers().get('accept-language'),
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/start/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/start/page.tsx
@@ -8,7 +8,6 @@ import Image from 'next/image';
 import {
   getCardIcon,
   PaymentSection,
-  buildPageMetadata,
 } from '@fxa/payments/ui';
 import {
   fetchCMSData,
@@ -18,6 +17,7 @@ import {
   getApp,
   CheckoutParams,
   SupportedPages,
+  buildPageMetadata,
 } from '@fxa/payments/ui/server';
 import { Metadata } from 'next';
 import { config } from 'apps/payments/next/config';
@@ -35,8 +35,6 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   return buildPageMetadata({
     params,
-    titlePrefix: 'Upgrade',
-    description: 'Enter your payment details to complete your upgrade.',
     page: 'start',
     pageType: 'upgrade',
     acceptLanguage: headers().get('accept-language'),
diff --git a/libs/payments/ui/src/index.ts b/libs/payments/ui/src/index.ts
@@ -27,4 +27,3 @@ export * from './lib/utils/types';
 export * from './lib/utils/get-cart';
 export * from './lib/utils/buildRedirectUrl';
 export * from './lib/utils/getCardIcon';
-export * from './lib/utils/pageMetadata';
diff --git a/libs/payments/ui/src/lib/utils/en.ftl b/libs/payments/ui/src/lib/utils/en.ftl
@@ -0,0 +1,43 @@
+# Checkout start
+metadata-title-checkout-start = Checkout | { $productTitle }
+metadata-description-checkout-start = Enter your payment details to complete your purchase.
+
+# Checkout processing
+metadata-title-checkout-processing = Processing | { $productTitle }
+metadata-description-checkout-processing = Please wait while we finish processing your payment.
+
+# Checkout error
+metadata-title-checkout-error = Error | { $productTitle }
+metadata-description-checkout-error = There was an error processing your subscription. If this problem persists, please contact support.
+
+# Checkout success
+metadata-title-checkout-success = Success | { $productTitle }
+metadata-description-checkout-success = Congratulations! You have successfully completed your purchase.
+
+# Checkout needs_input
+metadata-title-checkout-needs-input = Action required | { $productTitle }
+metadata-description-checkout-needs-input = Please complete the required action to proceed with your payment.
+
+# Upgrade start
+metadata-title-upgrade-start = Upgrade | { $productTitle }
+metadata-description-upgrade-start = Enter your payment details to complete your upgrade.
+
+# Upgrade processing
+metadata-title-upgrade-processing = Processing | { $productTitle }
+metadata-description-upgrade-processing = Please wait while we finish processing your payment.
+
+# Upgrade error
+metadata-title-upgrade-error = Error | { $productTitle }
+metadata-description-upgrade-error = There was an error processing your upgrade. If this problem persists, please contact support.
+
+# Upgrade success
+metadata-title-upgrade-success = Success | { $productTitle }
+metadata-description-upgrade-success = Congratulations! You have successfully completed your upgrade.
+
+# Upgrade needs_input
+metadata-title-upgrade-needs-input = Action required | { $productTitle }
+metadata-description-upgrade-needs-input = Please complete the required action to proceed with your payment.
+
+# Default
+metadata-title-default = Page not found | { $productTitle }
+metadata-description-default = The page you requested was not found.
diff --git a/libs/payments/ui/src/lib/utils/getPageMetadataFtlInfo.ts b/libs/payments/ui/src/lib/utils/getPageMetadataFtlInfo.ts
diff --git a/libs/payments/ui/src/lib/utils/pageMetadata.ts b/libs/payments/ui/src/lib/utils/pageMetadata.ts
diff --git a/libs/payments/ui/src/server.ts b/libs/payments/ui/src/server.ts
