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 97 98 99 100 101 102 103 104 105 106 107 108 109 | 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x | import NiceModal from "@ebay/nice-modal-react";
import ModalFactory from "@common/Modal/ModalFactory/ModalFactory";
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import { useTransferActions } from "./hooks/useTransferActions";
import { ModalActions, ModalTitle } from "@common/Modal/ModalFactory/atoms";
import { FormProvider, useForm } from "react-hook-form";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import MultiLineInput from "@common/Input/MultiLineInput";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
type CancelProps = {
transactionId: string;
customerID: number;
};
type FormFields = {
reason: string;
};
const defaultValues = { reason: "" };
const MAX_LENGTH = 300;
const CancelTransferModal = NiceModal.create(
({ transactionId, customerID }: CancelProps) => {
const { open, onClose, TransitionProps } = useNiceModal();
const { handleCancelTransfer, isLoading } = useTransferActions({
customerID,
transactionId,
});
const schema = Yup.object().shape({
reason: Yup.string().required("Name is required").trim(),
});
const methods = useForm<FormFields>({
resolver: yupResolver(schema),
defaultValues,
});
const {
watch,
formState: { isValid },
} = methods;
const { reason } = watch();
return (
<ModalFactory
variant="dialog"
modalProps={{
open: open,
onClose,
DialogProps: {
paperStyle: { padding: "24px 24px 16px " },
TransitionProps,
},
}}
>
<ModalTitle
title="Transfer Cancellation"
onClose={onClose}
textStyles={{
title: {
fontSize: "18px",
lineHeight: "21.6px",
letterSpacing: "-0.18px",
},
description: {
lineHeight: "16.8px",
},
}}
containerProps={{ sx: { mb: "16px" } }}
description="Are you sure you want to cancel this transfer? This action cannot be reversed. Please confirm your decision to proceed with cancellation."
/>
<FormProvider {...methods}>
<FadeUpWrapper delay={100}>
<MultiLineInput
name="reason"
label="Cancellation Reason"
placeholder="Cancellation Reason"
rows={8}
inputProps={{ maxLength: MAX_LENGTH }}
helperText={`${reason.length}/${MAX_LENGTH}`}
/>
</FadeUpWrapper>
</FormProvider>
<ModalActions
animationDelay={100}
secondaryAction={{
label: "Discard",
onClick: onClose,
disabled: isLoading,
}}
primaryAction={{
type: "button",
onClick: () => handleCancelTransfer(reason),
form: "cancel-transfer",
background: "primary",
disabled: !isValid || isLoading,
label: "Cancel Transfer",
}}
containerProps={{ sx: { mt: "20px" } }}
/>
</ModalFactory>
);
},
);
export default CancelTransferModal;
|