diff options
Diffstat (limited to 'src/lib/transaction/components/Transaction.jsx')
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 26 |
1 files changed, 15 insertions, 11 deletions
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 /> |