diff options
Diffstat (limited to 'src/lib/checkout/components/Checkout.jsx')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 272 |
1 files changed, 142 insertions, 130 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 0c7a35fa..9c026372 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -4,15 +4,14 @@ import Link from '@/core/components/elements/Link/Link' import useAuth from '@/core/hooks/useAuth' import { getItemAddress } from '@/core/utils/address' import addressesApi from '@/lib/address/api/addressesApi' -import CartApi from '@/lib/cart/api/CartApi' import { ExclamationCircleIcon } from '@heroicons/react/24/outline' import React, { useEffect, useRef, useState } from 'react' import _ from 'lodash' -import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart' +import { deleteItemCart, getCartApi } from '@/core/utils/cart' import currencyFormat from '@/core/utils/currencyFormat' import { toast } from 'react-hot-toast' import getFileBase64 from '@/core/utils/getFileBase64' -import checkoutApi from '../api/checkoutApi' +// import checkoutApi from '../api/checkoutApi' import { useRouter } from 'next/router' import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' import axios from 'axios' @@ -24,14 +23,20 @@ import ExpedisiList from '../api/ExpedisiList' import whatsappUrl from '@/core/utils/whatsappUrl' import { createSlug } from '@/core/utils/slug' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { useQuery } from 'react-query' import { gtagPurchase } from '@/core/utils/googleTag' import { findVoucher, getVoucher } from '../api/getVoucher' const SELF_PICKUP_ID = 32 +const { checkoutApi } = require('../api/checkoutApi') +const { getProductsCheckout } = require('../api/checkoutApi') + const Checkout = () => { const router = useRouter() const auth = useAuth() + const { data: cartCheckout } = useQuery('cartCheckout', getProductsCheckout) + const [selectedAddress, setSelectedAddress] = useState({ shipping: null, invoicing: null @@ -68,8 +73,6 @@ const Checkout = () => { }, [addresses]) const [products, setProducts] = useState(null) - const [totalAmount, setTotalAmount] = useState(0) - const [totalDiscountAmount, setTotalDiscountAmount] = useState(0) const [totalWeight, setTotalWeight] = useState(0) const [priceCheck, setPriceCheck] = useState(false) const [listExpedisi, setExpedisi] = useState([]) @@ -167,52 +170,10 @@ const Checkout = () => { }, [activeVoucher, listVouchers]) useEffect(() => { - const loadProducts = async () => { - let variantIds = '' - let { query } = router - if (query?.productId) { - variantIds = query.productId - } else { - const cart = getCart() - variantIds = _.filter(cart, (o) => o.selected == true) - .map((o) => o.productId) - .join(',') - } - - const dataProducts = await CartApi({ variantIds }) - const productsWithQuantity = dataProducts?.map((product) => { - if (product.price.priceDiscount == 0) setPriceCheck(true) - return { - ...product, - quantity: query.quantity - ? query.quantity - : getItemCart({ productId: product.id }).quantity - } - }) - setProducts(productsWithQuantity) - } - loadProducts() - }, [router]) - - useEffect(() => { - if (products) { - let calculateTotalAmount = 0 - let calculateTotalDiscountAmount = 0 - let calcuateTotalWeight = 0 - products.forEach((product) => { - calculateTotalAmount += product.price.price * product.quantity - calculateTotalDiscountAmount += - (product.price.price - product.price.priceDiscount) * product.quantity - calcuateTotalWeight += product.weight * product.quantity - if (product.weight == 0) { - setCheckWeight(true) - } - }) - setTotalAmount(calculateTotalAmount) - setTotalDiscountAmount(calculateTotalDiscountAmount) - setTotalWeight(calcuateTotalWeight * 1000) - } - }, [products]) + setProducts(cartCheckout?.products) + setCheckWeight(cartCheckout?.hasProductWithoutWeight) + setTotalWeight(cartCheckout?.totalWeight.g) + }, [cartCheckout]) useEffect(() => { setCheckoutValidation(false) @@ -308,6 +269,7 @@ const Checkout = () => { let data = { partner_shipping_id: auth.partnerId, partner_invoice_id: auth.partnerId, + user_id : auth.id, order_line: JSON.stringify(productOrder), delivery_amount: biayaKirim, carrier_id: selectedCarrierId, @@ -599,7 +561,7 @@ const Checkout = () => { <div className='flex flex-col gap-y-4'> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Total Belanja</div> - <div>{currencyFormat(totalAmount)}</div> + <div>{currencyFormat(cartCheckout?.totalPurchase)}</div> </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Diskon Produk</div> @@ -613,11 +575,11 @@ const Checkout = () => { )} <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Subtotal</div> - <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div> + <div>{currencyFormat(cartCheckout?.subtotal)}</div> </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>PPN 11%</div> - <div>{currencyFormat(taxTotal)}</div> + <div>{currencyFormat(cartCheckout?.tax)}</div> </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'> @@ -631,11 +593,7 @@ const Checkout = () => { <div>Grand Total</div> <div className='font-semibold text-gray_r-12'> {currencyFormat( - totalAmount - - totalDiscountAmount - - discountVoucher + - taxTotal + - Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 )} </div> </div> @@ -779,73 +737,131 @@ const Checkout = () => { </thead> <tbody> {products?.map((product) => ( - <tr key={product.id}> - <td className='flex'> - <div className='w-[20%] flex-shrink-0'> - <Image - src={product?.parent?.image} - alt={product?.name} - className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' - /> - </div> - <div className='px-2 text-left'> - <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'> - {product?.parent?.name} - </div> - <div className='text-gray_r-11 mt-2'> - {product?.code}{' '} - {product?.attributes.length > 0 - ? `| ${product?.attributes.join(', ')}` - : ''} - </div> - <div className='text-gray_r-11 mt-2'> - Berat item : {product?.weight} Kg + <> + <tr + key={product.id} + className={`${product.program ? '!border-t-0 !border-b-0' : ''}`} + > + <td className='flex'> + <div className='w-[20%] flex-shrink-0'> + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> </div> - </div> - </td> - <td> - <input - className='form-input w-16 py-2 text-center bg-gray_r-1' - type='number' - value={product?.quantity} - disabled - /> - </td> - <td> - {product?.price?.discountPercentage > 0 && ( - <div className='flex gap-x-1 items-center justify-center mt-3'> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(product?.price?.price)} + <div className='px-2 text-left'> + <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'> + {product?.parent?.name} + </div> + <div className='text-gray_r-11 mt-2'> + {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} </div> - <div className='badge-solid-red'> - {product?.price?.discountPercentage}% + <div className='text-gray_r-11 mt-2'> + Berat item : {product?.weight} Kg </div> </div> - )} - <div className='font-normal mt-1'> - {product.price.priceDiscount > 0 - ? currencyFormat(product?.price?.priceDiscount) - : 'Call For Price'} - </div> - </td> - <td> - <div className='text-danger-500 font-medium'> - {product.price.priceDiscount > 0 ? ( - currencyFormat(product?.price?.priceDiscount * product?.quantity) - ) : ( - <a - href={whatsappUrl('product', { - name: product.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='underline' - > - Call For Price{' '} - </a> + </td> + <td> + <input + className='form-input w-16 py-2 text-center bg-gray_r-1' + type='number' + value={product?.quantity} + disabled + /> + </td> + <td> + {product?.price?.discountPercentage > 0 && ( + <div className='flex gap-x-1 items-center justify-center mt-3'> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(product?.price?.price)} + </div> + <div className='badge-solid-red'> + {product?.price?.discountPercentage}% + </div> + </div> )} - </div> - </td> - </tr> + <div className='font-normal mt-1'> + {product.price.priceDiscount > 0 + ? currencyFormat(product?.price?.priceDiscount) + : 'Call For Price'} + </div> + </td> + <td> + <div className='text-danger-500 font-medium'> + {product.price.priceDiscount > 0 ? ( + currencyFormat(product?.price?.priceDiscount * product?.quantity) + ) : ( + <a + href={whatsappUrl('product', { + name: product.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='underline' + > + Call For Price{' '} + </a> + )} + </div> + </td> + </tr> + {product.program && + product.program.items && + product.program.items.map((item) => ( + <> + <tr key={product?.program?.id} className='!border-t-0'> + <td className='flex'> + <div className='w-[20%] flex-shrink-0'> + <Image + src={item.parent.image} + alt={item.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> + </div> + <div className='px-2 text-left'> + <div className=''> + <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'> + {product.program.type.label} + </span> + </div> + <div className='mt-2 line-clamp-2 leading-6'> + {item.name} + </div> + </div> + </td> + <td> + <input + className='form-input w-16 py-2 text-center bg-gray_r-1' + type='number' + value={1} + disabled + /> + </td> + <td> + {item?.price?.discountPercentage > 0 && ( + <div className='flex gap-x-1 items-center justify-center mt-3'> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(product?.price?.price)} + </div> + </div> + )} + <div className='font-normal mt-1'> + {item?.price.priceDiscount > 0 ? 'Gratis' : ''} + </div> + </td> + <td> + <div className='text-danger-500 font-medium'> + {item.price.priceDiscount > 0 ? 'Gratis' : ''} + </div> + </td> + <td></td> + </tr> + </> + ))} + </> ))} </tbody> </table> @@ -864,11 +880,11 @@ const Checkout = () => { <div className='flex flex-col gap-y-4'> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Total Belanja</div> - <div>{currencyFormat(totalAmount)}</div> + <div>{currencyFormat(cartCheckout?.totalPurchase)}</div> </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Diskon Produk</div> - <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div> + <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div> </div> {activeVoucher && ( <div className='flex gap-x-2 justify-between'> @@ -878,11 +894,11 @@ const Checkout = () => { )} <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Subtotal</div> - <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div> + <div>{currencyFormat(cartCheckout?.subtotal)}</div> </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>PPN 11%</div> - <div>{currencyFormat(taxTotal)}</div> + <div>{currencyFormat(cartCheckout?.tax)}</div> </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'> @@ -899,11 +915,7 @@ const Checkout = () => { <div>Grand Total</div> <div className='font-semibold text-gray_r-12'> {currencyFormat( - totalAmount - - totalDiscountAmount - - discountVoucher + - taxTotal + - Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 )} </div> </div> |