project-booster-vue 10.2.1 → 10.2.3

package/package.json

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

package/src/components/projects/project-item-save/PbProjectItemSave.vue

@@ -1,50 +1,48 @@
 <template>
   <div class="pb-project-item-save">
-    <form @submit.prevent="handleFormSubmit">
-      <m-dialog class="pb-project-item-save__dialog" v-model:show-dialog="showDialog">
-        <template #header>
-          <m-flex align-items="center" justify-content="flex-start" full-width> Enregistrer l'estimation </m-flex>
-        </template>
-        <template #body>
-          <m-flex direction="column" full-width class="pb-project-item-save__dialog-content">
-            <pb-project-item-save-projects-list
-              v-if="state.matches('selectingProject') || state.matches('validatingSelectedProject')"
-              @project-click="
-                $event ? send({ type: 'PROJECT_SELECTED', selectedProjectId: $event }) : send('PROJECT_RESETED')
-              "
-              @new-project-click="selectNewProject"
-            />
-            <pb-project-item-save-project-name
-              v-else-if="state.matches('namingProject')"
-              :default-name="defaultProjectName"
-              @project-change="$event.valid ? send('PROJECT_VALID', $event) : send('PROJECT_INVALID')"
-            />
-            <pb-project-item-save-item-name
-              v-else-if="state.matches('namingItem')"
-              :default-name="defaultItemName"
-              @name-change="$event.valid ? send('ESTIMATE_NAME_VALID', $event) : send('ESTIMATE_NAME_INVALID')"
-            />
-          </m-flex>
-        </template>
-        <template #footer>
-          <m-flex align-items="center" justify-content="center" class="pb-project-item-save__dialog-footer" full-width>
-            <m-link
-              v-if="state.nextEvents.includes('GO_BACK_CLICKED')"
-              label="Retour"
-              left-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_24px.svg"
-              @click="send('GO_BACK_CLICKED')"
-            />
-            <m-button
-              :label="state.meta['projectItemSaveMachine.' + state.value].primaryButton.label"
-              :disabled="
-                state.meta['projectItemSaveMachine.' + state.value].primaryButton.actionDisabled || !currentFormIsValid
-              "
-              @click="handlePrimaryButtonClick"
-            />
-          </m-flex>
-        </template>
-      </m-dialog>
-    </form>
+    <m-dialog class="pb-project-item-save__dialog" v-model:show-dialog="showDialog">
+      <template #header>
+        <m-flex align-items="center" justify-content="flex-start" full-width> Enregistrer l'estimation </m-flex>
+      </template>
+      <template #body>
+        <m-flex direction="column" full-width class="pb-project-item-save__dialog-content">
+          <pb-project-item-save-projects-list
+            v-if="state.matches('selectingProject') || state.matches('validatingSelectedProject')"
+            @project-click="
+              $event ? send({ type: 'PROJECT_SELECTED', selectedProjectId: $event }) : send('PROJECT_RESETED')
+            "
+            @new-project-click="selectNewProject"
+          />
+          <pb-project-item-save-project-name
+            v-else-if="state.matches('namingProject')"
+            :default-name="defaultProjectName"
+            @project-change="$event.valid ? send('PROJECT_VALID', $event) : send('PROJECT_INVALID')"
+          />
+          <pb-project-item-save-item-name
+            v-else-if="state.matches('namingItem')"
+            :default-name="defaultItemName"
+            @name-change="$event.valid ? send('ESTIMATE_NAME_VALID', $event) : send('ESTIMATE_NAME_INVALID')"
+          />
+        </m-flex>
+      </template>
+      <template #footer>
+        <m-flex align-items="center" justify-content="center" class="pb-project-item-save__dialog-footer" full-width>
+          <m-link
+            v-if="state.nextEvents.includes('GO_BACK_CLICKED')"
+            label="Retour"
+            left-icon="https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_24px.svg"
+            @click="send('GO_BACK_CLICKED')"
+          />
+          <m-button
+            :label="state.meta['projectItemSaveMachine.' + state.value].primaryButton.label"
+            :disabled="
+              state.meta['projectItemSaveMachine.' + state.value].primaryButton.actionDisabled || !currentFormIsValid
+            "
+            @click="handlePrimaryButtonClick"
+          />
+        </m-flex>
+      </template>
+    </m-dialog>
     <m-notification
       floating
       :floating-displayed="itemCreationError || projectCreationError"

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

@@ -77,11 +77,13 @@ import { PayloadAction } from '../types/genericPayload';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ref } from 'vue';
 import { ButtonType, EventName, sendAnalyticEvent } from '../services/event';
+import { useStore } from 'vuex';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 const showModal = ref(false);
 const titleModal = ref('');
 const srcModal = ref('');
+const store = useStore();
 
 const props = defineProps({
   /**
@@ -101,7 +103,7 @@ const handleCloseModal = () => {
 };
 
 const handleShowModal = (option: any) => {
-  sendAnalyticEvent(EventName.CLICK, {
+  sendAnalyticEvent(store, EventName.CLICK, {
     button_name: option.viewModel.button.label || '',
     button_location: '',
     button_type: ButtonType.ACTION,
@@ -121,7 +123,7 @@ const handleShowModal = (option: any) => {
  * @param action
  */
 const callAction = (button: PayloadAction) => {
-  sendAnalyticEvent(EventName.CLICK, {
+  sendAnalyticEvent(store, EventName.CLICK, {
     button_name: button.label || '',
     button_location: '',
     button_type: ButtonType.ACTION,

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

@@ -89,9 +89,11 @@ import { areConditionsValid } from '../../../services/scenarioConditionals';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { ButtonType, EventName, sendAnalyticEvent } from '../services/event';
+import { useStore } from 'vuex';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 const message = ref('');
+const store = useStore();
 
 const props = defineProps({
   /**
@@ -124,7 +126,7 @@ const props = defineProps({
  * @param action
  */
 const callAction = (action: PayloadAction, label: string) => {
-  sendAnalyticEvent(EventName.CLICK, {
+  sendAnalyticEvent(store, EventName.CLICK, {
     button_name: label || '',
     button_location: '',
     button_type: ButtonType.ACTION,

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

@@ -231,7 +231,7 @@
               icon="ArrowNext48"
               iconPosition="right"
               label="Etape suivante"
-              @click="validMultiSelect(payload?.multiSelect?.actions?.VALIDATE)"
+              @click="nextStepHandler"
               :disabled="!hasAnswersSelected"
             />
           </div>
@@ -500,6 +500,7 @@ export default defineComponent({
     showModal: false,
     notification: undefined as undefined | ScenarioStepAnswerNotification,
     widthXlSize: undefined as undefined | boolean,
+    currentAnswer: null as any,
   }),
 
   computed: {
@@ -615,6 +616,7 @@ export default defineComponent({
       }
       if (!this.payload.multiSelect) {
         this.initAnswersSelectedState(this.payload.answers);
+        this.currentAnswer = answer;
       }
 
       if (this.payload.multiSelect) {
@@ -658,10 +660,10 @@ export default defineComponent({
         }
       }
 
-      sendAnalyticEvent(EventName.FIELD, {
+      sendAnalyticEvent(this.$store, EventName.FIELD, {
         field_name: multiSelectOptions?.label || '',
         field_value: answers,
-        funnel_name: this.payload.analytics.funnel_name,
+        funnel_name: this.payload.viewModel.analytics.funnel_name,
       });
 
       this.$emit(this.completedEventName, {
@@ -785,7 +787,7 @@ export default defineComponent({
       });
 
       if (answer.viewModel) {
-        sendAnalyticEvent(EventName.CLICK, {
+        sendAnalyticEvent(this.$store, EventName.CLICK, {
           button_name: answer.viewModel?.title || '',
           button_location: '',
           button_type: ButtonType.ACTION,
@@ -843,6 +845,20 @@ export default defineComponent({
         nextStep: stepCode,
       });
     },
+    nextStepHandler() {
+      if (this.payload?.multiSelect?.actions?.VALIDATE) {
+        this.validMultiSelect(this.payload?.multiSelect?.actions?.VALIDATE);
+      } else {
+        /**
+         * Emitted when step is completed
+         * @event dynamic event name according to completedEventName prop
+         */
+        this.$emit(this.completedEventName, {
+          answers: [this.currentAnswer],
+          nextStep: this.currentAnswer.nextStep,
+        });
+      }
+    },
   },
 });
 </script>

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

@@ -204,7 +204,7 @@ export default defineComponent({
     const configurationImportError = ref(false);
 
     const navigateTo = (viewModel: ConfigurationsImportViewModel) => {
-      sendAnalyticEvent(EventName.CLICK, {
+      sendAnalyticEvent(store, EventName.CLICK, {
         button_name: viewModel.label || '',
         button_location: '',
         button_type: ButtonType.ACTION,
@@ -246,7 +246,7 @@ export default defineComponent({
     };
 
     const skipQuestion = (button: ConfigurationsImportSkippable) => {
-      sendAnalyticEvent(EventName.CLICK, {
+      sendAnalyticEvent(store, EventName.CLICK, {
         button_name: button.label || '',
         button_location: '',
         button_type: ButtonType.ACTION,
@@ -260,7 +260,7 @@ export default defineComponent({
     };
 
     const validMultiSelect = (multiSelectOptions: ConfigurationsImportMultiSelectAction) => {
-      sendAnalyticEvent(EventName.CLICK, {
+      sendAnalyticEvent(store, EventName.CLICK, {
         button_name: multiSelectOptions.label || '',
         button_location: '',
         button_type: ButtonType.ACTION,
@@ -273,7 +273,7 @@ export default defineComponent({
     };
 
     const callAction = (action: PayloadAction) => {
-      sendAnalyticEvent(EventName.CLICK, {
+      sendAnalyticEvent(store, EventName.CLICK, {
         button_name: action.label || '',
         button_location: '',
         button_type: ButtonType.ACTION,

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

@@ -235,7 +235,7 @@ export default defineComponent({
     });
 
     const navigateTo = (viewModel: UploadDocumentViewModel) => {
-      sendAnalyticEvent(EventName.CLICK, {
+      sendAnalyticEvent(store, EventName.CLICK, {
         button_name: viewModel.label || '',
         button_location: '',
         button_type: ButtonType.ACTION,
@@ -259,7 +259,7 @@ export default defineComponent({
     };
 
     const validMultiSelect = (multiSelectOptions: UploadDocumentMultiSelectAction) => {
-      sendAnalyticEvent(EventName.CLICK, {
+      sendAnalyticEvent(store, EventName.CLICK, {
         button_name: multiSelectOptions.label || '',
         button_location: '',
         button_type: ButtonType.ACTION,
@@ -276,7 +276,7 @@ export default defineComponent({
     };
 
     const skipQuestion = (button: UploadDocumentMultiSelectAction) => {
-      sendAnalyticEvent(EventName.CLICK, {
+      sendAnalyticEvent(store, EventName.CLICK, {
         button_name: button.label || '',
         button_location: '',
         button_type: ButtonType.ACTION,

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

@@ -1,7 +1,3 @@
-import { useStore } from 'vuex';
-
-const store = useStore();
-
 export enum EventName {
   CLICK = 'button.click',
   FIELD = 'step.field',
@@ -28,7 +24,7 @@ interface EventField {
  * @param event_name
  * @param event_data
  */
-export const sendAnalyticEvent = (event_name: EventName, event_data: EventData | EventField) => {
+export const sendAnalyticEvent = (store: any, event_name: EventName, event_data: EventData | EventField) => {
   store.dispatch('sendEventToBus', {
     code: 'EMIT-ANALYTIC-EVENT',
     payload: {

package/src/components/scenario/scenarii/appointment-qualification-bathroom.json

@@ -25,9 +25,6 @@
     "code": "LMFR_QUESTION_WORKS",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step1"
-    },
     "slots": {
       "stickyBottom": {
         "display": false
@@ -50,11 +47,15 @@
         "progressBar": true,
         "widthFromL": "1of3",
         "widthXlSize": true,
+        "hideBackButton": true,
         "forceOneCardPerLineOnMobile": true,
         "sortBy": {
           "type": ["numeric", "string"],
           "order": ["Asc"],
           "path": ["meta.ranking", "viewModel.title"]
+        },
+        "analytics": {
+          "funnel_name": "SDB_step1"
         }
       },
       "multiSelect": {
@@ -283,9 +284,6 @@
     "code": "LMFR_BATHROOM_BATHTUB_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step2"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -298,12 +296,15 @@
     },
     "payload": {
       "viewModel": {
-        "label": "Quel type de baignoire voulez-vous installer ?",
+        "label": "Quel type de baignoire souhaitez-vous installer ?",
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
         "widthFromL": "1of3",
-        "widthXlSize": true
+        "widthXlSize": true,
+        "analytics": {
+          "funnel_name": "SDB_step2"
+        }
       },
       "answers": {
         "STRAIGH_TUB": {
@@ -393,9 +394,6 @@
     "code": "LMFR_BATHROOM_SHOWER_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step3"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -408,6 +406,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step3"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -485,9 +486,6 @@
     "code": "LMFR_BATHROOM_FURNITURE_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step4_1/4"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -500,6 +498,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step4_1/4"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -568,32 +569,36 @@
             "ranking": 6
           }
         }
-      }
-    },
-    "nextStep": {
-      "conditionals": [
-        {
-          "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'WC')"],
-          "nextStep": {
-            "code": "LMFR_BATHROOM_WC_TYPE"
-          }
-        },
-        {
-          "conditions": ["true"],
-          "nextStep": {
-            "code": "LMFR_BATHROOM_STYLE"
+      },
+      "multiSelect": {
+        "actions": {
+          "VALIDATE": {
+            "label": "Étape suivante",
+            "nextStep": {
+              "conditionals": [
+                {
+                  "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'WC')"],
+                  "nextStep": {
+                    "code": "LMFR_BATHROOM_WC_TYPE"
+                  }
+                },
+                {
+                  "conditions": ["true"],
+                  "nextStep": {
+                    "code": "LMFR_BATHROOM_STYLE"
+                  }
+                }
+              ]
+            }
           }
         }
-      ]
+      }
     }
   },
   "LMFR_BATHROOM_WC_TYPE": {
     "code": "LMFR_BATHROOM_WC_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step5"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -606,6 +611,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step5"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -644,9 +652,6 @@
     "code": "LMFR_BATHROOM_STYLE",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step3"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -659,6 +664,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step3"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -817,9 +825,6 @@
     "code": "LMFR_QUESTION_PLAN_INFO",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step4_3/4"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -832,6 +837,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step4_3/4"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -897,9 +905,6 @@
     "code": "LMFR_QUESTION_ADD_PLAN_LATER",
     "type": "STEP",
     "component": "MPbAlert",
-    "analytics": {
-      "funnel_name": "SDB_step4_2/4"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -912,6 +917,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step4_2/4"
+        },
         "title": "Transmettre mon plan plus tard",
         "type": "warning",
         "exitOptionsTitle": "Réaliser rapidement votre plan :",
@@ -974,9 +982,6 @@
     "code": "LMFR_QUESTION_ADD_PICTURE",
     "type": "STEP",
     "component": "MPbUploadDocument",
-    "analytics": {
-      "funnel_name": "SDB_step5_1/2"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -989,6 +994,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step5_1/2"
+        },
         "label": "Possédez-vous des photos de votre salle de bain actuelle ?",
         "addText": "Plus on en sait, mieux vous serez accompagné",
         "addTitle": "Importer des photos",
@@ -1063,9 +1071,6 @@
     "code": "LMFR_QUESTION_ADD_PLAN",
     "type": "STEP",
     "component": "MPbUploadDocument",
-    "analytics": {
-      "funnel_name": "SDB_step4_4/4"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1078,6 +1083,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step4_4/4"
+        },
         "label": "Ajouter un plan",
         "addTitle": "Sélectionner un fichier",
         "addText": "",
@@ -1153,9 +1161,6 @@
     "code": "LMFR_QUESTION_WORK_START_DATE",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step6"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1168,6 +1173,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step6"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -1231,9 +1239,6 @@
     "code": "LMFR_QUESTION_INSTALLATION",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step7"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1246,6 +1251,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step7"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -1314,9 +1322,6 @@
     "code": "LMFR_QUESTION_BUDGET",
     "type": "STEP",
     "component": "MPbQuestion",
-    "analytics": {
-      "funnel_name": "SDB_step8"
-    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1329,6 +1334,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step8"
+        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -1410,9 +1418,6 @@
   "LMFR_COMMENT": {
     "code": "LMFR_COMMENT",
     "type": "STEP",
-    "analytics": {
-      "funnel_name": "SDB_step9"
-    },
     "component": "MPbExitOptions",
     "slots": {
       "beforeContent": {
@@ -1426,6 +1431,9 @@
     },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step9"
+        },
         "title": "Pour que vous soyez pleinement satisfait et que votre projet soit réussi : qu'est-ce qui est le plus important pour vous ?",
         "content": "<p>Cette question est facultative.</p>",
         "typeForm": {
@@ -1454,11 +1462,11 @@
     "code": "BATHROOM_END",
     "type": "STEP",
     "component": "PbPedagogy",
-    "analytics": {
-      "funnel_name": "SDB_step5_2/2"
-    },
     "payload": {
       "viewModel": {
+        "analytics": {
+          "funnel_name": "SDB_step5_2/2"
+        },
         "title": "Nous avons bien pris rendez-vous et enregistré vos informations",
         "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg",
         "description": [

package/src/types/pb/Scenario.ts

@@ -179,6 +179,7 @@ export interface ScenarioStepViewModel {
   progressBar?: boolean;
   widthXlSize?: boolean;
   notification?: ScenarioStepAnswerNotification;
+  analytics?: any;
 }
 
 export interface ScenarioStep {