From 34f6945ece71607c07b75cae027742f4be8cf748 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Tue, 22 Oct 2024 09:06:09 +1100
Subject: [PATCH] feat: proof of context for analytics context

---
 packages/nuxt-ripple-analytics/lib/index.ts   | 198 ++++++++++++------
 .../nuxt-ripple/components/TestContext.vue    |  27 +++
 .../components/TestContextControl.vue         |  27 +++
 .../components/TestContextViewer.vue          |  26 +++
 .../nuxt-ripple/components/TestFireEvent.vue  |  34 +++
 .../nuxt-ripple/components/TideBaseLayout.vue |  38 ++++
 .../global/TideLandingPage/WebForm.vue        |   5 +
 .../global/TideCustomCollection.vue           |   9 +
 .../src/composables/useEventContext.ts        |  48 +++++
 .../src/composables/useRippleEvent.ts         |   7 +-
 packages/ripple-ui-core/src/index.ts          |   1 +
 11 files changed, 353 insertions(+), 67 deletions(-)
 create mode 100644 packages/nuxt-ripple/components/TestContext.vue
 create mode 100644 packages/nuxt-ripple/components/TestContextControl.vue
 create mode 100644 packages/nuxt-ripple/components/TestContextViewer.vue
 create mode 100644 packages/nuxt-ripple/components/TestFireEvent.vue
 create mode 100644 packages/ripple-ui-core/src/composables/useEventContext.ts

diff --git a/packages/nuxt-ripple-analytics/lib/index.ts b/packages/nuxt-ripple-analytics/lib/index.ts
index 05faed30d9..927d05fd5c 100644
--- a/packages/nuxt-ripple-analytics/lib/index.ts
+++ b/packages/nuxt-ripple-analytics/lib/index.ts
@@ -10,7 +10,8 @@ export default {
         element_text: payload?.text,
         name: payload?.name,
         component: 'rpl-accordion',
-        platform_event: 'toggleAll'
+        platform_event: 'toggleAll',
+        ...payload
       })
     }
   },
@@ -22,7 +23,8 @@ export default {
         element_text: payload?.text,
         name: payload?.name,
         component: 'rpl-accordion',
-        platform_event: 'toggleItem'
+        platform_event: 'toggleItem',
+        ...payload
       })
     }
   },
@@ -35,7 +37,8 @@ export default {
         label: payload?.label,
         name: payload?.name,
         component: 'rpl-alert',
-        platform_event: 'dismiss'
+        platform_event: 'dismiss',
+        ...payload
       })
     }
   },
@@ -49,7 +52,8 @@ export default {
         index: payload?.index,
         name: payload?.name,
         component: 'rpl-breadcrumbs',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -65,7 +69,8 @@ export default {
         name: payload?.name,
         component: 'rpl-campaign-banner',
         component_options: payload?.options,
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -81,7 +86,8 @@ export default {
         link_url: payload?.value,
         type: payload?.type,
         component: 'rpl-card',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -94,7 +100,8 @@ export default {
         name: payload?.name,
         index: payload?.index,
         component: 'rpl-card-carousel',
-        platform_event: 'paginate'
+        platform_event: 'paginate',
+        ...payload
       })
     }
   },
@@ -106,7 +113,8 @@ export default {
         name: payload?.name,
         index: payload?.index,
         component: 'rpl-card-carousel',
-        platform_event: 'swipe'
+        platform_event: 'swipe',
+        ...payload
       })
     }
   },
@@ -120,7 +128,8 @@ export default {
         index: payload?.index,
         link_url: payload?.value,
         component: 'rpl-chip',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -137,7 +146,8 @@ export default {
         link_url: payload?.value,
         link_domain: host,
         component: 'rpl-contact-us',
-        platform_event: 'itemClick'
+        platform_event: 'itemClick',
+        ...payload
       })
     }
   },
@@ -151,7 +161,8 @@ export default {
         name: payload?.name,
         index: payload?.index,
         component: 'rpl-data-table',
-        platform_event: 'expandRow'
+        platform_event: 'expandRow',
+        ...payload
       })
     }
   },
@@ -164,7 +175,8 @@ export default {
         link_url: payload?.value,
         name: payload?.name,
         component: 'rpl-document',
-        platform_event: 'download'
+        platform_event: 'download',
+        ...payload
       })
     }
   },
@@ -177,7 +189,8 @@ export default {
         link_url: payload?.value,
         name: payload?.name,
         component: 'rpl-document',
-        platform_event: 'print'
+        platform_event: 'print',
+        ...payload
       })
     }
   },
@@ -197,7 +210,8 @@ export default {
         link_domain: host,
         name: payload?.name,
         component: 'rpl-file',
-        platform_event: 'download'
+        platform_event: 'download',
+        ...payload
       })
     }
   },
@@ -210,7 +224,8 @@ export default {
         index: payload?.index,
         name: payload?.name,
         component: 'rpl-footer',
-        platform_event: 'expand'
+        platform_event: 'expand',
+        ...payload
       })
     }
   },
@@ -225,7 +240,8 @@ export default {
         link_url: payload?.value,
         name: payload?.name,
         component: 'rpl-footer',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -243,7 +259,8 @@ export default {
         name: payload?.name,
         component: 'rpl-header',
         component_options: payload?.options,
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -257,7 +274,8 @@ export default {
         link_url: payload?.value,
         name: payload?.name,
         component: 'rpl-in-page-navigation',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -271,7 +289,8 @@ export default {
         type: payload?.type,
         name: payload?.name,
         component: 'rpl-media-embed',
-        platform_event: 'viewTranscript'
+        platform_event: 'viewTranscript',
+        ...payload
       })
     }
   },
@@ -285,7 +304,8 @@ export default {
         type: payload?.type,
         name: payload?.name,
         component: 'rpl-media-embed',
-        platform_event: 'viewFullscreen'
+        platform_event: 'viewFullscreen',
+        ...payload
       })
     }
   },
@@ -299,7 +319,8 @@ export default {
         type: payload?.type,
         name: payload?.name,
         component: 'rpl-media-embed',
-        platform_event: 'viewData'
+        platform_event: 'viewData',
+        ...payload
       })
     }
   },
@@ -321,7 +342,8 @@ export default {
         type: payload?.type,
         name: payload?.name,
         component: 'rpl-media-embed',
-        platform_event: 'downloadImage'
+        platform_event: 'downloadImage',
+        ...payload
       })
     }
   },
@@ -335,7 +357,8 @@ export default {
         label: payload?.label,
         name: payload?.name,
         component: 'rpl-media-gallery',
-        platform_event: 'paginate'
+        platform_event: 'paginate',
+        ...payload
       })
     }
   },
@@ -348,7 +371,8 @@ export default {
         label: payload?.label,
         name: payload?.name,
         component: 'rpl-media-gallery',
-        platform_event: 'swipe'
+        platform_event: 'swipe',
+        ...payload
       })
     }
   },
@@ -363,7 +387,8 @@ export default {
         value: payload?.value,
         index: payload?.index,
         component: 'rpl-media-gallery',
-        platform_event: 'viewFullscreen'
+        platform_event: 'viewFullscreen',
+        ...payload
       })
     }
   },
@@ -378,7 +403,8 @@ export default {
         count: payload?.count,
         index: payload?.index,
         component: 'rpl-page-links',
-        platform_event: 'paginate'
+        platform_event: 'paginate',
+        ...payload
       })
     }
   },
@@ -391,7 +417,8 @@ export default {
         link_url: payload?.value,
         name: payload?.name,
         component: 'rpl-primary-nav',
-        platform_event: 'quickExit'
+        platform_event: 'quickExit',
+        ...payload
       })
     }
   },
@@ -403,7 +430,8 @@ export default {
         element_text: payload?.text,
         name: payload?.name,
         component: 'rpl-primary-nav',
-        platform_event: 'toggleMenu'
+        platform_event: 'toggleMenu',
+        ...payload
       })
     }
   },
@@ -416,7 +444,8 @@ export default {
         index: payload?.index,
         name: payload?.name,
         component: 'rpl-primary-nav',
-        platform_event: 'toggleMenuItem'
+        platform_event: 'toggleMenuItem',
+        ...payload
       })
     }
   },
@@ -429,7 +458,8 @@ export default {
         index: payload?.index,
         name: payload?.name,
         component: 'rpl-primary-nav',
-        platform_event: 'clickBackButton'
+        platform_event: 'clickBackButton',
+        ...payload
       })
     }
   },
@@ -443,7 +473,8 @@ export default {
         link_url: payload?.value,
         name: payload?.name,
         component: 'rpl-primary-nav',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -454,7 +485,8 @@ export default {
         element_id: payload?.id,
         name: payload?.name,
         component: 'rpl-primary-nav',
-        platform_event: 'toggleSearch'
+        platform_event: 'toggleSearch',
+        ...payload
       })
     }
   },
@@ -468,7 +500,8 @@ export default {
         name: payload?.name,
         link_url: payload?.value,
         component: 'rpl-related-links',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -482,7 +515,8 @@ export default {
         name: payload?.name,
         link_url: payload?.value,
         component: 'rpl-search-result',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -496,7 +530,8 @@ export default {
         type: payload?.type,
         name: payload?.name,
         component: 'rpl-search-bar',
-        platform_event: 'search'
+        platform_event: 'search',
+        ...payload
       })
     }
   },
@@ -509,7 +544,8 @@ export default {
         label: payload?.label,
         name: payload?.text?.toLowerCase(),
         component: 'rpl-social-share',
-        platform_event: 'openShareWindow'
+        platform_event: 'openShareWindow',
+        ...payload
       })
     }
   },
@@ -521,7 +557,9 @@ export default {
         element_text: payload?.text,
         name: payload?.name,
         component: 'rpl-tabs',
-        platform_event: 'toggleTab'
+        platform_event: 'toggleTab',
+        ...payload,
+        ...payload
       })
     }
   },
@@ -534,7 +572,8 @@ export default {
         name: payload?.name,
         link_url: payload?.value,
         component: 'rpl-timeline',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -546,7 +585,8 @@ export default {
         element_text: payload?.text,
         name: payload?.name,
         component: 'rpl-vertical-nav',
-        platform_event: 'toggleMenuItem'
+        platform_event: 'toggleMenuItem',
+        ...payload
       })
     }
   },
@@ -560,7 +600,8 @@ export default {
         name: payload?.name,
         index: payload?.index,
         component: 'rpl-vertical-nav',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -571,7 +612,8 @@ export default {
         element_text: payload?.text,
         value: payload?.value,
         component: 'rpl-layout-back-to-top',
-        platform_event: 'navigate'
+        platform_event: 'navigate',
+        ...payload
       })
     }
   },
@@ -583,7 +625,8 @@ export default {
         form_id: payload?.id,
         form_name: payload?.name,
         component: 'rpl-form',
-        platform_event: 'start'
+        platform_event: 'start',
+        ...payload
       })
     }
   },
@@ -595,7 +638,8 @@ export default {
         form_name: payload?.name,
         component: 'rpl-form',
         platform_event: 'abandon',
-        form_data: payload?.value
+        form_data: payload?.value,
+        ...payload
       })
     }
   },
@@ -609,7 +653,8 @@ export default {
         form_data: payload?.value,
         element_text: payload?.text,
         component: 'rpl-form',
-        platform_event: 'submit'
+        platform_event: 'submit',
+        ...payload
       })
     }
   },
@@ -623,7 +668,8 @@ export default {
         form_data: payload?.value,
         element_text: payload?.text,
         component: 'rpl-form',
-        platform_event: 'submit'
+        platform_event: 'submit',
+        ...payload
       })
     }
   },
@@ -636,7 +682,8 @@ export default {
         form_data: payload?.value,
         element_text: payload?.text,
         component: 'rpl-form',
-        platform_event: 'submit'
+        platform_event: 'submit',
+        ...payload
       })
     }
   },
@@ -648,7 +695,8 @@ export default {
         form_name: payload?.contextName,
         element_text: payload?.text,
         component: 'rpl-form-actions',
-        platform_event: 'resetForm'
+        platform_event: 'resetForm',
+        ...payload
       })
     }
   },
@@ -663,7 +711,8 @@ export default {
         value: payload?.value,
         type: 'date',
         component: 'rpl-form-date',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -678,7 +727,8 @@ export default {
         value: payload?.value,
         type: 'date-range',
         component: 'rpl-form-date-range',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -693,7 +743,8 @@ export default {
         value: payload?.value,
         type: 'select',
         component: 'rpl-form-dropdown',
-        platform_event: 'toggleOpen'
+        platform_event: 'toggleOpen',
+        ...payload
       })
     }
   },
@@ -708,7 +759,8 @@ export default {
         value: payload?.value,
         type: 'select',
         component: 'rpl-form-dropdown',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -723,7 +775,8 @@ export default {
         type: payload?.type,
         value: payload?.value,
         component: 'rpl-form-input',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -738,7 +791,8 @@ export default {
         type: payload?.type,
         value: payload?.value,
         component: 'rpl-form-number',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -753,7 +807,8 @@ export default {
         type: payload?.type,
         value: payload?.value,
         component: 'rpl-form-option',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -768,7 +823,8 @@ export default {
         value: payload?.value,
         type: 'radio',
         component: 'rpl-form-option-buttons',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -783,7 +839,8 @@ export default {
         value: payload?.value,
         type: 'checkbox',
         component: 'rpl-form-checkbox-group',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -798,7 +855,8 @@ export default {
         value: payload?.value,
         type: 'radio',
         component: 'rpl-form-radio-group',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -813,7 +871,8 @@ export default {
         value: payload?.value,
         type: 'textarea',
         component: 'rpl-form-textarea',
-        platform_event: 'update'
+        platform_event: 'update',
+        ...payload
       })
     }
   },
@@ -830,7 +889,8 @@ export default {
         type: payload?.type,
         form_id: payload?.contextId,
         component: `tide-${payload.section || 'search'}`,
-        platform_event: 'search'
+        platform_event: 'search',
+        ...payload
       })
     }
   },
@@ -846,7 +906,8 @@ export default {
         filters: payload?.options,
         count: payload?.value,
         component: `tide-${payload.section || 'search'}`,
-        platform_event: 'search'
+        platform_event: 'search',
+        ...payload
       })
     }
   },
@@ -863,7 +924,8 @@ export default {
         count: payload?.value,
         filters: payload?.options,
         component: `tide-${payload.section || 'search'}`,
-        platform_event: 'paginate'
+        platform_event: 'paginate',
+        ...payload
       })
     }
   },
@@ -878,7 +940,8 @@ export default {
         form_id: payload?.contextId,
         filters: payload?.options,
         component: `tide-${payload.section || 'search'}`,
-        platform_event: 'toggleFilters'
+        platform_event: 'toggleFilters',
+        ...payload
       })
     }
   },
@@ -895,7 +958,16 @@ export default {
         form_id: payload?.contextId,
         filters: payload?.options,
         component: `tide-${payload.section || 'search'}`,
-        platform_event: 'clearQuery'
+        platform_event: 'clearQuery',
+        ...payload
+      })
+    }
+  },
+  'testing/testFire': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `testfire`,
+        ...(payload || {}),
       })
     }
   }
diff --git a/packages/nuxt-ripple/components/TestContext.vue b/packages/nuxt-ripple/components/TestContext.vue
new file mode 100644
index 0000000000..80d93a5f8a
--- /dev/null
+++ b/packages/nuxt-ripple/components/TestContext.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
+interface ITestContextProps {
+  context: any
+}
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { context } = useEventContext(props.context)
+</script>
+
+<template>
+  <div class="testing123">
+    {{ context }}
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.testing123 {
+  padding: 20px;
+  margin: 10px 0;
+  border: 1px solid;
+  background-color: rgba(0,0,0,0.05);
+}
+</style>
diff --git a/packages/nuxt-ripple/components/TestContextControl.vue b/packages/nuxt-ripple/components/TestContextControl.vue
new file mode 100644
index 0000000000..d98402fbd0
--- /dev/null
+++ b/packages/nuxt-ripple/components/TestContextControl.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
+interface ITestContextProps {
+  objKey: any
+  on: any
+  off: any
+}
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { context, updateContext } = useEventContext()
+</script>
+
+<template>
+  <div>
+    Change <b>{{ objKey }}</b>
+    <button class="rpl-button" @click="updateContext(objKey, on)">
+      {{ on }}
+    </button>
+    <button class="rpl-button" @click="updateContext(objKey, off)">
+      {{ off }}
+    </button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/packages/nuxt-ripple/components/TestContextViewer.vue b/packages/nuxt-ripple/components/TestContextViewer.vue
new file mode 100644
index 0000000000..754d17def2
--- /dev/null
+++ b/packages/nuxt-ripple/components/TestContextViewer.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
+interface ITestContextProps {
+}
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { context } = useEventContext()
+</script>
+
+<template>
+  <div class="testing123">
+    {{ context }}
+  </div>
+</template>
+
+<style scoped>
+.testing123 {
+  padding: 20px;
+  margin: 10px 0;
+  border: 1px solid;
+  background-color: rgba(0,0,0,0.05);
+  font-size: 16px;
+}
+</style>
diff --git a/packages/nuxt-ripple/components/TestFireEvent.vue b/packages/nuxt-ripple/components/TestFireEvent.vue
new file mode 100644
index 0000000000..bd4c46c1c6
--- /dev/null
+++ b/packages/nuxt-ripple/components/TestFireEvent.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+interface ITestContextProps {
+  name: any
+}
+
+const emit = defineEmits<{}>()
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { emitRplEvent } = useRippleEvent('testing', emit)
+
+const fire = () => {
+  emitRplEvent(
+    'testFire',
+    {
+      action: 'search'
+    },
+    { global: true }
+  )
+
+  nextTick()
+}
+</script>
+
+<template>
+  <div>
+    <button class="rpl-button" @click="fire">
+      Fire "testing/testFire" event
+    </button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
index 398959f507..34d2fc59b9 100644
--- a/packages/nuxt-ripple/components/TideBaseLayout.vue
+++ b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -49,6 +49,44 @@
       </slot>
     </template>
     <template #body="{ hasSidebar }">
+      <div class="rpl-type-p">
+        <TestContext :context="{ wow: 'cool' }">
+          <TestFireEvent name="testFire" />
+
+          <TestContextControl objKey="wow" on="apple" off="orange" />
+          <TestContext :context="{ ooh: 'amazing' }">
+            <TestContext :context="{ ooh: 'something' }">
+              <TestContextControl objKey="ooh" on="cat" off="dog" />
+              <TestContextControl objKey="wow" on="nested" off="blah" />
+              <TestContextControl objKey="new" on="123" off="456" />
+              <TestFireEvent name="testFire" />
+            </TestContext>
+          </TestContext>
+          <TestContext :context="{ ooh: 'blah' }"
+            ><TestContext :context="{ ahh: 'neat' }"><TestFireEvent name="testFire" /></TestContext
+
+
+          ><TestContextControl objKey="ooh" on="dolphin" off="whale" /></TestContext>
+        </TestContext>
+        <TestContext :context="{ wow: 'cool' }">
+          <TestFireEvent name="testFire" />
+
+          <TestContextControl objKey="wow" on="apple" off="orange" />
+          <TestContext :context="{ ooh: 'amazing' }">
+            <TestContext :context="{ ooh: 'something' }">
+              <TestContextControl objKey="ooh" on="cat" off="dog" />
+              <TestContextControl objKey="wow" on="nested" off="blah" />
+              <TestContextControl objKey="new" on="123" off="456" />
+              <TestFireEvent name="testFire" />
+            </TestContext>
+          </TestContext>
+          <TestContext :context="{ ooh: 'blah' }"
+            ><TestContext :context="{ ahh: 'neat' }"><TestFireEvent name="testFire" /></TestContext
+
+
+          ><TestContextControl objKey="ooh" on="dolphin" off="whale" /></TestContext>
+        </TestContext>
+      </div>
       <slot name="body" :hasSidebar="hasSidebar"></slot>
       <TideTopicTags
         v-if="!featureFlags?.disableTopicTags && topicTags.length"
diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage/WebForm.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage/WebForm.vue
index 54bac61b8b..13bacef086 100644
--- a/packages/ripple-tide-landing-page/components/global/TideLandingPage/WebForm.vue
+++ b/packages/ripple-tide-landing-page/components/global/TideLandingPage/WebForm.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
 import { FormKitSchemaNode } from '@formkit/core'
 import { computed, nextTick, ref, watch } from 'vue'
 import type { MappedCaptchaConfig } from '@dpc-sdp/ripple-tide-webform/types'
@@ -87,9 +89,12 @@ customInputs.library = (node: any) => {
     }
   })
 }
+
+const { context } = useEventContext({form_name: props.title, form_id: props.formId })
 </script>
 
 <template>
+  {{ context }}
   <div
     :style="{
       '--local-max-width': '595px'
diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
index b2e85ad3cd..d7dd6159e1 100644
--- a/packages/ripple-tide-search/components/global/TideCustomCollection.vue
+++ b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -16,6 +16,8 @@ import type {
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { get } from 'lodash-es'
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
 
 interface Props {
   id: string
@@ -548,10 +550,17 @@ const locationOrGeolocation = computed(() => {
     ? userGeolocation.value
     : locationQuery.value
 })
+
+const { updateContext } = useEventContext({ mode: 'asdasd'})
+
+watch(activeTab, (newActiveTab) => {
+  updateContext('mode', newActiveTab)
+})
 </script>
 
 <template>
   <div class="rpl-u-margin-t-8">
+    <TestContextViewer />
     <div
       v-if="!searchListingConfig?.hideSearchForm"
       :class="{
diff --git a/packages/ripple-ui-core/src/composables/useEventContext.ts b/packages/ripple-ui-core/src/composables/useEventContext.ts
new file mode 100644
index 0000000000..54aaa4b558
--- /dev/null
+++ b/packages/ripple-ui-core/src/composables/useEventContext.ts
@@ -0,0 +1,48 @@
+import { computed, provide, inject, ref } from 'vue'
+
+export default (addedContext?) => {
+  const { context: parentContext, updateContext: updateParentContext } =
+    inject<any>('rplEventContext', {})
+
+  if (!addedContext) {
+    return {
+      context: parentContext,
+      updateContext: updateParentContext
+    }
+  }
+
+  const context = ref(addedContext || {})
+
+  function updateContext(key, value) {
+
+
+    if (typeof updateParentContext === 'function') {
+      updateParentContext(key, value)
+    }
+    if (context.value?.hasOwnProperty(key)) {
+      context.value = {
+        ...context.value,
+        [key]: value
+      }
+    }
+
+  }
+
+  const mergedContext = computed(() => {
+
+    return {
+      ...(parentContext?.value || {}),
+      ...(context.value || {})
+    }
+  })
+
+  provide('rplEventContext', {
+    context: mergedContext,
+    updateContext
+  })
+
+  return {
+    context: mergedContext,
+    updateContext
+  }
+}
diff --git a/packages/ripple-ui-core/src/composables/useRippleEvent.ts b/packages/ripple-ui-core/src/composables/useRippleEvent.ts
index 9dff30f65d..2b71c3d03b 100644
--- a/packages/ripple-ui-core/src/composables/useRippleEvent.ts
+++ b/packages/ripple-ui-core/src/composables/useRippleEvent.ts
@@ -1,5 +1,6 @@
 import { inject } from 'vue'
 import rplEventBus from './../lib/eventbus'
+import useEventContext from '../composables/useEventContext'
 
 export type rplEventPayload = {
   id?: string
@@ -24,16 +25,14 @@ export type rplEventOptions = {
 
 export function useRippleEvent(namespace: string, emit?: any) {
   const $rplEvent: typeof rplEventBus | undefined = inject('$rplEvent')
-  const eventContext: rplEventPayload = inject('eventContext', {})
+  const { context } = useEventContext()
 
   const emitRplEvent = (
     event: string,
     payload: rplEventPayload = {},
     options: rplEventOptions = {}
   ) => {
-    if (eventContext) {
-      payload = { ...eventContext, ...payload }
-    }
+      payload = { ...(context?.value || {}), ...payload }
     if (emit) {
       emit(event, payload)
     }
diff --git a/packages/ripple-ui-core/src/index.ts b/packages/ripple-ui-core/src/index.ts
index 78ef7cc6b6..a2bdef88da 100644
--- a/packages/ripple-ui-core/src/index.ts
+++ b/packages/ripple-ui-core/src/index.ts
@@ -6,4 +6,5 @@ export { isExternalUrl } from './utils/isExternalUrl'
 export { formatDate } from './lib/helpers'
 export { RplIconGroups } from './components/icon/constants'
 export { useRippleEvent } from './composables/useRippleEvent'
+export { default as useEventContext } from './composables/useEventContext'
 export type { rplEventPayload } from './composables/useRippleEvent'