Merged in feat/BOOK-591-jotform (pull request #3350)

Feat/BOOK-591 jotform

* feat(BOOK-591): create jotform

* feat(BOOK-591): jotform

* feat(BOOK-591): jotform

* fix(BOOK-591): add embedhandler

* feat(BOOK-591): refactor jotform

* feat(BOOK-591): remove inline styles

* feat(BOOK-591): remove typename

* feat(BOOK-591): add jotformembedhandler


Approved-by: Erik Tiekstra

apps/scandic-web/components/Blocks/Jotform/index.tsx

@@ -0,0 +1,58 @@
+"use client"
+import Script from "next/script"
+import { useEffect, useRef, useState } from "react"
+
+import useLang from "@/hooks/useLang"
+
+import styles from "./jotform.module.css"
+
+type JotformProps = {
+  formId: string | null | undefined
+}
+
+export default function Jotform({ formId }: JotformProps) {
+  const lang = useLang()
+  const [scriptInitialized, setScriptInitialized] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      typeof window.jotformEmbedHandler === "function"
+  )
+  const componentInitialized = useRef(false)
+
+  useEffect(() => {
+    if (
+      formId &&
+      scriptInitialized &&
+      !componentInitialized.current &&
+      window.jotformEmbedHandler
+    ) {
+      window.jotformEmbedHandler(
+        `iframe[id='JotFormIFrame-${formId}']`,
+        "https://scandichotels.jotform.com/"
+      )
+      componentInitialized.current = true
+    }
+  }, [formId, scriptInitialized])
+
+  if (!formId) {
+    return null
+  }
+
+  const src = `https://scandichotels.jotform.com/${formId}?language=${lang}`
+
+  return (
+    <>
+      <Script
+        src="https://scandichotels.jotform.com/s/umd/latest/for-form-embed-handler.js"
+        onLoad={() => setScriptInitialized(true)}
+        strategy="lazyOnload"
+      />
+      <iframe
+        id={`JotFormIFrame-${formId}`}
+        src={src}
+        className={styles.iframe}
+        scrolling="no"
+      />
+    </>
+  )
+}

apps/scandic-web/components/Blocks/Jotform/jotform.module.css

@@ -0,0 +1,5 @@
+.iframe {
+  width: 100%;
+  border-width: 0;
+  min-height: max(100dvh, 300px);
+}

apps/scandic-web/components/Blocks/index.tsx

@@ -14,6 +14,7 @@ import AccordionSection from "./Accordion"
 import CardGallery from "./CardGallery"
 import Essentials from "./Essentials"
 import HotelListing from "./HotelListing"
+import Jotform from "./Jotform"
 import Table from "./Table"
 
 import type { BlocksProps } from "@/types/components/blocks"
@@ -107,6 +108,8 @@ export default function Blocks({ blocks }: BlocksProps) {
         return <UspGrid usp_grid={block.usp_grid} />
       case BlocksEnums.block.Essentials:
         return <Essentials content={block.essentials} />
+      case BlocksEnums.block.Jotform:
+        return <Jotform formId={block.jotform?.form_id} />
       case BlocksEnums.block.VideoCard:
         return (
           <VideoCardBlock

apps/scandic-web/types/window.d.ts

@@ -34,4 +34,5 @@ interface Window {
       init?: (args: { micrositeId: string; language: "en" | "sv" }) => void
     }
   }
+  jotformEmbedHandler?: (selector: string, url: string) => void
 }