From 2664a39c3a042f0a987705ffa2ed28b0d5f8666a Mon Sep 17 00:00:00 2001
From: Claydson Fernando <claydson.silva@totvs.com.br>
Date: Wed, 27 Nov 2024 00:23:06 -0300
Subject: [PATCH 1/2] feat: attachment product

---
 components/product/AddToCartButton/common.tsx | 10 +-
 components/product/AddToCartButton/vtex.tsx   | 96 +++++++++++++++----
 components/product/dryzun/ProductMain.tsx     |  2 +-
 static/tailwind.css                           | 30 ++++++
 4 files changed, 116 insertions(+), 22 deletions(-)

diff --git a/components/product/AddToCartButton/common.tsx b/components/product/AddToCartButton/common.tsx
index dc2e5be..107b83f 100644
--- a/components/product/AddToCartButton/common.tsx
+++ b/components/product/AddToCartButton/common.tsx
@@ -43,9 +43,15 @@ export default function AddToCartButton(props: Props) {
   return (
     <Button
       {...btnProps}
-      class="rounded-none btn shadow-none border-0 bg-[#B4CBF0] hover:bg-[#81A1D4] transition-[0.3s] hover:text-white flex h-12 justify-center items-center gap-2.5 self-stretch px-4 py-2.5 text-xs not-italic font-bold leading-[normal] tracking-[1.2px] uppercase text-[#243959]"
+      class={`rounded-none btn shadow-none border-0 transition-[0.3s] flex h-12 justify-center items-center gap-2.5 self-stretch px-4 py-2.5 text-xs not-italic font-bold leading-[normal] tracking-[1.2px] uppercase text-[#243959] ${
+        props.buttonDisabled ? "bg-[#f5f5f5] cursor-not-allowed pointer-events-none" : "bg-[#B4CBF0] hover:bg-[#81A1D4] hover:text-white"
+      }`}
     >
-      comprar
+      {props.buttonDisabled ? (
+        "Selecione o tamanho"
+      ) : (
+        "Comprar"
+      )}
     </Button>
   );
 }
diff --git a/components/product/AddToCartButton/vtex.tsx b/components/product/AddToCartButton/vtex.tsx
index a77a642..e4fd85c 100644
--- a/components/product/AddToCartButton/vtex.tsx
+++ b/components/product/AddToCartButton/vtex.tsx
@@ -9,34 +9,92 @@ export interface Props extends Omit<BtnProps, "onAddItem"> {
 }
 
 function AddToCartButton({ seller, productID, category, eventParams }: Props) {
-  const { addItems } = useCart();
+  const { cart, addItems, addItemAttachment } = useCart();
+  const { items } = cart.value ?? { items: [] };
 
   const [selectedSize, setSelectedSize] = useState<string>("");
 
-  const onAddItem = () =>
-    addItems({
-      orderItems: [{
-        id: productID,
-        seller: seller,
-        quantity: 1,
-      }],
+  const handleSizeChange = (e: Event) => {
+    const target = e.target as HTMLSelectElement;
+    setSelectedSize(target.value);
+  };
+
+  const onAddItem = async () => {
+    await addItems({
+      orderItems: [{ id: productID, seller, quantity: 1 }],
     });
 
+
+    if (category === "Anéis") {
+      const existingItemIndex = items.findIndex((item) => item.id === productID);
+      const index = existingItemIndex >= 0 ? existingItemIndex : items.length;
+
+      await addItemAttachment({
+        index: index,
+        attachment: "personalization",
+        content: { aro: selectedSize },
+      });
+    }
+  }
+  
+  const RING_SIZES = [
+    "11", 
+    "12", 
+    "13", 
+    "14", 
+    "15", 
+    "16", 
+    "17", 
+    "18", 
+    "19", 
+    "20", 
+    "21", 
+    "22"
+  ];
+
   return (
     <>
-      {/* <p>{category}</p> */}
-
-      {
-        /* {category === "Anéis" && (
-        <select name="" id="">
-          <option value="">Teste 1</option>
-          <option value="">Teste 2</option>
-          <option value="">Teste 3</option>
+      {category === "Anéis" && (  
+        <p className="text-[12px] font-normal not-italic leading-normal">
+          Tamanho
+        </p>
+      )}
+
+      {category === "Anéis" && (
+        <select 
+          name="size"
+          id="size"
+          onChange={handleSizeChange} 
+          className="w-full border border-gray-300 rounded-none p-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        >
+          <option value="" disabled selected>
+            Selecione
+          </option>
+
+          {RING_SIZES.map((size) => (
+            <option key={size} value={size}>
+              {size}
+            </option>
+          ))}
+
         </select>
-      )} */
-      }
+      )}
+
+      {category === "Anéis" && (
+        <Button
+          onAddItem={onAddItem} 
+          eventParams={eventParams} 
+          buttonDisabled={!selectedSize}
+        />
+      )}
 
-      <Button onAddItem={onAddItem} eventParams={eventParams} />
+      {category !== "Anéis" && (
+        <Button
+          onAddItem={onAddItem} 
+          eventParams={eventParams} 
+          buttonDisabled={false}
+        />
+      )}
     </>
   );
 }
diff --git a/components/product/dryzun/ProductMain.tsx b/components/product/dryzun/ProductMain.tsx
index db08181..5df66ed 100644
--- a/components/product/dryzun/ProductMain.tsx
+++ b/components/product/dryzun/ProductMain.tsx
@@ -183,7 +183,7 @@ function ProductMain({ page }: Props) {
 
                 {/* Sku Selector */}
                 <div class="mt-4 sm:mt-6">
-                  <ProductSelector product={product} />
+                 <ProductSelector product={product} />
                 </div>
               </div>
             </>
diff --git a/static/tailwind.css b/static/tailwind.css
index 3178ead..9eefad2 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -4568,6 +4568,9 @@ details.collapse summary::-webkit-details-marker {
   white-space: nowrap;
   border-width: 0;
 }
+.pointer-events-none {
+  pointer-events: none;
+}
 .pointer-events-auto {
   pointer-events: auto;
 }
@@ -5832,6 +5835,9 @@ details.collapse summary::-webkit-details-marker {
 .cursor-default {
   cursor: default;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -6363,6 +6369,10 @@ details.collapse summary::-webkit-details-marker {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
 .border-neutral {
   --tw-border-opacity: 1;
   border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity)));
@@ -7333,6 +7343,10 @@ details.collapse summary::-webkit-details-marker {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
 .text-neutral {
   --tw-text-opacity: 1;
   color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity)));
@@ -8754,6 +8768,11 @@ summary {
   border-color: rgb(18 119 73 / var(--tw-border-opacity));
 }
 
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -8763,6 +8782,17 @@ summary {
   outline-width: 0px;
 }
 
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
 .disabled\:hidden:disabled {
   display: none;
 }

From 59c402a4747bb946cd3637ff09ff0ce3bcc5974b Mon Sep 17 00:00:00 2001
From: Claydson Fernando <claydson.silva@totvs.com.br>
Date: Wed, 27 Nov 2024 22:40:00 -0300
Subject: [PATCH 2/2] feat: attachment product

---
 components/product/AddToCartButton/common.tsx | 16 ++++---
 components/product/AddToCartButton/vtex.tsx   | 48 +++++++++----------
 components/product/dryzun/ProductMain.tsx     |  2 +-
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/components/product/AddToCartButton/common.tsx b/components/product/AddToCartButton/common.tsx
index 107b83f..24f5631 100644
--- a/components/product/AddToCartButton/common.tsx
+++ b/components/product/AddToCartButton/common.tsx
@@ -44,14 +44,18 @@ export default function AddToCartButton(props: Props) {
     <Button
       {...btnProps}
       class={`rounded-none btn shadow-none border-0 transition-[0.3s] flex h-12 justify-center items-center gap-2.5 self-stretch px-4 py-2.5 text-xs not-italic font-bold leading-[normal] tracking-[1.2px] uppercase text-[#243959] ${
-        props.buttonDisabled ? "bg-[#f5f5f5] cursor-not-allowed pointer-events-none" : "bg-[#B4CBF0] hover:bg-[#81A1D4] hover:text-white"
+        props.buttonDisabled
+          ? "bg-[#f5f5f5] cursor-not-allowed pointer-events-none"
+          : "bg-[#B4CBF0] hover:bg-[#81A1D4] hover:text-white"
       }`}
     >
-      {props.buttonDisabled ? (
-        "Selecione o tamanho"
-      ) : (
-        "Comprar"
-      )}
+      {props.buttonDisabled
+        ? (
+          "Selecione o tamanho"
+        )
+        : (
+          "Comprar"
+        )}
     </Button>
   );
 }
diff --git a/components/product/AddToCartButton/vtex.tsx b/components/product/AddToCartButton/vtex.tsx
index e4fd85c..4d5ad1f 100644
--- a/components/product/AddToCartButton/vtex.tsx
+++ b/components/product/AddToCartButton/vtex.tsx
@@ -24,9 +24,10 @@ function AddToCartButton({ seller, productID, category, eventParams }: Props) {
       orderItems: [{ id: productID, seller, quantity: 1 }],
     });
 
-
     if (category === "Anéis") {
-      const existingItemIndex = items.findIndex((item) => item.id === productID);
+      const existingItemIndex = items.findIndex((item) =>
+        item.id === productID
+      );
       const index = existingItemIndex >= 0 ? existingItemIndex : items.length;
 
       await addItemAttachment({
@@ -35,36 +36,36 @@ function AddToCartButton({ seller, productID, category, eventParams }: Props) {
         content: { aro: selectedSize },
       });
     }
-  }
-  
+  };
+
   const RING_SIZES = [
-    "11", 
-    "12", 
-    "13", 
-    "14", 
-    "15", 
-    "16", 
-    "17", 
-    "18", 
-    "19", 
-    "20", 
-    "21", 
-    "22"
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "19",
+    "20",
+    "21",
+    "22",
   ];
 
   return (
     <>
-      {category === "Anéis" && (  
+      {category === "Anéis" && (
         <p className="text-[12px] font-normal not-italic leading-normal">
           Tamanho
         </p>
       )}
 
       {category === "Anéis" && (
-        <select 
+        <select
           name="size"
           id="size"
-          onChange={handleSizeChange} 
+          onChange={handleSizeChange}
           className="w-full border border-gray-300 rounded-none p-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
         >
           <option value="" disabled selected>
@@ -76,22 +77,21 @@ function AddToCartButton({ seller, productID, category, eventParams }: Props) {
               {size}
             </option>
           ))}
-
         </select>
       )}
 
       {category === "Anéis" && (
         <Button
-          onAddItem={onAddItem} 
-          eventParams={eventParams} 
+          onAddItem={onAddItem}
+          eventParams={eventParams}
           buttonDisabled={!selectedSize}
         />
       )}
 
       {category !== "Anéis" && (
         <Button
-          onAddItem={onAddItem} 
-          eventParams={eventParams} 
+          onAddItem={onAddItem}
+          eventParams={eventParams}
           buttonDisabled={false}
         />
       )}
diff --git a/components/product/dryzun/ProductMain.tsx b/components/product/dryzun/ProductMain.tsx
index 5df66ed..db08181 100644
--- a/components/product/dryzun/ProductMain.tsx
+++ b/components/product/dryzun/ProductMain.tsx
@@ -183,7 +183,7 @@ function ProductMain({ page }: Props) {
 
                 {/* Sku Selector */}
                 <div class="mt-4 sm:mt-6">
-                 <ProductSelector product={product} />
+                  <ProductSelector product={product} />
                 </div>
               </div>
             </>