Merge pull request #972 from dpc-sdp/feature/R20-1666-form-submission…

…-event-data [R20-1666] add non-pii form data to submission events
dpc-sdp · Jan 8, 2024 · 4e512ca · 4e512ca
2 parents c880fc4 + 1c6cdd8
commit 4e512ca
Show file tree

Hide file tree

Showing 26 changed files with 135 additions and 36 deletions.
diff --git a/packages/nuxt-ripple-analytics/lib/index.ts b/packages/nuxt-ripple-analytics/lib/index.ts
@@ -554,6 +554,7 @@ export default {
         form_id: payload?.id,
         form_name: payload?.name,
         form_valid: true,
+        form_data: payload?.value,
         element_text: payload?.text,
         component: 'rpl-form',
         platform_event: 'submit'
@@ -567,6 +568,7 @@ export default {
         form_id: payload?.id,
         form_name: payload?.name,
         form_valid: false,
+        form_data: payload?.value,
         element_text: payload?.text,
         component: 'rpl-form',
         platform_event: 'submit'
@@ -579,6 +581,7 @@ export default {
         event: `form_${payload.action}`,
         form_id: payload?.id,
         form_name: payload?.name,
+        form_data: payload?.value,
         element_text: payload?.text,
         component: 'rpl-form',
         platform_event: 'submit'

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

diff --git a/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-address.ts b/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-address.ts
@@ -103,7 +103,8 @@ export const getAdvancedAddressMapping = (fieldKey, field, formId) => {
         { id: 'TAS', value: 'TAS', label: 'Tasmania' }
       ],
       validation: isFieldRequired('administrative_area') ? [['required']] : [],
-      value: defaultValues.administrative_area || ''
+      value: defaultValues.administrative_area || '',
+      pii: false
     },
     postal_code: {
       $formkit: 'RplFormText',

diff --git a/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts
@@ -160,6 +160,7 @@ const getFormSchemaFromMapping = async (
           help: field['#description'],
           checkboxLabel: field['#title'],
           value: field['#default_value'],
+          pii: false,
           ...getValidationAndConditionals(field)
         }
         break
@@ -175,6 +176,7 @@ const getFormSchemaFromMapping = async (
           help: field['#privacy_statement_content'],
           checkboxLabel: field['#title'],
           value: field['#default_value'],
+          pii: false,
           ...getValidationAndConditionals(field)
         }
         break
@@ -199,6 +201,7 @@ const getFormSchemaFromMapping = async (
             }
           ),
           value: field['#default_value'],
+          pii: false,
           ...getValidationAndConditionals(field)
         }
         break
@@ -221,6 +224,7 @@ const getFormSchemaFromMapping = async (
             }
           ),
           value: field['#default_value'],
+          pii: false,
           ...getValidationAndConditionals(field)
         }
         break
@@ -243,6 +247,7 @@ const getFormSchemaFromMapping = async (
             }
           ),
           value: field['#default_value'],
+          pii: false,
           ...getValidationAndConditionals(field)
         }
         break
@@ -268,6 +273,7 @@ const getFormSchemaFromMapping = async (
             }
           }),
           value: field['#default_value'],
+          pii: false,
           ...getValidationAndConditionals(field)
         }
         break

diff --git a/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue b/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { nextTick, provide, ref, watch, reactive, computed } from 'vue'
 import {
+  getNode,
   FormKitSchemaCondition,
   FormKitSchemaNode,
-  FormKitConfig
+  FormKitConfig,
+  FormKitNode
 } from '@formkit/core'
 import { getValidationMessages } from '@formkit/validation'
 import rplFormInputs from '../../plugin'
@@ -12,6 +14,7 @@ import { RplContent } from '@dpc-sdp/ripple-ui-core/vue'
 import { reset } from '@formkit/vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+import { sanitisePIIFields } from '../../lib/sanitisePII'
 
 interface Props {
   id: string
@@ -80,7 +83,7 @@ provide('submitCounter', submitCounter)
 const submitLabel =
   props.schema?.find((field) => field?.key === 'actions')?.label || 'Submit'
 
-const submitHandler = (form) => {
+const submitHandler = (form, node: FormKitNode) => {
   // Reset the error summary as it is not reactive
   cachedErrors.value = {}
   submitCounter.value = 0
@@ -92,13 +95,14 @@ const submitHandler = (form) => {
       id: props.id,
       name: props.title,
       action: 'submit',
-      text: submitLabel
+      text: submitLabel,
+      value: sanitisePIIFields(node)
     },
     { global: true }
   )
 }
 
-const submitInvalidHandler = async (node) => {
+const submitInvalidHandler = async (node: FormKitNode) => {
   submitCounter.value = submitCounter.value + 1
 
   const validations = getValidationMessages(node)
@@ -123,7 +127,8 @@ const submitInvalidHandler = async (node) => {
       id: props.id,
       action: 'submit',
       name: props.title,
-      text: submitLabel
+      text: submitLabel,
+      value: sanitisePIIFields(node)
     },
     { global: true }
   )
@@ -173,18 +178,19 @@ watch(
       }
 
       if (newStatus === 'success') {
-        reset(props.id)
-
         emitRplEvent(
           'submitted',
           {
             id: props.id,
             action: 'complete',
             name: props.title,
-            text: submitLabel
+            text: submitLabel,
+            value: sanitisePIIFields(getNode(props.id))
           },
           { global: true }
         )
+
+        reset(props.id)
       }
     }
   }

diff --git a/packages/ripple-ui-forms/src/components/RplFormDate/RplFormDate.vue b/packages/ripple-ui-forms/src/components/RplFormDate/RplFormDate.vue
@@ -11,6 +11,7 @@ import RplFormInput from '../RplFormInput/RplFormInput.vue'
 import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendlyEventEmitter.js'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+import { sanitisePIIField } from '../../lib/sanitisePII'
 
 type DatePart = 'day' | 'month' | 'year'
 interface InternalDate {
@@ -31,6 +32,7 @@ interface Props {
   onChange: (value: string | string[]) => void
   dateFormat: string
   ariaDescribedby?: string
+  pii?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -41,7 +43,8 @@ const props = withDefaults(defineProps<Props>(), {
   value: undefined,
   variant: 'default',
   dateFormat: 'yyyy-MM-dd',
-  ariaDescribedby: ''
+  ariaDescribedby: '',
+  pii: true
 })
 
 const emit = defineEmits<{
@@ -217,7 +220,8 @@ const handleUpdate = (event) => {
     {
       ...event,
       id: props.id,
-      label: props?.label
+      label: props?.label,
+      value: sanitisePIIField(props.pii, props?.value)
     },
     { global: true }
   )

diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
@@ -12,6 +12,7 @@ import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendly
 import MultiValueLabel from './MultiValueLabel.vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+import { sanitisePIIField } from '../../lib/sanitisePII'
 
 export interface RplFormDropdownProps {
   id: string
@@ -31,6 +32,7 @@ export interface RplFormDropdownProps {
     value: string
   }[]
   maxItemsDisplayed?: number
+  pii?: boolean
 }
 
 const props = withDefaults(defineProps<RplFormDropdownProps>(), {
@@ -44,7 +46,8 @@ const props = withDefaults(defineProps<RplFormDropdownProps>(), {
   maxItemsDisplayed: 6,
   required: false,
   invalid: false,
-  multiple: false
+  multiple: false,
+  pii: true
 })
 
 const emit = defineEmits<{
@@ -192,7 +195,7 @@ const handleSelectOption = (optionValue) => {
       action: 'update',
       id: props.id,
       label: props?.label,
-      value: Array.isArray(newValue) ? newValue.join(',') : newValue,
+      value: sanitisePIIField(props.pii, newValue),
       contextId: form?.id,
       contextName: form?.name
     },

diff --git a/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.vue b/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.vue
@@ -10,6 +10,7 @@ import { useDebounceFn } from '@vueuse/core'
 import { RplIcon } from '@dpc-sdp/ripple-ui-core/vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+import { sanitisePIIField } from '../../lib/sanitisePII'
 
 interface Props {
   id: string
@@ -31,6 +32,7 @@ interface Props {
   centeredText?: boolean
   globalEvents?: boolean
   throttle?: number
+  pii?: boolean
   onInput?: (payload: Event) => void
   onBlur?: (payload: Event) => void
 }
@@ -53,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   centeredText: false,
   globalEvents: true,
   throttle: 500,
+  pii: true,
   onInput: () => null,
   onBlur: () => null
 })
@@ -87,7 +90,8 @@ const handleChange = useDebounceFn(() => {
       type: props.type,
       label: props?.label,
       contextId: form?.id,
-      contextName: form?.name
+      contextName: form?.name,
+      value: sanitisePIIField(props.pii, props?.value)
     },
     { global: props.globalEvents }
   )

diff --git a/packages/ripple-ui-forms/src/components/RplFormOptionButtons/RplFormOptionButtons.vue b/packages/ripple-ui-forms/src/components/RplFormOptionButtons/RplFormOptionButtons.vue
@@ -3,6 +3,7 @@ import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendly
 import { inject } from 'vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+import { sanitisePIIField } from '../../lib/sanitisePII'
 
 export interface Props {
   id: string
@@ -17,6 +18,7 @@ export interface Props {
     label: string
     disabled?: boolean
   }[]
+  pii?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   layout: 'block',
   perfectSquares: false,
+  pii: true,
   onChange: () => undefined,
   options: () => []
 })
@@ -46,7 +49,7 @@ const handleChange = (selectedId: string) => {
       action: 'update',
       id: props.id,
       label: props?.label,
-      value: selectedId,
+      value: sanitisePIIField(props.pii, selectedId),
       contextId: form?.id,
       contextName: form?.name
     },

diff --git a/packages/ripple-ui-forms/src/components/RplFormOptions/RplFormCheckboxGroup.vue b/packages/ripple-ui-forms/src/components/RplFormOptions/RplFormCheckboxGroup.vue
@@ -4,13 +4,15 @@ import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendly
 import { inject } from 'vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+import { sanitisePIIField } from '../../lib/sanitisePII'
 
 interface Props {
   id: string
   value: string[]
   label?: string
   disabled?: boolean
   variant?: 'default' | 'reverse'
+  pii?: boolean
   onChange: (value: string[]) => void
   options: {
     id: string
@@ -24,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   disabled: false,
   variant: 'default',
+  pii: true,
   onChange: () => undefined,
   options: () => []
 })
@@ -60,7 +63,7 @@ const handleToggle = (selectedValue: string) => {
       action: 'update',
       id: props.id,
       label: props?.label,
-      value: Array.isArray(newValue) ? newValue.join(',') : newValue,
+      value: sanitisePIIField(props.pii, newValue),
       contextId: form?.id,
       contextName: form?.name
     },

diff --git a/packages/ripple-ui-forms/src/components/RplFormOptions/RplFormRadioGroup.vue b/packages/ripple-ui-forms/src/components/RplFormOptions/RplFormRadioGroup.vue
@@ -4,6 +4,7 @@ import RplFormOption from './RplFormOption.vue'
 import { inject } from 'vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+import { sanitisePIIField } from '../../lib/sanitisePII'
 
 export interface RplFormRadioProps {
   id: string
@@ -13,6 +14,7 @@ export interface RplFormRadioProps {
   disabled?: boolean
   variant?: 'default' | 'reverse'
   layout?: 'block' | 'inline'
+  pii?: boolean
   onChange: (value: string) => void
   options: {
     id: string
@@ -27,6 +29,7 @@ const props = withDefaults(defineProps<RplFormRadioProps>(), {
   disabled: false,
   variant: 'default',
   layout: 'block',
+  pii: true,
   onChange: () => undefined,
   options: () => []
 })
@@ -48,7 +51,7 @@ const handleChange = (selectedValue: string) => {
       action: 'update',
       id: props.id,
       label: props?.label,
-      value: selectedValue,
+      value: sanitisePIIField(props.pii, selectedValue),
       contextId: form?.id,
       contextName: form?.name
     },