project-booster-vue 10.3.0 → 10.3.1

package/package.json

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

package/src/components/projects/project-attributes/PbProjectAttributes.vue

@@ -105,10 +105,6 @@
 
     <ul class="pb-project-attributes__works">
       <template v-for="[attributeId, attribute] of displayedProjectAttributes" :key="attributeId">
-        <template v-if="attributeId === 'works'">
-          <li v-if="isArray(attribute.value)" v-for="value in JSON.parse(attribute.value)">{{ works[value] }}</li>
-          <li v-else>{{ works[attribute.value] }}</li>
-        </template>
         <template v-if="attributeId === 'bathroomStyle'">
           <li v-if="isArray(attribute.value)" v-for="value in JSON.parse(attribute.value)">
             Style: {{ bathroomStyle[value] }}

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

@@ -103,11 +103,13 @@ const handleCloseModal = () => {
 };
 
 const handleShowModal = (option: any) => {
-  sendAnalyticEvent(store, EventName.CLICK, {
-    button_name: option.viewModel.button.label || '',
-    button_location: '',
-    button_type: ButtonType.ACTION,
-  });
+  if (props.payload.viewModel.analytics.funnel_name) {
+    sendAnalyticEvent(store, EventName.CLICK, {
+      button_name: option.viewModel.button.label || '',
+      button_location: props.payload.viewModel.analytics.funnel_name,
+      button_type: ButtonType.ACTION,
+    });
+  }
 
   if (option.viewModel.button.dialog) {
     showModal.value = true;
@@ -123,17 +125,19 @@ const handleShowModal = (option: any) => {
  * @param action
  */
 const callAction = (button: PayloadAction) => {
-  sendAnalyticEvent(store, EventName.CLICK, {
-    button_name: button.label || '',
-    button_location: '',
-    button_type: ButtonType.ACTION,
-  });
-
-  if (button.code != '__BACK__') {
+  if (button.nextStep.code != '__BACK__') {
     emit('step-completed', {
       answers: null,
-      nextStep: button,
+      nextStep: button.code,
     });
+
+    if (props.payload.viewModel.analytics.funnel_name) {
+      sendAnalyticEvent(store, EventName.CLICK, {
+        button_name: button.label || '',
+        button_location: props.payload.viewModel.analytics.funnel_name,
+        button_type: ButtonType.ACTION,
+      });
+    }
   } else {
     emit('go-back');
   }

package/src/components/rework/cards/MPbCards.vue

@@ -5,7 +5,7 @@
       disabled ? 'pb-card--disabled' : ''
     }${flattened ? 'pb-card--no-pointer-events' : ''} ${
       cardMinRatio && cardMinRatio !== 'auto' ? 'm-ratio-container--' + cardMinRatio : ''
-    }${borderTop ? 'pb-card--border-top' : ''} ${selected ? 'select' : ''}`"
+    }${borderTop ? 'pb-card--border-top' : ''} ${selected ? 'select' : ''} ${image ? '' : 'no-image'}`"
     :role="!buttonLabel ? 'button' : 'article'"
     :style="`min-height: ${cardMinHeight};`"
     @click="handleCardClick"
@@ -354,10 +354,14 @@ $responsive-breakpoint: 's';
   background-color: white;
   overflow: hidden;
   position: relative;
-  border: 2px solid #bab6bc;
+  border: 1px solid #bab6bc;
 
   &.select {
-    border-color: $color-primary-01-500;
+    box-shadow: 0 0 0 4px #ebf5de, inset 0 0 0 2px #46a610;
+  }
+
+  &.no-image {
+    padding-right: $mu250;
   }
 
   &--border-top {
@@ -381,6 +385,16 @@ $responsive-breakpoint: 's';
     }
   }
 
+  &__image-container {
+    padding: $mu050 $mu050 0 $mu050;
+    position: relative;
+    width: 100%;
+
+    & > div {
+      border-radius: 5px;
+    }
+  }
+
   &__items-container:empty ~ &__image-container {
     height: 100%;
 
@@ -407,11 +421,6 @@ $responsive-breakpoint: 's';
       filter: grayscale(100%);
     }
 
-    &-container {
-      position: relative;
-      width: 100%;
-    }
-
     &-title-container {
       background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.7));
       background-position: center;

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

@@ -27,12 +27,14 @@
 
         <m-flexy class="pb-question__answers-container-flexy">
           <transition-group :class="`pb-question__answers`" :name="showMoreAnimation" tag="div">
-            <m-flexy-col
+            <div
               v-for="answer in displayedAnswers"
               :key="`pb-question__answers-${answer.code}`"
-              :width="payload.viewModel.forceOneCardPerLineOnMobile ? 'full' : '1of3'"
-              :width-from-m="payload.viewModel.widthFromM ? payload.viewModel.widthFromM : '1of3'"
-              :width-from-l="payload.viewModel.widthFromL ? payload.viewModel.widthFromL : '1of4'"
+              :class="`
+                ${payload.viewModel.forceOneCardPerLineOnMobile ? 'column-full' : 'column-1of3'} 
+                ${payload.viewModel.widthFromM ? 'column-' + payload.viewModel.widthFromM : 'column-1of3'}
+                ${payload.viewModel.widthFromL ? 'column-' + payload.viewModel.widthFromL : 'column-1of4'}
+              `"
             >
               <div class="pb-question__answer">
                 <component
@@ -111,7 +113,7 @@
                   @click="selectAnswer(payload.code, answer)"
                 />
               </div>
-            </m-flexy-col>
+            </div>
           </transition-group>
           <m-flex v-if="showMoreButtonDisplayed" class="pb-question__show-more-container" justify-content="center">
             <m-button
@@ -230,7 +232,7 @@
               size-from-l="l"
               icon="ArrowNext48"
               iconPosition="right"
-              label="Etape suivante"
+              label="Étape suivante"
               @click="nextStepHandler"
               :disabled="!hasAnswersSelected"
             />
@@ -1092,6 +1094,7 @@ $answers-apparition-duration: '0.5s';
     margin: 0 auto;
     max-width: 1024px;
     width: 100%;
+    padding: 0 $mu050;
 
     &--centered {
       @include set-from-screen($responsive-breakpoint) {
@@ -1117,7 +1120,7 @@ $answers-apparition-duration: '0.5s';
     padding: $mu050;
 
     @include set-from-screen($responsive-breakpoint) {
-      padding: $mu100;
+      padding: $mu050;
     }
 
     :deep(.pb-question__answer__component) {
@@ -1193,7 +1196,7 @@ $answers-apparition-duration: '0.5s';
   }
 
   &__sticky-footer {
-    margin: 0 #{-$mu050};
+    margin: $mu200 #{-$mu050} 0 #{-$mu050};
     width: calc(100% + 2 * #{$mu050});
   }
 

package/src/components/rework/styles/global.scss

@@ -16,4 +16,12 @@
     &.column-reverse {
         flex-direction: column-reverse;
     }
+}
+
+.column-1of3{
+    width: calc(100% / 3);
+}
+
+.column-auto{
+    width: auto;
 }

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

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

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

@@ -45,7 +45,7 @@
         "label": "Que souhaitez-vous installer ou remplacer dans votre salle de bains ?",
         "answersComponent": "MPbCard",
         "progressBar": true,
-        "widthFromL": "1of3",
+        "widthFromL": "auto",
         "widthXlSize": true,
         "hideBackButton": true,
         "forceOneCardPerLineOnMobile": true,
@@ -140,7 +140,7 @@
         "SHOWER": {
           "code": "SHOWER",
           "viewModel": {
-            "title": "Douche & colonne"
+            "title": "Douche"
           },
           "meta": {
             "ranking": 2
@@ -185,7 +185,7 @@
         "REPLACE_BATHTUB_TO_SHOWER": {
           "code": "REPLACE_BATHTUB_TO_SHOWER",
           "viewModel": {
-            "title": "Une douche à la <br> place d’une baignoire"
+            "title": "Une douche à la place d’une baignoire"
           },
           "meta": {
             "ranking": 7
@@ -844,10 +844,11 @@
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
         "widthXlSize": true,
-        "widthFromL": "1of3",
+        "widthFromL": "auto",
         "label": "Partagez votre plan de salle de bains",
         "subtitle": "Le plan de votre salle de bains est indispensable en amont du RDV. Cela permettra à votre conseiller de préparer au mieux votre projet. Formats acceptés : .jpg .jpeg .pdf .png 56Go max."
       },
+
       "answers": {
         "DOWNLOAD_PLAN": {
           "code": "DOWNLOAD_PLAN",
@@ -1214,7 +1215,7 @@
         "IN_MORE_THAN_SIX_MONTHS": {
           "code": "IN_MORE_THAN_SIX_MONTHS",
           "viewModel": {
-            "title": "Plus de 6 mois"
+            "title": "Dans plus de 6 mois"
           },
           "meta": {
             "ranking": 2
@@ -1343,7 +1344,7 @@
         "widthFromL": "1of3",
         "widthXlSize": true,
         "label": "Quel budget souhaitez-vous investir dans les travaux ?",
-        "subtitle": "Ces tranches de budgets ne couvrent que le coût des matériaux pour votre projet. Les frais de main d’oeuvre, ou tout autre coût associé, ne sont pas couverts ici. "
+        "subtitle": "Il s’agit du coût total de votre projet, y compris les frais de main d’oeuvre et le coût des matériaux. La main d’oeuvre représente pour plus de 60% du budget total."
       },
       "answers": {
         "BETWEEN_5000_AND_7000_EUROS_BY_A_PROFESSIONAL": {
@@ -1385,7 +1386,7 @@
           "code": "MORE_THAN_6000_EUROS",
           "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_MYSELF')"],
           "viewModel": {
-            "title": "Plus de 10 000€"
+            "title": "Plus de 6 000€"
           }
         },
         "BETWEEN_5000_AND_7000_EUROS_BY_A_LEROYMERLIN_PARTNER": {