From 56d961acbb9055bbdaa823b616f11f4047aeb324 Mon Sep 17 00:00:00 2001 From: "VICTOR\\anumu" Date: Thu, 12 Jan 2023 10:56:39 +0100 Subject: [PATCH 01/19] Added country dropdown on contact page --- src/component/Contact/Main.js | 17 ++++++++++++++++- src/vendors/service/siteService.js | 16 +++++++++------- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index 1c4855d..7b65228 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -1,11 +1,25 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { Link } 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"; import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; +import SiteService from "../../vendors/service/siteService"; + const Main = ({ brdcum }) => { + let [countries, setCountries] = useState([]) // initial state for country dropdown + let countryClass = new SiteService() // instantiating the class + + const allCountry = () => { + return countryClass.countryData(); + } + + //CALLS THE API AFTER COMPONENT LOADS + useEffect(()=>{ + allCountry().then((data)=> setCountries(Object.values(data.data))) + },[]) + return ( <> {brdcum.b1 && ( @@ -86,6 +100,7 @@ const Main = ({ brdcum }) => {
diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index 7b56d62..dbea9f4 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -9,7 +9,9 @@ class SiteService { return this.getAuxEnd("blogdata", null); } - countryData() {} + countryData() { + return this.getAuxEnd("/country", null); + } faqData() {} @@ -20,11 +22,11 @@ class SiteService { //---------------------------------------- ----- getAuxEnd(uri, reqData) { const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri; - Axios.get(endPoint) + return Axios.get(endPoint) .then((response) => { - console.log(response); - res = response; - console.log("~~~~~~~ Toks2 GET ~~~~~~~~"); + // console.log(response); + // res = response; + // console.log("~~~~~~~ Toks2 GET ~~~~~~~~"); return response; }) .catch((error) => { @@ -41,12 +43,12 @@ class SiteService { }); } - getAuxEnd(uri, reqData) { + postAuxEnd(uri, reqData) { const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri; Axios.post(endPoint) .then((response) => { console.log(response); - res = response; + // res = response; console.log("~~~~~~~ Toks2 POST ~~~~~~~~"); return response; }) From d946417490ea7491e0148ad54a964883ca3f854e Mon Sep 17 00:00:00 2001 From: "VICTOR\\anumu" Date: Thu, 12 Jan 2023 20:53:38 +0100 Subject: [PATCH 02/19] populated FAQs with data from api --- src/component/Pages/Faq/Main.js | 68 ++++++++++++++++++++++++------ src/vendors/service/siteService.js | 4 +- 2 files changed, 58 insertions(+), 14 deletions(-) diff --git a/src/component/Pages/Faq/Main.js b/src/component/Pages/Faq/Main.js index a237cfe..1ee4dea 100644 --- a/src/component/Pages/Faq/Main.js +++ b/src/component/Pages/Faq/Main.js @@ -5,9 +5,23 @@ import BGImg from "../../../assets/images/bread_crumb_bg.png" import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png" import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png" +import SiteService from '../../../vendors/service/siteService' + const Main = ({brdcum}) => { const[activeFaq, setActiveFaq] = useState({a : true}) + + const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call + + let faqServices = new SiteService(); // instantiating the class + + const allFaqData = () => { + return faqServices.faqData(); + }; + + useEffect(() => { + allFaqData().then((data) => setFaqs(data.data)); + }, []); return ( <> {brdcum.b1 && @@ -54,7 +68,8 @@ const Main = ({brdcum}) => {
-
+ + {/*

-
-
+
*/} + + {/*

-
+
*/} -
+ {/*

-
+
*/} -
+ {/*

-
+
*/} -
+ {/*

-
+ */} -
+ {/*

-
+ */} -
+ {/*

+
*/} + + {/* displays loading ... while the page fetches the FAQs */} + {faqs.length < 1 &&

Loading...

} + + {faqs.length > 0 && faqs.map((faq, index) => { + let id = `heading${index}`; //headingSeven + let target = `collapse${index}`; //#collapseSeven + + return( +
+
+

+ +

+
+ +
+
+

{faq.text}

+
+
+ ) + })} diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index dbea9f4..1f359c1 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -13,7 +13,9 @@ class SiteService { return this.getAuxEnd("/country", null); } - faqData() {} + faqData() { + return this.getAuxEnd("/faq", null); + } //---------------------------------------- ----- //---------------------------------------- ----- From 89fc6adfdd8b2b20c1fdec056ba429cd170c73dd Mon Sep 17 00:00:00 2001 From: ChineseChikki Date: Fri, 13 Jan 2023 01:39:03 +0100 Subject: [PATCH 03/19] updated features details and easy steps text --- src/component/HomeMain/Features/Main.js | 3 +-- src/component/HomeMain/Work/Main.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/component/HomeMain/Features/Main.js b/src/component/HomeMain/Features/Main.js index 81d8b66..ca9d0b9 100644 --- a/src/component/HomeMain/Features/Main.js +++ b/src/component/HomeMain/Features/Main.js @@ -68,8 +68,7 @@ const Main = ({video}) => {

Features that makes app different!

-

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe - standard dummy.

+

Fitness Integration with your health plan in your pocket bolsters
healthier life by tracking and experiencing life-changing results.

diff --git a/src/component/HomeMain/Work/Main.js b/src/component/HomeMain/Work/Main.js index 14051b9..732135d 100644 --- a/src/component/HomeMain/Work/Main.js +++ b/src/component/HomeMain/Work/Main.js @@ -20,8 +20,7 @@ const Main = ({dark}) => {

How it works - 3 easy steps

-

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe - standard dummy.

+

myFit has powerful connectivity, fitness, health, and safety features,
Also makes provision Fitness tracking,Workout tracking,Heart rate monitoring.

    From ce1879d0a21be5887967334584de9ea0576b08de Mon Sep 17 00:00:00 2001 From: "VICTOR\\anumu" Date: Fri, 13 Jan 2023 15:03:38 +0100 Subject: [PATCH 04/19] Rendered the pricing list from the api call to th pricing_page --- src/component/HomeMain/Pricing/Main.js | 532 +++++++++---------------- src/vendors/service/siteService.js | 4 + 2 files changed, 202 insertions(+), 334 deletions(-) diff --git a/src/component/HomeMain/Pricing/Main.js b/src/component/HomeMain/Pricing/Main.js index fb75738..171b3bf 100644 --- a/src/component/HomeMain/Pricing/Main.js +++ b/src/component/HomeMain/Pricing/Main.js @@ -1,13 +1,30 @@ import { Link } from 'react-router-dom' -import React , { useState} from 'react' +import React , { useState, useEffect} from 'react' +import AOS from "aos"; import img1 from '../../../assets/images/standard.png' import img2 from '../../../assets/images/unlimited.png' import img3 from '../../../assets/images/premium.png' +import SiteService from '../../../vendors/service/siteService' + const Main = ({gredient , video}) => { const[tog, setTog] = useState() + const [prices, setPrices] = useState([]); // initial state for FAQs before API call + + let priceServices = new SiteService(); // instantiating the class + + const getAllPriceData = () => { + return priceServices.priceData(); + }; + + useEffect(() => { + getAllPriceData().then((data) => setPrices(data.data)); + AOS.init(); + AOS.refresh(); + }, []); + return ( <> {gredient ? @@ -29,37 +46,52 @@ const Main = ({gredient , video}) => {
    -
    -
    -
    - image -
    -
    -

    Standard

    - For the basics -
    - $15 -
      -
    • -

      Up to 5 Website

      -
      • -
    • -

      50 GB disk space

      -
      • -
    • -

      10 Customize sub pages

      -
      • -
    • -

      2 Domains access

      -
      • -
    • -

      Support on request

      -
      • -
    - BUY NOW -
    -
    -
    + + {prices.length > 0 && + prices.map((price, index) => { + if (index % 2 == 0) { + return ( +
    +
    +
    + { video ? image : image } +
    +
    +

    {price.title}

    + {price.text} +
    + {price.price} +
      + {price.features.map((feature, index)=>

      {feature}

      )} +
    + Start Now +
    +
    + ); + } else { + return ( +
    +
    +
    + { video ? image : image } +
    +
    +

    {price.title}

    + {price.text} +
    + {price.price} +
      + {price.features.map((feature, index)=>

      {feature}

      )} +
    + Start Now +
    +
    + ); + } + }) + } + + {/*
    image @@ -86,136 +118,60 @@ const Main = ({gredient , video}) => {

    24/7 Customer support

- BUY NOW + Start Now
-
-
-
-
- image -
-
-

Premium

- For small team -
- $55 -
    -
  • -

    Up to 10 Website

    -
    • -
  • -

    100 GB disk space

    -
    • -
  • -

    15 Customize sub pages

    -
    • -
  • -

    4 Domains access

    -
    • -
  • -

    24/7 Customer support

    -
    • -
- BUY NOW -
-
+
*/} +
-
-
-
- image -
-
-

Standard

- For the basics -
- $150 -
    -
  • -

    Up to 10 Website

    -
    • -
  • -

    100 GB disk space

    -
    • -
  • -

    25 Customize sub pages

    -
    • -
  • -

    4 Domains access

    -
    • -
  • -

    Support on request

    -
    • -
- BUY NOW -
-
-
-
-
- image -
-
-

Unlimited

- For the professionals -
- $999 -
    -
  • -

    Unlimited Website

    -
    • -
  • -

    400 GB disk space

    -
    • -
  • -

    40 Customize sub pages

    -
    • -
  • -

    20 Domains access

    -
    • -
  • -

    24/7 Customer support

    -
    • -
- BUY NOW -
-
+ {prices.length > 0 && + prices.map((price, index) => { + if (index % 2 == 0) { + return ( +
+
+
+ { video ? image : image } +
+
+

{price.title}

+ {price.text} +
+ {price.price} +
    + {price.features.map((feature, index)=>

    {feature}

    )} +
+ Start Now +
+
+ ); + } else { + return ( +
+
+
+ { video ? image : image } +
+
+

{price.title}

+ {price.text} +
+ {price.price} +
    + {price.features.map((feature, index)=>

    {feature}

    )} +
+ Start Now +
+
+ ); + } + }) + } -
-
-
- image -
-
-

Premium

- For small team -
- $550 -
    -
  • -

    Up to 20 Website

    -
    • -
  • -

    200 GB disk space

    -
    • -
  • -

    25 Customize sub pages

    -
    • -
  • -

    8 Domains access

    -
    • -
  • -

    24/7 Customer support

    -
    • -
- BUY NOW -
-
@@ -241,193 +197,101 @@ const Main = ({gredient , video}) => {
-
-
-
- { video ? image : image } -
-
-

Standard

- For the basics -
- $15 -
    -
  • -

    Up to 5 Website

    -
    • -
  • -

    50 GB disk space

    -
    • -
  • -

    10 Customize sub pages

    -
    • -
  • -

    2 Domains access

    -
    • -
  • -

    Support on request

    -
    • -
- BUY NOW -
-
-
-
-
- { video ? image : image } -
-
-

Unlimited

- For the professionals -
- $99 -
    -
  • -

    Unlimited Website

    -
    • -
  • -

    200 GB disk space

    -
    • -
  • -

    20 Customize sub pages

    -
    • -
  • -

    10 Domains access

    -
    • -
  • -

    24/7 Customer support

    -
    • -
- BUY NOW -
-
-
-
-
- {video ? image : image } -
-
-

Premium

- For small team -
- $55 -
    -
  • -

    Up to 10 Website

    -
    • -
  • -

    100 GB disk space

    -
    • -
  • -

    15 Customize sub pages

    -
    • -
  • -

    4 Domains access

    -
    • -
  • -

    24/7 Customer support

    -
    • -
- BUY NOW -
-
+ + {prices.length > 0 && + prices.map((price, index) => { + if (index % 2 == 0) { + return ( +
+
+
+ { video ? image : image } +
+
+

{price.title}

+ {price.text} +
+ {price.price} +
    + {price.features.map((feature, index)=>

    {feature}

    )} +
+ Start Now +
+
+ ); + } else { + return ( +
+
+
+ { video ? image : image } +
+
+

{price.title}

+ {price.text} +
+ {price.price} +
    + {price.features.map((feature, index)=>

    {feature}

    )} +
+ Start Now +
+
+ ); + } + }) + } +
-
-
-
- { video ? image : image } -
-
-

Standard

- For the basics -
- $150 -
    -
  • -

    Up to 10 Website

    -
    • -
  • -

    100 GB disk space

    -
    • -
  • -

    25 Customize sub pages

    -
    • -
  • -

    4 Domains access

    -
    • -
  • -

    Support on request

    -
    • -
- BUY NOW -
-
-
-
-
- { video ? image : } -
-
-

Unlimited

- For the professionals -
- $999 -
    -
  • -

    Unlimited Website

    -
    • -
  • -

    400 GB disk space

    -
    • -
  • -

    40 Customize sub pages

    -
    • -
  • -

    20 Domains access

    -
    • -
  • -

    24/7 Customer support

    -
    • -
- BUY NOW -
-
+ {prices.length > 0 && + prices.map((price, index) => { + if (index % 2 == 0) { + return ( +
+
+
+ { video ? image : image } +
+
+

{price.title}

+ {price.text} +
+ {price.price} +
    + {price.features.map((feature, index)=>

    {feature}

    )} +
+ Start Now +
+
+ ); + } else { + return ( +
+
+
+ { video ? image : image } +
+
+

{price.title}

+ {price.text} +
+ {price.price} +
    + {price.features.map((feature, index)=>

    {feature}

    )} +
+ Start Now +
+
+ ); + } + }) + } -
-
-
- {video ? image : image } -
-
-

Premium

- For small team -
- $550 -
    -
  • -

    Up to 20 Website

    -
    • -
  • -

    200 GB disk space

    -
    • -
  • -

    25 Customize sub pages

    -
    • -
  • -

    8 Domains access

    -
    • -
  • -

    24/7 Customer support

    -
    • -
- BUY NOW -
-
diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index 1f359c1..438f3f4 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -16,6 +16,10 @@ class SiteService { faqData() { return this.getAuxEnd("/faq", null); } + + priceData() { + return this.getAuxEnd("/pricing", null); + } //---------------------------------------- ----- //---------------------------------------- ----- From a5eb1f2edf8bf7463fed711681d2682f9b958c21 Mon Sep 17 00:00:00 2001 From: chief-bube Date: Fri, 13 Jan 2023 09:07:03 -0800 Subject: [PATCH 05/19] Worked on the form validation --- src/assets/css/style.css | 22 +++++ src/component/Contact/Main.js | 149 ++++++++++++++++++++++------- src/vendors/service/siteService.js | 8 +- 3 files changed, 142 insertions(+), 37 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 6025ce5..bab1b11 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,6 +3521,28 @@ header.fix_style.white_header { margin-bottom: 20px; } +/* For the err msg */ +.contact_page_section .contact_inner .contact_form form .form-group span{ + font-size: 12px; + color: tomato; + padding: 3px; + display: none; +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ + display: block; +} + +/* +input:invalid[focused="true"]{ + border: 1px solid red; +} + +input:invalid[focused="true"] ~ span{ + display: block; +} +*/ + .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index 7b65228..b9ec1d1 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -7,18 +7,71 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; import SiteService from "../../vendors/service/siteService"; -const Main = ({ brdcum }) => { - let [countries, setCountries] = useState([]) // initial state for country dropdown - let countryClass = new SiteService() // instantiating the class +// Form Inputs +const FormInput = (props) => { + let { + name, + type, + placeholder, + required, + maxLenght, + errorMessage, + value, + onChange, + } = props; + return ( +
+ + {errorMessage} +
+ ); +}; + +const Main = ({ brdcum }) => { + // Form Validation + const [values, setValues] = useState({ + name: "", + email: "", + phone: "", + msg: "", + }); //initial state values + const [countries, setCountries] = useState([]); // initial state for country dropdown + + // Gave a generic name for multiple calls + const API_CALL = new SiteService(); // instantiating the class + const allCountry = () => { - return countryClass.countryData(); - } + return API_CALL.countryData(); + }; + + const contactForm = () => { + return API_CALL.contactData(); + }; + + // Submitting form + const handleSubmit = (e) => { + e.preventDefault(); + }; + + const onChange = (e) => { + setValues({ ...values, [e.target.name]: e.target.value }); + }; //CALLS THE API AFTER COMPONENT LOADS - useEffect(()=>{ - allCountry().then((data)=> setCountries(Object.values(data.data))) - },[]) + useEffect(() => { + allCountry().then((data) => setCountries(Object.values(data.data))); + console.log(values); + }, []); return ( <> @@ -77,44 +130,64 @@ const Main = ({ brdcum }) => {

- Leave a message + Leave a message

Fill up form below, our team will get back soon

-
-
- -
-
- -
+ + {/* Contact Form */} + + + +
-
- -
+ +
@@ -130,6 +203,8 @@ const Main = ({ brdcum }) => {
+ + {/* Contact Info */}
image @@ -153,7 +228,9 @@ const Main = ({ brdcum }) => {
Email Us - example@gmail.com + + {process.env.REACT_APP_SUPPORT_EMAIL} +
  • @@ -162,7 +239,9 @@ const Main = ({ brdcum }) => {
    • Call Us - +1 (888) 553-46-11 + + {process.env.REACT_APP_US_PHONE} +
  • @@ -171,7 +250,7 @@ const Main = ({ brdcum }) => {
    Visit Us -

    5687, Business Avenue, New York, USA 5687

    +

    {process.env.REACT_APP_US_ADDRESS}

    • diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index dbea9f4..7cf0e67 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -13,11 +13,15 @@ class SiteService { return this.getAuxEnd("/country", null); } + contactData() { + return this.postAuxEnd("/contact", null) + } + faqData() {} - + //---------------------------------------- ----- //---------------------------------------- ----- - // Unified call below + // Unified call below //---------------------------------------- ----- //---------------------------------------- ----- getAuxEnd(uri, reqData) { From ada920382432fdac23930ddaa6656f089fcec9b4 Mon Sep 17 00:00:00 2001 From: chief-bube Date: Fri, 13 Jan 2023 09:55:01 -0800 Subject: [PATCH 06/19] Form Validation for Contact Form --- src/assets/css/style.css | 22 ----- src/component/Contact/Main.js | 149 +++++++---------------------- src/vendors/service/siteService.js | 8 +- 3 files changed, 37 insertions(+), 142 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index bab1b11..6025ce5 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,28 +3521,6 @@ header.fix_style.white_header { margin-bottom: 20px; } -/* For the err msg */ -.contact_page_section .contact_inner .contact_form form .form-group span{ - font-size: 12px; - color: tomato; - padding: 3px; - display: none; -} - -.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ - display: block; -} - -/* -input:invalid[focused="true"]{ - border: 1px solid red; -} - -input:invalid[focused="true"] ~ span{ - display: block; -} -*/ - .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index b9ec1d1..7b65228 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -7,71 +7,18 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; import SiteService from "../../vendors/service/siteService"; -// Form Inputs -const FormInput = (props) => { - let { - name, - type, - placeholder, - required, - maxLenght, - errorMessage, - value, - onChange, - } = props; - - return ( -
    - - {errorMessage} -
    - ); -}; - const Main = ({ brdcum }) => { - // Form Validation - const [values, setValues] = useState({ - name: "", - email: "", - phone: "", - msg: "", - }); //initial state values - const [countries, setCountries] = useState([]); // initial state for country dropdown - - // Gave a generic name for multiple calls - const API_CALL = new SiteService(); // instantiating the class - + let [countries, setCountries] = useState([]) // initial state for country dropdown + let countryClass = new SiteService() // instantiating the class + const allCountry = () => { - return API_CALL.countryData(); - }; - - const contactForm = () => { - return API_CALL.contactData(); - }; - - // Submitting form - const handleSubmit = (e) => { - e.preventDefault(); - }; - - const onChange = (e) => { - setValues({ ...values, [e.target.name]: e.target.value }); - }; + return countryClass.countryData(); + } //CALLS THE API AFTER COMPONENT LOADS - useEffect(() => { - allCountry().then((data) => setCountries(Object.values(data.data))); - console.log(values); - }, []); + useEffect(()=>{ + allCountry().then((data)=> setCountries(Object.values(data.data))) + },[]) return ( <> @@ -130,64 +77,44 @@ const Main = ({ brdcum }) => {

    - Leave a message + Leave a message

    Fill up form below, our team will get back soon

    - - {/* Contact Form */} -
    - - - + +
    + +
    +
    + +
    - - +
    + +
    @@ -203,8 +130,6 @@ const Main = ({ brdcum }) => {
    - - {/* Contact Info */}
    image @@ -228,9 +153,7 @@ const Main = ({ brdcum }) => {
    Email Us - - {process.env.REACT_APP_SUPPORT_EMAIL} - + example@gmail.com
  • @@ -239,9 +162,7 @@ const Main = ({ brdcum }) => {
    • Call Us - - {process.env.REACT_APP_US_PHONE} - + +1 (888) 553-46-11
  • @@ -250,7 +171,7 @@ const Main = ({ brdcum }) => {
    Visit Us -

    {process.env.REACT_APP_US_ADDRESS}

    +

    5687, Business Avenue, New York, USA 5687

    • diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index 7cf0e67..dbea9f4 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -13,15 +13,11 @@ class SiteService { return this.getAuxEnd("/country", null); } - contactData() { - return this.postAuxEnd("/contact", null) - } - faqData() {} - + //---------------------------------------- ----- //---------------------------------------- ----- - // Unified call below + // Unified call below //---------------------------------------- ----- //---------------------------------------- ----- getAuxEnd(uri, reqData) { From 1834077952cfc47673b75e901004ae7396185b93 Mon Sep 17 00:00:00 2001 From: Chukwumdiebube Date: Fri, 13 Jan 2023 21:16:31 +0100 Subject: [PATCH 07/19] form validations part --- src/assets/css/style.css | 22 +++++ src/component/Contact/Main.js | 154 ++++++++++++++++++++++------- src/vendors/service/siteService.js | 7 ++ 3 files changed, 146 insertions(+), 37 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 6025ce5..bab1b11 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,6 +3521,28 @@ header.fix_style.white_header { margin-bottom: 20px; } +/* For the err msg */ +.contact_page_section .contact_inner .contact_form form .form-group span{ + font-size: 12px; + color: tomato; + padding: 3px; + display: none; +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ + display: block; +} + +/* +input:invalid[focused="true"]{ + border: 1px solid red; +} + +input:invalid[focused="true"] ~ span{ + display: block; +} +*/ + .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index 7b65228..1ea58d3 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -7,18 +7,72 @@ import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; import SiteService from "../../vendors/service/siteService"; -const Main = ({ brdcum }) => { - let [countries, setCountries] = useState([]) // initial state for country dropdown - let countryClass = new SiteService() // instantiating the class +// Form Inputs +const FormInput = (props) => { + let { + name, + type, + placeholder, + required, + maxLenght, + errorMessage, + value, + onChange, + } = props; + return ( +
    + + {errorMessage} +
    + ); +}; + +const Main = ({ brdcum }) => { + // Form Validation + const [values, setValues] = useState({ + name: "", + email: "", + phone: "", + msg: "", + country: '' + }); //initial state values + const [countries, setCountries] = useState([]); // initial state for country dropdown + + // Gave a generic name for multiple calls + const API_CALL = new SiteService(); // instantiating the class + const allCountry = () => { - return countryClass.countryData(); - } + return API_CALL.countryData(); + }; + + const contactForm = () => { + return API_CALL.contactData(); + }; + + // Submitting form + const handleSubmit = (e) => { + e.preventDefault(); + }; + + const onChange = (e) => { + setValues({ ...values, [e.target.name]: e.target.value }); + }; //CALLS THE API AFTER COMPONENT LOADS - useEffect(()=>{ - allCountry().then((data)=> setCountries(Object.values(data.data))) - },[]) + useEffect(() => { + allCountry().then((data) => setCountries(Object.values(data.data))); + console.log(values); + }, []); return ( <> @@ -77,44 +131,64 @@ const Main = ({ brdcum }) => {

    - Leave a message + Leave a message

    Fill up form below, our team will get back soon

    -
    -
    - -
    -
    - -
    + + {/* Contact Form */} + + + +
    -
    - -
    + +
    @@ -130,6 +204,8 @@ const Main = ({ brdcum }) => {
    + + {/* Contact Info */}
    image @@ -153,7 +229,9 @@ const Main = ({ brdcum }) => {
    Email Us - example@gmail.com + + {process.env.REACT_APP_SUPPORT_EMAIL} +
  • @@ -162,7 +240,9 @@ const Main = ({ brdcum }) => {
    • Call Us - +1 (888) 553-46-11 + + {process.env.REACT_APP_US_PHONE} +
  • @@ -171,7 +251,7 @@ const Main = ({ brdcum }) => {
    Visit Us -

    5687, Business Avenue, New York, USA 5687

    +

    {process.env.REACT_APP_US_ADDRESS}

    • @@ -186,4 +266,4 @@ const Main = ({ brdcum }) => { ); }; -export default Main; +export default Main; \ No newline at end of file diff --git a/src/vendors/service/siteService.js b/src/vendors/service/siteService.js index dbea9f4..5a17884 100644 --- a/src/vendors/service/siteService.js +++ b/src/vendors/service/siteService.js @@ -5,14 +5,21 @@ class SiteService { constructor() { console.log("Er are here anyway"); } + // Blog Data {Get} blogData() { return this.getAuxEnd("blogdata", null); } + // Country Data {GET} countryData() { return this.getAuxEnd("/country", null); } + // Contact Data{POST} + contactData() { + return this.postAuxEnd("/contact", null) + } + faqData() {} //---------------------------------------- ----- From f452bb90ffd125fce53f900f9f9c44ac0e08633d Mon Sep 17 00:00:00 2001 From: Chukwumdiebube Date: Sat, 14 Jan 2023 01:22:37 +0100 Subject: [PATCH 08/19] form validation complete --- .env | 3 +- src/assets/css/style.css | 24 +++++----- src/component/Contact/Main.js | 86 +++++++++++++++++++++++++++-------- 3 files changed, 82 insertions(+), 31 deletions(-) diff --git a/.env b/.env index 7cf7357..fae5d1c 100644 --- a/.env +++ b/.env @@ -8,6 +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" -REACT_APP_APPSITE="https://myfitapp.mermsemr.com" +# Changed href to this url +REACT_APP_APPSITE=" http://www.dev.floatev.chiefsoft.us" REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit" diff --git a/src/assets/css/style.css b/src/assets/css/style.css index bab1b11..9c06d9e 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3521,6 +3521,10 @@ header.fix_style.white_header { margin-bottom: 20px; } +.contact_page_section .contact_inner .contact_form form .form-group textarea { + resize: none; +} + /* For the err msg */ .contact_page_section .contact_inner .contact_form form .form-group span{ font-size: 12px; @@ -3529,20 +3533,18 @@ header.fix_style.white_header { display: none; } -.contact_page_section .contact_inner .contact_form form .form-group input:invalid ~ span{ +.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{ + border: 1px solid var(--dark-purple); +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{ + border: 1px solid tomato; +} + +.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{ display: block; } -/* -input:invalid[focused="true"]{ - border: 1px solid red; -} - -input:invalid[focused="true"] ~ span{ - display: block; -} -*/ - .contact_page_section .contact_inner .contact_form diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index 1ea58d3..eb4d922 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -1,9 +1,12 @@ +/** @format */ + import React, { useEffect, useState } from "react"; import { Link } 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"; import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; +import axios from "axios" import SiteService from "../../vendors/service/siteService"; @@ -18,8 +21,14 @@ const FormInput = (props) => { errorMessage, value, onChange, + pattern, } = props; - + + const [focused, setFocused] = useState(false); + const handleFocus = () => { + return setFocused(true); + }; + return (
    { required={required} value={value} onChange={onChange} + onBlur={handleFocus} + pattern={pattern} + focused={focused.toString()} /> {errorMessage}
    @@ -44,7 +56,8 @@ const Main = ({ brdcum }) => { email: "", phone: "", msg: "", - country: '' + country: "", + checkBox: false }); //initial state values const [countries, setCountries] = useState([]); // initial state for country dropdown @@ -58,14 +71,16 @@ const Main = ({ brdcum }) => { const contactForm = () => { return API_CALL.contactData(); }; + + const onChange = (e) => { + setValues((prev) => ({ ...prev, [e.target.name]: e.target.value })); + }; + console.log(values) // Submitting form const handleSubmit = (e) => { e.preventDefault(); - }; - const onChange = (e) => { - setValues({ ...values, [e.target.name]: e.target.value }); }; //CALLS THE API AFTER COMPONENT LOADS @@ -125,7 +140,9 @@ const Main = ({ brdcum }) => { /> )} -
    +
    @@ -147,13 +164,14 @@ const Main = ({ brdcum }) => { maxLenght={35} value={values.name} onChange={onChange} + pattern="^[A-Za-z]{1,35}$" /> { />
    - + {countries.length > 0 && countries.map((country, index) => ( - ))} @@ -189,16 +214,25 @@ const Main = ({ brdcum }) => { placeholder="Your message" value={values.msg} onChange={onChange} - > + maxLength={350} + />
    - +
    -
    @@ -208,7 +242,10 @@ const Main = ({ brdcum }) => { {/* Contact Info */}
    - image + image

    @@ -219,13 +256,18 @@ const Main = ({ brdcum }) => { or company, Visit our FAQs page.

    - + READ FAQ
    • - image + image
      Email Us @@ -236,7 +278,10 @@ const Main = ({ brdcum }) => {
    • - image + image
      Call Us @@ -247,7 +292,10 @@ const Main = ({ brdcum }) => {
    • - image + image
      Visit Us @@ -266,4 +314,4 @@ const Main = ({ brdcum }) => { ); }; -export default Main; \ No newline at end of file +export default Main; From 651ab89033ad7bc55ed450ab9fbcb0ac36cfe60d Mon Sep 17 00:00:00 2001 From: "VICTOR\\anumu" Date: Sat, 14 Jan 2023 07:46:46 +0100 Subject: [PATCH 09/19] Added the FAQs api to all FAQs page --- src/component/HomeMain/Faq/Main.js | 47 +++++++++++++++++++++++++++--- src/component/Pages/Faq/Main.js | 2 +- 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/component/HomeMain/Faq/Main.js b/src/component/HomeMain/Faq/Main.js index f2c8093..28e5921 100644 --- a/src/component/HomeMain/Faq/Main.js +++ b/src/component/HomeMain/Faq/Main.js @@ -1,8 +1,21 @@ -import React ,{ useState } from 'react' +import React ,{ useState, useEffect } from 'react' +import SiteService from '../../../vendors/service/siteService' const Main = ({gredient}) => { - const[activeFaq, setActiveFaq] = useState({a : true}) + const[activeFaq, setActiveFaq] = useState({btn0 : false}) + + const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call + + let faqServices = new SiteService(); // instantiating the class + + const allFaqData = () => { + return faqServices.faqData(); + }; + + useEffect(() => { + allFaqData().then((data) => setFaqs(data.data)); + }, []); return ( <> @@ -16,7 +29,7 @@ const Main = ({gredient}) => {
      -
      + {/*

      -
      +
      */} + + {/* displays loading ... while the page fetches the FAQs */} + {faqs.length < 1 &&

      Loading...

      } + + {faqs.length > 0 && faqs.map((faq, index) => { + let id = `heading${index}`; //headingSeven + let target = `collapse${index}`; //#collapseSeven + + return( +
      +
      +

      + +

      +
      + +
      +
      +

      {faq.text}

      +
      +
      +
      + ) + })}
    diff --git a/src/component/Pages/Faq/Main.js b/src/component/Pages/Faq/Main.js index 1ee4dea..a98e1c8 100644 --- a/src/component/Pages/Faq/Main.js +++ b/src/component/Pages/Faq/Main.js @@ -9,7 +9,7 @@ import SiteService from '../../../vendors/service/siteService' const Main = ({brdcum}) => { - const[activeFaq, setActiveFaq] = useState({a : true}) + const[activeFaq, setActiveFaq] = useState({btn0 : false}) const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call From 0f34385f133025bc8dc2835ac4efc2ef048501c1 Mon Sep 17 00:00:00 2001 From: Chukwumdiebube Date: Sat, 14 Jan 2023 15:57:02 +0100 Subject: [PATCH 10/19] Success in the api call --- src/component/Contact/Main.js | 30 ++++++++++++++++++++---------- src/vendors/service/siteService.js | 2 +- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index eb4d922..e93dd6c 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -6,7 +6,7 @@ import Bredcrumb from "../Bredcrumb/Main"; import BGImg from "../../assets/images/bread_crumb_bg.png"; import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"; import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; -import axios from "axios" +import axios from "axios"; import SiteService from "../../vendors/service/siteService"; @@ -57,7 +57,7 @@ const Main = ({ brdcum }) => { phone: "", msg: "", country: "", - checkBox: false + checkBox: false, }); //initial state values const [countries, setCountries] = useState([]); // initial state for country dropdown @@ -68,25 +68,30 @@ const Main = ({ brdcum }) => { return API_CALL.countryData(); }; - const contactForm = () => { - return API_CALL.contactData(); + const contactForm = async (value) => { + return await API_CALL.contactData(value); }; - + const onChange = (e) => { setValues((prev) => ({ ...prev, [e.target.name]: e.target.value })); }; - console.log(values) + console.log(values); // Submitting form - const handleSubmit = (e) => { + const handleSubmit = async (e) => { e.preventDefault(); + let formReg; + + contactForm(JSON.stringify(values)).then((contact) => { + formReg = contact; + console.log("FormReg:", formReg); + }); }; //CALLS THE API AFTER COMPONENT LOADS useEffect(() => { allCountry().then((data) => setCountries(Object.values(data.data))); - console.log(values); }, []); return ( @@ -185,7 +190,11 @@ const Main = ({ brdcum }) => { value={values.country} onChange={onChange} required> - + {countries.length > 0 && countries.map((country, index) => (
    -
    +
    ); From 2780de6fa2667e261b7905e22ff73fbd4b42f139 Mon Sep 17 00:00:00 2001 From: dev-chiefworks Date: Sun, 15 Jan 2023 19:39:42 -0500 Subject: [PATCH 18/19] Updated the env --- .env | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.env b/.env index 117a1ad..77a487b 100644 --- a/.env +++ b/.env @@ -9,6 +9,11 @@ REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246" REACT_APP_TWITTER="https://twitter.com/fluxtra" REACT_APP_APPSITE=" https://myfitapp.mermsemr.com" +#REACT_APP_APPSITE="http://localhost:7012" + REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit" -REACT_APP_FORM_TIMEOUT = 10000 \ No newline at end of file +REACT_APP_FORM_TIMEOUT = 10000 +REACT_APP_MAX_MESSAGE_LENGHT =300 +REACT_APP_BLOGSITE="https://blog.mermsemr.com/" + From 6ddb27ef6d72decc1227718299ef0dd3d4831577 Mon Sep 17 00:00:00 2001 From: chief-bube Date: Mon, 16 Jan 2023 02:34:46 -0800 Subject: [PATCH 19/19] Updates on contact page --- src/assets/css/style.css | 18 ++++++++++++++++++ src/component/Contact/Main.js | 11 +++++++---- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 5000a57..8e43a08 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -3525,6 +3525,24 @@ header.fix_style.white_header { resize: none; } +/* Textarea scrollbar */ +.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar { + width: 12px; + cursor: pointer; +} + +.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 10px; + background-color: var(--light-bg); +} + +.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); + background-color: var(--body-text-purple); +} + .contact_page_section .contact_inner .contact_form form .form-group .contact_btn{ display: flex !important; align-items: center; diff --git a/src/component/Contact/Main.js b/src/component/Contact/Main.js index d4d1a7e..5ab1a9f 100644 --- a/src/component/Contact/Main.js +++ b/src/component/Contact/Main.js @@ -6,7 +6,7 @@ import Bredcrumb from "../Bredcrumb/Main"; import BGImg from "../../assets/images/bread_crumb_bg.png"; import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"; import BGImg2 from "../../assets/images/bread_crumb_bg_two.png"; -import axios from "axios"; +import SuccessImg from "../../assets/images/experts_01.png" import SiteService from "../../vendors/service/siteService"; @@ -100,7 +100,7 @@ const Main = ({ brdcum }) => { response.innerHTML = `

    SEND MESSAGE

    `; contact_body.innerHTML = `
    -
    +

    We have received your message and will follow up promptly.

    `; setTimeout(() => { @@ -240,12 +240,13 @@ const Main = ({ brdcum }) => {
    @@ -254,8 +255,10 @@ const Main = ({ brdcum }) => { className="form-control" placeholder="Your message" value={values.msg} + errorMessage='words have exceeded 350 characters!' onChange={onChange} - maxLength={350} + maxLength={300} + pattern="^[A-Za-z0-9]{5, 300}$" />