Rocketplan/src/shared/components/Forms/ContractFormsModal/ContractFormsModal.tsx

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 };