fix: fetch locale using async function

bigcommerce · Apr 23, 2024 · 7c50e09 · 7c50e09
1 parent 9020c09
commit 7c50e09
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 18 deletions.
diff --git a/apps/core/app/[locale]/(default)/cart/_components/cart-item.tsx b/apps/core/app/[locale]/(default)/cart/_components/cart-item.tsx
@@ -1,5 +1,5 @@
 import { NextIntlClientProvider } from 'next-intl';
-import { getFormatter, getMessages } from 'next-intl/server';
+import { getFormatter, getLocale, getMessages } from 'next-intl/server';
 
 import { getCart } from '~/client/queries/get-cart';
 import { ExistingResultType } from '~/client/util';
@@ -15,12 +15,11 @@ export type Product =
 export const CartItem = async ({
   currencyCode,
   product,
-  locale,
 }: {
   currencyCode: string;
   product: Product;
-  locale: string;
 }) => {
+  const locale = await getLocale();
   const messages = await getMessages({ locale });
   const format = await getFormatter({ locale });
 

diff --git a/apps/core/app/[locale]/(default)/cart/_components/checkout-summary.tsx b/apps/core/app/[locale]/(default)/cart/_components/checkout-summary.tsx
@@ -1,6 +1,6 @@
 import { AlertCircle } from 'lucide-react';
 import { NextIntlClientProvider } from 'next-intl';
-import { getFormatter, getMessages, getTranslations } from 'next-intl/server';
+import { getFormatter, getLocale, getMessages, getTranslations } from 'next-intl/server';
 import { toast } from 'react-hot-toast';
 
 import { getCheckout } from '~/client/queries/get-checkout';
@@ -10,7 +10,8 @@ import { getShippingCountries } from '../_actions/get-shipping-countries';
 import { CouponCode } from './coupon-code';
 import { ShippingEstimator } from './shipping-estimator';
 
-export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; locale: string }) => {
+export const CheckoutSummary = async ({ cartId }: { cartId: string }) => {
+  const locale = await getLocale();
   const t = await getTranslations({ locale, namespace: 'Cart.CheckoutSummary' });
   const format = await getFormatter({ locale });
   const messages = await getMessages({ locale });

diff --git a/apps/core/app/[locale]/(default)/cart/page.tsx b/apps/core/app/[locale]/(default)/cart/page.tsx
@@ -65,26 +65,16 @@ export default async function CartPage({ params: { locale } }: Props) {
       <div className="pb-12 md:grid md:grid-cols-2 md:gap-8 lg:grid-cols-3">
         <ul className="col-span-2">
           {cart.lineItems.physicalItems.map((product) => (
-            <CartItem
-              currencyCode={cart.currencyCode}
-              key={product.entityId}
-              locale={locale}
-              product={product}
-            />
+            <CartItem currencyCode={cart.currencyCode} key={product.entityId} product={product} />
           ))}
 
           {cart.lineItems.digitalItems.map((product) => (
-            <CartItem
-              currencyCode={cart.currencyCode}
-              key={product.entityId}
-              locale={locale}
-              product={product}
-            />
+            <CartItem currencyCode={cart.currencyCode} key={product.entityId} product={product} />
           ))}
         </ul>
 
         <div className="col-span-1 col-start-2 lg:col-start-3">
-          <CheckoutSummary cartId={cartId} locale={locale} />
+          <CheckoutSummary cartId={cartId} />
 
           <Suspense fallback={t('loading')}>
             <CheckoutButton cartId={cartId} label={t('proceedToCheckout')} />