feat(WEB-821): Add onScreenChanged callback to popup

src/core/views/popup.js

@@ -62,15 +62,15 @@ const popupWrapper = styled(BaseWrapper)`
     const offset = (100 - p.size) / 2
     if (p.isContained) {
       return `
-        width: calc(${p.size}% - 80px); 
-        height: calc(${p.size}% - 80px); 
+        width: calc(${p.size}% - 80px);
+        height: calc(${p.size}% - 80px);
         top: calc(${offset}% + 40px);
         left: calc(${offset}% + 40px);
       `
     }
     return `
-      width: calc(${p.size}% - 80px); 
-      height: calc(${p.size}% - 80px); 
+      width: calc(${p.size}% - 80px);
+      height: calc(${p.size}% - 80px);
       top: calc(${offset}% + 40px);
       left: calc(${offset}% + 40px);
     `
@@ -167,6 +167,7 @@ class Popup extends Component {
     this.handleAnimateBeforeClose = this.handleAnimateBeforeClose.bind(this)
     this.handleTransitionEnd = this.handleTransitionEnd.bind(this)
     this.setWrapperRef = this.setWrapperRef.bind(this)
+    this.handleFormScreenChanged = callIfEmbedIdMatches(this.handleFormScreenChanged.bind(this), this.props.embedId)
   }
 
   componentDidMount () {
@@ -177,6 +178,7 @@ class Popup extends Component {
     window.addEventListener('embed-auto-close-popup', this.handleAutoClose)
     window.addEventListener('redirect-after-submit', redirectToUrl)
     window.addEventListener('thank-you-screen-redirect', redirectToUrl)
+    window.addEventListener('form-screen-changed', this.handleFormScreenChanged)
     window.tfClosePopup = this.handleClose
 
     setTimeout(() => {
@@ -197,6 +199,7 @@ class Popup extends Component {
     window.removeEventListener('embed-auto-close-popup', this.handleAutoClose)
     window.removeEventListener('redirect-after-submit', redirectToUrl)
     window.removeEventListener('thank-you-screen-redirect', redirectToUrl)
+    window.removeEventListener('form-screen-changed', this.handleFormScreenChanged)
     delete window.tfClosePopup
   }
 
@@ -218,6 +221,12 @@ class Popup extends Component {
     return closeImagePopup
   }
 
+  handleFormScreenChanged (event) {
+    if (this.props.options.onScreenChanged) {
+      this.props.options.onScreenChanged(event)
+    }
+  }
+
   updateIcon (component) {
     if (this.props.icon) {
       if (!this.iconHTML) {

src/core/views/popup.spec.js

@@ -111,6 +111,26 @@ describe('Popup', () => {
     })
   })
 
+  describe('onScreenChanged callback', () => {
+    it('should be called when the user execute an interaction that triggers a screen change', () => {
+      const onScreenChangedMock = jest.fn()
+      const options = { ...popupOptions, onScreenChanged: onScreenChangedMock }
+      mount(<Popup embedId={EMBED_ID} options={options} url={URL}/>)
+
+      window.dispatchEvent(new CustomEvent('form-screen-changed', { detail: { embedId: EMBED_ID } }))
+      expect(onScreenChangedMock).toHaveBeenCalledTimes(1)
+    })
+
+    it('should NOT be called when the user execute an interaction that triggers a screen change and the embed ID doesn\'t match', () => {
+      const onScreenChangedMock = jest.fn()
+      const options = { ...popupOptions, onScreenChanged: onScreenChangedMock }
+      mount(<Popup embedId={EMBED_ID} options={options} url={URL}/>)
+
+      window.dispatchEvent(new CustomEvent('form-screen-changed', { detail: { embedId: '098765' } }))
+      expect(onScreenChangedMock).not.toHaveBeenCalled()
+    })
+  })
+
   describe(`upon receiving upon 'embed-auto-close-popup' event`, () => {
     let onCloseMock
     it('does not call onAutoClose callback function when auto close is not enabled', () => {

src/core/views/widget.spec.js

@@ -45,6 +45,15 @@ describe('Widget', () => {
     expect(onSubmitMock).not.toHaveBeenCalled()
   })
 
+  it('onScreenChanged callback is executed when the user execute an interaction that triggers a screen change', () => {
+    const onScreenChangedMock = jest.fn()
+    const options = { onScreenChanged: onScreenChangedMock }
+    mount(<Widget options={options} url={URL} />)
+
+    window.dispatchEvent(new CustomEvent('form-screen-changed'))
+    expect(onScreenChangedMock).toHaveBeenCalledTimes(1)
+  })
+
   it('passes event data to onSubmit callback', () => {
     const onSubmitMock = jest.fn()
     const options = { onSubmit: onSubmitMock }