diff options
6 files changed, 81 insertions, 8 deletions
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx index c8a0b701..0a97b344 100644 --- a/src-migrate/modules/product-card/components/ProductCard.tsx +++ b/src-migrate/modules/product-card/components/ProductCard.tsx @@ -26,7 +26,7 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => { [style['wrapper-h']]: layout === 'horizontal', })} > - <div className={clsxm({ + <div className={clsxm('relative', { [style['image-v']]: layout === 'vertical', [style['image-h']]: layout === 'horizontal', })}> @@ -38,6 +38,9 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => { height={128} className='object-contain object-center h-full w-full' /> + {product.variant_total > 1 && ( + <div className={style['variant-badge']}>{product.variant_total} Varian</div> + )} </Link> </div> diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css index aac27a84..653bf2ca 100644 --- a/src-migrate/modules/product-card/styles/product-card.module.css +++ b/src-migrate/modules/product-card/styles/product-card.module.css @@ -48,3 +48,7 @@ .sold { @apply text-gray-600 text-[11px]; } + +.variant-badge { + @apply bg-gray-500/20 backdrop-blur-md absolute rounded-md bottom-2 left-2 px-2 py-1 text-caption-2; +} diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx index fccbdcf5..cb11e837 100644 --- a/src-migrate/modules/product-detail/components/AddToWishlist.tsx +++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx @@ -1,13 +1,56 @@ -import { Button } from '@chakra-ui/react' +import { Button, useToast } from '@chakra-ui/react' import { HeartIcon } from 'lucide-react' import React from 'react' +import { useQuery } from 'react-query' +import { getAuth } from '~/libs/auth' +import clsxm from '~/libs/clsxm' +import { getUserWishlist, upsertUserWishlist } from '~/services/wishlist' + +type Props = { + productId: number +} + +const AddToWishlist = ({ productId }: Props) => { + const auth = getAuth() + const toast = useToast({ + position: 'top', + isClosable: true + }) + + const searchParams = { product_id: productId.toString() } + const query = useQuery({ + queryKey: ['wishlist', searchParams, auth], + queryFn: () => { + if (typeof auth !== 'object') return null; + return getUserWishlist(auth.id, searchParams) + } + }) + + const isAdded = query.data?.product_total ? query.data.product_total > 0 : false; + + const toggleWishlist = async () => { + if (typeof auth !== 'object') return; + await upsertUserWishlist(auth.id, productId) + await query.refetch() + } + + const handleClick = async () => { + toast.promise(toggleWishlist(), { + loading: { title: 'Update Wishlist', description: 'Mohon tunggu...' }, + success: { title: 'Update Wishlist', description: 'Berhasil update wishlist' }, + error: { title: 'Update Wishlist', description: 'Gagal update wishlist' }, + }) + } -const AddToWishlist = () => { return ( <Button variant='link' colorScheme='gray' - leftIcon={<HeartIcon size={18} />} + onClick={handleClick} + leftIcon={<HeartIcon size={18} className={clsxm('transition-colors', { + 'text-danger-500 fill-danger-500': isAdded, + 'fill-transparent': !isAdded + })} />} > Wishlist </Button> diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx index 0ee5b115..ec445b60 100644 --- a/src-migrate/modules/product-detail/components/Breadcrumb.tsx +++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx @@ -18,7 +18,7 @@ const Breadcrumb = ({ id, name }: Props) => { const breadcrumbs = query.data || [] return ( - <div className='line-clamp-3 md:line-clamp-1 leading-7'> + <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'> <Link href='/' className='text-danger-500'>Home</Link> <span className='mx-2'>/</span> {breadcrumbs.map((category, index) => ( diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 93fa7118..80f43aea 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -52,10 +52,10 @@ const ProductDetail = ({ product }: Props) => { return ( <> <div className='md:flex md:flex-wrap'> - <div className="w-full mb-4 md:mb-6 px-4 md:px-0"> + <div className="w-full mb-4 md:mb-0 px-4 md:px-0"> <Breadcrumb id={product.id} name={product.name} /> </div> - <div className='md:w-9/12 md:flex md:flex-col md:pr-4'> + <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'> <div className='md:flex md:flex-wrap'> <div className="md:w-4/12"> <ProductImage product={product} /> @@ -86,7 +86,7 @@ const ProductDetail = ({ product }: Props) => { Ask Admin </Button> - <AddToWishlist /> + <AddToWishlist productId={product.id} /> <RWebShare data={{ diff --git a/src-migrate/services/wishlist.ts b/src-migrate/services/wishlist.ts new file mode 100644 index 00000000..6fb8cb2e --- /dev/null +++ b/src-migrate/services/wishlist.ts @@ -0,0 +1,23 @@ +import odooApi from '~/libs/odooApi'; + +export const getUserWishlist = async ( + userId: number, + searchParams: { + product_id?: string; + } = {} +): Promise<{ product_total: number }> => { + const url = `/api/v1/user/${userId}/wishlist`; + const searchParamsObj = new URLSearchParams(searchParams); + + return await odooApi('GET', url + '?' + searchParamsObj.toString()); +}; + +export const upsertUserWishlist = async ( + userId: number, + productId: number +): Promise<{ id: number }> => { + const url = `/api/v1/user/${userId}/wishlist/create-or-delete`; + const data = { product_id: productId }; + + return await odooApi('POST', url, data); +}; |