diff --git a/app/[lang]/components/formModal/formModal.module.css b/app/[lang]/components/formModal/formModal.module.css index 1ccf80d..84c79c1 100644 --- a/app/[lang]/components/formModal/formModal.module.css +++ b/app/[lang]/components/formModal/formModal.module.css @@ -9,7 +9,7 @@ max-height: calc(100% - 140px); width: 800px; max-width: calc(100% - 40px); - border: 2px solid var(--grey300);; + border: 2px solid var(--grey300); background: var(--background-color); overflow: auto; -webkit-overflow-scrolling: touch; @@ -46,11 +46,13 @@ .activityForm input { margin-right: 10px; } -.choiceContainer, .choiceContainer input, .choiceContainer label { +.choiceContainer, +.choiceContainer input, +.choiceContainer label { cursor: pointer; } .choiceContainer { - margin-bottom: 5px + margin-bottom: 5px; } .choiceContainer input[type="radio"] { display: none; @@ -78,6 +80,12 @@ border-color: var(--primary); } +.trialRequestIframe { + display: block; + width: 100%; + border: 0; +} + @media (max-width: 750px) { .modal { top: 60px; diff --git a/app/[lang]/components/formModal/formModal.tsx b/app/[lang]/components/formModal/formModal.tsx index 5969117..a32743d 100644 --- a/app/[lang]/components/formModal/formModal.tsx +++ b/app/[lang]/components/formModal/formModal.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import Modal from "react-modal"; import { getDictionary } from "../../../../translations/translations"; import styles from "./formModal.module.css"; @@ -27,25 +27,39 @@ export function FormModalButton(p: { return ( <> - - + - + ); } function Forms(p: { lang: string; title: string; isFreeTrialForm: boolean }) { + if (p.isFreeTrialForm) { + return ; + } + const t = getDictionary(p.lang); const [isReseller, setIsReseller] = useState(null); return ( @@ -53,7 +67,10 @@ function Forms(p: { lang: string; title: string; isFreeTrialForm: boolean }) {

{p.title}

{t.contactUsForm.activity}

-
setIsReseller(true)}> +
setIsReseller(true)} + >
-
setIsReseller(false)}> +
setIsReseller(false)} + > {t.contactUsForm.activityEnterprise}
- {isReseller === null ? null : p.isFreeTrialForm ? ( -
- - -
- ) : ( + {isReseller === null ? null : (
{ +const HubspotForm = (p: { + id: string; + portalId: string; + formId: string; + region: string; + isVisible: boolean; +}) => { const htmlId = `hubspot-form-${p.id}`; const { isFormCreated, isError, error } = useHubspotForm({ portalId: p.portalId, @@ -124,3 +133,48 @@ const HubspotForm = (p: { id: string; portalId: string; formId: string; region: return
; }; + +function TrialRequestIframe() { + const iframeRef = useRef(null); + const [iframeHeight, setIframeHeight] = useState(200); + + useEffect(() => { + function handleMessage(event: MessageEvent) { + if (event.source !== iframeRef.current?.contentWindow) { + return; + } + + const nextHeight = Number( + (event.data as { frameHeight?: unknown })?.frameHeight, + ); + if (Number.isFinite(nextHeight)) { + setIframeHeight(nextHeight); + } + } + + window.addEventListener("message", handleMessage); + return () => { + window.removeEventListener("message", handleMessage); + }; + }, []); + + let iframeSrc = "https://admin-pro.upsignon.eu/trial-request"; + if (window.location.hostname === "localhost") { + iframeSrc = "http://localhost:8090/trial-request"; + } else if (window.location.hostname.endsWith("upsignon.vercel.app")) { + iframeSrc = "https://pro-staging.upsignon.eu/admin/trial-request"; + } else { + iframeSrc = "https://admin-pro.upsignon.eu/trial-request"; + } + return ( +
+