add product to cart, update product in cart, remove product form cart

framework/commerce/types/cart.ts

@@ -17,6 +17,7 @@ export type LineItem = {
   quantity: number
   discounts: Discount[]
   // A human-friendly unique string automatically generated from the product’s name
+  slug: string
   path: string
   variant: ProductVariant
   options?: SelectedOption[]

framework/commerce/types/product.ts

@@ -60,6 +60,7 @@ export type ProductCard = {
   // TODO: collection
   category?: string,
   isNotSell?: boolean
+  productVariantId?:string
 }
 
 export type SearchProductsBody = {

framework/vendure/schema.d.ts

@@ -3038,7 +3038,7 @@ export type SearchResultFragment = { __typename?: 'SearchResult' } & Pick<
   SearchResult,
   'productId' | 'sku' | 'productName' | 'description' | 'slug' | 'sku' | 'currencyCode'
   | 'productAsset' | 'price' | 'priceWithTax' | 'currencyCode' 
-  | 'collectionIds' 
+  | 'collectionIds' | 'productVariantId'
 > & {
     productAsset?: Maybe<
       { __typename?: 'SearchResultAsset' } & Pick<

framework/vendure/utils/fragments/search-result-fragment.ts

@@ -7,6 +7,7 @@ export const searchResultFragment = /* GraphQL */ `
     slug
     sku
     currencyCode
+    productVariantId
     productAsset {
       id
       preview

framework/vendure/utils/normalize.ts

@@ -11,6 +11,7 @@ export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
     imageSrc: item.productAsset?.preview ? item.productAsset?.preview + '?w=800&mode=crop' : '',
     price: (item.priceWithTax as any).min / 100,
     currencyCode: item.currencyCode,
+    productVariantId: item.productVariantId?item.productVariantId:"",
     
     // TODO:
     // oldPrice: item.price
@@ -35,7 +36,7 @@ export function normalizeCart(order: CartFragment): Cart {
       id: l.id,
       name: l.productVariant.name,
       quantity: l.quantity,
-      url: l.productVariant.product.slug,
+      slug: l.productVariant.product.slug,
       variantId: l.productVariant.id,
       productId: l.productVariant.productId,
       images: [{ url: l.featuredAsset?.preview + '?preset=thumb' || '' }],

pages/index.tsx

@@ -17,6 +17,7 @@ interface Props {
   featuredProducts: ProductCard[],
 }
 export default function Home({ freshProducts, featuredProducts, veggie }: Props) {
+  // console.log("veggie",veggie)
   return (
     <>
       <HomeBanner />

src/components/common/CartDrawer/CartDrawer.tsx

@@ -1,3 +1,4 @@
+import { normalizeCart } from '@framework/utils/normalize';
 import React from 'react';
 import { useCartDrawer } from 'src/components/contexts';
 import useGetActiveOrder from 'src/components/hooks/cart/useGetActiveOrder';
@@ -18,12 +19,12 @@ const CartDrawer = ({ }: Props) => {
   const {order} = useGetActiveOrder()
   return (
     <DrawerCommon
-      title={`Your cart (${order?.totalQuantity})`}
+      title={`Your cart (${order?.lineItems.length})`}
       visible={cartVisible}
       onClose={closeCartDrawer}>
       <div className={s.cartDrawer}>
         <div className={s.body}>
-          <ProductsInCart data={PRODUCT_CART_DATA_TEST} />
+          <ProductsInCart data={order?.lineItems||[]} currency={order?.currency||{code:"USA"}}/>
           <CartRecommendation />
         </div>
         <div>

src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx

@@ -1,25 +1,64 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react'
 import Link from 'next/link'
-import { QuanittyInput } from 'src/components/common';
+import { ModalConfirm, QuanittyInput } from 'src/components/common'
-import { IconDelete } from 'src/components/icons';
+import { IconDelete } from 'src/components/icons'
-import { ROUTE } from 'src/utils/constanst.utils';
+import { ROUTE } from 'src/utils/constanst.utils'
-import { ProductProps } from 'src/utils/types.utils';
+import ImgWithLink from '../../../ImgWithLink/ImgWithLink'
-import ImgWithLink from '../../../ImgWithLink/ImgWithLink';
+import LabelCommon from '../../../LabelCommon/LabelCommon'
-import LabelCommon from '../../../LabelCommon/LabelCommon';
+import s from './ProductCartItem.module.scss'
-import s from './ProductCartItem.module.scss';
+import { LineItem } from '@commerce/types/cart'
+import { useUpdateProductInCart } from 'src/components/hooks/cart'
+import { debounce } from 'lodash'
+import useRemoveProductInCart from 'src/components/hooks/cart/useRemoveProductInCart'
 
-export interface ProductCartItempProps extends ProductProps {
+export interface ProductCartItempProps extends LineItem {
-  quantity: number,
+  currency: { code: string }
 }
 
-const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageSrc, quantity }: ProductCartItempProps) => {
+const ProductCartItem = ({
+  slug,
+  discounts,
+  quantity,
+  variant,
+  name,
+  currency,
+  id
+}: ProductCartItempProps) => {
+  const [visible, setVisible] = useState(false)
+  const {updateProduct} = useUpdateProductInCart()
+  const {removeProduct, loading} = useRemoveProductInCart()
+  const handleQuantityChangeCallback = (isSuccess:boolean,mess?:string) => {
+    if(!isSuccess){
+      console.log(mess)
+    }
+  }
+  const handleRemoveCallback = (isSuccess:boolean,mess?:string) => {
+    if(!isSuccess){
+      console.log(mess)
+    }else{
+      setVisible(false)
+    }
+  }
+  const handleQuantityChange = (value:number) => {
+    updateProduct({orderLineId:id,quantity:value},handleQuantityChangeCallback)
+  }
+  const debounceFn = useCallback(debounce(handleQuantityChange, 500), []);
+  const handleCancel = () => {
+    setVisible(false)
+  }
+  const handleOpen = () => {
+    setVisible(true)
+  }
+  const handleConfirm = () => {
+    removeProduct({orderLineId:id},handleRemoveCallback)
+  }
   return (
     <div className={s.productCartItem}>
       <div className={s.info}>
         <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
           <a href="">
             <div className={s.imgWrap}>
-              <ImgWithLink src={imageSrc} alt={name} />
+              <ImgWithLink src={variant?.image?.url ?? ''} alt={name} />
             </div>
           </a>
         </Link>
@@ -27,30 +66,32 @@ const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageS
           <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
             <a>
               <div className={s.name}>
-                {name} {weight ? `(${weight})` : ''}
+                {name} {variant?.weight ? `(${variant.weight})` : ''}
               </div>
             </a>
           </Link>
           <div className={s.price}>
-            {
+            {discounts.length > 0 && (
-              oldPrice &&
+                <div className={s.old}>
-              <div className={s.old}>
+                  {/* <span className={s.number}>{oldPrice}</span> */}
-                <span className={s.number}>{oldPrice}</span>
+                  <LabelCommon type="discount">{discounts[0]}</LabelCommon>
-                <LabelCommon type='discount'>{discount}</LabelCommon>
+                </div>
-              </div>
+            )}
-            }
+            <div className={s.current}>{variant?.price} {currency?.code}</div>
-            <div className={s.current}>{price}</div>
           </div>
         </div>
       </div>
       <div className={s.actions}>
-        <div className={s.iconDelete}>
+        <div className={s.iconDelete} onClick={handleOpen}>
           <IconDelete />
         </div>
-        <QuanittyInput size='small' initValue={quantity} />
+        <QuanittyInput size="small" initValue={quantity} onChange={debounceFn}/>
       </div>
+      <ModalConfirm visible={visible} onClose={handleCancel} onCancel={handleCancel} onOk={handleConfirm} loading={loading}>
+        Are you sure want to remove {name} form your cart
+      </ModalConfirm>
     </div>
   )
 }
 
-export default ProductCartItem;
+export default ProductCartItem

src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx

@@ -1,25 +1,21 @@
+import { LineItem } from '@commerce/types/cart';
 import React from 'react';
 import ProductCartItem, { ProductCartItempProps } from '../ProductCartItem/ProductCartItem';
 import s from './ProductsInCart.module.scss';
 
 interface Props {
-  data: ProductCartItempProps[]
+  data: LineItem[]
+  currency: { code: string }
 }
 
-const ProductsInCart = ({ data }: Props) => {
+const ProductsInCart = ({ data, currency }: Props) => {
   return (
     <ul className={s.productsInCart}>
       {
         data.map(item => <li key={item.name}>
           <ProductCartItem
-            name={item.name}
+            currency = {currency}
-            slug={item.slug}
+            {...item}
-            weight={item.weight}
-            price={item.price}
-            oldPrice={item.oldPrice}
-            discount={item.discount}
-            imageSrc={item.imageSrc}
-            quantity={item.quantity}
           />
         </li>)
       }

src/components/common/ModalConfirm/ModalConfirm.tsx

@@ -5,6 +5,7 @@ import s from './ModalConfirm.module.scss'
 interface ModalConfirmProps extends ModalCommonProps {
   okText?: String
   cancelText?: String
+  loading?:boolean
   onOk?: () => void
   onCancel?: () => void
 }
@@ -16,6 +17,7 @@ const ModalConfirm = ({
   onCancel,
   children,
   title = 'Confirm',
+  loading,
   ...props
 }: ModalConfirmProps) => {
   return (
@@ -25,7 +27,7 @@ const ModalConfirm = ({
         <div className="mr-4">
           <ButtonCommon onClick={onCancel} type="light"> {cancelText}</ButtonCommon>
         </div>
-          <ButtonCommon onClick={onOk}>{okText}</ButtonCommon>
+          <ButtonCommon onClick={onOk} loading={loading}>{okText}</ButtonCommon>
       </div>
     </ModalCommon>
   )

src/components/common/ProductCard/ProductCard.tsx

@@ -10,13 +10,14 @@ import ItemWishList from '../ItemWishList/ItemWishList'
 import LabelCommon from '../LabelCommon/LabelCommon'
 import s from './ProductCard.module.scss'
 import ProductNotSell from './ProductNotSell/ProductNotSell'
-
+import {useAddProductToCart} from "../../hooks/cart"
 export interface ProductCardProps extends ProductCard {
   buttonText?: string
   isSingleButton?: boolean,
 }
 
 const ProductCardComponent = ({
+  id,
   category,
   name,
   slug,
@@ -27,7 +28,18 @@ const ProductCardComponent = ({
   imageSrc,
   isNotSell,
   isSingleButton,
+  productVariantId,
 }: ProductCardProps) => {
+
+  const {addProduct,loading,error} = useAddProductToCart()
+  const handleAddToCart = () => {
+    if(productVariantId){
+      addProduct({variantId:productVariantId,quantity:1},handleAddToCartCallback)
+    }
+  }
+  const handleAddToCartCallback = () => {
+
+  }
   if (isNotSell) {
     return <div className={`${s.productCardWarpper} ${s.notSell}`}>
       <ProductNotSell name={name} imageSrc={imageSrc} />
@@ -71,12 +83,12 @@ const ProductCardComponent = ({
         {
           isSingleButton ?
             <div className={s.cardButton}>
-              <ButtonCommon type="light" icon={<IconBuy />} size='small'>Add to cart</ButtonCommon>
+              <ButtonCommon type="light" icon={<IconBuy />} size='small' >Add to cart</ButtonCommon>
             </div>
             :
             <>
-              <div className={s.cardIcon}>
+              <div className={s.cardIcon} >
-                <ButtonIconBuy/>
+                <ButtonIconBuy onClick={handleAddToCart} loading={loading}/>
               </div>
               <div className={s.cardButton}>
                 <ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>

src/components/common/QuanittyInput/QuanittyInput.tsx

@@ -26,10 +26,6 @@ const QuanittyInput = ({
 }: QuanittyInputProps) => {
   const [value, setValue] = useState<number>(0)
 
-  useEffect(() => {
-    onChange && onChange(value)
-  }, [value])
-
   useEffect(() => {
     initValue && setValue(initValue)
   }, [initValue])
@@ -37,16 +33,20 @@ const QuanittyInput = ({
   const onPlusClick = () => {
     if (max && value + step > max) {
       setValue(max)
+      onChange && onChange(max)
     } else {
       setValue(value + step)
+      onChange && onChange(value + step)
     }
   }
 
   const onMinusClick = () => {
     if (min && value - step < min) {
       setValue(min)
+      onChange && onChange(min)
     } else {
       setValue(value - step)
+      onChange && onChange(value - step)
     }
   }
 
@@ -54,10 +54,13 @@ const QuanittyInput = ({
     let value = Number(e.target.value) || 0
     if (min && value < min) {
       setValue(min)
+      onChange && onChange(min)
     } else if (max && value > max) {
       setValue(max)
+      onChange && onChange(max)
     } else {
       setValue(value)
+      onChange && onChange(value)
     }
   }
 

src/components/hooks/cart/index.ts

@@ -1,2 +1,3 @@
 export { default as useAddProductToCart } from './useAddProductToCart'
+export { default as useUpdateProductInCart } from './useUpdateProductInCart'
 export { default as useGetActiveOrder } from './useGetActiveOrder'

src/components/hooks/cart/useGetActiveOrder.tsx

@@ -1,5 +1,7 @@
+import { Cart } from '@commerce/types/cart'
 import { ActiveOrderQuery } from '@framework/schema'
 import { cartFragment } from '@framework/utils/fragments/cart-fragment'
+import { normalizeCart } from '@framework/utils/normalize'
 import { gql } from 'graphql-request'
 import gglFetcher from 'src/utils/gglFetcher'
 import useSWR from 'swr'
@@ -14,7 +16,8 @@ const query = gql`
 
 const useGetActiveOrder = () => {
   const { data, ...rest } = useSWR<ActiveOrderQuery>([query], gglFetcher)
-  return { order: data?.activeOrder, ...rest }
+  return { order: data?.activeOrder ? normalizeCart(data!.activeOrder) : null, ...rest }
+  
 }
 
 export default useGetActiveOrder

src/components/hooks/cart/useRemoveProductInCart.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { CommonError } from 'src/domains/interfaces/CommonError'
+import rawFetcher from 'src/utils/rawFetcher'
+import { AdjustOrderLineMutationVariables,AdjustOrderLineMutation, RemoveOrderLineMutation, RemoveOrderLineMutationVariables  } from '@framework/schema'
+import { errorMapping } from 'src/utils/errrorMapping'
+import { useGetActiveOrder } from '.'
+import { adjustOrderLineMutation } from '@framework/utils/mutations/adjust-order-line-mutation'
+import { removeOrderLineMutation } from '@framework/utils/mutations/remove-order-line-mutation'
+
+const useRemoveProductInCart = () => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<CommonError | null>(null)
+  const { mutate } = useGetActiveOrder()
+
+  const removeProduct = (options:RemoveOrderLineMutationVariables,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+    ) => {
+    setError(null)
+    setLoading(true)
+    rawFetcher<RemoveOrderLineMutation>({
+      query: removeOrderLineMutation ,
+      variables: options,
+    })
+      .then(({ data }) => {
+        if (data.removeOrderLine.__typename !== "Order") {
+          throw CommonError.create(errorMapping(data.removeOrderLine.message), data.removeOrderLine.errorCode)
+        }
+        mutate()
+        fCallBack(true)
+      })
+      .catch((error) => {
+        setError(error)
+        fCallBack(false, error.message)
+      })
+      .finally(() => setLoading(false))
+  }
+
+  return { loading, removeProduct, error }
+}
+
+export default useRemoveProductInCart

src/components/hooks/cart/useUpdateProductInCart.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { CommonError } from 'src/domains/interfaces/CommonError'
+import rawFetcher from 'src/utils/rawFetcher'
+import { AdjustOrderLineMutationVariables,AdjustOrderLineMutation  } from '@framework/schema'
+import { errorMapping } from 'src/utils/errrorMapping'
+import { useGetActiveOrder } from '.'
+import { adjustOrderLineMutation } from '@framework/utils/mutations/adjust-order-line-mutation'
+
+const useUpdateProductInCart = () => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<CommonError | null>(null)
+  const { mutate } = useGetActiveOrder()
+
+  const updateProduct = (options:AdjustOrderLineMutationVariables,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+    ) => {
+    setError(null)
+    setLoading(true)
+    rawFetcher<AdjustOrderLineMutation>({
+      query: adjustOrderLineMutation ,
+      variables: options,
+    })
+      .then(({ data }) => {
+        if (data.adjustOrderLine.__typename !== "Order") {
+          throw CommonError.create(errorMapping(data.adjustOrderLine.message), data.adjustOrderLine.errorCode)
+        }
+        mutate()
+        fCallBack(true)
+      })
+      .catch((error) => {
+        setError(error)
+        fCallBack(false, error.message)
+      })
+      .finally(() => setLoading(false))
+  }
+
+  return { loading, updateProduct, error }
+}
+
+export default useUpdateProductInCart

src/domains/enums/Message.ts

@@ -0,0 +1,2 @@
+
+