fix(core): revert Next 15 upgrade (bigcommerce#1523)

* Revert "chore(core): downgrade next (bigcommerce#1513)"

This reverts commit ea01e3b.

* Revert "feat(core): Next 15 upgrade (bigcommerce#1508)"

This reverts commit 3ebb617.

* chore(core): bump next-intl

* chore(core): only initialize bodl on browsers

* fix(tests): remove 'Other' section test

* fix(func): Update badge snapshot

---------

Co-authored-by: Anudeep Vattipalli <anudeep.vattipalli@bigcommerce.com>

.github/workflows/regression-tests.yml

@@ -140,7 +140,7 @@ jobs:
       - name: Run Playwright tests
         run: |
           cd core
-          npx playwright test tests/ui/ --project=tests-chromium
+          npx playwright test tests/ui/ --project=tests-chromium 
 
       - uses: actions/upload-artifact@v4
         if: failure()

core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { ChangeEvent, useActionState, useRef, useState } from 'react';
-import { useFormStatus } from 'react-dom';
+import { ChangeEvent, useRef, useState } from 'react';
+import { useFormState, useFormStatus } from 'react-dom';
 
 import { Button } from '~/components/ui/button';
 import {
@@ -48,7 +48,7 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
 
   const form = useRef<HTMLFormElement>(null);
   const router = useRouter();
-  const [state, formAction] = useActionState(changePassword, {
+  const [state, formAction] = useFormState(changePassword, {
     status: 'idle',
     message: '',
   });

core/app/[locale]/(default)/(auth)/change-password/page.tsx

@@ -1,6 +1,5 @@
 import { useLocale, useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
-import { use } from 'react';
 
 import { redirect } from '~/i18n/routing';
 
@@ -15,17 +14,19 @@ export async function generateMetadata() {
 }
 
 interface Props {
-  searchParams: Promise<{
+  searchParams: {
     c?: string;
     t?: string;
-  }>;
+  };
 }
 
 export default function ChangePassword({ searchParams }: Props) {
-  const { c: customerId, t: customerToken } = use(searchParams);
   const t = useTranslations('ChangePassword');
   const locale = useLocale();
 
+  const customerId = searchParams.c;
+  const customerToken = searchParams.t;
+
   if (!customerId || !customerToken) {
     redirect({ href: '/login', locale });
   }

core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { ChangeEvent, useActionState, useState } from 'react';
-import { useFormStatus } from 'react-dom';
+import { ChangeEvent, useState } from 'react';
+import { useFormState, useFormStatus } from 'react-dom';
 
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
@@ -41,7 +41,7 @@ export const LoginForm = () => {
 
   const [isEmailValid, setIsEmailValid] = useState(true);
   const [isPasswordValid, setIsPasswordValid] = useState(true);
-  const [state, formAction] = useActionState(login, { status: 'idle' });
+  const [state, formAction] = useFormState(login, { status: 'idle' });
   const { accountState } = useAccountStatusContext();
 
   const isFormInvalid = state?.status === 'error';

core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx

@@ -159,9 +159,6 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
 
         {reCaptchaSettings?.isEnabledOnStorefront && (
           <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-            {/* https://github.com/dozoisch/react-google-recaptcha/issues/277 */}
-            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-            {/* @ts-expect-error */}
             <ReCaptcha
               onChange={onReCatpchaChange}
               ref={reCaptchaRef}

core/app/[locale]/(default)/(auth)/login/forgot-password/page.tsx

@@ -39,12 +39,10 @@ export default async function Reset() {
     fetchOptions: { next: { revalidate } },
   });
 
-  const recaptchaSettings = await bypassReCaptcha(data.site.settings?.reCaptcha);
-
   return (
     <div className="mx-auto my-6 max-w-4xl">
       <h2 className="mb-8 text-4xl font-black lg:text-5xl">{t('heading')}</h2>
-      <ResetPasswordForm reCaptchaSettings={recaptchaSettings} />
+      <ResetPasswordForm reCaptchaSettings={bypassReCaptcha(data.site.settings?.reCaptcha)} />
     </div>
   );
 }

core/app/[locale]/(default)/(auth)/login/page.tsx

@@ -1,6 +1,5 @@
 import { useTranslations } from 'next-intl';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import { use } from 'react';
 
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
@@ -17,12 +16,10 @@ export async function generateMetadata() {
 }
 
 interface Props {
-  params: Promise<{ locale: LocaleType }>;
+  params: { locale: LocaleType };
 }
 
-export default function Login({ params }: Props) {
-  const { locale } = use(params);
-
+export default function Login({ params: { locale } }: Props) {
   setRequestLocale(locale);
 
   const t = useTranslations('Login');

core/app/[locale]/(default)/(auth)/register/_components/register-customer-form.tsx

@@ -388,9 +388,6 @@ export const RegisterCustomerForm = ({
             })}
           {reCaptchaSettings?.isEnabledOnStorefront && (
             <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              {/* https://github.com/dozoisch/react-google-recaptcha/issues/277 */}
-              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-              {/* @ts-expect-error */}
               <ReCaptcha
                 onChange={onReCaptchaChange}
                 ref={reCaptchaRef}

core/app/[locale]/(default)/(auth)/register/page-data.ts

@@ -89,7 +89,7 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
   const countries = response.data.geography.countries;
   const defaultCountry = response.data.site.settings?.contact?.country;
 
-  const reCaptchaSettings = await bypassReCaptcha(response.data.site.settings?.reCaptcha);
+  const reCaptchaSettings = bypassReCaptcha(response.data.site.settings?.reCaptcha);
 
   if (!addressFields || !customerFields || !countries) {
     return null;

core/app/[locale]/(default)/(auth)/register/page.tsx

@@ -27,15 +27,14 @@ export default async function Register() {
   }
 
   const { addressFields, customerFields, reCaptchaSettings } = registerCustomerData;
-  const reCaptcha = await bypassReCaptcha(reCaptchaSettings);
 
   return (
     <div className="mx-auto mb-10 mt-8 text-base lg:w-2/3">
       <h1 className="my-6 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
       <RegisterCustomerForm
         addressFields={addressFields}
         customerFields={customerFields}
-        reCaptchaSettings={reCaptcha}
+        reCaptchaSettings={bypassReCaptcha(reCaptchaSettings)}
       />
     </div>
   );

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -14,15 +14,14 @@ import { fetchFacetedSearch } from '../../fetch-faceted-search';
 import { getBrand } from './page-data';
 
 interface Props {
-  params: Promise<{
+  params: {
     slug: string;
     locale: LocaleType;
-  }>;
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+  };
+  searchParams: Record<string, string | string[] | undefined>;
 }
 
-export async function generateMetadata(props: Props): Promise<Metadata> {
-  const params = await props.params;
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const brandId = Number(params.slug);
 
   const brand = await getBrand({ entityId: brandId });
@@ -40,12 +39,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
   };
 }
 
-export default async function Brand(props: Props) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
-
-  const { slug, locale } = params;
-
+export default async function Brand({ params: { slug, locale }, searchParams }: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Brand');

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -18,16 +18,15 @@ import { SubCategories } from './_components/sub-categories';
 import { getCategoryPageData } from './page-data';
 
 interface Props {
-  params: Promise<{
+  params: {
     slug: string;
     locale: LocaleType;
-  }>;
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+  };
+  searchParams: Record<string, string | string[] | undefined>;
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug } = await params;
-  const categoryId = Number(slug);
+  const categoryId = Number(params.slug);
 
   const data = await getCategoryPageData({
     categoryId,
@@ -48,12 +47,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
-export default async function Category(props: Props) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
-
-  const { locale, slug } = params;
-
+export default async function Category({ params: { locale, slug }, searchParams }: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Category');

core/app/[locale]/(default)/(faceted)/search/page.tsx

@@ -18,11 +18,10 @@ export async function generateMetadata() {
 }
 
 interface Props {
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+  searchParams: Record<string, string | string[] | undefined>;
 }
 
-export default async function Search(props: Props) {
-  const searchParams = await props.searchParams;
+export default async function Search({ searchParams }: Props) {
   const t = await getTranslations('Search');
 
   const searchTerm = typeof searchParams.term === 'string' ? searchParams.term : undefined;

core/app/[locale]/(default)/account/(tabs)/addresses/add/_components/add-address-form.tsx

@@ -363,9 +363,6 @@ export const AddAddressForm = ({
 
           {reCaptchaSettings?.isEnabledOnStorefront && (
             <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              {/* https://github.com/dozoisch/react-google-recaptcha/issues/277 */}
-              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-              {/* @ts-expect-error */}
               <ReCaptcha
                 onChange={onReCaptchaChange}
                 ref={reCaptchaRef}

core/app/[locale]/(default)/account/(tabs)/addresses/add/page.tsx

@@ -82,6 +82,7 @@ export default async function AddPage() {
   });
 
   const addressFields = [...(data.site.settings?.formFields.shippingAddress ?? [])];
+  const reCaptchaSettings = data.site.settings?.reCaptcha;
   const countries = data.geography.countries;
   const defaultCountry = data.site.settings?.contact?.country || FALLBACK_COUNTRY.name;
 
@@ -91,16 +92,14 @@ export default async function AddPage() {
     statesOrProvinces: defaultCountryStates = FALLBACK_COUNTRY.states,
   } = countries?.find(({ name: country }) => country === defaultCountry) || {};
 
-  const recaptchaSettings = await bypassReCaptcha(data.site.settings?.reCaptcha);
-
   return (
     <div className="mx-auto mb-14 lg:w-2/3">
       <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('heading')}</h1>
       <AddAddressForm
         addressFields={addressFields}
         countries={countries || []}
         defaultCountry={{ id: entityId, code, states: defaultCountryStates }}
-        reCaptchaSettings={recaptchaSettings}
+        reCaptchaSettings={bypassReCaptcha(reCaptchaSettings)}
       />
     </div>
   );

core/app/[locale]/(default)/account/(tabs)/addresses/edit/[slug]/_components/edit-address-form.tsx

@@ -429,9 +429,6 @@ export const EditAddressForm = ({
 
           {reCaptchaSettings?.isEnabledOnStorefront && (
             <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
-              {/* https://github.com/dozoisch/react-google-recaptcha/issues/277 */}
-              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-              {/* @ts-expect-error */}
               <ReCaptcha
                 onChange={onReCaptchaChange}
                 ref={reCaptchaRef}

core/app/[locale]/(default)/account/(tabs)/addresses/edit/[slug]/page.tsx

@@ -98,12 +98,11 @@ export async function generateMetadata() {
 }
 
 interface Props {
-  params: Promise<{ slug: string }>;
+  params: { slug: string };
+  searchParams: Record<string, string | string[] | undefined>;
 }
 
-export default async function Edit({ params }: Props) {
-  const { slug } = await params;
-
+export default async function Edit({ params: { slug } }: Props) {
   const t = await getTranslations('Account.Addresses.Edit');
 
   const customerId = await getSessionCustomerId();
@@ -118,6 +117,7 @@ export default async function Edit({ params }: Props) {
     },
   });
 
+  const reCaptchaSettings = data.site.settings?.reCaptcha;
   const countries = data.geography.countries;
   const addressFields = [...(data.site.settings?.formFields.shippingAddress ?? [])];
   const addresses = removeEdgesAndNodes({ edges: data.customer?.addresses.edges });
@@ -132,8 +132,6 @@ export default async function Edit({ params }: Props) {
     return notFound();
   }
 
-  const reCaptchaSettings = await bypassReCaptcha(data.site.settings?.reCaptcha);
-
   return (
     <div className="mx-auto mb-14 lg:w-2/3">
       <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('heading')}</h1>
@@ -142,7 +140,7 @@ export default async function Edit({ params }: Props) {
         addressFields={addressFields}
         countries={countries || []}
         isAddressRemovable={addresses.length > 1}
-        reCaptchaSettings={reCaptchaSettings}
+        reCaptchaSettings={bypassReCaptcha(reCaptchaSettings)}
       />
     </div>
   );

core/app/[locale]/(default)/account/(tabs)/addresses/page.tsx

@@ -9,11 +9,11 @@ import { AddressBook } from './_components/address-book';
 import { getCustomerAddresses } from './page-data';
 
 interface Props {
-  searchParams: Promise<{
+  searchParams: {
     [key: string]: string | string[] | undefined;
     before?: string;
     after?: string;
-  }>;
+  };
 }
 
 export async function generateMetadata() {
@@ -25,7 +25,7 @@ export async function generateMetadata() {
 }
 
 export default async function Addresses({ searchParams }: Props) {
-  const { before, after } = await searchParams;
+  const { before, after } = searchParams;
 
   const data = await getCustomerAddresses({
     ...(after && { after }),

core/app/[locale]/(default)/account/(tabs)/layout.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
-import { PropsWithChildren, use } from 'react';
+import { PropsWithChildren } from 'react';
 
 import { Link } from '~/components/link';
 import { LocaleType } from '~/i18n/routing';
@@ -11,12 +11,10 @@ const tabList = ['addresses', 'settings'] as const;
 export type TabType = (typeof tabList)[number];
 
 interface Props extends PropsWithChildren {
-  params: Promise<{ locale: LocaleType; tab?: TabType }>;
+  params: { locale: LocaleType; tab?: TabType };
 }
 
-export default function AccountTabLayout({ children, params }: Props) {
-  const { locale } = use(params);
-
+export default function AccountTabLayout({ children, params: { locale } }: Props) {
   setRequestLocale(locale);
 
   const t = useTranslations('Account.Home');