page update

src/components/contact-form/contact-form.component.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import axios from "axios";
+import { useTranslation } from "react-i18next";
 import "./contact-form.style.scss";
 import Dog from "../../assets/images/main/contact-form/mask.svg";
 import BluePlanet from "../../assets/images/main/contact-form/Planet Blue.svg";
@@ -8,21 +9,43 @@ import YellowPlanet from "../../assets/images/main/contact-form/Planet Yellow.sv
 import FormInput from "../form-input/form-input.component";
 import CustomButton from "../custom-button/custom-button.component";
 
-const postForm = (e, data) => {
-  e.preventDefault();
-  console.log("post form", data);
-  axios
-    .post("http://127.0.0.1:3005/contact", data)
-    .then((res) => console.log(res));
+const postForm = async (data) => {
+  return axios
+    .post(
+      "https://api.midcreative.eu/api/email/",
+      {
+        to: "sergei.kozinecs@gmail.com",
+        from: "info@midcreative.eu",
+        subject: "Midcreative Submit Form",
+        html: `<b>Name: </b>${data.name} <br><b>Email: </b>${data.email} <b><br>Phone: </b> ${data.phone}<br>`,
+      },
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    )
+    .then(() => {
+      return true;
+    })
+    .catch((err) => err);
 };
 
 const ContactForm = () => {
+  const { t } = useTranslation();
   const [formData, setFormData] = useState({
     name: "",
     email: "",
     phone: "",
   });
 
+  const nameInputRef = useRef(null);
+  const emailInputRef = useRef(null);
+  const phoneInputRef = useRef(null);
+
+  const [success, setSuccess] = useState();
+  const [error, setError] = useState();
+
   const setName = (name) => {
     setFormData({ ...formData, name: name });
   };
@@ -35,14 +58,32 @@ const ContactForm = () => {
     setFormData({ ...formData, phone: phone });
   };
 
-  const handleSubmit = (e) => {
+  const cleanFields = () => {
+    nameInputRef.current.clean();
+    emailInputRef.current.clean();
+    phoneInputRef.current.clean();
+  };
+
+  const handlePost = (e) => {
     e.preventDefault();
-    console.log(e);
+
+    postForm(formData).then((res) => {
+      if (res === true) {
+        cleanFields();
+        setError(false);
+        setSuccess(true);
+        setTimeout(() => setSuccess(false), 6000);
+      } else {
+        cleanFields();
+        setError(true);
+        setSuccess(false);
+      }
+    });
   };
 
   return (
     <div className="container contact-form">
-      <h2>Let’s bring your project to the Moon</h2>
+      <h2>{t("contacts.title")}</h2>
 
       <div className="image">
         <img src={Dog} alt="cute dog in space" />
@@ -50,35 +91,40 @@ const ContactForm = () => {
         <img src={YellowPlanet} alt="yellow planet" className="planet yellow" />
       </div>
 
-      <form
-        // action="http://127.0.0.1:3005/contact"
-        className="container"
-        // method="POST"
-        // onSubmit={(e) => postForm(e, formData)}
-      >
+      <form className="container" onSubmit={(e) => handlePost(e)}>
+        {success ? <p className="success">{t("contacts.success")}</p> : null}
+        {error ? (
+          <p className="error">
+            {t("contacts.error")}{" "}
+            <a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
+          </p>
+        ) : null}
         <FormInput
           name="name"
           type="text"
-          label="Name"
+          label={t("contacts.name")}
           onChange={setName}
+          ref={nameInputRef}
           required
         />
         <FormInput
           name="email"
           type="email"
-          label="E-mail"
+          label={t("contacts.email")}
           onChange={setEmail}
+          ref={emailInputRef}
           required
         />
         <FormInput
           name="phone"
           type="tel"
-          label="Phone"
+          label={t("contacts.phone")}
           onChange={setPhone}
+          ref={phoneInputRef}
           required
         />
 
-        <CustomButton text="Send" />
+        <CustomButton text={t("contacts.send")} />
       </form>
     </div>
   );

src/components/contact-form/contact-form.style.scss

@@ -14,6 +14,20 @@ section.content {
     grid-row: 1/2;
   }
 
+  .success {
+    margin-bottom: 16px;
+    color: rgba(116, 199, 103, 1);
+  }
+
+  .error {
+    margin-bottom: 16px;
+    color: rgba(246, 81, 81, 1);
+
+    a {
+      color: rgba(246, 81, 81, 1);
+    }
+  }
+
   form {
     grid-column: 1/5;
     grid-row: 2/3;
@@ -44,7 +58,12 @@ section.content {
 
     img {
       &:first-child {
-        background: linear-gradient(0deg, rgba(27, 27, 27, 0.2), rgba(27, 27, 27, 0.2)), rgba(255, 255, 255, 0.01);
+        background: linear-gradient(
+            0deg,
+            rgba(27, 27, 27, 0.2),
+            rgba(27, 27, 27, 0.2)
+          ),
+          rgba(255, 255, 255, 0.01);
         box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
         backdrop-filter: blur(8px);
         border-radius: 33px;
@@ -66,7 +85,8 @@ section.content {
   }
 
   @include for-tablets {
-    h2, form {
+    h2,
+    form {
       grid-column: 1/7;
     }
 
@@ -74,7 +94,6 @@ section.content {
       grid-column: 8/13;
     }
   }
-  
 
   @include for-mobile {
     h2,
@@ -94,6 +113,8 @@ section.content {
     .image {
       grid-row: 2/3;
       width: 100%;
+      margin-bottom: 16px;
+
       img {
         margin: 0 auto;
       }

src/components/form-input/form-input.component.jsx

@@ -1,33 +1,42 @@
-import React, { useState } from "react";
+import React, { useState, forwardRef, useImperativeHandle } from "react";
 import "./form-input.style.scss";
 
-const FormInput = ({ handleChange, label, onChange, ...otherProps }) => {
-  const [input, setInput] = useState("");
-  const [toggleLabel, changeToggleLabel] = useState(false);
+const FormInput = forwardRef(
+  ({ handleChange, label, onChange, ...otherProps }, ref) => {
+    const [input, setInput] = useState("");
+    const [toggleLabel, changeToggleLabel] = useState(false);
 
-  return (
-    <div className="group">
-      <label
-        className={`${toggleLabel ? "shrink" : ""} ${
-          input ? "shrink" : ""
-        } form-input-label`}
-      >
-        {label}
-      </label>
-      <input
-        value={input}
-        onChange={(e) => {
-          setInput(e.target.value);
-          onChange(e.target.value);
-        }}
-        onFocus={() => changeToggleLabel(true)}
-        onBlur={() =>
-          input ? changeToggleLabel(true) : changeToggleLabel(false)
-        }
-        {...otherProps}
-      />
-    </div>
-  );
-};
+    useImperativeHandle(ref, () => ({
+      clean() {
+        setInput("");
+        changeToggleLabel(false);
+      },
+    }));
+
+    return (
+      <div className="group">
+        <label
+          className={`${toggleLabel ? "shrink" : ""} ${
+            input ? "shrink" : ""
+          } form-input-label`}
+        >
+          {label}
+        </label>
+        <input
+          value={input}
+          onChange={(e) => {
+            setInput(e.target.value);
+            onChange(e.target.value);
+          }}
+          onFocus={() => changeToggleLabel(true)}
+          onBlur={() =>
+            input ? changeToggleLabel(true) : changeToggleLabel(false)
+          }
+          {...otherProps}
+        />
+      </div>
+    );
+  }
+);
 
 export default FormInput;

src/components/header/header.component.jsx

@@ -12,7 +12,7 @@ import Email from "../../assets/images/main/footer/email.png";
 import "./header.style.scss";
 
 const MidHeader = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   const toggleMenu = () => {
     if (window !== "undefined") {

src/components/intro/intro.component.jsx

@@ -6,7 +6,7 @@ import "./intro.styles.scss";
 import Spaceship from "../../assets/images/main/intro/spaceship.svg";
 
 const Intro = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <section className="container intro">

src/components/language-switch/language-switch.component.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import i18n from "../../i18n";
 
 import "./language-switch.style.scss";

src/components/seo.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSiteMetadata } from "../hooks/use-site-metadata";
 
-export const SEO = ({ title, description, pathname, children }) => {
+export const Seo = ({ title, description, pathname, children }) => {
   const {
     title: defaultTitle,
     description: defaultDescription,

src/main/main.component.jsx

@@ -13,7 +13,7 @@ import MidFooter from "../components/footer/footer.component";
 import Projects from "../components/projects/projects.component";
 
 const MidMainPage = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <div className="main-page">

src/pages/index.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SEO } from "../components/seo";
+import { Seo } from "../components/seo";
 
 import "../assets/stylesheets/style.scss";
 
@@ -11,4 +11,4 @@ const IndexPage = () => {
 
 export default IndexPage;
 
-export const Head = () => <SEO />;
+export const Head = () => <Seo />;

src/translations/en.json

@@ -82,5 +82,14 @@
       "info": ["Website", "CMS"],
       "text": "Fleet Management Software providers - website and content management system development"
     }
-  ]
+  ],
+  "contacts": {
+    "title": "Let’s bring your project to the Moon",
+    "name": "name",
+    "email": "E-mail",
+    "phone": "phone",
+    "send": "Send",
+    "success": "Thank you for sharing your contacts! We will get in touch!",
+    "error": "Looks like something went wrong, please try to reach us directly "
+  }
 }

src/translations/lv.json

@@ -82,5 +82,14 @@
       "info": ["Website", "CMS"],
       "text": "Autoparka pārvaldības sistēmas mājas lapa un satura vadības sistēmas izstrāde"
     }
-  ]
+  ],
+  "contacts": {
+    "title": "Let’s bring your project to the Moon",
+    "name": "Vārds",
+    "email": "Ēpasts",
+    "phone": "Telefons",
+    "send": "Nosūtīt",
+    "success": "Paldies ",
+    "error": "Looks like something went wrong, please try to reach us directly info@midcreative.eu"
+  }
 }