Add flash sale icon on product detail

2 files changed, 31 insertions, 8 deletions

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)}