project-booster-vue 10.17.0 → 10.17.2

package/package.json

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

package/src/components/restitution/PbRestitution.vue

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

package/src/components/rework/navigation/MPbNavigation.vue

@@ -90,7 +90,7 @@ const props = defineProps({
    */
   backButtonLabel: {
     type: String,
-    default: 'Précédent',
+    default: 'Étape précédente',
   },
   /**
    * Next button label

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

@@ -230,11 +230,15 @@
       <transition-group name="pb-question__actions--animated" mode="out-in">
         <div
           ref="pbQuestionActionsButtonsValidate"
-          class="pb-question__actions-container row-flex"
+          :class="`pb-question__actions-container row-flex ${!payload.viewModel?.hideNextStep ? '' : 'justify-start'}`"
           key="validate"
-          v-if="!payload.viewModel.disableNavigation"
+          v-if="!payload.viewModel?.disableNavigation"
         >
-          <div class="pb-question__actions-container__column">
+          <div
+            :class="`pb-question__actions-container__column row-flex ${
+              !payload.viewModel?.hideNextStep ? '' : 'justify-start'
+            }`"
+          >
             <m-button
               :label="backButtonLabel"
               theme="bordered-neutral"
@@ -263,7 +267,10 @@
             >
             </m-button>
           </div>
-          <div class="pb-question__actions-container__column" v-if="!skippables || hasAnswersSelected">
+          <div
+            :class="`pb-question__actions-container__column ${!payload.viewModel?.hideNextStep ? '' : 'justify-start'}`"
+            v-if="(!skippables || hasAnswersSelected) && !payload.viewModel?.hideNextStep"
+          >
             <m-button
               class="pb-question__actions-buttons-button"
               :class="{ 'js-cdl': trackingStatus }"
@@ -278,7 +285,10 @@
               :data-cdl-click="eventData"
             />
           </div>
-          <div v-else-if="skippables && !hasAnswersSelected" class="pb-question__actions-container__column">
+          <div
+            v-else-if="skippables && !hasAnswersSelected && !payload.viewModel?.hideNextStep"
+            class="pb-question__actions-container__column"
+          >
             <m-button
               v-for="button in skippables"
               :key="button?.label"
@@ -330,7 +340,7 @@
       :modalTitle="helpDialog?.viewModelDialog.watermark || helpDialog?.viewModelDialog.headerTitle"
       :open="displayDialogHelp"
       @update:open="displayDialogHelp = false"
-      class="mc-modal--overflow"
+      class="mc-modal--overflow pb-question__dialog"
       v-if="helpDialog && helpDialog?.type === 'MODAL'"
     >
       <template #default>
@@ -760,18 +770,6 @@ const activateShowMoreAnimation = () => {
   showAnswerDelay.value = 40;
 };
 
-const navigateTo = (viewModel: ScenarioStepViewModel) => {
-  if (viewModel.backLink) {
-    (<any>window).location = decorate(props.answers, props.runtimeOptions, viewModel.backLink, '');
-  } else {
-    /**
-     * Emitted when go back link is clicked
-     * @event go-back
-     */
-    $emit('go-back');
-  }
-};
-
 const handleAnswerButtonClick = (event: Event) => {
   $store.dispatch('sendEventToBus', {
     code: 'ANSWER-BUTTON-CLICKED',
@@ -1256,7 +1254,7 @@ $answers-apparition-duration: '0.5s';
         margin-bottom: $mu050;
 
         @include set-from-screen($responsive-breakpoint) {
-          justify-content: flex-end !important;
+          justify-content: flex-end;
           order: 2;
         }
       }
@@ -1497,6 +1495,14 @@ $answers-apparition-duration: '0.5s';
 $responsive-breakpoint: 'm';
 
 .pb-question {
+  &__dialog {
+    h4 {
+      @include set-font-scale('06', 'm');
+
+      margin: $mu050 0 $mu150 0;
+    }
+  }
+
   &__dialog-help {
     &__title {
       @include set-font-scale('06', 'm');
@@ -1526,7 +1532,7 @@ $responsive-breakpoint: 'm';
         background-position: center;
         background-repeat: no-repeat;
         background-size: 100% auto;
-        padding: 90px 0;
+        padding: 120px 0;
         margin-bottom: 50px;
       }
 

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

@@ -196,7 +196,7 @@ $responsive-breakpoint: 'm';
 
   flex-grow: 1;
   margin: 0 auto;
-  width: calc(100% - #{$mu200});
+  width: 100%;
   padding-top: $mu200;
 
   @include set-from-screen($responsive-breakpoint) {
@@ -265,12 +265,8 @@ $responsive-breakpoint: 'm';
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: 0 $mu050;
+    padding: 0;
     width: 100%;
-
-    @include set-from-screen($responsive-breakpoint) {
-      width: 720px;
-    }
   }
 
   &__form {

package/src/components/rework/question/space-input/MPbSpaceInput.vue

@@ -324,8 +324,7 @@ $responsive-breakpoint: 'm';
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('07', 'm');
 
-      width: 710px;
-      padding: $mu250 $mu100 $mu050 0;
+      padding: $mu250 0 $mu050 0;
       text-align: left;
     }
   }

package/src/components/rework/restitution/MPbRestitutionList.vue

@@ -334,7 +334,7 @@ $responsive-breakpoint: 'm';
 
   &__back-button {
     align-self: flex-start;
-    left: 0;
+    left: 22px;
     opacity: 1;
     padding: $mu100 0 $mu100 $mu100;
     position: absolute;

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

@@ -11,6 +11,10 @@
         }
     }
 
+    &.justify-start {
+        justify-content: flex-start !important;
+    }
+
     &.justify-center {
         justify-content: center;
     }

package/src/components/scenario/PbScenario.vue

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

package/src/components/scenario/scenarii/estimator-attic-insulation.json

@@ -2392,20 +2392,11 @@
     "code": "LMFR_ATTIC_INSULATION_ADVICE_FOR_LESSEE",
     "type": "STEP",
     "component": "MPbQuestion",
-    "slots": {
-      "beforeContent": {
-        "display": true,
-        "component": "MPbProgress",
-        "totalStep": 5,
-        "currentStep": 1,
-        "sizeXlWidth": true
-      }
-    },
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
         "answersComponent": "MPbCard",
-        "disableNavigation": true
+        "hideNextStep": true
       },
       "answers": {
         "DISCOVER_OUR_HEATERS": {

package/src/types/pb/Scenario.ts

@@ -178,6 +178,7 @@ export interface ScenarioStepViewModel {
   forceOneCardPerLineOnMobile?: boolean;
   alwaysDisplaySkippable?: boolean;
   disableNavigation?: boolean;
+  hideNextStep?: boolean;
   decoratorStripe?: {
     length: string;
   };