summaryrefslogtreecommitdiff
path: root/src-migrate
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate')
-rw-r--r--src-migrate/modules/cart/components/Item.tsx4
-rw-r--r--src-migrate/modules/cart/components/ItemSelect.tsx33
-rw-r--r--src-migrate/modules/product-detail/components/AddToCart.tsx5
-rw-r--r--src-migrate/modules/product-promo/components/Section.tsx2
-rw-r--r--src-migrate/pages/shop/cart/index.tsx175
-rw-r--r--src-migrate/types/promotion.ts1
6 files changed, 141 insertions, 79 deletions
diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 74180fc9..47893498 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -20,7 +20,7 @@ type Props = {
pilihSemuaCart?: boolean
}
-const CartItem = ({ item, editable = true, pilihSemuaCart }: Props) => {
+const CartItem = ({ item, editable = true,}: Props) => {
return (
<div className={style.wrapper}>
@@ -46,7 +46,7 @@ const CartItem = ({ item, editable = true, pilihSemuaCart }: Props) => {
<div className={style.mainProdWrapper}>
{editable && (
- <CartItemSelect item={item} itemSelected={pilihSemuaCart} />
+ <CartItemSelect item={item} />
)}
<div className='w-4' />
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
index 6b6b8f2b..b904a1de 100644
--- a/src-migrate/modules/cart/components/ItemSelect.tsx
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -1,5 +1,5 @@
import { Checkbox, Spinner } from '@chakra-ui/react'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
import { getAuth } from '~/libs/auth'
import { CartItem } from '~/types/cart'
@@ -9,17 +9,15 @@ import { useCartStore } from '../stores/useCartStore'
type Props = {
item: CartItem
- itemSelected?: boolean
}
-const CartItemSelect = ({ item, itemSelected }: Props) => {
+const CartItemSelect = ({ item }: Props) => {
const auth = getAuth()
const { loadCart } = useCartStore()
const [isLoad, setIsLoad] = useState<boolean>(false)
- const [isChecked, setIsChecked] = useState<boolean>(itemSelected ?? true)
- const handleChange = async (isChecked: boolean) => {
+ const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
if (typeof auth !== 'object') return
setIsLoad(true)
@@ -28,40 +26,29 @@ const CartItemSelect = ({ item, itemSelected }: Props) => {
type: item.cart_type,
id: item.id,
qty: item.quantity,
- selected: isChecked,
+ selected: e.target.checked
})
await loadCart(auth.id)
setIsLoad(false)
}
- useEffect(() => {
- if (typeof itemSelected === 'boolean') {
- setIsChecked(itemSelected)
- handleChange(itemSelected)
- }
- }, [itemSelected])
-
- const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- const { checked } = e.target
- setIsChecked(checked)
- handleChange(checked)
- }
-
return (
<div className='w-6 my-auto'>
- {isLoad && <Spinner className='my-auto' size='sm' />}
+ {isLoad && (
+ <Spinner className='my-auto' size='sm' />
+ )}
{!isLoad && (
<Checkbox
borderColor='gray.600'
colorScheme='red'
size='lg'
- isChecked={isChecked}
- onChange={handleCheckboxChange}
+ isChecked={item.selected}
+ onChange={handleChange}
/>
)}
</div>
)
}
-export default CartItemSelect
+export default CartItemSelect \ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 320b7234..6c9aedf8 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -11,6 +11,7 @@ import ProductSimilar from '../../../../src/lib/product/components/ProductSimila
import { IProductDetail } from '~/types/product';
import ImageNext from 'next/image';
import { useProductCartContext } from '@/contexts/ProductCartContext'
+
type Props = {
variantId: number | null,
quantity?: number;
@@ -75,6 +76,8 @@ const AddToCart = ({
error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' },
}
)
+
+
if (source === 'buy') {
router.push('/shop/checkout?source=buy')
@@ -140,4 +143,4 @@ const AddToCart = ({
)
}
-export default AddToCart \ No newline at end of file
+export default AddToCart \ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 2c94c2bb..1228a6f0 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -25,7 +25,7 @@ const ProductPromoSection = ({ product, productId }: Props) => {
const promotions = promotionsQuery.data
const { openModal } = useModalStore()
-
+ console.log("productId",productId)
return (
<SmoothRender
isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index 2ecf1c03..8d9ea91c 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -2,108 +2,179 @@ import style from './cart.module.css';
import React, { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
-import { Button, Checkbox, 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 [isSelectedAll, setIsSelectedAll] = useState<boolean>(false);
- const [isButtonChek, setIsButtonChek] = useState<boolean>(false);
- const [buttonSelectNow, setButtonSelectNow] = useState<boolean>(true);
-
+ 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 } = useCartStore();
-
const useDivvice = useDevice();
+ const { setRefreshCart } = useProductCartContext()
+ const [isTop, setIsTop] = useState(true);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsTop(window.scrollY < 200);
+ };
+
+ 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, isButtonChek, ]);
-
-
+ }, [auth, loadCart, cart, isButtonChek]);
+
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]);
+
+ 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 = (()=>{
- setButtonSelectNow(!buttonSelectNow)
- setIsSelectedAll(!isSelectedAll)
- setIsButtonChek(!isButtonChek)
- })
+ const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+ if (typeof auth !== 'object' || !cart) return;
+ setIsLoad(true)
+ const newSelected = e.target.checked;
+ setIsSelectedAll(newSelected);
+
+ for (const item of cart.products) {
+ await upsertUserCart({
+ userId: auth.id,
+ type: item.cart_type,
+ id: item.id,
+ qty: item.quantity,
+ selected: newSelected
+ });
+ }
+ await loadCart(auth.id);
+ setIsLoad(false)
+ }
+
+ 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='h-2' />
- <div className='flex items-center object-center mt-2'>
- <Checkbox
- borderColor='gray.600'
- colorScheme='red'
- size='lg'
- isChecked={isButtonChek}
- onChange={handleChange}
- /> <p className='p-2 text-caption-2'>
- {buttonSelectNow? "Select all" : "Unchek all" }
- </p>
+ <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky top-[180px] 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 ? "Unchek 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 || hasSelectNoPrice}
+ onClick={handleDelete}
+ >
+ {isLoadDelete && <Spinner size='xs' />}
+ {!isLoadDelete && <Trash2Icon size={16} />}
+ <p className='text-sm ml-2'>
+ Hapus Barang
+ </p>
+ </Button>
+ </Tooltip>
+ </div>
</div>
+ </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} pilihSemuaCart={isSelectedAll} />
+ <CartItemModule key={item.id} item={item} />
))}
-
{cart?.products?.length === 0 && (
<div className='flex flex-col items-center'>
@@ -145,7 +216,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/types/promotion.ts b/src-migrate/types/promotion.ts
index 10f6d8b0..217bba33 100644
--- a/src-migrate/types/promotion.ts
+++ b/src-migrate/types/promotion.ts
@@ -21,6 +21,7 @@ export interface IPromotion {
product_id: number;
qty: number;
}[];
+
}
export interface IProductVariantPromo {
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:18:51 +0000