mirror of
https://github.com/vercel/commerce.git
synced 2025-06-20 06:01:21 +00:00
716b540966
* TEC-252: Base integration with commercetools using fetchers for REST and GraphQL endpoints * TEC-252: WIP commenting some components that are failing while we don't have all the hooks defined * add sdk integration * TEC-256: Implementing product search * TEC-256: removing unnecessary env variables * TEC-256: review comments * TEC-256: other remaining review fixes Co-authored-by: nicossosa93 <nicolas.sosa@devgurus.io>
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React, { FC, useState } from 'react'
|
|
import cn from 'classnames'
|
|
import { useUI } from '@components/ui'
|
|
import { Heart } from '@components/icons'
|
|
// import useAddItem from '@framework/wishlist/use-add-item'
|
|
// import useCustomer from '@framework/customer/use-customer'
|
|
// import useWishlist from '@framework/wishlist/use-wishlist'
|
|
// import useRemoveItem from '@framework/wishlist/use-remove-item'
|
|
import type { Product, ProductVariant } from '@commerce/types/product'
|
|
|
|
type Props = {
|
|
productId: Product['id']
|
|
variant: ProductVariant
|
|
} & React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
|
const WishlistButton: FC<Props> = ({
|
|
productId,
|
|
variant,
|
|
className,
|
|
...props
|
|
}) => {
|
|
// const { data } = useWishlist()
|
|
const data = {}
|
|
// const addItem = useAddItem()
|
|
// const removeItem = useRemoveItem()
|
|
// const { data: customer } = useCustomer()
|
|
const { openModal, setModalView } = useUI()
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
// @ts-ignore Wishlist is not always enabled
|
|
const itemInWishlist = data?.items?.find(
|
|
// @ts-ignore Wishlist is not always enabled
|
|
(item) =>
|
|
item.product_id === Number(productId) &&
|
|
(item.variant_id as any) === Number(variant.id)
|
|
)
|
|
|
|
const handleWishlistChange = async (e: any) => {
|
|
e.preventDefault()
|
|
|
|
if (loading) return
|
|
|
|
// A login is required before adding an item to the wishlist
|
|
// if (!customer) {
|
|
// setModalView('LOGIN_VIEW')
|
|
// return openModal()
|
|
// }
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
if (itemInWishlist) {
|
|
// await removeItem({ id: itemInWishlist.id! })
|
|
} else {
|
|
// await addItem({
|
|
// productId,
|
|
// variantId: variant?.id!,
|
|
// })
|
|
}
|
|
|
|
setLoading(false)
|
|
} catch (err) {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
aria-label="Add to wishlist"
|
|
className={cn({ 'opacity-50': loading }, className)}
|
|
onClick={handleWishlistChange}
|
|
{...props}
|
|
>
|
|
<Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default WishlistButton
|