From 4f285349adec93a040e41d1d8c0c1c7b57749397 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Thu, 21 Sep 2023 14:56:35 +0700 Subject: add context for list product popup cart --- src/lib/cart/components/Cartheader.jsx | 309 +++++++++++++++------ src/lib/product/api/productSimilarApi.js | 12 +- .../product/components/Product/ProductDesktop.jsx | 4 + 3 files changed, 231 insertions(+), 94 deletions(-) (limited to 'src/lib') diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx index 1760360d..3fc959d4 100644 --- a/src/lib/cart/components/Cartheader.jsx +++ b/src/lib/cart/components/Cartheader.jsx @@ -1,49 +1,128 @@ -import { useEffect, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import { getCartApi } from '../api/CartApi' import currencyFormat from '@/core/utils/currencyFormat' import Image from '@/core/components/elements/Image/Image' import { createSlug } from '@/core/utils/slug' +import useAuth from '@/core/hooks/useAuth' +import { useRouter } from 'next/router' +import odooApi from '@/core/api/odooApi' +import { useProductCartContext } from '@/contexts/ProductCartContext' -const { ShoppingCartIcon } = require('@heroicons/react/24/outline') +const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline') const { default: Link } = require('next/link') const Cardheader = (cartCount) => { - const [count, setCardCount] = useState(null) - const [products, setProducts] = useState(null) + const router = useRouter() + const [subTotal, setSubTotal] = useState(null) + const [buttonLoading, SetButtonTerapkan] = useState(false) + const itemLoading = [1, 2, 3] + const auth = useAuth() + const [countCart, setCountCart] = useState(null) + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() - const getCart = async () => { - const listCart = await getCartApi() - setProducts(listCart.products) + const [isHovered, setIsHovered] = useState(false) + + const products = useMemo(() => { + return productCart?.products || [] + }, [productCart]) + + + const handleMouseEnter = () => { + setIsHovered(true) + getCart() + } + + const handleMouseLeave = () => { + setIsHovered(false) + } + + const getCart = () => { + if (!productCart && auth) { + refreshCartf() + } } + const refreshCartf = useCallback(async () => { + setIsloading(true) + let cart = await getCartApi() + setProductCart(cart) + setCountCart(cart.productTotal) + setIsloading(false) + }, [setProductCart]) useEffect(() => { - getCart() + if (!products) return + + let calculateTotalPriceBeforeTax = 0 + let calculateTotalTaxAmount = 0 + let calculateTotalDiscountAmount = 0 + for (const product of products) { + if (product.quantity == '') continue + + let priceBeforeTax = product.price.price / 1.11 + calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity + calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity + calculateTotalDiscountAmount += + (product.price.price - product.price.priceDiscount) * product.quantity + } + let subTotal = + calculateTotalPriceBeforeTax - calculateTotalDiscountAmount + calculateTotalTaxAmount + setSubTotal(subTotal) + }, [products]) + + useEffect(() => { + if (refreshCart) { + refreshCartf() + } + setRefreshCart(false) + }, [refreshCart, refreshCartf, setRefreshCart]) + + useEffect(() => { + setCountCart(cartCount.cartCount) }, []) + const handleCheckout = async () => { + SetButtonTerapkan(true) + let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`) + router.push('/shop/checkout') + } + return (
- + +
0 && 'mr-2'}`}> + + {countCart > 0 && ( + + {countCart} + + )} +
+ + Keranjang +
+ Belanja + + +
+
+
-
0 && 'mr-2'}`}> - - {cartCount.cartCount > 0 && ( - - {cartCount.cartCount} - - )} -
- - Keranjang -
- Belanja - - - {/*
*/} -
Keranjang Belanja
@@ -53,71 +132,121 @@ const Cardheader = (cartCount) => {
-
    - {products && - products?.map((product, index) => ( - <> -
  • -
    -
    - - {product?.name} - -
    -
    - - {' '} -

    - {product.parent.name} -

    - - - {product?.price?.discountPercentage > 0 && ( -
    -
    - {product?.price?.discountPercentage}% -
    -
    - {currencyFormat(product?.price?.price)} -
    + {!auth && ( +
    +

    + Silahkan{' '} + + Login + {' '} + Untuk Melihat Daftar Keranjang Belanja Anda +

    +
    + )} + {isLoading && + itemLoading.map((item) => ( +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + ))} + {products.length === 0 && !isLoading && ( +
    +

    + Tidak Ada Produk di Keranjang Belanja Anda +

    +
    + )} + {products.length > 0 && !isLoading && ( + <> +
      + {products && + products?.map((product, index) => ( + <> +
    • +
      +
      + + {product?.name} +
      - )} -
      -
      - {currencyFormat(product?.price?.priceDiscount)} +
      + + {' '} +

      + {product.parent.name} +

      + + + {product?.price?.discountPercentage > 0 && ( +
      +
      + {product?.price?.discountPercentage}% +
      +
      + {currencyFormat(product?.price?.price)} +
      +
      + )} +
      +
      + {currencyFormat(product?.price?.priceDiscount)} +
      +
      -
      -
      -
      • - - ))} -
    -
    +
    • + + ))} +
+
+ + )}
- {/*
- - Buka Keranjang Belanja - -
*/} + {products.length > 0 && !isLoading && ( + <> +
+ Sub Total Sebelum PPN : + Rp. {currencyFormat(subTotal)} +
+
+ +
+ + )}
diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js index c1bccd59..a008ce5d 100644 --- a/src/lib/product/api/productSimilarApi.js +++ b/src/lib/product/api/productSimilarApi.js @@ -21,10 +21,14 @@ const productSimilarApi = async ({ query, source }) => { const dataProductSimilar = await axios( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR` ) - dataProductSimilar.data.response.products = [ - ...dataflashSale, - ...dataProductSimilar.data.response.products, - ]; + if (dataflashSale) { + dataProductSimilar.data.response.products = [ + ...dataflashSale, + ...dataProductSimilar.data.response.products + ] + } else { + dataProductSimilar.data.response.products = [...dataProductSimilar.data.response.products] + } return dataProductSimilar.data.response } diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 937f2746..6da289bc 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -22,6 +22,7 @@ import ImageNext from 'next/image' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import { LazyLoadComponent } from 'react-lazy-load-image-component' import ColumnsSLA from './ColumnsSLA' +import { useProductCartContext } from '@/contexts/ProductCartContext' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -39,6 +40,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) + const {setRefreshCart , refreshCart} = useProductCartContext() + const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) const lowest = prices.reduce((lowest, price) => { @@ -116,6 +119,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { let source = 'cart' updateCart(variantId, quantity, source) + setRefreshCart(true) setAddCartAlert(true) } -- cgit v1.2.3