Merge remote-tracking branch 'origin' into CPP-153

components/cart/actions.ts

@@ -12,7 +12,10 @@ import {
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 
-export async function addItem(prevState: any, selectedVariantIds: Array<string>) {
+export async function addItem(
+  prevState: any,
+  selectedVariantIds: Array<{ merchandiseId: string; quantity: number }>
+) {
   let cartId = cookies().get('cartId')?.value;
   let cart;
 
@@ -31,10 +34,8 @@ export async function addItem(prevState: any, selectedVariantIds: Array<string>)
   }
 
   try {
-    await addToCart(
-      cartId,
-      selectedVariantIds.map((variantId) => ({ merchandiseId: variantId, quantity: 1 }))
-    );
+    const cart = await addToCart(cartId, selectedVariantIds);
+    console.log({ cartLines: cart.lines });
     revalidateTag(TAGS.cart);
   } catch (e) {
     return 'Error adding item to cart';
@@ -65,7 +66,6 @@ export async function setMetafields(
 
     revalidateTag(TAGS.cart);
   } catch (e) {
-    console.log(e);
     return 'Error set cart attributes';
   }
 }

components/cart/add-to-cart.tsx

@@ -18,7 +18,7 @@ function SubmitButton({
 }) {
   const { pending } = useFormStatus();
   const buttonClasses =
-    'relative flex w-full items-center justify-center rounded bg-secondary p-4 tracking-wide text-white gap-3';
+    'relative flex w-full items-center justify-center rounded bg-secondary p-3 tracking-wide text-white gap-3';
   const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
 
   if (!availableForSale) {
@@ -80,11 +80,20 @@ export function AddToCart({
   const coreVariantId = searchParams.get(CORE_VARIANT_ID_KEY);
 
   // remove special core-waiver value as it is not a valid variant
-  const selectedVariantIds = [coreVariantId, selectedVariantId]
-    .filter(Boolean)
-    .filter((value) => value !== CORE_WAIVER) as string[];
+  const addingVariants = (
+    [coreVariantId, selectedVariantId]
+      .filter(Boolean)
+      .filter((value) => value !== CORE_WAIVER) as string[]
+  ).map((id) => ({ merchandiseId: id, quantity: 1 }));
 
-  const actionWithVariant = formAction.bind(null, selectedVariantIds);
+  if (variant?.addOnProduct) {
+    addingVariants.push({
+      merchandiseId: variant.addOnProduct.id,
+      quantity: variant.addOnProduct.quantity
+    });
+  }
+
+  const actionWithVariant = formAction.bind(null, addingVariants);
 
   return (
     <form action={actionWithVariant}>

components/cart/delete-item-button.tsx

@@ -36,10 +36,11 @@ function SubmitButton() {
 
 export function DeleteItemButton({ item }: { item: CartItem }) {
   const [message, formAction] = useFormState(removeItem, null);
-  const { id: itemId, coreCharge } = item;
+  const { id: itemId, coreCharge, addOnProduct } = item;
   const actionWithVariant = formAction.bind(null, [
     itemId,
-    ...(coreCharge?.id ? [coreCharge.id] : [])
+    ...(coreCharge?.id ? [coreCharge.id] : []),
+    ...(addOnProduct?.id ? [addOnProduct.id] : [])
   ]);
 
   return (

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

@@ -51,11 +51,19 @@ export function EditItemQuantityButton({ item, type }: { item: CartItem; type: '
   if (item.coreCharge) {
     payload.push({
       lineId: item.coreCharge.id,
-      variantId: item.coreCharge.id,
+      variantId: item.coreCharge.merchandise.id,
       quantity
     });
   }
 
+  if (item.addOnProduct) {
+    payload.push({
+      lineId: item.addOnProduct.id,
+      variantId: item.addOnProduct.merchandise.id,
+      quantity: quantity * item.addOnProduct.quantity
+    });
+  }
+
   const actionWithVariant = formAction.bind(null, payload);
 
   return (

components/cart/modal.tsx

@@ -21,7 +21,11 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
   const openCart = () => setIsOpen(true);
   const closeCart = () => setIsOpen(false);
   const { control, handleSubmit } = useForm<VehicleFormSchema>({
-    resolver: zodResolver(vehicleFormSchema)
+    resolver: zodResolver(vehicleFormSchema),
+    defaultValues: {
+      customer_vin: cart?.attributes.find((a) => a.key === 'customer_vin')?.value || '',
+      customer_mileage: cart?.attributes.find((a) => a.key === 'customer_mileage')?.value || ''
+    }
   });
 
   const [loading, setLoading] = useState(false);