Merge pull request #1336 from dpc-sdp/feature/SD-256-form-abandon-event

[SD-256] - Added form abandon event
dpc-sdp · Sep 24, 2024 · 1d9fc1d · 1d9fc1d
2 parents 70628af + e749444
commit 1d9fc1d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 3 deletions.
diff --git a/packages/nuxt-ripple-analytics/lib/index.ts b/packages/nuxt-ripple-analytics/lib/index.ts
@@ -585,6 +585,18 @@ export default {
       })
     }
   },
+  'rpl-form/abandon': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `form_abandon`,
+        form_id: payload?.id,
+        form_name: payload?.name,
+        component: 'rpl-form',
+        platform_event: 'abandon',
+        form_data: payload?.value
+      })
+    }
+  },
   'rpl-form/submit': () => {
     return (payload: any) => {
       trackEvent({

diff --git a/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue b/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { nextTick, provide, ref, watch, reactive, computed } from 'vue'
+import {
+  nextTick,
+  provide,
+  ref,
+  watch,
+  reactive,
+  computed,
+  onBeforeUnmount
+} from 'vue'
 import {
   getNode,
   FormKitSchemaCondition,
@@ -81,10 +89,34 @@ const submitCounter = ref(0)
 // Keep track of whether user has changed something in the form
 const formStarted = ref<boolean>(false)
 
+const tryAbandonForm = () => {
+  if (formStarted.value && props.submissionState.status !== 'success') {
+    emitRplEvent(
+      'abandon',
+      {
+        id: props.id,
+        name: props.title,
+        value: sanitisePIIFields(getNode(props.id))
+      },
+      { global: true }
+    )
+  }
+
+  formStarted.value = false
+}
+
+const onFormReset = () => {
+  cachedErrors.value = {}
+  submitCounter.value = 0
+
+  tryAbandonForm()
+}
+
 provide('form', { id: props.id, name: props.title })
 provide('isFormSubmitting', isFormSubmitting)
 // submitCounter is watched by some components to efficiently know when to update
 provide('submitCounter', submitCounter)
+provide('onFormReset', onFormReset)
 
 const submitLabel =
   props.schema?.find((field) => field?.key === 'actions')?.label || 'Submit'
@@ -196,13 +228,15 @@ watch(
           { global: true }
         )
 
+        formStarted.value = false
+
         reset(props.id)
       }
     }
   }
 )
 
-const handleChange = () => {
+const handleInput = () => {
   // 'Form start' analytics event, fires on first change of the form
   if (!formStarted.value) {
     formStarted.value = true
@@ -218,6 +252,10 @@ const handleChange = () => {
   }
 }
 
+onBeforeUnmount(() => {
+  tryAbandonForm()
+})
+
 const data = reactive({
   isFilled: (val) =>
     typeof val === 'number'
@@ -276,7 +314,7 @@ const plugins = computed(
     novalidate
     @submit-invalid="submitInvalidHandler"
     @submit="submitHandler"
-    @input="handleChange"
+    @input="handleInput"
   >
     <fieldset
       class="rpl-form__submit-guard"

diff --git a/packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue b/packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue
@@ -48,8 +48,13 @@ const iconPosition = computed(() => {
 
 const form: object = inject('form')
 const isFormSubmitting: any = inject('isFormSubmitting')
+const onFormReset = inject('onFormReset')
 
 const handleReset = () => {
+  if (typeof onFormReset === 'function') {
+    onFormReset()
+  }
+
   reset(form.id)
 
   emitRplEvent(