From e4b4f2c09ebd819acc204c2e58288fe9fc6294ea Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Thu, 15 Jun 2023 15:45:43 +0700 Subject: get dan delete cart --- src/lib/cart/api/CartApi.js | 12 +- src/lib/cart/components/Cart.jsx | 15 +- src/lib/cart/components/CartOld.jsx | 497 ++++++++++++++++++++++++ src/lib/invoice/components/Invoices.jsx | 2 + src/lib/promotinProgram/components/HomePage.jsx | 4 +- 5 files changed, 525 insertions(+), 5 deletions(-) create mode 100644 src/lib/cart/components/CartOld.jsx (limited to 'src/lib') diff --git a/src/lib/cart/api/CartApi.js b/src/lib/cart/api/CartApi.js index 7683a935..038479f8 100644 --- a/src/lib/cart/api/CartApi.js +++ b/src/lib/cart/api/CartApi.js @@ -1,6 +1,7 @@ import odooApi from '@/core/api/odooApi' +import { getAuth } from '@/core/utils/auth' -const CartApi = async ({ variantIds }) => { +export const CartApi = async ({ variantIds }) => { if (variantIds) { const dataCart = await odooApi('GET', `/api/v2/product_variant/${variantIds}`) return dataCart @@ -8,4 +9,11 @@ const CartApi = async ({ variantIds }) => { return null } -export default CartApi +// export default CartApi + +export const getCartApi = async () => { + const id = getAuth()?.id + const cart = await odooApi('GET', `/api/v1/user/${id}/cart`) + + return cart +} \ No newline at end of file diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index 718541af..561a0064 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -4,7 +4,7 @@ import Image from '@/core/components/elements/Image/Image' import NextImage from 'next/image' import currencyFormat from '@/core/utils/currencyFormat' import { useEffect, useState } from 'react' -import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart' +import { deleteItemCart, getCart, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart' import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline' import { createSlug } from '@/core/utils/slug' import { useRouter } from 'next/router' @@ -19,14 +19,27 @@ import productSearchApi from '@/lib/product/api/productSearchApi' import whatsappUrl from '@/core/utils/whatsappUrl' import useAuth from '@/core/hooks/useAuth' + +const { useQuery } = require('react-query') +const { getCartApi } = require('../api/CartApi') + const Cart = () => { const router = useRouter() const [products, setProducts] = useState(null) const auth = useAuth() + const { data: listCart } = useQuery('listCart', getCartApi) useEffect(() => { if (!auth) return }, [auth]) + + useEffect(() => { + if(listCart){ + setProducts(listCart.products) + } + }, [listCart]) + + console.log('product', products) const { cart } = useCart({ enabled: !products }) const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0) diff --git a/src/lib/cart/components/CartOld.jsx b/src/lib/cart/components/CartOld.jsx new file mode 100644 index 00000000..718541af --- /dev/null +++ b/src/lib/cart/components/CartOld.jsx @@ -0,0 +1,497 @@ +import Link from '@/core/components/elements/Link/Link' +import useCart from '../hooks/useCart' +import Image from '@/core/components/elements/Image/Image' +import NextImage from 'next/image' +import currencyFormat from '@/core/utils/currencyFormat' +import { useEffect, useState } from 'react' +import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart' +import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline' +import { createSlug } from '@/core/utils/slug' +import { useRouter } from 'next/router' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { toast } from 'react-hot-toast' +import Spinner from '@/core/components/elements/Spinner/Spinner' +import Alert from '@/core/components/elements/Alert/Alert' +import MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import ProductCard from '@/lib/product/components/ProductCard' +import productSearchApi from '@/lib/product/api/productSearchApi' +import whatsappUrl from '@/core/utils/whatsappUrl' +import useAuth from '@/core/hooks/useAuth' + +const Cart = () => { + const router = useRouter() + const [products, setProducts] = useState(null) + const auth = useAuth() + + useEffect(() => { + if (!auth) return + }, [auth]) + const { cart } = useCart({ enabled: !products }) + + const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0) + const [totalTaxAmount, setTotalTaxAmount] = useState(0) + const [totalDiscountAmount, setTotalDiscountAmount] = useState(0) + + const [deleteConfirmation, setDeleteConfirmation] = useState(null) + + const [productRecomendation, setProductRecomendation] = useState(null) + + useEffect(() => { + if (cart.data && !products) { + const productsWithQuantity = cart.data.map((product) => { + const productInCart = getItemCart({ productId: product.id }) + if (!productInCart) return + return { + ...product, + quantity: productInCart.quantity, + selected: productInCart.selected + } + }) + setProducts(productsWithQuantity) + } + }, [cart, products]) + + useEffect(() => { + if (!products) return + + let calculateTotalPriceBeforeTax = 0 + let calculateTotalTaxAmount = 0 + let calculateTotalDiscountAmount = 0 + for (const product of products) { + if (product.quantity == '') continue + updateItemCart({ + productId: product.id, + quantity: product.quantity, + selected: product.selected + }) + + if (!product.selected) 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 + } + setTotalPriceBeforeTax(calculateTotalPriceBeforeTax) + setTotalTaxAmount(calculateTotalTaxAmount) + setTotalDiscountAmount(calculateTotalDiscountAmount) + }, [products]) + + useEffect(() => { + const LoadProductSimilar = async () => { + const randProductIndex = Math.floor(Math.random() * products.length) + const productLoad = await productSearchApi({ + query: `q=${products?.[randProductIndex].parent.name}&limit=10&operation=OR` + }) + + setProductRecomendation(productLoad) + } + if (products?.length > 0 && !productRecomendation) LoadProductSimilar() + }, [products, productRecomendation]) + + const updateQuantity = (value, productId, operation = '') => { + let productIndex = products.findIndex((product) => product.id == productId) + if (productIndex < 0) return + + let productsToUpdate = products + let quantity = productsToUpdate[productIndex].quantity + if (value != '' && isNaN(parseInt(value))) return + value = value != '' ? parseInt(value) : '' + switch (operation) { + case 'PLUS': + quantity += value + break + case 'MINUS': + if (quantity - value < 1) return + quantity -= value + break + case 'BLUR': + if (value != '' && value > 0) return + quantity = 1 + break + default: + quantity = value != '' && value < 1 ? 1 : value + break + } + productsToUpdate[productIndex].quantity = quantity + setProducts([...productsToUpdate]) + } + + const toggleSelected = (productId) => { + let productIndex = products.findIndex((product) => product.id == productId) + if (productIndex < 0) return + + let productsToUpdate = products + productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected + setProducts([...productsToUpdate]) + } + + const selectedProduct = () => { + if (!products) return [] + return products?.filter((product) => product?.selected == true) + } + + const deleteProduct = (productId) => { + const productsToUpdate = products.filter((product) => product.id != productId) + deleteItemCart({ productId }) + setDeleteConfirmation(null) + setProducts([...productsToUpdate]) + toast.success('Berhasil menghapus barang dari keranjang') + } + + return ( + <> + setDeleteConfirmation(null)} + title='Hapus dari Keranjang' + > +
+ Apakah anda yakin menghapus barang{' '} + {deleteConfirmation?.name} dari keranjang? +
+
+ + +
+ + + +
+
+

Keranjang

+ Cari Produk Lain +
+ +
+ {cart.isLoading && ( +
+ +
+ )} + + {!cart.isLoading && (!products || products?.length == 0) && ( +
+ + Keranjang belanja anda masih kosong + +
+ )} + + {products?.map((product) => ( +
+ toggleSelected(product.id)} + checked={product?.selected} + className='mr-2 accent-danger-500 w-4' + /> + + + {product?.name} + +
+ + {product?.parent?.name} + +
+ {product?.code}{' '} + {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''} +
+ {product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
{product?.price?.discountPercentage}%
+
+ )} +
+ {currencyFormat(product?.price?.priceDiscount)} +
+
+
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)} +
+
+ + updateQuantity(e.target.value, product?.id)} + onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} + /> + + +
+
+
+
+ ))} + +
+
+
+ Total: + +   + {selectedProduct().length > 0 + ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) + : '-'} + +
+
+
+ + +
+
+
+
+ + + +
+
+

Keranjang

+ + + + + + + + + + + + + {cart.isLoading && ( + + + + )} + {!cart.isLoading && (!products || products?.length == 0) && ( + + + + )} + {products && + products?.map((product) => ( + + + + + + + + + ))} + +
Nama ProdukJumlahHargaSubtotalAction
+
+ +
+
Keranjang belanja anda masih kosong
+ toggleSelected(product.id)} + checked={product?.selected} + className='accent-danger-500 w-4' + /> + + + {product?.name} + +
+ + {product?.parent?.name} + +
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} +
+
+ 		+ updateQuantity(e.target.value, product?.id)} + onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} + /> + + {product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
+ {product?.price?.discountPercentage}% +
+
+ )} +
+ {currencyFormat(product?.price?.priceDiscount)} +
+ 		+
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)} +
+ 		+
+ +
+
+ +
+ +
+ Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran! + + {' '} + + Hubungi Kami + + +
+
+
+ +
+
+

Ringkasan Belanja

+
+
+ Total: + +   + {selectedProduct().length > 0 + ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) + : '-'} + +
+
+
+ + +
+
+
+ +
+

Produk Yang Mungkin Kamu Suka

+
+ {productRecomendation && + productRecomendation.response.products.map((product) => ( + + ))} +
+
+
+ + + ) +} + +export default Cart diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx index 5edcfdbf..b74af8c0 100644 --- a/src/lib/invoice/components/Invoices.jsx +++ b/src/lib/invoice/components/Invoices.jsx @@ -33,6 +33,8 @@ const Invoices = () => { } const { invoices } = useInvoices({ query }) + console.log('bangke', invoices) + const [inputQuery, setInputQuery] = useState(q) const [toOthers, setToOthers] = useState(null) diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx index 9ebd82dc..8d159899 100644 --- a/src/lib/promotinProgram/components/HomePage.jsx +++ b/src/lib/promotinProgram/components/HomePage.jsx @@ -6,7 +6,6 @@ import useDevice from '@/core/hooks/useDevice' import odooApi from '@/core/api/odooApi' import { LazyLoadComponent } from 'react-lazy-load-image-component' import ProductSlider from '@/lib/product/components/ProductSlider' -import ProductCard from '@/lib/product/components/ProductCard' import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton' const { useQuery } = require('react-query') @@ -28,8 +27,9 @@ const HomePage = () => { } ) + useEffect(() => { - if (titlePromotion) { + if (titlePromotion && titlePromotion.length > 0) { setActiveTab(titlePromotion[0].name) setActiveId(titlePromotion[0].id) setparentPromotions(titlePromotion) -- cgit v1.2.3