fix(DIST-366): Display correct icon when popup is opened automatically

When opening popup via behavioral triggers (for popover and side panel popup types) display icon to correctly indicate current state - opened, loading, closed.

Author: Matej Lednicky

demo/behavioral-api/load-api.html

@@ -8,14 +8,17 @@
     <h1>This popup opens on page load (via API)</h1>
     <p>If you see this you very likely already closed the popup.</p>
     <p>If the popup did not open automatically something is broken.</p>
+    <p>Popover embed does not have a close button by default and needs to be explicitly provided when embedding via API. <a href="../popup-api.html">See popup API demo for details.</a></p>
 
     <script type="text/javascript" src="../embed.js"></script>
     <script>
       window.typeformEmbed.makePopup(
         '../form/mock.html#foobar=hello',
         {
-          mode: 'popup',
+          mode: 'popover',
           open: 'load',
+          width: 400,
+          height: 550,
         }
       )
     </script>

demo/behavioral-code/load-code.html

@@ -8,15 +8,20 @@
     <h1>This popup opens on page load (via embed code)</h1>
     <p>If you see this you very likely already closed the popup.</p>
     <p>If the popup did not open automatically something is broken.</p>
+
     <a
-      class="typeform-share"
+      class="typeform-share button"
       href="../form/mock.html#foobar=hello"
-      data-mode="popup"
+      data-mode="popover"
       data-open="load"
-      data-open-value="1"
+      data-width="400"
+      data-height="550"
+      style="width:54px;height:54px;position:fixed;right:26px;bottom:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#647;overflow:hidden;line-height:0;"
       target="_blank"
     >
-      Open the popup manually instead
+      <span class="icon">
+        <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' style="margin-top:10px;"><path d='M21 0H0V9L10.5743 24V16.5H21C22.6567 16.5 24 15.1567 24 13.5V3C24 1.34325 22.6567 0 21 0ZM7.5 9.75C6.672 9.75 6 9.07875 6 8.25C6 7.42125 6.672 6.75 7.5 6.75C8.328 6.75 9 7.42125 9 8.25C9 9.07875 8.328 9.75 7.5 9.75ZM12.75 9.75C11.922 9.75 11.25 9.07875 11.25 8.25C11.25 7.42125 11.922 6.75 12.75 6.75C13.578 6.75 14.25 7.42125 14.25 8.25C14.25 9.07875 13.578 9.75 12.75 9.75ZM18 9.75C17.172 9.75 16.5 9.07875 16.5 8.25C16.5 7.42125 17.172 6.75 18 6.75C18.828 6.75 19.5 7.42125 19.5 8.25C19.5 9.07875 18.828 9.75 18 9.75Z' fill='white' /></svg>
+      </span>
     </a>
 
     <script type="text/javascript" src="../embed.js"></script>

e2e/spec/functional/behavioral-popup.spec.js

@@ -90,3 +90,29 @@ Object.keys(pages).forEach(pageSuffix => {
     })
   })
 })
+
+describe('Open: load (via embed code)', () => {
+  before(() => {
+    open(getPageUrl('load', '-code'))
+  })
+
+  it('should display close button', () => {
+    cy.get('.typeform-share > .icon > img[data-qa="popup-close-button"]').should('be.visible')
+    cy.get('.typeform-share > .icon > svg').should('not.be.visible')
+  })
+
+  describe('when popup is closed', () => {
+    before(() => {
+      cy.get('.typeform-share').click()
+    })
+
+    it('should display the popup', () => {
+      cy.get(IFRAME_SELECTOR).should('not.be.visible')
+    })
+
+    it('should display original icon', () => {
+      cy.get('.typeform-share > .icon > img[data-qa="popup-close-button"]').should('not.be.visible')
+      cy.get('.typeform-share > .icon > svg').should('be.visible')
+    })
+  })
+})

src/core/make-popup.js

@@ -113,7 +113,7 @@ const renderComponent = (params, options) => {
   }
 }
 
-export default function makePopup (url, userOptions) {
+export default function makePopup (url, userOptions, element) {
   window.addEventListener('message', getPostMessageHandler('form-ready', userOptions.onReady))
   window.addEventListener('message', getPostMessageHandler('form-closed', userOptions.onClose))
 
@@ -138,8 +138,9 @@ export default function makePopup (url, userOptions) {
   options.container.appendChild(domNode)
 
   const popup = {
+    element,
     open (event) {
-      const { currentTarget } = event || {}
+      const currentTarget = event && event.currentTarget ? event.currentTarget : this.element
       const currentUrl = currentTarget && currentTarget.href ? currentTarget.href : url
       const icon = currentTarget && currentTarget.querySelector('span.icon')
       const params = {

src/core/make-popup.spec.js

@@ -94,6 +94,11 @@ describe('makePopup', () => {
     expect(renderMock).toHaveBeenCalledTimes(0)
   })
 
+  it('attaches the element to popup object', () => {
+    const mockElement = document.createElement('test')
+    expect(makePopup('', {}, mockElement).element).toBe(mockElement)
+  })
+
   it(`renders a Popup component on desktop devices when 'width' option is a valid number`, () => {
     const options = { open: 'load', width: 650 }
 

src/embed.js

@@ -26,7 +26,7 @@ const initializePopup = (element) => {
     data.container = element.parentNode
   }
 
-  const popup = makePopup(url, data)
+  const popup = makePopup(url, data, element)
 
   element.onclick = (event) => {
     event.stopPropagation()

src/embed.spec.js

@@ -46,7 +46,7 @@ describe('Embed', () => {
   it('initialises popup elements', () => {
     expect(makePopupMock).toHaveBeenCalledTimes(1)
     expect(sanitizePopupAttributesMock).toHaveBeenCalledTimes(1)
-    expect(makePopupMock).toBeCalledWith(POPUP_URL, POPUP_ATTR)
+    expect(makePopupMock).toBeCalledWith(POPUP_URL, POPUP_ATTR, document.querySelector('.typeform-share'))
   })
 
   it('initialises widget elements', () => {