Sbit 98

src/components/Form/Form.js

@@ -0,0 +1,75 @@
+import React , { useEffect } from "react"
+import MarkdownView from "react-showdown"
+import HubspotForm from "react-hubspot-form"
+import "./Form.scss"
+
+const Form = ({ location, data }) => {
+  const title = data?.title
+  const content = data?.content
+  const anchor = data?.anchor
+  const portalId = data?.portalId
+  const formId = data?.formId
+  const image = data?.image
+
+  useEffect(() => {
+    window.addEventListener("message", handler)
+    return () => {
+      window.removeEventListener("message", handler)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps 
+  }, []) 
+
+  function handler(event) {
+    if (event.origin === 'https://forms.hsforms.com'){
+      if (
+        event.data.type === "hsFormCallback" &&
+        event.data.eventName === "onFormReady"
+      ) {
+        const hsFormId = "hsForm_" + formId
+        const formData = document?.getElementById("hs-form-iframe-0")
+          ?.contentWindow?.document?.forms[hsFormId]
+        if (formData) {
+          setInputValue(formData, "servicio_origen", location.pathname)
+        }
+      }
+    }
+    console.log(event.origin, 'origin')
+
+  }
+
+  const jqueryChange = elem => {
+    var event= new Event("HTMLEvents", {"bubbles":true, "cancelable":false});
+    elem.dispatchEvent(event)
+  }
+
+  const setInputValue = (form, inputName, value) => {
+    const input = form?.[inputName]
+    if (input) {
+      input.value = value
+      jqueryChange(input)
+    }
+  }
+
+  return (
+    <div id={anchor} className="form">
+      <div className="container d-flex px-lg-2 flex-wrap">
+        <div className="col-12 col-md-6 px-4 ps-md-0 pe-md-5">
+          {title && <h2 className="title text-center text-md-start">{title}</h2>}
+          {content && (
+            <MarkdownView markdown={content} className="form__content text-center text-md-start" />
+          )}
+          <div className="form__img mt-md-5 text-center text-md-start">
+            <img src={image?.url} alt="hero" />
+          </div>
+        </div>
+        <div className="col-12 col-md-6">
+          <div className="hubspot-form-wrapper">
+            <HubspotForm portalId={portalId} formId={formId} css="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Form

src/components/Form/Form.scss

@@ -0,0 +1,45 @@
+@import "../../styles/global.scss";
+
+.form {
+  color: $primary;
+  padding: 5rem 0;
+  .title {
+    text-transform: uppercase;
+  }
+  .hubspot-form-wrapper {
+    background-color: $bg-form;
+    border-radius: 10px;
+    padding: 2rem;
+    padding-bottom: 1rem;
+    min-height: 540px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    > div{
+      width: 100%;
+    }
+  }
+  &__img {
+    padding: 2rem 1rem;
+    img {
+      max-width: 250px;
+      width: 100%;
+    }
+  }
+  &__content {
+    p {
+      font-weight: $bold;
+      font-size: 28px;
+    }
+  }
+}
+@media screen and (min-width: $breakpoint-lg) {
+  .form {
+    &__content {
+      p {
+        font-size: 36px;
+      }
+    }
+  }
+}

src/components/index.js

@@ -9,6 +9,7 @@ import BannerHead from "./BannerHead/BannerHead"
 import CasesSection from "./CasesSection/CasesSection"
 import CasesList from "./CasesSection/CasesList"
 import LogosSection from "./LogosSection/logosSection"
+import Form from "./Form/Form"
 
 
 export {
@@ -23,4 +24,5 @@ export {
   BannerTop,
   BannerHead,
   LogosSection,
+  Form
 }

src/context/themeContext.js

@@ -15,6 +15,7 @@ const themes = {
     "--secondary": "#3f6be8",
     "--secondary-container": "#25cad3",
     "--border-bottom": "#cdcdcd",
+    "--bg-form": "#FAF8F8",
   },
   dark: {
     "--nav-footer-container": "#383838",
@@ -30,6 +31,8 @@ const themes = {
 
     "--secondary": "#67f293",
     "--secondary-container": "#191919",
+    "--bg-form": "#FAF8F8",
+
   },
 }
 

src/styles/global.scss

@@ -18,6 +18,7 @@ $secondary-container: var(--secondary-container);
 $border-bottom: var(--border-bottom);
 $title-jobs: var(--title-jobs);
 $jobs-hover: var(--jobs-hover);
+$bg-form: var(--bg-form);
 
 
 

src/templates/LandingPage.js

@@ -1,54 +1,74 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import { Seo, CasesSection, CasesList, LogosSection } from "../components/index.js"
+import {
+  Seo,
+  CasesSection,
+  CasesList,
+  LogosSection,
+} from "../components/index.js"
 
 // componentes del body
 import Hero from "../components/Hero/Hero"
 import BannerList from "../components/BannerList/BannerLis"
 import ExpandGrid from "../components/expandGrid/ExpandGrid"
 import Catsone from "../components/Catsone/catsone"
-import BannerHead from '../components/BannerHead/BannerHead';
-import Text from '../components/Text/Text';
+import BannerHead from "../components/BannerHead/BannerHead"
+import Text from "../components/Text/Text"
+import Form from "../components/Form/Form"
 
 const LandingPage = ({ data, location }) => {
   const pageData = data?.allStrapiLandingPage?.nodes[0]
   const content = pageData.body.map((component, idx) => {
+    const hero =
+      component.strapi_component === "home.hero" ? (
+        <Hero data={component} />
+      ) : null
 
-    const hero = component.strapi_component === "home.hero" ?
-      <Hero data={component} /> :
-      null
+    const bannerList =
+      component.strapi_component === "components.banner-list" ? (
+        <BannerList data={component} />
+      ) : null
 
-    const bannerList = component.strapi_component === "components.banner-list" ?
-      <BannerList data={component} /> :
-      null
+    const expandGrid =
+      component.strapi_component === "components.selected-grid" ? (
+        <ExpandGrid data={component} />
+      ) : null
 
-    const expandGrid = component.strapi_component === "components.selected-grid" ?
-      <ExpandGrid data={component} /> :
-      null
+    const casesSection =
+      component.strapi_component === "components.cases-section" &&
+      !component.allCases ? (
+        <CasesSection data={component} />
+      ) : null
 
-    const casesSection = (component.strapi_component === "components.cases-section" && !component.allCases) ?
-      <CasesSection data={component} /> :
-      null
+    const casesList =
+      component.strapi_component === "components.cases-section" &&
+      component.allCases ? (
+        <CasesList />
+      ) : null
 
-    const casesList = (component.strapi_component === "components.cases-section" && component.allCases) ?
-      <CasesList /> :
-      null
+    const catsone =
+      component.strapi_component === "scripts.catsone" ? (
+        <Catsone data={component} />
+      ) : null
 
-    const catsone = component.strapi_component === "scripts.catsone" ?
-      <Catsone data={component} /> :
-      null
+    const bannerHead =
+      component.strapi_component === "banners.banner-head" ? (
+        <BannerHead data={component} />
+      ) : null
 
-    const bannerHead = component.strapi_component === "banners.banner-head" ?
-      <BannerHead data={component} /> :
-      null
-
-    const text = component.strapi_component === "components.text" ?
-      <Text data={component} /> :
-      null
-    const logosSection = component.strapi_component === "components.logos-section" ?
-      <LogosSection data={component} /> :
-      null
+    const text =
+      component.strapi_component === "components.text" ? (
+        <Text data={component} />
+      ) : null
+    const logosSection =
+      component.strapi_component === "components.logos-section" ? (
+        <LogosSection data={component} />
+      ) : null
+    const form =
+      component.strapi_component === "components.form" ? (
+        <Form data={component} location={location} />
+      ) : null
 
     return (
       <div key={idx}>
@@ -62,14 +82,14 @@ const LandingPage = ({ data, location }) => {
           {bannerHead}
           {text}
           {logosSection}
+          {form}
         </>
       </div>
     )
-
   })
 
   return (
-    <Layout location={location} options={{ hasHeader: true }} >
+    <Layout location={location} options={{ hasHeader: true }}>
       <Seo title={pageData.name} />
       {content}
     </Layout>