project-booster-vue 10.2.4 → 10.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "10.2.4",
+  "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/PbScenario.vue

@@ -63,6 +63,7 @@
             completed-event-name="step-completed"
             :sticky-bottom-offset="stickyBottomOffset()"
             :min-height="minHeight"
+            :is-collaborator="isCollaborator"
             @step-completed="handleStepCompleted"
             @update-selected="handleSemiUpdateSelected"
             @redirection="handleRedirection"
@@ -235,6 +236,14 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
+    /**
+     * Indicates whether the authenticated user is a collaborator
+     */
+    isCollaborator: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
 
   setup(props, { emit }) {

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": {

package/src/components/trezor/PbTrezor.vue

@@ -136,6 +136,36 @@
 
         <div class="ml-flexy">
           <div class="pb-trezor__form__col ml-flexy__col--5of6 no-padding">
+            <m-flex v-if="isCollaborator" class="pb-trezor__form__row space" direction="column">
+              <label class="pb-trezor__form__label"
+                >Partenaire à privilégier<span> *sous réserve de disponibilité</span></label
+              >
+              <div class="pb-trezor__form__cards-container">
+                <m-pb-card
+                  v-for="partner in partners"
+                  :key="partner.id"
+                  :title="partner.name"
+                  :selected="formData.values.selectedPreferredPartner == partner.id"
+                  @card-click="handleSelectPartner(partner)"
+                />
+              </div>
+            </m-flex>
+
+            <m-flex v-if="isCollaborator" class="pb-trezor__form__row space" direction="column">
+              <label class="pb-trezor__form__label"
+                >Commentaire du collaborateur<span> *minimum 10 caractères</span></label
+              >
+              <div class="pb-trezor__form__textarea-container">
+                <textarea
+                  class="pb-trezor__textarea"
+                  v-model="formData.values.comment"
+                  placeholder="Votre texte ici.."
+                  :required="false"
+                  rows="5"
+                />
+              </div>
+            </m-flex>
+
             <m-flex class="pb-trezor__form__row space" direction="column">
               <label class="pb-trezor__form__label"><span>obligatoire</span></label>
               <div class="pb-trezor__form__checkbox-container">
@@ -207,7 +237,7 @@
     <template #default>
       <h4>Nos partenaires sont :</h4>
       <ul>
-        <li v-for="(partner, i) in partners" :key="'partner_' + i">{{ partner }}</li>
+        <li v-for="(partner, i) in partners" :key="'partner_' + i">{{ partner.name }}</li>
       </ul>
     </template>
     <template #footer>
@@ -225,6 +255,7 @@ import MCheckbox from '../mozaic/checkbox/MCheckbox.vue';
 import MLink from '../mozaic/link/MLink.vue';
 import MTextInput from '../mozaic/text-input/MTextInput.vue';
 import MRadio from '../mozaic/radio/MRadio.vue';
+import MPbCard from '../rework/cards/MPbCards.vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { object, string, boolean, number } from 'yup';
 import { TrezorInterface } from './PbTrezorInterface';
@@ -246,6 +277,7 @@ export default defineComponent({
     MLink,
     MRadio,
     MModal,
+    MPbCard,
   },
   props: {
     /**
@@ -285,6 +317,14 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    /**
+     * Indicates whether the authenticated user is a collaborator
+     */
+    isCollaborator: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   setup(props, { emit }) {
     const store = useStore();
@@ -350,6 +390,8 @@ export default defineComponent({
         optin: false,
         optinPartners: false,
         optinOffers: false,
+        selectedPreferredPartner: null,
+        comment: undefined,
       },
       errors: {},
     });
@@ -377,6 +419,8 @@ export default defineComponent({
         return formData.value.values.optinPartners === true;
       }),
       optinOffers: boolean(),
+      selectedPreferredPartner: number().integer().min(1).nullable(true),
+      comment: string().notRequired().nullable(true),
     });
 
     const isSubmitDisabled = ref(false);
@@ -405,6 +449,8 @@ export default defineComponent({
               optinPartners: formData.value.values.optinPartners,
               optinOffers: formData.value.values.optinOffers,
               metadata: sendingMetadata,
+              description: formData.values.comment,
+              preferredCompany: formData.values.selectedPreferredPartner,
             },
             typeLead: props.payload.viewModel.typeLead,
           });
@@ -437,7 +483,7 @@ export default defineComponent({
       }
     };
 
-    // MODAL
+    // Partners
     let showModal = ref(false);
 
     store.dispatch('trezor/loadPartners', {
@@ -446,6 +492,10 @@ export default defineComponent({
 
     const partners = computed(() => store.getters['trezor/getPartners']);
 
+    const handleSelectPartner = (partner: any) => {
+      formData.value.values.selectedPreferredPartner = partner.id;
+    };
+
     return {
       formData,
       callAction,
@@ -454,6 +504,7 @@ export default defineComponent({
       showModal,
       partners,
       isSubmitDisabled,
+      handleSelectPartner,
     };
   },
 });
@@ -503,6 +554,10 @@ $responsive-breakpoint: 'm';
     width: 100%;
   }
 
+  &__textarea {
+    width: 100%;
+  }
+
   &__form {
     padding: 30px;
     width: calc(100% - 60px);
@@ -529,6 +584,29 @@ $responsive-breakpoint: 'm';
       }
     }
 
+    &__textarea-container {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+
+      &__label {
+        font-family: LeroyMerlin, sans-serif;
+        margin-left: 0.5rem;
+      }
+    }
+
+    &__cards-container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 1.5rem;
+
+      &__label {
+        font-family: LeroyMerlin, sans-serif;
+        margin-left: 0.5rem;
+      }
+    }
+
     &__radio {
       margin-right: 15px;
     }

package/src/stores/modules/trezorStore.ts

@@ -50,8 +50,8 @@ export default {
             if (response.data.status == 998) {
               return 'LEAD_DUPLICATED';
             }
-
             return 'LEAD_CREATED_SUCCESSFULLY';
+
           case 400:
             return 'LEAD_CREATION_FAILED_DUE_TO_QUOTA';