feat: contact sales submission (#1473)

# Description

Epic: #1232 
US: #1446

Send email address and message content to the backend. Display a loader
in loading state and a toast message on error.

frontend/app/contact/components/ContactForm.tsx

@@ -1,26 +1,36 @@
-import React, { useState } from "react";
-import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
+import React from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { LuChevronRight } from "react-icons/lu";
 
 import Button from "@/lib/components/ui/Button";
+import Spinner from "@/lib/components/ui/Spinner";
+
+import { usePostContactSales } from "../hooks/usePostContactSales";
+
+const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 
 export const ContactForm = (): JSX.Element => {
-  const [submitted, setSubmitted] = useState<boolean>(false);
   const { t } = useTranslation("contact", { keyPrefix: "form" });
 
   const { register, handleSubmit, formState } = useForm({
     defaultValues: { email: "", message: "" },
   });
 
-  const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+  const postEmail = usePostContactSales();
 
-  const onSubmit: SubmitHandler<FieldValues> = (data) => {
-    setSubmitted(true);
-    console.log("submitting", data.email, data.message);
+  const onSubmit: SubmitHandler<{ email: string; message: string }> = (
+    data,
+    event
+  ) => {
+    event?.preventDefault();
+    postEmail.mutate({
+      customer_email: data.email,
+      content: data.message,
+    });
   };
 
-  if (submitted) {
+  if (postEmail.isSuccess) {
     return (
       <div className="flex flex-col items-center justify-center gap-5">
         <h2 className="text-2xl font-bold">{t("thank_you")}</h2>
@@ -29,10 +39,14 @@ export const ContactForm = (): JSX.Element => {
     );
   }
 
+  if (postEmail.isLoading) {
+    return <Spinner />;
+  }
+
   return (
     <form
       className="flex flex-col gap-5 justify-stretch w-full"
-      onSubmit={() => void handleSubmit(onSubmit)()}
+      onSubmit={(event) => void handleSubmit(onSubmit)(event)}
     >
       <fieldset className="grid grid-cols-1 sm:grid-cols-3 gap-2 w-full gap-y-5">
         <label className="font-bold" htmlFor="email">

frontend/app/contact/hooks/usePostContactSales.ts

@@ -0,0 +1,33 @@
+import { useMutation, UseMutationResult } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { useAxios } from "@/lib/hooks";
+import { useToast } from "@/lib/hooks/useToast";
+
+interface ContactSalesDto {
+  customer_email: string;
+  content: string;
+}
+
+export const usePostContactSales = (): UseMutationResult<
+  void,
+  unknown,
+  ContactSalesDto
+> => {
+  const { axiosInstance } = useAxios();
+  const toast = useToast();
+  const { t } = useTranslation("contact", { keyPrefix: "form" });
+
+  return useMutation({
+    mutationKey: ["contactSales"],
+    mutationFn: async (data) => {
+      await axiosInstance.post("/contact", data);
+    },
+    onError: () => {
+      toast.publish({
+        text: t("sending_mail_error"),
+        variant: "danger",
+      });
+    },
+  });
+};

frontend/public/locales/en/contact.json

@@ -7,6 +7,7 @@
     "submit": "Contact",
     "placeholder_question": "How can we help you?",
     "thank_you": "Thank you!",
-    "thank_you_text": "We will get back to you as soon as possible."
+    "thank_you_text": "We will get back to you as soon as possible.",
+    "sending_mail_error": "There was an error sending your message. Please try again later."
   }
 }

frontend/public/locales/es/contact.json

@@ -7,6 +7,7 @@
     "submit": "Contactar",
     "placeholder_question": "¿Cómo podemos ayudarte?",
     "thank_you": "¡Gracias!",
-    "thank_you_text": "Nos pondremos en contacto contigo lo antes posible."
+    "thank_you_text": "Nos pondremos en contacto contigo lo antes posible.",
+    "sending_mail_error": "Se produjo un error al enviar tu mensaje. Por favor, inténtalo de nuevo más tarde."
   }
 }

frontend/public/locales/fr/contact.json

@@ -7,6 +7,7 @@
     "submit": "Contacter",
     "placeholder_question": "Comment pouvons-nous vous aider ?",
     "thank_you": "Merci !",
-    "thank_you_text": "Nous vous répondrons dès que possible."
+    "thank_you_text": "Nous vous répondrons dès que possible.",
+    "sending_mail_error": "Une erreur s'est produite lors de l'envoi de votre message. Veuillez réessayer plus tard."
   }
 }

frontend/public/locales/pt-br/contact.json

@@ -7,6 +7,7 @@
     "submit": "Contato",
     "placeholder_question": "Como podemos ajudar?",
     "thank_you": "Obrigado!",
-    "thank_you_text": "Entraremos em contato o mais rápido possível."
+    "thank_you_text": "Entraremos em contato o mais rápido possível.",
+    "sending_mail_error": "Ocorreu um erro ao enviar sua mensagem. Por favor, tente novamente mais tarde."
   }
 }

frontend/public/locales/ru/contact.json

@@ -7,6 +7,7 @@
     "submit": "Контакт",
     "placeholder_question": "Как мы можем вам помочь?",
     "thank_you": "Спасибо!",
-    "thank_you_text": "Мы свяжемся с вами как можно скорее."
+    "thank_you_text": "Мы свяжемся с вами как можно скорее.",
+    "sending_mail_error": "При отправке вашего сообщения произошла ошибка. Пожалуйста, попробуйте еще раз позже."
   }
 }

frontend/public/locales/zh-cn/contact.json

@@ -7,6 +7,7 @@
     "submit": "联系我们",
     "placeholder_question": "我们如何帮助您？",
     "thank_you": "谢谢！",
-    "thank_you_text": "我们会尽快回复您。"
+    "thank_you_text": "我们会尽快回复您。",
+    "sending_mail_error": "发送消息时出错。请稍后再试。"
   }
 }