project-booster-vue 9.44.0 → 9.44.2

package/package.json

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

package/src/components/question/PbQuestion.vue

@@ -284,7 +284,7 @@
       class="pb-question__dialog-help"
       v-model:show-dialog="displayDialogHelp"
       width="771px"
-      height="492px"
+      height="512px"
       maxHeight="100vh"
     >
       <template #header v-if="helpDialog">
@@ -1277,15 +1277,21 @@ $answers-apparition-duration: '0.5s';
 .pb-question {
   &__dialog-help {
     &__title {
-      padding: $mu250 $mu250 0 $mu250;
-      @include set-font-scale('06', 'm');
+      padding: $mu250 $mu250 $mu050 $mu250;
+
+      h2 {
+        @include set-font-scale('06', 'm');
+        margin-bottom: 0;
+      }
     }
 
     &__body {
       padding: 0 $mu250;
       @include set-font-scale('06', 'm');
       &__image {
-        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% auto;
         padding: 120px 0;
       }
     }

package/src/components/restitution/PbRestitutionList.vue

@@ -12,7 +12,7 @@
         :left-icon="BACK_ICON"
         :label="payload.backLabel || 'Modifier l\'estimation'"
         class="pb-restitution-list__back-button"
-        @click.once="callAction(payload.viewModel.backButtonAction)"
+        @click.once="$emit('go-back')"
       />
     </m-flex>
     <div class="pb-restitution-list__title">{{ payload?.viewModel?.title }}</div>
@@ -20,9 +20,7 @@
     <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>
@@ -79,8 +77,12 @@
 
           <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" :class="{ green: component.componentId === 'AID' }"></div>
+              <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>
                     {{ formattedPriceRange(component.cost.min) }} et
@@ -155,16 +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 {
-  RestitutionListPayload,
-  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';
 
@@ -352,7 +349,7 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('10', 's');
-    padding: $mu100 0 $mu100 $mu025;
+    padding: $mu250 0 0 $mu100;
     text-align: left;
 
     &::after {
@@ -441,7 +438,7 @@ $responsive-breakpoint: 'm';
           background: $color-primary-01-100;
           border-radius: 4px;
           color: $color-grey-600;
-          margin-top: 10px;
+          margin-bottom: 10px;
           padding: $mu075;
           position: relative;
           @include set-font-scale('05', 's');

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: {

package/src/components/restitution/PbRestitutionListLine.vue

@@ -1,22 +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;{{ formattedPriceRange(line.cost.max) }}
-      </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: {
@@ -24,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/types/pb/Restitution.ts

@@ -92,6 +92,5 @@ export interface RestitutionListPayload {
 
 export interface RestitutionListViewModelPayload {
   title: string;
-  backButtonAction: any;
   legalMentions?: string[];
 }