diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/layouts/Header.js | 6 | ||||
| -rw-r--r-- | src/pages/shop/product/[slug].js | 55 |
2 files changed, 55 insertions, 6 deletions
diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js index 5cd0a1bc..4741905f 100644 --- a/src/components/layouts/Header.js +++ b/src/components/layouts/Header.js @@ -8,7 +8,8 @@ import { Bars3Icon, ShoppingCartIcon, ChevronRightIcon, - Cog6ToothIcon + Cog6ToothIcon, + HeartIcon } from "@heroicons/react/24/outline"; // Helpers @@ -117,6 +118,9 @@ export default function Header({ title }) { <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} /> </Link> <div className="flex gap-x-4"> + <Link href="/my/wishlist"> + <HeartIcon className="w-6 text-gray_r-12" /> + </Link> <Link href="/shop/cart"> <ShoppingCartIcon className="w-6 text-gray_r-12" /> </Link> diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index fe467439..dd097bbe 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -12,6 +12,9 @@ import toast from "react-hot-toast"; import Footer from "@/components/layouts/Footer"; import Image from "@/components/elements/Image"; import LineDivider from "@/components/elements/LineDivider"; +import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid"; +import { useAuth } from "@/core/utils/auth"; +import { HeartIcon } from "@heroicons/react/24/outline"; export async function getServerSideProps( context ) { const { slug } = context.query; @@ -29,6 +32,7 @@ export async function getServerSideProps( context ) { } export default function ProductDetail({ product }) { + const [ auth ] = useAuth(); const router = useRouter(); const { slug } = router.query; const [selectedVariant, setSelectedVariant] = useState(""); @@ -42,12 +46,41 @@ export default function ProductDetail({ product }) { weight: product.weight, attributes: '', }); + + const [ isAddedToWishlist, setAddedToWishlist ] = useState(false); + + const addOrDeleteWishlist = async () => { + if (auth) { + await apiOdoo('POST', `/api/v1/user/${auth.id}/wishlist/create-or-delete`, { + product_id: product.id + }); + if (isAddedToWishlist) { + toast.success('Berhasil menghapus dari wishlist'); + } else { + toast.success('Berhasil menambahkan ke wishlist'); + } + setAddedToWishlist(!isAddedToWishlist); + } else { + toast.error('Login terlebih dahulu untuk melanjutkan'); + router.push('/login'); + } + }; + + useEffect(() => { + if (auth) { + const checkWishlist = async () => { + const wishlist = await apiOdoo('GET', `/api/v1/user/${auth.id}/wishlist?product_id=${product.id}`); + setAddedToWishlist(wishlist.product_total > 0 ? true : false); + } + checkWishlist(); + } + }, [ auth, product ]); useEffect(() => { if (product.variants.length == 1) { setSelectedVariant(product.variants[0].id); } - }, [product]); + }, [ product ]); useEffect(() => { setSimilarProducts(null); @@ -116,10 +149,22 @@ export default function ProductDetail({ product }) { /> <div className="p-4"> - <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}> - {product.manufacture.name ?? '-'} - </Link> - <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1> + <div className="flex justify-between"> + <div> + <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}> + {product.manufacture.name ?? '-'} + </Link> + <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1> + </div> + <button className="h-fit" onClick={addOrDeleteWishlist}> + { isAddedToWishlist && ( + <HeartIconSolid className="w-6 text-red_r-10" /> + ) } + { !isAddedToWishlist && ( + <HeartIcon className="w-6" /> + ) } + </button> + </div> {product.variant_total > 1 && !selectedVariant && product.lowest_price.price > 0 ? ( <p className="text-caption-2 text-gray-800 mb-1">Harga mulai dari:</p> |