diff options
Diffstat (limited to 'src-migrate/modules/product-promo/components')
5 files changed, 16 insertions, 132 deletions
diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 3d0955e3..87017c14 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -9,39 +9,19 @@ import { IPromotion } from '~/types/promotion' import DesktopView from '../../../../src/core/components/views/DesktopView'; import MobileView from '../../../../src/core/components/views/MobileView'; -import BottomPopup from '@/core/components/elements/Popup/BottomPopup' -import ImageNext from 'next/image'; -import Link from 'next/link' -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 } type Status = 'idle' | 'loading' | 'success' -const ProductPromoAddToCart = ({product, promotion }: Props) => { - +const ProductPromoAddToCart = ({ 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() - - const productSimilarQuery = [ - promotion?.name, - `fq=-product_id_i:${promotion.products[0].product_id}`, - ].join('&'); - const [addCartAlert, setAddCartAlert] = useState(false); const handleButton = async () => { if (typeof auth !== 'object') { @@ -62,8 +42,7 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { qtyAppend: true }) setStatus('idle') - setRefreshCart(true); - setAddCartAlert(true); + toast({ title: 'Tambah ke keranjang', description: 'Berhasil menambahkan barang ke keranjang belanja', @@ -113,92 +92,6 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { {status === 'success' && <span>Berhasil</span>} {status !== 'success' && <span>Keranjang</span>} </Button> - <BottomPopup - className='!container' - title='Berhasil Ditambahkan' - active={addCartAlert} - close={() => { - setAddCartAlert(false); - }} - > - <div className='flex mt-4'> - <div className='w-[10%]'> - <ImageNext - src={product.image} - alt={product.name} - className='h-32 object-contain object-center w-full border border-gray_r-4' - width={80} - height={80} - /> - </div> - <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 - href='/shop/cart' - className='flex-1 py-2 text-gray_r-12 btn-yellow' - > - Lihat Keranjang - </Link> - </div> - </div> - <div className='mt-8 mb-4'> - <div className='text-h-sm font-semibold mb-6'> - Kamu Mungkin Juga Suka - </div> - <LazyLoad> - <ProductSimilar query={productSimilarQuery} /> - </LazyLoad> - </div> - </BottomPopup> </DesktopView> </div> ) diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx index 5c323276..728d23ca 100644 --- a/src-migrate/modules/product-promo/components/Card.tsx +++ b/src-migrate/modules/product-promo/components/Card.tsx @@ -15,16 +15,16 @@ import clsxm from '~/libs/clsxm' import ProductPromoItem from './Item' import ProductPromoAddToCart from "./AddToCart" import ProductPromoCardCountdown from "./CardCountdown" -import { IProductDetail } from '~/types/product'; + import MobileView from '../../../../src/core/components/views/MobileView'; import DesktopView from '../../../../src/core/components/views/DesktopView'; type Props = { promotion: IPromotion - product: IProductDetail + } -const ProductPromoCard = ({product, promotion}: Props) => { +const ProductPromoCard = ({ promotion}: Props) => { const [products, setProducts] = useState<IProductVariantPromo[]>([]) const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([]) const [error, setError] = useState<string | null>(null) @@ -132,7 +132,7 @@ const ProductPromoCard = ({product, promotion}: Props) => { </div> <div> - <ProductPromoAddToCart product={product} promotion={promotion} /> + <ProductPromoAddToCart promotion={promotion} /> </div> </div> @@ -189,7 +189,7 @@ const ProductPromoCard = ({product, promotion}: Props) => { </div> </div> <div> - <ProductPromoAddToCart product={product} promotion={promotion} /> + <ProductPromoAddToCart promotion={promotion} /> </div> </div> diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx index 1722b9df..0de672c2 100644 --- a/src-migrate/modules/product-promo/components/Modal.tsx +++ b/src-migrate/modules/product-promo/components/Modal.tsx @@ -3,12 +3,8 @@ import { Modal } from "~/components/ui/modal" import { useModalStore } from '../stores/useModalStore' import ProductPromoCategoryTab from './CategoryTab' import ProductPromoModalContent from './ModalContent' -import { IProductDetail } from '~/types/product'; -type Props = { - product: IProductDetail -} -const ProductPromoModal = ({product}:Props) => { +const ProductPromoModal = () => { const { active, closeModal } = useModalStore() return ( @@ -21,7 +17,7 @@ const ProductPromoModal = ({product}:Props) => { <div className='h-4' /> - <ProductPromoModalContent product={product} /> + <ProductPromoModalContent /> </Modal> ) } diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx index 256ef61a..ab5129f8 100644 --- a/src-migrate/modules/product-promo/components/ModalContent.tsx +++ b/src-migrate/modules/product-promo/components/ModalContent.tsx @@ -6,11 +6,7 @@ import { getVariantPromoByCategory } from "~/services/productVariant" import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from "./Card" -import { IProductDetail } from '~/types/product'; -type Props = { - product: IProductDetail -} -const ProductPromoModalContent = ({product}:Props) => { +const ProductPromoModalContent = () => { const { activeTab, variantId } = useModalStore() const promotionsQuery = useQuery( @@ -28,7 +24,7 @@ const ProductPromoModalContent = ({product}:Props) => { <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[70vh] max-h-[70vh]'> <div className="grid grid-cols-1 gap-y-6 pb-6"> {promotions?.data.map((promo) => ( - <ProductPromoCard key={promo.id} promotion={promo} product={product} /> + <ProductPromoCard key={promo.id} promotion={promo} /> ))} {promotions?.data.length === 0 && ( <div className="py-10 rounded-lg h-fit text-center text-body-1 font-semibold text-gray-800 bg-gray-200">Belum ada promo pada kategori ini</div> diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index e1719998..4e8a7dd5 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -9,14 +9,12 @@ import { IPromotion } from '~/types/promotion' import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from './Card' import ProductPromoModal from "./Modal" -import { IProductDetail } from '~/types/product'; type Props = { productId: number; - product: IProductDetail; } -const ProductPromoSection = ({ product, productId }: Props) => { +const ProductPromoSection = ({ productId }: Props) => { const promotionsQuery = useQuery({ queryKey: [`promotions.highlight`, productId], queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } @@ -25,13 +23,14 @@ const ProductPromoSection = ({ product, productId }: Props) => { const promotions = promotionsQuery.data const { openModal } = useModalStore() + return ( <SmoothRender isLoaded={(promotions?.data && promotions?.data.length > 0) || false} height='450px' duration='700ms' > - <ProductPromoModal product={product}/> + <ProductPromoModal /> {promotions?.data && promotions?.data.length > 0 && ( <div className={style.titleWrapper}> @@ -51,7 +50,7 @@ const ProductPromoSection = ({ product, productId }: Props) => { > {promotions?.data.map((promotion) => ( <div key={promotion.id} className="min-w-[400px] max-w-[400px]"> - <ProductPromoCard product={product} promotion={promotion} /> + <ProductPromoCard promotion={promotion} /> </div> ))} </Skeleton> |