aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/forms/contact-form.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/forms/contact-form.tsx')
-rw-r--r--src/components/organisms/forms/contact-form.tsx154
1 files changed, 0 insertions, 154 deletions
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx
deleted file mode 100644
index ca84c25..0000000
--- a/src/components/organisms/forms/contact-form.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { FC, ReactNode, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { Button, Form, Spinner } from '../../atoms';
-import { LabelledField } from '../../molecules';
-import styles from './contact-form.module.scss';
-
-export type ContactFormData = {
- email: string;
- message: string;
- name: string;
- subject: string;
-};
-
-export type ContactFormProps = {
- /**
- * Set additional classnames to the form wrapper.
- */
- className?: string;
- /**
- * Pass a component to print a success/error message.
- */
- Notice?: ReactNode;
- /**
- * A callback function to send mail.
- */
- sendMail: (data: ContactFormData, reset: () => void) => Promise<void>;
-};
-
-/**
- * ContactForm component
- *
- * Render a contact form.
- */
-export const ContactForm: FC<ContactFormProps> = ({
- className = '',
- Notice,
- sendMail,
-}) => {
- const intl = useIntl();
- const [name, setName] = useState<string>('');
- const [email, setEmail] = useState<string>('');
- const [object, setObject] = useState<string>('');
- const [message, setMessage] = useState<string>('');
- const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-
- /**
- * Reset all the form fields.
- */
- const resetForm = () => {
- setName('');
- setEmail('');
- setObject('');
- setMessage('');
- setIsSubmitting(false);
- };
-
- const formName = intl.formatMessage({
- defaultMessage: 'Contact form',
- description: 'ContactForm: form accessible name',
- id: 'HFdzae',
- });
-
- const nameLabel = intl.formatMessage({
- defaultMessage: 'Name:',
- description: 'ContactForm: name label',
- id: '1dCuCx',
- });
-
- const emailLabel = intl.formatMessage({
- defaultMessage: 'Email:',
- description: 'ContactForm: email label',
- id: 'w4B5PA',
- });
-
- const objectLabel = intl.formatMessage({
- defaultMessage: 'Object:',
- description: 'ContactForm: object label',
- id: 's8/tyz',
- });
-
- const messageLabel = intl.formatMessage({
- defaultMessage: 'Message:',
- description: 'ContactForm: message label',
- id: 'yN5P+m',
- });
-
- const submitHandler = async () => {
- setIsSubmitting(true);
- sendMail({ email, message, name, subject: object }, resetForm).then(() =>
- setIsSubmitting(false)
- );
- };
-
- return (
- <Form aria-label={formName} className={className} onSubmit={submitHandler}>
- <LabelledField
- className={styles.field}
- id="contact-name"
- label={nameLabel}
- name="contact-name"
- required={true}
- setValue={setName}
- type="text"
- value={name}
- />
- <LabelledField
- className={styles.field}
- id="contact-email"
- label={emailLabel}
- name="contact-email"
- required={true}
- setValue={setEmail}
- type="email"
- value={email}
- />
- <LabelledField
- className={styles.field}
- id="contact-object"
- label={objectLabel}
- name="contact-object"
- setValue={setObject}
- type="text"
- value={object}
- />
- <LabelledField
- className={styles.field}
- id="contact-message"
- label={messageLabel}
- name="contact-message"
- required={true}
- setValue={setMessage}
- type="textarea"
- value={message}
- />
- <Button type="submit" kind="primary" className={styles.button}>
- {intl.formatMessage({
- defaultMessage: 'Send',
- description: 'ContactForm: send button',
- id: 'VkAnvv',
- })}
- </Button>
- {isSubmitting && (
- <Spinner
- message={intl.formatMessage({
- defaultMessage: 'Sending mail...',
- description: 'ContactForm: spinner message on submit',
- id: 'xaqaYQ',
- })}
- />
- )}
- {Notice}
- </Form>
- );
-};