project-booster-vue 10.25.14 → 10.26.0

package/package.json

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

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');
           }
         }