feat(DIST-699): Pass default value for source and medium

Matej Lednicky · Matej Lednicky · commit 807c2523ef71 · 2021-02-23T12:58:26.000+01:00
Default source is domain (without the www) and medium is 'embed-sdk'.
diff --git a/packages/demo-html/public/popup-html.html b/packages/demo-html/public/popup-html.html
@@ -12,7 +12,7 @@
     </style>
   </head>
   <body>
-    <button id="button" data-tf-popup="moe6aa" data-tf-source="localhost">toggle</button>
+    <button id="button" data-tf-popup="moe6aa" data-tf-medium="unit-test">toggle</button>
     <script src="./lib/embed-next.js"></script>
   </body>
 </html>
diff --git a/packages/demo-html/public/popup-js.html b/packages/demo-html/public/popup-js.html
@@ -16,8 +16,7 @@
     <button id="button">toggle</button>
     <script src="./lib/embed-next.js"></script>
     <script>
-      const { open, close } = window.tf.createPopup("moe6aa", { source: "localhost" });
-      let isOpen = false;
+      const { open, close } = window.tf.createPopup("moe6aa", { medium: "unit-test" });
       document.getElementById("button").onclick = function () {
         const isOpen = !!document.querySelector(".typeform-popup");
         isOpen ? close() : open();
diff --git a/packages/demo-html/public/widget-html.html b/packages/demo-html/public/widget-html.html
@@ -12,7 +12,7 @@
     </style>
   </head>
   <body>
-    <div id="wrapper" data-tf-widget="moe6aa" data-tf-source="localhost"></div>
+    <div id="wrapper" data-tf-widget="moe6aa" data-tf-medium="unit-test"></div>
     <script src="./lib/embed-next.js"></script>
   </body>
 </html>
diff --git a/packages/demo-html/public/widget-js.html b/packages/demo-html/public/widget-js.html
@@ -16,7 +16,7 @@
     <div id="wrapper"></div>
     <script src="./lib/embed-next.js"></script>
     <script>
-      window.tf.createWidget("moe6aa", { container: document.getElementById("wrapper"), source: "localhost" });
+      window.tf.createWidget("moe6aa", { container: document.getElementById("wrapper"), medium: "unit-test" });
     </script>
   </body>
 </html>
diff --git a/packages/embed/e2e/spec/functional/popup-window.spec.ts b/packages/embed/e2e/spec/functional/popup-window.spec.ts
@@ -23,7 +23,7 @@ describe('Popup', () => {
   it('should pass options as query param', () => {
     cy.get('.typeform-popup iframe')
       .invoke('attr', 'src')
-      .should('contain', 'typeform-embed=popup-blank&typeform-source=localhost')
+      .should('contain', 'typeform-embed=popup-blank&typeform-source=localhost&typeform-medium=unit-test')
   })
 
   it('should close popup', () => {
diff --git a/packages/embed/e2e/spec/functional/popup.spec.ts b/packages/embed/e2e/spec/functional/popup.spec.ts
@@ -16,7 +16,7 @@ describe('Popup', () => {
   it('should pass options as query param', () => {
     cy.get('.typeform-popup iframe')
       .invoke('attr', 'src')
-      .should('contain', 'typeform-embed=popup-blank&typeform-source=localhost')
+      .should('contain', 'typeform-embed=popup-blank&typeform-source=localhost&typeform-medium=unit-test')
   })
 
   it('should close popup', () => {
diff --git a/packages/embed/e2e/spec/functional/widget-window.spec.ts b/packages/embed/e2e/spec/functional/widget-window.spec.ts
@@ -18,6 +18,6 @@ describe('Widget Window', () => {
   it('should pass options as query param', () => {
     cy.get('.typeform-widget iframe')
       .invoke('attr', 'src')
-      .should('contain', 'typeform-embed=embed-widget&typeform-source=localhost')
+      .should('contain', 'typeform-embed=embed-widget&typeform-source=localhost&typeform-medium=unit-test')
   })
 })
diff --git a/packages/embed/e2e/spec/functional/widget.spec.ts b/packages/embed/e2e/spec/functional/widget.spec.ts
@@ -11,6 +11,6 @@ describe('Widget', () => {
   it('should pass options as query param', () => {
     cy.get('.typeform-widget iframe')
       .invoke('attr', 'src')
-      .should('contain', 'typeform-embed=embed-widget&typeform-source=localhost')
+      .should('contain', 'typeform-embed=embed-widget&typeform-source=localhost&typeform-medium=unit-test')
   })
 })
diff --git a/packages/embed/src/utils/build-iframe-src.ts b/packages/embed/src/utils/build-iframe-src.ts
@@ -1,5 +1,16 @@
 import { EmbedType, UrlOptions } from '../base'
 
+import { removeUndefinedKeys } from './remove-undefined-keys'
+
+const defaultUrlOptions: UrlOptions = {
+  source: window?.location?.hostname.replace(/^www\./, ''),
+  medium: 'embed-sdk',
+}
+
+const addDefaultUrlOptions = (options: UrlOptions): UrlOptions => {
+  return { ...defaultUrlOptions, ...removeUndefinedKeys(options) }
+}
+
 const typesToEmbed: Record<EmbedType, string> = {
   widget: 'embed-widget', // TODO: when widget is full page use 'embed-fullpage'
   popup: 'popup-blank',
@@ -8,7 +19,8 @@ const typesToEmbed: Record<EmbedType, string> = {
   'side-tab': 'popup-side-panel',
 }
 
-const mapOptionsToQueryParams = (type: EmbedType, options: UrlOptions): Record<string, any> => ({
+const mapOptionsToQueryParams = (type: EmbedType, embedId: string, options: UrlOptions): Record<string, any> => ({
+  'typeform-embed-id': embedId,
   'typeform-embed': typesToEmbed[type],
   'typeform-source': options.source,
   'typeform-medium': options.medium,
@@ -22,19 +34,14 @@ const mapOptionsToQueryParams = (type: EmbedType, options: UrlOptions): Record<s
 export const buildIframeSrc = (params: BuildIframeSrcOptions): string => {
   const { formId, type, embedId, options } = params
 
-  const url = new URL(`https://form.typeform.com/to/${formId}`)
+  const queryParams = mapOptionsToQueryParams(type, embedId, addDefaultUrlOptions(options))
 
-  if (embedId) {
-    url.searchParams.set('typeform-embed-id', embedId)
-  }
-
-  const queryParams = mapOptionsToQueryParams(type, options)
-  Object.entries(queryParams).forEach(([paramName, paramValue]) => {
-    if (!paramValue) {
-      return
-    }
-    url.searchParams.set(paramName, paramValue)
-  })
+  const url = new URL(`https://form.typeform.com/to/${formId}`)
+  Object.entries(queryParams)
+    .filter(([, paramValue]) => paramValue != null)
+    .forEach(([paramName, paramValue]) => {
+      url.searchParams.set(paramName, paramValue)
+    })
 
   return url.href
 }
diff --git a/packages/embed/src/utils/build-iframe.src.spec.ts b/packages/embed/src/utils/build-iframe.src.spec.ts
@@ -3,26 +3,41 @@ import { buildIframeSrc } from './build-iframe-src'
 describe('build-iframe-src', () => {
   describe('#buildIframeSrc', () => {
     it('should return iframe src', () => {
-      expect(buildIframeSrc({ formId: 'some-id', type: 'widget', embedId: '', options: {} })).toBe(
-        'https://form.typeform.com/to/some-id?typeform-embed=embed-widget'
+      expect(buildIframeSrc({ formId: 'some-id', type: 'widget', embedId: '', options: {} })).toMatch(
+        'https://form.typeform.com/to/some-id'
       )
     })
 
-    it('should include url options', () => {
-      expect(
-        buildIframeSrc({ formId: 'some-id', type: 'widget', embedId: '', options: { source: 'unit-test-source' } })
-      ).toBe('https://form.typeform.com/to/some-id?typeform-embed=embed-widget&typeform-source=unit-test-source')
+    it('should include default url options', () => {
+      expect(buildIframeSrc({ formId: 'some-id', type: 'widget', embedId: 'embed-id', options: {} })).toBe(
+        'https://form.typeform.com/to/some-id' +
+          '?typeform-embed-id=embed-id' +
+          '&typeform-embed=embed-widget' +
+          '&typeform-source=localhost' +
+          '&typeform-medium=embed-sdk'
+      )
+    })
+
+    it('should override default url options if value is explicitly supplied', () => {
+      const src = buildIframeSrc({
+        formId: 'some-id',
+        type: 'widget',
+        embedId: 'id',
+        options: { medium: 'unit-test-medium', source: 'unit-test-source' },
+      })
+      expect(src).toMatch('typeform-medium=unit-test-medium')
+      expect(src).toMatch('typeform-source=unit-test-source')
     })
 
     it('should omit false url options', () => {
-      expect(
-        buildIframeSrc({
-          formId: 'some-id',
-          type: 'widget',
-          embedId: '',
-          options: { hideFooter: true, hideHeaders: false },
-        })
-      ).toBe('https://form.typeform.com/to/some-id?typeform-embed=embed-widget&embed-hide-footer=true')
+      const src = buildIframeSrc({
+        formId: 'some-id',
+        type: 'widget',
+        embedId: '',
+        options: { hideFooter: true, hideHeaders: false },
+      })
+      expect(src).toMatch('embed-hide-footer=true')
+      expect(src).not.toMatch('embed-hide-headers')
     })
 
     it('should include all url options', () => {
@@ -35,8 +50,10 @@ describe('build-iframe-src', () => {
         opacity: 50,
         disableTracking: true,
       }
-      expect(buildIframeSrc({ formId: 'some-id', type: 'widget', embedId: '', options })).toBe(
-        'https://form.typeform.com/to/some-id?typeform-embed=embed-widget' +
+      expect(buildIframeSrc({ formId: 'some-id', type: 'widget', embedId: 'embed-id', options })).toBe(
+        'https://form.typeform.com/to/some-id' +
+          '?typeform-embed-id=embed-id' +
+          '&typeform-embed=embed-widget' +
           '&typeform-source=unit-test-source' +
           '&typeform-medium=unit-test-medium' +
           '&typeform-medium-version=unit-test-version' +
diff --git a/packages/embed/src/utils/object-to-query-string.spec.ts b/packages/embed/src/utils/object-to-query-string.spec.ts
diff --git a/packages/embed/src/utils/object-to-query-string.ts b/packages/embed/src/utils/object-to-query-string.ts
diff --git a/packages/embed/src/utils/remove-undefined-keys.spec.ts b/packages/embed/src/utils/remove-undefined-keys.spec.ts
@@ -0,0 +1,13 @@
+import { removeUndefinedKeys } from './remove-undefined-keys'
+
+describe('remove-undefined-keys', () => {
+  describe('#removeUndefinedKeys', () => {
+    it('should remove undefined and null keys', () => {
+      expect(removeUndefinedKeys({ a: 'foobar', b: 0, c: '', d: undefined, e: null })).toEqual({
+        a: 'foobar',
+        b: 0,
+        c: '',
+      })
+    })
+  })
+})
diff --git a/packages/embed/src/utils/remove-undefined-keys.ts b/packages/embed/src/utils/remove-undefined-keys.ts
@@ -0,0 +1,5 @@
+export const removeUndefinedKeys = (obj: Record<string, any>): Record<string, any> => {
+  return Object.entries(obj)
+    .filter(([, value]) => value != null)
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+}
