project-booster-vue 9.43.4 → 9.44.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.43.4",
+  "version": "9.44.1",
   "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,26 +1,26 @@
 <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="$emit('go-back')"
+      />
+    </m-flex>
     <div class="pb-restitution-list__title">{{ payload?.viewModel?.title }}</div>
 
     <div class="pb-restitution-list__line">
       <pb-restitution-list-block
         @button="handleShowDialog"
-        v-for="component in summary.components"
-        :key="component.componentId"
-        :payload="component"
+        :payload="summary"
         :legalMentions="payload?.viewModel?.legalMentions"
       ></pb-restitution-list-block>
     </div>
@@ -77,7 +77,11 @@
 
           <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
+                class="pb-restitution-list__modal__details__row__title"
+                :class="{ green: component.componentId == 'AID' }"
+                justify-content="space-between"
+              >
                 <div v-html="component.title"></div>
                 <div v-if="component.cost.min != component.cost.max">
                   <strong>
@@ -126,6 +130,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,12 +157,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, RestitutionPayloadCallToAction } from '@/types/pb/Restitution';
 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';
 
@@ -183,7 +192,7 @@ export default defineComponent({
      * from the default ones.
      */
     payload: {
-      type: Object as PropType<RestitutionPayload>,
+      type: Object as PropType<RestitutionListPayload>,
       default: () => ({}),
       required: true,
     },
@@ -235,6 +244,9 @@ export default defineComponent({
       this.dialogContent = content;
       this.showDialog = !this.showDialog;
     },
+    handleLinkClicked(href: string) {
+      window.open(href, '_blank');
+    },
     handleItemCreated({
       projectId,
       estimateName,
@@ -302,16 +314,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 +348,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 +394,11 @@ $responsive-breakpoint: 'm';
   }
 
   &__line {
-    margin-top: $mu250;
+    padding: 8px;
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin-top: $mu250;
+    }
   }
 
   &__modal {
@@ -511,6 +545,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

@@ -1,39 +1,15 @@
 <template>
-  <m-flex align-items="center" direction="column" v-if="payload.componentId != 'AID'">
+  <m-flex align-items="center" direction="column">
     <m-flex :class="`pb-restitution-list-block`" direction="column" ref="pbRestitutionListBlock">
       <div class="pb-restitution-list-block__title" v-html="summary.subprojectTemplateLabel"></div>
 
       <div class="pb-restitution-list-block__body" v-if="payload">
-        <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">
-              {{ 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>
-
         <pb-restitution-list-line
-          v-for="line in payload.lines"
-          :key="line.componentId"
-          :component="line"
-          :line="line"
+          v-for="component in payload.components"
+          :key="component.componentId"
+          :line="component"
         ></pb-restitution-list-line>
 
-        <div v-for="aidComponent in summary.components" :key="aidComponent.componentId">
-          <div v-if="aidComponent.componentId === 'AID'">
-            <pb-restitution-list-line
-              :key="aidComponent.title"
-              :component="aidComponent"
-              :line="aidComponent"
-              :renovAid="true"
-            ></pb-restitution-list-line>
-          </div>
-        </div>
-
         <div class="pb-restitution-list-block__body__row unbordered">
           <div class="pb-restitution-list-block__body__row__title full">
             <div><strong>Montant total</strong> (aides déduites)</div>
@@ -67,7 +43,7 @@ import MFlex from '../mozaic/flex/MFlex.vue';
 import MButton from '../mozaic/buttons/MButton.vue';
 import PbRestitutionListLine from './PbRestitutionListLine.vue';
 import { mapGetters } from 'vuex';
-import { RestitutionPayload } from '@/types/pb/Restitution';
+import { Restitution } from '@/types/pb/Restitution';
 
 export default defineComponent({
   components: {
@@ -77,8 +53,7 @@ export default defineComponent({
   },
   props: {
     payload: {
-      type: Object as PropType<RestitutionPayload>,
-      default: () => ({}),
+      type: Object as PropType<Restitution>,
       required: true,
     },
     legalMentions: {
@@ -109,7 +84,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 +185,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

@@ -1,20 +1,17 @@
 <template>
-  <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">{{ 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" :class="{ green: line.componentId == 'AID' }">
+    <div class="pb-restitution-list-line__title" v-html="line.title"></div>
     <div class="pb-restitution-list-line__price">
-      <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>
+      <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>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import MFlex from '../mozaic/flex/MFlex.vue';
+import { RestitutionComponent } from '@/types/pb/Restitution';
 
 export default defineComponent({
   components: {
@@ -22,16 +19,8 @@ export default defineComponent({
   },
   props: {
     line: {
-      type: Object,
-      default: () => ({}),
-    },
-    renovAid: {
-      type: Boolean,
-      default: () => false,
-    },
-    formatPriceRange: {
-      type: Function,
-      default: () => '',
+      type: Object as PropType<RestitutionComponent>,
+      required: true,
     },
   },
   methods: {

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,14 @@ export interface RestitutionPayload {
   callToActions: RestitutionPayloadCallToAction[];
   exitOptions: RestitutionExitOptions;
 }
+
+export interface RestitutionListPayload {
+  viewModel: RestitutionListViewModelPayload;
+  callToActions: RestitutionPayloadCallToAction[];
+  exitOptions: RestitutionExitOptions;
+}
+
+export interface RestitutionListViewModelPayload {
+  title: string;
+  legalMentions?: string[];
+}