fix(payments-next): Move searchParams to params

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

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import { headers } from 'next/headers';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -5,10 +9,12 @@ import Link from 'next/link';
 import { PurchaseDetails, TermsAndPrivacy } from '@fxa/payments/ui/server';
 import { getBundle, getLocaleFromRequest } from '@fxa/shared/l10n';
 
-import { getCartData, getContentfulContent } from '../../../../_lib/apiClient';
-import checkLogo from '../../../../../images/check.svg';
-import errorIcon from '../../../../../images/error.svg';
-import { CheckoutSearchParams } from '../../layout';
+import {
+  getCartData,
+  getContentfulContent,
+} from '../../../../../../_lib/apiClient';
+import checkLogo from '../../../../../../../images/check.svg';
+import errorIcon from '../../../../../../../images/error.svg';
 // import { app } from '../../_nestapp/app';
 
 // forces dynamic rendering
@@ -19,20 +25,20 @@ export const dynamic = 'force-dynamic';
 const demoSupportedLanguages = ['en-US', 'fr-FR', 'es-ES', 'de-DE'];
 
 interface CheckoutParams {
-  offeringId: string;
   cartId: string;
+  locale: string;
+  interval: string;
+  offeringId: string;
 }
 
 export default async function CheckoutError({
   params,
-  searchParams,
 }: {
   params: CheckoutParams;
-  searchParams: CheckoutSearchParams;
 }) {
   const headersList = headers();
   const locale = getLocaleFromRequest(
-    searchParams,
+    params,
     headersList.get('accept-language'),
     demoSupportedLanguages
   );

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

@@ -1,28 +1,30 @@
+/* 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/. */
+
 import { PurchaseDetails, TermsAndPrivacy } from '@fxa/payments/ui/server';
-import { getCartData, getContentfulContent } from '../../../_lib/apiClient';
+import {
+  getCartData,
+  getContentfulContent,
+} from '../../../../../_lib/apiClient';
 import { app } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { getLocaleFromRequest } from '@fxa/shared/l10n';
-import { CheckoutSearchParams } from '../layout';
 import { auth, signIn, signOut } from 'apps/payments/next/auth';
 
 export const dynamic = 'force-dynamic';
 
 interface CheckoutParams {
-  offeringId: string;
   cartId: string;
+  locale: string;
+  interval: string;
+  offeringId: string;
 }
 
-export default async function Checkout({
-  params,
-  searchParams,
-}: {
-  params: CheckoutParams;
-  searchParams: CheckoutSearchParams;
-}) {
+export default async function Checkout({ params }: { params: CheckoutParams }) {
   const headersList = headers();
   const locale = getLocaleFromRequest(
-    searchParams,
+    params,
     headersList.get('accept-language')
   );
 

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

@@ -1,10 +1,17 @@
+/* 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/. */
+
 import { PurchaseDetails, TermsAndPrivacy } from '@fxa/payments/ui/server';
-import { getCartData, getContentfulContent } from '../../../../_lib/apiClient';
+import {
+  getCartData,
+  getContentfulContent,
+} from '../../../../../../_lib/apiClient';
 import { headers } from 'next/headers';
 import Image from 'next/image';
-import checkLogo from '../../../../../images/check.svg';
-import circledConfirm from '../../../../../images/circled-confirm.svg';
-import { formatPlanPricing } from '../../../../../../../../libs/payments/ui/src/lib/utils/helpers';
+import checkLogo from '../../../../../../../images/check.svg';
+import circledConfirm from '../../../../../../../images/circled-confirm.svg';
+import { formatPlanPricing } from '@fxa/payments/ui';
 import {
   getBundle,
   getFormattedMsg,
@@ -13,7 +20,6 @@ import {
   getLocalizedDate,
   getLocalizedDateString,
 } from '@fxa/shared/l10n';
-import { CheckoutSearchParams } from '../../layout';
 // import { app } from '../../_nestapp/app';
 
 export const dynamic = 'force-dynamic';
@@ -44,20 +50,20 @@ const ConfirmationDetail = ({
 };
 
 interface CheckoutParams {
-  offeringId: string;
   cartId: string;
+  locale: string;
+  interval: string;
+  offeringId: string;
 }
 
 export default async function CheckoutSuccess({
   params,
-  searchParams,
 }: {
   params: CheckoutParams;
-  searchParams: CheckoutSearchParams;
 }) {
   const headersList = headers();
   const locale = getLocaleFromRequest(
-    searchParams,
+    params,
     headersList.get('accept-language'),
     demoSupportedLanguages
   );

apps/payments/next/app/[locale]/[offeringId]/checkout/layout.tsx

@@ -1,3 +1,7 @@
+/* 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/. */
+
 // TODO - Replace these placeholders as part of FXA-8227
 export const metadata = {
   title: 'Mozilla accounts',
@@ -5,10 +9,8 @@ export const metadata = {
 };
 
 export interface CheckoutSearchParams {
-  interval?: string;
-  promotion_code?: string;
   experiment?: string;
-  locale?: string;
+  promotion_code?: string;
 }
 
 export default function RootLayout({

apps/payments/next/app/[locale]/[offeringId]/checkout/new/page.tsx

@@ -0,0 +1,7 @@
+/* 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/. */
+
+export default async function CheckoutNew() {
+  return <></>;
+}

apps/payments/next/app/[offeringId]/checkout/new/page.tsx

@@ -1,3 +0,0 @@
-export default async function CheckoutNew() {
-  return <></>;
-}

apps/payments/next/app/_lib/apiClient.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import { fetchCartData, fetchFromContentful } from './stubs';
 
 export async function getCartData(cartId: string) {

apps/payments/next/app/_lib/stubs.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 /**
  *
  * Temporary File

apps/payments/next/app/api/auth/[...nextauth]/route.ts

@@ -1 +1,5 @@
+/* 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/. */
+
 export { GET, POST } from '../../../../auth';

apps/payments/next/app/layout.tsx

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import Image from 'next/image';
 // TODO - Move shared SVGs to a shared library in fxa/libs/shared/*
 import mozillaLogo from '../images/moz-logo-bw-rgb.svg';

apps/payments/next/app/page.tsx

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import Link from 'next/link';
 
 export default function Index() {
@@ -14,7 +18,7 @@ export default function Index() {
           <h2>123Done - Monthly</h2>
           <Link
             className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-            href="/123done/checkout/b6115e72-2a3f-4de8-a58a-e231bfeea85d?interval=monthly"
+            href="/en/123done/checkout/monthly/b6115e72-2a3f-4de8-a58a-e231bfeea85d"
           >
             Redirect
           </Link>
@@ -23,7 +27,7 @@ export default function Index() {
           <h2>123Done - Yearly</h2>
           <Link
             className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-            href="/123done/checkout/b6115e72-2a3f-4de8-a58a-e231bfeea85d?interval=yearly"
+            href="/en/123done/checkout/yearly/b6115e72-2a3f-4de8-a58a-e231bfeea85d"
           >
             Redirect
           </Link>

apps/payments/next/auth.config.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import type { NextAuthConfig } from 'next-auth';
 
 export const authConfig = {

apps/payments/next/auth.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import NextAuth from 'next-auth';
 import { authConfig } from './auth.config';
 

apps/payments/next/index.d.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare module '*.svg' {
   const content: any;

apps/payments/next/jest.config.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 /* eslint-disable */
 export default {
   displayName: 'payments-next',

apps/payments/next/next.config.js

@@ -1,3 +1,7 @@
+/* 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/. */
+
 //@ts-check
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires

apps/payments/next/postcss.config.js

@@ -1,3 +1,7 @@
+/* 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/. */
+
 const { join } = require('path');
 
 module.exports = {

apps/payments/next/tailwind.config.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
 import { join } from 'path';
 import type { Config } from 'tailwindcss';

apps/payments/next/tests/app/page.test.tsx

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import Index from '../../app/page';

libs/payments/ui/src/index.ts

@@ -1 +1,7 @@
+/* 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 this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
+
+export * from './lib/utils/helpers';

libs/payments/ui/src/lib/server/purchase-details.tsx

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import { Invoice } from '@fxa/payments/cart';
 import {
   getFormattedMsg,

libs/payments/ui/src/lib/server/terms-and-privacy.tsx

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import { FluentBundle } from '@fluent/bundle';
 import { getBundle } from '@fxa/shared/l10n';
 import {

libs/payments/ui/src/lib/utils/helpers.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 import { getLocalizedCurrencyString } from '@fxa/shared/l10n';
 import { Stripe } from 'stripe';
 

libs/payments/ui/src/lib/utils/terms-and-privacy.ts

@@ -1,3 +1,7 @@
+/* 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/. */
+
 /* eslint-disable-next-line */
 export type GenericTermsListItem = {
   key: string;

libs/payments/ui/src/server.ts

@@ -1,3 +1,7 @@
+/* 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 this file to export React server components
 export * from './lib/server/purchase-details';
 export * from './lib/server/terms-and-privacy';

libs/payments/ui/src/styles/index.css

@@ -1,3 +1,7 @@
+/* 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/. */
+
 @import '../../../../shared/assets/src/styles/containers.css';
 
 /* Purchase Details */

libs/shared/l10n/src/lib/determine-locale.ts

@@ -11,12 +11,12 @@ import { parseAcceptLanguage } from './parse-accept-language';
  * @returns The best fitting locale
  */
 export function getLocaleFromRequest(
-  searchParams: { locale?: string },
+  params: { locale?: string },
   acceptLanguage: string | null,
   supportedLanguages?: string[]
 ) {
-  if (searchParams.locale) {
-    return determineLocale(searchParams?.locale, supportedLanguages);
+  if (params.locale) {
+    return determineLocale(params?.locale, supportedLanguages);
   }
 
   if (acceptLanguage) {