Add flash sale icon on product detail

1 files changed, 20 insertions, 6 deletions

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