From a0ae955e2e8405443f52f23978d4c08557271642 Mon Sep 17 00:00:00 2001 From: Chukwumdiebube Date: Sun, 15 Jan 2023 02:55:41 +0100 Subject: [PATCH] contact page task almost done --- .env | 4 +- src/assets/css/style.css | 86 +++++++++++++++++++++++++++++++++++ src/component/Contact/Main.js | 57 ++++++++++++++++++----- 3 files changed, 134 insertions(+), 13 deletions(-) diff --git a/.env b/.env index fae5d1c..117a1ad 100644 --- a/.env +++ b/.env @@ -8,7 +8,7 @@ REACT_APP_IOS_URL="https://play.google.com/store/apps/details?id=com.mermsemr.my REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246" REACT_APP_TWITTER="https://twitter.com/fluxtra" -# Changed href to this url -REACT_APP_APPSITE=" http://www.dev.floatev.chiefsoft.us" +REACT_APP_APPSITE=" https://myfitapp.mermsemr.com" REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit" +REACT_APP_FORM_TIMEOUT = 10000 \ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 9c06d9e..9d3062e 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3525,7 +3525,44 @@ header.fix_style.white_header { resize: none; } +.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{ + display: flex !important; + align-items: center; + justify-content: center; +} + +.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{ + margin: 0 !important; +} + +.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{ + width: 24px; + height: 24px; +} + +#contact_body{ + min-height: 48rem; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + gap: 10px; +} + +.contact_body{ + font-size: 20px; + font-weight: 800; + justify-content: center; + text-align: center; +} + /* For the err msg */ +#errText{ + text-align: center; + color: tomato; + font-weight: 600; +} + .contact_page_section .contact_inner .contact_form form .form-group span{ font-size: 12px; color: tomato; @@ -4609,6 +4646,55 @@ header.fix_style.white_header { padding: 20px 0 0 0; } +/* Loader */ + +.loader{ + border-radius: 100%; + position: relative; +} + +.loader-sm{ + width: 24px; + height: 24px; +} + +/* LOADER 1 */ + +#loader-1:before, #loader-1:after{ + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 100%; + border: 3.5px solid transparent; + border-top-color: #3498db; +} + +#loader-1:before{ + z-index: 100; + animation: spin 1.5s infinite; +} + +#loader-1:after{ + border: 3.5px solid #ccc; +} + +@keyframes spin{ + 0%{ + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100%{ + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} + @media screen and (max-width: 992px) { .navbar-expand-lg .navbar-nav .has_dropdown .drp_btn { position: absolute !important; diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index e93dd6c..fd1d3ef 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -1,7 +1,7 @@ /** @format */ import React, { useEffect, useState } from "react"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import Bredcrumb from "../Bredcrumb/Main"; import BGImg from "../../assets/images/bread_crumb_bg.png"; import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"; @@ -50,6 +50,10 @@ const FormInput = (props) => { }; const Main = ({ brdcum }) => { + let response = document.getElementById("contact_loader"); + let contact_body = document.getElementById("contact_body"); + let errText = document.getElementById("errText"); + let navigate = useNavigate(); // Form Validation const [values, setValues] = useState({ name: "", @@ -60,6 +64,7 @@ const Main = ({ brdcum }) => { checkBox: false, }); //initial state values const [countries, setCountries] = useState([]); // initial state for country dropdown + const [myData, setMyData] = useState(null); // Gave a generic name for multiple calls const API_CALL = new SiteService(); // instantiating the class @@ -81,12 +86,33 @@ const Main = ({ brdcum }) => { const handleSubmit = async (e) => { e.preventDefault(); - let formReg; + response.innerHTML = `
`; - contactForm(JSON.stringify(values)).then((contact) => { - formReg = contact; - console.log("FormReg:", formReg); - }); + contactForm(values) + .then((contact) => { + setMyData(contact); + + // Checking for errors + if (contact?.data?.status < 1 || contact?.data?.message_id == "") + return (errText.textContent = + "unable to send your message, please try able"); + else { + response.innerHTML = `

SEND MESSAGE

`; + + contact_body.innerHTML = `
+
+

We have received your message and will follow up promptly.

+
`; + setTimeout(() => { + navigate("/"); + }, 10000); + } + }) + .catch((error) => { + console.log(error); + }); }; //CALLS THE API AFTER COMPONENT LOADS @@ -94,6 +120,10 @@ const Main = ({ brdcum }) => { allCountry().then((data) => setCountries(Object.values(data.data))); }, []); + useEffect(() => { + myData; + }, [myData]); + return ( <> {brdcum.b1 && ( @@ -150,7 +180,9 @@ const Main = ({ brdcum }) => { id="contact">
-
+

Leave a message @@ -241,12 +273,15 @@ const Main = ({ brdcum }) => {
+ {/* Error Tag */} +

{/* Contact Info */} @@ -259,7 +294,7 @@ const Main = ({ brdcum }) => {

- Have any question? + Have any question?

If you have any question about our product, service, payment