diff options
| -rw-r--r-- | src-migrate/modules/cart/components/CartSummaryMobile.tsx | 111 | ||||
| -rw-r--r-- | src-migrate/modules/cart/components/Summary.tsx | 110 | ||||
| -rw-r--r-- | src-migrate/pages/shop/cart/index.tsx | 7 |
3 files changed, 166 insertions, 62 deletions
diff --git a/src-migrate/modules/cart/components/CartSummaryMobile.tsx b/src-migrate/modules/cart/components/CartSummaryMobile.tsx new file mode 100644 index 00000000..d9f72e0e --- /dev/null +++ b/src-migrate/modules/cart/components/CartSummaryMobile.tsx @@ -0,0 +1,111 @@ +import style from '../styles/summary.module.css'; + +import React, { useState } from 'react'; +import formatCurrency from '~/libs/formatCurrency'; +import clsxm from '~/libs/clsxm'; +import { Button, Skeleton } from '@chakra-ui/react'; +import _ from 'lodash'; +import { ChevronDownIcon } from '@heroicons/react/24/outline'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import useDevice from '@/core/hooks/useDevice'; + +type Props = { + total?: number; + discount?: number; + subtotal?: number; + tax?: number; + shipping?: number; + grandTotal?: number; + isLoaded: boolean; +}; + +const CartSummaryMobile = ({ + total, + discount, + subtotal, + tax, + shipping, + grandTotal, + isLoaded = false, +}: Props) => { + const [showPopup, setShowPopup] = useState(false); + return ( + <> + <BottomPopup + className=' !h-[35%]' + title='Ringkasan Pensanan' + active={showPopup} + close={() => setShowPopup(false)} + > + <div className='mt-4'> + <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> + </div> + </BottomPopup> + <div className='flex flex-col gap-y-3'> + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={clsxm(style.label, style.grandTotal)}> + Grand Total + </span> + <button + onClick={() => setShowPopup(true)} + className='bg-gray-300 w-6 h-6 items-center justify-center cursor-pointer hover:bg-red-400 md:hidden ' + > + <ChevronDownIcon className='h-6 w-6 text-white' /> + </button> + </Skeleton> + <Skeleton isLoaded={isLoaded} className={style.line}> + <span className={style.value}> + Rp {formatCurrency(grandTotal || 0)} + </span> + </Skeleton> + </div> + </> + ); +}; + +export default CartSummaryMobile; diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx index 1e76d4fa..2e55c8df 100644 --- a/src-migrate/modules/cart/components/Summary.tsx +++ b/src-migrate/modules/cart/components/Summary.tsx @@ -1,20 +1,20 @@ -import style from '../styles/summary.module.css'; +import style from '../styles/summary.module.css' -import React from 'react'; -import formatCurrency from '~/libs/formatCurrency'; -import clsxm from '~/libs/clsxm'; -import { Skeleton } from '@chakra-ui/react'; -import _ from 'lodash'; +import React from 'react' +import formatCurrency from '~/libs/formatCurrency' +import clsxm from '~/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; -}; + total?: number + discount?: number + subtotal?: number + tax?: number + shipping?: number + grandTotal?: number + isLoaded: boolean +} const CartSummary = ({ total, @@ -27,61 +27,49 @@ const CartSummary = ({ }: Props) => { return ( <> - <div className='text-h-sm font-medium hidden md:block'> - Ringkasan Pesanan - </div> + <div className='text-h-sm font-medium'>Ringkasan Pesanan</div> - <div className='h-6' /> + <div className="h-6" /> - <div className='hidden md:block'> - <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> + <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> + <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} /> + <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}>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}>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> + <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} /> - </div> - </div> + <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> + <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; +export default CartSummary
\ No newline at end of file diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx index 9ec58a48..6c37b434 100644 --- a/src-migrate/pages/shop/cart/index.tsx +++ b/src-migrate/pages/shop/cart/index.tsx @@ -10,11 +10,15 @@ import { useCartStore } from '~/modules/cart/stores/useCartStore' import CartItem 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' const CartPage = () => { const auth = getAuth() const { loadCart, cart, summary } = useCartStore() + + const useDivvice = useDevice(); useEffect(() => { if (typeof auth === 'object' && !cart) loadCart(auth.id) @@ -65,7 +69,8 @@ const CartPage = () => { <div className={style['summary-wrapper']}> <div className={style['summary']}> - <CartSummary {...summary} isLoaded={!!cart} /> + {useDivvice.isMobile && <CartSummaryMobile {...summary} isLoaded={!!cart} />} + {!useDivvice.isMobile && <CartSummary {...summary} isLoaded={!!cart} />} <div className={style['summary-buttons']}> <Tooltip label={hasSelectedPromo && 'Barang promo tidak dapat dibuat quotation'}> |