project-booster-vue 10.5.2 → 10.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "10.5.2",
+  "version": "10.6.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/rework/alert/MPbAlert.vue

@@ -30,6 +30,14 @@
               @click="handleShowModal(options)"
               size="s"
               theme="bordered-primary-02"
+              class="js-cdl"
+              data-cdl-click-type="cdl_event"
+              :data-cdl-click-data="
+                formatEvent(
+                  { button_name: options.viewModel.button.label, button_location: stepLocation },
+                  EventTypeEnum.BUTTON,
+                )
+              "
             />
           </template>
         </m-card>
@@ -46,6 +54,11 @@
           :iconPosition="button.iconPosition"
           style="margin-left: 1rem"
           :data-cerberus="sanitizeCerberusAttribut('MPB-ALERT', button.label)"
+          class="js-cdl"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent({ button_name: button.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
+          "
         />
       </div>
     </div>
@@ -77,6 +90,7 @@ import { PayloadAction } from '../types/genericPayload';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ref } from 'vue';
 import { useStore } from 'vuex';
+import { EventTypeEnum, formatEvent } from '../services/event';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 const showModal = ref(false);
@@ -94,6 +108,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  stepLocation: {
+    type: String,
+    default: '',
+  },
 });
 
 const handleCloseModal = () => {

package/src/components/rework/question/MPbQuestion.vue

@@ -228,7 +228,7 @@
           </div>
           <div class="pb-question__actions-container__column" v-if="!skippables || hasAnswersSelected">
             <m-button
-              class="pb-question__actions-buttons-button"
+              class="pb-question__actions-buttons-button js-cdl"
               size="m"
               size-from-l="l"
               icon="ArrowNext48"
@@ -237,6 +237,8 @@
               @click="nextStepHandler"
               :disabled="!hasAnswersSelected"
               :data-cerberus="sanitizeCerberusAttribut('MPB-QUESTION', 'Etape suivante')"
+              data-cdl-click-type="cdl_event"
+              :data-cdl-click-data="eventData"
             />
           </div>
           <div v-else-if="skippables && !hasAnswersSelected" class="pb-question__actions-container__column">
@@ -388,6 +390,7 @@ import {
   ScenarioStepAnswerNotification,
 } from '@/types/pb/Scenario';
 import { useStore } from 'vuex';
+import { EventTypeEnum, formatEvent } from '../services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -603,6 +606,7 @@ const selectAnswer = (stepCode: string, answer: ScenarioStepAnswer) => {
     });
     selectedAnswers.value.set(answer.code, !selectedAnswers.value.get(answer.code) ?? true);
   }
+  updateCdlValues();
 };
 
 const validMultiSelect = (multiSelectOptions: ScenarioStepMultiSelectAction | undefined) => {
@@ -618,6 +622,7 @@ const validMultiSelect = (multiSelectOptions: ScenarioStepMultiSelectAction | un
     answers: answers,
     nextStep: multiSelectOptions?.nextStep,
   });
+  updateCdlValues();
 };
 
 const skipQuestion = (button: ScenarioStepSkippableOptions | undefined) => {
@@ -730,9 +735,10 @@ const handleShowModal = () => {
   showModal.value = !showModal.value;
 };
 
+const eventData: any = ref();
+
 const handleCardClick = (answer: ScenarioStepAnswer, payload: any) => {
   notification.value = undefined;
-
   if (answer.notification) {
     notification.value = answer.notification;
 
@@ -761,6 +767,23 @@ const nextStepHandler = () => {
     });
   }
 };
+
+const updateCdlValues = () => {
+  const answers: any = [];
+
+  for (const answerCode in Object.fromEntries(selectedAnswers.value)) {
+    answers.push(answerCode);
+  }
+
+  eventData.value = formatEvent(
+    {
+      field_name: props.payload.viewModel.label,
+      funnel_name: props.payload.viewModel.analytics.funnel_name,
+      field_value: answers,
+    },
+    EventTypeEnum.FIELD,
+  );
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/rework/services/event.ts

@@ -7,29 +7,54 @@ export enum ButtonType {
   ACTION = 'action',
 }
 
-interface EventData {
-  button_name: string;
-  button_location: string;
-  button_type: ButtonType;
+export enum CdlEventEnum {
+  CDL = 'cdl_event',
 }
 
-interface EventField {
-  field_name: string;
-  field_value: any;
-  funnel_name: string;
+export enum EventTypeEnum {
+  FIELD = 'field',
+  BUTTON = 'button',
+}
+
+export interface FormatEventInterface {
+  button_name?: string;
+  button_location?: string;
+  funnel_name?: string;
+  field_name?: string;
+  field_value?: any;
 }
 
 /**
- * Send analytics emit event
- * @param event_name
- * @param event_data
+ * Format event click, field
+ * @param param0
+ * @param type
+ * @returns
  */
-export const sendAnalyticEvent = (store: any, event_name: EventName, event_data: EventData | EventField) => {
-  store.dispatch('sendEventToBus', {
-    code: 'EMIT-ANALYTIC-EVENT',
-    payload: {
-      event_name,
-      event_data,
-    },
+export const formatEvent = (
+  { button_name, button_location, funnel_name, field_name, field_value }: FormatEventInterface,
+  type: EventTypeEnum,
+) => {
+  let event_data = {};
+
+  switch (type) {
+    case EventTypeEnum.BUTTON:
+      event_data = {
+        button_name,
+        button_location,
+        button_type: ButtonType.ACTION,
+      };
+      break;
+    case EventTypeEnum.FIELD:
+      event_data = {
+        field_name,
+        field_value,
+        funnel_name,
+      };
+      break;
+  }
+
+  return JSON.stringify({
+    event_name: type === EventTypeEnum.BUTTON ? EventName.CLICK : EventName.FIELD,
+    event_data,
   });
 };

package/src/components/rework/styles/global.scss

@@ -27,5 +27,7 @@
 }
 
 .column-full{
-    width: 100%;
+    @media (max-width: 768px){
+        width: 100%;
+    }
 }

package/src/components/scenario/PbScenario.vue

@@ -64,6 +64,7 @@
             :sticky-bottom-offset="stickyBottomOffset()"
             :min-height="minHeight"
             :is-collaborator="isCollaborator"
+            :step-location="state.currentStep?.slots?.beforeContent.label"
             @step-completed="handleStepCompleted"
             @update-selected="handleSemiUpdateSelected"
             @redirection="handleRedirection"

package/src/components/scenario/scenarios-test-conditions-and-secrets.json

@@ -61,6 +61,9 @@
     "slots": {
       "stickyBottom": {
         "display": false
+      },
+      "beforeContent": {
+        "label": "STEP-1"
       }
     },
     "payload": {