project-booster-vue 10.9.2 → 10.10.0

package/package.json

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

package/src/components/pedagogy/PbPedagogy.vue

@@ -25,8 +25,18 @@
         <div v-if="error && error.message" class="pb-pedagogy__error">{{ error.message }}</div>
         <m-button
           :label="payload.viewModel.showFormLead.buttonLabel"
-          class="pb-pedagogy__form-lead__button mc-button--full"
+          class="pb-pedagogy__form-lead__button mc-button--full js-cdl"
           @click="saveFormLead(payload.viewModel.showFormLead)"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              {
+                button_name: payload.viewModel.showFormLead.buttonLabel,
+                button_location: stepLocation || '',
+              },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </form>
       <m-flex
@@ -41,15 +51,35 @@
           v-if="payload.viewModel.downloadButton"
           :theme="payload.viewModel.downloadButton.theme"
           :label="payload.viewModel.downloadButton.label"
-          class="pb-pedagogy__content-upload-button mc-button--full"
+          class="pb-pedagogy__content-upload-button mc-button--full js-cdl"
           @click="handleButtonLinkClicked"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              {
+                button_name: payload.viewModel.downloadButton.label,
+                button_location: stepLocation || '',
+              },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
         <m-button
           v-for="action in payload.callToActions"
           :theme="action.bordered ? 'bordered' : 'solid'"
           :label="action.label"
-          class="pb-pedagogy__content-action-button mc-button--full"
+          class="pb-pedagogy__content-action-button mc-button--full js-cdl"
           @click="handleValidateClicked(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
@@ -74,6 +104,7 @@ import MFlex from '../mozaic/flex/MFlex.vue';
 import MIcon from '../mozaic/icon/MIcon.vue';
 import PbCardsList from '../cards/PbCardsList.vue';
 import { mapGetters } from 'vuex';
+import { EventTypeEnum, formatEvent } from '../rework/services/event';
 
 interface PedagogyCardViewmodel {
   url: string;
@@ -101,11 +132,19 @@ export default defineComponent({
       type: Object,
       default: () => null,
     },
+    /**
+     * Define the location of the step in the scenario.
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
   data: () => ({
     value: [],
     emailToSaved: '',
     error: {},
+    EventTypeEnum,
   }),
   computed: {
     ...mapGetters('appointmentQualification', {
@@ -129,6 +168,7 @@ export default defineComponent({
     });
   },
   methods: {
+    formatEvent,
     handleButtonLinkClicked() {
       this.$store.dispatch('sendEventToBus', {
         code: 'APPOINTMENT-QUALIFICATION-DOWNLOAD-GUID',

package/src/components/question/city-search/PbCitySearch.vue

@@ -91,12 +91,22 @@
       <m-flex class="pb-city-search__buttons-container" direction="column">
         <m-button
           :disabled="!selectedCity"
-          class="pb-city-search__button"
+          class="pb-city-search__button js-cdl"
           :label="computedPayload.viewModel.actionLabel"
           width="full"
           size="l"
           @click="handleFormValidation"
           :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'VALIDATE')"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              {
+                button_name: computedPayload.viewModel.actionLabel,
+                button_location: stepLocation || '',
+              },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </m-flex>
     </div>
@@ -119,6 +129,7 @@ import { DebouncedFunc } from 'lodash-es';
 import { decorate } from '@/services/decorate';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
+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';
@@ -171,6 +182,13 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    /**
+     * Define the location of the step in the scenario.
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
 
   data: () => ({
@@ -194,6 +212,7 @@ export default defineComponent({
     loadingCityInfo: false,
     headerHeight: 0,
     debouncedGetSuggestions: undefined as DebouncedFunc<() => Promise<void>> | undefined,
+    EventTypeEnum,
   }),
 
   computed: {
@@ -257,6 +276,7 @@ export default defineComponent({
   },
 
   methods: {
+    formatEvent,
     async initializeGoogleMapsApis() {
       await initGoogleMapsApi();
 

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -51,12 +51,22 @@
 
       <m-flex class="pb-incremental-amount-input__buttons-container" direction="column" align-items="center">
         <m-button
-          class="pb-incremental-amount-input__button"
+          class="pb-incremental-amount-input__button js-cdl"
           :label="computedPayload.viewModel.actionLabel"
           width="full"
           size="l"
           type="submit"
           :data-cerberus="sanitizeCerberusAttribut('PB-INCREMENTAL-AMOUNT', 'INPUT')"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              {
+                button_name: computedPayload.viewModel.actionLabel,
+                button_location: stepLocation || '',
+              },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </m-flex>
     </form>
@@ -78,6 +88,7 @@ import { decorate } from '@/services/decorate';
 import MQuantitySelector from '../../mozaic/quantityselector/MQuantitySelector.vue';
 import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
+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';
@@ -165,6 +176,13 @@ export default defineComponent({
       type: Number,
       default: 1,
     },
+    /**
+     * Define the location of the step in the scenario.
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
   setup(props, { emit }) {
     const componentId = uuidv4();

package/src/components/question/name-input/PbNameInput.vue

@@ -33,12 +33,22 @@
         </m-flex>
         <m-flex class="pb-name-input__buttons-container" direction="column">
           <m-button
-            class="pb-name-input__button"
+            class="pb-name-input__button js-cdl"
             :label="computedPayload.viewModel.actionLabel"
             width="full"
             size="l"
             @click="handleFormSubmit"
             :data-cerberus="sanitizeCerberusAttribut('PB-NAME-INPUT', 'BUTTON')"
+            data-cdl-click-type="cdl_event"
+            :data-cdl-click-data="
+              formatEvent(
+                {
+                  button_name: computedPayload.viewModel.actionLabel,
+                  button_location: stepLocation || '',
+                },
+                EventTypeEnum.BUTTON,
+              )
+            "
           />
         </m-flex>
       </m-flex>
@@ -64,6 +74,7 @@ import { NameInputPayload } from '@/components/question/name-input/NameInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
+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';
@@ -163,6 +174,13 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    /**
+     * Define the location of the step in the scenario.
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
 
   setup(props, { emit }) {
@@ -234,6 +252,8 @@ export default defineComponent({
       computedPayload,
       handleFormSubmit,
       sanitizeCerberusAttribut,
+      formatEvent,
+      EventTypeEnum,
     };
   },
 });

package/src/components/warning-message/PbWarningMessage.vue

@@ -58,7 +58,7 @@
       >
         <m-button
           :theme="action.bordered ? 'bordered' : 'solid'"
-          class="pb-warning-message__container--button__ok mc-button--full"
+          class="pb-warning-message__container--button__ok mc-button--full js-cdl"
           :type="action.type"
           :label="action.label"
           icon-position="right"
@@ -68,6 +68,16 @@
           :key="action.label"
           @click="callAction(action.action)"
           :data-cerberus="sanitizeCerberusAttribut('PB-WARNING-BUTTON', action.action.code)"
+          data-cdl-click-type="cdl_event"
+          :data-cdl-click-data="
+            formatEvent(
+              {
+                button_name: action.label,
+                button_location: stepLocation || '',
+              },
+              EventTypeEnum.BUTTON,
+            )
+          "
         />
       </m-flex>
     </div>
@@ -111,6 +121,8 @@ import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
 import { DialogContent } from './dialogContent';
 import { string } from 'yup';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
+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';
 const WARNING_ICON =
@@ -169,8 +181,16 @@ export default defineComponent({
       type: string,
       default: () => WARNING_ICON,
     },
+    /**
+     * Define the location of the step in the scenario.
+     */
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
   methods: {
+    formatEvent,
     injectIcon() {
       this.$nextTick(() => {
         const element = document.querySelector('#pb-warning-message-icon');
@@ -236,6 +256,7 @@ export default defineComponent({
       handleHelpDialog,
       dialogHelpContent,
       sanitizeCerberusAttribut,
+      EventTypeEnum,
     };
   },
 });