Merged in CR/Pricelist (pull request #80)

CR/Pricelist

1 files changed, 85 insertions, 87 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 6da289bc..0df60673 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -15,7 +15,6 @@ import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import odooApi from '@/core/api/odooApi'
-import { Button, Spinner } from 'flowbite-react'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
 import ImageNext from 'next/image'
@@ -23,6 +22,8 @@ import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import { LazyLoadComponent } from 'react-lazy-load-image-component'
 import ColumnsSLA from './ColumnsSLA'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
+import { Info } from 'lucide-react'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -40,7 +41,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
   const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
 
-  const {setRefreshCart , refreshCart} = useProductCartContext()
+  const { setRefreshCart, refreshCart } = useProductCartContext()
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -256,16 +257,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
               <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
               <div className='mt-10'>
                 <div className='flex p-3'>
-                  <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
-                  <div className='w-3/4'>SKU-{product.id}</div>
+                  <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div>
+                  <div className='w-8/12'>SKU-{product.id}</div>
                 </div>
                 <div className='flex p-3 bg-gray_r-4'>
-                  <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
-                  <div className='w-3/4'>{product.code || '-'}</div>
+                  <div className='w-4/12 text-gray_r-12/70'>Part Number</div>
+                  <div className='w-8/12'>{product.code || '-'}</div>
                 </div>
                 <div className='flex p-3'>
-                  <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
-                  <div className='w-3/4'>
+                  <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
+                  <div className='w-8/12'>
                     {product.manufacture?.name ? (
                       <Link
                         href={createSlug(
@@ -282,9 +283,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                   </div>
                 </div>
                 <div className='flex p-3 items-center bg-gray_r-4'>
-                  <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div>
-                  <div className='w-3/4'>
-                    {product.variants.length > 1 ? (
+                  <div className='w-4/12 text-gray_r-12/70'>Persiapan Barang</div>
+                  <div className='w-8/12'>
+                    {product.variants.length > 1 && (
                       <button
                         type='button'
                         onClick={goToVariantSection}
@@ -292,62 +293,32 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                       >
                         <span className='text-red-600 text-sm'>Lihat Selengkapnya</span>
                       </button>
-                    ) : product.variants[0].sla ? (
-                      product.variants[0].sla?.slaDate != '-' ? (
-                        <button
-                          type='button'
-                          title={`Masa Persiapan Barang ${product.variants[0].sla?.slaDate}`}
-                          className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${
-                            product.variants[0].sla?.slaDate === 'indent'
-                              ? 'bg-indigo-900'
-                              : 'btn-light'
-                          }`}
-                        >
-                          <div
-                            className={`flex-1 text-caption-1  ${
-                              product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : ''
-                            }`}
+                    )}
+
+                    {product.variants.length === 1 && (
+                      <>
+                        {!product.variants[0]?.sla && <Skeleton width='20%' height='16px' />}
+                        {product.variants[0]?.sla && (
+                          <Tooltip
+                            placement='top'
+                            label={`Masa Persiapan Barang ${product.variants[0]?.sla?.slaDate}`}
                           >
-                            {product.variants[0].sla?.slaDate}
-                          </div>
-                          <div className='flex-end'>
-                            <svg
-                              aria-hidden='true'
-                              fill='none'
-                              stroke='currentColor'
-                              stroke-width='1.5'
-                              className={`w-7 h-7 ${
-                                product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : ''
-                              }`}
-                            >
-                              <path
-                                d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                                stroke-linecap='round'
-                                stroke-linejoin='round'
-                              ></path>
-                            </svg>
-                          </div>
-                        </button>
-                      ) : (
-                        '-'
-                      )
-                    ) : (
-                      <Button color='gray'>
-                        <Spinner aria-label='Alternate spinner button example' />
-                        <span className='pl-3'>Loading...</span>
-                      </Button>
+                            <Box className='w-fit flex items-center gap-x-2'>
+                              {product.variants[0]?.sla?.slaDate}
+                              <Info size={16} />
+                            </Box>
+                          </Tooltip>
+                        )}
+                      </>
                     )}
                   </div>
                 </div>
+
                 {product.variants.length === 1 && (
                   <div className='flex p-3 '>
-                    <div className='w-1/4 text-gray_r-12/70'>Stock</div>
-                    <div className='w-3/4'>
-                      {isLoadingSLA && (
-                        <div className=''>
-                          <Spinner aria-label='Center-aligned spinner example' />
-                        </div>
-                      )}
+                    <div className='w-4/12 text-gray_r-12/70'>Stock</div>
+                    <div className='w-8/12'>
+                      {!product.variants[0]?.sla && <Skeleton width='10%' height='16px' />}
                       {product?.variants[0].sla?.qty > 0 && (
                         <span>{product?.variants[0].sla?.qty}</span>
                       )}
@@ -366,9 +337,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                     </div>
                   </div>
                 )}
+
                 <div className={`flex p-3 ${product.variants.length > 1 ? '' : 'bg-gray_r-4'} `}>
-                  <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
-                  <div className='w-3/4'>
+                  <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div>
+                  <div className='w-8/12'>
                     {product?.weight > 0 && <span>{product?.weight} KG</span>}
                     {product?.weight == 0 && (
                       <a
@@ -441,13 +413,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
 
-            {lowestPrice?.discountPercentage > 0 && (
+            {/* {lowestPrice?.discountPercentage > 0 && (
               <div className='flex gap-x-1 items-center mt-2'>
                 <div className='badge-solid-red text-caption-1'>
                   {lowestPrice?.discountPercentage}%
                 </div>
-                <div className='text-gray_r-11 line-through text-caption-1'>
-                  {currencyFormat(lowestPrice?.price)}
+                <div className='text-gray_r-9 text-caption-1'>
+                  Include PPN {currencyFormat(lowestPrice?.price * process.env.NEXT_PUBLIC_PPN)}
                 </div>
                 {product.flashSale.remainingTime > 0 && (
                   <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
@@ -464,28 +436,54 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                   </div>
                 )}
               </div>
+            )} */}
+
+            {product?.flashSale?.remainingTime > 0 ? (
+              <>
+                <div className='flex gap-x-1 items-center mt-2'>
+                  <div className='badge-solid-red text-caption-1'>
+                    {lowestPrice?.discountPercentage}%
+                  </div>
+                  <div className='text-gray_r-9 line-through text-caption-1'>
+                    {currencyFormat(lowestPrice?.price)}
+                  </div>
+                  <div className='text-danger-500 font-semibold text-xl'>
+                    {currencyFormat(lowestPrice?.priceDiscount)}
+                  </div>
+                </div>
+                <div className='text-gray_r-9 text-base font-normal mt-1'>
+                  Termasuk PPN: {currencyFormat(lowestPrice?.priceDiscount * process.env.NEXT_PUBLIC_PPN)}
+                </div>
+              </>
+            ) : (
+              <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
+                {lowestPrice?.price > 0 ? (
+                  <>
+                    {currencyFormat(lowestPrice?.price)}
+                    <div className='text-gray_r-9 text-base font-normal mt-1'>
+                      Termasuk PPN: {currencyFormat(lowestPrice?.price * process.env.NEXT_PUBLIC_PPN)}
+                    </div>
+                  </>
+                ) : (
+                  <span className='text-gray_r-12/90 font-normal text-h-sm'>
+                    Hubungi kami untuk dapatkan harga terbaik,&nbsp;
+                    <a
+                      href={whatsappUrl('product', {
+                        name: product.name,
+                        manufacture: product.manufacture?.name,
+                        url: createSlug('/shop/product/', product.name, product.id, true)
+                      })}
+                      className='text-danger-500 underline'
+                      rel='noopener noreferrer'
+                      target='_blank'
+                    >
+                      klik disini
+                    </a>
+                  </span>
+                )}
+              </h3>
             )}
-            <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
-              {lowestPrice?.priceDiscount > 0 ? (
-                currencyFormat(lowestPrice?.priceDiscount)
-              ) : (
-                <span className='text-gray_r-12/90 font-normal text-h-sm'>
-                  Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                  <a
-                    href={whatsappUrl('product', {
-                      name: product.name,
-                      manufacture: product.manufacture?.name,
-                      url: createSlug('/shop/product/', product.name, product.id, true)
-                    })}
-                    className='text-danger-500 underline'
-                    rel='noopener noreferrer'
-                    target='_blank'
-                  >
-                    klik disini
-                  </a>
-                </span>
-              )}
-            </h3>
+
             {product.variants.length > 1 ? (
               <button
                 type='button'