Merge pull request #80 from KieIO/feature/m2-get-favorite-products

Feature/m2 get 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/schema.d.ts

@@ -3247,10 +3247,21 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
   activeCustomer?: Maybe<
     { __typename?: 'Customer' } & Pick<
       Customer,
-      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber'| 'favorites' | 'orders'
+      Favorite,
+      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber'|  'orders'
     >
   >
 }
+
+export type QueryFavorite = {
+  options: FavoriteListOptions
+}
+
+export type FavoriteListOptions = {
+  skip?: Maybe<Scalars['Int']>
+  take?: Maybe<Scalars['Int']>
+}
+
 export type FavoriteList = PaginatedList & {
   items: [Favorite!]!
   totalItems: Int!
@@ -3264,6 +3275,12 @@ type Favorite = Node &  {
   customer: Customer!
 }
 
+
+
+type FavouriteOption =  Customer & {
+  favorites(options: FavoriteListOptions): FavoriteList!
+}
+
 export type GetAllProductPathsQueryVariables = Exact<{
   first?: Maybe<Scalars['Int']>
 }>

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/active-customer-query.ts

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

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

@@ -0,0 +1,28 @@
+export const getFavoriteProductQuery = /* GraphQL */ `
+query activeCustomer($options: FavoriteListOptions) {
+  activeCustomer {
+    id
+    firstName
+    lastName
+    emailAddress
+    favorites(options: $options){
+      items{
+        product{
+          id
+          name
+          slug
+          assets{
+            source
+            preview
+          }
+          variants{
+            priceWithTax
+            currencyCode
+          }
+        }
+      }
+      totalItems
+    }
+  }
+}
+`

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/common/ProductList/ProductList.tsx

@@ -14,10 +14,10 @@ interface ProductListProps {
     onPageChange?: (page: number) => void
 }
 
-const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
+const ProductList = ({ data, total = data?.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
     const router = useRouter()
     const {wishlistId } = useActiveCustomer();
-
+   
     const handlePageChange = (page: number) => {
         onPageChange && onPageChange(page)
     }
@@ -34,20 +34,20 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
         <div className={s.wrapper}>
             <div className={s.list}>
                 {
-                    data.map((product, index) => {
+                    data?.map((product, index) => {
                         let activeWishlist = wishlistId?.findIndex((val:string) => val == product.id) !== -1;
                         return <ProductCard activeWishlist={activeWishlist} {...product} key={index} />
                     })
                 }
                 {
-                    data.length === 0 && <div className={s.empty}>
+                    data?.length === 0 && <div className={s.empty}>
                         <EmptyCommon />
                         <ButtonCommon onClick={handleShowAllProduct}>Show all products</ButtonCommon>
                     </div>
                 }
             </div>
-            <div className={classNames(s.pagination, { [s.hide]: data.length === 0 })}>
+            <div className={classNames(s.pagination, { [s.hide]: data?.length === 0 })}>
-                <PaginationCommon defaultCurrent={defaultCurrentPage} total={total} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
+                <PaginationCommon defaultCurrent={defaultCurrentPage} total={total ?? 0} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
             </div>
         </div>
     )

src/components/hooks/account/index.ts

@@ -1,3 +1,4 @@
+export { default as useGetFavoriteProduct } from './useGetFavoriteProduct'
 export { default as useGetUserOrder } from './useGetUserOrder';
 export { default as useEditUserInfo } from './useEditUserInfo'
 export { default as useEditCustomerAddress } from './useEditCustomerAddress'

src/components/hooks/account/useGetFavoriteProduct.tsx

@@ -0,0 +1,16 @@
+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)
+  return {
+      itemWishlist: data?.activeCustomer?.favorites?.items?.map((item:Favorite) => normalizeFavoriteProductResult(item)), 
+      totalItems: data?.activeCustomer?.favorites?.totalItems,
+      ...rest 
+  }
+}
+
+export default useGetFavoriteProduct

src/components/hooks/auth/useActiveCustomer.tsx

@@ -5,7 +5,6 @@ import useSWR from 'swr'
 
 const useActiveCustomer = () => {
   const { data, ...rest } = useSWR<ActiveCustomerQuery>([activeCustomerQuery], gglFetcher)
-  
   return {
       customer: data?.activeCustomer,
       userInfo:{
@@ -15,7 +14,6 @@ const useActiveCustomer = () => {
         phoneNumber: data?.activeCustomer?.phoneNumber,
         address: data?.activeCustomer?.addresses?.[0]
       },
-      itemWishlist:data?.activeCustomer?.favorites?.items,
       wishlistId: data?.activeCustomer?.favorites?.items.map((val:Favorite)=>val.product.id),
       ...rest 
   }

src/components/hooks/product/useToggleProductWishlist.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import useActiveCustomer from '../auth/useActiveCustomer'
+import useGetFavoriteProduct from '../account/useGetFavoriteProduct'
 import { FavoriteList } from '@framework/schema'
 import fetcher from 'src/utils/fetcher'
 import { CommonError } from 'src/domains/interfaces/CommonError'
@@ -12,7 +12,7 @@ interface Props {
 const useToggleProductWishlist = () => {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<Error | null>(null)
-  const { mutate } = useActiveCustomer()
+  const { mutate } = useGetFavoriteProduct();
 
   const onToggleProductWishlist = (
     { productId }:Props ,
@@ -29,7 +29,7 @@ const useToggleProductWishlist = () => {
       .then((data) => {
         mutate()
         fCallBack(true)
-        return data
+        return data 
       })
       .catch((error) => {
         setError(error)

src/components/modules/account/AccountPage/AccountPage.module.scss

@@ -4,7 +4,17 @@
     @apply bg-background-gray;
     padding: 3.2rem 2rem;
     min-height: 70rem;
-
+    @screen xl {
+        section{
+            div{
+                div{
+                    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+                }
+            }
+        }
+    
+    }
+  
     @screen md {
         padding-left: 2.8rem;
         padding-right: 2.8rem;
@@ -28,4 +38,5 @@
             margin-bottom: 3.8rem;
         }
     }
+
 }

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

@@ -1,20 +1,31 @@
+import { QueryFavorite } from "@framework/schema"
+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, useGetUserOrder } from 'src/components/hooks/account'
+import { useActiveCustomer } from 'src/components/hooks/auth'
+import { ACCOUNT_TAB, DEFAULT_PAGE_SIZE, QUERY_KEY } from "src/utils/constanst.utils"
+import { getPageFromQuery } from 'src/utils/funtion.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';
+const waiting = [
-import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
+    {
-import { useRouter } from "next/router"
+        id: "NO 123456",
-import { useActiveCustomer} from 'src/components/hooks/auth'
+        products: ["Tomato", "Fish", "Pork", "Onion"],
-import { useGetUserOrder} from 'src/components/hooks/account'
+        totalPrice : 1000
-import { AccountProps } from "./components/AccountInfomation/AccountInfomation"
+    },
+    {
+        id: "NO 123457",
+        products: ["Tomato", "Fish", "Pork", "Onion"],
+        totalPrice : 1000
+    }
+]
+
 
 
 const delivering = [
@@ -59,6 +70,13 @@ const getTabIndex = (tab?: string): number => {
     }
 }
 
+
+const DEFAULT_FAVORITE_ARGS = {
+    options:{
+        skip:1, take:DEFAULT_PAGE_SIZE
+    }
+}
+
 const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     const router = useRouter()
 
@@ -69,9 +87,20 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
 
     const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
-    // const { itemWishlist } = useActiveCustomer();
+    const [optionQueryFavorite, setoptionQueryFavorite] = useState<QueryFavorite>(DEFAULT_FAVORITE_ARGS)
-    // console.log(itemWishlist)
+   
+    const { itemWishlist,totalItems }= useGetFavoriteProduct(optionQueryFavorite);
 
+
+    // skip
+    useEffect(() => {
+        const query = { ...DEFAULT_FAVORITE_ARGS } as QueryFavorite;
+        const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string);
+        query.options.skip = page * DEFAULT_PAGE_SIZE;
+        setoptionQueryFavorite(query);
+    },[router.query])
+
+       
     useEffect(() => {
         const query = router.query[QUERY_KEY.TAB] as string
         const index = getTabIndex(query)
@@ -101,7 +130,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
                         <OrderInfomation addingItem={addingItem} arrangingPayment={arrangingPayment} cancelled={cancelled} />
                     </TabPane>
                     <TabPane tabName="Favourite"> 
-                        <FavouriteProducts products={PRODUCT_CART_DATA_TEST}  />
+                        <FavouriteProducts products={itemWishlist} totalItems={totalItems} />
                     </TabPane>
                 </AccountNavigation>
             </section>
@@ -110,4 +139,5 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     )
 }
 
-export default AccountPage
+export default AccountPage
+

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

@@ -1,18 +1,34 @@
-import React from "react"
+import { useRouter } from 'next/router'
-import s from './FavouriteProducts.module.scss'
+import React, { useState } from "react"
-import {ProductList} from '../../../../../common'
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { ProductList } from '../../../../../common'
 import { ProductCardProps } from '../../../../../common/ProductCard/ProductCard'
-
+import s from './FavouriteProducts.module.scss'
-
 interface FavouriteProductsProps {
-    products: ProductCardProps[];
+    products: ProductCardProps[],
+    totalItems:number
 }
 
-const FavouriteProducts = ({ products } : FavouriteProductsProps) => {
+const FavouriteProducts = ({ products,totalItems } : FavouriteProductsProps) => {
+    const router = useRouter()
+    const [currentPage, setCurrentPage] = useState(0);
+    
+    function onPageChange(page:number){
+        setCurrentPage(page)
+        router.push({
+            pathname: ROUTE.ACCOUNT,
+            query: {
+              ...router.query,
+              [QUERY_KEY.PAGE]: page
+            }
+        },
+        undefined, { shallow: true }
+        )
+    }
 
     return (
         <section className={s.favouriteProducts}>
-            <ProductList data={products} />
+            <ProductList data={products} total={totalItems} onPageChange={onPageChange}/>
         </section>
     )
 }

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";