project-booster-vue 9.41.1 → 9.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.41.1",
+  "version": "9.42.1",
   "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/products/default-payload.json

@@ -3,11 +3,8 @@
     "backLabel": "Question précédente",
     "label": "Estimer votre projet de rénovation énergétique en 2mn",
     "defaultProduct": {
-      "price": {
-        "initialUnitAmount": 200
-      },
       "designation": "Pompe à chaleur air/air",
-      "photo": "https://storage.googleapis.com/project-booster-media/energyrenovation/heat-pump-air-water/default_heat_pump.jpg"
+      "photo": "https://storage.googleapis.com/project-booster-media/energyrenovation/default_heat_pump.jpg"
     }
   },
   "callToActions": [

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
@@ -131,7 +138,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
 <Canvas>
   <Story
     name="101 Sandbox"
-    args={{ payload: DEFAULT_PAYLOAD, runtimeOptions: { isLoggedIn: true } }}
+    args={{ payload: DEFAULT_PAYLOAD, runtimeOptions: { isLoggedIn: true, projectMode: true } }}
     parameters={{
       msw: [
         rest.get('/api/inhabitant-projects', getProjectsResolver),

package/src/components/restitution/PbRestitutionList.vue

@@ -50,6 +50,13 @@
           :label="button.label"
           @click="callAction(button.action)"
           :theme="button.bordered ? 'bordered' : 'solid'"
+          v-if="!button.conditions"
+        />
+        <m-button
+          :label="button.label"
+          @click="callAction(button.action)"
+          :theme="button.bordered ? 'bordered' : 'solid'"
+          v-if="checkConditional(button.conditions) && button.conditions"
         />
       </div>
       <div class="pb-restitution-list__footer__save">
@@ -74,53 +81,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>
-                  </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>
+                <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>
-                </div>
+                </ul>
               </div>
             </div>
           </div>
@@ -159,6 +149,7 @@ import { RestitutionPayload, RestitutionPayloadAction } from '@/types/pb/Restitu
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import PbRestitutionListBlock from './PbRestitutionListBlock.vue';
 import { Project } from '../../types/pb/Project';
+import { areConditionsValid } from '../../services/scenarioConditionals';
 
 export default defineComponent({
   components: {
@@ -228,11 +219,21 @@ export default defineComponent({
   created() {
     if (this.payload?.callToActions) {
       if (this.payload?.callToActions) {
+        const saveAction = Object.values(this.payload.callToActions).find((cta) => {
+          return (
+            areConditionsValid(cta.conditions!, this.answers, this.runtimeOptions) &&
+            cta.action?.type === 'MODAL' &&
+            cta.action?.component === 'PbProjectItemSave'
+          );
+        });
         this.showSaveProjectItem = this.showSaveEstimate;
       }
     }
   },
   methods: {
+    checkConditional(cta: any) {
+      return areConditionsValid(cta, this.answers, this.runtimeOptions);
+    },
     handleShowDialog(content: any) {
       this.dialogContent = content;
       this.showDialog = !this.showDialog;
@@ -268,6 +269,11 @@ export default defineComponent({
             this.showSaveProjectItem = true;
           }
 
+          this.$emit('click-save-item', {
+            answers: [],
+            action: action,
+          });
+        } else if (action.code === 'SAVED_ITEM') {
           this.$emit('click-save-item', {
             answers: [],
             action: action,

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/restitution/restitution-list-default.json

@@ -6,9 +6,22 @@
     {
       "type": "button",
       "label": "Être rappelé par un expert",
-      "href": "",
+      "action": {
+        "type": "STEP",
+        "code": "STEP_CODE"
+      },
       "bordered": false
     },
+    {
+      "conditions": ["runtimeOptions.projectMode === true"],
+      "type": "button",
+      "label": "J'enregistre mon estimation",
+      "bordered": true,
+      "action": {
+        "type": "MODAL",
+        "code": "SUMMARY"
+      }
+    },
     {
       "conditions": ["!runtimeOptions.projectMode && !runtimeOptions.estimateCreated"],
       "type": "button",

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/productApi.ts

@@ -20,11 +20,14 @@ export const updateProductApiClient = (config: { apiKey: string; baseUrl: string
 };
 
 export const getProductById = async (productId: string, storeId: string) => {
-  const response = await clientApi.get(`/product/${productId}${storeId ? '?storeId=' + storeId : ''}`);
-
-  return JSON.parse(
-    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
-      return `: "${escape($1)}"`;
-    }),
-  );
+  try {
+    const response = await clientApi.get(`/products/${productId}${storeId ? '?storeId=' + storeId : ''}`);
+    return JSON.parse(
+      JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
+        return `: "${escape($1)}"`;
+      }),
+    );
+  } catch (e) {
+    return 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/stores/modules/productsStore.ts

@@ -37,12 +37,12 @@ export default {
       commit('setRefProduct', ref);
     },
     async loadProduct({ commit, state }: ProductContext, { payload, sessions }: { payload: object; sessions: any }) {
-      if (!state.refProduct) {
-        commit('setCurrentProduct', payload);
-      } else {
-        const product = await getProductById(state.refProduct, sessions.storeId);
+      const product = await getProductById(state.refProduct, (sessions && sessions.storeId) || null);
 
-        commit('setCurrentProduct', product);
+      if (product) {
+        commit('setCurrentProduct', { ...payload, ...product });
+      } else {
+        commit('setCurrentProduct', payload);
       }
     },
   },

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 }) {