Feature/submit order request 2 (#114)

* submit order request * submit order refactor * rename refactor * removed console log
jekabolt · Jul 23, 2024 · 6e87ace · 6e87ace
1 parent 2104f32
commit 6e87ace
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 39 deletions.
diff --git a/src/actions/cart.tsx b/src/actions/cart.tsx
@@ -1,9 +1,9 @@
 import {
   createCookieCartProduct,
+  getCartProductKey,
   getCookieCart,
-  updateCookieCartProduct,
   removeCookieCartProduct,
-  getCartProductKey,
+  updateCookieCartProduct,
 } from "@/lib/utils/cart";
 
 export const GRBPWR_CART = "grbpwr-cart";
@@ -31,15 +31,15 @@ export async function addCartProduct({
     const productKey = getCartProductKey(slug, size);
     const cartProduct = cartData.products[productKey];
     const newProduct = {
-      quanity: 0,
+      quantity: 0,
       price: 0,
     };
 
     if (cartProduct) {
-      newProduct.quanity = cartProduct.quanity + 1;
+      newProduct.quantity = cartProduct.quantity + 1;
       newProduct.price = cartProduct.price + price;
     } else {
-      newProduct.quanity = 1;
+      newProduct.quantity = 1;
       newProduct.price = price;
     }
 
@@ -65,7 +65,7 @@ export async function removeCartProduct({
   }
 }
 
-export async function changeCartProductQuanity({
+export async function changeCartProductQuantity({
   slug,
   size,
   operation,
@@ -85,24 +85,24 @@ export async function changeCartProductQuanity({
     const productKey = getCartProductKey(slug, size);
     const cartProduct = cartData.products[productKey];
 
-    if (operation === "decrease" && cartProduct.quanity === 1) {
+    if (operation === "decrease" && cartProduct.quantity === 1) {
       removeCookieCartProduct(slug, size);
 
       return;
     }
 
     const newProduct = {
-      quanity: cartProduct.quanity,
+      quantity: cartProduct.quantity,
       price: cartProduct.price,
     };
 
     if (operation === "decrease") {
-      newProduct.quanity = cartProduct.quanity - 1;
+      newProduct.quantity = cartProduct.quantity - 1;
       newProduct.price = cartProduct.price - price;
     }
 
     if (operation === "increase") {
-      newProduct.quanity = cartProduct.quanity + 1;
+      newProduct.quantity = cartProduct.quantity + 1;
       newProduct.price = cartProduct.price + price;
     }
 

diff --git a/src/app/cart/checkout/page.tsx b/src/app/cart/checkout/page.tsx
@@ -1,10 +1,57 @@
-import CoreLayout from "@/components/layouts/CoreLayout";
+import { common_OrderItemInsert } from "@/api/proto-http/frontend";
 import CheckoutForm from "@/components/forms/CheckoutForm";
+import CoreLayout from "@/components/layouts/CoreLayout";
+import {
+  getCartProductSlugAndSizeFromKey,
+  getCookieCart,
+} from "@/lib/utils/cart";
 
 export default async function Page() {
+  const orderItems = createOrderArray();
+
+  function createOrderArray(): common_OrderItemInsert[] {
+    const cartItems = getCookieCart();
+    if (!cartItems || !cartItems.products) return [];
+
+    const orderArray: common_OrderItemInsert[] = [];
+
+    for (const key in cartItems.products) {
+      const productData = cartItems.products[key];
+      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);
+
+      const sizeId = 1;
+
+      const orderItem: common_OrderItemInsert = {
+        productId,
+        quantity: productData.quantity,
+        sizeId,
+      };
+
+      orderArray.push(orderItem);
+    }
+
+    return orderArray;
+  }
+
+  function getProductIdFromSlug(slug: string): number | undefined {
+    const [gender, brand, name, id] = slug
+      ?.replaceAll("/product/", "")
+      .split("/");
+
+    return id ? parseInt(id) : undefined;
+  }
+
   return (
     <CoreLayout>
-      <CheckoutForm />
+      <CheckoutForm orderItems={orderItems} />
     </CoreLayout>
   );
 }
diff --git a/src/components/cart/CartItemRow.tsx b/src/components/cart/CartItemRow.tsx
@@ -1,15 +1,15 @@
-import { removeCartProduct, changeCartProductQuanity } from "@/actions/cart";
+import { changeCartProductQuantity, removeCartProduct } from "@/actions/cart";
 import type { common_ProductFull } from "@/api/proto-http/frontend";
 import ImageComponent from "../global/Image";
 import ProductAmountButtons from "./ProductAmountButtons";
 
 export default function CartItemRow({
   product,
-  quanity,
+  quantity,
   size,
 }: {
   product?: common_ProductFull;
-  quanity: number;
+  quantity: number;
   size: string;
 }) {
   if (!product) return null;
@@ -41,10 +41,10 @@ export default function CartItemRow({
             size={size}
             price={parseInt(basicCurrencyValue)}
             removeProduct={removeCartProduct}
-            changeProductAmount={changeCartProductQuanity}
+            changeProductAmount={changeCartProductQuantity}
           />
         )}
-        <div className="font-bold">quanity: {quanity}</div>
+        <div className="font-bold">quantity: {quantity}</div>
       </div>
       <div className="flex w-1/2 flex-col items-end space-y-2">
         <p className="text-md">

diff --git a/src/components/cart/CartPopup.tsx b/src/components/cart/CartPopup.tsx
@@ -1,18 +1,18 @@
 "use client";
 
-import { useState } from "react";
-import Link from "next/link";
-import { useClickAway } from "@uidotdev/usehooks";
 import Button from "@/components/ui/Button";
 import { cn } from "@/lib/utils";
+import { useClickAway } from "@uidotdev/usehooks";
+import Link from "next/link";
+import { useState } from "react";
 import { ButtonStyle } from "../ui/Button/styles";
 
 export default function CartPopup({
   children,
-  itemsQuanity,
+  itemsQuantity,
 }: {
   children: React.ReactNode;
-  itemsQuanity?: number;
+  itemsQuantity?: number;
 }) {
   const [open, setOpenStatus] = useState(false);
 
@@ -27,7 +27,7 @@ export default function CartPopup({
           onClick={() => setOpenStatus(!open)}
           style={ButtonStyle.underlinedButton}
         >
-          cart {itemsQuanity ? `(${itemsQuanity})` : ""}
+          cart {itemsQuantity ? `(${itemsQuantity})` : ""}
         </Button>
         <div className="blueTheme">
           <div

diff --git a/src/components/cart/CartProductsList.tsx b/src/components/cart/CartProductsList.tsx
@@ -16,7 +16,7 @@ export default async function CartProductsList() {
   if (!cartData || !cartData.products) return null;
 
   const productsPromises = Object.entries(cartData.products).map(
-    async ([productCartKey, { quanity }]) => {
+    async ([productCartKey, { quantity }]) => {
       const productSlugAndSize =
         getCartProductSlugAndSizeFromKey(productCartKey);
 
@@ -25,7 +25,7 @@ export default async function CartProductsList() {
         const item = {
           slug,
           size,
-          quanity,
+          quantity,
         };
 
         const [gender, brand, name, id] = slug
@@ -60,7 +60,7 @@ export default async function CartProductsList() {
       <Link href={p?.product?.product?.slug || ""}>
         <CartItemRow
           product={p?.product}
-          quanity={p?.quanity || 0}
+          quantity={p?.quantity || 0}
           size={p?.size || ""}
         />
       </Link>

diff --git a/src/components/forms/CheckoutForm/AddressFields.tsx b/src/components/forms/CheckoutForm/AddressFields.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import type { Control } from "react-hook-form";
 import InputField from "@/components/ui/Form/fields/InputField";
 import SelectField from "@/components/ui/Form/fields/SelectField";
+import type { Control } from "react-hook-form";
 
 type Props = {
   loading: boolean;
@@ -74,7 +74,7 @@ export default function AddressFields({ loading, control, prefix }: Props) {
         control={control}
         loading={loading}
         name={prefix ? `${prefix}.address` : "address"}
-        label="streat and houce number:"
+        label="street and house number:"
         placeholder="sjyrniesu 10"
       />
       <InputField

diff --git a/src/components/forms/CheckoutForm/index.tsx b/src/components/forms/CheckoutForm/index.tsx
@@ -13,6 +13,7 @@ import {
   SubmitOrderRequest,
   common_AddressInsert,
   common_BuyerInsert,
+  common_OrderItemInsert,
   common_OrderNew,
 } from "@/api/proto-http/frontend";
 import InputMaskedField from "@/components/ui/Form/fields/InputMaskedField";
@@ -21,8 +22,10 @@ import { CheckoutData, checkoutSchema, defaultData } from "./schema";
 
 export default function CheckoutForm({
   initialData,
+  orderItems,
 }: {
   initialData?: CheckoutData;
+  orderItems: common_OrderItemInsert[];
 }) {
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -52,7 +55,7 @@ export default function CheckoutForm({
   function createSubmitOrderRequest(data: CheckoutData): SubmitOrderRequest {
     const shippingAddress: common_AddressInsert = {
       street: data.address,
-      houseNumber: "1", // Extract house number if applicable
+      houseNumber: "1", // common_AddressInsert will be changed to just have full address
       apartmentNumber: data.additionalAddress,
       city: data.city,
       state: data.state,
@@ -66,7 +69,7 @@ export default function CheckoutForm({
         : data.billingAddress
           ? {
               street: data.billingAddress.address,
-              houseNumber: "1", // Extract house number if applicable
+              houseNumber: "1", // common_AddressInsert will be changed to just have full address
               apartmentNumber: data.billingAddress.additionalAddress,
               city: data.billingAddress.city,
               state: data.billingAddress.state,
@@ -84,13 +87,16 @@ export default function CheckoutForm({
     };
 
     const order: common_OrderNew = {
-      items: [], // Populate this with actual order items
+      items: orderItems,
       shippingAddress,
       billingAddress,
       buyer,
-      paymentMethodId: parseInt(data.paymentMethod), // Assuming paymentMethod is an ID in string format
-      shipmentCarrierId: 1, // Set the carrier ID based on the shippingMethod (map this appropriately)
-      promoCode: "", // Add promo code if applicable
+      // TO-DO map payment method and carrier id from dictionary
+      // paymentMethodId: mapPaymentMethod(data.paymentMethod),
+      // shipmentCarrierId: mapShipmentCarrierId(data.shippingMethod),
+      paymentMethodId: 1,
+      shipmentCarrierId: 1,
+      promoCode: undefined, // Add promo code if applicable
     };
 
     return {

diff --git a/src/components/forms/CheckoutForm/schema.ts b/src/components/forms/CheckoutForm/schema.ts
@@ -30,7 +30,7 @@ export const checkoutSchema = z.object({
     .object({
       // todo: add validation of the mask
       // reuse same mask constant for inout and for schema
-      number: z.string().length(16),
+      number: z.string().length(19),
       fullName: z.string().min(3),
       expirationDate: z.string().length(5),
       cvc: z.string().length(3),

diff --git a/src/components/layouts/CoreLayout.tsx b/src/components/layouts/CoreLayout.tsx
@@ -1,8 +1,8 @@
+import CartPopup from "@/components/cart/CartPopup";
 import Footer from "@/components/global/Footer";
 import Header from "@/components/global/Header";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
-import CartPopup from "@/components/cart/CartPopup";
 import Link from "next/link";
 import { Suspense } from "react";
 import CartProductsList from "../cart/CartProductsList";
@@ -40,7 +40,7 @@ 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 itemsQuanity={22}>
+              <CartPopup itemsQuantity={22}>
                 <Suspense fallback={null}>
                   <div className="relative">
                     <div className="no-scroll-bar relative max-h-[500px] space-y-5 overflow-y-scroll pb-5">

diff --git a/src/lib/utils/cart.ts b/src/lib/utils/cart.ts
@@ -2,7 +2,7 @@ import { GRBPWR_CART } from "@/actions/cart";
 import type { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
 import { cookies } from "next/headers";
 
-type CookieCartProductData = { quanity: number; price: number };
+type CookieCartProductData = { quantity: number; price: number };
 type CookieCartProduct = Record<string, CookieCartProductData>;
 
 export function getCartProductKey(slug: string, size: string) {
@@ -51,7 +51,7 @@ export function createCookieCartProduct({
     JSON.stringify({
       products: {
         [getCartProductKey(productSlug, size)]: {
-          quanity: 1,
+          quantity: 1,
           price,
         },
       },