project-booster-vue 9.43.1 → 9.43.3

package/package.json

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

package/src/components/question/PbQuestion.vue

@@ -1278,11 +1278,12 @@ $answers-apparition-duration: '0.5s';
   &__dialog-help {
     &__title {
       padding: $mu250 $mu250 0 $mu250;
+      @include set-font-scale('06', 'm');
     }
 
     &__body {
       padding: 0 $mu250;
-      @include set-font-scale('05', 'l');
+      @include set-font-scale('06', 'm');
       &__image {
         background-size: cover;
         padding: 120px 0;

package/src/components/restitution/PbRestitutionList.vue

@@ -1,20 +1,18 @@
 <template>
-  <m-flex align-items="center" direction="column">
-    <m-flex
-      :class="`pb-restitution-list`"
-      align-items="center"
-      justify-content="center"
-      direction="column"
-      ref="pbRestitutionList"
-    >
-      <m-link
-        v-if="showBackButton"
-        :left-icon="BACK_ICON"
-        :label="payload.backLabel || 'Modifier l\'estimation'"
-        class="pb-restitution-list__back-button"
-        @click.once="$emit('go-back')"
-      />
-    </m-flex>
+  <m-flex
+    :class="`pb-restitution-list`"
+    align-items="center"
+    justify-content="flex-start"
+    direction="column"
+    ref="pbRestitutionList"
+  >
+    <m-link
+      v-if="showBackButton"
+      :left-icon="BACK_ICON"
+      :label="payload.backLabel || 'Modifier l\'estimation'"
+      class="pb-restitution-list__back-button"
+      @click.once="$emit('go-back')"
+    />
     <div class="pb-restitution-list__title">{{ payload?.viewModel?.title }}</div>
 
     <div class="pb-restitution-list__line">
@@ -23,6 +21,7 @@
         v-for="component in summary.components"
         :key="component.componentId"
         :payload="component"
+        :legalMentions="payload?.viewModel?.legalMentions"
       ></pb-restitution-list-block>
     </div>
 
@@ -43,26 +42,28 @@
         />
       </m-flex>
     </m-flex>
+  </m-flex>
 
-    <m-flex class="pb-restitution-list__footer" direction="row" align-items="center" justify-content="center">
-      <div class="pb-restitution-list__footer__call" v-for="button in payload.callToActions" :key="button.label">
-        <m-button
-          :label="button.label"
-          @click="callAction(button.action)"
-          :theme="button.bordered ? 'bordered' : 'solid'"
-          v-if="areConditionsValid(button.conditions)"
-        />
-      </div>
-      <div class="pb-restitution-list__footer__save">
-        <pb-project-item-save
-          v-model:show-save-item="showSaveProjectItem"
-          @item-saved="handleItemCreated"
-          @dialog-close="handleDialogClose"
-          v-if="isLoggedIn"
-        />
-      </div>
-    </m-flex>
+  <m-flex class="pb-restitution-list__footer" direction="row" align-items="center" justify-content="center">
+    <div class="pb-restitution-list__footer__call" v-for="button in payload.callToActions" :key="button.label">
+      <m-button
+        :label="button.label"
+        @click="callAction(button.action)"
+        :theme="button.bordered ? 'bordered' : 'solid'"
+        v-if="areConditionsValid(button.conditions)"
+      />
+    </div>
+    <div class="pb-restitution-list__footer__save">
+      <pb-project-item-save
+        v-model:show-save-item="showSaveProjectItem"
+        @item-saved="handleItemCreated"
+        @dialog-close="handleDialogClose"
+        v-if="isLoggedIn"
+      />
+    </div>
+  </m-flex>
 
+  <div>
     <m-dialog
       class="pb-restitution-list__modal"
       :show-dialog="showDialog"
@@ -79,10 +80,13 @@
               <div class="pb-restitution-list__modal__details__row__title" justify-content="space-between">
                 <div v-html="component.title"></div>
                 <div v-if="component.cost.min != component.cost.max">
-                  <strong>{{ component.cost.min }}€ et {{ component.cost.max }}€</strong>
+                  <strong>
+                    {{ formattedPriceRange(component.cost.min) }} et
+                    {{ formattedPriceRange(component.cost.max) }}
+                  </strong>
                 </div>
                 <div v-else>
-                  <strong>{{ component.cost.min }}€</strong>
+                  <strong>{{ formattedPriceRange(component.cost.min) }}</strong>
                 </div>
               </div>
 
@@ -100,8 +104,12 @@
                   <div>
                     <li>
                       <div v-html="line.text"></div>
-                      <div v-if="line.cost.min != line.cost.max">{{ line.cost.min }}€ et {{ line.cost.max }}€</div>
-                      <div v-else>{{ line.cost.min }}€</div>
+                      <m-flex v-if="line.cost.min != line.cost.max" align-items="center" justify-content="flex-end">
+                        <span v-html="formattedPriceRange(line.cost.min)"></span>
+                        <span>&nbsp;et&nbsp;</span>
+                        <span v-html="formattedPriceRange(line.cost.max)"></span>
+                      </m-flex>
+                      <div v-else v-html="formattedPriceRange(line.cost.min)"></div>
                     </li>
                   </div>
                 </ul>
@@ -110,12 +118,12 @@
           </div>
 
           <div class="pb-restitution-list__modal__details__totals" justify-content="space-between" align-items="center">
-            <div><strong>Montant total</strong> (aides déduites)</div>
+            <div><strong>Montant total</strong>&nbsp; (aides déduites)</div>
             <div class="space-mx">entre</div>
             <div>
-              <strong>{{ summary.cost.min }}€</strong>
+              <strong v-html="formattedPriceRange(summary.cost.min)"></strong>
               <div class="space-mx">et</div>
-              <strong>{{ summary.cost.max }}€</strong>
+              <strong v-html="formattedPriceRange(summary.cost.max)"></strong>
             </div>
           </div>
         </div>
@@ -126,7 +134,7 @@
         </m-flex>
       </template>
     </m-dialog>
-  </m-flex>
+  </div>
 </template>
 
 <script lang="ts">
@@ -144,6 +152,7 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import PbRestitutionListBlock from './PbRestitutionListBlock.vue';
 import { Project } from '../../types/pb/Project';
 import { areConditionsValid } from '../../services/scenarioConditionals';
+import { priceFormatter } from '@/services/priceFormatter';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 
@@ -219,6 +228,9 @@ export default defineComponent({
     }
   },
   methods: {
+    formattedPriceRange(price: any) {
+      return Math.round(price).toLocaleString() + '€';
+    },
     handleShowDialog(content: any) {
       this.dialogContent = content;
       this.showDialog = !this.showDialog;
@@ -292,12 +304,9 @@ $responsive-breakpoint: 'm';
 
 .pb-restitution-list {
   @include set-font-face('regular');
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
+  height: calc(100vh - 120px);
   margin: 0 auto;
-  padding-bottom: $mu250;
+  padding-top: $mu250;
   position: relative;
   width: 100%;
 
@@ -308,8 +317,11 @@ $responsive-breakpoint: 'm';
 
   &__back-button {
     align-self: flex-start;
+    left: 0;
     opacity: 1;
     padding: $mu100 0 $mu100 $mu100;
+    position: absolute;
+    top: 0;
     transition: opacity 0.15s 0.5s;
     z-index: 2;
 
@@ -337,10 +349,12 @@ $responsive-breakpoint: 'm';
   &__footer {
     background: #ffffff;
     bottom: 0;
+    justify-self: flex-end;
     left: 0;
     padding: $mu100 0 $mu100 $mu025;
-    position: fixed;
+    position: sticky;
     right: 0;
+    width: 100%;
     @include set-box-shadow('l');
 
     &__save,

package/src/components/restitution/PbRestitutionListBlock.vue

@@ -7,8 +7,12 @@
         <div class="pb-restitution-list-line">
           <div class="pb-restitution-list-line__title" v-html="summary.components[0].title"></div>
           <div class="pb-restitution-list-line__price">
-            <div class="pb-restitution-list-line__price__min">{{ summary.components[0].cost.min }}€&nbsp;et&nbsp;</div>
-            <div class="pb-restitution-list-line__price__max">{{ summary.components[0].cost.max }}€</div>
+            <div class="pb-restitution-list-line__price__min">
+              {{ formattedPriceRange(summary.components[0].cost.min) }}&nbsp;et&nbsp;
+            </div>
+            <div class="pb-restitution-list-line__price__max">
+              {{ formattedPriceRange(summary.components[0].cost.max) }}
+            </div>
           </div>
         </div>
 
@@ -35,7 +39,8 @@
             <div><strong>Montant total</strong> (aides déduites)</div>
             <div class="pb-restitution-list-block__body__row__title__amount">
               <div>entre</div>
-              <strong>{{ summary.cost.min }}€</strong> et <strong>{{ summary.cost.max }}€</strong>
+              <strong>{{ formattedPriceRange(summary.cost.min) }}</strong> et
+              <strong>{{ formattedPriceRange(summary.cost.max) }}</strong>
             </div>
           </div>
         </div>
@@ -49,6 +54,10 @@
         />
       </div>
     </m-flex>
+
+    <div class="pb-restitution-list-block__legal-mentions">
+      <p v-for="(mention, index) in legalMentions" :key="'lm-' + index">{{ mention }}</p>
+    </div>
   </m-flex>
 </template>
 
@@ -72,6 +81,11 @@ export default defineComponent({
       default: () => ({}),
       required: true,
     },
+    legalMentions: {
+      type: Array,
+      default: () => [],
+      required: false,
+    },
   },
   computed: {
     ...mapGetters('estimates', { summary: 'getSummary' }),
@@ -80,6 +94,9 @@ export default defineComponent({
     handleLinkClick(details: any) {
       this.$emit('button', details);
     },
+    formattedPriceRange(price: any) {
+      return Math.round(price).toLocaleString() + '€';
+    },
   },
 });
 </script>
@@ -90,7 +107,7 @@ $responsive-breakpoint: 'm';
 
 .pb-restitution-list-block {
   @include set-box-shadow('l');
-  margin-bottom: $mu250;
+  margin-bottom: $mu100;
   padding: $mu150;
   width: 80%;
 
@@ -175,6 +192,19 @@ $responsive-breakpoint: 'm';
       }
     }
   }
+
+  &__legal-mentions {
+    color: $color-grey-600;
+    margin-bottom: $mu050;
+    width: 80%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 630px;
+    }
+
+    @include set-font-face('regular');
+    @include set-font-scale('04', 'm');
+  }
 }
 
 .pb-restitution-list-line {

package/src/components/restitution/PbRestitutionListLine.vue

@@ -8,8 +8,8 @@
       <div class="pb-restitution-list-line__price__max">{{ formatPriceRange(line.cost.min, line.cost.max).max }}€</div>
     </div>
     <div class="pb-restitution-list-line__price">
-      <span v-if="line.cost.min === line.cost.max">{{ line.cost.min }}€</span>
-      <span v-else>{{ line.cost.min }} et {{ line.cost.max }}€</span>
+      <span v-if="line.cost.min === line.cost.max">{{ formatPriceRange(line.cost.min) }}</span>
+      <span v-else>{{ formattedPriceRange(line.cost.min) }} et {{ formattedPriceRange(line.cost.max) }}</span>
     </div>
   </div>
 </template>
@@ -31,15 +31,17 @@ export default defineComponent({
       type: Boolean,
       default: () => false,
     },
+    formatPriceRange: {
+      type: Function,
+      default: () => '',
+    },
   },
   methods: {
     handleLinkClick() {
       this.$emit('button', true);
     },
-    formatPriceRange(min: number, max: number) {
-      if (min < max) {
-        return { min, max };
-      }
+    formattedPriceRange(price: any) {
+      return Math.round(price).toLocaleString() + '€';
     },
   },
 });

package/src/components/restitution/restitution-list-default.json

@@ -1,6 +1,9 @@
 {
   "viewModel": {
-    "title": "Votre estimation par travaux"
+    "title": "Votre estimation par travaux",
+    "legalMentions": [
+      "* Montant estimatif établi selon les réponses renseignées dans le questionnaire et susceptible d'être ajusté lors du devis définitif. Ce montant n’engage pas Leroy Merlin."
+    ]
   },
   "callToActions": [
     {

package/src/components/trezor/PbTrezor.vue

@@ -35,17 +35,6 @@
         ></m-text-input>
       </m-flex>
 
-      <m-flex class="pb-trezor__form__row">
-        <m-text-input
-          v-model="formData.values.surface"
-          :error="formData.errors.surface"
-          type="text"
-          label="Surface"
-          :required="true"
-          class="pb-trezor__input"
-        ></m-text-input>
-      </m-flex>
-
       <m-flex class="pb-trezor__form__row">
         <m-text-input
           v-model="formData.values.zipcode"
@@ -126,7 +115,7 @@ import MCheckbox from '../mozaic/checkbox/MCheckbox.vue';
 import MLink from '../mozaic/link/MLink.vue';
 import MTextInput from '../mozaic/text-input/MTextInput.vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { object, string, boolean } from 'yup';
+import { object, string, boolean, number } from 'yup';
 import objectPath from 'object-path';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -197,11 +186,6 @@ export default defineComponent({
         props.payload.viewModel.defaultValue?.zipcode?.answerCode,
         props.payload.viewModel.defaultValue?.zipcode?.path,
       ) || null;
-    const surface =
-      getAnswerValue(
-        props.payload.viewModel.defaultValue?.surface?.answerCode,
-        props.payload.viewModel.defaultValue?.surface?.path,
-      ) || null;
 
     let formData = ref<any>({
       values: {
@@ -209,7 +193,6 @@ export default defineComponent({
         firstname: '',
         zipcode: zipcode,
         email: '',
-        surface: surface,
         phone: '',
         optin: false,
         optinPartners: false,
@@ -220,17 +203,23 @@ export default defineComponent({
         zipcode: '',
         email: '',
         phone: '',
-        surface: '',
       },
     });
 
     const validationSchema = object({
       lastname: string().required(),
       firstname: string().required(),
-      zipcode: string().required(),
+      zipcode: string()
+        .required()
+        .test(() => {
+          return formData.value.values.zipcode == null || formData.value.values.zipcode.length === 5;
+        }),
       email: string().email().required(),
-      phone: string().required(),
-      surface: string().required(),
+      phone: string()
+        .required()
+        .test(() => {
+          return formData.value.values.phone == null || formData.value.values.phone.length === 10;
+        }),
       optin: boolean(),
       optinPartners: boolean(),
     });

package/src/components/trezor/default-payload.json

@@ -7,10 +7,6 @@
       "zipcode": {
         "answerCode": "LMFR_PREVIOUS_QUESTION",
         "path": "value"
-      },
-      "surface": {
-        "answerCode": "LMFR_PREVIOUS_QUESTION",
-        "path": "space"
       }
     },
     "translationErrors": {
@@ -18,8 +14,7 @@
       "firstname": "Le prénom est requis",
       "zipcode": "Le code postal est requis",
       "email": "Votre adresse mail est requise",
-      "phone": "Votre numéro de téléphone est requis",
-      "surface": "Veuillez indiquer la surface de votre logement"
+      "phone": "Votre numéro de téléphone est requis"
     }
   },
   "callToActions": [

package/src/components/warning-message/PbWarningMessage.vue

@@ -280,13 +280,13 @@ $responsive-breakpoint: 'm';
 
   &__title {
     @include set-font-face('semi-bold');
-    @include set-font-scale('07', 's');
+    @include set-font-scale('07', 'm');
     color: $color-grey-700;
     max-width: 100%;
     padding: 0 0 0 0;
     width: 384px;
     @include set-from-screen($responsive-breakpoint) {
-      @include set-font-scale('08', 'm');
+      @include set-font-scale('07', 'm');
       padding: $mu250 $mu100 $mu100 $mu100;
       text-align: center;
       width: auto;
@@ -383,11 +383,12 @@ $responsive-breakpoint: 'm';
   &__dialog-help {
     &__title {
       padding: $mu250 $mu250 0 $mu250;
+      @include set-font-scale('06', 'm');
     }
 
     &__body {
       padding: 0 $mu250;
-      @include set-font-scale('05', 'l');
+      @include set-font-scale('06', 'm');
       &__image {
         background-size: cover;
         padding: 120px 0;