Merge pull request #970 from dpc-sdp/feature/R20-1665-form-complete-e…

…vent [R20-1665] update form submission events
dpc-sdp · Jan 8, 2024 · 758f29d · 758f29d
2 parents 08ccc83 + b2830e2
commit 758f29d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 11 deletions.
diff --git a/packages/nuxt-ripple-analytics/lib/index.ts b/packages/nuxt-ripple-analytics/lib/index.ts
@@ -547,6 +547,32 @@ export default {
     }
   },
   // UI Forms components
+  'rpl-form/submit': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `form_${payload.action}`,
+        form_id: payload?.id,
+        form_name: payload?.name,
+        form_valid: true,
+        element_text: payload?.text,
+        component: 'rpl-form',
+        platform_event: 'submit'
+      })
+    }
+  },
+  'rpl-form/invalid': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `form_${payload.action}`,
+        form_id: payload?.id,
+        form_name: payload?.name,
+        form_valid: false,
+        element_text: payload?.text,
+        component: 'rpl-form',
+        platform_event: 'submit'
+      })
+    }
+  },
   'rpl-form/submitted': () => {
     return (payload: any) => {
       trackEvent({

diff --git a/packages/nuxt-ripple-analytics/lib/tracker.ts b/packages/nuxt-ripple-analytics/lib/tracker.ts
@@ -16,6 +16,7 @@ export interface IRplAnalyticsEventPayload {
   file_size?: string
   form_id?: string
   form_name?: string
+  form_valid?: boolean
   field_id?: string
   filters?: string
   type?: string

diff --git a/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue b/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue
@@ -55,8 +55,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'submit', data: any): void
-  (e: 'submitted', payload: rplEventPayload & { action: 'submit' }): void
+  (e: 'submit', payload: rplEventPayload & { action: 'submit' }): void
+  (e: 'invalid', payload: rplEventPayload & { action: 'submit' }): void
+  (e: 'submitted', payload: rplEventPayload & { action: 'complete' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('rpl-form', emit)
@@ -76,16 +77,25 @@ provide('isFormSubmitting', isFormSubmitting)
 // submitCounter is watched by some components to efficiently know when to update
 provide('submitCounter', submitCounter)
 
+const submitLabel =
+  props.schema?.find((field) => field?.key === 'actions')?.label || 'Submit'
+
 const submitHandler = (form) => {
   // Reset the error summary as it is not reactive
   cachedErrors.value = {}
   submitCounter.value = 0
 
-  emitRplEvent('submit', {
-    id: props.id,
-    name: props.title,
-    data: form
-  })
+  emitRplEvent(
+    'submit',
+    {
+      data: form,
+      id: props.id,
+      name: props.title,
+      action: 'submit',
+      text: submitLabel
+    },
+    { global: true }
+  )
 }
 
 const submitInvalidHandler = async (node) => {
@@ -107,6 +117,17 @@ const submitInvalidHandler = async (node) => {
 
   cachedErrors.value = cachedErrorsMap
 
+  emitRplEvent(
+    'invalid',
+    {
+      id: props.id,
+      action: 'submit',
+      name: props.title,
+      text: submitLabel
+    },
+    { global: true }
+  )
+
   await nextTick()
   if (errorSummaryRef.value) {
     errorSummaryRef.value.focus()
@@ -158,11 +179,9 @@ watch(
           'submitted',
           {
             id: props.id,
-            action: 'submit',
+            action: 'complete',
             name: props.title,
-            text:
-              props.schema?.find((field) => field?.key === 'actions')?.label ||
-              'Submit'
+            text: submitLabel
           },
           { global: true }
         )