fix cart (#111)

src/actions/cart.tsx

@@ -1,100 +1,75 @@
-import { createCartId, getCartCookie } from "@/lib/utils/cart";
-import { cookies } from "next/headers";
+import {
+  createCookieCartProduct,
+  getCookieCart,
+  updateCookieCartProduct,
+  removeCookieCartProduct,
+  changeCookieCartProductQuanity,
+  getCartProductKey,
+} from "@/lib/utils/cart";
 
 export const GRBPWR_CART = "grbpwr-cart";
 
-export async function addItemToCookie(slug: string, size?: string) {
+export async function addCartProduct(slug: string, size: string) {
   "use server";
 
-  const cartId = createCartId(slug, size);
-
-  const cookieStore = cookies();
-
-  if (!cookieStore.has(GRBPWR_CART)) {
-    cookieStore.set(
-      GRBPWR_CART,
-      JSON.stringify({
-        products: {
-          [cartId]: {
-            slug: slug.replace("/product", ""),
-            size: size,
-            quantity: 1,
-          },
-        },
-      }),
-    );
-
-    return;
-  }
+  const cartData = getCookieCart();
 
   try {
-    const cart = getCartCookie();
+    if (!cartData) {
+      createCookieCartProduct(slug, size);
 
-    const currentProduct = cart.products[cartId];
+      return;
+    }
+
+    const productKey = getCartProductKey(slug, size);
+    const cartProduct = cartData.products[productKey];
+    let newProductQuanity;
 
-    let newCurrentProduct = currentProduct
-      ? { ...currentProduct, quantity: currentProduct.quantity + 1, size: size }
-      : { quantity: 1, slug: slug, size: size };
+    if (cartProduct) {
+      newProductQuanity = cartProduct.quanity + 1;
+    } else {
+      newProductQuanity = 1;
+    }
 
-    cookieStore.set(
-      GRBPWR_CART,
-      JSON.stringify({
-        products: { ...cart.products, [cartId]: newCurrentProduct },
-      }),
-    );
+    updateCookieCartProduct(slug, size, newProductQuanity);
   } catch (error) {
     console.log("failed to parse cart", error);
   }
 }
 
-// todo: check
-export async function removeItemFromCookie(slug: string, size?: string) {
+export async function removeCartProduct(slug: string, size: string) {
   "use server";
-  const cookieStore = cookies();
-
-  if (!cookieStore.has(GRBPWR_CART)) return;
-
-  const cartId = createCartId(slug, size);
 
   try {
-    const cart = getCartCookie();
-    cookieStore.set(
-      GRBPWR_CART,
-      JSON.stringify({
-        products: { ...cart.products, [cartId]: undefined },
-      }),
-    );
+    removeCookieCartProduct(slug, size);
   } catch (error) {
     console.log("failed to parse cart", error);
   }
 }
 
-export async function decreaseItemCountFromCookie(slug: string, size?: string) {
+export async function changeCartProductQuanity({
+  slug,
+  size,
+  operation,
+}: {
+  slug: string;
+  size: string;
+  operation: "increase" | "decrease";
+}) {
   "use server";
-  const cookieStore = cookies();
-
-  if (!cookieStore.has(GRBPWR_CART)) return;
-
-  const cartId = createCartId(slug, size);
 
   try {
-    const cart = getCartCookie();
-    if (cart.products[cartId].quantity > 1) {
-      cookieStore.set(
-        GRBPWR_CART,
-        JSON.stringify({
-          products: {
-            ...cart.products,
-            [cartId]: {
-              ...cart.products[cartId],
-              quantity: cart.products[cartId].quantity - 1,
-            },
-          },
-        }),
-      );
-    } else {
-      removeItemFromCookie(cartId);
+    const cartData = getCookieCart();
+    if (
+      operation === "decrease" &&
+      cartData?.products[getCartProductKey(slug, size)]?.quanity === 1
+    ) {
+      removeCookieCartProduct(slug, size);
+
+      return;
     }
+
+    changeCookieCartProductQuanity(slug, size, operation);
   } catch (error) {
     console.log("failed to parse cart", error);
   }

src/app/cart/checkout/page.tsx

@@ -1,10 +1,10 @@
 import CoreLayout from "@/components/layouts/CoreLayout";
-import ConfirmOrderForm from "@/components/forms/CheckoutForm";
+import CheckoutForm from "@/components/forms/CheckoutForm";
 
 export default async function Page() {
   return (
     <CoreLayout>
-      <ConfirmOrderForm />
+      <CheckoutForm />
     </CoreLayout>
   );
 }

src/app/cart/page.tsx

@@ -5,7 +5,6 @@ import { CartProductsSkeleton } from "@/components/ui/Skeleton";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import Link from "next/link";
-import ConfirmOrderForm from "@/components/forms/CheckoutForm";
 
 export const dynamic = "force-dynamic";
 

src/app/product/[...productParams]/page.tsx

@@ -1,12 +1,11 @@
-import { addItemToCookie } from "@/actions/cart";
 import { MediaProvider } from "@/components/global/MediaProvider";
 import { ProductMediaItem } from "@/components/global/MediaProvider/ProductMediaItem";
 import CoreLayout from "@/components/layouts/CoreLayout";
-import AddToCartButton from "@/components/productPage/AddToCartButton";
 import { CURRENCY_MAP, MAX_LIMIT } from "@/constants";
 import { serviceClient } from "@/lib/api";
 import { notFound } from "next/navigation";
-import { Suspense } from "react";
+import { addCartProduct } from "@/actions/cart";
+import AddToCartForm from "@/components/forms/AddToCartForm";
 
 interface ProductPageProps {
   params: {
@@ -51,6 +50,9 @@ export default async function ProductPage({ params }: ProductPageProps) {
     id: parseInt(id),
   });
 
+  console.log("product22");
+  console.log(product);
+
   return (
     <CoreLayout hideForm>
       <div className="flex flex-col bg-white pb-20 pt-5">
@@ -74,21 +76,12 @@ export default async function ProductPage({ params }: ProductPageProps) {
             {product?.product?.productDisplay?.productBody?.description}
           </div>
           <div className="mt-4">measurements</div>
-          <div className="mt-4 flex justify-between gap-2">
-            <div className="flex gap-2">
-              {product?.sizes?.map((size) => (
-                <div key={size.id}>{size.sizeId}</div>
-              ))}
-            </div>
-            <Suspense>
-              {/* TO-DO pass size from form */}
-              <AddToCartButton
-                slug={productParams.join("/")}
-                size={"size2"}
-                addItemToCookie={addItemToCookie}
-              />
-            </Suspense>
-          </div>
+          <AddToCartForm
+            handleSubmit={addCartProduct}
+            slug={product?.product?.slug || ""}
+            // price={0}
+            sizes={product?.sizes || []}
+          />
         </div>
       </div>
     </CoreLayout>

src/components/cart/CartItemRow.tsx

@@ -1,21 +1,16 @@
-import {
-  addItemToCookie,
-  decreaseItemCountFromCookie,
-  removeItemFromCookie,
-} from "@/actions/cart";
+import { removeCartProduct, changeCartProductQuanity } from "@/actions/cart";
 import type { common_ProductFull } from "@/api/proto-http/frontend";
 import ImageComponent from "../global/Image";
-import CartItemAmount from "./CartItemAmount";
-import RemoveFromCartButton from "./RemoveFromCartButton";
+import ProductAmountButtons from "./ProductAmountButtons";
 
 export default function CartItemRow({
   product,
-  quantity,
+  quanity,
   size,
 }: {
   product?: common_ProductFull;
-  quantity: number;
-  size?: string;
+  quanity: number;
+  size: string;
 }) {
   if (!product) return null;
 
@@ -38,21 +33,16 @@ export default function CartItemRow({
           <p className="text-xs">{size}</p>
         </div>
       </div>
-      <div className="flex w-1/2 justify-end whitespace-nowrap text-sm">
-        <CartItemAmount
-          slug={p?.slug!}
+      <div className="flex w-1/2 whitespace-nowrap text-sm">
+        <ProductAmountButtons
+          slug={p?.slug || ""}
           size={size}
-          quantity={quantity}
-          decreaseItemAmount={decreaseItemCountFromCookie}
-          increaseItemAmount={addItemToCookie}
+          removeProduct={removeCartProduct}
+          changeProductAmount={changeCartProductQuanity}
         />
+        <div className="font-bold">quanity: {quanity}</div>
       </div>
       <div className="flex w-1/2 flex-col items-end space-y-2">
-        <RemoveFromCartButton
-          slug={p?.slug!}
-          size={size}
-          removeItemFromCookie={removeItemFromCookie}
-        />
         <p className="text-md">
           BTC {p?.productDisplay?.productBody?.price?.value}
         </p>