simplify checkout logic (#116)

* simplify checkout logic

* rm console

src/app/cart/checkout/page.tsx

@@ -1,57 +1,44 @@
 import { common_OrderItemInsert } from "@/api/proto-http/frontend";
-import CheckoutForm from "@/components/forms/CheckoutForm";
+import NewOrderForm from "@/components/forms/NewOrderForm";
+import { redirect } from "next/navigation";
 import CoreLayout from "@/components/layouts/CoreLayout";
 import {
   getCartProductSlugAndSizeFromKey,
   getCookieCart,
 } from "@/lib/utils/cart";
 
 export default async function Page() {
-  const orderItems = createOrderArray();
+  const cartData = getCookieCart();
+  const cartProducts = cartData?.products;
 
-  function createOrderArray(): common_OrderItemInsert[] {
-    const cartItems = getCookieCart();
-    if (!cartItems || !cartItems.products) return [];
+  if (!cartProducts || !Object.keys(cartProducts)) return redirect("/cart");
 
-    const orderArray: common_OrderItemInsert[] = [];
-
-    for (const key in cartItems.products) {
-      const productData = cartItems.products[key];
+  const orderItems = Object.entries(cartProducts).reduce(
+    (acc, [key, value]) => {
       const slugAndSize = getCartProductSlugAndSizeFromKey(key);
 
-      if (!slugAndSize) continue;
-
-      const { slug, size } = slugAndSize;
-      const productId = getProductIdFromSlug(slug);
-
-      //TO-DO map size id from dictionary
-      // const sizeId = getSizeIdBySize(size);
+      if (!slugAndSize) return acc;
 
-      const sizeId = 1;
+      const [_, __, ___, id] = slugAndSize.slug
+        .replaceAll("/product/", "")
+        .split("/");
 
-      const orderItem: common_OrderItemInsert = {
-        productId,
-        quantity: productData.quantity,
-        sizeId,
+      const item = {
+        productId: Number(id),
+        quantity: value.quantity,
+        sizeId: Number(slugAndSize.size),
       };
 
-      orderArray.push(orderItem);
-    }
+      acc.push(item);
 
-    return orderArray;
-  }
-
-  function getProductIdFromSlug(slug: string): number | undefined {
-    const [gender, brand, name, id] = slug
-      ?.replaceAll("/product/", "")
-      .split("/");
-
-    return id ? parseInt(id) : undefined;
-  }
+      return acc;
+    },
+    [] as common_OrderItemInsert[],
+  );
 
   return (
     <CoreLayout>
-      <CheckoutForm orderItems={orderItems} />
+      <NewOrderForm orderItems={orderItems} />
     </CoreLayout>
   );
 }

src/app/cart/page.tsx

@@ -6,10 +6,13 @@ import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import Link from "next/link";
 import TotalPrice from "@/components/cart/TotalPrice";
+import { getCookieCart } from "@/lib/utils/cart";
 
 export const dynamic = "force-dynamic";
 
 export default async function CartPage() {
+  const cartItems = getCookieCart();
+
   return (
     <CoreLayout>
       <div className="relative flex gap-32">
@@ -29,9 +32,11 @@ export default async function CartPage() {
             <p className="mb-2 text-lg">170$</p> */}
             <TotalPrice />
 
-            <Button asChild style={ButtonStyle.simpleButton}>
-              <Link href="/cart/checkout">checkout</Link>
-            </Button>
+            {Object.keys(cartItems?.products || {}).length && (
+              <Button asChild style={ButtonStyle.simpleButton}>
+                <Link href="/cart/checkout">checkout</Link>
+              </Button>
+            )}
           </div>
         </div>
       </div>

src/components/cart/CartPopup.tsx

@@ -10,9 +10,11 @@ import { ButtonStyle } from "../ui/Button/styles";
 export default function CartPopup({
   children,
   itemsQuantity,
+  hasCartProducts,
 }: {
   children: React.ReactNode;
   itemsQuantity?: number;
+  hasCartProducts?: boolean;
 }) {
   const [open, setOpenStatus] = useState(false);
 
@@ -44,9 +46,11 @@ export default function CartPopup({
               <Button asChild style={ButtonStyle.simpleButton}>
                 <Link href="/cart">cart</Link>
               </Button>
-              <Button asChild style={ButtonStyle.simpleButton}>
-                <Link href="/cart/checkout">checkout</Link>
-              </Button>
+              {hasCartProducts && (
+                <Button asChild style={ButtonStyle.simpleButton}>
+                  <Link href="/cart/checkout">checkout</Link>
+                </Button>
+              )}
             </div>
           </div>
         </div>

src/components/forms/CheckoutForm/index.tsx → src/components/forms/NewOrderForm/index.tsx

@@ -20,7 +20,7 @@ import InputMaskedField from "@/components/ui/Form/fields/InputMaskedField";
 import { serviceClient } from "@/lib/api";
 import { CheckoutData, checkoutSchema, defaultData } from "./schema";
 
-export default function CheckoutForm({
+export default function NewOrderForm({
   initialData,
   orderItems,
 }: {
@@ -43,6 +43,8 @@ export default function CheckoutForm({
 
   const onSubmit = async (data: CheckoutData) => {
     try {
+      // todo: check if all items are in stock
+
       const response = await serviceClient.SubmitOrder(
         createSubmitOrderRequest(data),
       );

src/components/layouts/CoreLayout.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { Suspense } from "react";
 import CartProductsList from "../cart/CartProductsList";
 import TotalPrice from "../cart/TotalPrice";
+import { getCookieCart } from "@/lib/utils/cart";
 
 export default function CoreLayout({
   children,
@@ -15,6 +16,11 @@ export default function CoreLayout({
   children: React.ReactNode;
   hideForm?: boolean;
 }>) {
+  const cartData = getCookieCart();
+  const hasCartProducts =
+    cartData?.products && Object.keys(cartData?.products).length > 0;
+  const productsNumber = Object.keys(cartData?.products || {}).length;
+
   return (
     <div className="min-h-screen bg-bgColor">
       <div className="relative mx-auto max-w-7xl">
@@ -40,7 +46,10 @@ export default function CoreLayout({
 
           <div className="relative hidden w-24 md:block">
             <nav className="sticky top-24 flex flex-col items-center gap-60">
-              <CartPopup itemsQuantity={22}>
+              <CartPopup
+                itemsQuantity={productsNumber}
+                hasCartProducts={hasCartProducts}
+              >
                 <Suspense fallback={null}>
                   <div className="relative">
                     <div className="no-scroll-bar relative max-h-[500px] space-y-5 overflow-y-scroll pb-5">