core build fixes + mobile nav fix (#478)

Author: mzaintariq

examples/core/public/fonts/Inter-VariableFont_opsz,wght.ttf

@@ -1,4 +1,4 @@
-import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import { ReactNode } from "react";
 import { getStoreInitialState } from "../../lib/get-store-initial-state";
 import { Providers } from "../providers";
@@ -22,8 +22,8 @@ export const metadata = {
   },
 };
 
-const inter = Inter({
-  subsets: ["latin"],
+const inter = localFont({
+  src: "../../../public/fonts/Inter-VariableFont_opsz,wght.ttf",
   display: "swap",
   variable: "--font-inter",
 });

examples/core/src/app/(auth)/layout.tsx

@@ -1,4 +1,4 @@
-import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import { ReactNode } from "react";
 import { getStoreInitialState } from "../../lib/get-store-initial-state";
 import { Providers } from "../providers";
@@ -22,8 +22,8 @@ export const metadata = {
   },
 };
 
-const inter = Inter({
-  subsets: ["latin"],
+const inter = localFont({
+  src: "../../../public/fonts/Inter-VariableFont_opsz,wght.ttf",
   display: "swap",
   variable: "--font-inter",
 });

examples/core/src/app/(checkout)/layout.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, Suspense } from "react";
-import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import { getStoreInitialState } from "../../lib/get-store-initial-state";
 import { Providers } from "../providers";
 import Header from "../../components/header/Header";
@@ -30,8 +30,8 @@ export const metadata = {
  */
 export const revalidate = 300;
 
-const inter = Inter({
-  subsets: ["latin"],
+const inter = localFont({
+  src: "../../../public/fonts/Inter-VariableFont_opsz,wght.ttf",
   display: "swap",
   variable: "--font-inter",
 });

examples/core/src/app/(store)/layout.tsx

@@ -12,6 +12,8 @@ import {
 } from "../../../lib/cookie-constants";
 import {
   getACart,
+  getAllCurrencies,
+  getByContextAllProducts,
   getV2AccountMembersAccountMemberId,
 } from "@epcc-sdk/sdks-shopper";
 import { Suspense } from "react";
@@ -42,6 +44,34 @@ export default async function MobileNavBar() {
     },
   });
 
+  // Fetch product details for each cart item to get original sale price
+  const cartItems = cart?.data?.included?.items;
+  const productIds = cartItems?.map(item => item.product_id).filter(Boolean);
+  const productDetailsResponse = await getByContextAllProducts({
+    client,
+    query: {
+      filter: `in(id,${productIds?.join(",")})`,
+    }
+  });
+  const productDetails = productDetailsResponse.data?.data || [];
+
+  // Merge product details into cart items
+  const cartItemsWithDetails = cart?.data?.included?.items?.map(item => {
+    const productDetail = productDetails.find(pd => pd.id === item.product_id);
+    return {
+      ...item,
+      productDetail,
+    };
+  });
+
+  // Fetch currencies
+  const currencies = await getAllCurrencies({
+    client,
+    next: {
+      tags: [TAGS.currencies],
+    },
+  });
+
   if (!cart.data) {
     console.error("No cart found");
     return null;
@@ -78,7 +108,10 @@ export default async function MobileNavBar() {
           <div className="justify-self-end">
             <div className="flex gap-4">
               <Suspense fallback={<Skeleton className="h-10 w-10" />}>
-                {cart.data && <CartSheet cart={cart.data} />}
+                {cart.data && <CartSheet
+                  cart={{ ...cart.data, included: { items: cartItemsWithDetails } }}
+                  currencies={currencies?.data?.data ?? []}
+                />}
               </Suspense>
             </div>
           </div>

examples/core/src/components/header/navigation/MobileNavBar.tsx

@@ -37,7 +37,7 @@ export function groupCartItems(items: Items) {
         : acc.promotion;
 
       const itemDiscounts = (item as any)?.discounts || [];
-      let itemLevelPromotion = [...acc.itemLevelPromotion];
+      const itemLevelPromotion = [...acc.itemLevelPromotion];
       if (!assertCartItemType(item, "promotion_item") && itemDiscounts.length) {
         itemDiscounts.forEach((discount: any) => {
           const exists = itemLevelPromotion.some(