project-booster-vue 10.24.0 → 10.24.2

package/package.json

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

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

@@ -87,13 +87,16 @@
             BETWEEN_1500_AND_2000_EUROS: '1500-2000 €',
             BETWEEN_2000_AND_3000_EUROS: '2000-3000 €',
             BETWEEN_3000_AND_4000_EUROS: '3000-4000 €',
+            BETWEEN_2000_AND_6000_EUROS: '2000-6000 €',
             BETWEEN_3000_AND_6000_EUROS: '3000-6000€',
             BETWEEN_4000_AND_5000_EUROS: '4000-5000 €',
             MORE_THAN_5000_EUROS: 'Plus de 5000 €',
             BETWEEN_5000_AND_7000_EUROS: '5000-7000€',
             MORE_THAN_6000_EUROS: 'Plus de 6000€',
+            BETWEEN_6000_AND_12000_EUROS: '6000-12000€',
             BETWEEN_7000_AND_10000_EUROS: '7000-10000€',
             MORE_THAN_10000_EUROS: 'Plus de 10000€',
+            MORE_THAN_12000_EUROS: 'Plus de 12000€',
             DO_NOT_KNOW_YET: 'Pas d\'idée de budget',
           }[attribute.value]
         "
@@ -107,30 +110,95 @@
       <template v-for="[attributeId, attribute] of displayedProjectAttributes" :key="attributeId">
         <template v-if="attributeId === 'bathroomStyle'">
           <li v-if="isArray(attribute.value)" v-for="value in JSON.parse(attribute.value)">
-            Style: {{ bathroomStyle[value] }}
+            Salle de bain - Style : <span>{{ bathroomStyle[value] }}</span>
+          </li>
+          <li v-else>
+            Style : <span>{{ bathroomStyle[attribute.value] }}</span>
           </li>
-          <li v-else>Style: {{ bathroomStyle[attribute.value] }}</li>
         </template>
-        <li v-if="attributeId === 'bathTubStyle'">Type de baignoire: {{ bathTubStyle[attribute.value] }}</li>
-        <li v-if="attributeId === 'showerType'">Type de douche: {{ showerType[attribute.value] }}</li>
+        <li v-if="attributeId === 'bathTubStyle'">
+          Baignoire - Type : <span>{{ bathTubStyle[attribute.value] }}</span>
+        </li>
+        <li v-if="attributeId === 'showerType'">
+          Douche - Type : <span>{{ showerType[attribute.value] }}</span>
+        </li>
         <template v-if="attributeId === 'furnitureType'">
           <li v-if="isArray(attribute.value)" v-for="value in JSON.parse(attribute.value)">
-            Type de meubles: {{ furnitureType[value] }}
+            Meuble - Type : <span>{{ furnitureType[value] }}</span>
+          </li>
+          <li v-else>
+            Meuble - Type : <span>{{ furnitureType[attribute.value] }}</span>
+          </li>
+        </template>
+        <li v-if="attributeId === 'wcType'">
+          WC - Type : <span>{{ wcType[attribute.value] }}</span>
+        </li>
+
+        <template v-if="attributeId === 'terraceType'">
+          <li>
+            Terrasse - Style : <span>{{ terraceType[attribute.value] }}</span>
+          </li>
+        </template>
+        <template v-if="attributeId === 'terraceSupportType'">
+          <li>
+            Terrasse - Support : <span>{{ terraceSupportType[attribute.value] }}</span>
+          </li>
+        </template>
+        <template v-if="attributeId === 'terraceMaterialType'">
+          <li>
+            Terrasse - Matériau : <span>{{ terraceMaterialType[attribute.value] }}</span>
+          </li>
+        </template>
+
+        <template v-if="attributeId === 'gateType'">
+          <li>
+            Portail - Type : <span>{{ gateType[attribute.value] }}</span>
+          </li>
+        </template>
+        <template v-if="attributeId === 'gateMotorized'">
+          <li>
+            Portail - Motoriser : <span>{{ gateMotorized[attribute.value] }}</span>
+          </li>
+        </template>
+        <template v-if="attributeId === 'gateMaterialType'">
+          <li>
+            Portail - Matériau : <span>{{ gateMaterialType[attribute.value] }}</span>
+          </li>
+        </template>
+
+        <template v-if="attributeId === 'fenceType'">
+          <li>
+            Clôture - Type : <span>{{ fenceType[attribute.value] }}</span>
+          </li>
+        </template>
+        <template v-if="attributeId === 'fenceMaterialType'">
+          <li>
+            Clôture - Matériau : <span>{{ fenceMaterialType[attribute.value] }}</span>
+          </li>
+        </template>
+
+        <template v-if="attributeId === 'bioclimaticPergolaType'">
+          <li>
+            Pergola bioclimatique - Type : <span>{{ bioclimaticPergolaType[attribute.value] }}</span>
+          </li>
+        </template>
+        <template v-if="attributeId === 'bioclimaticPergolaMotorized'">
+          <li>
+            Pergola bioclimatique - Motoriser : <span>{{ bioclimaticPergolaMotorized[attribute.value] }}</span>
+          </li>
+        </template>
+        <template v-if="attributeId === 'bioclimaticPergolaMaterialType'">
+          <li>
+            Pergola bioclimatique - Matériau : <span>{{ bioclimaticPergolaMaterialType[attribute.value] }}</span>
           </li>
-          <li v-else>Type de meubles: {{ furnitureType[attribute.value] }}</li>
         </template>
-        <li v-if="attributeId === 'wcType'">Type de WC: {{ wcType[attribute.value] }}</li>
       </template>
     </ul>
 
     <div class="pb-project-attributes__section-title">Détails</div>
 
-    <div
-      class="pb-project-attributes__details"
-      v-for="[attributeId, attribute] of displayedProjectAttributes"
-      :key="attributeId"
-    >
-      <p v-if="attributeId === 'comment'" v-html="attribute.value"></p>
+    <div class="pb-project-attributes__details" v-if="getCommentAttribute">
+      <p v-html="getCommentAttribute"></p>
     </div>
   </m-flexy>
 </template>
@@ -147,6 +215,9 @@ export default defineComponent({
 
   data() {
     return {
+      /**
+       * Bathroom appointment qualification
+       */
       works: {
         FURNITURES: 'Meubles',
         SHOWER: 'Douche',
@@ -189,6 +260,67 @@ export default defineComponent({
         TO_PUT: 'A poser',
         DOUBLE_BASIN: 'Suspendu',
       },
+
+      /**
+       * Garden appointment qualification
+       */
+      terraceType: {
+        RECTANGLE: 'Aluminium',
+        IN_L: 'Bois',
+        OTHER: 'Acier',
+      },
+      terraceSupportType: {
+        CONCRETE: 'Béton',
+        SOFT_GROUND: 'Sol meuble',
+      },
+      terraceMaterialType: {
+        WOOD: 'Bois',
+        COMPOSITE: 'Composite',
+        TILE: 'Aluminium',
+        MINERAL: 'Minéral',
+      },
+
+      gateType: {
+        SWING: 'Battant',
+        SLIDING: 'Coulissant',
+      },
+      gateMotorized: {
+        YES: 'Oui',
+        NO: 'Non',
+      },
+      gateMaterialType: {
+        WOOD: 'Bois',
+        COMPOSITE: 'Composite',
+        PVC: 'PVC',
+      },
+
+      fenceType: {
+        REAR_OR_SIDE: 'Clôture arrière ou latérale au logement',
+        FRONT: 'Clôture devant le logement',
+        ALL_AROUND: 'Clôture tout autour du logement',
+      },
+      fenceMaterialType: {
+        WOOD: 'Bois',
+        COMPOSITE: 'Composite',
+        PVC: 'PVC',
+        ALUMINIUM: 'Aluminium',
+        CONCRETE: 'Béton',
+        GLASS: 'Verre',
+        FENCE: 'Grillage',
+      },
+
+      bioclimaticPergolaType: {
+        SELF_SUPPORTING: 'Auto-portante',
+        ATTACHED: 'Attenante à la maison',
+      },
+      bioclimaticPergolaMotorized: {
+        YES: 'Oui',
+        NO: 'Non',
+      },
+      bioclimaticPergolaMaterialType: {
+        STEEL: 'Acier',
+        ALUMINIUM: 'Aluminium',
+      },
     };
   },
 
@@ -212,6 +344,13 @@ export default defineComponent({
     displayedProjectAttributes() {
       return Object.entries(this.projectAttributes);
     },
+
+    getCommentAttribute(): string | null {
+      const commentAttribute = Object.entries(this.projectAttributes).find(
+        ([attributeId]) => attributeId === 'comment',
+      );
+      return commentAttribute ? commentAttribute[1].value : null;
+    },
   },
 });
 </script>
@@ -261,6 +400,10 @@ $responsive-breakpoint: 'l';
       border-bottom: 1px solid $color-primary-02-200;
       width: 100%;
     }
+
+    span {
+      font-weight: 400;
+    }
   }
 }
 </style>

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

@@ -52,7 +52,21 @@
                     :href="payload.viewModel.download.href"
                     :download="payload.viewModel.download.fileName ? '' : ''"
                   >
-                    <img :src="DownloadIcon" alt="download" style="width: 24px" />
+                    <svg
+                      aria-hidden="true"
+                      width="24px"
+                      height="24px"
+                      fill="#454545"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M11.29 15.71a1 1 0 001.42 0l4-4a1 1 0 00-1.42-1.42L13 12.59V3a1 1 0 00-2 0v9.59l-2.29-2.3a1 1 0 10-1.42 1.42z"
+                      ></path>
+                      <path
+                        d="M19.48 13.61a1 1 0 00-1.36.4 1 1 0 00.4 1.35c.94.52 1.48 1.12 1.48 1.64 0 1.22-3.12 3-8 3s-8-1.78-8-3c0-.52.54-1.12 1.48-1.64a1 1 0 00.4-1.36 1 1 0 00-1.36-.4C2.89 14.5 2 15.71 2 17c0 2.85 4.3 5 10 5s10-2.15 10-5c0-1.29-.89-2.5-2.52-3.39z"
+                      ></path>
+                    </svg>
                     <span class="pb-upload-document__answer__download__content__text">{{
                       payload.viewModel.download.label || 'Télécharger un fichier'
                     }}</span>
@@ -123,9 +137,6 @@
 </template>
 
 <script lang="ts" setup>
-//@ts-ignore
-import DownloadIcon from '@mozaic-ds/icons/svg/Media_Download_Web_24px.svg';
-
 import { computed, onMounted, ref, PropType } from 'vue';
 import { MButton, MLink } from '@mozaic-ds/vue-3';
 import MContainer from '../../../mozaic/grid/MContainer.vue';
@@ -427,10 +438,12 @@ $answers-apparition-duration: '0.5s';
   }
 
   &__answers {
-    align-items: stretch;
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
     justify-content: flex-start;
+    align-items: stretch;
+
     margin: 0 auto;
     max-width: 1024px;
     width: 100%;
@@ -492,10 +505,10 @@ $answers-apparition-duration: '0.5s';
 
       &__content {
         align-items: center;
-        width: 21rem;
+        width: 20rem;
 
         &__text {
-          margin-left: $mu100;
+          margin-left: $mu050;
         }
       }
     }

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

@@ -1519,31 +1519,22 @@
     "nextStep": {
       "conditionals": [
         {
-          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_LEROYMERLIN_PARTNER')"],
-          "nextStep": {
-            "code": "LMFR_QUESTION_BUDGET_WITH_LEROYMERLIN_PARTNER"
-          }
-        },
-        {
-          "conditions": [
-            "isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_MYSELF')",
-            "isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_PROFESSIONAL')"
-          ],
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'DO_NOT_KNOW_YET')"],
           "nextStep": {
-            "code": "LMFR_QUESTION_BUDGET_WITHOUT_LEROYMERLIN_PARTNER"
+            "code": "LMFR_COMMENT"
           }
         },
         {
-          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'DO_NOT_KNOW_YET')"],
+          "conditions": ["true"],
           "nextStep": {
-            "code": "LMFR_COMMENT"
+            "code": "LMFR_QUESTION_BUDGET"
           }
         }
       ]
     }
   },
-  "LMFR_QUESTION_BUDGET_WITH_LEROYMERLIN_PARTNER": {
-    "code": "LMFR_QUESTION_BUDGET_WITH_LEROYMERLIN_PARTNER",
+  "LMFR_QUESTION_BUDGET": {
+    "code": "LMFR_QUESTION_BUDGET",
     "type": "STEP",
     "component": "MPbQuestion",
     "slots": {
@@ -1567,77 +1558,69 @@
         "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."
       },
       "answers": {
-        "BETWEEN_2000_AND_6000_EUROS": {
+        "BETWEEN_1000_AND_3000_EUROS_BY_MYSELF": {
+          "code": "BETWEEN_1000_AND_3000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_MYSELF')"],
+          "viewModel": {
+            "title": "De 1 000 € à 3 000 €"
+          }
+        },
+        "BETWEEN_3000_AND_6000_EUROS_BY_MYSELF": {
+          "code": "BETWEEN_3000_AND_6000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_MYSELF')"],
+          "viewModel": {
+            "title": "De 3 000 € à 6 000 €"
+          }
+        },
+        "MORE_THAN_6000_EUROS_BY_MYSELF": {
+          "code": "MORE_THAN_6000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_MYSELF')"],
+          "viewModel": {
+            "title": "Plus de 6 000 €"
+          }
+        },
+
+        "BETWEEN_2000_AND_6000_EUROS_BY_A_PROFESSIONAL": {
           "code": "BETWEEN_2000_AND_6000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_PROFESSIONAL')"],
           "viewModel": {
             "title": "De 2 000 € à 6 000 €"
           }
         },
-        "BETWEEN_6000_AND_12000_EUROS": {
+        "BETWEEN_6000_AND_12000_EUROS_BY_A_PROFESSIONAL": {
           "code": "BETWEEN_6000_AND_12000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_PROFESSIONAL')"],
           "viewModel": {
-            "title": "6 000 € à 12 000 €"
+            "title": "De 6 000 € à 12 000 €"
           }
         },
-        "MORE_THAN_12000_EUROS": {
+        "MORE_THAN_12000_EUROS_BY_A_PROFESSIONAL": {
           "code": "MORE_THAN_12000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_PROFESSIONAL')"],
           "viewModel": {
             "title": "Plus de 12 000 €"
           }
         },
-        "DO_NOT_KNOW_YET": {
-          "code": "DO_NOT_KNOW_YET",
-          "viewModel": {
-            "title": "Je ne sais pas"
-          }
-        }
-      }
-    },
-    "nextStep": {
-      "code": "LMFR_COMMENT"
-    }
-  },
-  "LMFR_QUESTION_BUDGET_WITHOUT_LEROYMERLIN_PARTNER": {
-    "code": "LMFR_QUESTION_BUDGET_WITHOUT_LEROYMERLIN_PARTNER",
-    "type": "STEP",
-    "component": "MPbQuestion",
-    "slots": {
-      "beforeContent": {
-        "display": true,
-        "component": "MPbProgress",
-        "totalStep": 21,
-        "currentStep": 20,
-        "sizeXlWidth": true,
-        "label": "Votre projet jardin"
-      }
-    },
-    "payload": {
-      "viewModel": {
-        "answersComponent": "MPbCard",
-        "progressBar": true,
-        "forceOneCardPerLineOnMobile": true,
-        "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."
-      },
-      "answers": {
-        "BETWEEN_1000_AND_3000_EUROS": {
-          "code": "BETWEEN_1000_AND_3000_EUROS",
+
+        "BETWEEN_2000_AND_6000_EUROS_BY_A_LEROYMERLIN_PARTNER": {
+          "code": "BETWEEN_2000_AND_6000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_LEROYMERLIN_PARTNER')"],
           "viewModel": {
-            "title": "De 1 000 € à 3 000 €"
+            "title": "De 2 000 € à 6 000 €"
           }
         },
-        "BETWEEN_3000_AND_6000_EUROS": {
-          "code": "BETWEEN_3000_AND_6000_EUROS",
+        "BETWEEN_6000_AND_12000_EUROS_BY_A_LEROYMERLIN_PARTNER": {
+          "code": "BETWEEN_6000_AND_12000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_LEROYMERLIN_PARTNER')"],
           "viewModel": {
-            "title": "3 000 € à 6 000 €"
+            "title": "De 6 000 € à 12 000 €"
           }
         },
-        "MORE_THAN_6000_EUROS": {
-          "code": "MORE_THAN_6000_EUROS",
+        "MORE_THAN_12000_EUROS_BY_A_LEROYMERLIN_PARTNER": {
+          "code": "MORE_THAN_12000_EUROS",
+          "conditions": ["isAnswerContaining('LMFR_QUESTION_INSTALLATION', 'BY_A_LEROYMERLIN_PARTNER')"],
           "viewModel": {
-            "title": "Plus de 6 000 €"
+            "title": "Plus de 12 000 €"
           }
         },
         "DO_NOT_KNOW_YET": {