fix conflicts after december updates

README.md

@@ -1,6 +1,6 @@
 # Next.js + BigCommerce
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js%20%2B%20BigCommerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20BigCommerce%20storefronts.&demo-url=https%3A%2F%2Fnext-commerce-v2.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1RzhtOHEvW7xyn9qAsdr5E%2F783c7bbd498d0f3b752637d2efa0bb6e%2FNew_Project__5_.png&project-name=Next.js%20%2B%20BigCommerce&repository-name=nextjs-commerce&repository-url=https://github.com/bigcommerce/nextjs-commerce&from=templates&env=COMPANY_NAME%2CTWITTER_CREATOR%2CTWITTER_SITE%2CSITE_NAME%2CBIGCOMMERCE_ACCESS_TOKEN%2CBIGCOMMERCE_CHANNEL_ID%2CBIGCOMMERCE_STORE_HASH%2CBIGCOMMERCE_CANONICAL_STORE_DOMAIN%2CBIGCOMMERCE_API_URL%2CBIGCOMMERCE_CDN_HOSTNAME%2CBIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN&envDescription=These%20values%20let%20you%20connect%20to%20your%20headless%20BigCommmerce%20storefront.&envLink=https%3A%2F%2Fgithub.com%2Fbigcommerce%2Fnextjs-commerce%2Fblob%2Fmain%2F.env.example)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js%20%2B%20BigCommerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20BigCommerce%20storefronts.&demo-url=https%3A%2F%2Fnext-commerce-v2.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1RzhtOHEvW7xyn9qAsdr5E%2F783c7bbd498d0f3b752637d2efa0bb6e%2FNew_Project__5_.png&from=templates&repository-url=https%3A%2F%2Fgithub.com%2Fbigcommerce%2Fnextjs-commerce&project-name=nextjs-commerce&repository-name=nextjs-commerce&integration-ids=oac_nsrwzogJLEFglVwt2060kB0y)
 
 A Next.js 14 and App Router-ready headless storefront template for BigCommerce, featuring:
 
@@ -14,39 +14,42 @@ A Next.js 14 and App Router-ready headless storefront template for BigCommerce,
 - Styling with [Tailwind CSS](https://tailwindcss.com/)
 - Automatic light/dark mode based on system settings
 
+## 🔎 Looking for more? 
+
+Learn more about our suite of Next.js 13+ tools for enterprise commerce: https://developer.bigcommerce.com/catalyst
+
 ## Prerequisites
 
 Next.js + BigCommerce requires a [BigCommerce sandbox](https://developer.bigcommerce.com/api-docs/partner/create-a-sandbox) or a [production store provisioned to run a headless storefront](https://www.bigcommerce.com/solutions/multi-store/).
 
-To get started, use this README and the [example environment variable comments](.env.example).
+To get started, use this README and the [example environment variable comments](https://github.com/bigcommerce/nextjs-commerce/blob/main/.env.example).
 
 ## Develop locally
 
 To automatically clone the template repo and configure Vercel environment variables for your project, use the [Deploy with Vercel](#) button at the beginning of this README. After you complete the interactive configuration sequence, you can clone the automatically-created project to your local environment.
 
-You can also clone the template repo manually and supply the environment variables [defined in .env.example](.env.example). The best practice is to use [Vercel environment variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+You can also clone the template repo manually and supply the environment variables [defined in .env.example](https://github.com/bigcommerce/nextjs-commerce/blob/main/.env.example). The best practice is to use [Vercel environment variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
 
 > Note: Do not commit your `.env` file. It exposes secrets that allow others to control your BigCommerce store.
 
-1. Install the Vercel CLI:
+- Install the Vercel CLI:
 
 ```bash
 npm i -g vercel
 ```
-
-2. Link your local instance with the desired Vercel and GitHub accounts. This action creates a `.vercel` directory:
+- Link your local instance with the desired Vercel and GitHub accounts. This action creates a `.vercel` directory:
 
 ```bash
 vercel link
 ```
 
-3. Download the [Vercel environment variables](https://vercel.com/docs/concepts/projects/environment-variables):
+- Download the [Vercel environment variables](https://vercel.com/docs/concepts/projects/environment-variables):
 
 ```bash
 vercel env pull
 ```
 
-4. Install the app's default dependencies and start the development server:
+- Install the app's default dependencies and start the development server:
 
 ```bash
 pnpm install

app/layout.tsx

@@ -1,6 +1,6 @@
 import Navbar from 'components/layout/navbar';
-import { GeistSans } from 'geist/font';
 import { ensureStartsWith } from 'lib/utils';
+import { Inter } from 'next/font/google';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
 
@@ -31,9 +31,15 @@ export const metadata = {
     })
 };
 
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter'
+});
+
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={GeistSans.variable}>
+    <html lang="en" className={inter.variable}>
       <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
         <Navbar />
         <Suspense>

components/cart/actions.ts

@@ -1,40 +1,32 @@
 'use server';
 
-import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/bigcommerce';
+import { addToCart, removeFromCart, updateCart } from 'lib/bigcommerce';
 import { TAGS } from 'lib/constants';
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 
-<<<<<<< HEAD
-export async function addItem(prevState: any, selectedVariantId: string | undefined) {
-  let cartId = cookies().get('cartId')?.value;
-  let cart;
-=======
-export const addItem = async (
-  isBigCommerceAPI: boolean,
-  productId: string,
-  variantId: string | undefined
-): Promise<Error | string> => {
-  const cartId = cookies().get('cartId')?.value;
->>>>>>> 4ee61e1 (clear cart id cookie on removing last item)
-
-  if (cartId) {
-    cart = await getCart(cartId);
-  }
-
-  if (!cartId || !cart) {
-    cart = await createCart();
-    cartId = cart.id;
-    cookies().set('cartId', cartId);
+export async function addItem(
+  prevState: any,
+  {
+    selectedProductId,
+    selectedVariantId
+  }: {
+    selectedProductId: string | undefined;
+    selectedVariantId: string | undefined;
   }
+) {
+  const cartId = cookies().get('cartId')?.value;
 
   if (!selectedVariantId) {
     return 'Missing product variant ID';
   }
 
   try {
-    await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity: 1 }]);
+    const { id } = await addToCart(cartId ?? '', [
+      { merchandiseId: selectedVariantId, quantity: 1, productId: selectedProductId }
+    ]);
     revalidateTag(TAGS.cart);
+    cookies().set('cartId', id);
   } catch (e) {
     return 'Error adding item to cart';
   }
@@ -48,16 +40,12 @@ export async function removeItem(prevState: any, lineId: string) {
   }
 
   try {
-<<<<<<< HEAD
-    await removeFromCart(cartId, [lineId]);
-    revalidateTag(TAGS.cart);
-=======
     const response = await removeFromCart(cartId, [lineId]);
+    revalidateTag(TAGS.cart);
 
     if (!response && cartId) {
       cookies().delete('cartId');
     }
->>>>>>> 4ee61e1 (clear cart id cookie on removing last item)
   } catch (e) {
     return 'Error removing item from cart';
   }

components/cart/add-to-cart.tsx

@@ -73,13 +73,15 @@ export function AddToCart({
   const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
+  const defaultProductId = variants.length === 1 ? variants[0]?.parentId : undefined;
   const variant = variants.find((variant: ProductVariant) =>
     variant.selectedOptions.every(
       (option) => option.value === searchParams.get(option.name.toLowerCase())
     )
   );
   const selectedVariantId = variant?.id || defaultVariantId;
-  const actionWithVariant = formAction.bind(null, selectedVariantId);
+  const selectedProductId = variant?.parentId || defaultProductId;
+  const actionWithVariant = formAction.bind(null, { selectedProductId, selectedVariantId });
 
   return (
     <form action={actionWithVariant}>

components/cart/edit-item-quantity-button.tsx

@@ -41,6 +41,7 @@ export function EditItemQuantityButton({ item, type }: { item: CartItem; type: '
   const [message, formAction] = useFormState(updateItemQuantity, null);
   const payload = {
     lineId: item.id,
+    productSlug: item.merchandise.product.handle,
     variantId: item.merchandise.id,
     quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
   };

components/layout/footer.tsx

@@ -51,9 +51,8 @@ export default async function Footer() {
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
           </p>
           <p className="md:ml-auto">
-            Crafted by{' '}
             <a href="https://bigcommerce.com" className="text-black dark:text-white">
-              BigCommerce
+              Crafted by BigCommerce
             </a>
           </p>
         </div>

components/opengraph-image.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server';
+import { ImageResponse } from 'next/og';
 import LogoIcon from './icons/logo';
 
 export type Props = {

lib/bigcommerce/index.ts

@@ -108,11 +108,7 @@ export async function bigCommerceFetch<T>({
         ...(query && { query }),
         ...(variables && { variables })
       }),
-<<<<<<< HEAD
       cache
-=======
-      cache,
->>>>>>> 0563fc4 (add customer impersonation token to env)
     });
 
     const body = await result.json();
@@ -531,7 +527,7 @@ export async function getMenu(handle: string): Promise<VercelMenu[]> {
 
           if (menuType === 'header') {
             const { name, path, hasChildren, children } = item as BigCommerceCategoryTreeItem;
-            const vercelTitle = configureMenuPath(path);
+            const vercelTitle = configureMenuPath(path ?? '');
             // NOTE: keep only high level categories for NavBar
             // if (hasChildren && children) {
             //   return configureVercelMenu(children, hasChildren);
@@ -547,7 +543,7 @@ export async function getMenu(handle: string): Promise<VercelMenu[]> {
 
           if (menuType === 'footer') {
             const { isVisibleInNavigation, name, path } = item as BigCommercePage;
-            const vercelTitle = configureMenuPath(path);
+            const vercelTitle = configureMenuPath(path ?? '');
 
             vercelMenuItem = {
               title: name,
@@ -620,7 +616,6 @@ export async function getProduct(handle: string): Promise<VercelProduct | undefi
   return bigCommerceToVercelProduct(res.body.data.site.product);
 }
 
-<<<<<<< HEAD
 export async function getProductIdBySlug(path: string): Promise<
   | {
       __typename:
@@ -639,19 +634,6 @@ export async function getProductIdBySlug(path: string): Promise<
     query: getEntityIdByRouteQuery,
     variables: {
       path
-=======
-export async function getProductIdBySlug(path: string): Promise<{__typename: 'Product'
-| 'Category'
-| 'Brand'
-| 'NormalPage'
-| 'ContactPage'
-| 'RawHtmlPage'
-| 'BlogIndexPage', entityId: number} | undefined> {
-  const res = await bigCommerceFetch<BigCommerceEntityIdOperation>({
-    query: getEntityIdByRouteQuery,
-    variables: {
-      path,
->>>>>>> 6c7a048 (add product slug url instead of id)
     }
   });
 

lib/utils.ts

@@ -11,7 +11,11 @@ export const ensureStartsWith = (stringToCheck: string, startsWith: string) =>
   stringToCheck.startsWith(startsWith) ? stringToCheck : `${startsWith}${stringToCheck}`;
 
 export const validateEnvironmentVariables = () => {
-  const requiredEnvironmentVariables = ['SHOPIFY_STORE_DOMAIN', 'SHOPIFY_STOREFRONT_ACCESS_TOKEN'];
+  const requiredEnvironmentVariables = [
+    'BIGCOMMERCE_CANONICAL_STORE_DOMAIN',
+    'BIGCOMMERCE_ACCESS_TOKEN',
+    'BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN'
+  ];
   const missingEnvironmentVariables = [] as string[];
 
   requiredEnvironmentVariables.forEach((envVar) => {

middleware.ts

@@ -10,6 +10,7 @@ export async function middleware(request: NextRequest) {
     return NextResponse.rewrite(new URL(`/product/${pageNode.entityId}`, request.url));
   }
 }
+
 export const config = {
   matcher: [
     /*