project-booster-vue 9.10.5 → 9.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.10.5",
+  "version": "9.13.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -119,12 +119,12 @@
     "@typescript-eslint/parser": "4.18.0",
     "@vue/babel-preset-app": "4.5.13",
     "@vue/compat": "3.2.6",
-    "@vue/cli": "5.0.0-beta.7",
-    "@vue/cli-plugin-babel": "5.0.0-beta.7",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.7",
-    "@vue/cli-plugin-typescript": "4.5.13",
+    "@vue/cli": "5.0.4",
+    "@vue/cli-plugin-babel": "5.0.4",
+    "@vue/cli-plugin-eslint": "5.0.4",
+    "@vue/cli-plugin-typescript": "5.0.4",
     "@vue/cli-plugin-unit-jest": "4.5.16",
-    "@vue/cli-service": "5.0.0-beta.7",
+    "@vue/cli-service": "5.0.4",
     "@vue/compiler-sfc": "3.2.31",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-standard": "6.0.0",

package/src/components/mozaic/notifications/MNotification.stories.mdx

@@ -184,7 +184,22 @@ export const TemplateSandbox = (args, { argTypes }) => ({
           <m-notification title="success" type="success" />
           <m-notification title="warning" type="warning" />
           <m-notification title="danger" type="danger" />
-          <m-notification title="appointment" is-big />
+        </div>
+      `,
+    }}
+  </Story>
+</Canvas>
+
+## **isBig** prop
+
+<Canvas>
+  <Story name="Showcase - Is big" parameters={{ controls: { disable: true } }}>
+    {{
+      components: { MNotification },
+      template: `
+        <div style="display: flex;flex-direction: column;gap: 1rem;">
+          <m-notification title="Normal" text="Some text" type="information" link-label="The lnk label" link-href="#"/>
+          <m-notification title="Big" text="Some text" type="information" link-label="The lnk label" link-href="#" is-big />
         </div>
       `,
     }}

package/src/components/mozaic/notifications/MNotification.vue

@@ -252,10 +252,16 @@ $responsive-breakpoint: 'm';
 
     .mc-notification__message {
       @include set-font-scale('06', 's');
+
+      margin-top: $mu100;
     }
 
-    .mc-notification__link .mc-link__label {
-      @include set-font-scale('06', 's');
+    .mc-notification__link {
+      margin-top: $mu100;
+
+      .mc-link__label {
+        @include set-font-scale('06', 's');
+      }
     }
   }
 

package/src/components/projects/project-hub/PbProjectHub-Collaborator.stories.mdx

@@ -220,7 +220,7 @@ The `PbProjectHub` component to access your project.
         rest.patch('/api/media/:mediaId', getMediumByIdResolver),
         rest.delete('/api/media/:mediaId', successResolver),
         rest.patch('/api/media/:mediaId', notContentResolver),
-        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents', getDocumentsByInhabitantProjectIdResolver),
         rest.get('/api/inhabitant-projects/:projectId/documents/:documentId', getDocumentByIdResolver),
         rest.delete('/api/inhabitant-projects/:projectId/documents/:documentId', successResolver),
         rest.get(
@@ -237,6 +237,10 @@ The `PbProjectHub` component to access your project.
   >
     {{
       components: { PbProjectHub },
+      mounted() {
+        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
+        this.$store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
+      },
       template: `  <div style="margin: 0 auto;min-height: 100vh;width: 100%;max-width: 1024px;">
                       <router-view v-slot="{ Component }">
                         <keep-alive include="PbProjectHub">
@@ -301,6 +305,8 @@ The `PbProjectHub` component to access your project.
     {{
       components: { PbProjectHub },
       mounted() {
+        this.$store.dispatch('media/updateContext', { type: 'MEDIA' });
+        this.$store.dispatch('documents/updateContext', { type: 'DOCUMENTS' });
         this.$router.push({
           name: 'ProjectHub',
           params: { projectId: 'EMPTY' },

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -84,7 +84,7 @@
                 <div class="pb-project-hub__section-title-container">
                   <div class="pb-project-hub__section-title">{{ titleDocument }}</div>
                   <pb-media-upload
-                    v-if="displayedDocuments && displayedDocuments.length > 0"
+                    v-if="!readOnly && displayedDocuments && displayedDocuments.length > 0"
                     storeModuleName="documents"
                     :payload="DOCUMENT_UPLOAD_PAYLOAD"
                     acceptedFileTypes="image jpeg, image png, image heif, image heic, image/heif-sequence, image/heic-sequence, application
@@ -130,7 +130,7 @@
                   </m-flexy>
                   <m-link
                     class="pb-project-hub__section-content-link"
-                    label="Gérer vos documents"
+                    label="Gérer les documents"
                     @click="$router.push({ name: 'PbDocuments' })"
                   />
                 </m-container>
@@ -258,7 +258,7 @@
                 'pb-project-hub__section--hidden': !(
                   (isLoadingConfigurations || configurations.length > 0 || !!configurationsLoadError) &&
                   !isLoadingTools &&
-                  tools &&
+                  (tools || readOnly) &&
                   configurators.length !== 0
                 ),
               }"
@@ -394,7 +394,7 @@
                 <div class="pb-project-hub__section-title-container">
                   <div class="pb-project-hub__section-title">{{ titlePhotoInspiration }}</div>
                   <pb-media-upload
-                    v-if="displayedInspirations && displayedInspirations.length > 0"
+                    v-if="!readOnly && displayedInspirations && displayedInspirations.length > 0"
                     storeModuleName="documents"
                     :payload="MEDIA_UPLOAD_PAYLOAD"
                     @media-uploaded="handleMediaUploaded"
@@ -442,7 +442,7 @@
                   </m-flexy>
                   <m-link
                     class="pb-project-hub__section-content-link"
-                    label="Gérer vos inspirations"
+                    label="Gérer les inspirations"
                     @click="$router.push({ name: 'PbInspirations' })"
                   />
                 </m-container>
@@ -1129,7 +1129,7 @@ export default defineComponent({
       })} à ${appointmentDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`;
       const appointmentTypeLabel = (<Record<string, string>>{
         KITCHEN_IN_STORE: 'en magasin',
-        KITCHEN_REMOTE: 'en visio-conférence',
+        KITCHEN_REMOTE: 'à distance',
       })[this.appointment.appointmentType];
       return `${prefix} le ${appointmenDateLabel} ${appointmentTypeLabel}`;
     },
@@ -1140,8 +1140,8 @@ export default defineComponent({
         : this.appointment.isPast
         ? 'Date du rendez-vous passée.'
         : this.appointment.appointmentType === 'KITCHEN_IN_STORE'
-        ? 'N’oubliez pas !'
-        : "Retrouvez le lien d'accès à la visio-conférence dans le mail qui vous est envoyé. \n" + 'N’oubliez pas !';
+        ? 'Si vous le souhaitez vous pourrez annuler le rendez-vous dans le mail qui vous a été envoyé.<br/>N’oubliez pas !'
+        : "Retrouvez le lien d'accès à la visio-conférence dans le mail qui vous a été envoyé.<br/>Si vous le souhaitez vous pourrez annuler le rendez-vous dans ce mail.<br/>N’oubliez pas !";
     },
 
     appointmentNotificationLinkLabel() {

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

@@ -117,7 +117,7 @@
         "NOT_UNDERSTOOD": {
           "code": "NOT_UNDERSTOOD",
           "viewModel": {
-            "title": "Je n’ai pas compris ce qu’on attend de moi"
+            "title": "C'est trop compliqué"
           },
           "meta": {
             "ranking": 1
@@ -135,7 +135,7 @@
         "PROJECT_UNDEFINED": {
           "code": "PROJECT_UNDEFINED",
           "viewModel": {
-            "title": "Mon projet n’est pas clair pour le moment"
+            "title": "J'ai besoin de plus de temps pour avoir les idées claires sur mon projet"
           },
           "meta": {
             "ranking": 3
@@ -144,7 +144,7 @@
         "PROJECT_STORE": {
           "code": "PROJECT_STORE",
           "viewModel": {
-            "title": "Je préfère me déplacer directement en magasin"
+            "title": "Je préfère un accompagnement en magasin pour préparer mon projet"
           },
           "meta": {
             "ranking": 4
@@ -176,16 +176,42 @@
         "title": "Merci pour votre réponse",
         "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg"
       },
-      "multiSelect": {
-        "actions": {
-          "VALIDATE": {
-            "label": "Continuer et prendre RDV",
-            "nextStep": {
-              "code": "APPOINTMENT_FORM"
-            }
+      "cards": [
+        {
+          "code": "Estimer votre projet cuisine",
+          "viewModel": {
+            "url": "https://www.leroymerlin.fr/estimez-le-cout-de-votre-prochaine-cuisine.html?leadSource=Appointment_Qualification&leadSourceDetail=Cuisine",
+            "image": "https://media.leroymerlin.fr/Capture/37/bc/a121f7e74212ad2d356fd3cf2c8a/estimer-mon-budget-cuisine5e5d20ae063b330009a4a372.jpg?width=500&auto=webp&crop=16:9",
+            "title": "Estimer votre budget cuisine en quelques clics",
+            "width": "full",
+            "widthFromM": "1of3",
+            "widthFromL": "1of3"
+          }
+        },
+        {
+          "code": "Découvrir nos gammes de cuisines",
+          "viewModel": {
+            "url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
+            "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg",
+            "title": "Découvrir nos gammes de cuisines",
+            "width": "full",
+            "widthFromM": "1of3",
+            "widthFromL": "1of3"
+          }
+        },
+        {
+          "code": "Des idées et conseils pour votre cuisine",
+          "viewModel": {
+            "value": "3",
+            "url": "https://www.leroymerlin.fr/inspiration/les-meilleures-idees-pour-chaque-piece/cuisine/",
+            "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/inspiration-cuisine.jpg",
+            "title": "Des idées et conseils pour votre cuisine",
+            "width": "full",
+            "widthFromM": "1of3",
+            "widthFromL": "1of3"
           }
         }
-      }
+      ]
     }
   },
   "LMFR_QUESTION_SCENARIO": {
@@ -606,7 +632,17 @@
           "nextStep": {
             "conditionals": [
               {
-                "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                "conditions": [
+                  "runtimeOptions.postQualificationAppointment === true && (hasAnswers('LMFR_QUESTION_SCENARIO_ADD_SIMULATION') || hasAnswers('LMFR_QUESTION_ADD_PLAN'))"
+                ],
+                "nextStep": {
+                  "code": "__END__"
+                }
+              },
+              {
+                "conditions": [
+                  "runtimeOptions.postQualificationAppointment === true && !hasAnswers('LMFR_QUESTION_SCENARIO_ADD_SIMULATION') && !hasAnswers('LMFR_QUESTION_ADD_PLAN')"
+                ],
                 "nextStep": {
                   "code": "START_LATER"
                 }
@@ -735,7 +771,17 @@
           "nextStep": {
             "conditionals": [
               {
-                "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                "conditions": [
+                  "runtimeOptions.postQualificationAppointment === true && (hasAnswers('LMFR_QUESTION_SCENARIO_ADD_SIMULATION') || hasAnswers('LMFR_QUESTION_ADD_PLAN'))"
+                ],
+                "nextStep": {
+                  "code": "__END__"
+                }
+              },
+              {
+                "conditions": [
+                  "runtimeOptions.postQualificationAppointment === true && !hasAnswers('LMFR_QUESTION_SCENARIO_ADD_SIMULATION') && !hasAnswers('LMFR_QUESTION_ADD_PLAN')"
+                ],
                 "nextStep": {
                   "code": "START_LATER"
                 }
@@ -958,7 +1004,7 @@
         "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/mail_80.svg",
         "description": [
           {
-            "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png",
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/picto_plan_pour-espace-projet-compte.png",
             "label": "Retrouvez votre projet dans votre compte Leroy Merlin, vous pourrez encore ajouter des plans et photos."
           },
           {
@@ -971,7 +1017,7 @@
         {
           "code": "Retrouver mon projet dans mon compte Leroy Merlin",
           "viewModel": {
-            "url": "https://www.leroymerlin.fr/espace-perso/espace-projets.html#/projects/@@PB_PROJECT_ID_FILLER@@",
+            "url": "/espace-perso/espace-projets.html#/projects/@@PB_PROJECT_ID_FILLER@@",
             "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/Qualif-RDV-VAD-%20Conseiller-de-vente.png",
             "title": "Retrouver mon projet dans mon compte Leroy Merlin",
             "width": "full",
@@ -1017,7 +1063,7 @@
         "description": [
           {
             "label": "Retrouvez votre projet dans votre compte Leroy Merlin, vous pourrez encore ajouter des plans et photos",
-            "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/picto_plan_pour-espace-projet-compte.png"
           },
           {
             "label": "Votre conseiller a accès à vos plans et informations utiles pour le rendez-vous.",
@@ -1051,18 +1097,24 @@
       "viewModel": {
         "title": "Les informations de votre projet ont été mises à jour",
         "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg",
-        "description": {
-          "label": "Votre conseiller aura accès à vos plans et informations utiles pour le rendez-vous. Si vous souhaitez encore ajouter des plans retrouvez votre projet dans votre compte Leroy Merlin.",
-          "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
-        }
+        "description": [
+          {
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/picto_plan_pour-espace-projet-compte.png",
+            "label": "Retrouvez votre projet dans votre compte Leroy Merlin, vous pourrez encore modifier vos informations, ajouter des plans ou des photos."
+          },
+          {
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png",
+            "label": "Votre conseiller a accès à vos plans et informations utiles pour le rendez-vous."
+          }
+        ]
       },
       "cards": [
         {
-          "code": "Estimer votre budget cuisine en quelques clics",
+          "code": "Retrouver mon projet dans mon compte Leroy Merlin",
           "viewModel": {
-            "url": "https://www.leroymerlin.fr/estimez-le-cout-de-votre-prochaine-cuisine.html?leadSource=Appointment_Qualification&leadSourceDetail=Cuisine",
-            "image": "https://media.leroymerlin.fr/Capture/37/bc/a121f7e74212ad2d356fd3cf2c8a/estimer-mon-budget-cuisine5e5d20ae063b330009a4a372.jpg?width=500&auto=webp&crop=16:9",
-            "title": "Estimer votre budget cuisine en quelques clics",
+            "url": "/espace-perso/espace-projets.html#/projects/@@PB_PROJECT_ID_FILLER@@",
+            "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/Qualif-RDV-VAD-%20Conseiller-de-vente.png",
+            "title": "Retrouver mon projet dans mon compte Leroy Merlin",
             "width": "full",
             "widthFromM": "1of3",
             "widthFromL": "1of3"

package/src/services/scenarioConditionals.ts

@@ -17,13 +17,18 @@ const Condition = (
       }) > -1
     );
   };
+  const hasAnswers = (questionCode: string) => {
+    const questionAnswers = answers.get(questionCode)!;
+    return questionAnswers.length > 0;
+  };
   const isValid: boolean = new Function(
     'isAnswerMatching',
     'isAnswerContaining',
+    'hasAnswers',
     'answers',
     'runtimeOptions',
     `return ${condition}`,
-  ).call(this, isAnswerMatching, isAnswerContaining, answers, runtimeOptions);
+  ).call(this, isAnswerMatching, isAnswerContaining, hasAnswers, answers, runtimeOptions);
   return { isValid };
 };
 

package/src/stores/modules/appointmentQualificationStore.ts

@@ -19,6 +19,7 @@ export interface AppointmentQualificationState {
   isAppointmentsError: boolean;
   currentAppointmentQualification: any;
   sessions: any;
+  isQualificationAborted: boolean;
 }
 
 type AppointmentQualificationContext = ActionContext<AppointmentQualificationState, State>;
@@ -27,6 +28,7 @@ export default {
   namespaced: true,
 
   state: {
+    clicRDVBaseUrl: '',
     createProjectError: null,
     isLoadingProject: false,
     appointmentLinkedError: null,
@@ -35,6 +37,7 @@ export default {
     isAppointmentsError: false,
     currentAppointmentQualification: {},
     sessions: {},
+    isQualificationAborted: false,
   },
 
   getters: {
@@ -59,6 +62,9 @@ export default {
     getClicRDVBaseUrl(state: AppointmentQualificationState) {
       return state.clicRDVBaseUrl;
     },
+    isQualificationAborted(state: AppointmentQualificationState) {
+      return state.isQualificationAborted;
+    },
   },
 
   mutations: {
@@ -83,6 +89,9 @@ export default {
     setClicRDVBaseUrl(state: AppointmentQualificationState, baseURL: any) {
       state.clicRDVBaseUrl = baseURL;
     },
+    setIsQualificationAborted(state: AppointmentQualificationState, isQualificationAborted: boolean) {
+      state.isQualificationAborted = isQualificationAborted;
+    },
   },
 
   actions: {
@@ -169,10 +178,7 @@ export default {
           },
           correlationId: state.sessions.correlationId,
         };
-        const result = await linkInhabitantProjectToAppointmentQualification(
-          state.currentAppointmentQualification.inhabitantProjectId,
-          data,
-        );
+        const result = await linkInhabitantProjectToAppointmentQualification(state.sessions.inhabitantProjectId, data);
         commit('setCurrentAppointmentQualification', result);
         commit('setIsLoadingProject', false);
       } catch (e) {
@@ -202,5 +208,11 @@ export default {
         commit('setClicRDVBaseUrl', 'https://www.clicrdv.com');
       }
     },
+    abortQualification({ commit }: AppointmentQualificationContext, abort: boolean) {
+      commit('setIsQualificationAborted', abort);
+      if (abort) {
+        commit('setCurrentAppointmentQualification', null);
+      }
+    },
   },
 };