From a781a944b1df10927056be10952ca90472cdf8a1 Mon Sep 17 00:00:00 2001 From: Matej Lednicky Date: Wed, 27 Jan 2021 13:22:48 +0100 Subject: [PATCH] fix(DIST-629): Update iframe reload logic When widget is opened as popup on mobile the iframe needs to be reloaded to make sure we display welcome screen again after the popup is closed. Our current logic stopped working. --- demo/index.html | 1 + demo/widget-real.html | 18 ++++++++++++++++++ src/core/make-widget.js | 7 ------- src/core/make-widget.spec.js | 1 - src/core/views/widget.js | 25 ++++++++++--------------- src/core/views/widget.spec.js | 3 ++- 6 files changed, 31 insertions(+), 24 deletions(-) create mode 100644 demo/widget-real.html diff --git a/demo/index.html b/demo/index.html index ae74e764..ff8ee328 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,6 +17,7 @@

Embed snippet

  • Widget with trasnparent background *
  • Widget with legacy hidden fields *
  • Widget with long text
    • +
  • Widget (real world typeform)
  • Multiple widgets
  • Full page *
  • Popups *
    • diff --git a/demo/widget-real.html b/demo/widget-real.html new file mode 100644 index 00000000..2f2a32fb --- /dev/null +++ b/demo/widget-real.html @@ -0,0 +1,18 @@ + + + + Widget (real typeform) + + + + + +
    + + + + diff --git a/src/core/make-widget.js b/src/core/make-widget.js index 11d08d04..273e0aec 100644 --- a/src/core/make-widget.js +++ b/src/core/make-widget.js @@ -48,13 +48,6 @@ export default function makeWidget(element, url, options) { let queryStrings = replaceExistingKeys(options, queryStringKeys) queryStrings = transferUrlParametersToQueryStrings(options.transferableUrlParameters, queryStrings) - if (enabledFullscreen) { - queryStrings = { - ...queryStrings, - 'add-placeholder-ws': true, - } - } - const urlWithQueryString = appendParamsToUrl(url, queryStrings) render( diff --git a/src/core/make-widget.spec.js b/src/core/make-widget.spec.js index 553774e8..fe12d26b 100644 --- a/src/core/make-widget.spec.js +++ b/src/core/make-widget.spec.js @@ -62,7 +62,6 @@ describe('makeWidget', () => { const widgetURL = component.props.url const { query } = UrlParse(widgetURL, true) - expect(query['add-placeholder-ws']).toBe('true') expect(query['mandarina']).toBeUndefined() expect(component.type.name).toEqual('Widget') diff --git a/src/core/views/widget.js b/src/core/views/widget.js index b94838c8..fbd98998 100644 --- a/src/core/views/widget.js +++ b/src/core/views/widget.js @@ -57,20 +57,11 @@ const PlaceholderAnimationAppear = keyframes` ` const PlaceholderAnimationDisappear = keyframes` - 100% { - opacity: 0; - } - - 75% { - opacity: 1; - } - - - 25% { + 0% { opacity: 1; } - - 0% { + + 100% { opacity: 0; } ` @@ -176,7 +167,7 @@ class Widget extends Component { goFullScreen() { if (this.props.enabledFullscreen) { this.setState({ isFullscreen: true }) - setTimeout(this.reloadIframe, 500) + this.reloadIframe() } } @@ -226,8 +217,11 @@ class Widget extends Component { reloadIframe() { // Re-assign the source of the iframe, makes it reload cross-browser - // eslint-disable-next-line - this.iframe.iframeRef.src = this.iframe.iframeRef.src + const originalSrc = this.iframe.iframeRef.src + this.iframe.iframeRef.src = '' + setTimeout(() => { + this.iframe.iframeRef.src = originalSrc + }, 250) } focusIframe() { @@ -266,6 +260,7 @@ class Widget extends Component { if (enabledFullscreen) { inlineIframeUrl = updateQueryStringParameter('disable-tracking', 'true', inlineIframeUrl) + inlineIframeUrl = updateQueryStringParameter('add-placeholder-ws', 'true', inlineIframeUrl) } let fullscreenIframeUrl = updateQueryStringParameter('typeform-welcome', '0', url) diff --git a/src/core/views/widget.spec.js b/src/core/views/widget.spec.js index 6068a12a..61a3eaba 100644 --- a/src/core/views/widget.spec.js +++ b/src/core/views/widget.spec.js @@ -78,10 +78,11 @@ describe('Widget', () => { expect(onSubmitMock).toHaveBeenCalledTimes(1) }) - it('renders an iframe with disabled submissions', () => { + it('renders an iframe with disabled submissions and placeholder welcome screen', () => { const wrapper = mount() expect(wrapper.find(Iframe)).toHaveLength(1) expect(wrapper.find(Iframe).props().src.includes('disable-tracking=true')).toBe(true) + expect(wrapper.find(Iframe).props().src.includes('add-placeholder-ws=true')).toBe(true) }) it('renders a second iframe after the welcome-screen-hidden event', () => {