From d5b49b5bda8a4d16cbc7e41b063f6e901ad799dd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 2 Mar 2023 08:42:10 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx               |  2 +-
 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 />
 
-- 
cgit v1.2.3