From fb44fa8be752484819d537bf600b7ec86f512ae7 Mon Sep 17 00:00:00 2001 From: Dario Viada Date: Tue, 12 Apr 2022 11:15:18 -0300 Subject: [PATCH 1/3] SBIT-98: se crea componente form para landingpage --- src/components/Form/Form.js | 74 ++++++++++++++++++++++++++++++ src/components/Form/Form.scss | 37 +++++++++++++++ src/components/Text/Text.js | 1 - src/components/index.js | 2 + src/context/themeContext.js | 3 ++ src/styles/global.scss | 1 + src/templates/LandingPage.js | 86 +++++++++++++++++++++-------------- 7 files changed, 170 insertions(+), 34 deletions(-) create mode 100644 src/components/Form/Form.js create mode 100644 src/components/Form/Form.scss diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js new file mode 100644 index 00000000..8dbbb673 --- /dev/null +++ b/src/components/Form/Form.js @@ -0,0 +1,74 @@ +import React from "react" +import { 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.data.type === "hsFormCallback" && + event.data.eventName === "onFormReady" + ) { + console.log(event.data, "evento") + const hsFormId = "hsForm_" + formId + const formData = document?.getElementById("hs-form-iframe-0") + ?.contentWindow?.document?.forms[hsFormId] + if (formData) { + setInputValue(formData, "servicio_origen", location.pathname) + } + } + } + + const jqueryChange = elem => { + const event = document.createEvent("HTMLEvents") + event.initEvent("change", true, false) + elem.dispatchEvent(event) + } + + const setInputValue = (form, inputName, value) => { + const input = form?.[inputName] + if (input) { + input.value = value + jqueryChange(input) + } + } + + return ( +
+
+
+ {title &&

{title}

} + {content && ( + + )} +
+ hero +
+
+
+
+ +
+
+
+
+ ) +} + +export default Form diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss new file mode 100644 index 00000000..50484825 --- /dev/null +++ b/src/components/Form/Form.scss @@ -0,0 +1,37 @@ +@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; + } + &__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; + } + } + } +} diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js index b43f57f7..1f0fc039 100644 --- a/src/components/Text/Text.js +++ b/src/components/Text/Text.js @@ -3,7 +3,6 @@ import MarkdownView from "react-showdown"; import './Text.scss'; export default function Text({ data }) { - console.log(data) const title = data?.title; const description = data?.text; diff --git a/src/components/index.js b/src/components/index.js index 203eeac6..f7bf611b 100644 --- a/src/components/index.js +++ b/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 } diff --git a/src/context/themeContext.js b/src/context/themeContext.js index 55fee4e7..80c67460 100644 --- a/src/context/themeContext.js +++ b/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", + }, } diff --git a/src/styles/global.scss b/src/styles/global.scss index 498a3fc4..3e0cfae7 100644 --- a/src/styles/global.scss +++ b/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); diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js index bd4482f1..ad817bc1 100644 --- a/src/templates/LandingPage.js +++ b/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" ? ( + + ) : null - const hero = component.strapi_component === "home.hero" ? - : - null + const bannerList = + component.strapi_component === "components.banner-list" ? ( + + ) : null - const bannerList = component.strapi_component === "components.banner-list" ? - : - null + const expandGrid = + component.strapi_component === "components.selected-grid" ? ( + + ) : null - const expandGrid = component.strapi_component === "components.selected-grid" ? - : - null + const casesSection = + component.strapi_component === "components.cases-section" && + !component.allCases ? ( + + ) : null - const casesSection = (component.strapi_component === "components.cases-section" && !component.allCases) ? - : - null + const casesList = + component.strapi_component === "components.cases-section" && + component.allCases ? ( + + ) : null - const casesList = (component.strapi_component === "components.cases-section" && component.allCases) ? - : - null + const catsone = + component.strapi_component === "scripts.catsone" ? ( + + ) : null - const catsone = component.strapi_component === "scripts.catsone" ? - : - null + const bannerHead = + component.strapi_component === "banners.banner-head" ? ( + + ) : null - const bannerHead = component.strapi_component === "banners.banner-head" ? - : - null - - const text = component.strapi_component === "components.text" ? - : - null - const logosSection = component.strapi_component === "components.logos-section" ? - : - null + const text = + component.strapi_component === "components.text" ? ( + + ) : null + const logosSection = + component.strapi_component === "components.logos-section" ? ( + + ) : null + const form = + component.strapi_component === "components.form" ? ( +
+ ) : null return (
@@ -62,14 +82,14 @@ const LandingPage = ({ data, location }) => { {bannerHead} {text} {logosSection} + {form}
) - }) return ( - + {content} From 5852ebaecf5665b35749231b74b0c25e396195b7 Mon Sep 17 00:00:00 2001 From: Dario Viada Date: Tue, 12 Apr 2022 11:30:16 -0300 Subject: [PATCH 2/3] SBIT-98: corrijo altura de form --- src/components/Form/Form.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 50484825..94f4a5e9 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -11,6 +11,14 @@ 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; From 370c7d92ac6b245536d81aca1d117206043e3eac Mon Sep 17 00:00:00 2001 From: Dario Viada Date: Tue, 12 Apr 2022 12:13:19 -0300 Subject: [PATCH 3/3] SBIT-98: se corrigen errores de sonar --- src/components/Form/Form.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js index 8dbbb673..ea010ea9 100644 --- a/src/components/Form/Form.js +++ b/src/components/Form/Form.js @@ -1,5 +1,4 @@ -import React from "react" -import { useEffect } from "react" +import React , { useEffect } from "react" import MarkdownView from "react-showdown" import HubspotForm from "react-hubspot-form" import "./Form.scss" @@ -21,23 +20,25 @@ const Form = ({ location, data }) => { }, []) function handler(event) { - if ( - event.data.type === "hsFormCallback" && - event.data.eventName === "onFormReady" - ) { - console.log(event.data, "evento") - const hsFormId = "hsForm_" + formId - const formData = document?.getElementById("hs-form-iframe-0") - ?.contentWindow?.document?.forms[hsFormId] - if (formData) { - setInputValue(formData, "servicio_origen", location.pathname) + 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 => { - const event = document.createEvent("HTMLEvents") - event.initEvent("change", true, false) + var event= new Event("HTMLEvents", {"bubbles":true, "cancelable":false}); elem.dispatchEvent(event) }