feat: buynow

:%s
This commit is contained in:
DatNguyen
2021-10-11 10:18:23 +07:00
parent 66a42d0a26
commit 820e93652f

View File

@@ -11,6 +11,8 @@ import LabelCommon from '../LabelCommon/LabelCommon'
import s from './ProductCard.module.scss' import s from './ProductCard.module.scss'
import ProductNotSell from './ProductNotSell/ProductNotSell' import ProductNotSell from './ProductNotSell/ProductNotSell'
import {useAddProductToCart} from "../../hooks/cart" import {useAddProductToCart} from "../../hooks/cart"
import { useCartDrawer } from 'src/components/contexts'
import Router from 'next/router'
export interface ProductCardProps extends ProductCard { export interface ProductCardProps extends ProductCard {
buttonText?: string buttonText?: string
isSingleButton?: boolean, isSingleButton?: boolean,
@@ -31,21 +33,36 @@ const ProductCardComponent = ({
productVariantId, productVariantId,
}: ProductCardProps) => { }: ProductCardProps) => {
const {addProduct,loading,error} = useAddProductToCart() const {addProduct,loading} = useAddProductToCart()
const { openCartDrawer } = useCartDrawer()
const handleAddToCart = () => { const handleAddToCart = () => {
if(productVariantId){ if(productVariantId){
addProduct({variantId:productVariantId,quantity:1},handleAddToCartCallback) addProduct({variantId:productVariantId,quantity:1},handleAddToCartCallback)
} }
} }
const handleAddToCartCallback = () => { const handleAddToCartCallback = () => {
openCartDrawer && openCartDrawer()
} }
const handleBuyNowCallback = (success:boolean) => {
if(success){
Router.push(ROUTE.CHECKOUT)
}
}
const handleBuyNow = () => {
if(productVariantId){
addProduct({variantId:productVariantId,quantity:1},handleBuyNowCallback)
}
}
if (isNotSell) { if (isNotSell) {
return <div className={`${s.productCardWarpper} ${s.notSell}`}> return <div className={`${s.productCardWarpper} ${s.notSell}`}>
<ProductNotSell name={name} imageSrc={imageSrc} /> <ProductNotSell name={name} imageSrc={imageSrc} />
</div> </div>
} }
return ( return (
<div className={s.productCardWarpper}> <div className={s.productCardWarpper}>
<div className={s.cardTop}> <div className={s.cardTop}>
@@ -83,7 +100,7 @@ const ProductCardComponent = ({
{ {
isSingleButton ? isSingleButton ?
<div className={s.cardButton}> <div className={s.cardButton}>
<ButtonCommon type="light" icon={<IconBuy />} size='small' >Add to cart</ButtonCommon> <ButtonCommon type="light" icon={<IconBuy />} size='small' onClick={handleAddToCart}>Add to cart</ButtonCommon>
</div> </div>
: :
<> <>
@@ -91,7 +108,7 @@ const ProductCardComponent = ({
<ButtonIconBuy onClick={handleAddToCart} loading={loading}/> <ButtonIconBuy onClick={handleAddToCart} loading={loading}/>
</div> </div>
<div className={s.cardButton}> <div className={s.cardButton}>
<ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon> <ButtonCommon type="light" size='small' onClick={handleBuyNow}>{buttonText}</ButtonCommon>
</div> </div>
</> </>
} }