project-booster-vue 10.12.0 → 10.13.0

package/package.json

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

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

@@ -9,6 +9,7 @@ export interface IncrementalAmountValidation {
 
 export interface IncrementalAmountViewModel {
   backLabel: string;
+  hideBackButton?: boolean;
   label: string;
   subtitle: string;
   actionLabel: string;

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

@@ -1,3 +1,5 @@
+import { HelpArea } from '@/components/rework/question/space-input/SpaceInput';
+import { PayloadAction } from '@/components/rework/types/genericPayload';
 import { ScenarioStepSkippableOptions } from '@/types/pb/Scenario';
 
 export interface SpaceInputValidation {
@@ -11,10 +13,17 @@ export interface SpaceInputValidation {
 
 export interface SpaceInputViewModel {
   backLabel: string;
+  hideBackButton?: boolean;
   label: string;
+  subtitle: string;
   placeholder: string;
   actionLabel: string;
   validation: SpaceInputValidation;
+  forceBackButton?: boolean;
+  callToActions: PayloadAction[];
+  analytics: {
+    funnel_name: string;
+  };
   footer?: {
     label: string;
     conditions: string[];
@@ -26,4 +35,5 @@ export interface SpaceInputPayload {
   value: { space: string };
   defaultDecoratorValue: string;
   skippable?: ScenarioStepSkippableOptions;
+  helpArea?: HelpArea[];
 }

package/src/components/rework/products/MPbProducts.vue

@@ -17,12 +17,18 @@
         {{ payload.viewModel.label }}
       </div>
 
-      <div class="pb-products__body__item" v-if="product">
-        <div class="pb-products__body__item__thumbnail">
+      <div class="pb-products__body__item" v-if="product.designation">
+        <div class="pb-products__body__item__thumbnail" v-if="product?.photo">
           <img :src="product.photo" alt="" />
         </div>
         <div class="pb-products__body__item__title">{{ product.designation }}</div>
       </div>
+      <div class="pb-products__body__item" v-else>
+        <div class="pb-products__body__item__thumbnail">
+          <img :src="payload.viewModel.defaultProduct.photo" alt="" />
+        </div>
+        <div class="pb-products__body__item__title">{{ payload.viewModel.defaultProduct.designation }}</div>
+      </div>
 
       <div class="pb-products__container--button">
         <m-button
@@ -50,8 +56,8 @@
 <script lang="ts" setup>
 import { useStore } from 'vuex';
 import { MButton, MLink } from '@mozaic-ds/vue-3';
-import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { defineProps, PropType, onMounted, ref } from 'vue';
+import { ScenarioProduct, ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { defineProps, PropType, onMounted, ref, Ref } from 'vue';
 import { PayloadAction } from '../types/genericPayload';
 import { formatEvent, EventTypeEnum } from '../services/event';
 
@@ -60,7 +66,11 @@ const emit = defineEmits(['go-back', 'step-completed']);
 const store = useStore();
 const metadata = store.getters['metaData/metaData'];
 const refProduct = store.getters['products/getRefProduct'];
-const product = ref({});
+const product: Ref<ScenarioProduct> = ref({
+  photo: '',
+  designation: '',
+  value: '',
+});
 
 const props = defineProps({
   /**

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

@@ -155,8 +155,9 @@
                 size="l"
                 theme="primary"
                 @click="handleHelpClick(helpItem.action)"
-                >{{ helpItem.label }}</m-link
               >
+                {{ helpItem.label }}
+              </m-link>
             </div>
           </div>
         </div>
@@ -183,6 +184,15 @@
             width-from-xxl="full"
             width-from-l="full"
             :href="notification.buttonHref"
+            v-if="notification.buttonHref"
+            :label="notification.buttonText"
+          />
+          <m-button
+            width="full"
+            width-from-xxl="full"
+            width-from-l="full"
+            v-else-if="notification?.buttonStep"
+            @click.prevent="callAction(notification?.buttonStep, [], $emit)"
             :label="notification.buttonText"
           />
         </div>
@@ -315,7 +325,7 @@
     </m-modal>
 
     <m-modal
-      :modalTitle="helpDialog?.viewModelDialog.headerTitle"
+      :modalTitle="helpDialog?.viewModelDialog.watermark || helpDialog?.viewModelDialog.headerTitle"
       :open="displayDialogHelp"
       @update:open="displayDialogHelp = false"
       class="mc-modal--overflow"
@@ -449,6 +459,7 @@ import {
 } from '@/types/pb/Scenario';
 import { useStore } from 'vuex';
 import { EventTypeEnum, formatEvent } from '../services/event';
+import { callAction } from '../services/navigate';
 
 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

@@ -1,6 +1,6 @@
 <template>
   <form class="pb-city-search" @submit.prevent="handleFormValidation">
-    <m-flex class="pb-city-search__back-button-container" align-items="stretch">
+    <div class="pb-city-search__back-button-container row-flex align-stretch">
       <m-link
         :left-icon="BACK_ICON"
         :class="{
@@ -11,21 +11,16 @@
         @click.once="$emit('go-back')"
         >{{ computedPayload.viewModel.backLabel }}</m-link
       >
-    </m-flex>
+    </div>
     <div class="pb-city-search__form">
       <div class="pb-city-search__title">
         {{ computedPayload.viewModel.label }}
       </div>
-      <m-flex class="pb-city-search__header" ref="pbCitySearchHeader" direction="column">
-        <m-flex
-          v-if="computedPayload.viewModel.image"
-          class="pb-city-search__image"
-          direction="column"
-          align-items="center"
-        >
+      <div class="pb-city-search__header" ref="pbCitySearchHeader row-flex column">
+        <div v-if="computedPayload.viewModel.image" class="pb-city-search__image row-flex column align-center">
           <img :src="computedPayload.viewModel.image" @onloadend="updateHeaderHeight()" />
-        </m-flex>
-      </m-flex>
+        </div>
+      </div>
       <transition name="pb-city-search__results-overlay--animate">
         <div
           v-if="focused || displaySuggestions"
@@ -45,7 +40,7 @@
       >
         <transition name="pb-city-search__results-container--animate">
           <div v-if="displaySuggestions && !forceHideSuggestions" class="pb-city-search__results-container">
-            <m-flex v-if="suggestions && suggestions.length > 0" class="pb-city-search__results" direction="column">
+            <div v-if="suggestions && suggestions.length > 0" class="pb-city-search__results row flex column">
               <div
                 class="pb-city-search__results-item"
                 v-for="(suggestion, index) in suggestions"
@@ -57,14 +52,14 @@
               >
                 {{ formatSuggestion(suggestion) }}
               </div>
-            </m-flex>
-            <div v-else-if="this.searchKeyword" class="pb-city-search__results-empty-state">
+            </div>
+            <div v-else-if="searchKeyword" class="pb-city-search__results-empty-state">
               <span v-if="loadingSuggestions">Chargement...</span>
               <span v-else>Aucune commune correspondante</span>
             </div>
           </div>
         </transition>
-        <m-flex>
+        <div>
           <m-text-input
             type="search"
             ref="pbCitySearchTextInput"
@@ -76,7 +71,7 @@
             tabindex="1"
             :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'INPUT')"
           />
-        </m-flex>
+        </div>
       </div>
       <div v-if="selectedCity" class="pb-city-search__selected-city">
         <!-- prettier-ignore -->
@@ -84,7 +79,7 @@
           Votre construction sera réalisée dans la commune de&nbsp;<strong>{{ selectedCity.name }}</strong>,&nbsp;<strong>{{ selectedCity.region }}</strong>.
         </span>
       </div>
-      <m-flex class="pb-city-search__buttons-container" direction="column">
+      <!-- <div class="pb-city-search__buttons-container" direction="column">
         <m-button
           :disabled="!selectedCity"
           class="pb-city-search__button"
@@ -93,7 +88,29 @@
           @click="handleFormValidation"
           :data-cerberus="sanitizeCerberusAttribut('MPB-CITY-SEARCH', 'BUTTON')"
         />
-      </m-flex>
+      </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>
     </div>
   </form>
 </template>
@@ -113,6 +130,8 @@ import { DebouncedFunc } from 'lodash-es';
 import { decorate } from '@/services/decorate';
 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';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -165,6 +184,10 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    stepLocation: {
+      type: String,
+      default: '',
+    },
   },
 
   data: () => ({
@@ -188,6 +211,7 @@ export default defineComponent({
     loadingCityInfo: false,
     headerHeight: 0,
     debouncedGetSuggestions: undefined as DebouncedFunc<() => Promise<void>> | undefined,
+    EventTypeEnum,
   }),
 
   computed: {
@@ -397,7 +421,18 @@ 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');
+      }
+    },
     sanitizeCerberusAttribut,
+    formatEvent,
   },
 });
 </script>
@@ -406,6 +441,7 @@ export default defineComponent({
 @import 'pb-variables';
 
 $responsive-breakpoint: 'm';
+@import '../../styles/global.scss';
 
 .pb-city-search {
   @include set-font-face('regular');
@@ -460,7 +496,7 @@ $responsive-breakpoint: 'm';
     width: 100%;
 
     @include set-from-screen($responsive-breakpoint) {
-      width: 565px;
+      width: 720px;
     }
   }
 
@@ -473,7 +509,7 @@ $responsive-breakpoint: 'm';
     width: 384px;
 
     @include set-from-screen($responsive-breakpoint) {
-      @include set-font-scale('06', 'l');
+      @include set-font-scale('07', 'l');
 
       padding: $mu250 0 $mu050 0;
       width: auto;
@@ -637,6 +673,48 @@ $responsive-breakpoint: 'm';
     position: sticky;
     width: 100%;
     z-index: 1;
+    flex-direction: column;
+
+    @include set-from-screen($responsive-breakpoint) {
+      flex-direction: row;
+    }
+
+    button {
+      margin-left: 0 !important;
+      width: 100%;
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: auto;
+      }
+    }
+
+    &__button {
+      width: 100%;
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: 50%;
+      }
+
+      &:first-child {
+        justify-content: flex-start;
+        margin-top: $mu050;
+        order: 2;
+
+        @include set-from-screen($responsive-breakpoint) {
+          margin-top: 0;
+          order: 1;
+        }
+      }
+
+      &:last-child {
+        justify-content: flex-end;
+        order: 1;
+
+        @include set-from-screen($responsive-breakpoint) {
+          order: 2;
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -4,6 +4,20 @@
     "label": "Dans quelle ville aura lieu les travaux ?",
     "subtitle": "Cette information nous aide à identifier les aides dont vous pourriez profiter",
     "placeholder": "Code postal, ville",
-    "actionLabel": "Continuer"
+    "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"
+      }
+    ]
   }
 }

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

@@ -1,18 +1,5 @@
 <template>
   <div class="pb-incremental-amount-input row-flex column align-center">
-    <div class="pb-incremental-amount-input__back-button-container row-flex align-stretch">
-      <m-link
-        icon="ArrowBack48"
-        :class="{
-          'pb-incremental-amount-input__back-button': true,
-          'pb-incremental-amount-input__back-button--hidden':
-            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
-        }"
-        @click.once="$emit('go-back')"
-        >{{ computedPayload.viewModel.backLabel }}</m-link
-      >
-    </div>
-
     <form
       class="pb-incremental-amount-input__form-container"
       ref="pbDimensionsInputFormContainerObserver"
@@ -32,30 +19,40 @@
         />
       </div>
 
-      <div class="pb-incremental-amount-input__buttons-container row-flex flex-start">
-        <m-button
-          class="pb-incremental-amount-input__button"
-          :label="computedPayload.viewModel.actionLabel"
-          size="l"
-          type="submit"
-        />
+      <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>
     </form>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ComputedRef, PropType } from 'vue';
+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 DEFAULT_PAYLOAD from './default-payload.json';
-import { ref } from 'vue';
-import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { decorate } from '@/services/decorate';
+import { ComputedRef, PropType, computed, onMounted, ref } from 'vue';
+import MFlex from '../../../mozaic/flex/MFlex.vue';
 import MQuantitySelector from '../../../mozaic/quantityselector/MQuantitySelector.vue';
-import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
 import { EmitEventName } from '../../services/emit';
-import { MLink, MButton } from '@mozaic-ds/vue-3';
+import DEFAULT_PAYLOAD from './default-payload.json';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -195,6 +192,7 @@ $responsive-breakpoint: 'm';
 
   @include set-from-screen($responsive-breakpoint) {
     padding-top: 0;
+    margin-top: $mu150;
   }
 
   &__back-button-container {
@@ -259,9 +257,10 @@ $responsive-breakpoint: 'm';
     flex-direction: column;
     flex-grow: 1;
     padding: 0 $mu050;
+    width: 100%;
 
     @include set-from-screen($responsive-breakpoint) {
-      width: 565px;
+      width: 720px;
     }
   }
 
@@ -280,33 +279,27 @@ $responsive-breakpoint: 'm';
     padding: 0;
 
     @include set-from-screen($responsive-breakpoint) {
-      @include set-font-scale('06', 'm');
+      @include set-font-scale('07', 'm');
 
       margin-bottom: 0;
-      padding: $mu250 0 $mu100 0;
+      padding: $mu050 0 $mu100 0;
     }
   }
 
   &__subtitle {
-    color: $color-grey-700;
+    color: $color-grey-900;
     max-width: 100%;
     padding: 0 0 $mu250 0;
   }
 
   &__image {
-    padding-bottom: $mu200;
-
     img {
-      display: none;
-      width: 70%;
+      width: 50%;
+      margin: 0 auto;
 
       @include set-from-screen($small-responsive-breakpoint) {
         display: block;
-        width: 70%;
-      }
-
-      @include set-from-screen($responsive-breakpoint) {
-        width: 90%;
+        width: 60%;
       }
     }
   }
@@ -327,12 +320,58 @@ $responsive-breakpoint: 'm';
   }
 
   &__buttons-container {
+    display: flex;
     margin-bottom: $mu100;
     position: sticky;
     z-index: 1;
+    flex-direction: column;
+
+    &__left,
+    &__right {
+      width: 100%;
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: 50%;
+      }
+    }
+
+    &__left {
+      order: 2;
+
+      @include set-from-screen($responsive-breakpoint) {
+        order: 1;
+      }
+    }
+
+    &__right {
+      display: flex;
+      justify-content: flex-end;
+      order: 1;
+
+      @include set-from-screen($responsive-breakpoint) {
+        order: 2;
+      }
+    }
+
+    button {
+      width: 100%;
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: auto;
+      }
+
+      &:first-child {
+        margin-top: $mu050;
+
+        @include set-from-screen($responsive-breakpoint) {
+          margin-top: 0;
+        }
+      }
+    }
 
     @include set-from-screen($responsive-breakpoint) {
       width: 100%;
+      flex-direction: row;
     }
   }
 

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

@@ -3,7 +3,7 @@
     "backLabel": "Question précédente",
     "label": "Combien de personnes vivent dans votre foyer fiscal ?",
     "subtitle": "Cette information est utile pour le calcul des aides",
-    "actionLabel": "Continuer",
+    "actionLabel": "Étape suivante",
     "image": "https://storage.googleapis.com/project-booster-media/new-house/Estimation%20Construction%20Neuve%20-%20Localisation.png",
     "minValue": 1,
     "maxValue": 20,