bug: fix favorite products

framework/vendure/api/operations/get-all-products.ts

@@ -5,7 +5,7 @@ import { normalizeSearchResult } from '../../utils/normalize'
 import { getAllProductsQuery } from '../../utils/queries/get-all-products-query'
 import { OperationContext } from '@commerce/api/operations'
 
-export type ProductVariables = { first?: number, facetValueIds?: string[] }
+export type ProductVariables = { first?: number, facetValueIds?: string[],collectionSlug?:string }
 
 export default function getAllProductsOperation({
   commerce,
@@ -31,13 +31,13 @@ export default function getAllProductsOperation({
       input: {
         take: vars.first,
         facetValueIds: vars.facetValueIds,
+        collectionSlug: vars.collectionSlug,
         groupByProduct: true,
       },
     }
     const { data } = await config.fetch<GetAllProductsQuery>(query, {
       variables,
     })
-
     return {
       products: data.search.items.map((item) => normalizeSearchResult(item)),
       totalItems: data.search.totalItems as number,

framework/vendure/utils/normalize.ts

@@ -1,6 +1,6 @@
 import { Cart } from '@commerce/types/cart'
 import { ProductCard } from '@commerce/types/product'
-import { CartFragment, SearchResultFragment } from '../schema'
+import { CartFragment, SearchResultFragment,Favorite,ActiveCustomerQuery } from '../schema'
 
 export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
   return {
@@ -21,6 +21,18 @@ export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
   }
 }
 
+export function normalizeFavoriteProductResult(item: Favorite) {
+  return {
+    id: item.product.id,
+    name: item.product.name,
+    slug: item.product.slug,
+    imageSrc: item.product.assets[0].preview ? item.product.assets[0].preview + '?w=800&mode=crop' : '',
+    price: item.product.variants[0].priceWithTax as number / 100,
+    currencyCode: item.product.variants[0].currencyCode,
+  }
+}
+
+
 export function normalizeCart(order: CartFragment): Cart {
   return {
     id: order.id.toString(),

framework/vendure/utils/queries/get-favorite-product-query.ts

@@ -16,7 +16,8 @@ query activeCustomer($options: FavoriteListOptions) {
             preview
           }
           variants{
-            price
+            priceWithTax
+            currencyCode
           }
         }
       }

pages/index.tsx

@@ -6,7 +6,7 @@ import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
 import { FeaturedProductsCarousel, FreshProducts, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
-import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED } from 'src/utils/constanst.utils';
+import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED,COLLECTION_SLUG_SPICE } from 'src/utils/constanst.utils';
 import { getAllFacetValueIdsByParentCode, getAllFacetValuesForFeatuedProducts, getAllPromies, getFreshFacetId } from 'src/utils/funtion.utils';
 import { PromiseWithKey } from 'src/utils/types.utils';
 
@@ -15,11 +15,12 @@ interface Props {
   freshProducts: ProductCard[],
   featuredProducts: ProductCard[],
   collections: Collection[]
-
+  spiceProducts:ProductCard[]
 }
 export default function Home({ featuredAndDiscountFacetsValue,
   freshProducts, featuredProducts,
-  collections }: Props) {
+  collections,spiceProducts }: Props) {
+
   return (
     <>
       <HomeBanner />
@@ -28,7 +29,7 @@ export default function Home({ featuredAndDiscountFacetsValue,
       <FreshProducts data={freshProducts} collections={collections} />
       <HomeCollection />
       <HomeVideo />
-      <HomeSpice />
+      {spiceProducts.length>0 && <HomeSpice data={spiceProducts}/>}
       <FeaturedProductsCarousel data={featuredProducts} featuredFacetsValue={featuredAndDiscountFacetsValue} />
       <HomeCTA />
       <HomeRecipe />
@@ -99,16 +100,24 @@ export async function getStaticProps({
   })
   promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections'  })
 
+  // spiceProducts
+  const spiceProducts = commerce.getAllProducts({
+    variables: {
+      collectionSlug: COLLECTION_SLUG_SPICE,
+    },
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'spiceProducts', promise: spiceProducts, keyResult: 'products' })
 
   try {
     const promises = getAllPromies(promisesWithKey)
     const rs = await Promise.all(promises)
-
+    
     promisesWithKey.map((item, index) => {
       props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
       return null
     })
-
     return {
       props,
       revalidate: 60,

src/components/hooks/account/useGetFavoriteProduct.tsx

@@ -1,22 +1,14 @@
 import { ActiveCustomerQuery,QueryFavorite,Favorite } from '@framework/schema'
+import { normalizeFavoriteProductResult } from '@framework/utils/normalize'
 import { getFavoriteProductQuery } from '@framework/utils/queries/get-favorite-product-query'
 import gglFetcher from 'src/utils/gglFetcher'
 import useSWR from 'swr'
 
 const useGetFavoriteProduct = (options:QueryFavorite) => {
   const { data, ...rest } = useSWR<ActiveCustomerQuery>([getFavoriteProductQuery, options], gglFetcher)
-  console.log(options);
+  // console.log( data?.activeCustomer?.favorites?.items);
   return {
-      itemWishlist:
-        data?.activeCustomer?.favorites?.items?.map((val:Favorite)=>({
-          id: val.product?.id,
-          name:val.product?.name,
-          slug:val.product?.slug,
-          price:val.product?.variants?.[0].price,
-          imageSrc: val.product?.assets?.[0].preview,
-          currencyCode: val.product?.variants?.[0].currencyCode
-        })
-      ),
+      itemWishlist: data?.activeCustomer?.favorites?.items?.map((item:Favorite) => normalizeFavoriteProductResult(item)), 
       totalItems: data?.activeCustomer?.favorites?.totalItems,
       ...rest 
   }

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

@@ -1,20 +1,20 @@
+import { QueryFavorite } from "@framework/schema"
+import commerce from '@lib/api/commerce'
+import { GetStaticPropsContext } from 'next'
+import { useRouter } from "next/router"
 import React, { useEffect, useState } from "react"
-import s from './AccountPage.module.scss'
-
 import { HeadingCommon, TabPane } from "src/components/common"
-
+import { useGetFavoriteProduct } from 'src/components/hooks/account'
+import { ACCOUNT_TAB, DEFAULT_PAGE_SIZE, QUERY_KEY } from "src/utils/constanst.utils"
+import { getPageFromQuery } from 'src/utils/funtion.utils'
+import { PromiseWithKey } from 'src/utils/types.utils'
 import AccountNavigation from '../AccountNavigation/AccountNavigation'
+import s from './AccountPage.module.scss'
 import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
+import EditInfoModal from './components/EditInfoModal/EditInfoModal'
 import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts"
 import OrderInfomation from './components/OrderInformation/OrderInformation'
-import EditInfoModal from './components/EditInfoModal/EditInfoModal'
-import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
-import { ACCOUNT_TAB, QUERY_KEY,DEFAULT_PAGE_SIZE } from "src/utils/constanst.utils"
-import { useRouter } from "next/router"
-import { useActiveCustomer } from 'src/components/hooks/auth'
-import { useGetFavoriteProduct } from 'src/components/hooks/account'
-import { QueryFavorite } from "@framework/schema"
-import {  getPageFromQuery} from 'src/utils/funtion.utils'
+
 
 const waiting = [
     {
@@ -93,8 +93,9 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
     const [optionQueryFavorite, setoptionQueryFavorite] = useState<QueryFavorite>(DEFAULT_FAVORITE_ARGS)
+   
     const { itemWishlist,totalItems }= useGetFavoriteProduct(optionQueryFavorite);
-    console.log(itemWishlist,totalItems)        
+
 
     // skip
     useEffect(() => {
@@ -143,4 +144,5 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     )
 }
 
-export default AccountPage
+export default AccountPage
+

src/components/modules/home/FreshProducts/FreshProducts.tsx

@@ -10,6 +10,7 @@ interface FreshProductsProps {
 }
 
 const FreshProducts = ({ data, collections }: FreshProductsProps) => {
+
   const dataWithCategory = useMemo(() => {
     return data.map(item => {
       return {

src/components/modules/home/HomeSpice/HomeSpice.tsx

@@ -2,16 +2,16 @@ import React from 'react'
 import { ProductCarousel } from 'src/components/common'
 import { SPICE_DATA_TEST } from "../../../../utils/demo-data"
 import s from './HomeSpice.module.scss'
-
+import { ProductCard } from '@commerce/types/product'
 interface HomeSpice {
-  
+  data: ProductCard[]
 }
 
 
-const HomeSpice = ({}: HomeSpice) => {
+const HomeSpice = ({data}: HomeSpice) => {
   return (
     <div className={s.homeSpiceWarpper}>
-        <ProductCarousel data={SPICE_DATA_TEST} itemKey="product-7"/>
+        <ProductCarousel data={data} itemKey="product-7"/>
     </div>
   )
 }

src/utils/constanst.utils.ts

@@ -184,3 +184,4 @@ export const STATE_OPTIONS = [
   },
 ]
 
+export const COLLECTION_SLUG_SPICE ="spice";