Handle null ids

components/cart/actions.ts

@@ -37,7 +37,7 @@ export async function removeItem(prevState: any, merchandiseId: string) {
 
     const lineItem = cart.lines.find((line) => line.merchandise.id === merchandiseId);
 
-    if (lineItem) {
+    if (lineItem && lineItem.id) {
       await removeFromCart(cartId, [lineItem.id]);
       revalidateTag(TAGS.cart);
     } else {
@@ -72,7 +72,7 @@ export async function updateItemQuantity(
 
     const lineItem = cart.lines.find((line) => line.merchandise.id === merchandiseId);
 
-    if (lineItem) {
+    if (lineItem && lineItem.id) {
       if (quantity === 0) {
         await removeFromCart(cartId, [lineItem.id]);
       } else {
@@ -114,5 +114,5 @@ export async function redirectToCheckout() {
 
 export async function createCartAndSetCookie() {
   let cart = await createCart();
-  cookies().set('cartId', cart.id);
+  cookies().set('cartId', cart.id!);
 }

components/cart/cart-context.tsx

@@ -52,7 +52,7 @@ function createOrUpdateCartItem(
   const totalAmount = calculateItemCost(quantity, variant.price.amount);
 
   return {
-    id: existingItem?.id || `${variant.id}_${Date.now()}`,
+    id: existingItem?.id,
     quantity,
     cost: {
       totalAmount: {
@@ -91,7 +91,7 @@ function updateCartTotals(lines: CartItem[]): Pick<Cart, 'totalQuantity' | 'cost
 
 function createEmptyCart(): Cart {
   return {
-    id: `optimistic_${Date.now()}`,
+    id: undefined,
     checkoutUrl: '',
     totalQuantity: 0,
     lines: [],

components/cart/modal.tsx

@@ -90,7 +90,11 @@ export default function CartModal() {
               ) : (
                 <div className="flex h-full flex-col justify-between overflow-hidden p-1">
                   <ul className="flex-grow overflow-auto py-4">
-                    {cart.lines.map((item, i) => {
+                    {cart.lines
+                      .sort((a, b) =>
+                        a.merchandise.product.title.localeCompare(b.merchandise.product.title)
+                      )
+                      .map((item, i) => {
                         const merchandiseSearchParams = {} as MerchandiseSearchParams;
 
                         item.merchandise.selectedOptions.forEach(({ name, value }) => {

lib/shopify/types.ts

@@ -20,7 +20,7 @@ export type CartProduct = {
 };
 
 export type CartItem = {
-  id: string;
+  id: string | undefined;
   quantity: number;
   cost: {
     totalAmount: Money;
@@ -96,7 +96,7 @@ export type SEO = {
 };
 
 export type ShopifyCart = {
-  id: string;
+  id: string | undefined;
   checkoutUrl: string;
   cost: {
     subtotalAmount: Money;