From 86830b12654ab29f641773f236bfb736d538b752 Mon Sep 17 00:00:00 2001
From: RemOclock <remi.sulpice@oclock.io>
Date: Thu, 7 Sep 2023 14:43:25 +0200
Subject: [PATCH] Contact section

---
 .env.example               |  3 +++
 package-lock.json          | 10 ++++++++++
 package.json               |  3 ++-
 src/components/Contact.jsx | 39 +++++++++++++++++++++++++++++++-------
 4 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..fe6d914
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,3 @@
+VITE_APP_EMAILJS_SERVICE_ID=
+VITE_APP_EMAILJS_TEMPLATE_ID=
+VITE_APP_EMAILJS_PUBLIC_KEY=
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 94bcc61..443c225 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react-router-dom": "^6.8.1",
         "react-tilt": "^0.1.4",
         "react-vertical-timeline-component": "^3.6.0",
+        "sweetalert2": "^11.7.27",
         "three": "^0.149.0"
       },
       "devDependencies": {
@@ -2660,6 +2661,15 @@
         "react": ">=17.0"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.7.27",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.27.tgz",
+      "integrity": "sha512-QbRXGQn1sb7HEhzA/K2xtWIwQHh/qkSbb1w6jYcTql2xy17876lTREEt1D4X6Q0x2wHtfUjKJ+Cb8IVkRoq7DQ==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/package.json b/package.json
index b320043..62a5aec 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "react-router-dom": "^6.8.1",
     "react-tilt": "^0.1.4",
     "react-vertical-timeline-component": "^3.6.0",
+    "sweetalert2": "^11.7.27",
     "three": "^0.149.0"
   },
   "devDependencies": {
@@ -30,4 +31,4 @@
     "tailwindcss": "^3.2.6",
     "vite": "^4.1.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
index 3837aec..6d127da 100644
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { motion } from "framer-motion";
 import emailjs from "@emailjs/browser";
+import Swal from 'sweetalert2'
 
 import { styles } from "../styles";
 import { EarthCanvas } from "./canvas";
@@ -31,15 +32,27 @@ const Contact = () => {
     e.preventDefault();
     setLoading(true);
 
+    if (typeof name === 'undefined' || typeof email === 'undefined' || typeof message === 'undefined') {
+      Swal.fire({
+        position: 'top-end',
+        icon: 'error',
+        title: 'Please fill all the fields ! 😁',
+        showConfirmButton: false,
+        timer: 3000
+      });
+      setLoading(false);
+      return;
+    }
+
     emailjs
       .send(
         import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
         import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
         {
           from_name: form.name,
-          to_name: "JavaScript Mastery",
+          to_name: "Rémi Sulpice | RTekk",
           from_email: form.email,
-          to_email: "sujata@jsmastery.pro",
+          to_email: "rtekk.eth@proton.me",
           message: form.message,
         },
         import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
@@ -47,7 +60,13 @@ const Contact = () => {
       .then(
         () => {
           setLoading(false);
-          alert("Thank you. I will get back to you as soon as possible.");
+          Swal.fire({
+            position: 'top-end',
+            icon: 'success',
+            title: 'Thank you. I will get back to you as soon as possible ! 🫡',
+            showConfirmButton: false,
+            timer: 3000
+          });
 
           setForm({
             name: "",
@@ -59,7 +78,13 @@ const Contact = () => {
           setLoading(false);
           console.error(error);
 
-          alert("Ahh, something went wrong. Please try again.");
+          Swal.fire({
+            position: 'top-end',
+            icon: 'error',
+            title: 'Ahh, something went wrong. Please try again ! 🥲',
+            showConfirmButton: false,
+            timer: 3000
+          });
         }
       );
   };
@@ -87,7 +112,7 @@ const Contact = () => {
               name='name'
               value={form.name}
               onChange={handleChange}
-              placeholder="What's your good name?"
+              placeholder="Thomas Anderson"
               className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
             />
           </label>
@@ -98,7 +123,7 @@ const Contact = () => {
               name='email'
               value={form.email}
               onChange={handleChange}
-              placeholder="What's your web address?"
+              placeholder="neo@matrix.io"
               className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
             />
           </label>
@@ -109,7 +134,7 @@ const Contact = () => {
               name='message'
               value={form.message}
               onChange={handleChange}
-              placeholder='What you want to say?'
+              placeholder='Follow the white rabbit...'
               className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
             />
           </label>