chore: use monorepo organization

packages/admin-ui/src/pages/Customers/components/notes/NewNoteModal.jsx

@@ -0,0 +1,74 @@
+import { Form, Formik, Field } from 'formik'
+import { React } from 'react'
+import ErrorMessage from 'src/components/ErrorMessage'
+import Modal from 'src/components/Modal'
+import * as Yup from 'yup'
+
+import { Button } from 'src/components/buttons'
+import { TextInput } from 'src/components/inputs/formik'
+
+const initialValues = {
+  title: '',
+  content: ''
+}
+
+const validationSchema = Yup.object().shape({
+  title: Yup.string().required().trim().max(25),
+  content: Yup.string().required()
+})
+
+const NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => {
+  return (
+    <>
+      <Modal
+        title="New note"
+        closeOnBackdropClick={true}
+        width={416}
+        height={472}
+        handleClose={onClose}
+        open={showModal}>
+        <Formik
+          validateOnBlur={false}
+          validateOnChange={false}
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={({ title, content }) => {
+            onSubmit({ title, content })
+          }}>
+          <Form id="note-form" className="flex flex-col h-full gap-5">
+            <Field
+              name="title"
+              autofocus
+              size="md"
+              autoComplete="off"
+              width={350}
+              component={TextInput}
+              label="Note title"
+            />
+            <Field
+              name="content"
+              size="sm"
+              autoComplete="off"
+              width={350}
+              component={TextInput}
+              multiline={true}
+              rows={11}
+              label="Note content"
+            />
+            <div className="flex flex-row mt-auto mb-6">
+              {errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
+              <Button
+                type="submit"
+                form="note-form"
+                className="mt-auto ml-auto">
+                Add note
+              </Button>
+            </div>
+          </Form>
+        </Formik>
+      </Modal>
+    </>
+  )
+}
+
+export default NewNoteModal