project-booster-vue 9.43.2 → 9.43.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.43.2",
+  "version": "9.43.4",
   "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

@@ -2,14 +2,12 @@
   <div class="pb-restitution-list-line" :class="{ green: renovAid }" v-if="renovAid">
     <div class="pb-restitution-list-line__title" v-html="line.text || line.title"></div>
     <div class="pb-restitution-list-line__price" v-if="!renovAid">
-      <div class="pb-restitution-list-line__price__min">
-        {{ formatPriceRange(line.cost.min, line.cost.max).min }}€&nbsp;et&nbsp;
-      </div>
-      <div class="pb-restitution-list-line__price__max">{{ formatPriceRange(line.cost.min, line.cost.max).max }}€</div>
+      <div class="pb-restitution-list-line__price__min">{{ formattedPriceRange(line.cost.min) }}&nbsp;et&nbsp;</div>
+      <div class="pb-restitution-list-line__price__max">{{ formattedPriceRange(line.cost.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">{{ formattedPriceRange(line.cost.min) }}</span>
+      <span v-else>{{ formattedPriceRange(line.cost.min) }} et {{ formattedPriceRange(line.cost.max) }}</span>
     </div>
   </div>
 </template>
@@ -31,15 +29,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

@@ -115,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';
@@ -209,9 +209,17 @@ export default defineComponent({
     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(),
+      phone: string()
+        .required()
+        .test(() => {
+          return formData.value.values.phone == null || formData.value.values.phone.length === 10;
+        }),
       optin: boolean(),
       optinPartners: boolean(),
     });

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;