project-booster-vue 9.36.4 → 9.38.0

package/package.json

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

package/src/components/media/upload/PbMediaUpload.vue

@@ -470,7 +470,7 @@ export default defineComponent({
       return await mediaValidator({
         minHeight: 16,
         minWidth: 16,
-        maxFileSize: 20000000,
+        maxFileSize: 20_000_000, // max document file size is: 20MB
         accept: this.acceptedUploadedTypes,
       })(file);
     },

package/src/components/question/PbQuestion.vue

@@ -410,12 +410,15 @@ export const doEval = (
   );
 };
 
+//TODO Think to move this kind of function in something like "helpers" or "tools"
+// because this is use in multiple components (as PbIncrementalAmountInput.vue),
+// and it shouldn't be in a component.
 export const decorate = (
   answers: Map<string, ScenarioStepAnswer[]>,
   runtimeOptions = {},
   valueToDecorate: string,
   defaultValue = '',
-) => {
+): string => {
   let decoratedValue = valueToDecorate;
   if (valueToDecorate) {
     const stringToEval = `\`${valueToDecorate}\``;

package/src/components/question/city-search/PbCitySearch.vue

@@ -9,7 +9,7 @@
           'pb-city-search__back-button--hidden':
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
-        @click.once="$router.go(-1)"
+        @click.once="$emit('go-back')"
       />
     </m-flex>
     <div class="pb-city-search__title">

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -155,7 +155,13 @@ export default defineComponent({
     const computedPayload = computed(() => {
       let tempPayload = cloneDeep(DEFAULT_PAYLOAD);
       tempPayload = merge(tempPayload, props.payload);
+
+      // This will doEval and decorate dynamically variables from JSON templates
+      // For instance:
+      // "${getAnswerValue('DEVELOPER', 'code') == 'YES' ? 'I'm developer' : 'I'm not developer'}"
       tempPayload.viewModel.label = decorate(props.answers!, props.runtimeOptions, tempPayload.viewModel.label);
+      tempPayload.viewModel.subtitle = decorate(props.answers!, props.runtimeOptions, tempPayload.viewModel.subtitle);
+
       return tempPayload as IncrementalAmountPayload;
     });
     const pbIncrementalAmountInput = ref<HTMLElement>();

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

@@ -0,0 +1,147 @@
+import PbRestitutionList from './PbRestitutionList.vue';
+import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
+import { useStore } from 'vuex';
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+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 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';
+import EXIT_OPTIONS_WITH_CONDITIONNAL from './restitution-with-conditionnal-exit-options.json';
+import CALL_TO_ACTION_WITH_MODAL from './restitution-call-to-actions-with-modal.json';
+
+<Meta
+  title="Project Booster/Components/Restitution/PbRestitutionList 🦠"
+  component={PbRestitutionList}
+  decorators={[nestedAppDecorator(store, [])]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+export const summary = {
+  subprojectId: 'ae62d167-e02e-4744-81b1-102cc5816be2',
+  subprojectTemplateId: '22248ac3-9391-47f4-8a54-6fe280c2fa5b',
+  businessUnit: 'LMFR',
+  summaryDate: '2020-05-13T09:49:45.886602047Z',
+  subprojectTemplateLabel: '<strong>Pompe à chaleur air/air</strong>',
+  cost: {
+    min: 3139.99,
+    max: 3939.99,
+    currency: 'EURO',
+  },
+  components: [
+    {
+      componentId: 'LAND',
+      title: '<strong>Pompe à chaleur installée</strong> (hors aides)',
+      cost: {
+        min: 3139.99,
+        max: 3939.99,
+        currency: 'EURO',
+      },
+      lines: [
+        {
+          text: '<strong>Pompe à chaleur installée</strong> (hors aides)',
+          details: 'Terrain constructible, délimité et viabilisé. La nature du sous-sol est garantie.',
+          cost: {
+            min: 6499,
+            max: 7299,
+            currency: 'EURO',
+          },
+        },
+        {
+          text: '<strong>Pompe à chaleur installée</strong> (hors aides)',
+          cost: {
+            min: 6499,
+            max: 7299,
+            currency: 'EURO',
+          },
+        },
+        {
+          text: '<strong>Aide estimées</strong> (MaPrimeRénov, Prime Energie)',
+          type: 'REDUCTION',
+          cost: {
+            reduce: -3600,
+            currency: 'EURO',
+          },
+        },
+      ],
+    },
+  ],
+  subprojectAttributes: {
+    finish: 'PARTIALLY_BY_MYSELF',
+    houseType: 'CONTEMPORARY',
+    inseeCode: '59350',
+    land: 'NOT_YET',
+    landSurfaceInSquareMeters: 123,
+    landType: 'IN_A_LOT',
+    livingAreaInSquareMeters: 465,
+  },
+  suggestedTypologies: [
+    {
+      domesticSpaceLabel: 'Cuisine',
+      domesticSpaceHref: '/domestic-spaces/59405',
+      projectKindHref: '/project-kinds/34048',
+      projectTypeHref: '/project-types/29239',
+    },
+    {
+      domesticSpaceLabel: 'Tout le logement',
+      domesticSpaceHref: '/domestic-spaces/59461',
+      projectKindHref: '/project-kinds/34048',
+      projectTypeHref: '/project-types/61855',
+    },
+  ],
+  legalMentions: [
+    "Les prix ci-dessus ne sont proposés qu'à titre indicatif et sont basés sur les prix du marché.",
+    "L'outil d'estimation ne vaut pas offre de vente.",
+    "La disponibilité des produits au moment de l'achat n'est pas garantie.",
+  ],
+};
+
+# 🦠 `PbRestitutionList` - Component
+
+The `PbRestitutionList` component allows to display the summary of an estimate.
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PbRestitutionList },
+  setup() {
+    const store = useStore();
+    store.dispatch('projects/loadProjects');
+    store.dispatch('estimates/setSummary', summary);
+    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: `<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="101 Sandbox"
+    args={{ payload: DEFAULT_PAYLOAD }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-projects', getProjectsResolver),
+        rest.post('/api/estimates', successResolver),
+        rest.post('/api/inhabitant-projects', successResolver),
+      ],
+      storyshots: { disable: true },
+    }}
+    inline={false}
+    height="1024px"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/restitution/PbRestitutionList.vue

@@ -0,0 +1,354 @@
+<template>
+  <m-flex align-items="center" direction="column">
+    <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">Votre estimation par travaux</div>
+
+    <div class="pb-restitution-list__line">
+      <pb-restitution-list-block
+        @button="handleShowDialog"
+        v-for="component in summary.components"
+        :key="component.componentId"
+        :payload="component"
+      ></pb-restitution-list-block>
+    </div>
+
+    <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>
+      <div class="pb-restitution-list__footer__save">
+        <m-button label="Enregistrer mon estimation" theme="bordered"></m-button>
+      </div>
+    </m-flex>
+
+    <m-dialog
+      class="pb-restitution-list__modal"
+      :show-dialog="showDialog"
+      width="771px"
+      maxHeight="100vh"
+      @update:show-dialog="handleShowDialog"
+    >
+      <template #body>
+        <m-flex 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 v-html="summary.components[0].title"></div>
+              <div>
+                <strong>{{ summary.components[0].cost.min }}€ - {{ summary.components[0].cost.max }}€</strong>
+              </div>
+            </m-flex>
+
+            <div v-for="line in summary.components[0].lines" :key="line.text">
+              <div class="pb-restitution-list__modal__details__row__label" v-if="line.details">
+                {{ line.details }}
+              </div>
+            </div>
+
+            <div class="pb-restitution-list__modal__details__row__list pb-restitution-list__modal__details__row">
+              <ul>
+                <div v-for="line in summary.components[0].lines" :key="line.text">
+                  <li v-if="!line.cost.reduce">
+                    <div v-html="line.text" v-if="!line.cost.reduce"></div>
+                    <div v-if="!line.cost.reduce">{{ line.cost.min }}€ - {{ line.cost.max }}€</div>
+                  </li>
+                </div>
+              </ul>
+            </div>
+
+            <m-flex
+              class="pb-restitution-list__modal__details__row__title help border-bottom"
+              justify-content="space-between"
+            >
+              <span v-for="line in summary.components[0].lines" :key="line" :class="{ hidden: !line.cost.reduce }">
+                <div v-if="line.cost.reduce">
+                  <div v-html="line.text" class="green"></div>
+                </div>
+              </span>
+
+              <div v-for="line in summary.components[0].lines" :key="line">
+                <div v-if="line.cost.reduce" class="green">
+                  <strong>{{ line.cost.reduce }}€</strong>
+                </div>
+              </div>
+            </m-flex>
+          </div>
+
+          <m-flex
+            class="pb-restitution-list__modal__details__totals"
+            justify-content="space-between"
+            align-items="center"
+          >
+            <div><strong>Montant total</strong> (aides déduites)</div>
+            <div>
+              entre <strong>{{ summary.cost.min }}€</strong> et <strong>{{ summary.cost.max }}€</strong>
+            </div>
+          </m-flex>
+        </m-flex>
+      </template>
+      <template #footer>
+        <m-flex class="pb-restitution-list__modal__footer" align-items="center" justify-content="center">
+          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleShowDialog"></m-button>
+        </m-flex>
+      </template>
+    </m-dialog>
+  </m-flex>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { mapGetters } from 'vuex';
+import MButton from '../mozaic/buttons/MButton.vue';
+import MDialog from '../mozaic/dialog/MDialog.vue';
+import MFlex from '../mozaic/flex/MFlex.vue';
+import MLink from '../mozaic/link/MLink.vue';
+
+import { RestitutionPayload } from '@/types/pb/Restitution';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import PbRestitutionListBlock from './PbRestitutionListBlock.vue';
+
+export default defineComponent({
+  components: {
+    MButton,
+    MDialog,
+    MFlex,
+    MLink,
+    PbRestitutionListBlock,
+  },
+  data() {
+    return {
+      showDialog: false,
+      dialogContent: null,
+    };
+  },
+  // eslint-disable-next-line vue/order-in-components
+  props: {
+    /**
+     * The component view model and business data as an object. The provided prop
+     * is merged with the default payload value so only overriden values will change
+     * from the default ones.
+     */
+    payload: {
+      type: Object as PropType<RestitutionPayload>,
+      default: () => ({}),
+      required: true,
+    },
+    /**
+     * The previous answers to inject
+     */
+    answers: {
+      type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+      default: () => null,
+    },
+    /**
+     * The options provided at runtime to customize component behaviour
+     */
+    runtimeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    /**
+     * Flag indidicating whether the back button should be displayed
+     */
+    showBackButton: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Flag to show/hide the save estimate button
+     */
+    showSaveEstimate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapGetters('estimates', { summary: 'getSummary' }),
+  },
+  methods: {
+    handleShowDialog(content: any) {
+      this.dialogContent = content;
+      this.showDialog = !this.showDialog;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+
+.hidden {
+  display: none;
+}
+
+.pb-restitution-list {
+  @include set-font-face('regular');
+
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0 auto;
+  padding-bottom: $mu250;
+  position: relative;
+  width: calc(100% - #{$mu050} - #{$mu050});
+
+  &__back-button {
+    align-self: flex-start;
+    opacity: 1;
+    padding: $mu100 0 $mu100 $mu025;
+    transition: opacity 0.15s 0.5s;
+    z-index: 2;
+
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('07', 's');
+    left: 0;
+    padding: $mu100 0 $mu100 $mu025;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+  }
+
+  &__footer {
+    background: #ffffff;
+    bottom: 0;
+    left: 0;
+    padding: $mu100 0 $mu100 $mu025;
+    position: fixed;
+    right: 0;
+    @include set-box-shadow('l');
+
+    &__save,
+    &__call {
+      margin: 0 $mu050;
+    }
+  }
+
+  &__line {
+    margin-top: $mu250;
+  }
+
+  &__modal {
+    &__details {
+      padding: $mu250 $mu250 0 $mu250;
+
+      .green {
+        color: $color-secondary-green-600;
+      }
+
+      &__title {
+        @include set-font-face('semi-bold');
+        @include set-font-scale('07', 's');
+        margin-bottom: $mu150;
+      }
+
+      &__row {
+        border-bottom: 1px solid $color-grey-600;
+        margin-bottom: $mu150;
+        width: 100%;
+
+        &__title {
+          &.help {
+            margin-bottom: $mu150;
+          }
+        }
+
+        &__label {
+          background: $color-primary-01-100;
+          border-radius: 4px;
+          color: $color-grey-600;
+          margin-top: 10px;
+          padding: $mu075;
+          position: relative;
+          @include set-font-scale('05', 's');
+
+          &::before {
+            border-color: transparent transparent $color-primary-01-100 transparent;
+            border-style: solid;
+            border-width: 0 10px 16px 10px;
+            content: '';
+            height: 0;
+            left: 10px;
+            position: absolute;
+            top: -8px;
+            width: 0;
+          }
+        }
+
+        &__list {
+          color: $color-grey-600;
+          list-style: disc;
+
+          ul {
+            padding: 0 0 0 $mu100;
+          }
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: $mu075;
+
+            &::before {
+              content: '•';
+              margin-right: 5px;
+            }
+
+            div {
+              &:first-child {
+                @include set-font-face('regular');
+                @include set-font-scale('05', 's');
+                width: 60%;
+              }
+
+              &:last-child {
+                @include set-font-face('semi-bold');
+                text-align: right;
+                width: 40%;
+              }
+            }
+          }
+        }
+      }
+
+      &__totals {
+        width: 100%;
+
+        div {
+          &:last-child {
+            strong {
+              @include set-font-scale('07', 's');
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      padding: $mu150 0;
+    }
+  }
+}
+</style>