feat(DIST-1914): Forward all transitive params (#542)

Co-authored-by: Marco Scarciofolo <[email protected]>
Typeform · Dec 2, 2022 · 1c499d2 · 1c499d2
1 parent 0984486
commit 1c499d2
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 50 deletions.
diff --git a/packages/demo-html/public/transitive-params-html.html b/packages/demo-html/public/transitive-params-html.html
@@ -0,0 +1,47 @@
+<!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,
+      #wrapper2 {
+        width: 100%;
+        max-width: 600px;
+        height: 400px;
+        margin: 80px 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-widget="HLjqXS5W" data-tf-medium="demo-test" data-tf-transitive-search-params></div>
+    <div
+      id="wrapper2"
+      data-tf-widget="HLjqXS5W"
+      data-tf-medium="demo-test"
+      data-tf-transitive-search-params="foo,bar"
+    ></div>
+    <script src="./lib/embed-next.js"></script>
+    <script>
+      window.onload = () => {
+        if (!window.location.search) {
+          window.location.search = '?foo=hi&bar=hello&biz=bye'
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/demo-html/public/transitive-params-js.html b/packages/demo-html/public/transitive-params-js.html
@@ -0,0 +1,59 @@
+<!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,
+      #wrapper2 {
+        width: 100%;
+        max-width: 600px;
+        height: 400px;
+        margin: 80px 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>
+    <link rel="stylesheet" href="./lib/css/widget.css" />
+  </head>
+  <body>
+    <div class="element">I have z-index 10k</div>
+    <div id="wrapper"></div>
+    <div id="wrapper2"></div>
+    <script src="./lib/embed-next.js"></script>
+    <script>
+      window.onload = () => {
+        if (!window.location.search) {
+          window.location.search = '?foo=hi&bar=hello&biz=bye'
+        }
+      }
+
+      window.tf.createWidget('HLjqXS5W', {
+        container: document.getElementById('wrapper'),
+        transitiveSearchParams: ['foo', 'bar'],
+        medium: 'demo-test',
+        hidden: { foo: 'foo value', bar: 'bar value' },
+        iframeProps: { title: 'Foo Bar' },
+      })
+
+      window.tf.createWidget('HLjqXS5W', {
+        container: document.getElementById('wrapper2'),
+        transitiveSearchParams: true,
+        medium: 'demo-test',
+        hidden: { foo: 'foo value', bar: 'bar value' },
+        iframeProps: { title: 'Foo Bar' },
+      })
+    </script>
+  </body>
+</html>
diff --git a/packages/embed/README.md b/packages/embed/README.md
diff --git a/packages/embed/src/base/url-options.ts b/packages/embed/src/base/url-options.ts
@@ -22,7 +22,7 @@ export type UrlOptions = {
    *
    * @type {string[]}
    */
-  transitiveSearchParams?: string[]
+  transitiveSearchParams?: string[] | boolean
   /**
    * Hide typeform footer, that appears showing the progress bar and the navigation buttons.
    *

diff --git a/packages/embed/src/initializers/build-options-from-attributes.ts b/packages/embed/src/initializers/build-options-from-attributes.ts
@@ -18,7 +18,7 @@ export const buildOptionsFromAttributes = (element: HTMLElement) => {
     autoResize: 'stringOrBoolean',
     onClose: 'function',
     onEndingButtonClick: 'function',
-    transitiveSearchParams: 'array',
+    transitiveSearchParams: 'arrayOrBoolean',
     hidden: 'record',
     chat: 'boolean',
     buttonColor: 'string',

diff --git a/packages/embed/src/utils/get-transitive-search-params.spec.ts b/packages/embed/src/utils/get-transitive-search-params.spec.ts
@@ -26,4 +26,16 @@ describe('transferUrlParametersToQueryStrings', () => {
       bar: 'rachel',
     })
   })
+
+  it('transfer ALL the parameters of the URL in the query strings', () => {
+    const queryStringWithTransferedUrlParameters = getTransitiveSearchParams(true)
+    expect(queryStringWithTransferedUrlParameters).toEqual({
+      foo: 'jason',
+      bar: 'rachel',
+      utm_medium: 'cpc',
+      utm_campaign: 'camp2008',
+      utm_source: 'instagram',
+      'embed-hide-footer': 'false',
+    })
+  })
 })
diff --git a/packages/embed/src/utils/get-transitive-search-params.ts b/packages/embed/src/utils/get-transitive-search-params.ts
@@ -1,14 +1,20 @@
-export const getTransitiveSearchParams = (transitiveSearchParams?: string[]) => {
+export const getTransitiveSearchParams = (transitiveSearchParams?: string[] | boolean) => {
   const url = new URL(window.location.href)
-  const queryParamsWithTransitiveParams = {}
 
-  if (transitiveSearchParams && transitiveSearchParams.length > 0) {
-    transitiveSearchParams.forEach((key: string) => {
+  if (typeof transitiveSearchParams === 'boolean' && transitiveSearchParams) {
+    return Object.fromEntries(url.searchParams.entries())
+  }
+
+  if (Array.isArray(transitiveSearchParams) && transitiveSearchParams.length > 0) {
+    return transitiveSearchParams.reduce<Record<string, string>>((queryParamsMap, key) => {
       if (url.searchParams.has(key)) {
-        queryParamsWithTransitiveParams[key] = url.searchParams.get(key)
+        const keyValue = url.searchParams.get(key) as string
+        return { ...queryParamsMap, [key]: keyValue }
       }
-    })
+
+      return queryParamsMap
+    }, {})
   }
 
-  return queryParamsWithTransitiveParams
+  return {}
 }
diff --git a/packages/embed/src/utils/load-options-from-attributes.ts b/packages/embed/src/utils/load-options-from-attributes.ts
@@ -19,6 +19,7 @@ export type Transformation =
   | 'record'
   | 'integerOrBoolean'
   | 'stringOrBoolean'
+  | 'arrayOrBoolean'
 
 const transformString = (value: string | null): string | undefined => {
   return value || undefined
@@ -89,6 +90,8 @@ export const transformAttributeValue = (value: string | null, transformation: Tr
       return transformInteger(value) ?? transformBoolean(value)
     case 'stringOrBoolean':
       return transformString(value) ?? transformBoolean(value)
+    case 'arrayOrBoolean':
+      return transformArray(value) ?? transformBoolean(value)
     default:
       throw new Error(`Invalid attribute transformation ${transformation}`)
   }

diff --git a/packages/embed/tsconfig.json b/packages/embed/tsconfig.json
@@ -3,7 +3,7 @@
     "outDir": "build",
     "target": "es5",
     "module": "CommonJS",
-    "lib": ["esnext", "dom"],
+    "lib": ["esnext", "dom", "dom.iterable"],
     "moduleResolution": "node",
     "jsx": "react",
     "keyofStringsOnly": true,
@@ -18,6 +18,7 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "downlevelIteration": true,
     "typeRoots": ["./types", "./node_modules/@types", "../../node_modules/@types"],
     "types": ["@types/jest", "node"]
   },