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 110 111 112 113 114 115 | import { RHFCheckbox } from "@common/Checkbox";
import { RHFInput } from "@common/Input";
import { Stack } from "@mui/material";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import { RenderNotificationForm } from "./types";
import { useEffect } from "react";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { checkPortals } from "@utils/routing";
import { HiddenComponent } from "@containers/HiddenComponent";
const GenericNotificationForm = ({
onSubmit,
setSubmitStatus,
}: RenderNotificationForm) => {
const { isAcquirerPortal } = checkPortals();
const methods = useForm<Inputs>({
mode: "onChange",
resolver: yupResolver(schema),
defaultValues: {
subject: "Provide missing data",
message: "",
addConversation: isAcquirerPortal,
},
});
const {
formState: { isValid },
} = methods;
useEffect(() => {
setSubmitStatus({
isDisabled: !isValid,
message: !isValid ? "A message is required" : "",
});
}, [isValid]);
const submitHandler: SubmitHandler<Inputs> = (data) => {
setSubmitStatus({
isDisabled: true,
message: "",
});
onSubmit({
subject: data.subject,
message: data.message,
openConversation: data.addConversation,
});
};
return (
<FormProvider {...methods}>
<Stack
direction="column"
gap="12px"
paddingInline="24px"
component="form"
id="notify-merchant-form"
onSubmit={methods.handleSubmit(submitHandler)}
>
<FadeUpWrapper delay={40}>
<RHFInput
name="subject"
fullWidth
placeholder="Notification subject"
label="Subject"
/>
</FadeUpWrapper>
<FadeUpWrapper delay={60}>
<RHFInput
name="message"
fullWidth
placeholder="Message for merchant"
label="Message"
multiline
rows={5}
/>
</FadeUpWrapper>
<HiddenComponent hidden={!isAcquirerPortal}>
<FadeUpWrapper delay={80}>
<RHFCheckbox
name="addConversation"
label="Add a note in conversation"
sx={{
"& .MuiButtonBase-root.MuiCheckbox-root": {
height: 20,
"& > svg": {
height: 18,
width: 18,
},
},
}}
/>
</FadeUpWrapper>
</HiddenComponent>
</Stack>
</FormProvider>
);
};
export default GenericNotificationForm;
type Inputs = {
subject: string;
message: string;
addConversation: boolean;
};
const schema = Yup.object().shape({
subject: Yup.string(),
message: Yup.string().required("A message is required"),
addConversation: Yup.boolean(),
});
|