diff options
Diffstat (limited to 'src-migrate')
10 files changed, 159 insertions, 25 deletions
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 097db98a..320b7234 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -1,19 +1,28 @@ -import { Button, useToast } from '@chakra-ui/react' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { Button, Link, useToast } from '@chakra-ui/react' +import product from 'next-seo/lib/jsonld/product' import { useRouter } from 'next/router' - +import { useState } from 'react' +import Image from '~/components/ui/image' import { getAuth } from '~/libs/auth' import { upsertUserCart } from '~/services/cart' - +import LazyLoad from 'react-lazy-load'; +import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; +import { IProductDetail } from '~/types/product'; +import ImageNext from 'next/image'; +import { useProductCartContext } from '@/contexts/ProductCartContext' type Props = { variantId: number | null, quantity?: number; source?: 'buy' | 'add_to_cart'; + products : IProductDetail } const AddToCart = ({ variantId, quantity = 1, - source = 'add_to_cart' + source = 'add_to_cart', + products }: Props) => { const auth = getAuth() const router = useRouter() @@ -22,6 +31,18 @@ const AddToCart = ({ isClosable: true }) + const [product, setProducts] = useState(products); + + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() + + const productSimilarQuery = [ + product?.name, + `fq=-product_id_i:${product.id}`, + `fq=-manufacture_id_i:${product.manufacture?.id || 0}`, + ].join('&'); + const [addCartAlert, setAddCartAlert] = useState(false); + const handleClick = async () => { if (typeof auth !== 'object') { const currentUrl = encodeURIComponent(router.asPath) @@ -35,6 +56,9 @@ const AddToCart = ({ typeof auth !== 'object' ) return; + setRefreshCart(true); + setAddCartAlert(true); + toast.promise( upsertUserCart({ userId: auth.id, @@ -69,9 +93,50 @@ const AddToCart = ({ } return ( - <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'> - {btnConfig[source].text} - </Button> + <div className='w-full'> + <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'> + {btnConfig[source].text} + </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-center font-normal'> + {product.name} + </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> + </div> ) } diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 81271f6e..9021264e 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -97,12 +97,14 @@ const PriceAction = ({ product }: Props) => { className={style['quantity-input']} /> <AddToCart + products={product} variantId={activeVariantId} quantity={Number(quantityInput)} /> {!isApproval && ( <AddToCart source='buy' + products={product} variantId={activeVariantId} quantity={Number(quantityInput)} /> diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index fad35a7d..e4555913 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -129,7 +129,7 @@ const ProductDetail = ({ product }: Props) => { )} <div className='h-4 md:h-10' /> - {!!activeVariantId && !isApproval && <ProductPromoSection productId={activeVariantId} />} + {!!activeVariantId && !isApproval && <ProductPromoSection product={product} productId={activeVariantId} />} <div className={style['section-card']}> <h2 className={style['heading']}> diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 87017c14..10904f90 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -9,19 +9,34 @@ 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' type Props = { promotion: IPromotion + product: IProductDetail } type Status = 'idle' | 'loading' | 'success' -const ProductPromoAddToCart = ({ promotion }: Props) => { +const ProductPromoAddToCart = ({product, promotion }: Props) => { const auth = getAuth() const toast = useToast() const router = useRouter() 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') { @@ -42,7 +57,8 @@ const ProductPromoAddToCart = ({ promotion }: Props) => { qtyAppend: true }) setStatus('idle') - + setRefreshCart(true); + setAddCartAlert(true); toast({ title: 'Tambah ke keranjang', description: 'Berhasil menambahkan barang ke keranjang belanja', @@ -92,6 +108,45 @@ const ProductPromoAddToCart = ({ 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-center font-normal'> + {product.name} + </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 728d23ca..5c323276 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 = ({ promotion}: Props) => { +const ProductPromoCard = ({product, 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 = ({ promotion}: Props) => { </div> <div> - <ProductPromoAddToCart promotion={promotion} /> + <ProductPromoAddToCart product={product} promotion={promotion} /> </div> </div> @@ -189,7 +189,7 @@ const ProductPromoCard = ({ promotion}: Props) => { </div> </div> <div> - <ProductPromoAddToCart promotion={promotion} /> + <ProductPromoAddToCart product={product} 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 0de672c2..1722b9df 100644 --- a/src-migrate/modules/product-promo/components/Modal.tsx +++ b/src-migrate/modules/product-promo/components/Modal.tsx @@ -3,8 +3,12 @@ import { Modal } from "~/components/ui/modal" import { useModalStore } from '../stores/useModalStore' import ProductPromoCategoryTab from './CategoryTab' import ProductPromoModalContent from './ModalContent' +import { IProductDetail } from '~/types/product'; -const ProductPromoModal = () => { +type Props = { + product: IProductDetail +} +const ProductPromoModal = ({product}:Props) => { const { active, closeModal } = useModalStore() return ( @@ -17,7 +21,7 @@ const ProductPromoModal = () => { <div className='h-4' /> - <ProductPromoModalContent /> + <ProductPromoModalContent product={product} /> </Modal> ) } diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx index ab5129f8..256ef61a 100644 --- a/src-migrate/modules/product-promo/components/ModalContent.tsx +++ b/src-migrate/modules/product-promo/components/ModalContent.tsx @@ -6,7 +6,11 @@ import { getVariantPromoByCategory } from "~/services/productVariant" import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from "./Card" -const ProductPromoModalContent = () => { +import { IProductDetail } from '~/types/product'; +type Props = { + product: IProductDetail +} +const ProductPromoModalContent = ({product}:Props) => { const { activeTab, variantId } = useModalStore() const promotionsQuery = useQuery( @@ -24,7 +28,7 @@ const ProductPromoModalContent = () => { <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} /> + <ProductPromoCard key={promo.id} promotion={promo} product={product} /> ))} {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 4e8a7dd5..2c94c2bb 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -9,12 +9,14 @@ 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 = ({ productId }: Props) => { +const ProductPromoSection = ({ product, 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[] } @@ -30,7 +32,7 @@ const ProductPromoSection = ({ productId }: Props) => { height='450px' duration='700ms' > - <ProductPromoModal /> + <ProductPromoModal product={product}/> {promotions?.data && promotions?.data.length > 0 && ( <div className={style.titleWrapper}> @@ -50,7 +52,7 @@ const ProductPromoSection = ({ productId }: Props) => { > {promotions?.data.map((promotion) => ( <div key={promotion.id} className="min-w-[400px] max-w-[400px]"> - <ProductPromoCard promotion={promotion} /> + <ProductPromoCard product={product} promotion={promotion} /> </div> ))} </Skeleton> diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx index 42725034..4d0db3c2 100644 --- a/src-migrate/modules/promo/components/PromoList.tsx +++ b/src-migrate/modules/promo/components/PromoList.tsx @@ -114,7 +114,7 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => { {promoData?.map((promotion: IPromotion) => ( <SwiperSlide key={promotion.id}> <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full"> - <ProductPromoCard promotion={promotion} /> + <ProductPromoCard product={promoItems} promotion={promotion} /> </div> </SwiperSlide> ))} @@ -122,7 +122,7 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => { )} {isMobile && (promoData?.map((promotion: IPromotion) => ( <div key={promotion.id} className="min-w-[400px] max-w-[400px]"> - <ProductPromoCard promotion={promotion} /> + <ProductPromoCard product={promoItems} promotion={promotion} /> </div> )))} diff --git a/src-migrate/types/promotion.ts b/src-migrate/types/promotion.ts index 85190aad..10f6d8b0 100644 --- a/src-migrate/types/promotion.ts +++ b/src-migrate/types/promotion.ts @@ -10,10 +10,12 @@ export interface IPromotion { limit_user: number; limit_trx: number; price: number; + image: string; total_qty: number; products: { product_id: number; qty: number; + name: string; }[]; free_products: { product_id: number; |