diff options
Diffstat (limited to 'src-migrate/modules/cart/components')
| -rw-r--r-- | src-migrate/modules/cart/components/Detail.tsx (renamed from src-migrate/modules/cart/components/CartDetail.tsx) | 22 | ||||
| -rw-r--r-- | src-migrate/modules/cart/components/Item.tsx | 109 | ||||
| -rw-r--r-- | src-migrate/modules/cart/components/ItemAction.tsx (renamed from src-migrate/modules/cart/components/CartItemAction.tsx) | 3 | ||||
| -rw-r--r-- | src-migrate/modules/cart/components/ItemPromo.tsx | 41 | ||||
| -rw-r--r-- | src-migrate/modules/cart/components/ItemSelect.tsx (renamed from src-migrate/modules/cart/components/CartItemSelect.tsx) | 2 | ||||
| -rw-r--r-- | src-migrate/modules/cart/components/Summary.tsx | 75 |
6 files changed, 244 insertions, 8 deletions
diff --git a/src-migrate/modules/cart/components/CartDetail.tsx b/src-migrate/modules/cart/components/Detail.tsx index 734c61d3..c9de086b 100644 --- a/src-migrate/modules/cart/components/CartDetail.tsx +++ b/src-migrate/modules/cart/components/Detail.tsx @@ -1,10 +1,14 @@ +import style from '../styles/detail.module.css' + import React, { useEffect, useMemo } from 'react' +import Link from 'next/link' +import { Button, Tooltip } from '@chakra-ui/react' + import { getAuth } from '~/common/libs/auth' import { useCartStore } from '../stores/useCartStore' -import CartItem from '../ui/CartItem' -import style from '../styles/CartDetail.module.css' -import CartSummary from '../ui/CartSummary' -import { Button, Tooltip } from '@chakra-ui/react' + +import CartItem from './Item' +import CartSummary from './Summary' const CartDetail = () => { const auth = getAuth() @@ -46,7 +50,7 @@ const CartDetail = () => { </div> </div> - <div className='w-full md:w-1/4 pl-6'> + <div className='w-full md:w-1/4 md:pl-6 mt-6 md:mt-0'> <div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'> <CartSummary {...summary} isLoaded={!!cart} /> <div className='grid grid-cols-2 gap-x-3 mt-6'> @@ -54,7 +58,8 @@ const CartDetail = () => { <Button colorScheme='yellow' w='full' - isDisabled={hasSelectedPromo || !hasSelected}> + isDisabled={hasSelectedPromo || !hasSelected} + > Quotation </Button> </Tooltip> @@ -62,7 +67,10 @@ const CartDetail = () => { <Button colorScheme='red' w='full' - isDisabled={!hasSelected}> + isDisabled={!hasSelected} + as={Link} + href='/shop/checkout' + > Checkout </Button> </Tooltip> diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx new file mode 100644 index 00000000..92beda86 --- /dev/null +++ b/src-migrate/modules/cart/components/Item.tsx @@ -0,0 +1,109 @@ +import style from '../styles/item.module.css' + +import Image from 'next/image' +import React from 'react' +import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react' + +import formatCurrency from '~/common/libs/formatCurrency' +import { CartItem as CartItemProps } from '~/common/types/cart' + +import CartItemPromo from './ItemPromo' +import CartItemAction from './ItemAction' +import CartItemSelect from './ItemSelect' +import { PROMO_CATEGORY } from '~/constants/promotion' +import { InfoIcon } from 'lucide-react' + +type Props = { + item: CartItemProps + editable?: boolean +} + +const CartItem = ({ item, editable = true }: Props) => { + const image = item?.image || item?.parent?.image + + return ( + <div className={style.wrapper}> + {item.cart_type === 'promotion' && ( + <div className={style.header}> + {item.promotion_type?.value && ( + <Tooltip label={PROMO_CATEGORY[item.promotion_type?.value].description} placement="top" bgColor='red.600' p={2} rounded={6}> + <div className={style.badgeType}> + Paket {PROMO_CATEGORY[item.promotion_type?.value].alias} + <InfoIcon size={14} /> + </div> + </Tooltip> + )} + <div className='w-2' /> + <div> + Selamat! Pembelian anda lebih hemat {' '} + <span className={style.savingAmt}> + Rp {formatCurrency((item.package_price || 0) - item.subtotal)} + </span> + </div> + </div> + )} + + <div className={style.mainProdWrapper}> + {editable && <CartItemSelect item={item} />} + <div className='w-4' /> + <div className={style.image}> + {image && <Image src={image} alt={item.name} width={128} height={128} />} + {!image && <div className={style.noImage}>No Image</div>} + </div> + + <div className={style.details}> + <div className={style.name}>{item.name}</div> + <div className='mt-2 flex justify-between w-full'> + <div className='flex flex-col gap-y-1'> + {item.cart_type === 'promotion' && ( + <div className={style.discPriceSection}> + <span className={style.priceBefore}> + Rp {formatCurrency((item.package_price || 0))} + </span> + <span className={style.price}> + Rp {formatCurrency(item.subtotal)} + </span> + </div> + )} + + {item.cart_type === 'product' && ( + <> + <div className={style.price}> + Rp {formatCurrency(item.price.price)} + </div> + <div>{item.code}</div> + </> + )} + + <div> + {item.weight} Kg + </div> + </div> + + {editable && <CartItemAction item={item} />} + {!editable && <div className={style.quantity}>{item.quantity}</div>} + </div> + </div> + + </div> + + <div className="flex flex-col"> + {item.products?.map((product) => <CartItemPromo key={product.id} product={product} />)} + {item.free_products?.map((product) => <CartItemPromo key={product.id} product={product} />)} + </div> + </div> + ) +} + +CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: number }) { + return Array.from({ length: props.count }).map((_, index) => ( + <Skeleton key={index} + height='100px' + width='100%' + rounded='md' + {...props} + /> + )) +} + +export default CartItem
\ No newline at end of file diff --git a/src-migrate/modules/cart/components/CartItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx index 742d1a39..3e264aef 100644 --- a/src-migrate/modules/cart/components/CartItemAction.tsx +++ b/src-migrate/modules/cart/components/ItemAction.tsx @@ -1,3 +1,5 @@ +import style from '../styles/item-action.module.css' + import React, { useEffect, useState } from 'react' import { Spinner, Tooltip } from '@chakra-ui/react' @@ -10,7 +12,6 @@ import { deleteUserCart, upsertUserCart } from '~/services/cart' import { useDebounce } from 'usehooks-ts' import { useCartStore } from '../stores/useCartStore' -import style from '../styles/CartItemAction.module.css' type Props = { item: CartItem diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx new file mode 100644 index 00000000..951d4d6a --- /dev/null +++ b/src-migrate/modules/cart/components/ItemPromo.tsx @@ -0,0 +1,41 @@ +import style from '../styles/item-promo.module.css' + +import Image from 'next/image' +import React from 'react' + +import { CartProduct } from '~/common/types/cart' + + +type Props = { + product: CartProduct +} + +const CartItemPromo = ({ product }: Props) => { + return ( + <div key={product.id} className={style.wrapper}> + <div className={style.imageWrapper}> + {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} className={style.image} />} + </div> + + <div className={style.details}> + <div className={style.name}>{product.display_name}</div> + <div className='flex'> + <div className="flex flex-col"> + <div className={style.code}>{product.code}</div> + <div> + <span className={style.weightLabel}>Berat Barang: </span> + <span>{product.package_weight} Kg</span> + </div> + </div> + + <div className={style.quantity}> + {product.qty} + </div> + </div> + </div> + + </div> + ) +} + +export default CartItemPromo
\ No newline at end of file diff --git a/src-migrate/modules/cart/components/CartItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx index f44b0d7e..96e7c713 100644 --- a/src-migrate/modules/cart/components/CartItemSelect.tsx +++ b/src-migrate/modules/cart/components/ItemSelect.tsx @@ -1,8 +1,10 @@ import { Checkbox, Spinner } from '@chakra-ui/react' import React, { useState } from 'react' + import { getAuth } from '~/common/libs/auth' import { CartItem } from '~/common/types/cart' import { upsertUserCart } from '~/services/cart' + import { useCartStore } from '../stores/useCartStore' type Props = { diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx new file mode 100644 index 00000000..a835bca9 --- /dev/null +++ b/src-migrate/modules/cart/components/Summary.tsx @@ -0,0 +1,75 @@ +import style from '../styles/summary.module.css' + +import React from 'react' +import formatCurrency from '~/common/libs/formatCurrency' +import clsxm from '~/common/libs/clsxm' +import { Skeleton } from '@chakra-ui/react' +import _ from 'lodash' + +type Props = { + total?: number + discount?: number + subtotal?: number + tax?: number + shipping?: number + grandTotal?: number + isLoaded: boolean +} + +const CartSummary = ({ + total, + discount, + subtotal, + tax, + shipping, + grandTotal, + isLoaded = false, +}: Props) => { + return ( + <> + <div className='text-h-sm font-medium'>Ringkasan Pesanan</div> + + <div className="h-6" /> + + <div className='flex flex-col gap-y-3'> + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={style.label}>Total Belanja</span> + <span className={style.value}>Rp {formatCurrency(subtotal || 0)}</span> + </Skeleton> + + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={style.label}>Total Diskon</span> + <span className={clsxm(style.value, style.discount)}>- Rp {formatCurrency(discount || 0)}</span> + </Skeleton> + + <div className={style.divider} /> + + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={style.label}>Subtotal</span> + <span className={style.value}>Rp {formatCurrency(total || 0)}</span> + </Skeleton> + + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={style.label}>Tax 11%</span> + <span className={style.value}>Rp {formatCurrency(tax || 0)}</span> + </Skeleton> + + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={style.label}>Biaya Kirim</span> + <span className={style.value}>Rp {formatCurrency(shipping || 0)}</span> + </Skeleton> + + <div className={style.divider} /> + + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={clsxm(style.label, style.grandTotal)}> + Grand Total + </span> + <span className={style.value}>Rp {formatCurrency(grandTotal || 0)}</span> + </Skeleton> + </div> + </> + ) +} + +export default CartSummary
\ No newline at end of file |