feat: create toggle product wishlist

framework/vendure/schema.d.ts

@@ -3198,15 +3198,23 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
   activeCustomer?: Maybe<
     { __typename?: 'Customer' } & Pick<
       Customer,
+      FavoriteList,
       'id' | 'firstName' | 'lastName' | 'emailAddress' | 'favorites'
     >,
   >
 }
-export type FavoriteList = {
+export type FavoriteList = PaginatedList & {
   items: [Favorite!]!
   totalItems: Int!
 }
 
+type Favorite = Node &  {
+  id: ID!
+  createdAt: DateTime!
+  updatedAt: DateTime!
+  product: Product
+  customer: Customer!
+}
 
 export type GetAllProductPathsQueryVariables = Exact<{
   first?: Maybe<Scalars['Int']>

framework/vendure/utils/mutations/toggle-wishlist-mutation.tsx

@@ -0,0 +1,9 @@
+export const toggleWishlistMutation = /* GraphQL */ `
+    mutation toggleFavorite($productId:ID!){
+        toggleFavorite(productId:$productId){
+            items{
+                id
+            }
+        }
+    }
+`

framework/vendure/utils/queries/active-customer-query.ts

@@ -1,3 +1,5 @@
+import { searchResultFragment } from '../fragments/search-result-fragment'
+
 export const activeCustomerQuery = /* GraphQL */ `
   query activeCustomer {
     activeCustomer {
@@ -9,6 +11,15 @@ export const activeCustomerQuery = /* GraphQL */ `
         items{
           product{
             id
+            name
+            slug
+            assets{
+              source
+              preview
+            }
+            variants{
+              price
+            }
           }
         }
       }

src/components/common/ItemWishList/ItemWishList.tsx

@@ -2,7 +2,9 @@ import classNames from 'classnames'
 import IconHeart from 'src/components/icons/IconHeart'
 import React, { memo } from 'react'
 import s from './ItemWishList.module.scss'
-
+import { useToggleProductWishlist } from '../../../../src/components/hooks/product'
+import { useMessage } from 'src/components/contexts'
+import { LANGUAGE } from 'src/utils/language.utils'
 interface Props {
     id:string,
     isActive?: boolean,
@@ -10,17 +12,28 @@ interface Props {
 }
 
 const ItemWishList = memo(({id,isActive=false, onChange}:Props) => {
-    // function toggleFavorite(id:string):string|undefined{
+    const {onToggleProductWishlist} = useToggleProductWishlist();
-    //     // alert(id);
+    const { showMessageSuccess, showMessageError } = useMessage();
-    //     return id;
+
-    // }
+    function toggleWishlist(){
+        onToggleProductWishlist({productId:id},onSignupCallBack)
+    }
+  
+      const onSignupCallBack = (isSuccess: boolean, message?: string) => {
+        if (isSuccess) {
+        //   showMessageSuccess("Create account successfully. Please verify your email to login.", 15000)
+        } else {
+          showMessageError(message || LANGUAGE.MESSAGE.ERROR)
+        }
+      }
+    
     return(
         <div className={classNames({
             [s.heartToggle]: true, 
             [s.isToggleOn]: isActive
         })}
-        // onClick={toggleFavorite(id)}
         onChange={onChange}
+        onClick={toggleWishlist}
         >
             <IconHeart />
         </div>

src/components/common/ProductCard/ProductCard.tsx

@@ -14,6 +14,7 @@ import ProductNotSell from './ProductNotSell/ProductNotSell'
 export interface ProductCardProps extends ProductCard {
   buttonText?: string
   isSingleButton?: boolean,
+  activeWishlist?:boolean
 }
 
 const ProductCardComponent = ({
@@ -28,6 +29,7 @@ const ProductCardComponent = ({
   imageSrc,
   isNotSell,
   isSingleButton,
+  activeWishlist
 }: ProductCardProps) => {
   if (isNotSell) {
     return <div className={`${s.productCardWarpper} ${s.notSell}`}>
@@ -65,7 +67,7 @@ const ProductCardComponent = ({
         <div className={s.cardMidBot}>
           <div className={s.productPrice}>{price} {currencyCode}</div>
           <div className={s.wishList}>
-            <ItemWishList id={id}/>
+            <ItemWishList isActive={activeWishlist}  id={id}/>
           </div>
         </div>
       </div>

src/components/common/ProductList/ProductList.tsx

@@ -7,7 +7,6 @@ import { ButtonCommon, EmptyCommon } from '..'
 import PaginationCommon from '../PaginationCommon/PaginationCommon'
 import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
 import s from "./ProductList.module.scss"
-import { FavoriteList } from '@framework/schema'
 interface ProductListProps {
     data: ProductCardProps[],
     total?: number,
@@ -17,8 +16,8 @@ interface ProductListProps {
 
 const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
     const router = useRouter()
-    const {wishlist:FavoriteList } = useActiveCustomer();
+    const {wishlist } = useActiveCustomer();
-    
+
     const handlePageChange = (page: number) => {
         onPageChange && onPageChange(page)
     }
@@ -36,8 +35,8 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
             <div className={s.list}>
                 {
                     data.map((product, index) => {
-                           
+                        let activeWishlist = wishlist?.findIndex((val:string) => val == product.id) !== -1;
-                        return <ProductCard {...product} key={index} />
+                        return <ProductCard activeWishlist={activeWishlist} {...product} key={index} />
                     })
                 }
                 {

src/components/hooks/auth/useActiveCustomer.tsx

@@ -1,14 +1,23 @@
-import { ActiveCustomerQuery,FavoriteList } from '@framework/schema'
+import { ActiveCustomerQuery,Favorite } from '@framework/schema'
 import { activeCustomerQuery } from '@framework/utils/queries/active-customer-query'
 import gglFetcher from 'src/utils/gglFetcher'
 import useSWR from 'swr'
+
 const useActiveCustomer = () => {
   const { data, ...rest } = useSWR<ActiveCustomerQuery>([activeCustomerQuery], gglFetcher)
-
+  console.log(data);
-  return { 
+  return {
-    customer: data?.activeCustomer,
+      customer: data?.activeCustomer,
-    wishlist:data?.activeCustomer?.favorites,
+      userInfo:{
-     ...rest }
+        firstName: data?.activeCustomer?.firstName, 
+        lastName:data?.activeCustomer?.lastName,
+        email:data?.activeCustomer?.emailAddress,
+        phoneNumber: data?.activeCustomer?.phoneNumber,
+        address: data?.activeCustomer?.addresses?.[0]
+      },
+      wishlist: data?.activeCustomer?.favorites?.items.map((val:Favorite)=>val.product.id),
+      ...rest 
+  }
 }
 
 export default useActiveCustomer

src/components/hooks/product/index.ts

@@ -1,3 +1,4 @@
 export { default as useSearchProducts } from './useSearchProducts'
+export { default as useToggleProductWishlist } from './useToggleProductWishlist'
 
 

src/components/hooks/product/useToggleProductWishlist.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import useActiveCustomer from '../auth/useActiveCustomer'
+import { FavoriteList } from '@framework/schema'
+import fetcher from 'src/utils/fetcher'
+import { CommonError } from 'src/domains/interfaces/CommonError'
+import { toggleWishlistMutation } from '@framework/utils/mutations/toggle-wishlist-mutation'
+
+interface Props {
+  productId?:string
+}
+
+const useToggleProductWishlist = () => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const { mutate } = useActiveCustomer()
+
+  const onToggleProductWishlist = (
+    { productId }:Props ,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+  ) => {
+    setError(null)
+    setLoading(true)
+    fetcher<FavoriteList>({
+      query: toggleWishlistMutation,
+      variables: {
+        productId
+      },
+    })
+      .then((data) => {
+        mutate()
+        fCallBack(true)
+        return data
+      })
+      .catch((error) => {
+        setError(error)
+        fCallBack(false, error.message)
+      })
+      .finally(() => setLoading(false))
+  }
+
+  return { loading, onToggleProductWishlist, error }
+}
+
+export default useToggleProductWishlist

src/components/modules/account/AccountPage/AccountPage.tsx

@@ -12,6 +12,7 @@ import EditInfoModal from './components/EditInfoModal/EditInfoModal'
 import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
 import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
 import { useRouter } from "next/router"
+import { useActiveCustomer } from 'src/components/hooks/auth'
 
 const waiting = [
     {
@@ -82,6 +83,8 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     const router = useRouter()
     const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
+    // const { itemWishlist } = useActiveCustomer();
+    // console.log(itemWishlist)
 
     useEffect(() => {
         const query = router.query[QUERY_KEY.TAB] as string