project-booster-vue 10.17.2 → 10.18.0

package/package.json

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

package/src/components/landing/PbProjectsLanding.vue

@@ -217,7 +217,7 @@
           <m-flexy-col
             class="pb-projects-landing__card-container pb-projects-landing__card-container--card-fullwidth-mobile"
             width="1of2"
-            width-from-l="1of3"
+            width-from-l="1of4"
             v-for="item in toolsCards6"
             :key="item.message"
           >
@@ -435,6 +435,11 @@ export default defineComponent({
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/aide-financement.png',
           href: '/services/service-client/financement.html',
         },
+        {
+          title: 'Votre projet de rénovation à Paris',
+          image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-renovation-paris.jpg',
+          href: 'https://travaux.leroymerlin.fr/ ',
+        },
       ],
     };
   },

package/src/components/restitution/PbRestitution.vue

@@ -312,7 +312,6 @@ $space-left-mobile: $mu100;
 
   @include set-from-screen($responsive-breakpoint) {
     padding: $space-top $space-left;
-    max-width: 650px;
   }
 
   &__header {

package/src/components/rework/alert/MPbAlert.stories.mdx

@@ -35,6 +35,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<m-pb-alert
+    style="max-width:720px; margin:7.5rem auto;"
     :payload="args.payload"
   />`,
 });

package/src/components/rework/products/default-payload.json

@@ -1,6 +1,5 @@
 {
   "viewModel": {
-    "backLabel": "Question précédente",
     "label": "Estimer vos aides pour votre projet",
     "defaultProduct": {
       "designation": "Installation d'une chaudière à",

package/src/components/rework/question/MPbQuestion.stories.mdx

@@ -66,6 +66,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<m-pb-question
+    style="max-width:720px; margin: auto;"
     :payload="args.payload"
     :show-back-button="args.showBackButton"
     :answers="args.answers"

package/src/components/rework/question/incremental-amount-input/MPbIncrementalAmountInput.stories.mdx

@@ -36,6 +36,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<m-pb-incremental-amount-input
+    style="max-width:720px; margin:auto;"
     :payload="args.payload"
     :show-back-button="args.showBackButton"
     :completed-event-name="args.completedEventName"

package/src/components/rework/question/space-input/MPbSpaceInput.stories.mdx

@@ -62,6 +62,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<m-pb-space-input
+    style="max-width:720px; margin: auto"
     :payload="args.payload"
     :show-back-button="args.showBackButton"
     :answers="args.answers"

package/src/components/scenario/PbScenario.vue

@@ -22,7 +22,11 @@
         />
       </div>
     </transition>
-    <div class="pb-scenario__step-container" :style="`min-height: ${minHeight};`">
+    <div
+      class="pb-scenario__step-container"
+      :class="{ auto: state?.displayedStep?.slots?.beforeContent?.component !== 'MPbProgress' }"
+      :style="`min-height: ${minHeight};`"
+    >
       <div class="pb-scenario__step-container__before">
         <div
           class="pb-scenario__step-container__before-step xl"
@@ -799,19 +803,15 @@ $slide-sticky-bottom-animation-delay: $slide-animation-duration + 0.45s;
     @include set-from-screen($responsive-breakpoint) {
       width: 720px;
       margin: 7.5rem auto 0;
+
+      &.auto {
+        width: auto;
+      }
     }
 
     &__before-step {
       width: 100%;
       margin: 0 auto;
-
-      @include set-from-screen($responsive-breakpoint) {
-        width: 561px;
-
-        &.xl {
-          width: 719px;
-        }
-      }
     }
   }
 

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

@@ -233,7 +233,8 @@
         "label": "Avez-vous une idée du budget de votre cuisine (mobilier et équipements) ?",
         "subtitle": "Votre conseiller veillera à respecter votre budget",
         "forceOneCardPerLineOnMobile": true,
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "widthFromL": "auto"
       },
       "answers": {
         "BETWEEN_1500_AND_2000_EUROS": {
@@ -457,22 +458,13 @@
     "code": "LMFR_QUESTION_SCENARIO_NO_SIMULATION",
     "type": "STEP",
     "component": "MPbQuestion",
-    "slots": {
-      "beforeContent": {
-        "display": true,
-        "component": "MPbProgress",
-        "totalStep": 7,
-        "currentStep": 6,
-        "sizeXlWidth": true,
-        "label": "Votre projet cuisine"
-      }
-    },
     "payload": {
       "viewModel": {
         "label": "Veuillez-nous excuser, nous n’avons trouvé aucun plan",
         "widthFromL": "1of3",
         "forceOneCardPerLineOnMobile": true,
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "hideNextStep": true
       },
       "answers": {
         "NO_PLAN": {
@@ -608,7 +600,7 @@
       "skippable": [
         {
           "isAnswer": false,
-          "label": "Ajouter un plan plus tard",
+          "label": "Passer l'étape",
           "theme": "text-primary",
           "width": "full",
           "widthFromM": "fit",

package/src/components/scenario/scenarii/estimator-floor.json

@@ -42,7 +42,7 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
+        "totalStep": 9,
         "currentStep": 1,
         "sizeXlWidth": true
       }
@@ -147,7 +147,7 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
+        "totalStep": 9,
         "currentStep": 2,
         "sizeXlWidth": true
       }
@@ -210,6 +210,14 @@
     "slots": {
       "stickyBottom": {
         "display": false
+      },
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 9,
+        "currentStep": 2,
+        "sizeXlWidth": true,
+        "label": "Votre projet cuisine"
       }
     },
     "payload": {
@@ -330,6 +338,14 @@
     "slots": {
       "stickyBottom": {
         "display": false
+      },
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 9,
+        "currentStep": 2,
+        "sizeXlWidth": true,
+        "label": "Votre projet cuisine"
       }
     },
     "payload": {
@@ -404,7 +420,7 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
+        "totalStep": 9,
         "currentStep": 3,
         "sizeXlWidth": true,
         "label": "Estimer vos aides pour votre projet"
@@ -594,7 +610,7 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
+        "totalStep": 9,
         "currentStep": 4,
         "sizeXlWidth": true
       }
@@ -658,8 +674,8 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
-        "currentStep": 2,
+        "totalStep": 9,
+        "currentStep": 4,
         "sizeXlWidth": true
       }
     },
@@ -738,9 +754,10 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
+        "totalStep": 9,
         "currentStep": 5,
-        "sizeXlWidth": true
+        "sizeXlWidth": true,
+        "label": "Votre projet cuisine"
       }
     },
     "payload": {
@@ -878,9 +895,10 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
-        "currentStep": 6,
-        "sizeXlWidth": true
+        "totalStep": 9,
+        "currentStep": 7,
+        "sizeXlWidth": true,
+        "label": "Votre projet cuisine"
       }
     },
     "payload": {
@@ -995,7 +1013,7 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
+        "totalStep": 9,
         "currentStep": 6,
         "sizeXlWidth": true,
         "label": "Votre projet cuisine"
@@ -1060,7 +1078,7 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
+        "totalStep": 9,
         "currentStep": 7,
         "sizeXlWidth": true
       }
@@ -1320,6 +1338,16 @@
     "nextStep": {
       "code": "LMFR_FLOOR_QUESTION_INSTALLATION"
     },
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 9,
+        "currentStep": 8,
+        "sizeXlWidth": true,
+        "label": "Votre projet cuisine"
+      }
+    },
     "payload": {
       "viewModel": {
         "label": "Quelle gamme de revêtement choisissez-vous ?",
@@ -1378,8 +1406,8 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 16,
-        "currentStep": 8,
+        "totalStep": 9,
+        "currentStep": 9,
         "sizeXlWidth": true
       }
     },

package/src/components/trezor/PbTrezor.stories.mdx

@@ -45,6 +45,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<pb-trezor
+    style="max-width:720px; margin:auto;"
     :payload="args.payload"
     :show-back-button="args.showBackButton"
     :completed-event-name="args.completedEventName"

package/src/components/trezor/PbTrezor.vue

@@ -540,7 +540,8 @@ $responsive-breakpoint: 'm';
 
 .pb-trezor {
   margin: 0 auto;
-  // max-width: 1024px;
+  max-width: 100%;
+  width: 720px;
 
   &__back-button {
     align-self: flex-start;
@@ -549,6 +550,10 @@ $responsive-breakpoint: 'm';
     transition: opacity 0.15s 0.5s;
     z-index: 2;
 
+    @include set-from-screen($responsive-breakpoint) {
+      padding: $mu100 0;
+    }
+
     &--hidden {
       opacity: 0;
       pointer-events: none;
@@ -564,9 +569,8 @@ $responsive-breakpoint: 'm';
     position: relative;
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: auto;
       padding: 0 0 $mu250 0;
-      text-align: center;
+      width: 100%;
     }
   }
 
@@ -585,7 +589,7 @@ $responsive-breakpoint: 'm';
     @include set-from-screen($responsive-breakpoint) {
       margin: auto;
       padding: 0;
-      width: 900px;
+      width: 100%;
     }
 
     &__checkbox {