Progress

README.md

@@ -84,10 +84,10 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
 
 ## Goals
 
-* **Next.js Commerce** should have a completely data **agnostic** UI
+- **Next.js Commerce** should have a completely data **agnostic** UI
-* **Aware of schema**: should ship with the right data schemas and types.
+- **Aware of schema**: should ship with the right data schemas and types.
-* All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
+- All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
-* `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._
+- `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._
 
 There is a `framework` folder in the root folder that will contain multiple ecommerce providers.
 
@@ -95,5 +95,19 @@ Additionally, we need to ensure feature parity (not all providers have e.g. wish
 
 People actively working on this project: @okbel & @lfades.
 
+## Framework
 
+Framework is where the data comes from. Contains mostly hooks and functions.
 
+## Structure
+
+- ## product
+- wishlist
+  - useWishlist
+  - addWishlistItem
+  - removeWishlistItem
+- auth
+
+- config.json
+
+## Wishlist

components/product/ProductCard/FUTURE_ProductCard.tsx

@@ -1,10 +1,9 @@
 import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import Image, { ImageProps } from 'next/image'
 import s from './ProductCard.module.css'
-// Restore Wishlist func
+import Image, { ImageProps } from 'next/image'
-// import WishlistButton from '@components/wishlist/WishlistButton'
+import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
   className?: string
@@ -52,6 +51,11 @@ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
                   {product.prices[0].currencyCode}
                 </span>
               </div>
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={product.id}
+                variant={product.variants[0]!}
+              />
             </div>
             <div className={s.imageContainer}>
               {product.images[0] && (

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -1,16 +1,17 @@
 import React, { FC, useState } from 'react'
 import cn from 'classnames'
-import type { ProductNode } from '@framework/api/operations/get-all-products'
-import useAddItem from '@framework/wishlist/use-add-item'
-import useRemoveItem from '@framework/wishlist/use-remove-item'
-import useWishlist from '@framework/wishlist/use-wishlist'
-import useCustomer from '@framework/use-customer'
 import { Heart } from '@components/icons'
 import { useUI } from '@components/ui/context'
 
+import type { ProductNode } from '@framework/api/operations/get-all-products'
+import useCustomer from '@framework/use-customer'
+import useAddItem from '@framework/wishlist/use-add-item'
+import useWishlist from '@framework/wishlist/use-wishlist'
+import useRemoveItem from '@framework/wishlist/use-remove-item'
+
 type Props = {
-  productId: number
+  productId: Product['id']
-  variant: NonNullable<ProductNode['variants']['edges']>[0]
+  variant: ProductVariant
 } & React.ButtonHTMLAttributes<HTMLButtonElement>
 
 const WishlistButton: FC<Props> = ({
@@ -19,16 +20,15 @@ const WishlistButton: FC<Props> = ({
   className,
   ...props
 }) => {
+  const { data } = useWishlist()
   const addItem = useAddItem()
   const removeItem = useRemoveItem()
-  const { data } = useWishlist()
   const { data: customer } = useCustomer()
-  const [loading, setLoading] = useState(false)
   const { openModal, setModalView } = useUI()
+  const [loading, setLoading] = useState(false)
+
   const itemInWishlist = data?.items?.find(
-    (item) =>
+    (item) => item.product_id === productId && item.variant_id === variant.id
-      item.product_id === productId &&
-      item.variant_id === variant?.node.entityId
   )
 
   const handleWishlistChange = async (e: any) => {
@@ -50,7 +50,7 @@ const WishlistButton: FC<Props> = ({
       } else {
         await addItem({
           productId,
-          variantId: variant?.node.entityId!,
+          variantId: variant?.id,
         })
       }
 

framework/bigcommerce/api/wishlist/index.ts

@@ -15,8 +15,8 @@ import removeItem from './handlers/remove-item'
 export type { Wishlist, WishlistItem }
 
 export type ItemBody = {
-  productId: number
+  productId: Product['id']
-  variantId: number
+  variantId: ProductVariant['id']
 }
 
 export type AddItemBody = { item: ItemBody }

framework/bigcommerce/wishlist/index.ts

@@ -0,0 +1,4 @@
+export { default as useAddItem } from './use-add-item'
+export { default as useWishlist } from './use-wishlist'
+export { default as useRemoveItem } from './use-remove-item'
+export { default as useWishlistActions } from './use-wishlist-actions'

framework/types.d.ts

@@ -1,17 +1,21 @@
-interface ProductImage {
-  url: string
-  alt?: string
-}
-
 interface Product {
   id: string | number
   name: string
   description: string
   images: ProductImage[]
+  variants: ProductVariant[]
   prices: ProductPrice[]
   slug: string
   path?: string
 }
+interface ProductImage {
+  url: string
+  alt?: string
+}
+
+interface ProductVariant {
+  id: string | number
+}
 
 interface ProductPrice {
   value: number | string