feat(DIST-41): Add response_id to onSubmit callback

Author: LexSwed

README.md

@@ -131,6 +131,27 @@ typeformEmbed.makePopup(url, options)
   )
   ```
 
+### `onSubmit` event
+
+Callback function `onSubmit` receives `event` object with next properties:
+
+| Parameter     | Type   | Description        |
+| ------------- | ------ | ------------------ |
+| `response_id` | string | ID of the response |
+
+#### Example:
+
+```javascript
+const reference = typeformEmbed.makePopup(
+  'https://admin.typeform.com/to/PlBzgL',
+  {
+    onSubmit: function (event) {
+      console.log(event.response_id)
+    }
+  }
+)
+```
+
 ## Troubleshooting
 
 ### An element in my page is over the typeform

src/core/make-fullscreen.js

@@ -5,7 +5,8 @@ import {
   applyIOSIframeResizeHack,
   replaceExistingKeys,
   redirectToUrl,
-  noop
+  noop,
+  getSubmitEventData
 } from './utils'
 import onMessage from './utils/message-propagation'
 
@@ -28,8 +29,8 @@ export default function makeFullScreen (iframe, url, options) {
 
   iframe.src = appendParamsToUrl(url, replaceExistingKeys(options, queryStringKeys))
 
-  const onFormSubmit = () => {
-    options.onSubmit()
+  const onFormSubmit = (event) => {
+    options.onSubmit(getSubmitEventData(event))
   }
 
   ensureMetaViewport()

src/core/make-fullscreen.spec.js

@@ -1,5 +1,6 @@
 import CustomEvent from 'custom-event'
 
+import * as utils from './utils'
 import makeFullScreen from './make-fullscreen'
 
 describe('makeFullScreen', () => {
@@ -29,7 +30,12 @@ describe('makeFullScreen', () => {
     const onSubmitMock = jest.fn()
     makeFullScreen(iframe, URL, { onSubmit: onSubmitMock })
 
-    window.dispatchEvent(new CustomEvent('form-submit'))
+    const getSubmitEventDataSpy = jest.spyOn(utils, 'getSubmitEventData')
+    const event = new CustomEvent('form-submit')
+
+    window.dispatchEvent(event)
+
+    expect(getSubmitEventDataSpy).toHaveBeenCalledWith(event)
     expect(onSubmitMock).toHaveBeenCalled()
   })
 })

src/core/utils/index.js

@@ -174,3 +174,7 @@ export const redirectToUrl = event => {
     document.body.removeChild(anchor)
   } catch (e) {}
 }
+
+export const getSubmitEventData = (event) => {
+  return { response_id: event && event.detail ? event.detail.response_id : undefined }
+}

src/core/utils/index.spec.js

@@ -144,4 +144,15 @@ describe('Utilities', () => {
       expect(onMessage).not.toHaveBeenCalled()
     })
   })
+
+  describe('getSubmitEventData', () => {
+    test('takes submission info from the event', () => {
+      const detail = { response_id: 'response_id' }
+      expect(utils.getSubmitEventData({ detail })).toEqual({ response_id: detail.response_id })
+    })
+
+    test('returns undefined for empty object', () => {
+      expect(utils.getSubmitEventData({ detail: {} })).toEqual({ response_id: undefined })
+    })
+  })
 })

src/core/views/mobile-modal.js

@@ -9,7 +9,8 @@ import {
   broadcastMessage,
   callIfEmbedIdMatches,
   redirectToUrl,
-  updateQueryStringParameter
+  updateQueryStringParameter,
+  getSubmitEventData
 } from './../utils'
 import { DEFAULT_AUTOCLOSE_TIMEOUT } from './popup'
 
@@ -116,8 +117,10 @@ class MobileModal extends Component {
     }
   }
 
-  handleFormSubmit () {
-    this.props.onSubmit && this.props.onSubmit()
+  handleFormSubmit (event) {
+    if (this.props.onSubmit) {
+      this.props.onSubmit(getSubmitEventData(event))
+    }
   }
 
   handleFormTheme (event) {

src/core/views/mobile-modal.spec.js

@@ -4,6 +4,8 @@ import Enzyme, { shallow, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import CustomEvent from 'custom-event'
 
+import * as utils from '../utils'
+
 import MobileModal from './mobile-modal'
 import Iframe from './components/iframe'
 import CloseIcon from './components/close-icon'
@@ -67,6 +69,17 @@ describe('MobileModal', () => {
     expect(onSubmitSpy).not.toHaveBeenCalled()
   })
 
+  it('passes event data to onSubmit callback', () => {
+    const onSubmitSpy = jest.fn()
+    const getSubmitEventDataSpy = jest.spyOn(utils, 'getSubmitEventData')
+    const event = new CustomEvent('form-submit', { detail: { embedId: EMBED_ID } })
+
+    shallow(<MobileModal embedId={EMBED_ID} onSubmit={onSubmitSpy} url={URL} />)
+    window.dispatchEvent(event)
+
+    expect(getSubmitEventDataSpy).toHaveBeenCalledWith(event)
+  })
+
   describe('prevent page below modal to scroll', () => {
     beforeEach(() => {
       document.body.classList.remove('__typeform-embed-mobile-modal-open')

src/core/views/popup.js

@@ -10,7 +10,8 @@ import {
   broadcastMessage,
   callIfEmbedIdMatches,
   redirectToUrl,
-  updateQueryStringParameter
+  updateQueryStringParameter,
+  getSubmitEventData
 } from './../utils'
 import closeImg from './../../../assets/close.gif'
 
@@ -225,8 +226,10 @@ class Popup extends Component {
     }
   }
 
-  handleFormSubmit () {
-    this.props.options.onSubmit && this.props.options.onSubmit()
+  handleFormSubmit (event) {
+    if (this.props.options.onSubmit) {
+      this.props.options.onSubmit(getSubmitEventData(event))
+    }
   }
 
   render () {

src/core/views/popup.spec.js

@@ -3,6 +3,8 @@ import CustomEvent from 'custom-event'
 import Enzyme, { shallow, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
+import * as utils from '../utils'
+
 import Popup, {
   POPUP,
   DRAWER,
@@ -102,6 +104,18 @@ describe('Popup', () => {
     expect(onSubmitMock).not.toHaveBeenCalled()
   })
 
+  it('passes event data to onSubmit callback', () => {
+    const onSubmitMock = jest.fn()
+    const options = { ...popupOptions, onSubmit: onSubmitMock }
+    const getSubmitEventDataSpy = jest.spyOn(utils, 'getSubmitEventData')
+    const event = new CustomEvent('form-submit', { detail: { embedId: EMBED_ID } })
+
+    shallow(<Popup embedId={EMBED_ID} options={options} url={URL} />)
+
+    window.dispatchEvent(event)
+    expect(getSubmitEventDataSpy).toHaveBeenCalledWith(event)
+  })
+
   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.js

@@ -9,7 +9,8 @@ import {
   isElementInViewport,
   callIfEmbedIdMatches,
   updateQueryStringParameter,
-  redirectToUrl
+  redirectToUrl,
+  getSubmitEventData
 } from '../utils'
 import randomString from '../utils/random-string'
 
@@ -192,8 +193,10 @@ class Widget extends Component {
     broadcastMessage(this.embedId, event)
   }
 
-  handleFormSubmit () {
-    this.props.options.onSubmit && this.props.options.onSubmit()
+  handleFormSubmit (event) {
+    if (this.props.options.onSubmit) {
+      this.props.options.onSubmit(getSubmitEventData(event))
+    }
   }
 
   reloadIframe () {