Skip to content

Commit 0e4f808

Browse files
don-aotdon-aot
authored
COMP-665:Additional confirmation for Order Rescind (#561)
* COMP-665:Additional confirmation for Order Rescind * COMP-665:Additional confirmation for Order Rescind
1 parent e933ce5 commit 0e4f808

File tree

3 files changed

+146
-54
lines changed

3 files changed

+146
-54
lines changed

‎compliance-web/src/components/App/Inspections/Profile/Enforcements/Orders/OrderApprovalButtons.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import ConfirmationModal from "@/components/Shared/Popups/ConfirmationModal";
2727
import { useQueryClient } from "@tanstack/react-query";
2828
import IssueEnforcementModal from "@/components/App/Inspections/Profile/Enforcements/IssueEnforcementModal";
2929
import { useDrawer } from "@/store/drawerStore";
30-
import OrderRecindModal from "./OrderRecindModal";
30+
import OrderRescindModal from "./OrderRescindModal";
3131
import { Inspection } from "@/models/Inspection";
3232

3333
const OrderApprovalButtons = ({
@@ -298,10 +298,10 @@ const OrderApprovalButtons = ({
298298
[setOpen, latestOrder.order_number, latestOrder.id, updateOrderStatus]
299299
);
300300

301-
const handleRecindButtonClick = useCallback(() => {
301+
const handleRescindButtonClick = useCallback(() => {
302302
setOpen({
303303
content: (
304-
<OrderRecindModal
304+
<OrderRescindModal
305305
order={latestOrder}
306306
onSuccess={(message, data) => {
307307
refetchDataAndClose(message);
@@ -312,6 +312,7 @@ const OrderApprovalButtons = ({
312312
isHistoricalInspection={inspection.is_history}
313313
/>
314314
),
315+
width: "520px",
315316
});
316317
}, [
317318
setOpen,
@@ -361,7 +362,7 @@ const OrderApprovalButtons = ({
361362
)}
362363
{isShowRescindCloseButton && (
363364
<Box sx={{ display: "inline-flex", gap: 2 }}>
364-
<Button color="secondary" onClick={handleRecindButtonClick}>
365+
<Button color="secondary" onClick={handleRescindButtonClick}>
365366
Rescind Order
366367
</Button>
367368
<Button

‎compliance-web/src/components/App/Inspections/Profile/Enforcements/Orders/OrderRescindActions.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { useModal } from "@/store/modalStore";
2+
import { Box, Button, DialogActions, Typography } from "@mui/material";
3+
import { FC, useState } from "react";
4+
import { useFormContext } from "react-hook-form";
5+
import LoadingButton from "@/components/Shared/LoadingButton";
6+
7+
type OrderRescindActionsProps = {
8+
onReplaceAction?: () => void;
9+
onRescindAction?: () => void;
10+
isButtonValidation?: boolean;
11+
onRescindConfirmationText?: string;
12+
isLoading?: boolean;
13+
isRescindActionLoading?: boolean;
14+
};
15+
16+
const OrderRescindActions: FC<OrderRescindActionsProps> = ({
17+
onReplaceAction,
18+
onRescindAction,
19+
isButtonValidation,
20+
onRescindConfirmationText = "Are you sure you want to rescind this order?",
21+
isLoading = false,
22+
isRescindActionLoading = false,
23+
}) => {
24+
const { setClose } = useModal();
25+
const formContext = useFormContext();
26+
const [showRescindConfirmation, setShowRescindConfirmation] = useState(false);
27+
28+
const isValid = isButtonValidation ? formContext?.formState.isValid : true;
29+
30+
return (
31+
<>
32+
{!showRescindConfirmation && (
33+
<DialogActions
34+
sx={{
35+
padding: "1rem 1.5rem",
36+
justifyContent: "space-between",
37+
}}
38+
>
39+
<Button
40+
variant="text"
41+
onClick={() => setClose()}
42+
data-testid="rescind-modal-button-cancel"
43+
>
44+
Cancel
45+
</Button>
46+
<Box sx={{ display: "flex", gap: "0.75rem" }}>
47+
<LoadingButton
48+
type="submit"
49+
data-testid="rescind-modal-button-replace"
50+
disabled={!isValid}
51+
isLoading={isLoading}
52+
onClick={onReplaceAction}
53+
>
54+
Replace
55+
</LoadingButton>
56+
<Button
57+
color="error"
58+
onClick={() => {
59+
setShowRescindConfirmation(true);
60+
}}
61+
disabled={showRescindConfirmation}
62+
data-testid="rescind-modal-button-rescind"
63+
>
64+
Rescind
65+
</Button>
66+
</Box>
67+
</DialogActions>
68+
)}
69+
70+
{showRescindConfirmation && (
71+
<Box
72+
sx={{
73+
padding: "1rem 1.5rem",
74+
display: "flex",
75+
justifyContent: "space-between",
76+
alignItems: "center",
77+
gap: "0.5rem",
78+
}}
79+
>
80+
<Box
81+
sx={{
82+
display: "flex",
83+
flexDirection: "column",
84+
flexWrap: "wrap",
85+
flex: 1,
86+
}}
87+
>
88+
<Typography variant="body1" fontWeight={"bold"}>
89+
Rescind Confirmation
90+
</Typography>
91+
<Typography variant="body1">{onRescindConfirmationText}</Typography>
92+
</Box>
93+
<Button
94+
sx={{ minWidth: 100, height: 40 }}
95+
color="secondary"
96+
onClick={() => {
97+
setShowRescindConfirmation(false);
98+
}}
99+
data-testid="rescind-confirmation-cancel-button"
100+
>
101+
No, Cancel
102+
</Button>
103+
<LoadingButton
104+
sx={{ minWidth: 100, height: 40 }}
105+
onClick={onRescindAction}
106+
color="error"
107+
data-testid="rescind-confirmation-button"
108+
isLoading={isRescindActionLoading}
109+
>
110+
Yes, Rescind
111+
</LoadingButton>
112+
</Box>
113+
)}
114+
</>
115+
);
116+
};
117+
118+
export default OrderRescindActions;

compliance-web/src/components/App/Inspections/Profile/Enforcements/Orders/OrderRecindModal.tsx renamed to compliance-web/src/components/App/Inspections/Profile/Enforcements/Orders/OrderRescindModal.tsx

Lines changed: 23 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
import {
2-
Box,
3-
Button,
4-
DialogActions,
52
DialogContent,
63
Typography,
74
} from "@mui/material";
@@ -17,14 +14,14 @@ import {
1714
useUpdateOrderStatus,
1815
} from "@/hooks/useInspectionOrders";
1916
import { OrderStatusEnum } from "@/utils/constants";
20-
import { useModal } from "@/store/modalStore";
21-
type OrderRecindModalProps = {
17+
import OrderRescindActions from "./OrderRescindActions";
18+
type OrderRescindModalProps = {
2219
order: InspectionOrder;
2320
onSuccess: (message: string, data?: InspectionOrder) => void;
2421
isHistoricalInspection?: boolean;
2522
};
2623

27-
const createOrderRecindSchema = (isHistoricalInspection: boolean) =>
24+
const createOrderRescindSchema = (isHistoricalInspection: boolean) =>
2825
yup.object().shape({
2926
replacementOrderNumber: isHistoricalInspection
3027
? yup
@@ -38,31 +35,29 @@ const initFormData = {
3835
replacementOrderNumber: undefined,
3936
};
4037

41-
const OrderRecindModal: FC<OrderRecindModalProps> = ({
38+
const OrderRescindModal: FC<OrderRescindModalProps> = ({
4239
order,
4340
onSuccess,
4441
isHistoricalInspection,
4542
}) => {
46-
const { setClose } = useModal();
4743

48-
const orderRecindSchema = createOrderRecindSchema(
44+
const orderRescindSchema = createOrderRescindSchema(
4945
isHistoricalInspection ?? false
5046
);
5147

52-
type OrderRecindFormType = yup.InferType<
53-
ReturnType<typeof createOrderRecindSchema>
48+
type OrderRescindFormType = yup.InferType<
49+
ReturnType<typeof createOrderRescindSchema>
5450
>;
5551

56-
const methods = useForm<OrderRecindFormType>({
57-
resolver: yupResolver(orderRecindSchema),
52+
const methods = useForm<OrderRescindFormType>({
53+
resolver: yupResolver(orderRescindSchema),
5854
mode: "onBlur",
5955
defaultValues: initFormData,
6056
});
6157

6258
const {
6359
handleSubmit,
6460
reset,
65-
formState: { isValid },
6661
} = methods;
6762

6863
useEffect(() => {
@@ -73,12 +68,12 @@ const OrderRecindModal: FC<OrderRecindModalProps> = ({
7368
onSuccess("Order replaced", data);
7469
};
7570

76-
const { mutate: updateOrderStatus } = useUpdateOrderStatus(() =>
71+
const { mutate: updateOrderStatus, isPending: isRescindLoading } = useUpdateOrderStatus(() =>
7772
onSuccess("Order rescinded")
7873
);
79-
const { mutate: replaceOrder } = useReplaceOrder(onReplaceSuccess);
74+
const { mutate: replaceOrder, isPending: isReplaceLoading } = useReplaceOrder(onReplaceSuccess);
8075

81-
const onRecindHandler = () => {
76+
const onRescindHandler = () => {
8277
updateOrderStatus({
8378
inspectionOrderId: order.id ?? 0,
8479
statusPayload: {
@@ -87,7 +82,7 @@ const OrderRecindModal: FC<OrderRecindModalProps> = ({
8782
});
8883
};
8984

90-
const onReplaceHandler = (data: OrderRecindFormType) => {
85+
const onReplaceHandler = (data: OrderRescindFormType) => {
9186
const payload: {
9287
inspectionOrderId: number;
9388
replacementOrderNumber?: string;
@@ -103,7 +98,7 @@ const OrderRecindModal: FC<OrderRecindModalProps> = ({
10398
return (
10499
<FormProvider {...methods}>
105100
<form onSubmit={handleSubmit(onReplaceHandler)}>
106-
<ModalTitleBar title={"Recind Order?"} />
101+
<ModalTitleBar title={"Rescind Order?"} />
107102
<DialogContent dividers>
108103
<Typography variant="body1">
109104
You are about to rescind Order <strong>{order.order_number}</strong>
@@ -143,39 +138,17 @@ const OrderRecindModal: FC<OrderRecindModalProps> = ({
143138
/>
144139
)}
145140
</DialogContent>
146-
<DialogActions
147-
sx={{
148-
padding: "1rem 1.5rem",
149-
justifyContent: "space-between",
150-
}}
151-
>
152-
<Button
153-
variant="text"
154-
onClick={() => setClose()}
155-
data-testid="recind-modal-button-cancel"
156-
>
157-
Cancel
158-
</Button>
159-
<Box sx={{ display: "flex", gap: "0.75rem" }}>
160-
<Button
161-
type="submit"
162-
data-testid="recind-modal-button-replace"
163-
disabled={!isValid}
164-
>
165-
Replace
166-
</Button>
167-
<Button
168-
color="error"
169-
onClick={onRecindHandler}
170-
data-testid="recind-modal-button-recind"
171-
>
172-
Recind
173-
</Button>
174-
</Box>
175-
</DialogActions>
141+
<OrderRescindActions
142+
onReplaceAction={() => handleSubmit(onReplaceHandler)()}
143+
onRescindAction={onRescindHandler}
144+
isButtonValidation={true}
145+
onRescindConfirmationText={`Are you sure you want to rescind this?`}
146+
isLoading={isReplaceLoading}
147+
isRescindActionLoading={isRescindLoading}
148+
/>
176149
</form>
177150
</FormProvider>
178151
);
179152
};
180153

181-
export default OrderRecindModal;
154+
export default OrderRescindModal;

0 commit comments

Comments
 (0)