project-booster-vue 9.37.0 → 9.38.0

package/package.json

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

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>

package/src/components/restitution/PbRestitutionListBlock.vue

@@ -0,0 +1,171 @@
+<template>
+  <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">
+        <m-flex class="pb-restitution-list-line" justify-content="space-between">
+          <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__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>
+
+        <pb-restitution-list-line
+          v-for="line in payload.lines"
+          :key="line.componentId"
+          :component="line"
+          :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><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>
+          </m-flex>
+        </m-flex>
+
+        <m-button
+          theme="bordered-neutral"
+          size="s"
+          class="pb-restitution-list-block__body__show"
+          label="Voir le détail de l'estimation"
+          @click="handleLinkClick(payload)"
+        />
+      </div>
+    </m-flex>
+  </m-flex>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MFlex from '../mozaic/flex/MFlex.vue';
+import MButton from '../mozaic/buttons/MButton.vue';
+import ObjectType from '@storybook/addon-knobs/dist/components/types/Object';
+import PbRestitutionListLine from './PbRestitutionListLine.vue';
+import { mapGetters } from 'vuex';
+
+export default defineComponent({
+  components: {
+    MFlex,
+    MButton,
+    PbRestitutionListLine,
+  },
+  props: {
+    payload: {
+      type: ObjectType,
+      default: () => ({}),
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters('estimates', { summary: 'getSummary' }),
+  },
+  methods: {
+    handleLinkClick(details: any) {
+      this.$emit('button', details);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+
+.pb-restitution-list-block {
+  @include set-box-shadow('l');
+  margin-bottom: $mu250;
+  padding: $mu250;
+  width: calc(710px - ($mu250 * 2));
+
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('07', 's');
+    margin-bottom: $mu050;
+  }
+
+  &__body {
+    width: 100%;
+
+    &__row {
+      border-bottom: 1px solid $color-grey-500;
+      padding: $mu100 0 $mu075 0;
+      width: 100%;
+
+      &.unbordered {
+        border-bottom: 0;
+        margin-bottom: $mu050;
+      }
+
+      &.green {
+        color: $color-secondary-green-600;
+      }
+
+      &__title {
+        @include set-font-face('regular');
+        width: 70%;
+
+        &.full {
+          display: grid;
+          width: 100%;
+          @include set-font-scale('06', 's');
+        }
+
+        &__amount {
+          @include set-font-scale('06', 's');
+          justify-self: flex-end;
+          margin-left: $mu100;
+
+          strong {
+            @include set-font-scale('07', 's');
+          }
+        }
+      }
+
+      &__price {
+        @include set-font-face('semi-bold');
+        @include set-font-scale('05', 's');
+        text-align: right;
+        width: 30%;
+      }
+    }
+  }
+}
+
+.pb-restitution-list-line {
+  border-bottom: 1px solid $color-grey-500;
+  padding: $mu150 0 $mu075 0;
+
+  &__title {
+    @include set-font-face('regular');
+    @include set-font-scale('06', 's');
+    width: 70%;
+  }
+
+  &__price {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('06', 's');
+    text-align: right;
+    width: 30%;
+
+    strong {
+      @include set-font-scale('07', 's');
+    }
+
+    &.unbordered {
+      border-bottom: 0;
+    }
+  }
+
+  &.green {
+    color: $color-secondary-green-600;
+  }
+}
+</style>

package/src/components/restitution/PbRestitutionListLine.vue

@@ -0,0 +1,80 @@
+<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__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__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>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MFlex from '../mozaic/flex/MFlex.vue';
+
+export default defineComponent({
+  components: {
+    MFlex,
+  },
+  props: {
+    line: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    handleLinkClick() {
+      this.$emit('button', true);
+    },
+    formatPriceRange(min: number, max: number) {
+      if (min < max) {
+        return { min, max };
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+
+.pb-restitution-list-line {
+  border-bottom: 1px solid $color-grey-500;
+  padding: $mu150 0 $mu075 0;
+
+  &__title {
+    @include set-font-face('regular');
+    @include set-font-scale('06', 's');
+    width: 70%;
+  }
+
+  &__price {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('06', 's');
+    text-align: right;
+    width: 30%;
+
+    strong {
+      @include set-font-scale('07', 's');
+    }
+
+    &.unbordered {
+      border-bottom: 0;
+    }
+  }
+
+  &.green {
+    color: $color-secondary-green-600;
+  }
+}
+</style>