Refractor

components/wishlist/WishlistCard/WishlistCard.module.css

@@ -1,21 +0,0 @@
-.root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
-
-  &:nth-child(3n + 1) {
-    & .productBg {
-      @apply bg-violet;
-    }
-  }
-
-  &:nth-child(3n + 2) {
-    & .productBg {
-      @apply bg-pink;
-    }
-  }
-
-  &:nth-child(3n + 3) {
-    & .productBg {
-      @apply bg-blue;
-    }
-  }
-}

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -1,106 +0,0 @@
-import { FC, useState } from 'react'
-import cn from 'classnames'
-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'
-
-interface Props {
-  product: Product
-}
-
-const placeholderImg = '/product-img-placeholder.svg'
-
-const WishlistCard: FC<Props> = ({ 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: product.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={`col-span-3 ${s.productBg}`}>
-        <Image
-          src={product.images[0]?.url || placeholderImg}
-          width={400}
-          height={400}
-          alt={product.images[0]?.alt || 'Product Image'}
-        />
-      </div>
-
-      <div className="col-span-7">
-        <h3 className="text-2xl mb-2">
-          <Link href={`/product${product.path}`}>
-            <a>{product.name}</a>
-          </Link>
-        </h3>
-        <div className="mb-4">
-          <Text html={product.description} />
-        </div>
-        <Button
-          aria-label="Add to Cart"
-          type="button"
-          className={
-            'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
-          }
-          onClick={addToCart}
-          loading={loading}
-        >
-          Add to Cart
-        </Button>
-      </div>
-      <div className="col-span-2 flex flex-col justify-between">
-        <div className="flex justify-end font-bold">{price}</div>
-        <div className="flex justify-end">
-          <button onClick={handleRemove}>
-            <Trash />
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default WishlistCard

components/wishlist/WishlistCard/index.ts

@@ -1 +0,0 @@
-export { default } from './WishlistCard'

components/wishlist/index.ts

@@ -1,2 +1 @@
-export { default as WishlistCard } from './WishlistCard'
 export { default as WishlistButton } from './WishlistButton'