summaryrefslogtreecommitdiff
path: root/src-migrate/pages
diff options
context:
space:
mode:
authorit-fixcomart <it@fixcomart.co.id>2024-09-24 16:12:50 +0700
committerit-fixcomart <it@fixcomart.co.id>2024-09-24 16:12:50 +0700
commit36601aba6017aeef16f89351eb487238402ab52e (patch)
tree45bc3c78d5f36299922e6c03050e061b86a0d1e7 /src-migrate/pages
parent1e834e45f9a11911036496151b71f99de480862e (diff)
<iman> update Perapihan Tag
Diffstat (limited to 'src-migrate/pages')
-rw-r--r--src-migrate/pages/shop/cart/index.tsx146
1 files changed, 76 insertions, 70 deletions
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index 4768f62d..c5386c91 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -14,10 +14,10 @@ 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 { CartItem } from '~/types/cart';
+import { deleteUserCart, upsertUserCart } from '~/services/cart';
import { Trash2Icon } from 'lucide-react';
-import { useProductCartContext } from '@/contexts/ProductCartContext'
+import { useProductCartContext } from '@/contexts/ProductCartContext';
const CartPage = () => {
const router = useRouter();
@@ -26,11 +26,11 @@ const CartPage = () => {
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 [isLoad, setIsLoad] = useState<boolean>(false);
+ const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false);
const { loadCart, cart, summary, updateCartItem } = useCartStore();
const useDivvice = useDevice();
- const { setRefreshCart } = useProductCartContext()
+ const { setRefreshCart } = useProductCartContext();
const [isTop, setIsTop] = useState(true);
const [hasChanged, setHasChanged] = useState(false);
const prevCartRef = useRef<CartItem[] | null>(null);
@@ -64,18 +64,19 @@ const CartPage = () => {
const hasSelectedChanged = () => {
if (prevCartRef.current && cart) {
const prevCart = prevCartRef.current;
- return cart.products.some((item, index) =>
- prevCart[index] && prevCart[index].selected !== item.selected
+ return cart.products.some(
+ (item, index) =>
+ prevCart[index] && prevCart[index].selected !== item.selected
);
}
return false;
};
if (hasSelectedChanged()) {
- setHasChanged(true)
+ setHasChanged(true);
// Perform necessary actions here if selection has changed
- }else{
- setHasChanged(false)
+ } else {
+ setHasChanged(false);
}
prevCartRef.current = cart ? [...cart.products] : null;
@@ -83,35 +84,38 @@ const CartPage = () => {
const hasSelectedPromo = useMemo(() => {
if (!cart) return false;
- return cart.products.some(item => item.cart_type === 'promotion' && item.selected);
+ return cart.products.some(
+ (item) => item.cart_type === 'promotion' && item.selected
+ );
}, [cart]);
const hasSelected = useMemo(() => {
if (!cart) return false;
- return cart.products.some(item => item.selected);
+ return cart.products.some((item) => item.selected);
}, [cart]);
const hasSelectNoPrice = useMemo(() => {
if (!cart) return false;
- return cart.products.some(item => item.selected && item.price.price_discount === 0);
+ return cart.products.some(
+ (item) => item.selected && item.price.price_discount === 0
+ );
}, [cart]);
const hasSelectedAll = useMemo(() => {
if (!cart || !Array.isArray(cart.products)) return false;
- return cart.products.every(item => item.selected);
+ return cart.products.every((item) => item.selected);
}, [cart]);
-
useEffect(() => {
const updateCartItems = async () => {
if (typeof auth === 'object' && cart) {
- const upsertPromises = cart.products.map(item =>
+ const upsertPromises = cart.products.map((item) =>
upsertUserCart({
userId: auth.id,
type: item.cart_type,
id: item.id,
qty: item.quantity,
- selected: item.selected
+ selected: item.selected,
})
);
try {
@@ -128,7 +132,7 @@ const CartPage = () => {
const handleCheckout = () => {
router.push('/shop/checkout');
- }
+ };
const handleQuotation = () => {
if (hasSelectedPromo || !hasSelected) {
@@ -136,54 +140,53 @@ const CartPage = () => {
} else {
router.push('/shop/quotation');
}
- }
+ };
const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-
-
if (cart) {
const updatedCart = {
...cart,
- products: cart.products.map(item => ({
+ products: cart.products.map((item) => ({
...item,
- selected: !hasSelectedAll
- }))
+ selected: !hasSelectedAll,
+ })),
};
-
- updateCartItem(updatedCart);
- if(hasSelectedAll){
+
+ updateCartItem(updatedCart);
+ if (hasSelectedAll) {
setIsSelectedAll(false);
- }else{
+ } else {
setIsSelectedAll(true);
}
}
};
-
const handleDelete = async () => {
if (typeof auth !== 'object' || !cart) return;
- setIsLoadDelete(true)
+ setIsLoadDelete(true);
for (const item of cart.products) {
- if(item.selected === true){
- await deleteUserCart(auth.id, [item.cart_id])
- await loadCart(auth.id)
+ if (item.selected === true) {
+ await deleteUserCart(auth.id, [item.cart_id]);
+ await loadCart(auth.id);
}
}
- setIsLoadDelete(false)
- setRefreshCart(true)
- }
+ setIsLoadDelete(false);
+ setRefreshCart(true);
+ };
return (
<>
- <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky md:top-[157px] flex-col bg-white py-4 border-gray-300 z-50 sm:w-full md:w-3/4`}>
- <div className={`${style['title']}`}>Keranjang Belanja</div>
+ <div
+ className={`${
+ isTop ? 'border-b-[0px]' : 'border-b-[1px]'
+ } sticky md:top-[157px] flex-col bg-white py-4 border-gray-300 z-50 sm:w-full md:w-3/4`}
+ >
+ <h1 className={`${style['title']}`}>Keranjang Belanja</h1>
<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 && <Spinner className='my-auto' size='sm' />}
{!isLoad && (
<Checkbox
borderColor='gray.600'
@@ -193,34 +196,31 @@ const CartPage = () => {
onChange={handleChange}
/>
)}
- <p className='p-2 text-caption-2'>
- {hasSelectedAll ? "Uncheck all" : "Select all"}
- </p>
+ <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 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>
<div className={style['content']}>
@@ -274,7 +274,13 @@ 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 &&
@@ -315,4 +321,4 @@ const CartPage = () => {
);
};
-export default CartPage; \ No newline at end of file
+export default CartPage;