mirror of
https://github.com/vercel/commerce.git
synced 2025-05-15 14:06:59 +00:00
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import type { Product, ProductVariant } from 'lib/storm/types/product'
|
|
import { cn } from 'lib/utils'
|
|
import { Heart } from 'lucide-react'
|
|
import { useTranslations } from 'next-intl'
|
|
import React, { FC, useState } from 'react'
|
|
|
|
type Props = {
|
|
productId: Product['id']
|
|
variant: ProductVariant
|
|
} & React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
|
const WishlistButton: FC<Props> = ({
|
|
productId,
|
|
variant,
|
|
className,
|
|
...props
|
|
}) => {
|
|
const [loading, setLoading] = useState(false)
|
|
const t = useTranslations('ui.button')
|
|
|
|
// @ts-ignore Wishlist is not always enabled
|
|
// const itemInWishlist = data?.items?.find(
|
|
// // @ts-ignore Wishlist is not always enabled
|
|
// (item) => item.product_id === productId && item.variant_id === 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={t('wishList')}
|
|
className={cn(
|
|
'w-10 h-10 text-high-contrast bg-app border border-high-contrast flex items-center justify-center font-semibold cursor-pointer text-sm duration-200 ease-in-out transition-[color,background-color,opacity] ',
|
|
className
|
|
)}
|
|
// onClick={handleWishlistChange}
|
|
{...props}
|
|
>
|
|
<Heart
|
|
className={cn(
|
|
'duration-200 ease-in-out w-5 h-5 transition-[transform,fill] text-current',
|
|
{
|
|
['fill-low-contrast']: loading,
|
|
// ['fill-high-contrast']: itemInWishlist,
|
|
}
|
|
)}
|
|
/>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default WishlistButton
|