feat(REACH-374): Prepare live embed code initializer (#587)

* feat(REACH-374): Prepare single embed initializer * feat(REACH-374): Initialize live and regular embeds separately * feat(REACH-374): Single Embed Code cypress test * fix(REACH-374): Use the right demo for single-embed-code test * fix(REACH-374): use the right single-embed endpoint * fix(REACH-374): fetch embed by embedID * fix(REACH-374): single-embed => live embed rename
Typeform · Jun 7, 2023 · 6c7ff53 · 6c7ff53
1 parent 0def18e
commit 6c7ff53
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 0 deletions.
diff --git a/packages/demo-html/public/live-embed.html b/packages/demo-html/public/live-embed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Static HTML Demo</title>
+    <style>
+      #wrapper {
+        width: 100%;
+        max-width: 600px;
+        height: 400px;
+        margin: 0 auto;
+      }
+      .element {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background: red;
+        color: white;
+        padding: 10px;
+        width: 200px;
+        height: 60px;
+        line-height: 40px;
+        z-index: 10000;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="element">I have z-index 10k</div>
+    <div id="wrapper" data-tf-live="embed-id"></div>
+    <script src="./lib/embed.js"></script>
+  </body>
+</html>
diff --git a/packages/embed/e2e/spec/functional/live-embed.cy.ts b/packages/embed/e2e/spec/functional/live-embed.cy.ts
@@ -0,0 +1,27 @@
+describe('Single Embed Code', () => {
+  describe(`Should load`, () => {
+    before(() => {
+      cy.intercept('https://api.typeform.com/single-embed/embed-id', {
+        statusCode: 200,
+        body: {
+          html: `<div
+            id="wrapper"
+            data-tf-widget="HLjqXS5W"
+            data-tf-medium="demo-test"
+            data-tf-transitive-search-params="foo,bar"
+            data-tf-hidden="foo=foo value"
+            data-tf-tracking="utm_source=facebook"
+            data-tf-iframe-props="title=Foo Bar"
+          ></div>`,
+        },
+      })
+      cy.visit(`/live-embed.html`)
+    })
+
+    it('should display widget', () => {
+      cy.wait(500)
+      cy.get('.tf-v1-widget iframe').should('be.visible')
+      cy.get('.tf-v1-widget iframe').invoke('attr', 'src').should('contain', 'form.typeform.com/to/')
+    })
+  })
+})
diff --git a/packages/embed/src/browser.ts b/packages/embed/src/browser.ts
@@ -4,11 +4,19 @@ import {
   initializeSidetabs,
   initializeSliders,
   initializeWidgets,
+  initializeLiveEmbeds,
 } from './initializers'
 
 import * as lib from './index'
 
 function loadEmbedElements(forceReload: boolean = false) {
+  initializeEmbedElements(forceReload)
+  initializeLiveEmbeds(forceReload).then(() => {
+    initializeEmbedElements(forceReload)
+  })
+}
+
+function initializeEmbedElements(forceReload: boolean) {
   initializePopovers(forceReload)
   initializePopups(forceReload)
   initializeSidetabs(forceReload)

diff --git a/packages/embed/src/constants.ts b/packages/embed/src/constants.ts
@@ -3,6 +3,7 @@ export const POPUP_ATTRIBUTE = 'data-tf-popup'
 export const SLIDER_ATTRIBUTE = 'data-tf-slider'
 export const WIDGET_ATTRIBUTE = 'data-tf-widget'
 export const SIDETAB_ATTRIBUTE = 'data-tf-sidetab'
+export const LIVE_EMBED_ATTRIBUTE = 'data-tf-live'
 export const SLIDER_POSITION = 'right'
 export const SLIDER_WIDTH = 800
 export const POPUP_SIZE = 100

diff --git a/packages/embed/src/initializers/index.ts b/packages/embed/src/initializers/index.ts
@@ -3,3 +3,4 @@ export * from './initialize-popups'
 export * from './initialize-sliders'
 export * from './initialize-widgets'
 export * from './initialize-sidetabs'
+export * from './initialize-live-embeds'
diff --git a/packages/embed/src/initializers/initialize-live-embeds.ts b/packages/embed/src/initializers/initialize-live-embeds.ts
@@ -0,0 +1,20 @@
+import { LIVE_EMBED_ATTRIBUTE } from '../constants'
+import { fetchLiveEmbed } from '../live-embed/fetch-live-embed'
+
+export const initializeLiveEmbeds = async (forceReload: boolean) => {
+  const embedTypeElements = document.querySelectorAll<HTMLElement>(`[${LIVE_EMBED_ATTRIBUTE}]`)
+
+  for (let index = 0; index < embedTypeElements.length; index += 1) {
+    const element = embedTypeElements.item(index)
+    if (forceReload || element.dataset.tfLoaded !== 'true') {
+      const embedId = element.getAttribute(LIVE_EMBED_ATTRIBUTE)
+      if (!embedId) {
+        throw new Error(`Invalid ${LIVE_EMBED_ATTRIBUTE}=${embedId} for embed #${index}`)
+      }
+
+      const { html } = await fetchLiveEmbed(embedId)
+      element.innerHTML = html
+      element.dataset.tfLoaded = 'true'
+    }
+  }
+}
diff --git a/packages/embed/src/live-embed/fetch-live-embed.ts b/packages/embed/src/live-embed/fetch-live-embed.ts
@@ -0,0 +1,9 @@
+export const fetchLiveEmbed = async (embedId: string) => {
+  const response = await fetch(`https://api.typeform.com/single-embed/${embedId}`)
+
+  if (!response.ok) {
+    throw new Error(`Cannot fetch embed ${embedId}`)
+  }
+
+  return await response.json()
+}