refactor(FE): Refactor modal action handling in order form modals

This commit is contained in:
rstubryan
2026-02-07 09:32:34 +07:00
parent 3dee5c1828
commit 3b42709577
2 changed files with 39 additions and 40 deletions
@@ -59,6 +59,10 @@ const DeliveryOrderFormModal = ({
const modalAction = searchParams.get('action'); const modalAction = searchParams.get('action');
const marketingId = searchParams.get('id'); const marketingId = searchParams.get('id');
const [currentModalAction, setCurrentModalAction] = useState<string | null>(
modalAction
);
const isModalActionForForm = const isModalActionForForm =
modalAction === 'add_delivery' || modalAction === 'add_delivery' ||
modalAction === 'edit_delivery' || modalAction === 'edit_delivery' ||
@@ -420,18 +424,7 @@ const DeliveryOrderFormModal = ({
const deliveryRejected = useMemo(() => { const deliveryRejected = useMemo(() => {
return ( return (
isResponseSuccess(marketing) && isResponseSuccess(marketing) &&
((marketing.data.latest_approval.step_number === 3 && marketing.data.latest_approval.action === 'REJECTED'
marketing.data.latest_approval.action === 'REJECTED') ||
(marketing.data.latest_approval.step_number === 2 &&
marketing.data.latest_approval.action === 'REJECTED'))
);
}, [marketing]);
const isPending = useMemo(() => {
return (
isResponseSuccess(marketing) &&
marketing.data.latest_approval.step_number === 1 &&
marketing.data.latest_approval.action === 'PENDING'
); );
}, [marketing]); }, [marketing]);
@@ -442,6 +435,7 @@ const DeliveryOrderFormModal = ({
modalAction === 'edit_delivery' || modalAction === 'edit_delivery' ||
modalAction === 'detail' modalAction === 'detail'
) { ) {
setCurrentModalAction(modalAction);
formModal.openModal(); formModal.openModal();
} }
}, [modalAction]); }, [modalAction]);
@@ -670,13 +664,7 @@ const DeliveryOrderFormModal = ({
<div className='px-4'> <div className='px-4'>
<MemoizedDeliveryOrderProductTable <MemoizedDeliveryOrderProductTable
marketing={marketing.data} marketing={marketing.data}
formType={ formType={deliveryRejected ? 'rejected' : modalAction}
deliveryRejected
? 'rejected'
: isPending
? 'pending'
: modalAction
}
data={deliveryOrderValues} data={deliveryOrderValues}
onEdit={handleEditDO} onEdit={handleEditDO}
onDelete={handleDeleteDO} onDelete={handleDeleteDO}
@@ -726,7 +714,7 @@ const DeliveryOrderFormModal = ({
variant='outline' variant='outline'
color='none' color='none'
onClick={() => rejectModal.openModal()} onClick={() => rejectModal.openModal()}
disabled={deliveryRejected || isPending} disabled={deliveryRejected}
className='p-3 border-base-content/10 shadow-button-soft rounded-lg text-sm text-base-content/50 font-semibold' className='p-3 border-base-content/10 shadow-button-soft rounded-lg text-sm text-base-content/50 font-semibold'
> >
Reject Reject
@@ -738,7 +726,7 @@ const DeliveryOrderFormModal = ({
formRef.current?.requestSubmit(); formRef.current?.requestSubmit();
}} }}
className='p-3 shadow-button-soft text-base-100 rounded-lg text-sm font-semibold' className='p-3 shadow-button-soft text-base-100 rounded-lg text-sm font-semibold'
disabled={deliveryRejected || isPending} disabled={deliveryRejected}
> >
Approve Approve
</Button> </Button>
@@ -753,8 +741,8 @@ const DeliveryOrderFormModal = ({
ref={successModal.ref} ref={successModal.ref}
iconPosition='left' iconPosition='left'
type='success' type='success'
text={`${modalAction === 'add' ? 'Data Berhasil Disimpan' : 'Data Berhasil Diubah'}`} text={`${currentModalAction === 'add' ? 'Data Berhasil Disimpan' : 'Data Berhasil Diubah'}`}
subtitleText={`${modalAction === 'add' ? 'Data delivery order telah berhasil disimpan.' : 'Data delivery order telah berhasil diubah.'}`} subtitleText={`${currentModalAction === 'add' ? 'Data delivery order telah berhasil disimpan.' : 'Data delivery order telah berhasil diubah.'}`}
primaryButton={{ primaryButton={{
text: 'Oke', text: 'Oke',
color: 'primary', color: 'primary',
@@ -764,14 +752,18 @@ const DeliveryOrderFormModal = ({
}, },
}} }}
> >
<div className='max-h-[46vh] overflow-y-auto'>
<MemoizedDeliveryOrderProductTable <MemoizedDeliveryOrderProductTable
marketing={isResponseSuccess(marketing) ? marketing.data : undefined} marketing={
isResponseSuccess(marketing) ? marketing.data : undefined
}
formType={'success'} formType={'success'}
data={deliveryOrderValues} data={deliveryOrderValues}
onDelete={handleDeleteDO} onDelete={handleDeleteDO}
onEdit={handleEditDO} onEdit={handleEditDO}
onAddProductClick={handleAddDOClick} onAddProductClick={handleAddDOClick}
/> />
</div>
</ConfirmationModal> </ConfirmationModal>
<ConfirmationModalWithNotes <ConfirmationModalWithNotes
@@ -63,6 +63,10 @@ const SalesOrderFormModal = ({
const modalAction = searchParams.get('action'); const modalAction = searchParams.get('action');
const marketingId = searchParams.get('id'); const marketingId = searchParams.get('id');
const [currentModalAction, setCurrentModalAction] = useState<string | null>(
modalAction
);
const isModalActionForForm = const isModalActionForForm =
modalAction === 'add' || modalAction === 'add' ||
modalAction === 'edit' || modalAction === 'edit' ||
@@ -412,6 +416,7 @@ const SalesOrderFormModal = ({
// ================== EFFECT ================== // ================== EFFECT ==================
useEffect(() => { useEffect(() => {
if (modalAction === 'add' || modalAction === 'edit') { if (modalAction === 'add' || modalAction === 'edit') {
setCurrentModalAction(modalAction);
formModal.openModal(); formModal.openModal();
} }
}, [modalAction]); }, [modalAction]);
@@ -724,8 +729,8 @@ const SalesOrderFormModal = ({
ref={successModal.ref} ref={successModal.ref}
iconPosition='left' iconPosition='left'
type='success' type='success'
text={`${modalAction === 'add' ? 'Data Berhasil Ditambahkan' : 'Data Berhasil Diubah'}`} text={`${currentModalAction === 'add' ? 'Data Berhasil Ditambahkan' : 'Data Berhasil Diubah'}`}
subtitleText={`${modalAction === 'add' ? 'Data sales order telah berhasil disimpan.' : 'Data sales order telah berhasil diubah.'}`} subtitleText={`${currentModalAction === 'add' ? 'Data sales order telah berhasil disimpan.' : 'Data sales order telah berhasil diubah.'}`}
primaryButton={{ primaryButton={{
text: 'Oke', text: 'Oke',
color: 'primary', color: 'primary',
@@ -735,6 +740,7 @@ const SalesOrderFormModal = ({
}, },
}} }}
> >
<div className='max-h-[46vh] overflow-y-auto'>
<MemoizedSalesOrderProductTable <MemoizedSalesOrderProductTable
formType={'success'} formType={'success'}
data={memoSalesOrder} data={memoSalesOrder}
@@ -742,6 +748,7 @@ const SalesOrderFormModal = ({
onEdit={handleEditSO} onEdit={handleEditSO}
onAddProductClick={handleAddSOClick} onAddProductClick={handleAddSOClick}
/> />
</div>
</ConfirmationModal> </ConfirmationModal>
<ConfirmationModal <ConfirmationModal