feat: add response ID to thank you page

src/public/modules/forms/base/componentViews/end-page.html

@@ -5,7 +5,14 @@
   <div id="end-page-main-container" class="{{ vm.colorTheme }}-bg">
     <div class="row">
       <p id="end-page-header">
-        Form submitted <span id="end-page-timestamp"> {{ vm.timestamp }} </span>
+        <span id="end-page-responseid">
+          Response ID: <span id="end-page-id"> {{ vm.responseId }} </span>
+        </span>
+        <br />
+        <span>
+          Form submitted
+          <span id="end-page-timestamp"> {{ vm.timestamp }} </span>
+        </span>
       </p>
       <h2 id="end-page-title">{{ vm.title }}</h2>
       <div class="end-page-follow-up end-page-instructions">

src/public/modules/forms/base/components/end-page.client.component.js

@@ -11,6 +11,7 @@ angular.module('forms').component('endPageComponent', {
     authType: '@',
     isAdminPreview: '<',
     colorTheme: '@',
+    responseId: '@',
   },
   controller: ['SpcpSession', '$window', 'moment', endPageController],
   controllerAs: 'vm',

src/public/modules/forms/base/css/end-page.css

@@ -6,3 +6,11 @@
 #end-page-header #end-page-timestamp {
   font-weight: bold;
 }
+
+#end-page-header #end-page-responseid {
+  font-size: 12px;
+}
+
+#end-page-header #end-page-responseid #end-page-id {
+  text-transform: lowercase;
+}

src/public/modules/forms/base/directiveViews/submit-form.directive.view.html

@@ -91,6 +91,7 @@
       auth-type="{{ form.authType }}"
       is-admin-preview="false"
       color-theme="{{ form.startPage.colorTheme }}"
+      response-id="{{ responseId }}"
     >
     </end-page-component>
   </form>

src/public/modules/forms/base/directives/submit-form.directive.js

@@ -334,7 +334,8 @@ function submitFormDirective(
        * Returns a callback for form submission success, which updates UI
        * state and Google Analytics.
        */
-      const handleSubmitSuccess = () => {
+      const handleSubmitSuccess = (response) => {
+        scope.responseId = response.submissionId
         setFormState(FORM_STATES.SUBMITTED)
         GTag.submitFormSuccess(scope.form, startDate, Date.now())
         if (shouldTrackPersistentLoginUse()) {

src/public/modules/forms/services/submissions.client.factory.js

@@ -93,23 +93,24 @@ function SubmissionsFactory(
     xhr.send(fd)
     // On Response
     xhr.onreadystatechange = function () {
-      // 4 DONE  The operation is complete.
       const OPERATION_DONE = 4
       if (xhr.readyState === OPERATION_DONE) {
         // waterfall is successful
-        if (xhr.status === HttpStatus.OK) {
-          deferred.resolve('Submission has finished.')
-        } else {
-          let response = {}
-          try {
-            response = JSON.parse(xhr.responseText)
-            // eslint-disable-next-line no-empty
-          } catch (e) {}
+        let response = {}
+        try {
+          response = JSON.parse(xhr.responseText)
+          if (xhr.status === HttpStatus.OK) {
+            deferred.resolve({
+              message: 'Submission has finished.',
+              submissionId: response.submissionId,
+            })
+          } else {
+            deferred.reject(`${response.message}`)
+          }
+          // eslint-disable-next-line no-empty
+        } catch (e) {
           deferred.reject(
-            `${
-              response.message ||
-              "Please refresh and try again. If this doesn't work, try switching devices or networks."
-            }`,
+            "Please refresh and try again. If this doesn't work, try switching devices or networks.",
           )
         }
       }
@@ -133,8 +134,11 @@ function SubmissionsFactory(
         version: body.version,
       })
       .then(
-        function () {
-          deferred.resolve('Submission has finished.')
+        function (response) {
+          deferred.resolve({
+            message: 'Submission has finished.',
+            submissionId: response.submissionId,
+          })
         },
         function (error) {
           deferred.reject(