From 948914e88fa6849ec3be1cd88113dc7febeda577 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 22 Aug 2024 14:16:57 +0700
Subject: update template detail product

---
 .../product-detail/components/Information.tsx      | 126 ++++++++++++++++-----
 1 file changed, 100 insertions(+), 26 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 75ae3c41..5d70e534 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -1,56 +1,130 @@
-import style from '../styles/information.module.css'
+import style from '../styles/information.module.css';
+import {
+  AutoComplete,
+  AutoCompleteInput,
+  AutoCompleteItem,
+  AutoCompleteList,
+} from '@choc-ui/chakra-autocomplete';
 
-import React from 'react'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
-import { useQuery } from 'react-query'
+import React, { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { useQuery } from 'react-query';
 
-import { IProductDetail } from '~/types/product'
-import { IProductVariantSLA } from '~/types/productVariant'
-import { createSlug } from '~/libs/slug'
-import { getVariantSLA } from '~/services/productVariant'
-import { formatToShortText } from '~/libs/formatNumber'
+import { IProductDetail } from '~/types/product';
+import { IProductVariantSLA } from '~/types/productVariant';
+import { createSlug } from '~/libs/slug';
+import { getVariantSLA } from '~/services/productVariant';
+import { formatToShortText } from '~/libs/formatNumber';
+import currencyFormat from '@/core/utils/currencyFormat';
+import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react';
+import { CheckIcon, ChevronDownIcon, FingerPrintIcon } from '@heroicons/react/24/outline';
+import { useProductDetail } from '../stores/useProductDetail';
 
-const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton))
+const Skeleton = dynamic(() =>
+  import('@chakra-ui/react').then((mod) => mod.Skeleton)
+);
 
 type Props = {
-  product: IProductDetail
-}
+  product: IProductDetail;
+};
 
 const Information = ({ product }: Props) => {
+  const { selectedVariant, setSelectedVariant, setSla, setActive, } = useProductDetail()
+  const variantOptions = product?.variants;
+
   const querySLA = useQuery<IProductVariantSLA>({
-    queryKey: ['variant-sla', product.variants[0]?.id],
-    queryFn: () => getVariantSLA(product.variants[0].id),
-    enabled: product.variant_total === 1
-  })
+    queryKey: ['variant-sla', selectedVariant?.id],
+    queryFn: () => getVariantSLA(selectedVariant?.id),
+    enabled: selectedVariant?.id === 1,
+  });
+  const sla = querySLA?.data;
+
+  useEffect(() => {
+    setSla(querySLA?.data);
+  }, [selectedVariant]);
 
-  const sla = querySLA?.data
+  const handleOnChange = (vals: any) => {
+    let code = vals.split(" ")[0];
+    let variant = variantOptions.find((item) => item.code === code);
+    setSelectedVariant(variant);
+  }
 
   return (
     <div className={style['wrapper']}>
+      <div className='realtive mb-5'>
+        <label className='form-label mb-2 text-lg'>Pilih Variant * : <span className='text-gray_r-9 text-sm'>{product?.variant_total} Variants</span>  </label>
+        <AutoComplete openOnFocus className='form-input' onChange={vals => handleOnChange(vals)}>
+          <InputGroup>
+            <AutoCompleteInput value={selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]} />
+            <InputRightElement>
+              <ChevronDownIcon className='h-6 w-6 text-gray-500' />
+            </InputRightElement>
+          </InputGroup>
+
+          <AutoCompleteList>
+            {variantOptions.map((option, cid) => (
+              <AutoCompleteItem
+                key={`option-${cid}`}
+                value={option.code + ' - ' + option.attributes[0]}
+                textTransform='capitalize'
+              >
+                <div className='flex gap-x-2 justify-between w-full'>
+                  <div className='text-small'>
+                    {option.code + ' - ' + option.attributes[0]}
+                  </div>
+                  <div className='grid grid-cols-3 items-start'>
+                    <div className='badge-solid-red text-xs'>
+                      {Math.floor(option?.price?.discount_percentage)}%
+                    </div>
+                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                      {currencyFormat(option?.price?.price)}
+                    </div>
+                    <div className='text-danger-500 font-semibold mb-2'>
+                      {currencyFormat(option?.price?.price_discount)}
+                    </div>
+                  </div>
+                </div>
+              </AutoCompleteItem>
+            ))}
+          </AutoCompleteList>
+        </AutoComplete>
+      </div>
       <div className={style['row']}>
-        <div className={style['label']}>SKU Number</div>
-        <div className={style['value']}>SKU-{product.id}</div>
+        <div className={style['label']}>Item Code</div>
+        <div className={style['value']}>{selectedVariant?.code}</div>
       </div>
       <div className={style['row']}>
         <div className={style['label']}>Manufacture</div>
         <div className={style['value']}>
           {!!product.manufacture.name ? (
             <Link
-              href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
+              href={createSlug(
+                '/shop/brands/',
+                product.manufacture.name,
+                product.manufacture.id.toString()
+              )}
               className='text-danger-500 hover:underline'
             >
               {product.manufacture.name}
             </Link>
-          ) : '-'}
+          ) : (
+            '-'
+          )}
         </div>
       </div>
       <div className={style['row']}>
         <div className={style['label']}>Terjual</div>
-        <div className={style['value']}>{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}</div>
+        <div className={style['value']}>
+          {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
+        </div>
+      </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Persiapan Barang</div>
+        <div className={style['value']}>{sla?.sla_date}</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Information
\ No newline at end of file
+export default Information;
-- 
cgit v1.2.3


From f8133c76306d9f70e01ac510c74dcfabe7f79b37 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Mon, 26 Aug 2024 10:47:28 +0700
Subject: new product template

---
 .../product-detail/components/Information.tsx      | 41 +++++++++++++++++-----
 1 file changed, 32 insertions(+), 9 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 5d70e534..c7f21d62 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -18,7 +18,11 @@ import { getVariantSLA } from '~/services/productVariant';
 import { formatToShortText } from '~/libs/formatNumber';
 import currencyFormat from '@/core/utils/currencyFormat';
 import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react';
-import { CheckIcon, ChevronDownIcon, FingerPrintIcon } from '@heroicons/react/24/outline';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  FingerPrintIcon,
+} from '@heroicons/react/24/outline';
 import { useProductDetail } from '../stores/useProductDetail';
 
 const Skeleton = dynamic(() =>
@@ -30,39 +34,52 @@ type Props = {
 };
 
 const Information = ({ product }: Props) => {
-  const { selectedVariant, setSelectedVariant, setSla, setActive, } = useProductDetail()
+  const { selectedVariant, setSelectedVariant, setSla, setActive } =
+    useProductDetail();
   const variantOptions = product?.variants;
 
   const querySLA = useQuery<IProductVariantSLA>({
     queryKey: ['variant-sla', selectedVariant?.id],
     queryFn: () => getVariantSLA(selectedVariant?.id),
-    enabled: selectedVariant?.id === 1,
+    refetchOnWindowFocus: false,
   });
   const sla = querySLA?.data;
+  console.log('sla', querySLA, selectedVariant);
 
   useEffect(() => {
     setSla(querySLA?.data);
   }, [selectedVariant]);
 
   const handleOnChange = (vals: any) => {
-    let code = vals.split(" ")[0];
+    let code = vals.split(' ')[0];
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
-  }
+  };
 
   return (
     <div className={style['wrapper']}>
       <div className='realtive mb-5'>
-        <label className='form-label mb-2 text-lg'>Pilih Variant * : <span className='text-gray_r-9 text-sm'>{product?.variant_total} Variants</span>  </label>
-        <AutoComplete openOnFocus className='form-input' onChange={vals => handleOnChange(vals)}>
+        <label className='form-label mb-2 text-lg'>
+          Pilih Variant * :{' '}
+          <span className='text-gray_r-9 text-sm'>
+            {product?.variant_total} Variants
+          </span>{' '}
+        </label>
+        <AutoComplete
+          openOnFocus
+          className='form-input'
+          onChange={(vals) => handleOnChange(vals)}
+        >
           <InputGroup>
-            <AutoCompleteInput value={selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]} />
+            <AutoCompleteInput placeholder={
+                selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
+              }/>
             <InputRightElement>
               <ChevronDownIcon className='h-6 w-6 text-gray-500' />
             </InputRightElement>
           </InputGroup>
 
-          <AutoCompleteList>
+          <AutoCompleteList >
             {variantOptions.map((option, cid) => (
               <AutoCompleteItem
                 key={`option-${cid}`}
@@ -113,6 +130,12 @@ const Information = ({ product }: Props) => {
           )}
         </div>
       </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Berat Barang</div>
+        <div className={style['value']}>
+          {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
+        </div>
+      </div>
       <div className={style['row']}>
         <div className={style['label']}>Terjual</div>
         <div className={style['value']}>
-- 
cgit v1.2.3


From 914729a0d6ba9a9dd32d308954642439fa88c1d2 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Mon, 9 Sep 2024 13:37:36 +0700
Subject: add manufacture logd

---
 .../product-detail/components/Information.tsx      | 40 ++++++++++++++--------
 1 file changed, 26 insertions(+), 14 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index c7f21d62..5df81dae 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -24,6 +24,7 @@ import {
   FingerPrintIcon,
 } from '@heroicons/react/24/outline';
 import { useProductDetail } from '../stores/useProductDetail';
+import Image from 'next/image';
 
 const Skeleton = dynamic(() =>
   import('@chakra-ui/react').then((mod) => mod.Skeleton)
@@ -34,20 +35,24 @@ type Props = {
 };
 
 const Information = ({ product }: Props) => {
-  const { selectedVariant, setSelectedVariant, setSla, setActive } =
+  const { selectedVariant, setSelectedVariant, setSla, setActive, sla } =
     useProductDetail();
   const variantOptions = product?.variants;
 
-  const querySLA = useQuery<IProductVariantSLA>({
-    queryKey: ['variant-sla', selectedVariant?.id],
-    queryFn: () => getVariantSLA(selectedVariant?.id),
-    refetchOnWindowFocus: false,
-  });
-  const sla = querySLA?.data;
-  console.log('sla', querySLA, selectedVariant);
+  // const querySLA = useQuery<IProductVariantSLA>({
+  //   queryKey: ['variant-sla', selectedVariant?.id],
+  //   queryFn: () => getVariantSLA(selectedVariant?.id),
+  //   enabled: !!selectedVariant?.id,
+  // });
+  // const sla = querySLA?.data;
+
+  const getsla = async () => {
+    const querySLA = await getVariantSLA(selectedVariant?.id);
+    setSla(querySLA);
+  };
 
   useEffect(() => {
-    setSla(querySLA?.data);
+    getsla();
   }, [selectedVariant]);
 
   const handleOnChange = (vals: any) => {
@@ -71,15 +76,17 @@ const Information = ({ product }: Props) => {
           onChange={(vals) => handleOnChange(vals)}
         >
           <InputGroup>
-            <AutoCompleteInput placeholder={
+            <AutoCompleteInput
+              placeholder={
                 selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
-              }/>
+              }
+            />
             <InputRightElement>
               <ChevronDownIcon className='h-6 w-6 text-gray-500' />
             </InputRightElement>
           </InputGroup>
 
-          <AutoCompleteList >
+          <AutoCompleteList>
             {variantOptions.map((option, cid) => (
               <AutoCompleteItem
                 key={`option-${cid}`}
@@ -107,6 +114,7 @@ const Information = ({ product }: Props) => {
           </AutoCompleteList>
         </AutoComplete>
       </div>
+
       <div className={style['row']}>
         <div className={style['label']}>Item Code</div>
         <div className={style['value']}>{selectedVariant?.code}</div>
@@ -121,9 +129,13 @@ const Information = ({ product }: Props) => {
                 product.manufacture.name,
                 product.manufacture.id.toString()
               )}
-              className='text-danger-500 hover:underline'
             >
-              {product.manufacture.name}
+              <Image
+                height={50}
+                width={100}
+                src={product.manufacture.logo}
+                alt=''
+              />
             </Link>
           ) : (
             '-'
-- 
cgit v1.2.3


From 1475593324319d1faf377f2d00a22a4b3caa3faa Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 12 Sep 2024 15:08:21 +0700
Subject: price action

---
 .../product-detail/components/Information.tsx      | 40 +++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 5df81dae..075ff8d1 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -25,6 +25,8 @@ import {
 } from '@heroicons/react/24/outline';
 import { useProductDetail } from '../stores/useProductDetail';
 import Image from 'next/image';
+import useDevice from '@/core/hooks/useDevice';
+import { optimizedAppearDataAttribute } from 'framer-motion';
 
 const Skeleton = dynamic(() =>
   import('@chakra-ui/react').then((mod) => mod.Skeleton)
@@ -37,6 +39,10 @@ type Props = {
 const Information = ({ product }: Props) => {
   const { selectedVariant, setSelectedVariant, setSla, setActive, sla } =
     useProductDetail();
+
+  const [inputValue, setInputValue] = useState<string | null>(
+    selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
+  );
   const variantOptions = product?.variants;
 
   // const querySLA = useQuery<IProductVariantSLA>({
@@ -59,12 +65,17 @@ const Information = ({ product }: Props) => {
     let code = vals.split(' ')[0];
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
+    setInputValue(variant?.code + ' - ' + variant?.attributes[0]);
+  };
+
+  const handleOnKeyUp = (e: any) => {
+    setInputValue(e.target.value);
   };
 
   return (
     <div className={style['wrapper']}>
       <div className='realtive mb-5'>
-        <label className='form-label mb-2 text-lg'>
+        <label className='form-label mb-2 text-lg text-red-600'>
           Pilih Variant * :{' '}
           <span className='text-gray_r-9 text-sm'>
             {product?.variant_total} Variants
@@ -77,9 +88,8 @@ const Information = ({ product }: Props) => {
         >
           <InputGroup>
             <AutoCompleteInput
-              placeholder={
-                selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
-              }
+              value={inputValue as string}
+              onChange={(e) => handleOnKeyUp(e)}
             />
             <InputRightElement>
               <ChevronDownIcon className='h-6 w-6 text-gray-500' />
@@ -97,13 +107,18 @@ const Information = ({ product }: Props) => {
                   <div className='text-small'>
                     {option.code + ' - ' + option.attributes[0]}
                   </div>
-                  <div className='grid grid-cols-3 items-start'>
-                    <div className='badge-solid-red text-xs'>
-                      {Math.floor(option?.price?.discount_percentage)}%
-                    </div>
-                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
-                      {currencyFormat(option?.price?.price)}
-                    </div>
+                  <div className='grid grid-cols-3 items-end justify-items-end'>
+                    {option?.price?.discount_percentage > 0 && (
+                      <>
+                        <div className='badge-solid-red text-xs'>
+                          {Math.floor(option?.price?.discount_percentage)}%
+                        </div>
+                        <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                          {currencyFormat(option?.price?.price)}
+                        </div>
+                      </>
+                    )}
+
                     <div className='text-danger-500 font-semibold mb-2'>
                       {currencyFormat(option?.price?.price_discount)}
                     </div>
@@ -134,7 +149,8 @@ const Information = ({ product }: Props) => {
                 height={50}
                 width={100}
                 src={product.manufacture.logo}
-                alt=''
+                alt={product.manufacture.name}
+                className='h-8 object-cover'
               />
             </Link>
           ) : (
-- 
cgit v1.2.3


From 9a3d52dc189f7a309951c60fd923c49e9fb9085a Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 26 Sep 2024 15:45:03 +0700
Subject: dertail product

---
 .../product-detail/components/Information.tsx      | 91 +++++++++++++++-------
 1 file changed, 65 insertions(+), 26 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 075ff8d1..8655517d 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -1,32 +1,24 @@
-import style from '../styles/information.module.css';
 import {
   AutoComplete,
   AutoCompleteInput,
   AutoCompleteItem,
   AutoCompleteList,
 } from '@choc-ui/chakra-autocomplete';
+import style from '../styles/information.module.css';
 
-import React, { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { useQuery } from 'react-query';
+import { useEffect, useRef, useState } from 'react';
 
-import { IProductDetail } from '~/types/product';
-import { IProductVariantSLA } from '~/types/productVariant';
+import currencyFormat from '@/core/utils/currencyFormat';
+import { InputGroup, InputRightElement } from '@chakra-ui/react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import Image from 'next/image';
+import { formatToShortText } from '~/libs/formatNumber';
 import { createSlug } from '~/libs/slug';
 import { getVariantSLA } from '~/services/productVariant';
-import { formatToShortText } from '~/libs/formatNumber';
-import currencyFormat from '@/core/utils/currencyFormat';
-import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react';
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  FingerPrintIcon,
-} from '@heroicons/react/24/outline';
+import { IProductDetail } from '~/types/product';
 import { useProductDetail } from '../stores/useProductDetail';
-import Image from 'next/image';
-import useDevice from '@/core/hooks/useDevice';
-import { optimizedAppearDataAttribute } from 'framer-motion';
 
 const Skeleton = dynamic(() =>
   import('@chakra-ui/react').then((mod) => mod.Skeleton)
@@ -43,7 +35,13 @@ const Information = ({ product }: Props) => {
   const [inputValue, setInputValue] = useState<string | null>(
     selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
   );
-  const variantOptions = product?.variants;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [variantOptions, setVariantOptions] = useState<any[]>(
+    product?.variants
+  );
+  // let variantOptions = product?.variants;
 
   // const querySLA = useQuery<IProductVariantSLA>({
   //   queryKey: ['variant-sla', selectedVariant?.id],
@@ -59,13 +57,29 @@ const Information = ({ product }: Props) => {
 
   useEffect(() => {
     getsla();
+    setInputValue(
+      selectedVariant?.code +
+        (selectedVariant?.attributes[0]
+          ? ' - ' + selectedVariant?.attributes[0]
+          : '')
+    );
   }, [selectedVariant]);
 
   const handleOnChange = (vals: any) => {
     let code = vals.split(' ')[0];
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
-    setInputValue(variant?.code + ' - ' + variant?.attributes[0]);
+    setInputValue(
+      variant?.code +
+        (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
+    );
+    if (variant) {
+      const filteredOptions = product?.variants.filter(
+        (item) => item !== variant
+      );
+      const newOptions = [variant, ...filteredOptions];
+      setVariantOptions(newOptions);
+    }
   };
 
   const handleOnKeyUp = (e: any) => {
@@ -88,11 +102,15 @@ const Information = ({ product }: Props) => {
         >
           <InputGroup>
             <AutoCompleteInput
+              ref={inputRef}
               value={inputValue as string}
               onChange={(e) => handleOnKeyUp(e)}
             />
             <InputRightElement>
-              <ChevronDownIcon className='h-6 w-6 text-gray-500' />
+              <ChevronDownIcon
+                className='h-6 w-6 text-gray-500'
+                onClick={() => inputRef?.current?.focus()}
+              />
             </InputRightElement>
           </InputGroup>
 
@@ -100,26 +118,47 @@ const Information = ({ product }: Props) => {
             {variantOptions.map((option, cid) => (
               <AutoCompleteItem
                 key={`option-${cid}`}
-                value={option.code + ' - ' + option.attributes[0]}
+                value={
+                  option.code +
+                  (option?.attributes[0] ? ' - ' + option?.attributes[0] : '')
+                }
+                _selected={
+                  option.id === selectedVariant?.id
+                    ? {
+                        bg: 'gray.300',
+                      }
+                    : undefined
+                }
                 textTransform='capitalize'
               >
-                <div className='flex gap-x-2 justify-between w-full'>
+                <div
+                  key={cid}
+                  className='flex gap-x-2 w-full justify-between px-3 items-center p-2'
+                >
                   <div className='text-small'>
-                    {option.code + ' - ' + option.attributes[0]}
+                    {option.code +
+                      (option?.attributes[0]
+                        ? ' - ' + option?.attributes[0]
+                        : '')}
                   </div>
-                  <div className='grid grid-cols-3 items-end justify-items-end'>
+                  <div
+                    className={
+                      option?.price?.discount_percentage
+                        ? 'flex gap-x-4 items-center justify-between'
+                        : ''
+                    }
+                  >
                     {option?.price?.discount_percentage > 0 && (
                       <>
                         <div className='badge-solid-red text-xs'>
                           {Math.floor(option?.price?.discount_percentage)}%
                         </div>
-                        <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                        <div className='min-w-16 sm:min-w-24 text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                           {currencyFormat(option?.price?.price)}
                         </div>
                       </>
                     )}
-
-                    <div className='text-danger-500 font-semibold mb-2'>
+                    <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'>
                       {currencyFormat(option?.price?.price_discount)}
                     </div>
                   </div>
-- 
cgit v1.2.3

