feat: Add wishlist

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -34,7 +34,6 @@ const WishlistButton: FC<Props> = ({
       item.product_id === productId &&
       item.variant_id === variant.id
   )
-
   const handleWishlistChange = async (e: any) => {
     e.preventDefault()
 

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -53,6 +53,7 @@ const WishlistCard: FC<Props> = ({ item }) => {
       await addItem({
         productId: String(product.id),
         variantId: String(product.variants[0].id),
+        sizeId: String(product.variants[0].options[0].id),
       })
       openSidebar()
       setLoading(false)

framework/commercelayer/product/use-search.tsx

@@ -1,7 +1,6 @@
 import { SWRHook } from '@commerce/utils/types'
 import useSearch, { UseSearch } from '@commerce/product/use-search'
 import data from '../data.json'
-import useCallback from 'react'
 export default useSearch as UseSearch<typeof handler>
 
 const productsFinder = (s: string) => {
@@ -31,7 +30,7 @@ export const handler: SWRHook<any> = {
                 products,
                 found: true,
               }
-            : null,
+            : data,
       }
     },
 }

framework/commercelayer/wishlist/use-add-item.tsx

@@ -1,10 +1,19 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
 export function emptyHook() {
-  const useEmptyHook = async (options = {}) => {
-    return useCallback(async function () {
-      return Promise.resolve()
-    }, [])
+  const useEmptyHook = async (options: any = {}) => {
+    let wishlist = []
+    const localWishlist = localStorage.getItem('wishlist')
+    if (localWishlist) {
+      wishlist = JSON.parse(localWishlist)
+      if (!wishlist.includes(options.variantId)) {
+        wishlist.push(options.variantId)
+      }
+    } else {
+      wishlist.push(options.variantId)
+    }
+    localStorage.setItem('wishlist', JSON.stringify(wishlist))
+    return wishlist
   }
 
   return useEmptyHook

framework/commercelayer/wishlist/use-remove-item.tsx

@@ -1,14 +1,17 @@
-import { useCallback } from 'react'
-
 type Options = {
   includeProducts?: boolean
 }
 
 export function emptyHook(options?: Options) {
   const useEmptyHook = async ({ id }: { id: string | number }) => {
-    return useCallback(async function () {
+    let wishlist = []
+    const localWishlist = localStorage.getItem('wishlist')
+    if (localWishlist) {
+      wishlist = JSON.parse(localWishlist)
+      wishlist = wishlist.filter((p: string) => p !== id)
+    }
+    localStorage.setItem('wishlist', JSON.stringify(wishlist))
     return Promise.resolve()
-    }, [])
   }
 
   return useEmptyHook

framework/commercelayer/wishlist/use-wishlist.tsx

@@ -1,5 +1,7 @@
 import { HookFetcher } from '@commerce/utils/types'
 import type { Product } from '@commerce/types/product'
+import { products } from '../data.json'
+import { useCustomer } from '@framework/customer'
 
 const defaultOpts = {}
 
@@ -32,6 +34,22 @@ export function extendHook(
   swrOptions?: any
 ) {
   const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
+    const { data: customer } = useCustomer()
+    const getWishlist =
+      typeof localStorage !== 'undefined' && localStorage.getItem('wishlist')
+    if (getWishlist && customer?.email) {
+      const wishlist = JSON.parse(getWishlist)
+      const items = wishlist.map((wishlist: string) => {
+        const [product] = products.filter((p) => p.id === wishlist) as any
+        return {
+          variant_id: wishlist,
+          product_id: wishlist,
+          id: wishlist,
+          product,
+        }
+      })
+      return { data: { items } }
+    }
     return { data: null }
   }