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 | import { Button } from "@common/Button";
import { RHFInput } from "@common/Input";
import EditMerchantBaseModal from "@components/Merchants/MerchantPreview/components/EditMerchantBaseModal";
import NiceModal, { useModal } from "@ebay/nice-modal-react";
import { Stack } from "@mui/material";
import { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form";
type Props = {
handleNotify: (message: string) => void;
name: string;
isEnterprise: boolean;
requireMessage?: boolean;
};
const NotifyMerchantModal = NiceModal.create(
({ handleNotify, name, isEnterprise, requireMessage = false }: Props) => {
const modal = useModal();
const handleCancel = () => {
modal.hide();
};
const methods = useForm();
const { watch, reset } = methods;
const values = watch();
const onSubmit = () => {
handleNotify(values?.message || "");
handleCancel();
};
const actionStyle = {
padding: "8px 24px",
};
useEffect(() => {
if (modal.visible) {
reset({ message: "" });
}
}, [modal.visible]);
return (
<EditMerchantBaseModal
title={`Notify ${name}`}
description={`${
requireMessage ? "Please" : "Optionally,"
} attach a note for the members of this ${
isEnterprise ? "provider" : "merchant"
} to read`}
open={modal.visible}
handleCancel={handleCancel}
actions={
<Button
size="medium"
background="primary"
sx={actionStyle}
form="notify-merchant-form"
type="submit"
data-testid="notify-merchant-btn"
disabled={requireMessage && !values.message}
>
Notify
</Button>
}
sx={{
"& .MuiPaper-root": {
width: "600px !important",
maxWidth: "600px !important",
},
"& .MuiDialogTitle-root + .MuiDialogContent-root": {
padding: "0 16px 16px 16px !important",
},
"& .MuiDialog-paper": {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
},
}}
>
<FormProvider {...methods}>
<Stack
spacing={2}
component="form"
id="notify-merchant-form"
onSubmit={methods.handleSubmit(onSubmit)}
>
<RHFInput
name="message"
fullWidth
placeholder="Message for merchant members"
label="Message"
/>
</Stack>
</FormProvider>
</EditMerchantBaseModal>
);
},
);
export default NotifyMerchantModal;
|