[R20-1678] add clear search event

packages/nuxt-ripple-analytics/lib/index.ts

@@ -718,7 +718,7 @@ export default {
         name: payload?.name,
         type: payload?.type,
         form_id: payload?.contextId,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'search'
       })
     }
@@ -734,7 +734,7 @@ export default {
         index: payload?.index,
         filters: payload?.options,
         count: payload?.value,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'search'
       })
     }
@@ -751,7 +751,7 @@ export default {
         index: payload?.index,
         count: payload?.value,
         filters: payload?.options,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'paginate'
       })
     }
@@ -766,10 +766,27 @@ export default {
         name: payload?.name,
         form_id: payload?.contextId,
         filters: payload?.options,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'toggleFilters'
       })
     }
+  },
+  'tide-search/reset': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `${payload.action}_filters`,
+        element_id: payload?.id,
+        element_text: payload?.text,
+        label: payload?.label,
+        name: payload?.name,
+        count: payload?.value,
+        type: payload?.type,
+        form_id: payload?.contextId,
+        filters: payload?.options,
+        component: `tide-${payload.section || 'search'}`,
+        platform_event: 'clearQuery'
+      })
+    }
   }
 }
 

packages/ripple-tide-search/components/TideSearchFilters.vue

@@ -33,12 +33,15 @@
       :label="submitLabel"
       :resetLabel="resetLabel"
       :displayResetButton="!!resetLabel"
+      :globalEvents="false"
       @reset="handleFilterReset"
     />
   </RplForm>
 </template>
 
 <script setup lang="ts">
+import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+
 type CollectionFilter = {
   component: string
   props: Record<string, any>
@@ -54,16 +57,16 @@ interface Props {
 
 const emit = defineEmits<{
   (e: 'submit', payload: Record<string, any>): void
-  (e: 'reset'): void
+  (e: 'reset', payload: rplEventPayload): void
 }>()
 
 const props = withDefaults(defineProps<Props>(), {
   submitLabel: 'Apply search filters',
   resetLabel: 'Clear search filters'
 })
 
-const handleFilterReset = () => {
-  emit('reset')
+const handleFilterReset = (event: rplEventPayload) => {
+  emit('reset', event)
 }
 
 const handleFilterSubmit = (formValues) => {

packages/ripple-tide-search/components/TideSearchListingPage.vue

@@ -88,6 +88,7 @@ const emit = defineEmits<{
     e: 'toggleFilters',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
+  (e: 'reset', payload: rplEventPayload & { action: 'clear_search' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('tide-search', emit)
@@ -132,7 +133,8 @@ const baseEvent = () => ({
   index: page.value,
   label: searchTerm.value,
   value: totalResults.value,
-  options: getActiveFilterURL(filterForm.value)
+  options: getActiveFilterURL(filterForm.value),
+  section: 'search-listing'
 })
 
 // Updates filter options with aggregation value
@@ -208,7 +210,17 @@ const handleFilterSubmit = (event) => {
   cachedSubmitEvent.value = {}
 }
 
-const handleFilterReset = () => {
+const handleFilterReset = (event: rplEventPayload) => {
+  emitRplEvent(
+    'reset',
+    {
+      ...event,
+      ...baseEvent(),
+      action: 'clear_search'
+    },
+    { global: true }
+  )
+
   searchTerm.value = ''
   filterForm.value = {}
   submitSearch()

packages/ripple-tide-search/components/TideSearchPage.vue

@@ -68,6 +68,7 @@ const emit = defineEmits<{
     e: 'toggleFilters',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
+  (e: 'reset', payload: rplEventPayload & { action: 'clear_search' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('tide-search', emit)
@@ -108,7 +109,8 @@ const baseEvent = () => ({
   index: searchState.value.current,
   label: searchState.value.searchTerm,
   value: searchState.value.totalResults,
-  options: getActiveFilterURL(filterFormValues.value)
+  options: getActiveFilterURL(filterFormValues.value),
+  section: 'search'
 })
 
 const emitSearchEvent = (event) => {
@@ -136,7 +138,17 @@ const handleFilterSubmit = (event) => {
   emitSearchEvent({ ...event, text: submitFiltersLabel, type: 'button' })
 }
 
-const handleFilterReset = () => {
+const handleFilterReset = (event: rplEventPayload) => {
+  emitRplEvent(
+    'reset',
+    {
+      ...event,
+      ...baseEvent(),
+      action: 'clear_search'
+    },
+    { global: true }
+  )
+
   updateSearchTerm('')
   filterFormValues.value = {}
   doSearch()

packages/ripple-tide-search/components/global/TideCustomCollection.vue

@@ -75,6 +75,7 @@ const emit = defineEmits<{
     e: 'toggleFilters',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
+  (e: 'reset', payload: rplEventPayload & { action: 'clear_search' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('tide-search', emit)
@@ -141,7 +142,8 @@ const baseEvent = () => ({
   index: page.value,
   label: searchTerm.value,
   value: totalResults.value,
-  options: getActiveFilterURL(filterForm.value)
+  options: getActiveFilterURL(filterForm.value),
+  section: 'custom-collection'
 })
 
 // Updates filter options with aggregation value
@@ -184,7 +186,17 @@ const handleFilterSubmit = (event) => {
   cachedSubmitEvent.value = {}
 }
 
-const handleFilterReset = () => {
+const handleFilterReset = (event: rplEventPayload) => {
+  emitRplEvent(
+    'reset',
+    {
+      ...event,
+      ...baseEvent(),
+      action: 'clear_search'
+    },
+    { global: true }
+  )
+
   searchTerm.value = ''
   filterForm.value = {}
   submitSearch()

packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue

@@ -15,6 +15,7 @@ interface Props {
   prefixIcon?: string
   suffixIcon?: string
   displayResetButton?: boolean
+  globalEvents?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,7 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   displayResetButton: false,
   prefixIcon: undefined,
   suffixIcon: undefined,
-  disabled: false
+  disabled: false,
+  globalEvents: true
 })
 
 const emit = defineEmits<{
@@ -59,7 +61,7 @@ const handleReset = () => {
       contextId: form?.id,
       contextName: form?.name
     },
-    { global: true }
+    { global: props.globalEvents }
   )
 }
 </script>