project-booster-vue 10.0.1 → 10.2.0

package/package.json

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

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

@@ -40,7 +40,7 @@
       <div v-for="button in payload.callToActions" class="m-pb-alert__buttons__button row-flex">
         <m-button
           :label="button.label"
-          @click="callAction(button.nextStep)"
+          @click="callAction(button)"
           :theme="button.theme"
           :icon="button.icon"
           :iconPosition="button.iconPosition"
@@ -76,6 +76,7 @@ import { MNotification, MButton, MCard, MModal } from '@mozaic-ds/vue-3';
 import { PayloadAction } from '../types/genericPayload';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ref } from 'vue';
+import { ButtonType, EventName, sendAnalyticEvent } from '../services/event';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 const showModal = ref(false);
@@ -100,6 +101,12 @@ const handleCloseModal = () => {
 };
 
 const handleShowModal = (option: any) => {
+  sendAnalyticEvent(EventName.CLICK, {
+    button_name: option.viewModel.button.label || '',
+    button_location: '',
+    button_type: ButtonType.ACTION,
+  });
+
   if (option.viewModel.button.dialog) {
     showModal.value = true;
     titleModal.value = option.viewModel.title;
@@ -113,11 +120,17 @@ const handleShowModal = (option: any) => {
  * Send action to completed step
  * @param action
  */
-const callAction = (action: PayloadAction) => {
-  if (action.code != '__BACK__') {
+const callAction = (button: PayloadAction) => {
+  sendAnalyticEvent(EventName.CLICK, {
+    button_name: button.label || '',
+    button_location: '',
+    button_type: ButtonType.ACTION,
+  });
+
+  if (button.code != '__BACK__') {
     emit('step-completed', {
       answers: null,
-      nextStep: action,
+      nextStep: button,
     });
   } else {
     emit('go-back');

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

@@ -72,7 +72,7 @@
         <m-button
           :label="payload.viewModel.nextStep.label"
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', 'NEXT')"
-          @click="callAction(payload.viewModel.nextStep)"
+          @click="callAction(payload.viewModel.nextStep, payload.viewModel.nextStep.label)"
           icon="ArrowNext48"
           iconPosition="right"
         />
@@ -88,6 +88,7 @@ import { PayloadAction } from '../types/genericPayload';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { ButtonType, EventName, sendAnalyticEvent } from '../services/event';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 const message = ref('');
@@ -122,7 +123,13 @@ const props = defineProps({
  * Send action to completed step
  * @param action
  */
-const callAction = (action: PayloadAction) => {
+const callAction = (action: PayloadAction, label: string) => {
+  sendAnalyticEvent(EventName.CLICK, {
+    button_name: label || '',
+    button_location: '',
+    button_type: ButtonType.ACTION,
+  });
+
   if (action.code != '__BACK__') {
     emit('step-completed', {
       answers: [

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

@@ -389,6 +389,7 @@ import {
   ScenarioStepDialog,
   ScenarioStepAnswerNotification,
 } from '@/types/pb/Scenario';
+import { sendAnalyticEvent, EventName, ButtonType } from '../services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -630,15 +631,6 @@ export default defineComponent({
           this.selectedAnswers.set(answerCode, false);
         });
         this.selectedAnswers.set(answer.code, !this.selectedAnswers.get(answer.code) ?? true);
-
-        /**
-         * Emitted when step is completed
-         * @event dynamic event name according to completedEventName prop
-         */
-        // this.$emit(this.completedEventName, {
-        //   answers: [answer],
-        //   nextStep: answer.nextStep,
-        // });
       }
 
       this.$nextTick(() => {
@@ -666,6 +658,12 @@ export default defineComponent({
         }
       }
 
+      sendAnalyticEvent(EventName.FIELD, {
+        field_name: multiSelectOptions?.label || '',
+        field_value: answers,
+        funnel_name: this.payload.analytics.funnel_name,
+      });
+
       this.$emit(this.completedEventName, {
         answers: answers,
         nextStep: multiSelectOptions?.nextStep,
@@ -785,6 +783,14 @@ export default defineComponent({
           },
         },
       });
+
+      if (answer.viewModel) {
+        sendAnalyticEvent(EventName.CLICK, {
+          button_name: answer.viewModel?.title || '',
+          button_location: '',
+          button_type: ButtonType.ACTION,
+        });
+      }
     },
     displayVideoGuide(origin: string | undefined) {
       this.displayDialog = true;

package/src/components/rework/question/configurations-import/MPbConfigurationsImport.vue

@@ -123,6 +123,7 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { Configuration } from '@/types/pb/Configuration';
 import { decorate } from '@/services/decorate';
 import { PayloadAction } from '../../types/genericPayload';
+import { ButtonType, EventName, sendAnalyticEvent } from '../../services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -203,6 +204,12 @@ export default defineComponent({
     const configurationImportError = ref(false);
 
     const navigateTo = (viewModel: ConfigurationsImportViewModel) => {
+      sendAnalyticEvent(EventName.CLICK, {
+        button_name: viewModel.label || '',
+        button_location: '',
+        button_type: ButtonType.ACTION,
+      });
+
       if (viewModel.backLink) {
         (<any>window).location = decorate(props.answers, props.runtimeOptions, viewModel.backLink);
       } else {
@@ -239,6 +246,12 @@ export default defineComponent({
     };
 
     const skipQuestion = (button: ConfigurationsImportSkippable) => {
+      sendAnalyticEvent(EventName.CLICK, {
+        button_name: button.label || '',
+        button_location: '',
+        button_type: ButtonType.ACTION,
+      });
+
       store.dispatch('sendEventToBus', { code: 'SKIP-IMPORT-SIMULATIONS', payload: { projectId: projectId.value } });
       emit(props.completedEventName, {
         answers: {},
@@ -247,6 +260,12 @@ export default defineComponent({
     };
 
     const validMultiSelect = (multiSelectOptions: ConfigurationsImportMultiSelectAction) => {
+      sendAnalyticEvent(EventName.CLICK, {
+        button_name: multiSelectOptions.label || '',
+        button_location: '',
+        button_type: ButtonType.ACTION,
+      });
+
       emit(props.completedEventName, {
         answers: selectedConfigurations.value,
         nextStep: multiSelectOptions.nextStep,
@@ -254,6 +273,12 @@ export default defineComponent({
     };
 
     const callAction = (action: PayloadAction) => {
+      sendAnalyticEvent(EventName.CLICK, {
+        button_name: action.label || '',
+        button_location: '',
+        button_type: ButtonType.ACTION,
+      });
+
       if (action.code != '__BACK__') {
         emit('step-completed', {
           answers: [],

package/src/components/rework/question/upload-document/MPbUploadDocument.vue

@@ -132,6 +132,7 @@ import {
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate, doEval } from '@/services/decorate';
 import { PayloadAction } from '../../types/genericPayload';
+import { ButtonType, EventName, sendAnalyticEvent } from '../../services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -234,6 +235,12 @@ export default defineComponent({
     });
 
     const navigateTo = (viewModel: UploadDocumentViewModel) => {
+      sendAnalyticEvent(EventName.CLICK, {
+        button_name: viewModel.label || '',
+        button_location: '',
+        button_type: ButtonType.ACTION,
+      });
+
       if (viewModel.backLink) {
         window.location = doEval(props.answers, viewModel.backLink, '', props.runtimeOptions);
       } else {
@@ -252,6 +259,12 @@ export default defineComponent({
     };
 
     const validMultiSelect = (multiSelectOptions: UploadDocumentMultiSelectAction) => {
+      sendAnalyticEvent(EventName.CLICK, {
+        button_name: multiSelectOptions.label || '',
+        button_location: '',
+        button_type: ButtonType.ACTION,
+      });
+
       if (multiSelectOptions.nextStep.code == '__BACK__') {
         emit('go-back');
       } else {
@@ -263,6 +276,12 @@ export default defineComponent({
     };
 
     const skipQuestion = (button: UploadDocumentMultiSelectAction) => {
+      sendAnalyticEvent(EventName.CLICK, {
+        button_name: button.label || '',
+        button_location: '',
+        button_type: ButtonType.ACTION,
+      });
+
       emit(props.completedEventName, {
         answers: selectedDocuments.value.length ? selectedDocuments.value : null,
         nextStep: button.nextStep,

package/src/components/rework/restitution/MPbRestitutionList.stories.mdx

@@ -31,7 +31,8 @@ export const summary = {
     {
       componentId: 'FURNISHING',
       title: 'Pompe à chaleur installée (hors aides)',
-      details: 'Travaux réalisés par nos artisans partenaires Leroy Merlin',
+      details:
+        '\u003cp style="margin:0;"\u003eVous n\\’êtes pas éligibles aux aides\u003c/p\u003e\u003ca style="color:#000;" href="https://leroymerlin.fr/magazine/conseils-pratiques/les-aides-financieres-pour-renovation-energetique.html" target="_blank"\u003eMieux comprendre les aides\u003c/a\u003e',
       cost: {
         min: 13000,
         max: 20000,

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

@@ -0,0 +1,39 @@
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+export enum EventName {
+  CLICK = 'button.click',
+  FIELD = 'step.field',
+}
+
+export enum ButtonType {
+  ACTION = 'action',
+}
+
+interface EventData {
+  button_name: string;
+  button_location: string;
+  button_type: ButtonType;
+}
+
+interface EventField {
+  field_name: string;
+  field_value: any;
+  funnel_name: string;
+}
+
+/**
+ * Send analytics emit event
+ * @param event_name
+ * @param event_data
+ */
+export const sendAnalyticEvent = (event_name: EventName, event_data: EventData | EventField) => {
+  store.dispatch('sendEventToBus', {
+    code: 'EMIT-ANALYTIC-EVENT',
+    payload: {
+      event_name,
+      event_data,
+    },
+  });
+};

package/src/components/rework/types/genericPayload.ts

@@ -2,6 +2,7 @@ export interface PayloadAction {
   type: string;
   code: string;
   component?: string;
+  label?: string;
   payload?: {
     link: string;
   };

package/src/components/trezor/PbTrezor.vue

@@ -305,6 +305,12 @@ export default defineComponent({
         props.payload.viewModel.defaultValue?.zipcode?.path,
       ) || null;
 
+    const city =
+      getAnswerValue(
+        props.payload.viewModel.defaultValue?.city?.answerCode,
+        props.payload.viewModel.defaultValue?.city?.path,
+      ) || null;
+
     const convertToTypeOf = (typedVar: string, input: any): string | number | null => {
       if (!input) {
         return null;
@@ -338,7 +344,7 @@ export default defineComponent({
         address: '',
         additionalAddress: '',
         zipcode: zipcode,
-        city: '',
+        city: city,
         email: '',
         phone: '',
         optin: false,
@@ -434,7 +440,9 @@ export default defineComponent({
     // MODAL
     let showModal = ref(false);
 
-    store.dispatch('trezor/loadPartners');
+    store.dispatch('trezor/loadPartners', {
+      typeLead: props.payload.viewModel.typeLead,
+    });
 
     const partners = computed(() => store.getters['trezor/getPartners']);
 

package/src/components/trezor/default-payload.json

@@ -7,6 +7,10 @@
       "zipcode": {
         "answerCode": "LMFR_PREVIOUS_QUESTION",
         "path": "value"
+      },
+      "city": {
+        "answerCode": "LMFR_PREVIOUS_QUESTION",
+        "path": "value"
       }
     },
     "metadata": [

package/src/services/api/trezorApi.ts

@@ -26,8 +26,8 @@ export const sendTrezorForm = async (typeLead: string, payload: object) => {
   return response;
 };
 
-export const getPartners = async () => {
-  const response = await clientApi.get(`leads/partners`).catch(function (error) {
+export const getPartners = async (typeLeadSlug: string) => {
+  const response = await clientApi.get(`leads/partners?typeLeadSlug=` + typeLeadSlug).catch(function (error) {
     throw error;
   });
 

package/src/stores/modules/trezorStore.ts

@@ -60,9 +60,9 @@ export default {
         }
       }
     },
-    loadPartners: async ({ commit }: TrezorContext) => {
+    loadPartners: async ({ commit, state }: TrezorContext, { typeLead }: { typeLead: string }) => {
       try {
-        const result = await getPartners();
+        const result = await getPartners(typeLead);
         commit('setPartners', result);
       } catch (error) {}
     },

package/src/types/pb/Scenario.ts

@@ -143,6 +143,7 @@ export interface ScenarioStepPayload {
     action: string;
   };
   redirectLink?: any;
+  analytics: any;
 }
 
 export interface ScenarioStepViewModel {