project-booster-vue 9.43.3 → 9.44.0

package/package.json

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

package/src/components/cards/PbCard.vue

@@ -511,10 +511,7 @@ $responsive-breakpoint: 's';
 
     color: $color-grey-600;
     height: 100%;
-    hyphens: auto;
     max-width: 100%;
-    overflow-wrap: break-word;
-    word-break: break-word;
 
     .a11y-high-contrast & {
       color: $color-grey-800;

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -366,8 +366,11 @@ $responsive-breakpoint: 'm';
     justify-content: flex-end !important;
     margin-bottom: $mu100;
     position: sticky;
-    width: 100%;
     z-index: 1;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 100%;
+    }
   }
 
   &__link {

package/src/components/restitution/PbRestitutionList.vue

@@ -1,18 +1,20 @@
 <template>
-  <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')"
-    />
+  <m-flex align-items="center" direction="column" class="pb-restitution-wrapper">
+    <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="callAction(payload.viewModel.backButtonAction)"
+      />
+    </m-flex>
     <div class="pb-restitution-list__title">{{ payload?.viewModel?.title }}</div>
 
     <div class="pb-restitution-list__line">
@@ -78,7 +80,7 @@
           <div class="pb-restitution-list__modal__details__row">
             <div v-for="component in summary.components" :key="component.details">
               <div class="pb-restitution-list__modal__details__row__title" justify-content="space-between">
-                <div v-html="component.title"></div>
+                <div v-html="component.title" :class="{ green: component.componentId === 'AID' }"></div>
                 <div v-if="component.cost.min != component.cost.max">
                   <strong>
                     {{ formattedPriceRange(component.cost.min) }} et
@@ -126,6 +128,12 @@
               <strong v-html="formattedPriceRange(summary.cost.max)"></strong>
             </div>
           </div>
+
+          <div class="pb-restitution-list__modal__details__legal-mentions">
+            <p v-for="(mention, index) in payload?.viewModel?.legalMentions" :key="'lm-modal-' + index">
+              {{ mention }}
+            </p>
+          </div>
         </div>
       </template>
       <template #footer>
@@ -147,7 +155,11 @@ import MLink from '../mozaic/link/MLink.vue';
 import PbProjectItemSave from '../projects/project-item-save/PbProjectItemSave.vue';
 import MNotification from '../mozaic/notifications/MNotification.vue';
 import { NotificationOptions } from '@/types/pb/Notification';
-import { RestitutionPayload, RestitutionPayloadAction, RestitutionPayloadCallToAction } from '@/types/pb/Restitution';
+import {
+  RestitutionListPayload,
+  RestitutionPayloadAction,
+  RestitutionPayloadCallToAction,
+} from '@/types/pb/Restitution';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import PbRestitutionListBlock from './PbRestitutionListBlock.vue';
 import { Project } from '../../types/pb/Project';
@@ -183,7 +195,7 @@ export default defineComponent({
      * from the default ones.
      */
     payload: {
-      type: Object as PropType<RestitutionPayload>,
+      type: Object as PropType<RestitutionListPayload>,
       default: () => ({}),
       required: true,
     },
@@ -235,6 +247,9 @@ export default defineComponent({
       this.dialogContent = content;
       this.showDialog = !this.showDialog;
     },
+    handleLinkClicked(href: string) {
+      window.open(href, '_blank');
+    },
     handleItemCreated({
       projectId,
       estimateName,
@@ -302,16 +317,19 @@ $responsive-breakpoint: 'm';
   display: none;
 }
 
+.pb-restitution-wrapper {
+  height: calc(100vh - 80px);
+}
+
 .pb-restitution-list {
   @include set-font-face('regular');
-  height: calc(100vh - 120px);
   margin: 0 auto;
-  padding-top: $mu250;
   position: relative;
   width: 100%;
 
   @include set-from-screen($responsive-breakpoint) {
     justify-content: space-between;
+    padding-bottom: $mu250;
     width: calc(100% - #{$mu050} - #{$mu050});
   }
 
@@ -333,16 +351,31 @@ $responsive-breakpoint: 'm';
 
   &__title {
     @include set-font-face('semi-bold');
-    @include set-font-scale('07', 's');
-    left: 0;
+    @include set-font-scale('10', 's');
     padding: $mu100 0 $mu100 $mu025;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: $mu250;
+    text-align: left;
+
+    &::after {
+      background: $color-primary-01-600;
+      content: '';
+      display: block;
+      height: 4px;
+      margin-bottom: $mu150;
+      margin-top: $mu025;
+      width: 100px;
+    }
 
     @include set-from-screen($responsive-breakpoint) {
-      top: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 0px;
+      @include set-font-scale('07', 's');
+
+      &::after {
+        display: none;
+      }
     }
   }
 
@@ -364,7 +397,11 @@ $responsive-breakpoint: 'm';
   }
 
   &__line {
-    margin-top: $mu250;
+    padding: 8px;
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin-top: $mu250;
+    }
   }
 
   &__modal {
@@ -511,6 +548,12 @@ $responsive-breakpoint: 'm';
           }
         }
       }
+
+      &__legal-mentions {
+        color: $color-grey-600;
+        @include set-font-face('regular');
+        @include set-font-scale('04', 'm');
+      }
     }
 
     &__footer {

package/src/components/restitution/PbRestitutionListBlock.vue

@@ -109,7 +109,6 @@ $responsive-breakpoint: 'm';
   @include set-box-shadow('l');
   margin-bottom: $mu100;
   padding: $mu150;
-  width: 80%;
 
   @include set-from-screen($responsive-breakpoint) {
     padding: $mu250;
@@ -211,7 +210,7 @@ $responsive-breakpoint: 'm';
   border-bottom: 1px solid $color-grey-500;
   display: flex;
   flex-direction: column;
-  padding: $mu150 0 $mu075 0;
+  padding: $mu150 8px $mu075 8px;
 
   @include set-from-screen($responsive-breakpoint) {
     flex-direction: row;

package/src/components/restitution/PbRestitutionListLine.vue

@@ -3,12 +3,12 @@
     <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;
+        {{ formattedPriceRange(line.cost.min) }}&nbsp;et&nbsp;{{ formattedPriceRange(line.cost.max) }}
       </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__max">{{ formattedPriceRange(line.cost.max) }}</div>
     </div>
     <div class="pb-restitution-list-line__price">
-      <span v-if="line.cost.min === line.cost.max">{{ formatPriceRange(line.cost.min) }}</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>

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

@@ -1,6 +1,10 @@
 {
   "viewModel": {
     "title": "Votre estimation par travaux",
+    "backButtonAction": {
+      "type": "STEP",
+      "code": "STEP_CODE"
+    },
     "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."
     ]

package/src/types/pb/Restitution.ts

@@ -1,3 +1,5 @@
+import { array } from 'yup';
+
 export interface RestitutionCost {
   min: number;
   max: number;
@@ -81,3 +83,15 @@ export interface RestitutionPayload {
   callToActions: RestitutionPayloadCallToAction[];
   exitOptions: RestitutionExitOptions;
 }
+
+export interface RestitutionListPayload {
+  viewModel: RestitutionListViewModelPayload;
+  callToActions: RestitutionPayloadCallToAction[];
+  exitOptions: RestitutionExitOptions;
+}
+
+export interface RestitutionListViewModelPayload {
+  title: string;
+  backButtonAction: any;
+  legalMentions?: string[];
+}