diff options
| -rw-r--r-- | src/lib/cart/components/Cart.jsx | 2 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 26 |
2 files changed, 16 insertions, 12 deletions
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index 6a503c0a..962ef860 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -4,7 +4,7 @@ import Image from '@/core/components/elements/Image/Image' import currencyFormat from '@/core/utils/currencyFormat' import { useEffect, useState } from 'react' import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart' -import { CheckIcon, RectangleGroupIcon, TrashIcon } from '@heroicons/react/24/outline' +import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline' import { createSlug } from '@/core/utils/slug' import { useRouter } from 'next/router' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 7da33551..55e959fa 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -2,7 +2,7 @@ import Spinner from '@/core/components/elements/Spinner/Spinner' import useTransaction from '../hooks/useTransaction' import TransactionStatusBadge from './TransactionStatusBadge' import Divider from '@/core/components/elements/Divider/Divider' -import { useRef, useState } from 'react' +import { useMemo, useRef, useState } from 'react' import { downloadPurchaseOrder, downloadQuotation } from '../utils/transactions' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import uploadPoApi from '../api/uploadPoApi' @@ -68,6 +68,19 @@ const Transaction = ({ id }) => { transaction.refetch() } + const memoizeVariantGroupCard = useMemo(() => ( + <div className='p-4 pt-0 flex flex-col gap-y-3'> + <VariantGroupCard + variants={transaction.data?.products} + buyMore + /> + <div className='flex justify-between mt-3 font-medium'> + <p>Total Belanja</p> + <p>{currencyFormat(transaction.data?.amountTotal)}</p> + </div> + </div> + ), [transaction.data]) + if (transaction.isLoading) { return ( <div className='flex justify-center my-6'> @@ -119,16 +132,7 @@ const Transaction = ({ id }) => { <div className='font-medium p-4'>Detail Produk</div> - <div className='p-4 pt-0 flex flex-col gap-y-3'> - <VariantGroupCard - variants={transaction.data?.products} - buyMore - /> - <div className='flex justify-between mt-3 font-medium'> - <p>Total Belanja</p> - <p>{currencyFormat(transaction.data?.amountTotal)}</p> - </div> - </div> + { memoizeVariantGroupCard } <Divider /> |