<iman> update add to cart pop up

2 files changed, 111 insertions, 4 deletions

diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index c73d7b36..bebc793f 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -1,4 +1,5 @@
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import style from '../styles/price-action.module.css';
 import { Button, Link, useToast } from '@chakra-ui/react'
 import product from 'next-seo/lib/jsonld/product'
 import { useRouter } from 'next/router'
@@ -11,6 +12,9 @@ import ProductSimilar from '../../../../src/lib/product/components/ProductSimila
 import { IProductDetail } from '~/types/product';
 import ImageNext from 'next/image';
 import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { createSlug } from '~/libs/slug'
+import formatCurrency from '~/libs/formatCurrency'
+import { useProductDetail } from '../stores/useProductDetail';
 
 type Props = {
   variantId: number | null,
@@ -32,6 +36,10 @@ const AddToCart = ({
     isClosable: true
   })
 
+  const {
+    askAdminUrl,
+  } = useProductDetail();
+
   const [product, setProducts] = useState(products);
   
   const {setRefreshCart} = useProductCartContext()
@@ -118,8 +126,55 @@ const AddToCart = ({
                   height={80}
                 />
             </div>
-            <div className='ml-3 flex flex-1 items-center font-normal'>
-              {product.name}
+            <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
+              {!!product.manufacture.name ? (
+                  <Link
+                  href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
+                  className=' hover:underline'
+                  color={"red"}
+                  >
+                    {product.manufacture.name}
+                  </Link>
+                ) : '-'}
+              <p className='text-ellipsis overflow-hidden'>
+                {product.name}
+                </p>
+                <p>
+                  {product.code}
+                </p>
+                {!!product.lowest_price && product.lowest_price.price > 0 && (
+                    <>
+                      <div className='flex items-end gap-x-2'>
+                        {product.lowest_price.discount_percentage > 0 && (
+                          <>
+                            <div className='badge-solid-red'>
+                              {Math.floor(product.lowest_price.discount_percentage)}%
+                            </div>
+                            <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                              Rp {formatCurrency(product.lowest_price.price || 0)}
+                            </div>
+                          </>
+                        )}
+                        <div className='text-danger-500 font-semibold'>
+                          Rp {formatCurrency(product.lowest_price.price_discount || 0)}
+                        </div>
+                      </div>
+                    </>
+                  )}
+
+                  {!!product.lowest_price && product.lowest_price.price === 0 && (
+                    <span>
+                      Hubungi kami untuk dapatkan harga terbaik,{' '}
+                      <Link
+                        href={askAdminUrl}
+                        target='_blank'
+                        className='font-medium underline'
+                        color={'red'}
+                      >
+                        klik disini
+                      </Link>
+                    </span>
+                  )}
             </div>
             <div className='ml-3 flex items-center font-normal'>
               <Link
diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 10904f90..8567dad8 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -16,6 +16,9 @@ import LazyLoad from 'react-lazy-load'
 import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
 import { IProductDetail } from '~/types/product';
 import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { createSlug } from '~/libs/slug'
+import formatCurrency from '~/libs/formatCurrency'
+import { useProductDetail } from '../../product-detail/stores/useProductDetail';
 type Props = {
   promotion: IPromotion
   product: IProductDetail
@@ -24,10 +27,12 @@ type Props = {
 type Status = 'idle' | 'loading' | 'success'
 
 const ProductPromoAddToCart = ({product, promotion }: Props) => {
+  
   const auth = getAuth()
   const toast = useToast()
   const router = useRouter()
 
+  const {askAdminUrl} = useProductDetail();
   const [status, setStatus] = useState<Status>('idle')
   const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
     useProductCartContext()
@@ -126,8 +131,55 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => {
                   height={80}
                 />
             </div>
-            <div className='ml-3 flex flex-1 items-center font-normal'>
-              {product.name}
+            <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
+              {!!product.manufacture.name ? (
+                  <Link
+                  href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
+                  className=' hover:underline'
+                  color={"red"}
+                  >
+                    {product.manufacture.name}
+                  </Link>
+                ) : '-'}
+              <p className='text-ellipsis overflow-hidden'>
+                {product.name}
+                </p>
+                <p>
+                  {product.code}
+                </p>
+                {!!product.lowest_price && product.lowest_price.price > 0 && (
+                    <>
+                      <div className='flex items-end gap-x-2'>
+                        {product.lowest_price.discount_percentage > 0 && (
+                          <>
+                            <div className='badge-solid-red'>
+                              {Math.floor(product.lowest_price.discount_percentage)}%
+                            </div>
+                            <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                              Rp {formatCurrency(product.lowest_price.price || 0)}
+                            </div>
+                          </>
+                        )}
+                        <div className='text-danger-500 font-semibold'>
+                          Rp {formatCurrency(product.lowest_price.price_discount || 0)}
+                        </div>
+                      </div>
+                    </>
+                  )}
+
+                  {!!product.lowest_price && product.lowest_price.price === 0 && (
+                    <span>
+                      Hubungi kami untuk dapatkan harga terbaik,{' '}
+                      <Link
+                        href={askAdminUrl}
+                        target='_blank'
+                        className='font-medium underline'
+                        color={'red'}
+                      >
+                        klik disini
+                      </Link>
+                    </span>
+                  )}
             </div>
             <div className='ml-3 flex items-center font-normal'>
               <Link