feature/measurement window functionality (#124)

* change window design * add functionality to measurements modal
jekabolt · Sep 6, 2024 · fe16a78 · fe16a78
1 parent 02dbdc8
commit fe16a78
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 29 deletions.
diff --git a/src/app/product/[...productParams]/page.tsx b/src/app/product/[...productParams]/page.tsx
@@ -56,7 +56,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
 
   return (
     <CoreLayout hideForm>
-      <div className="flex flex-col bg-white pb-20 pt-5">
+      <div className="relative flex flex-col bg-white pb-20 pt-5">
         {product?.media && (
           <div className="grid w-full grid-cols-6 items-end gap-2">
             <FullscreenImagesCarousel
@@ -65,7 +65,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
             />
           </div>
         )}
-        <div className="flex w-1/2 flex-col ">
+        <div className="flex w-1/2 flex-col">
           <div className="mt-4 flex justify-between">
             <div>{product?.product?.productDisplay?.productBody?.name}</div>
             <div>
@@ -77,7 +77,11 @@ export default async function ProductPage({ params }: ProductPageProps) {
             {product?.product?.productDisplay?.productBody?.description}
           </div>
           <div className="mt-4">
-            <MeasurementsModal />
+            <MeasurementsModal
+              addCartProduct={addCartProduct}
+              sizes={product?.sizes}
+              productId={product?.product?.id}
+            />
           </div>
 
           {product?.product?.id && product?.sizes?.length && (

diff --git a/src/components/forms/AddToCartForm/index.tsx b/src/components/forms/AddToCartForm/index.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { AddToCartData, addToCartSchema } from "./schema";
 
+// todo: rework this to share logic with measurement modal
 export default function AddToCartForm({
   handleSubmit,
   sizes,
@@ -27,6 +28,7 @@ export default function AddToCartForm({
 
     setLoadingStatus(true);
     try {
+      console.log({ id, size: data.size });
       await handleSubmit({ id, size: data.size });
     } catch (error) {
       console.error(error);

diff --git a/src/components/forms/NewOrderForm/index.tsx b/src/components/forms/NewOrderForm/index.tsx
@@ -97,6 +97,9 @@ export default function NewOrderForm({
       shipmentCarrierId: parseInt(customShipmentCarrierId || shipmentCarrierId),
     });
 
+    console.log("response222");
+    console.log(response);
+
     setOrderData(response);
 
     if (response.hasChanged && response.validItems) {

diff --git a/src/components/sections/MeasurementsModal/MeasurementsModalContent.tsx b/src/components/sections/MeasurementsModal/MeasurementsModalContent.tsx
@@ -1,33 +1,105 @@
 "use client";
 
+import { common_ProductSize } from "@/api/proto-http/frontend";
 import { useLockBodyScroll } from "@uidotdev/usehooks";
+import { useState } from "react";
+
+export default function MeasurementsModalContent({
+  handleAddToCartClick,
+  sizes,
+  setModalOpen,
+}: {
+  setModalOpen?: any;
+  handleAddToCartClick: (selectedSize: number | undefined) => Promise<void>;
+  sizes: common_ProductSize[] | undefined;
+}) {
+  const [selectedSize, setSelectedSize] = useState<number | undefined>();
+  const [unit, setUnit] = useState("cm");
+
+  console.log("setModalOpen22");
+  console.log(setModalOpen);
 
-export default function MeasurementsModalContent() {
   useLockBodyScroll();
 
   return (
-    <div className="flex h-full w-full pt-20 text-buttonTextColor">
-      <div className="w-1/2 ">Image placeholder</div>
-      <div className="w-1/2 ">
-        <div className="mb-20 flex h-full flex-col">
-          <div className="h-1/3">measurements</div>
-          <div className="flex h-1/3 gap-4">
-            <div>xs</div>
-            <div>s</div>
-            <div>...buttons here taken from dictionary</div>
+    <div className="flex min-h-screen items-center justify-center bg-black p-8 text-white">
+      <div className="flex w-full max-w-6xl flex-col gap-8 md:flex-row">
+        <div className="relative flex-1">
+          <img
+            src="/placeholder.svg?height=800&width=400"
+            alt="White jeans"
+            className="w-full"
+          />
+          <div className="absolute left-1/2 top-1/2 flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-blue-600 text-2xl font-bold">
+            J
+          </div>
+          <div className="absolute left-0 top-1/2 bg-blue-600 px-2 py-1 text-sm">
+            hi
+            <br />
+            43 cm
+          </div>
+        </div>
+        <div className="flex-1 space-y-6">
+          <div className="flex items-center justify-between">
+            <h1 className="font-mono text-2xl">measurements</h1>
+          </div>
+          <div className="flex gap-4 text-lg">
+            {sizes?.map((size) => (
+              <button
+                key={size.id}
+                className={`uppercase ${selectedSize === size.sizeId ? "underline" : ""}`}
+                onClick={() => setSelectedSize(size?.sizeId)}
+              >
+                {size.sizeId}
+              </button>
+            ))}
           </div>
-          <div className="flex h-1/3 gap-40">
-            <div className="flex flex-col gap-4">
-              <div>length</div>
-              <div>chest</div>
-              <div>shoulders</div>
-            </div>
-            <div className="flex flex-col gap-4">
-              <div>74cm</div>
-              <div>74cm</div>
-              <div>...values taken from dictionary</div>
-            </div>
+          <p className="text-sm text-gray-400">*select size</p>
+          <button
+            onClick={async () => {
+              await handleAddToCartClick(selectedSize);
+              setModalOpen(false);
+            }}
+            className="w-full bg-white px-4 py-2 text-lg font-bold text-black"
+          >
+            add to cart
+          </button>
+          <div className="flex gap-4">
+            <label className="flex items-center gap-2">
+              <input
+                type="radio"
+                checked={unit === "cm"}
+                onChange={() => setUnit("cm")}
+                className="form-radio text-white"
+              />
+              cm
+            </label>
+            <label className="flex items-center gap-2">
+              <input
+                type="radio"
+                checked={unit === "inches"}
+                onChange={() => setUnit("inches")}
+                className="form-radio text-white"
+              />
+              inches
+            </label>
           </div>
+          <table className="w-full">
+            <tbody>
+              <tr>
+                <td>lenth</td>
+                <td>76 cm</td>
+              </tr>
+              <tr>
+                <td>chest</td>
+                <td>43 cm</td>
+              </tr>
+              <tr>
+                <td>shoulders</td>
+                <td>34 cm</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>

diff --git a/src/components/sections/MeasurementsModal/index.tsx b/src/components/sections/MeasurementsModal/index.tsx
@@ -2,8 +2,30 @@ import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import Modal from "@/components/ui/Modal";
 import MeasurementsModalContent from "./MeasurementsModalContent";
+import { common_ProductSize } from "@/api/proto-http/frontend";
+
+interface Props {
+  addCartProduct: ({ id, size }: { id: number; size: string }) => Promise<void>;
+  productId: number | undefined;
+  sizes: common_ProductSize[] | undefined;
+}
+
+export default function MeasurementsModal({
+  addCartProduct,
+  productId,
+  sizes,
+}: Props) {
+  async function handleAddToCartClick(selectedSize: number | undefined) {
+    "use server";
+
+    if (productId && selectedSize) {
+      await addCartProduct({
+        id: productId,
+        size: selectedSize.toString(),
+      });
+    }
+  }
 
-export default function Component() {
   return (
     <Modal
       openElement={
@@ -12,7 +34,10 @@ export default function Component() {
         </Button>
       }
     >
-      <MeasurementsModalContent />
+      <MeasurementsModalContent
+        sizes={sizes}
+        handleAddToCartClick={handleAddToCartClick}
+      />
     </Modal>
   );
 }
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Slot } from "@radix-ui/react-slot";
 import { useState } from "react";
 
 export default function Modal({
@@ -18,14 +19,15 @@ export default function Modal({
     <div>
       <div onClick={openModal}>{openElement}</div>
       {isModalOpen && (
-        <div className="fixed inset-0 z-50 bg-textColor">
+        <div className="absolute left-0 top-0 z-50 h-full w-full bg-textColor">
           <button
             onClick={closeModal}
             className="absolute right-4 top-4 cursor-pointer text-buttonTextColor"
           >
-            [closeIcon]
+            [X]
           </button>
-          {children}
+          {/* @ts-ignore */}
+          <Slot setModalOpen={setModalOpen}>{children}</Slot>
         </div>
       )}
     </div>