Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 1x 1x 4x 4x 4x 4x 4x 4x 4x 2x 4x | import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import { useTransferActions } from "@components/ManageMoney/TransactionTable/TableActions/hooks/useTransferActions";
import NiceModal from "@ebay/nice-modal-react";
import { Stack } from "@mui/material";
import GiveButton from "@shared/Button/GiveButton";
import { HFGiveInput } from "@shared/HFInputs/HFGiveInput/HFGiveInput";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import GiveText from "@shared/Text/GiveText";
import { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form";
const REASON_MAX_LENGTH = 300;
type CancelProps = {
transactionId: string;
customerID: number;
transactionParentId?: string;
};
const CancelTransferModalV2 = NiceModal.create(
({ customerID, transactionId, transactionParentId }: CancelProps) => {
const { open, onClose } = useNiceModal();
const { handleCancelTransfer, isLoading } = useTransferActions({
customerID,
transactionId,
transactionParentId,
});
const defaultValues = {
reason: "",
};
const methods = useForm({
mode: "onChange",
defaultValues: defaultValues,
});
const { watch, reset } = methods;
const values = watch();
useEffect(() => {
reset({ reason: "" });
}, [open]);
return (
<GiveBaseModal
open={open}
title="Transfer Cancellation"
width="560px"
height="fit-content"
onClose={onClose}
buttons={
<>
<GiveButton
variant="ghost"
size="large"
label="Cancel"
onClick={onClose}
disabled={isLoading}
/>
<GiveButton
size="large"
variant="filled"
label="Cancel Transfer"
onClick={() => handleCancelTransfer(values.reason)}
disabled={!values.reason || isLoading}
/>
</>
}
>
<FormProvider {...methods}>
<Stack spacing={2}>
<GiveText variant="bodyS" mb={2} color="secondary">
Are you sure you want to cancel this transfer? This action cannot
be reversed. Please confirm your decision to proceed with
cancellation.
</GiveText>
<HFGiveInput
label="Cancellation Reason"
placeholder={`e.g., "Incorrect recipient information" or "Duplicated transfer"`}
name="reason"
multiline
rows={8}
inputProps={{
maxLength: REASON_MAX_LENGTH,
}}
helperText={`${values.reason.length}/${REASON_MAX_LENGTH}`}
/>
</Stack>
</FormProvider>
</GiveBaseModal>
);
},
);
export default CancelTransferModalV2;
|