2022-04-20 15:29:34 +05:00

109 lines
3.1 KiB
TypeScript

import { FC, useState } from 'react';
import cn from 'clsx';
import Link from 'next/link';
import Image from 'next/image';
import s from './WishlistCard.module.css';
import { Trash } from '@components/icons';
import { Button, Text } from '@components/ui';
import { useUI } from '@components/ui/context';
import type { Product } from '@commerce/types/product';
import usePrice from '@framework/product/use-price';
import useAddItem from '@framework/cart/use-add-item';
import useRemoveItem from '@framework/wishlist/use-remove-item';
import type { Wishlist } from '@commerce/types/wishlist';
const placeholderImg = '/product-img-placeholder.svg';
const WishlistCard: React.FC<{
item: Wishlist;
}> = ({ item }) => {
const product: Product = item.product;
const { price } = usePrice({
amount: product.price?.value,
baseAmount: product.price?.retailPrice,
currencyCode: product.price?.currencyCode!,
});
// @ts-ignore Wishlist is not always enabled
const removeItem = useRemoveItem({ wishlist: { includeProducts: true } });
const [loading, setLoading] = useState(false);
const [removing, setRemoving] = useState(false);
// TODO: fix this missing argument issue
/* @ts-ignore */
const addItem = useAddItem();
const { openSidebar } = useUI();
const handleRemove = async () => {
setRemoving(true);
try {
// If this action succeeds then there's no need to do `setRemoving(true)`
// because the component will be removed from the view
await removeItem({ id: item.id! });
} catch (error) {
setRemoving(false);
}
};
const addToCart = async () => {
setLoading(true);
try {
await addItem({
productId: String(product.id),
variantId: String(product.variants[0].id),
});
openSidebar();
setLoading(false);
} catch (err) {
setLoading(false);
}
};
return (
<div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
<div className={s.imageWrapper}>
<Image
width={230}
height={230}
src={product.images[0]?.url || placeholderImg}
alt={product.images[0]?.alt || 'Product Image'}
/>
</div>
<div className={s.description}>
<div className="flex-1 mb-6">
<h3 className="text-2xl mb-2 -mt-1">
<Link href={`/product${product.path}`}>
<a>{product.name}</a>
</Link>
</h3>
<div className="mb-4">
<Text html={product.description} />
</div>
</div>
<div>
<Button
width={260}
aria-label="Add to Cart"
type="button"
onClick={addToCart}
loading={loading}
>
Add to Cart
</Button>
</div>
</div>
<div className={s.actions}>
<div className="flex justify-end font-bold">{price}</div>
<div className="flex justify-end mt-4 lg:mt-0">
<button onClick={handleRemove}>
<Trash />
</button>
</div>
</div>
</div>
);
};
export default WishlistCard;