project-booster-vue 9.40.0 → 9.41.0

package/package.json

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

package/src/components/restitution/PbRestitutionList.stories.mdx

@@ -6,7 +6,7 @@ import store from './../../stores/store';
 import { rest } from 'msw';
 import { successResolver, internalServerErrorResolver } from '../../services/api/mocks/commonMock';
 import { getProjectsResolver } from '../../services/api/mocks/projectsMock';
-import DEFAULT_PAYLOAD from './restitution-default.json';
+import DEFAULT_PAYLOAD from './restitution-list-default.json';
 import NO_PRICE_BAR from './restitution-no-pricebar.json';
 import SAVE_ITEM from './restitution-with-save-item.json';
 import EXIT_OPTIONS from './restitution-with-exit-options.json';
@@ -131,7 +131,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
 <Canvas>
   <Story
     name="101 Sandbox"
-    args={{ payload: DEFAULT_PAYLOAD }}
+    args={{ payload: DEFAULT_PAYLOAD, runtimeOptions: { isLoggedIn: true } }}
     parameters={{
       msw: [
         rest.get('/api/inhabitant-projects', getProjectsResolver),

package/src/components/restitution/PbRestitutionList.vue

@@ -15,7 +15,7 @@
         @click.once="$emit('go-back')"
       />
     </m-flex>
-    <div class="pb-restitution-list__title">Votre estimation par travaux</div>
+    <div class="pb-restitution-list__title">{{ payload?.viewModel?.title }}</div>
 
     <div class="pb-restitution-list__line">
       <pb-restitution-list-block
@@ -26,9 +26,31 @@
       ></pb-restitution-list-block>
     </div>
 
+    <m-flex class="pb-restitution-list__notifications" :direction="'column'" v-if="notifications.length > 0">
+      <m-flex
+        v-for="(notification, index) in notifications"
+        :key="`${index}-${notification.title}`"
+        direction="column"
+        align-items="center"
+        class="pb-restitution-list__notifications__container"
+      >
+        <m-notification
+          :title="notification.title"
+          :type="notification.type"
+          :text="notification.text"
+          :link-label="notification.linkLabel"
+          @link-click="handleLinkClicked(notification.linkHref)"
+        />
+      </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">
-        <m-button label="Être rappelé par un expert"></m-button>
+      <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'"
+        />
       </div>
       <div class="pb-restitution-list__footer__save">
         <pb-project-item-save
@@ -37,7 +59,6 @@
           @dialog-close="handleDialogClose"
           v-if="isLoggedIn"
         />
-        <!-- <m-button label="Enregistrer mon estimation" theme="bordered"></m-button> -->
       </div>
     </m-flex>
 
@@ -49,16 +70,16 @@
       @update:show-dialog="handleShowDialog"
     >
       <template #body>
-        <m-flex class="pb-restitution-list__modal__details" direction="column">
+        <div class="pb-restitution-list__modal__details" direction="column">
           <div class="pb-restitution-list__modal__details__title" v-html="summary.subprojectTemplateLabel"></div>
 
           <div class="pb-restitution-list__modal__details__row">
-            <m-flex class="pb-restitution-list__modal__details__row__title" justify-content="space-between">
+            <div class="pb-restitution-list__modal__details__row__title" justify-content="space-between">
               <div v-html="summary.components[0].title"></div>
               <div>
                 <strong>{{ summary.components[0].cost.min }}€ - {{ summary.components[0].cost.max }}€</strong>
               </div>
-            </m-flex>
+            </div>
 
             <div v-for="line in summary.components" :key="line.details">
               <div class="pb-restitution-list__modal__details__row__label" v-if="line.details">
@@ -83,7 +104,7 @@
             </div>
 
             <div v-for="line in summary.components[0].lines" :key="line.text">
-              <m-flex
+              <div
                 v-if="line.cost.reduce"
                 class="pb-restitution-list__modal__details__row__title"
                 :class="{ ' help border-bottom': line.cost.reduce }"
@@ -100,21 +121,20 @@
                     <strong>{{ line.cost.reduce }}€</strong>
                   </div>
                 </div>
-              </m-flex>
+              </div>
             </div>
           </div>
 
-          <m-flex
-            class="pb-restitution-list__modal__details__totals"
-            justify-content="space-between"
-            align-items="center"
-          >
+          <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 class="space-mx">entre</div>
             <div>
-              entre <strong>{{ summary.cost.min }}€</strong> et <strong>{{ summary.cost.max }}€</strong>
+              <strong>{{ summary.cost.min }}€</strong>
+              <div class="space-mx">et</div>
+              <strong>{{ summary.cost.max }}€</strong>
             </div>
-          </m-flex>
-        </m-flex>
+          </div>
+        </div>
       </template>
       <template #footer>
         <m-flex class="pb-restitution-list__modal__footer" align-items="center" justify-content="center">
@@ -133,11 +153,11 @@ import MDialog from '../mozaic/dialog/MDialog.vue';
 import MFlex from '../mozaic/flex/MFlex.vue';
 import MLink from '../mozaic/link/MLink.vue';
 import PbProjectItemSave from '../projects/project-item-save/PbProjectItemSave.vue';
-
-import { RestitutionPayload } from '@/types/pb/Restitution';
+import MNotification from '../mozaic/notifications/MNotification.vue';
+import { NotificationOptions } from '@/types/pb/Notification';
+import { RestitutionPayload, RestitutionPayloadAction } from '@/types/pb/Restitution';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import PbRestitutionListBlock from './PbRestitutionListBlock.vue';
-import { NotificationOptions } from '@/types/pb/Notification';
 import { Project } from '../../types/pb/Project';
 
 export default defineComponent({
@@ -148,6 +168,7 @@ export default defineComponent({
     MLink,
     PbRestitutionListBlock,
     PbProjectItemSave,
+    MNotification,
   },
   data() {
     return {
@@ -201,15 +222,14 @@ export default defineComponent({
   computed: {
     ...mapGetters('estimates', { summary: 'getSummary' }),
     isLoggedIn() {
-      return true;
+      return this.runtimeOptions.isLoggedIn === true;
     },
   },
   created() {
     if (this.payload?.callToActions) {
-      const saveAction = Object.values(this.payload.callToActions).find((cta) => {
-        cta.action?.component === 'PbProjectItemSave';
-      });
-      this.showSaveProjectItem = this.showSaveEstimate;
+      if (this.payload?.callToActions) {
+        this.showSaveProjectItem = this.showSaveEstimate;
+      }
     }
   },
   methods: {
@@ -238,20 +258,41 @@ export default defineComponent({
         linkLabel: 'Voir dans le projet',
       });
     },
+    handleDialogClose() {
+      this.showSaveProjectItem = false;
+    },
+    callAction(action: RestitutionPayloadAction) {
+      if (action.type === 'MODAL') {
+        if (action.component === 'PbProjectItemSave') {
+          if (this.runtimeOptions.isLoggedIn === true) {
+            this.showSaveProjectItem = true;
+          }
+
+          this.$emit('click-save-item', {
+            answers: [],
+            action: action,
+          });
+        }
+      } else {
+        this.$emit('step-completed', {
+          answers: [],
+          nextStep: action,
+        });
+      }
+    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
 @import 'pb-variables';
-
+$responsive-breakpoint: 'm';
 .hidden {
   display: none;
 }
 
 .pb-restitution-list {
   @include set-font-face('regular');
-
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -259,12 +300,17 @@ export default defineComponent({
   margin: 0 auto;
   padding-bottom: $mu250;
   position: relative;
-  width: calc(100% - #{$mu050} - #{$mu050});
+  width: 100%;
+
+  @include set-from-screen($responsive-breakpoint) {
+    justify-content: space-between;
+    width: calc(100% - #{$mu050} - #{$mu050});
+  }
 
   &__back-button {
     align-self: flex-start;
     opacity: 1;
-    padding: $mu100 0 $mu100 $mu025;
+    padding: $mu100 0 $mu100 $mu100;
     transition: opacity 0.15s 0.5s;
     z-index: 2;
 
@@ -282,7 +328,11 @@ export default defineComponent({
     position: absolute;
     right: 0;
     text-align: center;
-    top: 0;
+    top: $mu250;
+
+    @include set-from-screen($responsive-breakpoint) {
+      top: 0;
+    }
   }
 
   &__footer {
@@ -324,6 +374,14 @@ export default defineComponent({
         width: 100%;
 
         &__title {
+          @include set-from-screen($responsive-breakpoint) {
+            display: flex;
+            justify-content: space-between;
+          }
+
+          & > div {
+            margin-bottom: $mu050;
+          }
           &.help {
             margin-bottom: $mu150;
           }
@@ -356,30 +414,55 @@ export default defineComponent({
           list-style: disc;
 
           ul {
-            padding: 0 0 0 $mu100;
+            padding: 0;
+
+            @include set-from-screen($responsive-breakpoint) {
+              padding: 0 0 0 $mu100;
+            }
           }
 
           li {
             display: flex;
-            justify-content: space-between;
+            flex-direction: column;
             margin-bottom: $mu075;
 
+            @include set-from-screen($responsive-breakpoint) {
+              flex-direction: row;
+              justify-content: space-between;
+            }
+
             &::before {
               content: '•';
+              display: none;
               margin-right: 5px;
+
+              @include set-from-screen($responsive-breakpoint) {
+                display: inherit;
+                justify-content: space-between;
+              }
             }
 
             div {
               &:first-child {
                 @include set-font-face('regular');
                 @include set-font-scale('05', 's');
-                width: 60%;
+                margin-bottom: $mu050;
+                width: 100%;
+
+                @include set-from-screen($responsive-breakpoint) {
+                  margin-bottom: 0;
+                  width: 60%;
+                }
               }
 
               &:last-child {
                 @include set-font-face('semi-bold');
-                text-align: right;
-                width: 40%;
+                width: 100%;
+
+                @include set-from-screen($responsive-breakpoint) {
+                  text-align: right;
+                  width: 40%;
+                }
               }
             }
           }
@@ -389,6 +472,24 @@ export default defineComponent({
       &__totals {
         width: 100%;
 
+        .space-mx {
+          margin-right: 5px;
+
+          @include set-from-screen($responsive-breakpoint) {
+            margin: 0 5px;
+          }
+        }
+
+        & > div {
+          align-items: center;
+          display: flex;
+        }
+
+        @include set-from-screen($responsive-breakpoint) {
+          align-items: center;
+          display: flex;
+        }
+
         div {
           &:last-child {
             strong {
@@ -403,5 +504,27 @@ export default defineComponent({
       padding: $mu150 0;
     }
   }
+
+  &__notifications {
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 710px;
+    }
+
+    &__container {
+      margin: auto;
+      min-width: 90%;
+
+      @include set-from-screen($responsive-breakpoint) {
+        min-width: 100%;
+      }
+    }
+  }
+}
+
+.m-notification {
+  margin-top: $mu075;
+  width: 100%;
 }
 </style>

package/src/components/restitution/PbRestitutionListBlock.vue

@@ -4,13 +4,13 @@
       <div class="pb-restitution-list-block__title" v-html="summary.subprojectTemplateLabel"></div>
 
       <div class="pb-restitution-list-block__body" v-if="payload">
-        <m-flex class="pb-restitution-list-line" justify-content="space-between">
+        <div class="pb-restitution-list-line">
           <div class="pb-restitution-list-line__title" v-html="summary.components[0].title"></div>
-          <m-flex class="pb-restitution-list-line__price" justify-content="flex-end" wrap>
+          <div class="pb-restitution-list-line__price">
             <div class="pb-restitution-list-line__price__min">{{ summary.components[0].cost.min }}€&nbsp;-&nbsp;</div>
             <div class="pb-restitution-list-line__price__max">{{ summary.components[0].cost.max }}€</div>
-          </m-flex>
-        </m-flex>
+          </div>
+        </div>
 
         <pb-restitution-list-line
           v-for="line in payload.lines"
@@ -19,18 +19,15 @@
           :line="line"
         ></pb-restitution-list-line>
 
-        <m-flex class="pb-restitution-list-block__body__row unbordered">
-          <m-flex
-            class="pb-restitution-list-block__body__row__title full"
-            align-items="center"
-            justify-content="space-between"
-          >
+        <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>
             <div class="pb-restitution-list-block__body__row__title__amount">
-              entre <strong>{{ summary.cost.min }}€</strong> et <strong>{{ summary.cost.max }}€</strong>
+              <div>entre</div>
+              <strong>{{ summary.cost.min }}€</strong> et <strong>{{ summary.cost.max }}€</strong>
             </div>
-          </m-flex>
-        </m-flex>
+          </div>
+        </div>
 
         <m-button
           theme="bordered-neutral"
@@ -78,12 +75,18 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+$responsive-breakpoint: 'm';
 
 .pb-restitution-list-block {
   @include set-box-shadow('l');
   margin-bottom: $mu250;
-  padding: $mu250;
-  width: 630px;
+  padding: $mu150;
+  width: 80%;
+
+  @include set-from-screen($responsive-breakpoint) {
+    padding: $mu250;
+    width: 630px;
+  }
 
   &__title {
     @include set-font-face('semi-bold');
@@ -110,18 +113,36 @@ export default defineComponent({
 
       &__title {
         @include set-font-face('regular');
-        width: 70%;
+        width: 100%;
+
+        @include set-from-screen($responsive-breakpoint) {
+          width: 70%;
+        }
 
         &.full {
-          display: grid;
+          display: flex;
+          flex-direction: column;
           width: 100%;
           @include set-font-scale('06', 's');
+
+          @include set-from-screen($responsive-breakpoint) {
+            align-items: center;
+            flex-direction: row;
+          }
         }
 
         &__amount {
           @include set-font-scale('06', 's');
-          justify-self: flex-end;
-          margin-left: $mu100;
+
+          @include set-from-screen($responsive-breakpoint) {
+            align-items: center;
+            display: flex;
+            margin-left: $mu050;
+
+            strong {
+              margin: 0 5px;
+            }
+          }
 
           strong {
             @include set-font-scale('07', 's');
@@ -132,8 +153,14 @@ export default defineComponent({
       &__price {
         @include set-font-face('semi-bold');
         @include set-font-scale('05', 's');
-        text-align: right;
-        width: 30%;
+        display: flex;
+        width: 100%;
+
+        @include set-from-screen($responsive-breakpoint) {
+          flex-direction: row;
+          text-align: right;
+          width: 30%;
+        }
       }
     }
   }
@@ -141,19 +168,35 @@ export default defineComponent({
 
 .pb-restitution-list-line {
   border-bottom: 1px solid $color-grey-500;
+  display: flex;
+  flex-direction: column;
   padding: $mu150 0 $mu075 0;
 
+  @include set-from-screen($responsive-breakpoint) {
+    flex-direction: row;
+  }
+
   &__title {
     @include set-font-face('regular');
     @include set-font-scale('06', 's');
-    width: 70%;
+    margin-bottom: $mu050;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin-bottom: 0;
+    }
   }
 
   &__price {
     @include set-font-face('semi-bold');
     @include set-font-scale('06', 's');
-    text-align: right;
-    width: 30%;
+    display: flex;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      text-align: right;
+      width: 30%;
+    }
 
     strong {
       @include set-font-scale('07', 's');

package/src/components/restitution/PbRestitutionListLine.vue

@@ -1,21 +1,14 @@
 <template>
-  <m-flex
-    class="pb-restitution-list-line"
-    :class="{ green: line.type === 'REDUCTION' }"
-    justify-content="space-between"
-    v-if="line.type"
-  >
+  <div class="pb-restitution-list-line" :class="{ green: line.type === 'REDUCTION' }" v-if="line.type">
     <div class="pb-restitution-list-line__title" v-html="line.text"></div>
-    <m-flex class="pb-restitution-list-line__price" justify-content="flex-end" wrap v-if="line.type != 'REDUCTION'">
+    <div class="pb-restitution-list-line__price" v-if="line.type != 'REDUCTION'">
       <div class="pb-restitution-list-line__price__min">
         {{ formatPriceRange(line.cost.min, line.cost.max).min }}€&nbsp;-&nbsp;
       </div>
       <div class="pb-restitution-list-line__price__max">{{ formatPriceRange(line.cost.min, line.cost.max).max }}€</div>
-    </m-flex>
-    <m-flex class="pb-restitution-list-line__price" justify-content="flex-end" wrap v-else>
-      {{ line.cost.reduce }}€
-    </m-flex>
-  </m-flex>
+    </div>
+    <div class="pb-restitution-list-line__price">{{ line.cost.reduce }}€</div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -47,22 +40,43 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+$responsive-breakpoint: 'm';
 
 .pb-restitution-list-line {
   border-bottom: 1px solid $color-grey-500;
+  display: flex;
+  flex-direction: column;
   padding: $mu150 0 $mu075 0;
 
+  @include set-from-screen($responsive-breakpoint) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
   &__title {
     @include set-font-face('regular');
     @include set-font-scale('06', 's');
-    width: 70%;
+    margin-bottom: $mu050;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin-bottom: 0;
+      text-align: left;
+      width: 70%;
+    }
   }
 
   &__price {
     @include set-font-face('semi-bold');
     @include set-font-scale('06', 's');
-    text-align: right;
-    width: 30%;
+    display: flex;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      justify-content: flex-end;
+      text-align: right;
+      width: 30%;
+    }
 
     strong {
       @include set-font-scale('07', 's');

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

@@ -0,0 +1,24 @@
+{
+  "viewModel": {
+    "title": "Votre estimation par travaux"
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Être rappelé par un expert",
+      "href": "",
+      "bordered": false
+    },
+    {
+      "conditions": ["!runtimeOptions.projectMode && !runtimeOptions.estimateCreated"],
+      "type": "button",
+      "label": "J'enregistre mon estimation",
+      "action": {
+        "type": "MODAL",
+        "code": "SUMMARY",
+        "component": "PbProjectItemSave"
+      },
+      "bordered": true
+    }
+  ]
+}