Merge pull request #18861 from mozilla/FXA-11389

fix(payments-next): Update layout/page metadata

Author: elizabeth-ilina

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/error/page.tsx

@@ -21,16 +21,32 @@ 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
 export const dynamic = 'force-dynamic';
 
-export const metadata: Metadata = {
-  title: 'Error',
-  description:
-    'There was an error processing your subscription. If this problem persists, please contact support.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): 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'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function CheckoutError({
   params,

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/needs_input/page.tsx

@@ -7,17 +7,34 @@ import {
   LoadingSpinner,
   StripeWrapper,
   PaymentInputHandler,
+  buildPageMetadata,
 } from '@fxa/payments/ui';
 import { getApp, SupportedPages } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import type { Metadata } from 'next';
+import { config } from 'apps/payments/next/config';
 
-export const metadata: Metadata = {
-  title: 'Action required',
-  description:
-    'Please complete the required action to proceed with your payment.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): 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'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function NeedsInputPage({
   params,

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/processing/page.tsx

@@ -6,16 +6,34 @@ import {
   PaymentStateObserver,
   CheckoutParams,
   LoadingSpinner,
+  buildPageMetadata,
 } from '@fxa/payments/ui';
 import { getApp, SupportedPages } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import type { Metadata } from 'next';
+import { config } from 'apps/payments/next/config';
 
-export const metadata: Metadata = {
-  title: 'Processing',
-  description: 'Please wait while we finish processing your payment.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): 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'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function ProcessingPage({
   params,

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx

@@ -11,6 +11,7 @@ import {
   ButtonVariant,
   PaymentSection,
   SignInForm,
+  buildPageMetadata,
 } from '@fxa/payments/ui';
 import {
   getApp,
@@ -30,10 +31,26 @@ import type { Metadata } from 'next';
 
 export const dynamic = 'force-dynamic';
 
-export const metadata: Metadata = {
-  title: 'Checkout',
-  description: 'Enter your payment details to complete your purchase.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    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'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function Checkout({
   params,

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 } from '@fxa/payments/ui';
+import { getCardIcon, buildPageMetadata } from '@fxa/payments/ui';
 import {
   fetchCMSData,
   getCartOrRedirectAction,
@@ -17,14 +17,30 @@ import {
   CheckoutParams,
   SupportedPages,
 } from '@fxa/payments/ui/server';
+import { config } from 'apps/payments/next/config';
 
 export const dynamic = 'force-dynamic';
 
-export const metadata: Metadata = {
-  title: 'Success',
-  description:
-    'Congratulations! You have successfully completed your purchase.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): Promise<Metadata> {
+  return buildPageMetadata({
+    params,
+    titlePrefix: 'Success',
+    description: 'Congratulations! You have successfully completed your purchase.',
+    page: 'success',
+    pageType: 'checkout',
+    acceptLanguage: headers().get('accept-language'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function CheckoutSuccess({
   params,

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/error/page.tsx

@@ -19,16 +19,32 @@ import {
 } 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
 export const dynamic = 'force-dynamic';
 
-export const metadata: Metadata = {
-  title: 'Error',
-  description:
-    'There was an error processing your upgrade. If this problem persists, please contact support.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): 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'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function UpgradeError({
   params,

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/needs_input/page.tsx

@@ -7,17 +7,34 @@ import {
   LoadingSpinner,
   StripeWrapper,
   PaymentInputHandler,
+  buildPageMetadata,
 } from '@fxa/payments/ui';
 import { getApp, SupportedPages } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import { Metadata } from 'next';
+import { config } from 'apps/payments/next/config';
 
-export const metadata: Metadata = {
-  title: 'Action required',
-  description:
-    'Please complete the required action to proceed with your payment.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): 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'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function NeedsInputPage({
   params,

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/processing/page.tsx

@@ -6,16 +6,34 @@ import {
   PaymentStateObserver,
   CheckoutParams,
   LoadingSpinner,
+  buildPageMetadata,
 } from '@fxa/payments/ui';
 import { getApp, SupportedPages } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { getCartOrRedirectAction } from '@fxa/payments/ui/actions';
 import { Metadata } from 'next';
+import { config } from 'apps/payments/next/config';
 
-export const metadata: Metadata = {
-  title: 'Processing',
-  description: 'Please wait while we finish processing your payment.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): 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'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function ProcessingPage({
   params,

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/success/page.tsx

@@ -4,7 +4,7 @@
 
 import { headers } from 'next/headers';
 import { auth } from 'apps/payments/next/auth';
-import { getCardIcon } from '@fxa/payments/ui';
+import { getCardIcon, buildPageMetadata } from '@fxa/payments/ui';
 import { SupportedPages, getApp } from '@fxa/payments/ui/server';
 import {
   fetchCMSData,
@@ -14,13 +14,30 @@ import {
 import { CheckoutParams } from '@fxa/payments/ui/server';
 import Image from 'next/image';
 import { Metadata } from 'next';
+import { config } from 'apps/payments/next/config';
 
 export const dynamic = 'force-dynamic';
 
-export const metadata: Metadata = {
-  title: 'Success',
-  description: 'Congratulations! You have successfully completed your upgrade.',
-};
+export async function generateMetadata(
+  {
+    params,
+    searchParams,
+  }: {
+    params: CheckoutParams;
+    searchParams: Record<string, string> | undefined;
+  },
+): Promise<Metadata> {
+  return buildPageMetadata({
+    params,
+    titlePrefix: 'Success',
+    description: 'Congratulations! You have successfully completed your upgrade.',
+    page: 'success',
+    pageType: 'upgrade',
+    acceptLanguage: headers().get('accept-language'),
+    baseUrl: config.paymentsNextHostedUrl,
+    searchParams
+  });
+}
 
 export default async function UpgradeSuccess({
   params,