summaryrefslogtreecommitdiff
path: root/src-migrate/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/pages')
-rw-r--r--src-migrate/pages/shop/cart/index.tsx215
-rw-r--r--src-migrate/pages/shop/promo/index.tsx43
2 files changed, 226 insertions, 32 deletions
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index 7de96425..cfb20284 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -1,87 +1,238 @@
import style from './cart.module.css';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
import Link from 'next/link';
-import { Button, Toast, Tooltip } from '@chakra-ui/react';
+import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
import { toast } from 'react-hot-toast';
import { useRouter } from 'next/router';
import { getAuth } from '~/libs/auth';
import { useCartStore } from '~/modules/cart/stores/useCartStore';
-import CartItem from '~/modules/cart/components/Item';
+import CartItemModule from '~/modules/cart/components/Item';
import CartSummary from '~/modules/cart/components/Summary';
import clsxm from '~/libs/clsxm';
import useDevice from '@/core/hooks/useDevice';
import CartSummaryMobile from '~/modules/cart/components/CartSummaryMobile';
import Image from '~/components/ui/image';
+import { CartItem } from '~/types/cart'
+import { deleteUserCart ,upsertUserCart } from '~/services/cart'
+import { Trash2Icon } from 'lucide-react';
+import { useProductCartContext } from '@/contexts/ProductCartContext'
const CartPage = () => {
const router = useRouter();
const auth = getAuth();
- const [isStepApproval, setIsStepApproval] = React.useState(false);
+ const [isStepApproval, setIsStepApproval] = useState(false);
+ const [isSelectedAll, setIsSelectedAll] = useState(false);
+ const [isButtonChek, setIsButtonChek] = useState(false);
+ const [buttonSelectNow, setButtonSelectNow] = useState(true);
+ const [isLoad, setIsLoad] = useState<boolean>(false)
+ const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false)
+ const { loadCart, cart, summary, updateCartItem } = useCartStore();
+ const useDivvice = useDevice();
+ const { setRefreshCart } = useProductCartContext()
+ const [isTop, setIsTop] = useState(true);
+ const [hasChanged, setHasChanged] = useState(false);
+ const prevCartRef = useRef<CartItem[] | null>(null);
- const { loadCart, cart, summary } = useCartStore();
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsTop(window.scrollY < 200);
+ };
- const useDivvice = useDevice();
+ window.addEventListener('scroll', handleScroll);
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
useEffect(() => {
if (typeof auth === 'object' && !cart) {
loadCart(auth.id);
setIsStepApproval(auth?.feature?.soApproval);
}
- }, [auth, loadCart, cart]);
+ }, [auth, loadCart, cart, isButtonChek]);
+
+ useEffect(() => {
+ if (typeof auth === 'object' && !cart) {
+ loadCart(auth.id);
+ setIsStepApproval(auth?.feature?.soApproval);
+ }
+ }, [auth, loadCart, cart, isButtonChek]);
+
+ useEffect(() => {
+ const hasSelectedChanged = () => {
+ if (prevCartRef.current && cart) {
+ const prevCart = prevCartRef.current;
+ return cart.products.some((item, index) =>
+ prevCart[index] && prevCart[index].selected !== item.selected
+ );
+ }
+ return false;
+ };
+
+ if (hasSelectedChanged()) {
+ setHasChanged(true)
+ // Perform necessary actions here if selection has changed
+ }else{
+ setHasChanged(false)
+ }
+
+ // Update the ref to the current cart state
+ prevCartRef.current = cart ? [...cart.products] : null;
+ }, [cart]);
const hasSelectedPromo = useMemo(() => {
if (!cart) return false;
- for (const item of cart.products) {
- if (item.cart_type === 'promotion' && item.selected) return true;
- }
- return false;
+ return cart.products.some(item => item.cart_type === 'promotion' && item.selected);
}, [cart]);
const hasSelected = useMemo(() => {
if (!cart) return false;
- for (const item of cart.products) {
- if (item.selected) return true;
- }
- return false;
+ return cart.products.some(item => item.selected);
}, [cart]);
const hasSelectNoPrice = useMemo(() => {
if (!cart) return false;
- for (const item of cart.products) {
- if (item.selected && item.price.price_discount == 0) return true;
- }
- return false;
+ return cart.products.some(item => item.selected && item.price.price_discount === 0);
}, [cart]);
-
- const handleCheckout = (()=>{
- router.push('/shop/checkout');
- })
- const handleQuotation = (()=>{
- if(hasSelectedPromo || !hasSelected){
+ const hasSelectedAll = useMemo(() => {
+ if (!cart || !Array.isArray(cart.products)) return false;
+ return cart.products.every(item => item.selected);
+ }, [cart]);
+
+
+ useEffect(() => {
+ const updateCartItems = async () => {
+ if (typeof auth === 'object' && cart) {
+ const upsertPromises = cart.products.map(item =>
+ upsertUserCart({
+ userId: auth.id,
+ type: item.cart_type,
+ id: item.id,
+ qty: item.quantity,
+ selected: item.selected
+ })
+ );
+ try {
+ await Promise.all(upsertPromises);
+ await loadCart(auth.id);
+ } catch (error) {
+ console.error('Failed to update cart items:', error);
+ }
+ }
+ };
+
+ updateCartItems();
+ }, [hasChanged]);
+
+ const handleCheckout = () => {
+ router.push('/shop/checkout');
+ }
+
+ const handleQuotation = () => {
+ if (hasSelectedPromo || !hasSelected) {
toast.error('Maaf, Barang promo tidak dapat dibuat quotation');
- }else{
+ } else {
router.push('/shop/quotation');
}
- })
+ }
+
+ const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+
+ // Ensure that cart is not null before attempting to update
+ if (cart) {
+ const updatedCart = {
+ ...cart,
+ products: cart.products.map(item => ({
+ ...item,
+ selected: !hasSelectedAll
+ }))
+ };
+
+ updateCartItem(updatedCart); // Pass only valid CartProps to updateCartItem
+ if(hasSelectedAll){
+ setIsSelectedAll(false);
+ }else{
+ setIsSelectedAll(true);
+ }
+ }
+ };
+
+
+ const handleDelete = async () => {
+ if (typeof auth !== 'object' || !cart) return;
+
+ setIsLoadDelete(true)
+ for (const item of cart.products) {
+ if(item.selected === true){
+ await deleteUserCart(auth.id, [item.cart_id])
+ await loadCart(auth.id)
+ }
+ }
+ setIsLoadDelete(false)
+ setRefreshCart(true)
+ }
return (
<>
- <div className={style['title']}>Keranjang Belanja</div>
+ <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky top-[157px] bg-white py-4 border-gray-300 z-50 w-3/4`}>
+ <div className={`${style['title']}`}>Keranjang Belanja</div>
+ <div className='h-2' />
+ <div className={`flex items-center object-center justify-between `}>
+ <div className='flex items-center object-center'>
+ {isLoad && (
+ <Spinner className='my-auto' size='sm' />
+ )}
+ {!isLoad && (
+ <Checkbox
+ borderColor='gray.600'
+ colorScheme='red'
+ size='lg'
+ isChecked={hasSelectedAll}
+ onChange={handleChange}
+ />
+ )}
+ <p className='p-2 text-caption-2'>
+ {hasSelectedAll ? "Uncheck all" : "Select all"}
+ </p>
+ </div>
+ <div className='delate all flex items-center object-center'>
+ <Tooltip
+ label={clsxm({
+ 'Tidak ada item yang dipilih': !hasSelected,
+ })}
+ >
+ <Button
+ bg='#fadede'
+ variant='outline'
+ colorScheme='red'
+ w='full'
+ isDisabled={!hasSelected}
+ onClick={handleDelete}
+ >
+ {isLoadDelete && <Spinner size='xs' />}
+ {!isLoadDelete && <Trash2Icon size={16} />}
+ <p className='text-sm ml-2'>
+ Hapus Barang
+ </p>
+ </Button>
+ </Tooltip>
+ </div>
+ </div>
- <div className='h-6' />
+ </div>
<div className={style['content']}>
<div className={style['item-wrapper']}>
<div className={style['item-skeleton']}>
- {!cart && <CartItem.Skeleton count={5} height='120px' />}
+ {!cart && <CartItemModule.Skeleton count={5} height='120px' />}
</div>
<div className={style['items']}>
{cart?.products.map((item) => (
- <CartItem key={item.id} item={item} />
+ <CartItemModule key={item.id} item={item} />
))}
{cart?.products?.length === 0 && (
@@ -124,7 +275,7 @@ const CartPage = () => {
<CartSummary {...summary} isLoaded={!!cart} />
)}
- <div className={isStepApproval ? style['summary-buttons-step-approval'] : style['summary-buttons'] }>
+ <div className={isStepApproval ? style['summary-buttons-step-approval'] : style['summary-buttons']}>
<Tooltip
label={
hasSelectedPromo &&
diff --git a/src-migrate/pages/shop/promo/index.tsx b/src-migrate/pages/shop/promo/index.tsx
new file mode 100644
index 00000000..7bb5546d
--- /dev/null
+++ b/src-migrate/pages/shop/promo/index.tsx
@@ -0,0 +1,43 @@
+import dynamic from 'next/dynamic'
+import React, { useState } from 'react'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import Hero from '~/modules/promo/components/Hero'
+import PromotionProgram from '~/modules/promo/components/PromotinProgram'
+import Voucher from '~/modules/promo/components/Voucher'
+import FlashSale from '../../../modules/promo/components/FlashSale'
+import FlashSaleNonDisplay from '../../../modules/promo/components/FlashSaleNonDisplay'
+const PromoList = dynamic(() => import('../../../modules/promo/components/PromoList'));
+
+
+
+const PromoPage = () => {
+ const [selectedPromo, setSelectedPromo] = useState('Bundling');
+ return (
+ <>
+ <LazyLoadComponent>
+ <Hero />
+ </LazyLoadComponent>
+ <LazyLoadComponent>
+ <PromotionProgram
+ selectedPromo={selectedPromo}
+ onSelectPromo={setSelectedPromo}
+ />
+ <PromoList selectedPromo={selectedPromo} />
+ </LazyLoadComponent>
+
+ <LazyLoadComponent>
+ <FlashSale />
+ </LazyLoadComponent>
+ <h1 className='h-1'></h1>
+ <LazyLoadComponent>
+ <FlashSaleNonDisplay />
+ </LazyLoadComponent>
+ <h1 className='h-1'></h1>
+ <LazyLoadComponent>
+ <Voucher />
+ </LazyLoadComponent>
+ </>
+ )
+}
+
+export default PromoPage \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-23 04:17:20 +0000