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 | 1x 1x 4x 4x 4x 4x 4x 4x | import NiceModal from "@ebay/nice-modal-react";
import { palette } from "@palette";
import { Text } from "@common/Text";
import { UnderwritingPopupBase } from "../../modals/ApproveMerchantPopup";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { FormProvider, useForm } from "react-hook-form";
import { Stack } from "@mui/material";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import MultiLineInput from "@common/Input/MultiLineInput";
type Props = {
handleDecline: (cb: () => void, reason?: string) => void;
name: string;
};
type FormFields = {
reason: string;
};
const defaultValues = { reason: "" };
const SponsorDeclineMerchantModal = NiceModal.create(
({ handleDecline, name }: Props) => {
const schema = Yup.object().shape({
reason: Yup.string().required("Name is required").trim(),
});
const methods = useForm<FormFields>({
resolver: yupResolver(schema),
defaultValues,
});
const { watch } = methods;
const { reason } = watch();
const props = {
modalTitle: "Decline Merchant",
submitLabel: "Decline",
children: (
<Stack spacing={2.5} sx={{ overflow: "hidden" }}>
<Text
fontWeight="book"
color={palette.neutral[70]}
lineHeight="16.8px"
>
Are you sure you want to decline{" "}
<span style={{ color: palette.neutral[100] }}>{name}</span>? This
action will finalize the approval status and cannot be undone.
</Text>
<FormProvider {...methods}>
<FadeUpWrapper delay={100}>
<MultiLineInput
name="reason"
label="Reason"
placeholder="Reason"
rows={6}
/>
</FadeUpWrapper>
</FormProvider>
</Stack>
),
};
return (
<UnderwritingPopupBase
handleSubmit={(cb: () => void) => handleDecline(cb, reason)}
primaryButtonBackground={palette.filled.red}
actionSx={{ fontSize: 18 }}
{...props}
/>
);
},
);
export default SponsorDeclineMerchantModal;
|