ContactForm.tsx

import React, { ChangeEvent, MouseEventHandler, useState } from 'react';
import { useTranslation } from 'react-i18next';
import UrgentRequest from '../urgent-request/UrgentRequest';
import styles from './ContactForm.module.scss';
import panelTransition from '../../styles/transitions/panel.module.scss';
import Fieldset from '../fieldset/Fieldset';
import Input from '../input/Input';
import Modal from '../modal/Modal';

export interface ContactFormProps {
  formAction: string;
  problemGroup: string;
  problem: string;
}
export const ContactForm: React.FC<ContactFormProps> = ({
  formAction,
  problemGroup,
  problem,
}: ContactFormProps) => {
  const [urgentIntent, setUrgentIntent] = useState<boolean>(false);
  const [state, setState] = useState<Record<string, string>>({});
  const [modalContent, setModalContent] = useState<string>('');
  const { t } = useTranslation();

  const changeHandler = (
    event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>,
  ) => {
    setState({ ...state, ...{ [event.target.name]: event.target.value } });
  };

  const changeUrgentIntent = (event: ChangeEvent<HTMLInputElement>) => {
    setUrgentIntent(event.target.checked);
  };

  const submit: MouseEventHandler<HTMLButtonElement> = (event) => {
    if (process.env.NODE_ENV !== 'production') {
      event.preventDefault();
      console.log('Not submitting if not in production mode.');
      const formData = { ...state, ...{ urgent: urgentIntent ? 'yes' : 'no' } };
      setModalContent('form contents: ' + JSON.stringify(formData));
    }
  };

  return (
    <form
      action={formAction}
      name="HelpfulContactForm"
      className={`${styles.ContactForm} cosmosForm`}
      aria-label={t("Contact form")}
    >
      <Fieldset legend={t('contact.details')}>
        <Input
          label={t('contact.name')}
          id="name"
          name="HelpfulContactForm[name]"
          required
          onChange={changeHandler}
        />
        <Input
          label={t('contact.phone')}
          id="phone"
          name="HelpfulContactForm[phone]"
          onChange={changeHandler}
        />
        <Input
          label={t('contact.identification')}
          id="identification"
          name="HelpfulContactForm[identification]"
          onChange={changeHandler}
          required
        />
        <Input
          label={t('contact.email')}
          id="email"
          name="HelpfulContactForm[email]"
          onChange={changeHandler}
          required
        />
      </Fieldset>
      <Fieldset legend={t('contact.tell-us')}>
        <Input
          label={t('Message')}
          id="message"
          name="HelpfulContactForm[message]"
          onChange={changeHandler}
          type="textarea"
          required
        />
      </Fieldset>
      {problemGroup == 'technical' && (
        <div className="field.switch">
          <input
            id="urgency-checkbox"
            type="checkbox"
            className="switch fold-button"
            onChange={changeUrgentIntent}
          />
          <label htmlFor="urgency-checkbox">{t('urgency.foldText')}</label>
        </div>
      )}
      <div className="field">
        <div>
          <input
            name="HelpfulContactForm[urgency]"
            value={urgentIntent ? 'urgent' : 'normal'}
            type="hidden"
          />
          {urgentIntent && (
            <UrgentRequest submit={submit}/>
          )}
          {!urgentIntent && (
            <button
              className="good"
              type="submit"
              onClick={submit}
            >
              {t('submit')}
            </button>
          )}
        </div>
      </div>
      {modalContent && (
        <Modal
          defaultActionCallback={() => setModalContent('')}
          closeCallback={() => setModalContent('')}
          buttons={
            <button className="good" onClick={() => setModalContent('')}>
              {t('Okay')}
            </button>
          }
          header={t('Thank you')}
        >
          {modalContent}
        </Modal>
      )}
    </form>
  );
};

export default ContactForm;