fix(DIST-568): Restore viewport when popup is closed

e2e/spec/functional/popup.spec.js

@@ -54,14 +54,29 @@ Object.keys(popupModes).forEach(popupMode => {
         })
 
         describe('Mobile', () => {
+          let viewportContent
+
           before(() => {
             openOnMobile(pageUrl)
+            cy.get('meta[name=viewport]')
+              .invoke('attr', 'content')
+              .then(content => {
+                viewportContent = content
+              })
             openPopup(`#btn-${popupMode}`)
           })
 
+          it('Updates viewport meta tag', () => {
+            cy.get('meta[name=viewport]').invoke('attr', 'content').should('not.eq', viewportContent)
+          })
+
           it('Closes Embed Popup clicking on close Button', () => {
             closePopupViaButtonOnMobile()
           })
+
+          it('Restores viewport meta tag', () => {
+            cy.get('meta[name=viewport]').invoke('attr', 'content').should('eq', viewportContent)
+          })
         })
       })
     })

src/core/make-fullscreen.js

@@ -1,6 +1,6 @@
 import {
   appendParamsToUrl,
-  ensureMetaViewport,
+  setMobileMetaViewport,
   replaceExistingKeys,
   redirectToUrl,
   noop,
@@ -32,7 +32,7 @@ export default function makeFullScreen (iframe, url, options) {
     options.onSubmit(getSubmitEventData(event))
   }
 
-  ensureMetaViewport()
+  setMobileMetaViewport()
 
   iframe.onload = () => {
     iframe.contentWindow.focus()

src/core/make-popup.js

@@ -4,7 +4,6 @@ import { render, unmountComponentAtNode } from 'react-dom'
 import {
   appendParamsToUrl,
   replaceExistingKeys,
-  ensureMetaViewport,
   callIfEmbedIdMatches,
   noop
 } from './utils'
@@ -105,7 +104,6 @@ const renderComponent = (params, options) => {
       domNode
     )
   } else {
-    ensureMetaViewport()
     render(
       <MobileModal
         autoClose={autoClose}

src/core/utils/index.js

@@ -54,23 +54,32 @@ export const replaceExistingKeys = (obj, replacer) => {
   }, {})
 }
 
-export const ensureMetaViewport = () => {
+export const setMobileMetaViewport = () => {
+  return ensureMetaViewport('width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')
+}
+
+export const ensureMetaViewport = (viewportContent) => {
   if (!document.querySelector) {
-    return
+    return null
   }
 
   const viewport = document.querySelector('meta[name=viewport]')
-  const viewportContent =
-    'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
 
   if (viewport) {
-    viewport.setAttribute('content', viewportContent)
-  } else {
+    const originalViewportContent = viewport.getAttribute('content')
+    if (viewportContent) {
+      viewport.setAttribute('content', viewportContent)
+    } else {
+      viewport.parentNode.removeChild(viewport)
+    }
+    return originalViewportContent
+  } else if (viewportContent) {
     const metaTag = document.createElement('meta')
     metaTag.content = viewportContent
     metaTag.name = 'viewport'
     document.head.appendChild(metaTag)
   }
+  return null
 }
 
 export const isElementInViewport = el => {

src/core/views/mobile-modal.js

@@ -9,7 +9,9 @@ import {
   callIfEmbedIdMatches,
   redirectToUrl,
   updateQueryStringParameter,
-  getSubmitEventData
+  getSubmitEventData,
+  setMobileMetaViewport,
+  ensureMetaViewport
 } from './../utils'
 import { DEFAULT_AUTOCLOSE_TIMEOUT } from './popup'
 
@@ -45,7 +47,8 @@ class MobileModal extends Component {
 
     this.state = {
       backgroundColor: props.backgroundColor,
-      buttonColor: props.buttonColor
+      buttonColor: props.buttonColor,
+      originalViewportContent: null
     }
 
     this.handleMessage = this.handleMessage.bind(this)
@@ -56,6 +59,9 @@ class MobileModal extends Component {
   }
 
   componentDidMount () {
+    const originalViewportContent = setMobileMetaViewport()
+    this.setState({ originalViewportContent })
+
     window.addEventListener('message', this.handleMessage)
     window.addEventListener('embed-auto-close-popup', this.handleAutoClose)
     window.addEventListener('form-submit', this.handleFormSubmit)
@@ -85,6 +91,9 @@ class MobileModal extends Component {
   }
 
   componentWillUnmount () {
+    ensureMetaViewport(this.state.originalViewportContent)
+    this.setState({ originalViewportContent: null })
+
     window.removeEventListener('message', this.handleMessage)
     window.removeEventListener('embed-auto-close-popup', this.handleAutoClose)
     window.removeEventListener('form-submit', this.handleFormSubmit)