project-booster-vue 10.8.2 → 10.9.1

package/package.json

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

package/src/components/products/PbProducts.vue

@@ -27,7 +27,7 @@
       <m-flex class="pb-products__container--button" direction="column" align-items="center" justify-content="center">
         <m-button
           :theme="action.bordered ? 'bordered' : 'solid'"
-          class="pb-products__container--button__ok mc-button--full"
+          class="pb-products__container--button__ok mc-button--full js-cdl"
           :type="action.type"
           :label="action.label"
           icon-position="right"
@@ -36,6 +36,10 @@
           v-for="action in payload.callToActions"
           :key="action.label"
           @click="callAction(action.action)"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent({ button_name: action.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
+          "
         />
       </m-flex>
     </m-flex>
@@ -50,6 +54,7 @@ import MLink from '../mozaic/link/MLink.vue';
 import MButton from '../mozaic/buttons/MButton.vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
+import { EventTypeEnum, formatEvent } from '../rework/services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -98,6 +103,18 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    /**
+     * Get step location
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      EventTypeEnum,
+    };
   },
   computed: {
     ...mapGetters('products', {
@@ -137,6 +154,7 @@ export default defineComponent({
         }
       }
     },
+    formatEvent,
   },
 });
 </script>

package/src/components/question/PbQuestion.vue

@@ -117,6 +117,21 @@
                   @card-click="answer?.viewModel?.href ? '' : selectAnswer(payload.code, answer)"
                   @button-click="handleAnswerButtonClick"
                   @link-click="handleLinkClick(answer)"
+                  data-cdl-click-type="cdl_event"
+                  :data-cdl-click-data="
+                    formatEvent(
+                      {
+                        button_name: decorate(
+                          answers,
+                          runtimeOptions,
+                          answer?.viewModel?.title,
+                          payload.defaultDecoratorValue,
+                        ),
+                        button_location: stepLocation || '',
+                      },
+                      EventTypeEnum.BUTTON,
+                    )
+                  "
                 />
                 <m-button
                   v-else
@@ -206,7 +221,9 @@
           />
           <m-button
             v-if="isValidateMultiselectButtonDisplayed()"
-            class="pb-question__actions-buttons-button"
+            class="pb-question__actions-buttons-button js-cdl"
+            data-cdl-click-type="cdl_event"
+            :data-cdl-click-data="eventData"
             size="m"
             size-from-l="l"
             :label="payload.multiSelect.actions.VALIDATE.label"
@@ -382,6 +399,7 @@ import {
   ScenarioCondition,
   ScenarioStepDialog,
 } from '@/types/pb/Scenario';
+import { EventTypeEnum, formatEvent } from '../rework/services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -461,6 +479,13 @@ export default defineComponent({
       type: String,
       default: '0px',
     },
+    /**
+     * Define the location of the step in the scenario.
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
 
   data: () => ({
@@ -485,6 +510,8 @@ export default defineComponent({
     slotComponent: false,
     showNotification: false,
     showModal: false,
+    EventTypeEnum,
+    eventData: {},
   }),
 
   computed: {
@@ -529,6 +556,7 @@ export default defineComponent({
   },
 
   methods: {
+    formatEvent,
     updateSelectedAnswers() {
       this.displayedAnswers = [];
       this.lastItemIndex = 0;
@@ -625,6 +653,8 @@ export default defineComponent({
         });
       }
 
+      this.updateCdlValues();
+
       this.$nextTick(() => {
         this.updatePbQuestionActionsButtonsSizeHeight();
       });
@@ -650,6 +680,7 @@ export default defineComponent({
         }
       }
 
+      this.updateCdlValues();
       this.$emit(this.completedEventName, {
         answers: answers,
         nextStep: multiSelectOptions?.nextStep,
@@ -799,6 +830,26 @@ export default defineComponent({
     handleShowModal() {
       this.showModal = !this.showModal;
     },
+    updateCdlValues() {
+      let answers: any = [];
+
+      for (const answerCode in Object.fromEntries(this.selectedAnswers)) {
+        if (!answers.includes(answerCode)) {
+          answers.push(answerCode);
+        } else {
+          answers = answers.filter((item: any) => item !== answerCode);
+        }
+      }
+
+      this.eventData = formatEvent(
+        {
+          field_name: this.payload.viewModel?.label || '',
+          funnel_name: this.payload.viewModel.analytics?.funnel_name || '',
+          field_value: answers || '',
+        },
+        EventTypeEnum.FIELD,
+      );
+    },
   },
 });
 </script>

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -39,6 +39,14 @@
           @click="goToNavigation(payload.viewModel.backButton.nextStep)"
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
           icon="ArrowBack48"
+          class="js-cdl"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              { button_name: payload.viewModel.backButton.label, button_location: stepLocation },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </div>
 
@@ -52,6 +60,14 @@
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', condition.viewModel.nextStep.label)"
           icon="ArrowNext48"
           iconPosition="right"
+          class="js-cdl"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              { button_name: payload.viewModel.nextStep.label, button_location: stepLocation },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </div>
     </div>
@@ -65,6 +81,14 @@
           @click="goToNavigation(payload.viewModel.backButton.nextStep)"
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
           icon="ArrowBack48"
+          class="js-cdl"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              { button_name: payload.viewModel.backButton.label, button_location: stepLocation },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </div>
 
@@ -75,6 +99,14 @@
           @click="goToNavigation(payload.viewModel.nextStep, payload.viewModel.nextStep.label)"
           icon="ArrowNext48"
           iconPosition="right"
+          class="js-cdl"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              { button_name: payload.viewModel.nextStep.label, button_location: stepLocation },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </div>
     </div>
@@ -94,6 +126,7 @@ import cloneDeep from 'lodash.clonedeep';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import merge from 'lodash.merge';
 import { decorate } from '@/services/decorate';
+import { formatEvent, EventTypeEnum } from '../services/event';
 
 const props = defineProps({
   /**
@@ -119,6 +152,13 @@ const props = defineProps({
     type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
     default: () => new Map<string, ScenarioStepAnswer[]>(),
   },
+  /**
+   * Current step location
+   */
+  stepLocation: {
+    type: String,
+    default: '',
+  },
 });
 
 const store = useStore();

package/src/components/rework/products/MPbProducts.vue

@@ -27,7 +27,11 @@
       <div class="pb-products__container--button">
         <m-button
           :theme="action.bordered ? 'bordered' : 'solid'"
-          class="pb-products__container--button__ok"
+          class="pb-products__container--button__ok js-cdl"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent({ button_name: action.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
+          "
           :type="action.type"
           :label="action.label"
           icon-position="right"
@@ -48,6 +52,7 @@ import { MButton, MLink } from '@mozaic-ds/vue-3';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { defineProps, PropType, onMounted, ref } from 'vue';
 import { PayloadAction } from '../types/genericPayload';
+import { formatEvent, EventTypeEnum } from '../services/event';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 
@@ -94,6 +99,13 @@ const props = defineProps({
     type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
     default: () => new Map<string, ScenarioStepAnswer[]>(),
   },
+  /**
+   * Current step location
+   */
+  stepLocation: {
+    type: String,
+    default: '',
+  },
 });
 
 /**

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

@@ -41,7 +41,7 @@
                   :is="loadingComponents[payload.viewModel.answersComponent]"
                   v-if="payload.viewModel.answersComponent !== 'MButton'"
                   :answer-code="answer.code"
-                  class="pb-question__answer__component"
+                  class="pb-question__answer__component js-cdl"
                   :border-top="answer?.viewModel?.borderColor || null"
                   :image="decorate(answers, runtimeOptions, answer?.viewModel?.image, payload.defaultDecoratorValue)"
                   :image-title="
@@ -92,6 +92,21 @@
                   @card-click="handleCardClick(answer, payload)"
                   @button-click="handleAnswerButtonClick"
                   @link-click="handleLinkClick(answer)"
+                  data-cdl-click-type="cdl_event"
+                  :data-cdl-click-data="
+                    formatEvent(
+                      {
+                        button_name: decorate(
+                          answers,
+                          runtimeOptions,
+                          answer?.viewModel?.title,
+                          payload.defaultDecoratorValue,
+                        ),
+                        button_location: stepLocation,
+                      },
+                      EventTypeEnum.BUTTON,
+                    )
+                  "
                 />
                 <m-button
                   v-else
@@ -135,12 +150,12 @@
             <div v-if="helpItem.type === 'link'">
               <m-link
                 class="pb-question__help__link"
-                :label="helpItem.label"
                 width="full"
                 size="l"
                 theme="primary"
                 @click="handleHelpClick(helpItem.action)"
-              />
+                >{{ helpItem.label }}</m-link
+              >
             </div>
           </div>
         </div>
@@ -459,6 +474,13 @@ const props = defineProps({
     type: String,
     default: '0px',
   },
+  /**
+   * Define the location of the step in the scenario.
+   */
+  stepLocation: {
+    type: String,
+    default: '',
+  },
 });
 
 const selectedAnswers = ref(new Map<string, boolean>());

package/src/components/rework/restitution/MPbRestitutionList.vue

@@ -39,6 +39,7 @@
           :text="notification.text"
           :link-label="notification.linkLabel"
           @link-click="handleLinkClicked(notification.linkHref)"
+          class="pb-restitution-list__notifications__container__block"
         />
       </m-flex>
     </m-flex>
@@ -101,7 +102,17 @@
       </template>
       <template #footer>
         <m-flex class="pb-restitution-list__modal__footer" align-items="center" justify-content="center">
-          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleShowDialog"></m-button>
+          <m-button
+            label="Fermer"
+            theme="bordered-neutral"
+            @click.prevent="handleShowDialog"
+            class="js-cdl"
+            data-cdl-click-type="cdl_event"
+            :data-cdl-click-data="
+              formatEvent({ button_name: 'Fermer', button_location: stepLocation }, EventTypeEnum.BUTTON)
+            "
+          >
+          </m-button>
         </m-flex>
       </template>
     </m-modal>
@@ -123,6 +134,7 @@ import { MModal, MButton, MLink, MNotification } from '@mozaic-ds/vue-3';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
+import { formatEvent, EventTypeEnum } from '../services/event';
 
 export default defineComponent({
   components: {
@@ -142,6 +154,7 @@ export default defineComponent({
       notifications: [] as NotificationOptions[],
       displayedCta: [] as RestitutionPayloadCallToAction[],
       BACK_ICON,
+      EventTypeEnum,
     };
   },
   // eslint-disable-next-line vue/order-in-components
@@ -191,6 +204,13 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Current step location
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     ...mapGetters('estimates', { summary: 'getSummary' }),
@@ -271,6 +291,7 @@ export default defineComponent({
       return areConditionsValid(conditions, this.answers, this.runtimeOptions);
     },
     sanitizeCerberusAttribut,
+    formatEvent,
   },
 });
 </script>
@@ -522,6 +543,10 @@ $responsive-breakpoint: 'm';
       @include set-from-screen($responsive-breakpoint) {
         min-width: 100%;
       }
+
+      &__block {
+        margin-bottom: $mu050;
+      }
     }
   }
 }

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

@@ -1,10 +1,8 @@
 export enum EventName {
   CLICK = 'button.click',
   FIELD = 'step.field',
-}
-
-export enum ButtonType {
-  ACTION = 'action',
+  SUBMIT = 'step.submit',
+  DISPLAY = 'step.display',
 }
 
 export enum CdlEventEnum {
@@ -14,14 +12,19 @@ export enum CdlEventEnum {
 export enum EventTypeEnum {
   FIELD = 'field',
   BUTTON = 'button',
+  SUBMIT = 'submit',
+  DISPLAY = 'display',
 }
 
 export interface FormatEventInterface {
   button_name?: string;
   button_location?: string;
+  button_type?: string;
   funnel_name?: string;
   field_name?: string;
   field_value?: any;
+  step_name?: any;
+  step_number?: any;
 }
 
 /**
@@ -31,7 +34,16 @@ export interface FormatEventInterface {
  * @returns
  */
 export const formatEvent = (
-  { button_name, button_location, funnel_name, field_name, field_value }: FormatEventInterface,
+  {
+    button_name,
+    button_location,
+    funnel_name,
+    field_name,
+    field_value,
+    step_name,
+    step_number,
+    button_type,
+  }: FormatEventInterface,
   type: EventTypeEnum,
 ): string => {
   let event_data = {};
@@ -41,7 +53,7 @@ export const formatEvent = (
       event_data = {
         button_name,
         button_location,
-        button_type: ButtonType.ACTION,
+        button_type,
       };
       break;
     case EventTypeEnum.FIELD:
@@ -51,10 +63,35 @@ export const formatEvent = (
         funnel_name,
       };
       break;
+    case EventTypeEnum.DISPLAY || EventTypeEnum.SUBMIT:
+      event_data = {
+        funnel_name,
+        step_name,
+        step_number,
+      };
+      break;
   }
 
   return JSON.stringify({
-    event_name: type === EventTypeEnum.BUTTON ? EventName.CLICK : EventName.FIELD,
+    event_name: getEventType(type),
     event_data,
   });
 };
+
+/**
+ * Get event type
+ * @param type
+ * @returns
+ */
+const getEventType = (type: string) => {
+  switch (type) {
+    case EventTypeEnum.BUTTON:
+      return EventName.CLICK;
+    case EventTypeEnum.SUBMIT:
+      return EventName.SUBMIT;
+    case EventTypeEnum.DISPLAY:
+      return EventName.DISPLAY;
+    case EventTypeEnum.FIELD:
+      return EventName.FIELD;
+  }
+};

package/src/components/trezor/PbTrezor.vue

@@ -230,6 +230,10 @@
             @click.prevent="callAction(action)"
             :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'SENDFORM')"
             :disabled="isSubmitDisabled"
+            data-cdl-click-type="cdl_event"
+            :data-cdl-click-data="
+              formatEvent({ button_name: action.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
+            "
           />
         </m-flex>
       </div>
@@ -266,6 +270,7 @@ import objectPath from 'object-path';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { MModal } from '@mozaic-ds/vue-3';
 import DEFAULT_PAYLOAD from './default-payload.json';
+import { EventTypeEnum, formatEvent } from '../rework/services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -328,6 +333,13 @@ export default defineComponent({
       default: false,
       required: false,
     },
+    /**
+     * Get step location
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
   setup(props, { emit }) {
     const store = useStore();
@@ -507,6 +519,8 @@ export default defineComponent({
       partners,
       isSubmitDisabled,
       handleSelectPartner,
+      EventTypeEnum,
+      formatEvent,
     };
   },
 });