feat: add create and edit forms functionality

2025-07-04 20:13:32 +01:00
parent 3b46073ee8
commit aa66f262b2
24 changed files with 892 additions and 71 deletions
@@ -0,0 +1,144 @@
+import React, { memo, RefObject } from 'react';
+import { Modal } from 'Components/Modal';
+import { areEqual } from 'Utils/equalityChecks';
+import { ValidateBackGround } from 'Components/Validation';
+import { PurpleButton } from 'Components/Button';
+import { Label } from 'Components/Label';
+import { TextBox } from 'Components/TextBox';
+import { CheckBox } from 'Components/CheckBox';
+import { TextArea } from 'Components/TextArea';
+import { ContractFormsSuccessToast } from '../ContractFormsSuccessToast';
+
+import classes from './contractFormsModal.module.css';
+
+const templateTags = [
+  '~~~name~~~',
+  '~~~project~~~',
+  '~~~job_no~~~',
+  '~~~company~~~',
+  '~~~current_date~~~',
+  '~~~date_of_loss~~~',
+  '~~~company_address~~~',
+  '~~~policy_holder_name~~~',
+  '~~~policy_number~~~',
+  '~~~claim_number~~~',
+  '~~~input~~~',
+  '~~~checkbox~~~',
+  '~~~company_logo~~~',
+];
+
+interface Props {
+  isOpen: boolean;
+  formData: any;
+  formErrors: any;
+  title: string;
+  submitText: string;
+  showToast: boolean;
+  toastMessage: string;
+  onFormSubmit: (e: any) => void;
+  onClickClose: (e: any) => void;
+  handleChange: (e: any) => void;
+  textAreaRef: RefObject<HTMLTextAreaElement>;
+  handleTagClick: (tag: string) => void;
+  submitting: boolean;
+}
+
+const ContractFormsModal = ({
+  isOpen,
+  title,
+  submitText,
+  formData,
+  formErrors,
+  showToast,
+  toastMessage,
+  onFormSubmit,
+  onClickClose,
+  handleChange,
+  textAreaRef,
+  handleTagClick,
+  submitting,
+}: Props) => (
+  <Modal
+    id="contractsFormModal"
+    classes={classes}
+    title={title}
+    isOpen={isOpen}
+    leftHeaderIcon="projects"
+    modalHeader
+    modalCloseClick={onClickClose}
+    toast={<ContractFormsSuccessToast showToast={showToast} message={toastMessage} />}
+  >
+    <form className={classes.form} onSubmit={onFormSubmit}>
+      <ValidateBackGround isValid={!formErrors?.name.length}>
+        <Label ariaLabel="Form Name" className={classes.formNameLabel} htmlFor="formName">
+          Form Name
+        </Label>
+        <TextBox
+          name="name"
+          id="name"
+          type="text"
+          className={`${classes.validateField} ${formErrors?.name.length ? classes.invalidField : classes.validField} ${
+            formErrors?.name.length ? 'is-invalid' : ''
+          }`}
+          placeholder="Authorization form"
+          ariaLabel="Form Name"
+          value={formData.name}
+          onChange={handleChange}
+        />
+        <div className={`${classes.invalidFieldFeedback} invalid-feedback`}>{formErrors?.name?.[0]}</div>
+      </ValidateBackGround>
+
+      <div className={classes.requireSignatureContainer}>
+        <Label ariaLabel="Require signature" className={classes.requireSignatureLabel} htmlFor="requireSignature">
+          Require Signature
+        </Label>
+        <CheckBox
+          checked={formData.requireSignature}
+          name="requireSignature"
+          id="requireSignature"
+          onChange={handleChange}
+          className={classes.requireSignatureCheckbox}
+        />
+      </div>
+
+      <div className={classes.contractTemplateContainer}>
+        <Label ariaLabel="Contract Template" htmlFor="template" className="text-right pt-2">
+          Contract Template
+        </Label>
+        <div className={classes.contractTemplateFlex}>
+          <div className={classes.templateTags}>
+            {templateTags.map((tag) => (
+              <button key={tag} type="button" onKeyDown={() => {}} className="" onClick={() => handleTagClick(tag)}>
+                {tag}
+              </button>
+            ))}
+          </div>
+          <div className={classes.textAreaWrapper}>
+            {formErrors?.template?.[0] && <p className={classes.textAreaWarning}>{formErrors?.template?.[0]}</p>}
+            <TextArea
+              id="template"
+              minRows={15}
+              name="template"
+              ariaLabel="contract template"
+              ref={textAreaRef}
+              value={formData.template}
+              onChange={handleChange}
+              className={classes.templateTextarea}
+              placeholder="Type your contract template here or click on tags from the left panel..."
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={classes.footer}>
+        <PurpleButton type="submit" className={classes.submitButton} disabled={submitting} outlined>
+          {!submitting ? submitText : '...'}
+        </PurpleButton>
+      </div>
+    </form>
+  </Modal>
+);
+
+const ContractFormsModalMemo = memo(ContractFormsModal, areEqual);
+
+export { ContractFormsModalMemo as ContractFormsModal };