89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
import { addToCart, showAlert } from 'store'
|
|
|
|
import { existItem } from 'utils'
|
|
|
|
import { ArrowLink, ProductPrice, CartButtons } from 'components'
|
|
|
|
import { useAppDispatch, useAppSelector } from 'hooks'
|
|
|
|
const AddToCartOperation = props => {
|
|
//? Props
|
|
const { product } = props
|
|
|
|
//? Assets
|
|
const dispatch = useAppDispatch()
|
|
|
|
//? Store
|
|
const { cartItems, tempColor, tempSize } = useAppSelector(state => state.cart)
|
|
|
|
//? State
|
|
const [currentItemInCart, setCurrentItemInCart] = useState(undefined)
|
|
|
|
//? Re-Renders
|
|
useEffect(() => {
|
|
const item = existItem(cartItems, product._id, tempColor, tempSize)
|
|
setCurrentItemInCart(item)
|
|
}, [tempColor, tempSize, cartItems])
|
|
|
|
//? handlers
|
|
const handleAddItem = () => {
|
|
if (product.inStock === 0)
|
|
return dispatch(
|
|
showAlert({
|
|
status: 'error',
|
|
title: '此商品缺货',
|
|
})
|
|
)
|
|
|
|
dispatch(
|
|
addToCart({
|
|
productID: product._id,
|
|
name: product.title,
|
|
price: product.price,
|
|
discount: product.discount,
|
|
inStock: product.inStock,
|
|
sold: product.sold,
|
|
color: tempColor,
|
|
size: tempSize,
|
|
img: product.images[0],
|
|
quantity: 1,
|
|
})
|
|
)
|
|
}
|
|
|
|
//? Render(s)
|
|
return (
|
|
<div className="flex items-center justify-between p-3 bg-white border-t border-gray-300 sm:px-5 lg:py-3 lg:p-0 shadow-3xl lg:sticky lg:flex-col-reverse lg:top-32 lg:bg-gray-100 lg:gap-y-4 lg:border-t-0 lg:shadow-none">
|
|
{currentItemInCart ? (
|
|
<div className="flex w-full gap-x-4">
|
|
<div className="w-44 lg:w-1/2 ">
|
|
<CartButtons item={currentItemInCart} />
|
|
</div>
|
|
<div className="hidden lg:block">
|
|
<ArrowLink path="/checkout/cart">查看购物车</ArrowLink>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button onClick={handleAddItem} className="px-12 text-sm lg:w-full btn">
|
|
添加到购物车
|
|
</button>
|
|
)}
|
|
|
|
<div className="lg:self-end min-w-fit">
|
|
<ProductPrice
|
|
inStock={product.inStock}
|
|
discount={product.discount}
|
|
price={product.price}
|
|
singleProduct
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AddToCartOperation
|