Fixes & Updates (#704)

* Adding Dropdown Component

* Styling Issues

* Wishlist Fix

* Fixes for Wishlist View

* Hearts now work again

* Rollback ts

* Removing extra config to disable BigCommerce

* Fixes for Wishlist View

* Remove transition/animation for mobile

* New Updates.

* New Updates.

* Dropdown fix

* Polish

* export

* export

* revert tsconfig

Co-authored-by: Luis Alvarez D. <luis@vercel.com>

Co-authored-by: Dom Sip <dom@vercel.com>
Co-authored-by: Luis Alvarez D. <luis@vercel.com>

site/components/wishlist/WishlistButton/WishlistButton.tsx

@@ -31,8 +31,8 @@ const WishlistButton: FC<Props> = ({
   const itemInWishlist = data?.items?.find(
     // @ts-ignore Wishlist is not always enabled
     (item) =>
-      item.product_id === productId &&
-      item.variant_id === variant.id
+      item.product_id === Number(productId) &&
+      item.variant_id === Number(variant.id)
   )
 
   const handleWishlistChange = async (e: any) => {

site/components/wishlist/WishlistCard/WishlistCard.module.css

@@ -1,21 +1,38 @@
 .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;
+  @apply relative grid sm:grid-cols-1 lg: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;
-    }
-  }
+.root:nth-child(3n + 1) .imageWrapper {
+  @apply bg-violet;
+}
 
-  &:nth-child(3n + 2) {
-    & .productBg {
-      @apply bg-pink;
-    }
-  }
+.root:nth-child(3n + 2) .imageWrapper {
+  @apply bg-pink;
+}
 
-  &:nth-child(3n + 3) {
-    & .productBg {
-      @apply bg-blue;
-    }
+.root:nth-child(3n + 3) .imageWrapper {
+  @apply bg-blue;
+}
+
+.imageWrapper {
+  @apply col-span-3;
+  min-width: 230px;
+  width: 230px;
+  height: 230px;
+}
+
+.description {
+  @apply col-span-7 flex flex-col;
+}
+
+.actions {
+  @apply absolute bg-accent-0 p-3 top-0 right-4;
+}
+
+@media screen(lg) {
+  .actions {
+    @apply static col-span-2 flex flex-col justify-between space-y-4;
   }
 }

site/components/wishlist/WishlistCard/WishlistCard.tsx

@@ -13,13 +13,11 @@ import useAddItem from '@framework/cart/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
 import type { Wishlist } from '@commerce/types/wishlist'
 
-interface Props {
-  item: Wishlist
-}
-
 const placeholderImg = '/product-img-placeholder.svg'
 
-const WishlistCard: FC<Props> = ({ item }) => {
+const WishlistCard: React.FC<{
+  item: Wishlist
+}> = ({ item }) => {
   const product: Product = item.product
   const { price } = usePrice({
     amount: product.price?.value,
@@ -63,41 +61,41 @@ const WishlistCard: FC<Props> = ({ item }) => {
 
   return (
     <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
-      <div className={`col-span-3 ${s.productBg}`}>
-        <div>
-          <Image
-            src={product.images[0]?.url || placeholderImg}
-            width={400}
-            height={400}
-            alt={product.images[0]?.alt || 'Product Image'}
-          />
-        </div>
+      <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="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 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>
-        <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={s.actions}>
         <div className="flex justify-end font-bold">{price}</div>
-        <div className="flex justify-end">
+        <div className="flex justify-end mt-4 lg:mt-0">
           <button onClick={handleRemove}>
             <Trash />
           </button>