diff options
Diffstat (limited to 'src-migrate')
| -rw-r--r-- | src-migrate/modules/product-detail/components/AddToCart.tsx | 59 | ||||
| -rw-r--r-- | src-migrate/modules/product-promo/components/AddToCart.tsx | 56 |
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 |