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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 1x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 4x 1x | import NiceModal, { useModal } from "@ebay/nice-modal-react";
import { useRef, useState } from "react";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import { Stack } from "@mui/material";
import GiveAlert from "@shared/GiveAlert/GiveAlert";
import TaskCard from "@features/Merchants/MerchantSidePanel/UnderwritingTasks/components/TaskCard";
import GiveButton from "@shared/Button/GiveButton";
import { NotesContent } from "@features/Merchants/MerchantSidePanel/UnderwritingTasks/components/Sections";
import { FormProvider, useForm } from "react-hook-form";
import { WarningIcon } from "@phosphor-icons/react";
import { NOTE_MAX_LENGTH } from "@components/Disputes/DisputesList/constants";
interface Props {
defaultNote?: string;
onSave: (note: string) => void;
}
type FormType = {
note: string;
};
const GiveAddNoteModal = NiceModal.create(
({ defaultNote = "", onSave }: Props) => {
const { visible, remove } = useModal();
const [isNotesFocused, setIsNotesFocused] = useState(false);
const notesRef = useRef<any>();
const methods = useForm<FormType>({
mode: "onSubmit",
reValidateMode: "onSubmit",
defaultValues: {
note: defaultNote,
},
});
const {
formState: { isDirty },
getValues,
reset,
} = methods;
const isNotesBeingEdited = isNotesFocused || isDirty;
const handleCancel = () => remove();
const handleSave = () => {
const currentNote = getValues("note");
onSave(currentNote);
handleCancel();
};
return (
<GiveBaseModal
title="Add a Note"
open={visible}
onClose={remove}
buttons={
<>
<GiveButton
label="Cancel"
size="large"
onClick={remove}
variant="ghost"
/>
<GiveButton
data-testid="add-note-submit-button"
label="Save"
size="large"
onClick={handleSave}
disabled={!isDirty}
/>
</>
}
>
<FormProvider {...methods}>
<Stack gap="24px">
<GiveAlert
Icon={<WarningIcon />}
type="warning2"
label="This note will be added to the document as information for the bank."
iconContainerSx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
/>
<TaskCard
title="Action Note"
onEdit={
isNotesBeingEdited
? undefined
: () => notesRef?.current?.focus()
}
actions={
isNotesBeingEdited
? [
{
element: (
<GiveButton
label="Discard"
variant="ghost"
onClick={() => reset({ note: defaultNote })}
disabled={!isDirty}
/>
),
},
{
element: (
<GiveButton
label="Save"
variant="filled"
size="small"
onClick={handleSave}
disabled={!isDirty}
/>
),
},
]
: undefined
}
>
<NotesContent
inputRef={notesRef}
setIsNotesFocused={setIsNotesFocused}
name="note"
placeholder="Enter your note..."
maxLength={NOTE_MAX_LENGTH}
minHeight={60}
maxHeight={248}
/>
</TaskCard>
</Stack>
</FormProvider>
</GiveBaseModal>
);
},
);
export default GiveAddNoteModal;
|