project-booster-vue 10.13.0 → 10.13.2

package/package.json

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

package/src/components/question/incremental-amount-input/IncrementalAmount.ts

@@ -18,6 +18,7 @@ export interface IncrementalAmountViewModel {
   minValue: number;
   maxValue: number;
   defaultValue: number;
+  nextStep?: any;
 }
 
 export interface IncrementalAmountPayload {

package/src/components/question/space-input/SpaceInput.ts

@@ -28,6 +28,7 @@ export interface SpaceInputViewModel {
     label: string;
     conditions: string[];
   };
+  nextStep?: any;
 }
 
 export interface SpaceInputPayload {

package/src/components/restitution/PbRestitutionList.vue

@@ -44,13 +44,7 @@
     </m-flex>
   </m-flex>
 
-  <m-flex
-    class="pb-restitution-list__footer"
-    direction="row"
-    align-items="center"
-    justify-content="center"
-    v-if="showButtonBar"
-  >
+  <div class="pb-restitution-list__footer" v-if="showButtonBar">
     <div class="pb-restitution-list__footer__call" v-for="button in payload.callToActions" :key="button.label">
       <m-button
         :label="button.label"
@@ -69,7 +63,7 @@
         :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'save-estimate')"
       />
     </div>
-  </m-flex>
+  </div>
 
   <div>
     <m-dialog
@@ -374,10 +368,12 @@ $responsive-breakpoint: 'm';
 
   &__title {
     @include set-font-face('semi-bold');
-    @include set-font-scale('10', 's');
+    @include set-font-scale('07', 's');
 
+    width: 100%;
     padding: $mu250 0 0 $mu100;
     text-align: left;
+    margin-top: $mu100;
 
     &::after {
       background: $color-primary-01-600;
@@ -397,6 +393,8 @@ $responsive-breakpoint: 'm';
       top: 0;
       @include set-font-scale('07', 's');
 
+      margin-top: 0;
+
       &::after {
         display: none;
       }
@@ -404,6 +402,7 @@ $responsive-breakpoint: 'm';
   }
 
   &__footer {
+    display: flex;
     background: #fff;
     bottom: 0;
     justify-self: flex-end;
@@ -414,9 +413,38 @@ $responsive-breakpoint: 'm';
     width: 100%;
     @include set-box-shadow('l');
 
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    @include set-from-screen($responsive-breakpoint) {
+      flex-direction: row;
+    }
+
     &__save,
     &__call {
       margin: 0 $mu050;
+      width: calc(100% - 1rem);
+
+      button {
+        width: 100%;
+      }
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: auto;
+        margin: 0;
+      }
+    }
+
+    &__call {
+      &:first-child {
+        margin-bottom: 10px;
+
+        @include set-from-screen($responsive-breakpoint) {
+          margin-bottom: 0;
+          margin-right: $mu050;
+        }
+      }
     }
   }
 

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

@@ -44,24 +44,7 @@
       </div>
     </div>
 
-    <div class="m-pb-alert__buttons" v-if="payload">
-      <div v-for="button in payload.callToActions" class="m-pb-alert__buttons__button row-flex">
-        <m-button
-          :label="button.label"
-          @click="callAction(button)"
-          :theme="button.theme"
-          :icon="button.icon"
-          :iconPosition="button.iconPosition"
-          style="margin-left: 1rem"
-          :data-cerberus="sanitizeCerberusAttribut('MPB-ALERT', button.label)"
-          :class="{ 'js-cdl': trackingStatus }"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent({ button_name: button.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
-          "
-        />
-      </div>
-    </div>
+    <m-pb-navigation :payload="payload" :nextButtonAction="payload.viewModel.nextStep" />
 
     <m-modal :modalTitle="titleModal" :open="showModal" @update:open="handleCloseModal" class="m-pb-alert__dialog">
       <template #default>
@@ -87,10 +70,10 @@
 <script lang="ts" setup>
 import { MNotification, MButton, MCard, MModal } from '@mozaic-ds/vue-3';
 import { PayloadAction } from '../types/genericPayload';
-import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import { EventTypeEnum, formatEvent } from '../services/event';
+import MPbNavigation from '../navigation/MPbNavigation.vue';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 const showModal = ref(false);
@@ -108,6 +91,9 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  /**
+   * Show step location
+   */
   stepLocation: {
     type: String,
     default: '',

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

@@ -7,6 +7,9 @@
       "title": "Envoyez votre plan au plus tard 48h avant le rendez-vous.",
       "content": "Nous avons besoin d’un plan pour connaitre les mesures et ouvertures de votre salle de bain actuelle. Sans ces informations, nous serons obligés d'annuler le rendez-vous."
     },
+    "nextStep": {
+      "code": "TEST"
+    },
     "exitOptions": [
       {
         "code": "CARD-1",
@@ -37,19 +40,5 @@
         }
       }
     ]
-  },
-  "callToActions": [
-    {
-      "label": "Précédent",
-      "nextStep": "Code",
-      "theme": "bordered-primary-02",
-      "icon": "ArrowBack48"
-    },
-    {
-      "label": "Etape suivante",
-      "nextStep": "Code",
-      "icon": "ArrowNext48",
-      "iconPosition": "right"
-    }
-  ]
+  }
 }

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

@@ -90,7 +90,6 @@
             {{ imageTitle }}
           </div>
         </div>
-        <div class="pb-card__image__checkbox" :class="{ active: selected }"></div>
       </div>
       <m-pb-card-selection-indicator :selectable="selectable" :selected="selected" />
       <m-pb-card-type-indicator v-if="typeIcon" :type-icon="typeIcon" />

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -72,44 +72,7 @@
       </div>
     </div>
 
-    <div class="m-pb-exit-options__buttons" v-if="payload.viewModel.nextStep">
-      <div class="m-pb-exit-options__buttons__button">
-        <m-button
-          v-if="payload.viewModel.backButton.nextStep"
-          :label="payload.viewModel.backButton.label"
-          :theme="payload.viewModel.backButton.theme"
-          @click="goToNavigation(payload.viewModel.backButton.nextStep)"
-          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
-          icon="ArrowBack48"
-          :class="{ 'js-cdl': trackingStatus }"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent(
-              { button_name: payload?.viewModel?.backButton?.label || 'Précédent', button_location: stepLocation },
-              EventTypeEnum.BUTTON,
-            )
-          "
-        />
-      </div>
-
-      <div class="m-pb-exit-options__buttons__button">
-        <m-button
-          :label="payload.viewModel.nextStep.label"
-          :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', 'NEXT')"
-          @click="goToNavigation(payload.viewModel.nextStep, payload.viewModel.nextStep.label)"
-          icon="ArrowNext48"
-          iconPosition="right"
-          :class="{ 'js-cdl': trackingStatus }"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent(
-              { button_name: payload?.viewModel?.nextStep?.label || 'Étape suivante', button_location: stepLocation },
-              EventTypeEnum.BUTTON,
-            )
-          "
-        />
-      </div>
-    </div>
+    <m-pb-navigation :nextButtonAction="payload.viewModel.nextStep" />
   </div>
 </template>
 
@@ -127,6 +90,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import merge from 'lodash.merge';
 import { decorate } from '@/services/decorate';
 import { formatEvent, EventTypeEnum } from '../services/event';
+import MPbNavigation from '../navigation/MPbNavigation.vue';
 
 const props = defineProps({
   /**

package/src/components/rework/navigation/MPbNavigation.stories.mdx

@@ -0,0 +1,48 @@
+import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import DEFAULT_PAYLOAD from './default-payload';
+import { nestedAppDecorator } from '../../../../.storybook/nested-app-decorator';
+import MPbNavigation from './MPbNavigation';
+
+<Meta
+  title="Project Booster/Rework/Navigation/MPbNavigation 🦠"
+  component={MPbNavigation}
+  argTypes={{
+    payload: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+  }}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+# 🦠 `MPbNavigation` - Component
+
+The `MPbNavigation` component to display information that user needed.
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbNavigation },
+  setup() {
+    return { args };
+  },
+  template: `<div class="row-flex align-center justify-center" style="height:100vh;"><div style="width:720px; margin:auto;"><m-pb-navigation
+    :payload="args.payload"
+  /></div></div>`,
+});
+
+## showCase
+
+<Canvas>
+  <Story inline={false} height="862px" name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,116 @@
+<template>
+  <div class="m-pb-navigation row-flex justify-between">
+    <div class="m-pb-navigation__left">
+      <m-button
+        :label="backButtonLabel"
+        @click.prevent="$emit('go-back')"
+        theme="bordered-primary-02"
+        icon="ArrowBack48"
+        :data-cerberus="sanitizeCerberusAttribut('MPB-NAVIGATION', backButtonLabel)"
+        :class="{ 'js-cdl': trackingStatus }"
+        data-cdl-click-type="cdl_event"
+        :data-cdl-click-data="
+          formatEvent({ button_name: backButtonLabel, button_location: stepLocation }, EventTypeEnum.BUTTON)
+        "
+      />
+    </div>
+    <div class="m-pb-navigation__right">
+      <m-button
+        :label="nextButtonLabel"
+        @click.prevent="
+          $emit('next-step', {
+            answers,
+            nextStep: payload.viewModel.nextStep,
+          })
+        "
+        icon="ArrowNext48"
+        iconPosition="right"
+        :data-cerberus="sanitizeCerberusAttribut('MPB-NAVIGATION', nextButtonLabel)"
+        :class="{ 'js-cdl': trackingStatus }"
+        data-cdl-click-type="cdl_event"
+        :disabled="disabledNextButton"
+        :data-cdl-click-data="
+          formatEvent({ button_name: nextButtonLabel, button_location: stepLocation }, EventTypeEnum.BUTTON)
+        "
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, defineEmits, defineProps } from 'vue';
+import { EventTypeEnum, formatEvent } from '../services/event';
+import { MButton } from '@mozaic-ds/vue-3';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { PayloadAction } from '../types/genericPayload';
+
+const $emit = defineEmits(['go-back', 'next-step']);
+
+const props = defineProps({
+  payload: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * Define step location
+   */
+  stepLocation: {
+    type: String,
+    default: '',
+  },
+  /**
+   * The previous answers to inject
+   */
+  answers: {
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+    default: () => new Map<string, ScenarioStepAnswer[]>(),
+  },
+  /**
+   * Define the location of the step in the scenario.
+   */
+  trackingStatus: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Back button label
+   */
+  backButtonLabel: {
+    type: String,
+    default: 'Précédent',
+  },
+  /**
+   * Next button label
+   */
+  nextButtonLabel: {
+    type: String,
+    default: 'Étape suivante',
+  },
+  /**
+   * Next button action
+   */
+  nextButtonAction: {
+    type: Object as PropType<PayloadAction>,
+    default: {
+      code: '',
+    },
+  },
+  /**
+   * Enable/Disabled next button
+   */
+  disabledNextButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss">
+@import 'pb-variables';
+@import '../styles/global.scss';
+
+.m-pb-navigation {
+  margin-top: $mu250;
+}
+</style>

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

@@ -0,0 +1 @@
+{}

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

@@ -228,7 +228,6 @@
         ></m-link>
       </div>
     </div>
-
     <pb-sticky-footer
       ref="pbStickyFooter"
       class="pb-question__sticky-footer"
@@ -237,7 +236,12 @@
       :intersection-observer-delay="250"
     >
       <transition-group name="pb-question__actions--animated" mode="out-in">
-        <div ref="pbQuestionActionsButtonsValidate" class="pb-question__actions-container row-flex" key="validate">
+        <div
+          ref="pbQuestionActionsButtonsValidate"
+          class="pb-question__actions-container row-flex"
+          key="validate"
+          v-if="!payload.viewModel.disableNavigation"
+        >
           <div class="pb-question__actions-container__column">
             <m-button
               label="Précédent"
@@ -434,7 +438,6 @@
 
 <script lang="ts" setup>
 import { PropType, ref, computed, watch, onMounted, defineEmits } from 'vue';
-import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { MButton } from '@mozaic-ds/vue-3';
 import MFlexy from '../../mozaic/grid/MFlexy.vue';
 import MFlexyCol from '../../mozaic/grid/MFlexyCol.vue';
@@ -460,6 +463,7 @@ import {
 import { useStore } from 'vuex';
 import { EventTypeEnum, formatEvent } from '../services/event';
 import { callAction } from '../services/navigate';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

package/src/components/rework/question/city-search/MPbCitySearch.vue

@@ -79,38 +79,16 @@
           Votre construction sera réalisée dans la commune de&nbsp;<strong>{{ selectedCity.name }}</strong>,&nbsp;<strong>{{ selectedCity.region }}</strong>.
         </span>
       </div>
-      <!-- <div class="pb-city-search__buttons-container" direction="column">
-        <m-button
-          :disabled="!selectedCity"
-          class="pb-city-search__button"
-          :label="computedPayload.viewModel.actionLabel"
-          size="l"
-          @click="handleFormValidation"
-          :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'BUTTON')"
-        />
-      </div> -->
-
-      <div class="pb-city-search__buttons-container row-flex align-center" v-if="payload">
-        <div
-          v-for="button in payload.viewModel.callToActions"
-          class="pb-city-search__buttons-container__button row-flex"
-        >
-          <m-button
-            :label="button.label"
-            @click="callAction(button)"
-            :theme="button.theme"
-            :icon="button.icon"
-            :iconPosition="button.iconPosition"
-            style="margin-left: 1rem"
-            :data-cerberus="sanitizeCerberusAttribut('MPB-SPACE-INPUT', button.label)"
-            class="js-cdl"
-            data-cdl-click-type="cdl_event"
-            :data-cdl-click-data="
-              formatEvent({ button_name: button.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
-            "
-          />
-        </div>
-      </div>
+
+      <m-pb-navigation
+        :trackingStatus="trackingStatus"
+        :answers="answers"
+        :payload="payload"
+        :nextButtonAction="payload.viewModel.nextStep"
+        :disabledNextButton="!selectedCity"
+        @go-back="$emit('go-back')"
+        @next-step="nextStep"
+      />
     </div>
   </form>
 </template>
@@ -132,6 +110,8 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { MButton, MLink } from '@mozaic-ds/vue-3';
 import { EventTypeEnum, formatEvent } from '../../services/event';
 import { PayloadAction } from '../../types/genericPayload';
+import MPbNavigation from '../../navigation/MPbNavigation.vue';
+import { callAction } from '../../services/navigate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -144,6 +124,7 @@ export default defineComponent({
     MButton,
     MLink,
     MTextInput,
+    MPbNavigation,
   },
 
   props: {
@@ -184,10 +165,20 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    /**
+     * Step location
+     */
     stepLocation: {
       type: String,
       default: '',
     },
+    /**
+     * Define the location of the step in the scenario.
+     */
+    trackingStatus: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: () => ({
@@ -421,15 +412,8 @@ export default defineComponent({
     selectedCityToKeyword(): string {
       return this.selectedCity?.postalCode + ' ' + this.selectedCity?.name + ', ' + this.selectedCity?.region;
     },
-    callAction(button: PayloadAction) {
-      if (button.nextStep.code != '__BACK__') {
-        this.$emit('step-completed', {
-          answers: null,
-          nextStep: button.code,
-        });
-      } else {
-        this.$emit('go-back');
-      }
+    nextStep({ answers, nextStep }: { answers: any; nextStep: any }) {
+      callAction(nextStep, answers, this.$emit);
     },
     sanitizeCerberusAttribut,
     formatEvent,

package/src/components/rework/question/city-search/default-payload.json

@@ -5,19 +5,8 @@
     "subtitle": "Cette information nous aide à identifier les aides dont vous pourriez profiter",
     "placeholder": "Code postal, ville",
     "actionLabel": "Étape suivante",
-    "callToActions": [
-      {
-        "label": "Précédent",
-        "nextStep": "Code",
-        "theme": "bordered-primary-02",
-        "icon": "ArrowBack48"
-      },
-      {
-        "label": "Etape suivante",
-        "nextStep": "Code",
-        "icon": "ArrowNext48",
-        "iconPosition": "right"
-      }
-    ]
+    "nextStep": {
+      "code": "CODE"
+    }
   }
 }

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

@@ -19,24 +19,13 @@
         />
       </div>
 
-      <div class="pb-incremental-amount-input__buttons-container">
-        <div class="pb-incremental-amount-input__buttons-container__left">
-          <m-button
-            label="Précédent"
-            theme="bordered-neutral"
-            class="pb-city-search__button"
-            size="m"
-            size-from-l="l"
-            @click="$emit('go-back')"
-            v-if="!payload.viewModel.hideBackButton"
-            icon="ArrowBack48"
-          >
-          </m-button>
-        </div>
-        <div class="pb-incremental-amount-input__buttons-container__right">
-          <m-button class="pb-city-search__button" :label="computedPayload.viewModel.actionLabel" size="m" />
-        </div>
-      </div>
+      <m-pb-navigation
+        :payload="payload"
+        :nextButtonAction="payload.viewModel.nextStep"
+        @go-back="$emit('go-back')"
+        @next-step="nextStep"
+        :answers="answers"
+      />
     </form>
   </div>
 </template>
@@ -45,14 +34,14 @@
 import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
 import { decorate } from '@/services/decorate';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { MButton } from '@mozaic-ds/vue-3';
 import cloneDeep from 'lodash.clonedeep';
 import merge from 'lodash.merge';
 import { ComputedRef, PropType, computed, onMounted, ref } from 'vue';
-import MFlex from '../../../mozaic/flex/MFlex.vue';
 import MQuantitySelector from '../../../mozaic/quantityselector/MQuantitySelector.vue';
 import { EmitEventName } from '../../services/emit';
 import DEFAULT_PAYLOAD from './default-payload.json';
+import MPbNavigation from '../../navigation/MPbNavigation.vue';
+import { callAction } from '../../services/navigate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -168,6 +157,18 @@ const handleQuantitySelector = (value: number): void => {
   quantitySelector = value;
 };
 
+const nextStep = ({ answers, nextStep }: { answers: any; nextStep: any }) => {
+  callAction(
+    nextStep,
+    [
+      {
+        value: quantitySelector,
+      },
+    ],
+    $emit,
+  );
+};
+
 onMounted(() => {
   setTimeout(() => {
     pbIncrementalAmountInput.value?.focus();

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

@@ -59,39 +59,16 @@
           </div>
         </div>
 
-        <div class="pb-space-input__buttons-container row-flex align-center" v-if="payload">
-          <div
-            class="pb-space-input__buttons-container__button row-flex"
-            v-for="button in payload.viewModel.callToActions"
-            :key="button.label"
-          >
-            <m-button
-              :label="button.label"
-              @click="callAction(button)"
-              :disabled="button.nextStep === '__BACK__' ? false : disabledNextStep"
-              :theme="button.theme"
-              :icon="button.icon"
-              :iconPosition="button.iconPosition"
-              style="margin-left: 1rem"
-              :data-cerberus="sanitizeCerberusAttribut('MPB-SPACE', button.label)"
-              class="js-cdl"
-              data-cdl-click-type="cdl_event"
-              :data-cdl-click-data="
-                formatEvent({ button_name: button.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
-              "
-            />
-            <m-link
-              v-if="payload.skippable"
-              class="pb-space-input__link"
-              :label="payload.skippable.label"
-              :theme="payload.skippable.theme"
-              width="full"
-              size="l"
-              @click="skipQuestion"
-              :data-cerberus="sanitizeCerberusAttribut('PB-SPACE-INPUT-SKIP', payload?.skippable?.label || '')"
-            />
-          </div>
-        </div>
+        <m-pb-navigation
+          :payload="payload"
+          :answers="answers"
+          :disabledNextButton="disabledNextStep"
+          :stepLocation="stepLocation"
+          :nextButtonAction="payload.viewModel.nextStep"
+          :trackingStatus="true"
+          @go-back="$emit('go-back')"
+          @next-step="nextStep"
+        />
       </div>
     </form>
 
@@ -126,9 +103,9 @@ import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 import MIcon from '../../../mozaic/icon/MIcon.vue';
 import { EmitEventName } from '../../services/emit';
-import { PayloadAction } from '../../types/genericPayload';
-import { EventTypeEnum, formatEvent } from '../../services/event';
 import DEFAULT_PAYLOAD from './default-payload.json';
+import MPbNavigation from '../../navigation/MPbNavigation.vue';
+import { callAction } from '../../services/navigate';
 
 const INFO_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Notification_Information_24px.svg';
@@ -241,38 +218,15 @@ const handleFormSubmit = handleSubmit((values) => {
     ],
   });
 });
-const skipQuestion = () => {
-  $emit(props.completedEventName, {
-    answers: props.payload?.skippable?.isAnswer
-      ? props.payload?.skippable?.defaultAnswer
-        ? [props.payload?.skippable?.defaultAnswer]
-        : []
-      : null,
-    nextStep: props.payload?.skippable?.nextStep,
-  });
-};
-
-/**
- * Send action to completed step
- * @param action
- */
-const callAction = (button: PayloadAction) => {
-  if (button.nextStep != '__BACK__') {
-    $emit(props.completedEventName, {
-      answers: {
-        space: space.value,
-        nextStep: button.code,
-      },
-    });
-  } else {
-    $emit('go-back');
-  }
-};
 
 const isShowingFooter = computed(() => {
   return computedPayload.value.viewModel.footer;
 });
 
+const nextStep = ({ answers, nextStep }: { answers: any; nextStep: any }) => {
+  callAction(nextStep, answers, $emit);
+};
+
 onMounted(() => {
   setTimeout(() => {
     const pbSpaceInputTextInput: any = document.querySelector('.js-space-input');

package/src/components/rework/question/space-input/default-payload.json

@@ -12,19 +12,8 @@
     "actionLabel": "Continuer",
     "unitLabel": "m²",
     "image": null,
-    "callToActions": [
-      {
-        "label": "Précédent",
-        "nextStep": "__BACK__",
-        "theme": "bordered-primary-02",
-        "icon": "ArrowBack48"
-      },
-      {
-        "label": "Etape suivante",
-        "nextStep": "Code",
-        "icon": "ArrowNext48",
-        "iconPosition": "right"
-      }
-    ]
+    "nextStep": {
+      "code": "Code"
+    }
   }
 }

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

@@ -45,7 +45,7 @@
     </m-flex>
   </m-flex>
 
-  <m-flex class="pb-restitution-list__footer" direction="row" v-if="showButtonBar">
+  <div class="pb-restitution-list__footer" direction="row" v-if="showButtonBar">
     <div class="pb-restitution-list__footer__call" v-for="button in payload.callToActions" :key="button.label">
       <m-button
         :label="button.label"
@@ -64,7 +64,7 @@
         :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'save-estimate')"
       />
     </div>
-  </m-flex>
+  </div>
 
   <div>
     <m-modal
@@ -350,7 +350,13 @@ $responsive-breakpoint: 'm';
 
     padding: $mu250 0 0 0;
     text-align: left;
-    width: 630px;
+    margin-top: $mu100;
+    width: calc(100% - 3.2rem);
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 630px;
+      margin-top: 0;
+    }
 
     &::after {
       background: $color-primary-01-600;
@@ -363,17 +369,41 @@ $responsive-breakpoint: 'm';
   }
 
   &__footer {
-    width: 630px;
-    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: $mu050;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 630px;
+      flex-direction: row;
+      margin: 0 auto;
+    }
 
-    &__save,
     &__call {
-      margin: 0 $mu100 0 0;
+      margin-left: $mu050;
     }
-  }
 
-  &__line {
-    padding: 8px;
+    &__save,
+    &__call {
+      width: 100%;
+
+      &:first-child {
+        margin: 0 $mu100 $mu050 0;
+      }
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: auto;
+      }
+
+      button {
+        width: 100%;
+
+        @include set-from-screen($responsive-breakpoint) {
+          width: auto;
+        }
+      }
+    }
   }
 
   &__modal {

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

@@ -124,8 +124,11 @@ $responsive-breakpoint: 'm';
 
   &__range {
     display: flex;
-    width: 40%;
-    justify-content: flex-end;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 40%;
+      justify-content: flex-end;
+    }
   }
 
   &__price {

package/src/components/rework/services/navigate.ts

@@ -1,3 +1,4 @@
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { PayloadAction } from '../types/genericPayload';
 
 /**
@@ -6,7 +7,11 @@ import { PayloadAction } from '../types/genericPayload';
  * @param answers
  * @param $emit
  */
-export const callAction = (action: PayloadAction, answers: any[], $emit: any): void => {
+export const callAction = (
+  action: PayloadAction,
+  answers: Map<string, ScenarioStepAnswer[]> | any,
+  $emit: any,
+): void => {
   if (action.code != '__BACK__') {
     $emit('step-completed', {
       answers,

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

@@ -28,6 +28,14 @@
     &.justify-end{
         justify-content: flex-end;
     }
+
+    &.justify-stretch{
+        justify-content: stretch;
+    }
+
+    &.justify-between{
+        justify-content: space-between;
+    }
 }
 
 .column-1of3{

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

@@ -59,7 +59,8 @@
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet de combles aménageables",
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "disableNavigation": true
       },
       "answers": {
         "ATTIC_INSULATION_DISCOVER_PRODUCTS": {
@@ -125,9 +126,7 @@
           "notification": {
             "type": "info",
             "title": "Nous attirons votre attention !",
-            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique.",
-            "buttonText": "Voir d'autres solutions pour isoler vos murs extérieurs",
-            "buttonHref": "https://www.leroymerlin.fr/produits/materiaux/isolation/isolation-par-exterieur/"
+            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique."
           }
         }
       }
@@ -264,11 +263,11 @@
         "label": "Où ce situe le logement ?",
         "subtitle": "Cette information nous aide à identifier les aides dont vous pourriez profiter",
         "placeholder": "Code postal, Ville",
-        "actionLabel": "Continuer"
+        "actionLabel": "Continuer",
+        "nextStep": {
+          "code": "LMFR_ATTIC_INSULATION_QUESTION_SITUATION"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_ATTIC_INSULATION_QUESTION_SITUATION"
     }
   },
   "LMFR_ATTIC_INSULATION_QUESTION_SITUATION": {
@@ -390,11 +389,11 @@
         "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/number_of_inhabitants.png",
         "minValue": 1,
         "maxValue": 20,
-        "defaultValue": 1
+        "defaultValue": 1,
+        "nextStep": {
+          "code": "LMFR_ATTIC_INSULATION_QUESTION_INCOME"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_ATTIC_INSULATION_QUESTION_INCOME"
     }
   },
   "LMFR_ATTIC_INSULATION_QUESTION_INCOME": {
@@ -2070,20 +2069,9 @@
         "label": "Quelle est la surface de combles perdus à isoler ?",
         "unitLabel": "m²",
         "placeholder": "Surface",
-        "callToActions": [
-          {
-            "label": "Précédent",
-            "nextStep": "__BACK__",
-            "theme": "bordered-primary-02",
-            "icon": "ArrowBack48"
-          },
-          {
-            "label": "Etape suivante",
-            "nextStep": "LMFR_ATTIC_INSULATION_QUESTION_INCOME",
-            "icon": "ArrowNext48",
-            "iconPosition": "right"
-          }
-        ]
+        "nextStep": {
+          "code": "LMFR_ATTIC_INSULATION_QUESTION_INCOME"
+        }
       },
       "helpArea": [
         {
@@ -2098,9 +2086,6 @@
           }
         }
       ]
-    },
-    "nextStep": {
-      "code": "LMFR_ATTIC_INSULATION_QUESTION_INCOME"
     }
   },
 
@@ -2416,7 +2401,8 @@
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "disableNavigation": true
       },
       "answers": {
         "DISCOVER_OUR_HEATERS": {

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

@@ -78,9 +78,7 @@
           "notification": {
             "type": "info",
             "title": "Nous attirons votre attention !",
-            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique.",
-            "buttonText": "Voir d'autres solutions pour isoler vos murs extérieurs",
-            "buttonHref": "https://www.leroymerlin.fr/produits/materiaux/isolation/isolation-par-exterieur/"
+            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique."
           }
         }
       }
@@ -162,7 +160,8 @@
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "disableNavigation": true
       },
       "answers": {
         "DISCOVER_HEAT_PUMPS": {
@@ -298,11 +297,11 @@
         "subtitle": "Cette information nous aide à identifier les aides dont vous pourriez profiter",
         "placeholder": "Code postal, Ville",
         "image": "https://storage.googleapis.com/project-booster-media/new-house/Estimation%20Construction%20Neuve%20-%20Localisation.png",
-        "actionLabel": "Continuer"
+        "actionLabel": "Continuer",
+        "nextStep": {
+          "code": "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_SITUATION"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_SITUATION"
     }
   },
   "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_SITUATION": {
@@ -421,11 +420,11 @@
         "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/number_of_inhabitants.png",
         "minValue": 1,
         "maxValue": 20,
-        "defaultValue": 1
+        "defaultValue": 1,
+        "nextStep": {
+          "code": "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_INCOME"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_INCOME"
     }
   },
   "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_INCOME": {
@@ -2101,7 +2100,10 @@
         "label": "Quelle surface sera chauffée par la pompe à chaleur ?",
         "unitLabel": "m²",
         "placeholder": "Surface",
-        "actionLabel": "Continuer"
+        "actionLabel": "Continuer",
+        "nextStep": {
+          "code": "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_REPLACEMENT"
+        }
       },
       "helpArea": [
         {
@@ -2116,9 +2118,6 @@
           }
         }
       ]
-    },
-    "nextStep": {
-      "code": "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_REPLACEMENT"
     }
   },
   "LMFR_HEAT_PUMP_AIR_WATER_QUESTION_REPLACEMENT": {
@@ -2626,7 +2625,8 @@
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "disableNavigation": true
       },
       "answers": {
         "DISCOVER_OUR_HEATERS": {

package/src/components/scenario/scenarii/pellet-boiler.json

@@ -162,9 +162,7 @@
           "notification": {
             "type": "info",
             "title": "Nous attirons votre attention !",
-            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique.",
-            "buttonText": "Voir d'autres solutions pour isoler vos murs extérieurs",
-            "buttonHref": "https://www.leroymerlin.fr/produits/materiaux/isolation/isolation-par-exterieur/"
+            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique."
           }
         }
       }
@@ -334,24 +332,10 @@
         "label": "Dans quelle ville aura lieu les travaux ?",
         "placeholder": "Code postal, Ville",
         "actionLabel": "Continuer",
-        "callToActions": [
-          {
-            "label": "Précédent",
-            "nextStep": "__BACK__",
-            "theme": "bordered-primary-02",
-            "icon": "ArrowBack48"
-          },
-          {
-            "label": "Etape suivante",
-            "nextStep": "LMFR_PELLET_BOILER_QUESTION_INHABITANTS_COUNT",
-            "icon": "ArrowNext48",
-            "iconPosition": "right"
-          }
-        ]
+        "nextStep": {
+          "code": "LMFR_PELLET_BOILER_QUESTION_INHABITANTS_COUNT"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_PELLET_BOILER_QUESTION_INHABITANTS_COUNT"
     }
   },
   "LMFR_PELLET_BOILER_QUESTION_INHABITANTS_COUNT": {
@@ -379,11 +363,11 @@
         "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/number_of_inhabitants.png",
         "minValue": 1,
         "maxValue": 20,
-        "defaultValue": 1
+        "defaultValue": 1,
+        "nextStep": {
+          "code": "LMFR_PELLET_BOILER_QUESTION_INCOME"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_PELLET_BOILER_QUESTION_INCOME"
     }
   },
   "LMFR_PELLET_BOILER_QUESTION_INCOME": {
@@ -2257,7 +2241,8 @@
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "disableNavigation": true
       },
       "answers": {
         "DISCOVER_OUR_HEATERS": {
@@ -2295,7 +2280,8 @@
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "disableNavigation": true
       },
       "answers": {
         "DISCOVER_OUR_HEATERS": {

package/src/components/scenario/scenarii/wood-stove.json

@@ -27,8 +27,7 @@
       "viewModel": {
         "label": "Estimer votre projet de rénovation énergétique en 2 minutes",
         "defaultProduct": {
-          "designation": "Installation d'un poêle à bois",
-          "photo": "https://storage.googleapis.com/project-booster-media/energyrenovation/default_wood_stove.jpg"
+          "designation": "Installation d'un poêle à bois"
         }
       },
       "callToActions": [
@@ -37,7 +36,7 @@
           "label": "Continuer",
           "action": {
             "type": "STEP",
-            "code": "LMFR_WOOD_STOVE_QUESTION_HOUSING_TYPE"
+            "code": "LMFR_WOOD_STOVE_QUESTION_SITUATION"
           },
           "bordered": false
         }
@@ -79,9 +78,7 @@
           "notification": {
             "type": "info",
             "title": "Nous attirons votre attention !",
-            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique.",
-            "buttonText": "Voir d'autres solutions pour isoler vos murs extérieurs",
-            "buttonHref": "https://www.leroymerlin.fr/produits/materiaux/isolation/isolation-par-exterieur/"
+            "content": "Nous ne réalisons pas de projets d’isolation de murs par l’extérieur dans les appartements. Nous vous invitons à vous rapporcher de votre copropriété pour poursuivre les démarches de rénovation énergétique."
           }
         }
       }
@@ -315,24 +312,10 @@
         "subtitle": "Cette information nous aide à identifier les aides dont vous pourriez profiter",
         "placeholder": "Code postal, Ville",
         "actionLabel": "Continuer",
-        "callToActions": [
-          {
-            "label": "Précédent",
-            "nextStep": "__BACK__",
-            "theme": "bordered-primary-02",
-            "icon": "ArrowBack48"
-          },
-          {
-            "label": "Etape suivante",
-            "nextStep": "LMFR_WOOD_STOVE_QUESTION_SITUATION",
-            "icon": "ArrowNext48",
-            "iconPosition": "right"
-          }
-        ]
+        "nextStep": {
+          "code": "LMFR_WOOD_STOVE_QUESTION_SITUATION"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_WOOD_STOVE_QUESTION_SITUATION"
     }
   },
   "LMFR_WOOD_STOVE_QUESTION_SITUATION": {
@@ -451,11 +434,11 @@
         "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/number_of_inhabitants.png",
         "minValue": 1,
         "maxValue": 20,
-        "defaultValue": 1
+        "defaultValue": 1,
+        "nextStep": {
+          "code": "LMFR_WOOD_STOVE_QUESTION_INCOME"
+        }
       }
-    },
-    "nextStep": {
-      "code": "LMFR_WOOD_STOVE_QUESTION_INCOME"
     }
   },
   "LMFR_WOOD_STOVE_QUESTION_INCOME": {
@@ -2652,15 +2635,16 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
-        "totalStep": 14,
-        "currentStep": 1,
+        "totalStep": 2,
+        "currentStep": 2,
         "sizeXlWidth": true
       }
     },
     "payload": {
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
-        "answersComponent": "MPbCard"
+        "answersComponent": "MPbCard",
+        "disableNavigation": true
       },
       "answers": {
         "DISCOVER_OUR_HEATERS": {

package/src/types/pb/Scenario.ts

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