project-booster-vue 9.41.0 → 9.42.0

package/package.json

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

package/src/components/products/PbProducts.vue

@@ -6,8 +6,7 @@
         :left-icon="BACK_ICON"
         :class="{
           'pb-products__back-button': true,
-          'pb-products__back-button--hidden':
-            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
+          'pb-products__back-button--hidden': true,
         }"
         @click.once="$emit('go-back')"
       />

package/src/components/question/PbQuestion.vue

@@ -352,7 +352,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import objectPath from 'object-path';
 import MButton from '../mozaic/buttons/MButton.vue';
 import MContainer from '../mozaic/grid/MContainer.vue';
 import MDialog from '../mozaic/dialog/MDialog.vue';
@@ -366,6 +365,7 @@ import PbCard from '../cards/PbCard.vue';
 import PbStickyFooter from '../sticky-footer/PbStickyFooter.vue';
 import { sortAnswers } from './sortAnswers';
 import { areConditionsValid } from '../../services/scenarioConditionals';
+import { decorate } from '@/services/decorate';
 import {
   ScenarioStepAnswer,
   ScenarioStepAnswerDialog,
@@ -383,54 +383,6 @@ const BACK_ICON =
 const INFO_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Notification_Information_24px.svg';
 
-// Function used by the scenario conditions
-const getAnswerValue = (answers: Map<string, ScenarioStepAnswer[]>) => {
-  return (answerCode: string, path: string) => {
-    let answerValue: ScenarioStepAnswer | undefined = undefined;
-    if (answers?.get(answerCode)) {
-      const answerValues = answers.get(answerCode) ?? [];
-      answerValue = objectPath.get(answerValues[0], path);
-    }
-    return answerValue;
-  };
-};
-
-export const doEval = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToEval: string,
-  defaultValue: string,
-  runtimeOptions: any,
-) => {
-  return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-    this,
-    getAnswerValue(answers),
-    Object.fromEntries(answers),
-    defaultValue,
-    runtimeOptions,
-  );
-};
-
-//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}\``;
-    try {
-      decoratedValue = doEval(answers, stringToEval, defaultValue, runtimeOptions);
-    } catch (error) {
-      decoratedValue = valueToDecorate || defaultValue;
-    }
-  }
-  return decoratedValue;
-};
-
 export default defineComponent({
   name: 'PbQuestion',
 

package/src/components/question/amount-input/PbAmountInput.vue

@@ -63,7 +63,7 @@ import MTextInput from './../../mozaic/text-input/MTextInput.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { AmountInputPayload } from '@/components/question/amount-input/AmountInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

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

@@ -106,14 +106,13 @@ import debounce from 'lodash.debounce';
 import merge from 'lodash.merge';
 import initGoogleMapsApi from './google-maps-api';
 import axios from 'axios';
-import objectPath from 'object-path';
 import MFlex from '../../mozaic/flex/MFlex.vue';
 import MButton from '../../mozaic/buttons/MButton.vue';
 import MLink from '../../mozaic/link/MLink.vue';
 import MTextInput from '../../mozaic/text-input/MTextInput.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { DebouncedFunc } from 'lodash-es';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 
 const BACK_ICON =

package/src/components/question/configurations-import/PbConfigurationsImport.vue

@@ -165,7 +165,6 @@ import MLink from '../../../components/mozaic/link/MLink.vue';
 import MNotification from '../../../components/mozaic/notifications/MNotification.vue';
 import PbCard from '../../../components/cards/PbCard.vue';
 import { format } from 'date-fns';
-import objectPath from 'object-path';
 import {
   ConfigurationsImportMultiSelectAction,
   ConfigurationsImportPayload,
@@ -174,7 +173,7 @@ import {
 } from '@/components/question/configurations-import/ConfigurationsImport';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { Configuration } from '@/types/pb/Configuration';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

package/src/components/question/dimensions-input/PbDimensionsInput.vue

@@ -101,7 +101,7 @@ import MIcon from '../../mozaic/icon/MIcon.vue';
 import { ref } from 'vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { DimensionsInputPayload } from '@/components/question/dimensions-input/DimensionsInput';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

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

@@ -72,7 +72,7 @@ import MLink from '../../mozaic/link/MLink.vue';
 import MButton from '../../mozaic/buttons/MButton.vue';
 import { ref } from 'vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 import MQuantitySelector from '../../mozaic/quantityselector/MQuantitySelector.vue';
 import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
 
@@ -169,9 +169,6 @@ export default defineComponent({
       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);
 

package/src/components/question/list-select/PbListSelect.vue

@@ -75,15 +75,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { ref, computed, onMounted, Ref } from 'vue';
-import objectPath from 'object-path';
 import MFlex from '../../mozaic/flex/MFlex.vue';
 import MButton from '../../mozaic/buttons/MButton.vue';
 import MLink from '../../mozaic/link/MLink.vue';
 import PbItemsList from '../../items/PbItemsList.vue';
 import { sortAnswers } from '../sortAnswers';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { Item } from '@/types/pb/Item';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

package/src/components/question/name-input/PbNameInput.vue

@@ -60,7 +60,7 @@ import MToggle from '../../mozaic/toggle/MToggle.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { NameInputPayload } from '@/components/question/name-input/NameInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

package/src/components/question/space-input/PbSpaceInput.vue

@@ -146,7 +146,7 @@ import MDialog from '../../mozaic/dialog/MDialog.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { decorate } from '@/components/question/PbQuestion.vue';
+import { decorate } from '@/services/decorate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

package/src/components/question/upload-document/PbUploadDocument.vue

@@ -139,7 +139,6 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted, ref, PropType, Ref, ComponentCustomProperties } from 'vue';
-import objectPath from 'object-path';
 import MButton from '../../mozaic/buttons/MButton.vue';
 import MContainer from '../../mozaic/grid/MContainer.vue';
 import MFlex from '../../mozaic/flex/MFlex.vue';
@@ -156,7 +155,7 @@ import {
   UploadDocumentViewModel,
 } from '@/components/question/upload-document/UploadDocument';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { decorate, doEval } from '@/components/question/PbQuestion.vue';
+import { decorate, doEval } from '@/services/decorate';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

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

@@ -23,49 +23,67 @@ import CALL_TO_ACTION_WITH_MODAL from './restitution-call-to-actions-with-modal.
 />
 
 export const summary = {
-  subprojectId: 'ae62d167-e02e-4744-81b1-102cc5816be2',
-  subprojectTemplateId: '22248ac3-9391-47f4-8a54-6fe280c2fa5b',
+  subprojectTemplateId: '44cddf9d-f0e8-4d3d-82dc-d717dc70342a',
+  subprojectTemplateLabel: 'Pompe à chaleur air-eau',
   businessUnit: 'LMFR',
-  summaryDate: '2020-05-13T09:49:45.886602047Z',
-  subprojectTemplateLabel: '<strong>Pompe à chaleur air/air</strong>',
+  summaryDate: '2022-10-13T12:24:39.316059261Z',
   cost: {
-    min: 3139.99,
-    max: 3939.99,
+    min: 12103.78,
+    max: 19103.78,
     currency: 'EURO',
   },
   components: [
     {
-      componentId: 'LAND',
-      title: '<strong>Pompe à chaleur installée</strong> (hors aides)',
+      componentId: 'FURNISHING',
+      title: 'Pompe à chaleur installée (hors aides)',
+      details: 'Travaux réalisés par nos artisans partenaires Leroy Merlin',
       cost: {
-        min: 3139.99,
-        max: 3939.99,
+        min: 13000,
+        max: 20000,
         currency: 'EURO',
       },
-      details: 'Test du message vert',
       lines: [
         {
-          text: '<strong>Pompe à chaleur installée</strong> (hors aides)',
-          details: 'Terrain constructible, délimité et viabilisé. La nature du sous-sol est garantie.',
+          text: 'Pompe à chaleur',
           cost: {
-            min: 6499,
-            max: 7299,
+            min: 10000,
+            max: 15000,
             currency: 'EURO',
           },
         },
         {
-          text: '<strong>Pompe à chaleur installée</strong> (hors aides)',
+          text: 'Installation',
           cost: {
-            min: 6499,
-            max: 7299,
+            min: 3000,
+            max: 5000,
+            currency: 'EURO',
+          },
+        },
+      ],
+    },
+    {
+      componentId: 'AID',
+      title: 'Aides estimées (MaPrimeRénov, Prime Energie)',
+      details: 'Les aides varient selon certains critères.',
+      cost: {
+        min: -896.22,
+        max: -950.22,
+        currency: 'EURO',
+      },
+      lines: [
+        {
+          text: 'Estimation Prime énergie Leroy Merlin',
+          cost: {
+            min: -96.22,
+            max: -650.22,
             currency: 'EURO',
           },
         },
         {
-          text: '<strong>Aide estimées</strong> (MaPrimeRénov, Prime Energie)',
-          type: 'REDUCTION',
+          text: 'Estimation MaPrimeRénov',
           cost: {
-            reduce: -3600,
+            min: -800,
+            max: -900,
             currency: 'EURO',
           },
         },
@@ -73,21 +91,15 @@ export const summary = {
     },
   ],
   subprojectAttributes: {
-    finish: 'PARTIALLY_BY_MYSELF',
-    houseType: 'CONTEMPORARY',
-    inseeCode: '59350',
-    land: 'NOT_YET',
-    landSurfaceInSquareMeters: 123,
-    landType: 'IN_A_LOT',
-    livingAreaInSquareMeters: 465,
+    age: 'NEW',
+    housingType: 'HOUSE',
+    income: 'MIDDLE',
+    inhabitantsCount: 1,
+    location: '20137',
+    situation: 'OWNER',
+    surfaceAreaInSquareMeters: 40,
   },
   suggestedTypologies: [
-    {
-      domesticSpaceLabel: 'Cuisine',
-      domesticSpaceHref: '/domestic-spaces/59405',
-      projectKindHref: '/project-kinds/34048',
-      projectTypeHref: '/project-types/29239',
-    },
     {
       domesticSpaceLabel: 'Tout le logement',
       domesticSpaceHref: '/domestic-spaces/59461',
@@ -95,11 +107,6 @@ export const summary = {
       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

package/src/components/restitution/PbRestitutionList.vue

@@ -74,53 +74,36 @@
           <div class="pb-restitution-list__modal__details__title" v-html="summary.subprojectTemplateLabel"></div>
 
           <div class="pb-restitution-list__modal__details__row">
-            <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 v-for="component in summary.components" :key="component.details">
+              <div class="pb-restitution-list__modal__details__row__title" justify-content="space-between">
+                <div v-html="component.title"></div>
+                <div v-if="component.cost.min != component.cost.max">
+                  <strong>{{ component.cost.min }}€ et {{ component.cost.max }}€</strong>
+                </div>
+                <div v-else>
+                  <strong>{{ component.cost.min }}€</strong>
+                </div>
               </div>
-            </div>
 
-            <div v-for="line in summary.components" :key="line.details">
-              <div class="pb-restitution-list__modal__details__row__label" v-if="line.details">
-                {{ line.details }}
+              <div class="pb-restitution-list__modal__details__row__label" v-if="component.details">
+                {{ component.details }}
               </div>
-            </div>
-
-            <div
-              v-for="line in summary.components[0].lines"
-              :key="line.text"
-              class="pb-restitution-list__modal__details__row__list"
-              :class="{ ' pb-restitution-list__modal__details__row': line.cost.reduce }"
-            >
-              <ul>
-                <div>
-                  <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>
 
-            <div v-for="line in summary.components[0].lines" :key="line.text">
               <div
-                v-if="line.cost.reduce"
-                class="pb-restitution-list__modal__details__row__title"
-                :class="{ ' help border-bottom': line.cost.reduce }"
-                justify-content="space-between"
+                v-for="line in component.lines"
+                :key="line.text"
+                class="pb-restitution-list__modal__details__row__list"
+                :class="{ ' pb-restitution-list__modal__details__row': line.cost.reduce }"
               >
-                <span :class="{ hidden: !line.cost.reduce }">
-                  <div v-if="line.cost.reduce">
-                    <div v-html="line.text" class="green"></div>
+                <ul>
+                  <div>
+                    <li>
+                      <div v-html="line.text"></div>
+                      <div v-if="line.cost.min != line.cost.max">{{ line.cost.min }}€ et {{ line.cost.max }}€</div>
+                      <div v-else>{{ line.cost.min }}€</div>
+                    </li>
                   </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>
+                </ul>
               </div>
             </div>
           </div>

package/src/components/restitution/PbRestitutionListBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <m-flex align-items="center" direction="column">
+  <m-flex align-items="center" direction="column" v-if="payload.componentId != 'AID'">
     <m-flex :class="`pb-restitution-list-block`" direction="column" ref="pbRestitutionListBlock">
       <div class="pb-restitution-list-block__title" v-html="summary.subprojectTemplateLabel"></div>
 
@@ -7,7 +7,7 @@
         <div class="pb-restitution-list-line">
           <div class="pb-restitution-list-line__title" v-html="summary.components[0].title"></div>
           <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__min">{{ summary.components[0].cost.min }}€&nbsp;et&nbsp;</div>
             <div class="pb-restitution-list-line__price__max">{{ summary.components[0].cost.max }}€</div>
           </div>
         </div>
@@ -19,6 +19,17 @@
           :line="line"
         ></pb-restitution-list-line>
 
+        <div v-for="aidComponent in summary.components" :key="aidComponent.componentId">
+          <div v-if="aidComponent.componentId === 'AID'">
+            <pb-restitution-list-line
+              :key="aidComponent.title"
+              :component="aidComponent"
+              :line="aidComponent"
+              :renovAid="true"
+            ></pb-restitution-list-line>
+          </div>
+        </div>
+
         <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>

package/src/components/restitution/PbRestitutionListLine.vue

@@ -1,13 +1,16 @@
 <template>
-  <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>
-    <div class="pb-restitution-list-line__price" v-if="line.type != 'REDUCTION'">
+  <div class="pb-restitution-list-line" :class="{ green: renovAid }" v-if="renovAid">
+    <div class="pb-restitution-list-line__title" v-html="line.text || line.title"></div>
+    <div class="pb-restitution-list-line__price" v-if="!renovAid">
       <div class="pb-restitution-list-line__price__min">
-        {{ formatPriceRange(line.cost.min, line.cost.max).min }}€&nbsp;-&nbsp;
+        {{ formatPriceRange(line.cost.min, line.cost.max).min }}€&nbsp;et&nbsp;
       </div>
       <div class="pb-restitution-list-line__price__max">{{ formatPriceRange(line.cost.min, line.cost.max).max }}€</div>
     </div>
-    <div class="pb-restitution-list-line__price">{{ line.cost.reduce }}€</div>
+    <div class="pb-restitution-list-line__price">
+      <span v-if="line.cost.min === line.cost.max">{{ line.cost.min }}€</span>
+      <span v-else>{{ line.cost.min }} et {{ line.cost.max }}€</span>
+    </div>
   </div>
 </template>
 
@@ -24,6 +27,10 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
+    renovAid: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   methods: {
     handleLinkClick() {

package/src/components/trezor/PbTrezor.stories.mdx

@@ -0,0 +1,47 @@
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { ArgsTable, Canvas, Meta, Source, Story } from '@storybook/addon-docs';
+import cloneDeep from 'lodash.clonedeep';
+import PbTrezor from './PbTrezor';
+import DEFAULT_PAYLOAD from './default-payload.json';
+
+<Meta
+  title="Project Booster/Components/Trezor/PbTrezor 🦠"
+  component={PbTrezor}
+  decorators={[nestedAppDecorator({}, [])]}
+  parameters={{ layout: 'fullscreen' }}
+/>
+
+# 🦠 `PbTrezor` - Components
+
+[![alt text](https://storage.googleapis.com/project-booster-media/project-booster-vue/project-booster-sources.svg 'Project booster component source code')](https://github.com/adeo/project-booster-vue/tree/master/src/components/question)
+
+---
+
+The `PbTrezor` Vue component allows select family amount persons. It
+is customizable through the payload property.
+
+It has a default provided payload, used in the Sandbox below.
+
+The input field is automatically focused.
+
+# `PbTrezor`
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PbTrezor },
+  setup() {
+    return { args };
+  },
+  template: `<pb-trezor
+    :payload="args.payload"
+    :show-back-button="args.showBackButton"
+    :completed-event-name="args.completedEventName"
+    @step-completed="args.onStepCompleted"
+  />`,
+});
+
+<Canvas>
+  <Story name="101 Sandbox" args={{ payload: DEFAULT_PAYLOAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/trezor/PbTrezor.vue

@@ -0,0 +1,356 @@
+<template>
+  <m-flex class="pb-trezor" direction="column">
+    <div class="pb-trezor__title" v-if="payload?.viewModel?.label">
+      {{ payload.viewModel.label }}
+    </div>
+
+    <form action="" class="pb-trezor__form">
+      <m-flex class="pb-trezor__form__row">
+        <m-text-input
+          v-model="formData.values.lastname"
+          :error="formData.errors.lastname"
+          @focus="validate('lastname')"
+          @keypress="validate('lastname')"
+          type="text"
+          label="Nom"
+          :required="true"
+          class="pb-trezor__input"
+        ></m-text-input>
+      </m-flex>
+
+      <m-flex class="pb-trezor__form__row">
+        <m-text-input
+          v-model="formData.values.firstname"
+          :error="formData.errors.firstname"
+          @focus="validate('firstname')"
+          @keypress="validate('firstname')"
+          type="text"
+          label="Prénom"
+          :required="true"
+          class="pb-trezor__input"
+        ></m-text-input>
+      </m-flex>
+
+      <m-flex class="pb-trezor__form__row">
+        <m-text-input
+          v-model="formData.values.zipcode"
+          :error="formData.errors.zipcode"
+          @focus="validate('zipcode')"
+          @keypress="validate('zipcode')"
+          type="text"
+          label="Code postal"
+          :required="true"
+          class="pb-trezor__input"
+        ></m-text-input>
+      </m-flex>
+
+      <m-flex class="pb-trezor__form__row">
+        <m-text-input
+          v-model="formData.values.email"
+          :error="formData.errors.email"
+          @focus="validate('email')"
+          @keypress="validate('email')"
+          type="email"
+          label="E-mail"
+          :required="true"
+          class="pb-trezor__input"
+        ></m-text-input>
+      </m-flex>
+
+      <m-flex class="pb-trezor__form__row">
+        <m-text-input
+          v-model="formData.values.phone"
+          :error="formData.errors.phone"
+          @focus="validate('phone')"
+          @keypress="validate('phone')"
+          type="phone"
+          label="Numéro de téléphone"
+          :required="true"
+          class="pb-trezor__input"
+        ></m-text-input>
+      </m-flex>
+
+      <m-flex class="pb-trezor__form__row space" direction="column">
+        <label for="" class="pb-trezor__form__label"><span>- obligatoire</span></label>
+        <m-checkbox
+          class="pb-trezor__form__checkbox"
+          :required="true"
+          label="J'ai lu est accepte sans réserve les conditions générales d'utilisation"
+          v-model="formData.values.optin"
+        ></m-checkbox>
+      </m-flex>
+
+      <m-flex class="pb-trezor__form__row space" direction="column">
+        <m-checkbox
+          class="pb-trezor__form__checkbox"
+          :required="false"
+          v-model="formData.values.optinPartners"
+          label="J'autorise Leroy Merlin à transmettre les données collectées ici à l'un de nos partenaires susceptibles de réaliser le chantier (en fonction des critères géographiques)"
+        ></m-checkbox>
+      </m-flex>
+
+      <div class="pb-trezor__container">
+        <m-flex class="pb-trezor__container--button" direction="row">
+          <m-button
+            :theme="action.bordered ? 'bordered' : 'solid'"
+            class="pb-trezor__container--button__ok mc-button--full"
+            :type="action.type"
+            :label="action.label"
+            icon-position="right"
+            :href="action.href"
+            v-for="action in payload.callToActions"
+            :key="action.label"
+            @click.prevent="callAction(action)"
+          />
+        </m-flex>
+      </div>
+    </form>
+  </m-flex>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import { useStore } from 'vuex';
+import MFlex from './../mozaic/flex/MFlex.vue';
+import MButton from '../mozaic/buttons/MButton.vue';
+import MCheckbox from '../mozaic/checkbox/MCheckbox.vue';
+import MTextInput from '../mozaic/text-input/MTextInput.vue';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { object, string, boolean } from 'yup';
+
+export default defineComponent({
+  name: 'PbTrezor',
+  components: {
+    MFlex,
+    MButton,
+    MTextInput,
+    MCheckbox,
+  },
+  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,
+      default: () => ({}),
+    },
+    /**
+     * The options provided at runtime to customize component behaviour
+     */
+    runtimeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    /**
+     * Indicates whether the back button should be displayed
+     */
+    showBackButton: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Name for the event to send when the step is questio is answered
+     */
+    completedEventName: {
+      type: String,
+      default: 'step-completed',
+    },
+    /**
+     * The previous answers to inject
+     */
+    answers: {
+      type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
+    },
+  },
+  setup(props, { emit }) {
+    const store = useStore();
+    let formData = ref({
+      values: {
+        lastname: '',
+        firstname: '',
+        zipcode: '',
+        email: '',
+        phone: '',
+        optin: false,
+        optinPartners: false,
+      },
+      errors: {
+        lastname: '',
+        firstname: '',
+        zipcode: '',
+        email: '',
+        phone: '',
+      },
+    });
+
+    const validationSchema = object({
+      lastname: string().required(),
+      firstname: string().required(),
+      zipcode: string().required(),
+      email: string().email().required(),
+      phone: string().required(),
+      optin: boolean(),
+      optinPartners: boolean(),
+    });
+
+    const validate = async (field: string) => {
+      await validationSchema
+        .validateAt(field, formData.value.values)
+        .then(() => {
+          formData.value.errors[field] = '';
+        })
+        .catch((err) => {
+          formData.value.errors[err.path] = err.message;
+        });
+    };
+
+    const validateAllFields = async (action: any) => {
+      await validationSchema.validate(formData.value.values).then(async () => {
+        const sending = await store.dispatch(
+          'trezor/sendFormData',
+          {
+            customer: {
+              lastname: formData.value.values.lastname,
+              firstname: formData.value.values.firstname,
+              zipcode: formData.value.values.zipcode,
+              email: formData.value.values.email,
+              phone: formData.value.values.phone,
+            },
+            optin: formData.value.values.optin,
+            optinPartners: formData.value.values.optinPartners,
+          },
+          props.payload.viewModel.typeLead,
+        );
+
+        if (sending) {
+          emit('step-completed', {
+            answers: [],
+            nextStep: action,
+          });
+        }
+      });
+    };
+
+    const callAction = async (item: any) => {
+      if (item.action.type === 'submit') {
+        await validateAllFields(item);
+      }
+    };
+
+    return {
+      formData,
+      callAction,
+      validate,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+@import 'settings-tools/all-settings';
+@import 'typography/_t.bodys';
+
+$small-responsive-breakpoint: 's-large';
+$responsive-breakpoint: 'm';
+
+.pb-trezor {
+  margin: 0 auto;
+  max-width: 1024px;
+  &__title {
+    @include set-font-face('semi-bold');
+    @include set-font-scale('08', 'm');
+    max-width: calc(100% - 60px);
+    padding: 30px;
+    position: relative;
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin: auto;
+      padding: $mu250 0 $mu250 0;
+      text-align: center;
+    }
+  }
+
+  &__input {
+    width: 100%;
+  }
+
+  &__form {
+    padding: 30px;
+    width: calc(100% - 60px);
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin: auto;
+      padding: 0;
+      width: 400px;
+    }
+
+    &__checkbox {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__radio {
+      margin-right: 15px;
+    }
+
+    &__label {
+      @include set-font-face('regular');
+      @include set-font-scale('04', 's');
+      margin-bottom: $mu050;
+
+      span {
+        @include set-font-face('regular');
+        @include set-font-scale('03', 's');
+        color: $color-grey-500;
+      }
+    }
+
+    &__row {
+      margin-bottom: $mu050;
+
+      &.space {
+        margin-bottom: $mu150;
+      }
+    }
+
+    &__col {
+      width: 100%;
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: 50%;
+      }
+
+      &:first-child {
+        padding-right: 15px;
+      }
+
+      &:last-child {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  &__container--button {
+    margin: $mu250 0;
+
+    button {
+      &:first-child {
+        margin-right: 15px;
+      }
+
+      &:last-child {
+        margin-left: 15px;
+      }
+    }
+
+    &__ok {
+      margin-bottom: $mu100;
+    }
+  }
+}
+</style>

package/src/components/trezor/default-payload.json

@@ -0,0 +1,17 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Renseignez notre formulaire pour être recontacté",
+    "typeLead": "HEAT_PUMP"
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Envoyer",
+      "action": {
+        "type": "submit"
+      },
+      "bordered": false
+    }
+  ]
+}

package/src/services/api/trezorApi.ts

@@ -0,0 +1,30 @@
+import axios from 'axios';
+import { escape } from '../../services/htmlEscape';
+
+export const clientApi = axios.create({
+  baseURL: '/project-booster/api',
+});
+
+if ((<any>window).config) {
+  clientApi.defaults.baseURL = (<any>window).config.VUE_APP_DEFAULT_BASE_URL;
+}
+
+export const updateTrezorApiClient = (config: { apiKey: string; baseUrl: string; apiHeader: string }) => {
+  if (config.apiKey) {
+    const header = config.apiHeader ?? 'X-Gateway-ApiKey';
+    clientApi.defaults.headers.common[header] = config.apiKey;
+  }
+  if (config.baseUrl) {
+    clientApi.defaults.baseURL = config.baseUrl;
+  }
+};
+
+export const sendTrezorForm = async (typeLead: string, payload: object) => {
+  const response = await clientApi.post(`leads/${typeLead}`, payload);
+
+  return JSON.parse(
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
+      return `: "${escape($1)}"`;
+    }),
+  );
+};

package/src/services/decorate.ts

@@ -0,0 +1,65 @@
+import objectPath from 'object-path';
+
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+
+/**
+ * This function will doEval and decorate dynamically variables from JSON templates.
+ *
+ * For instance:
+ * "${getAnswerValue('DEVELOPER', 'code') == 'YES' ? 'I'm developer' : 'I'm not developer'}".
+ *
+ * @param answers A map of string and an array of ScenarioStepAnswer.
+ * @param valueToDecorate Targeted value to decorate.
+ * @param defaultValue Empty string by default.
+ * @returns Decorated value.
+ */
+export function decorate(
+  answers: Map<string, ScenarioStepAnswer[]>,
+  runtimeOptions = {},
+  valueToDecorate: string,
+  defaultValue = '',
+): string {
+  let decoratedValue = valueToDecorate;
+  if (valueToDecorate) {
+    const stringToEval = `\`${valueToDecorate}\``;
+    try {
+      decoratedValue = doEval(answers, stringToEval, defaultValue, runtimeOptions);
+    } catch (error) {
+      decoratedValue = valueToDecorate || defaultValue;
+    }
+  }
+  return decoratedValue;
+}
+
+export function doEval(
+  this: any,
+  answers: Map<string, ScenarioStepAnswer[]>,
+  valueToEval: string,
+  defaultValue: string,
+  runtimeOptions: unknown,
+): any {
+  return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
+    this,
+    getAnswerValue(answers),
+    Object.fromEntries(answers),
+    defaultValue,
+    runtimeOptions,
+  );
+}
+
+/**
+ * Function used by the scenario conditions.
+ *
+ * @param answers A map of string and an array of ScenarioStepAnswer.
+ * @returns Answers values.
+ */
+function getAnswerValue(answers: Map<string, ScenarioStepAnswer[]>) {
+  return (answerCode: string, path: string) => {
+    let answerValue: ScenarioStepAnswer | undefined = undefined;
+    if (answers?.get(answerCode)) {
+      const answerValues = answers.get(answerCode) ?? [];
+      answerValue = objectPath.get(answerValues[0], path);
+    }
+    return answerValue;
+  };
+}

package/src/stores/modules/trezorStore.ts

@@ -0,0 +1,39 @@
+import { ActionContext } from 'vuex';
+import { State } from '@/stores/state';
+import { sendTrezorForm } from '@/services/api/trezorApi';
+
+export interface TrezorState {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  typeLead: string;
+  formData: object;
+}
+
+type TrezorContext = ActionContext<TrezorState, State>;
+
+export default {
+  namespaced: true,
+  state: {
+    typeLead: '',
+    formData: '',
+  },
+  getters: {},
+  mutations: {
+    setTypeLead: (state: TrezorState, typeLead: string) => {
+      state.typeLead = typeLead;
+    },
+    setFormData: (state: TrezorState, formData: object) => {
+      state.formData = formData;
+    },
+  },
+  actions: {
+    sendFormData: async (
+      { commit, state }: TrezorContext,
+      { payload, typeLead }: { payload: object; typeLead: string },
+    ) => {
+      if (!typeLead) {
+        const sendData = await sendTrezorForm(typeLead, payload);
+        commit('setFormData', sendData);
+      }
+    },
+  },
+};

package/src/stores/store.ts

@@ -9,6 +9,7 @@ import toolsStore from './modules/toolsStore';
 import documentsStore from './modules/documentsStore';
 import consentStore from './modules/consentStore';
 import productsStore from './modules/productsStore';
+import trezorStore from './modules/trezorStore';
 import cloneDeep from 'lodash.clonedeep';
 import { State } from '@/stores/state';
 import { ActionContext } from 'vuex';
@@ -28,6 +29,7 @@ export default {
     documentsPictures: cloneDeep(documentsStore),
     consent: consentStore,
     products: productsStore,
+    trezor: trezorStore,
   },
   mutations: {
     eventBusSendEvent(state: State, { code, payload }: { code: string; payload: any }) {