project-booster-vue 10.25.13 → 10.26.0

package/package.json

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

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -73,8 +73,6 @@
                   :title="appointmentNotificationTitle"
                   :type="appointmentNotificationType"
                   :text="appointmentNotificationText"
-                  :link-label="appointmentNotificationLinkLabel"
-                  @link-click="handleAppointmentLinkClick"
                   is-big
                 />
               </m-flex>
@@ -1017,12 +1015,6 @@ export default defineComponent({
         ? 'Date du rendez-vous passée.'
         : 'Si vous le souhaitez vous pourrez annuler le rendez-vous dans le mail qui vous a été envoyé.<br/>N’oubliez pas !';
     },
-
-    appointmentNotificationLinkLabel() {
-      return this.readOnly || this.appointment.isPast || this.appointment.cancelled
-        ? ''
-        : 'Ajoutez des plans aux mesures de votre pièce et des photos pour bien préparer le rendez-vous.';
-    },
   },
 
   watch: {
@@ -1230,22 +1222,6 @@ export default defineComponent({
     handleDocumentUploaded() {
       this.$store.dispatch('documents/refreshMediaList');
     },
-
-    handleAppointmentLinkClick() {
-      this.$store.dispatch('sendEventToBus', {
-        code: 'appointmentLinkClicked',
-        payload: this.project.id,
-      });
-
-      const pageName = ['KITCHEN_IN_STORE', 'KITCHEN_REMOTE'].includes(this.appointment.appointmentType)
-        ? 'cuisine'
-        : 'salle-de-bains';
-      nextTick(() => {
-        (<any>(
-          window
-        )).location = `/projets/preparation-rendez-vous/${pageName}.html?inhabitantProjectId=${this.project.id}&appointmentId=${this.appointment.appointmentId}&groupId=${this.appointment.groupId}&calendarId=${this.appointment.calendarId}&leadSourceDetail=Project_Space`;
-      });
-    },
   },
 });
 </script>

package/src/components/projects/projects-list/PbProjectHub.vue

@@ -73,8 +73,6 @@
                   :title="appointmentNotificationTitle"
                   :type="appointmentNotificationType"
                   :text="appointmentNotificationText"
-                  :link-label="appointmentNotificationLinkLabel"
-                  @link-click="handleAppointmentLinkClick"
                   is-big
                 />
               </m-flex>
@@ -1026,12 +1024,6 @@ export default defineComponent({
         ? 'Date du rendez-vous passée.'
         : 'Si vous le souhaitez vous pourrez annuler le rendez-vous dans le mail qui vous a été envoyé.<br/>N’oubliez pas !';
     },
-
-    appointmentNotificationLinkLabel() {
-      return this.readOnly || this.appointment.isPast || this.appointment.cancelled
-        ? ''
-        : 'Ajoutez des plans aux mesures de votre pièce et des photos pour bien préparer le rendez-vous.';
-    },
   },
 
   watch: {
@@ -1239,18 +1231,6 @@ export default defineComponent({
     handleDocumentUploaded() {
       this.$store.dispatch('documents/refreshMediaList');
     },
-
-    handleAppointmentLinkClick() {
-      this.$store.dispatch('sendEventToBus', {
-        code: 'appointmentLinkClicked',
-        payload: this.project.id,
-      });
-      nextTick(() => {
-        (<any>(
-          window
-        )).location = `/projets/preparation-rendez-vous/cuisine.html?inhabitantProjectId=${this.project.id}&appointmentId=${this.appointment.appointmentId}&groupId=${this.appointment.groupId}&calendarId=${this.appointment.calendarId}&leadSourceDetail=Project_Space`;
-      });
-    },
   },
 });
 </script>

package/src/components/rework/restitution/MPbRestitutionList.stories.mdx

@@ -105,6 +105,100 @@ export const summary = {
   ],
 };
 
+export const ROISummary = {
+  subprojectTemplateId: 'c353f7f8-d405-4000-86a0-63e5053a769e',
+  subprojectTemplateLabel: 'Panneaux photovoltaïques',
+  businessUnit: 'LMFR',
+  summaryDate: '2024-006T20:21:17.313023151Z',
+  cost: {
+    min: 10734,
+    max: 10734,
+    currency: 'EURO',
+  },
+  components: [
+    {
+      componentId: 'FURNISHING',
+      title: 'Panneaux photovoltaïques (hors aides)',
+      details:
+        "Le prix est estimatif et non contractuel : il est susceptible d'etre revu à la hausse ou à la baisse et sera confirmé par le relevé technique.",
+      cost: {
+        min: 11800,
+        max: 11800,
+        currency: 'EURO',
+      },
+      lines: [
+        {
+          text: "10 panneaux photovoltaïques + installation (sous réserve d'éligibilité à la TVA réduite)",
+          cost: {
+            min: 11800,
+            max: 11800,
+            currency: 'EURO',
+          },
+        },
+      ],
+    },
+    {
+      componentId: 'AID',
+      title: 'Aides estimées (Leroy Merlin)',
+      cost: {
+        min: -1066,
+        max: -1066,
+        currency: 'EURO',
+      },
+      lines: [
+        {
+          text: "Prime à l'autoconsommation",
+          cost: {
+            min: -1066,
+            max: -1066,
+            currency: 'EURO',
+          },
+        },
+      ],
+    },
+    {
+      componentId: 'ROI',
+      title: 'Votre installation serait rentabilisée en 10 ans',
+      cost: {
+        min: 0,
+        max: 0,
+        currency: 'EURO',
+      },
+      lines: [
+        {
+          text: '1125 € de gain annuel (basé sur 0,25 € par kWh)',
+        },
+        {
+          text: "28125 € de gain sur 25 ans (sur base du prix du Kwh d'électricité en 2024)",
+        },
+        {
+          text: '4500 kWh de Production moyenne annuelle',
+        },
+        {
+          text: '19 m² de surface utilisée',
+        },
+      ],
+    },
+  ],
+  subprojectAttributes: {
+    age: 'NEW',
+    housingType: 'HOUSE',
+    income: 'MIDDLE',
+    inhabitantsCount: 1,
+    location: '20137',
+    situation: 'OWNER',
+    surfaceAreaInSquareMeters: 40,
+  },
+  suggestedTypologies: [
+    {
+      domesticSpaceLabel: 'Tout le logement',
+      domesticSpaceHref: '/domestic-spaces/59461',
+      projectKindHref: '/project-kinds/34048',
+      projectTypeHref: '/project-types/61855',
+    },
+  ],
+};
+
 # 🦠 `MPbRestitutionList` - Component
 
 The `MPbRestitutionList` component allows to display the summary of an estimate.
@@ -149,3 +243,42 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+export const TemplateSandbox2 = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MPbRestitutionList },
+  setup() {
+    const store = useStore();
+    store.dispatch('projects/loadProjects');
+    store.dispatch('estimates/setSummary', ROISummary);
+    store.dispatch('projects/loadTypologies');
+    store.dispatch('estimates/initSessions', {
+      formId: 'FORM_ID',
+      correlationId: 'CORRELATION_ID',
+      estimatorId: 'ESTIMATOR_ID',
+      businessUnit: 'BU',
+      subprojectFormStructure: {},
+      source: 'SOURCE',
+      sourceDetail: 'SOURCE_DETAIL',
+    });
+    return { args };
+  },
+  template: `<m-pb-restitution-list :payload="args.payload" :answers="args.answers" :show-save-estimate="args.showSaveEstimate" :runtime-options="args.runtimeOptions" :show-back-button="args.showBackButton" />`,
+});
+
+<Canvas>
+  <Story
+    name="Features/ROI"
+    args={{ payload: DEFAULT_PAYLOAD, runtimeOptions: { isLoggedIn: true, projectMode: true } }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects', getProjectsResolver),
+        rest.post('/api/estimates', successResolver),
+        rest.post('/api/inhabitant-projects', successResolver),
+      ],
+      storyshots: { disable: true },
+    }}
+  >
+    {TemplateSandbox2.bind({})}
+  </Story>
+</Canvas>

package/src/components/rework/restitution/MPbRestitutionListLine.vue

@@ -3,7 +3,7 @@
     <template #beforeLabel>
       <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__range">
+        <div v-if="line.componentId !== 'ROI'" class="pb-restitution-list-line__range">
           <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>
@@ -17,25 +17,22 @@
           </template>
         </m-notification>
 
-        <div
-          v-for="detail in line.lines"
-          :key="detail.text"
-          class="pb-restitution-list-line__row"
-          :class="{ ' pb-restitution-list-line__row--reduce': detail.cost.reduce }"
-        >
+        <div v-for="detail in line.lines" :key="detail.text" class="pb-restitution-list-line__row">
           <ul>
             <div>
               <li>
                 <div v-html="detail.text"></div>
 
-                <m-flex v-if="detail.cost.min != detail.cost.max" align-items="center" justify-content="flex-end">
-                  <span v-html="formattedPriceRange(detail.cost.min)"></span>
-                  <span>&nbsp;et&nbsp;</span>
-                  <span v-html="formattedPriceRange(detail.cost.max)"></span>
-                </m-flex>
-                <m-flex v-else align-items="center" justify-content="flex-end">
-                  <span v-html="formattedPriceRange(detail.cost.min)"></span>
-                </m-flex>
+                <div v-if="line.componentId !== 'ROI'">
+                  <m-flex v-if="detail.cost.min != detail.cost.max" align-items="center" justify-content="flex-end">
+                    <span v-html="formattedPriceRange(detail.cost.min)"></span>
+                    <span>&nbsp;et&nbsp;</span>
+                    <span v-html="formattedPriceRange(detail.cost.max)"></span>
+                  </m-flex>
+                  <m-flex v-else align-items="center" justify-content="flex-end">
+                    <span v-html="formattedPriceRange(detail.cost.min)"></span>
+                  </m-flex>
+                </div>
               </li>
             </div>
           </ul>
@@ -97,10 +94,10 @@ $responsive-breakpoint: 'm';
         display: flex;
 
         div {
-          width: 50%;
+          width: 100%;
           color: $color-grey-600;
 
-          &:last-child {
+          span {
             @include set-font-face('semi-bold');
           }
         }