From 4c349516efaee6151456d18162da797e6bd33434 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 8 Sep 2023 15:32:37 +0700
Subject: Add flash sale icon on product detail

---
 .../product/components/Product/ProductDesktop.jsx  | 13 +++++++++--
 .../product/components/Product/ProductMobile.jsx   | 26 +++++++++++++++++-----
 src/styles/globals.css                             | 20 ++++++++++++++++-
 3 files changed, 50 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 3b9296a8..618c35f5 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -197,7 +197,11 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                 {product?.flashSale?.remainingTime > 0 && (
                   <div className={`absolute bottom-0 w-full`}>
                     <div className='absolute bottom-0 w-full h-full'>
-                      <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} />
+                      <ImageNext
+                        src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'}
+                        width={1000}
+                        height={100}
+                      />
                     </div>
                     <div className='relative'>
                       <div className='flex gap-x-2 items-center p-2'>
@@ -553,7 +557,12 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                 <tbody>
                   {product.variants.map((variant, index) => (
                     <tr key={variant.id}>
-                      <td>{variant.code}</td>
+                      <td className='flex items-center justify-center gap-x-1'>
+                        {variant.isFlashsale && (
+                          <span className='blink-color-flash-sale'>&#128498;</span>
+                        )}
+                        {variant.code}
+                      </td>
                       <td>{variant.attributes.join(', ') || '-'}</td>
                       <td>
                         {isLoadingSLA ? (
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index d25d0861..56f20aac 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -62,12 +62,25 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     hasProgram: false
   })
 
-  const variantOptions = product.variants?.map((variant) => ({
-    value: variant.id,
-    label:
-      (variant.code ? `[${variant.code}] ` : '') +
-      (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name)
-  }))
+  const variantOptions = product.variants?.map((variant) => {
+    let label = []
+    if (variant.isFlashsale) {
+      label.push("<span class='blink-color-flash-sale'>&#128498;</span>")
+    }
+    if (variant.code) {
+      label.push(`[${variant.code}]`)
+    }
+    if (variant.attributes.length > 0) {
+      label.push(variant.attributes.join(', '))
+    } else {
+      label.push(product.name)
+    }
+
+    return {
+      value: variant.id,
+      label: label.join(' ')
+    }
+  })
 
   useEffect(() => {
     const fetchData = async () => {
@@ -279,6 +292,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             name='variant'
             classNamePrefix='form-select'
             options={variantOptions}
+            formatOptionLabel={({ label }) => <div dangerouslySetInnerHTML={{ __html: label }} />}
             className='mt-2'
             value={selectedVariant}
             onChange={(option) => setSelectedVariant(option)}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index af9f9bea..06ae7ca2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -638,4 +638,22 @@ button {
     30%, 50%, 70% { transform: translateX(-10px); }
     40%, 60% { transform: translateX(10px); }
     100% { transform: translateX(0); }
-  }
+}
+
+.blink-color-flash-sale {
+    @apply text-body-1 md:text-title-sm;
+    transform: rotateY(180deg) rotateZ(120deg);
+    animation-name: blink-color-flash-sale;
+    animation-duration: 300ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes blink-color-flash-sale {
+    from {
+        @apply text-danger-500;
+    }
+    to {
+        @apply text-warning-500;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3