..

src/entities/transaction/ui/detail/all-transaction-detail.tsx

@@ -33,6 +33,7 @@ import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
+import { AllTransactionCancel } from '../all-transaction-cancel';
 
 export interface AllTransactionDetailProps {
   detailOn: boolean;
@@ -64,6 +65,7 @@ export const AllTransactionDetail = ({
   const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
   const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);
 
+  const [cancelOn, setCancelOn] = useState<boolean>(false);
   const { mutateAsync: allTransactionDetail } = useAllTransactionDetailMutation();
   
   const callDetail = () => {
@@ -85,6 +87,9 @@ export const AllTransactionDetail = ({
       }
     });
   };
+  const onClickToMoveCancel = () => {
+    setCancelOn(true);
+  };
   useEffect(() => {
     if(!!detailOn && serviceCode && tid){
       callDetail();
@@ -117,8 +122,7 @@ export const AllTransactionDetail = ({
             afterLeave={ unmount }
             open={ isOpen }
             onClose={ close }
-            onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
-            // onConfirmClick={ () => callCancelInfo() }
+            onConfirmClick={ onClickToMoveCancel }
             message={ msg }
             buttonLabel={[t('common.cancel'), t('common.confirm')]}
           />
@@ -247,6 +251,14 @@ export const AllTransactionDetail = ({
           >{t('transaction.cancelTransaction')}</button>
         </div>
       </motion.div>
+      { !!cancelOn &&
+        <AllTransactionCancel
+          cancelOn={ cancelOn }
+          setCancelOn={ setCancelOn }
+          serviceCode={ serviceCode }
+          tid={ tid }
+        ></AllTransactionCancel>
+      }
     </>
   );
 };