project-booster-vue 10.0.0 → 10.1.0

package/package.json

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

package/src/components/rework/products/MPbProducts.vue

@@ -100,11 +100,13 @@ const props = defineProps({
  * onMounted load product and load this
  */
 onMounted(() => {
-  store.dispatch('products/loadProduct', {
-    payload: props.payload.viewModel.defaultProduct,
-    storeId: metadata && metadata.storeId ? metadata.storeId : '',
-  });
-  product.value = store.getters['products/getCurrentProduct'];
+  if (store.hasModule('products/loadProduct')) {
+    store.dispatch('products/loadProduct', {
+      payload: props.payload.viewModel.defaultProduct,
+      storeId: metadata && metadata.storeId ? metadata.storeId : '',
+    });
+    product.value = store.getters['products/getCurrentProduct'];
+  }
 });
 
 /**

package/src/components/rework/question/MPbQuestion.vue

@@ -123,6 +123,26 @@
             />
           </m-flex>
         </m-flexy>
+
+        <!-- Help link/modal -->
+        <m-flex class="pb-question__help" v-if="payload.helpArea" direction="column">
+          <div v-for="helpItem in payload.helpArea" :key="helpItem.type">
+            <div v-if="helpItem.type === 'text'">
+              <p class="pb-question__help__text">{{ helpItem.label }}</p>
+            </div>
+            <div v-if="helpItem.type === 'link'">
+              <m-link
+                class="pb-question__help__link"
+                :label="helpItem.label"
+                width="full"
+                size="l"
+                theme="primary"
+                @click="handleHelpClick(helpItem.action)"
+              />
+            </div>
+          </div>
+        </m-flex>
+
         <m-notification class="pb-question__notifications" :type="notification.type" v-if="notification">
           <template #default>
             <strong style="font-size: 16px; line-height: 20px">{{ notification.title }}</strong>
@@ -180,24 +200,7 @@
         ></m-link>
       </div>
     </div>
-    <div class="pb-question__padding-bottom" v-if="!payload.helpArea" />
-    <m-flex class="pb-question__help" v-if="payload.helpArea" direction="column">
-      <div v-for="helpItem in payload.helpArea" :key="helpItem.type">
-        <div v-if="helpItem.type === 'text'">
-          <p class="pb-question__help__text">{{ helpItem.label }}</p>
-        </div>
-        <div v-if="helpItem.type === 'link'">
-          <m-link
-            class="pb-question__help__link"
-            :label="helpItem.label"
-            width="full"
-            size="l"
-            theme="primary"
-            @click="handleHelpClick(helpItem.action)"
-          />
-        </div>
-      </div>
-    </m-flex>
+
     <pb-sticky-footer
       ref="pbStickyFooter"
       class="pb-question__sticky-footer"
@@ -283,6 +286,7 @@
       :modalTitle="helpDialog?.viewModelDialog.headerTitle"
       :open="displayDialogHelp"
       @update:open="displayDialogHelp = false"
+      class="mc-modal--overflow"
       v-if="helpDialog"
     >
       <template #default>
@@ -1063,7 +1067,7 @@ $answers-apparition-duration: '0.5s';
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin: 0 auto $mu100;
+    margin: 0 auto;
     max-width: 1024px;
     width: 100%;
 
@@ -1386,11 +1390,11 @@ $answers-apparition-duration: '0.5s';
   }
 
   &__help {
-    margin-bottom: $mu250;
+    margin-bottom: $mu100;
 
     @include set-from-screen($responsive-breakpoint) {
       max-width: 554px;
-      margin: 0 auto;
+      padding: $mu100;
       text-align: left;
     }
 
@@ -1411,6 +1415,11 @@ $answers-apparition-duration: '0.5s';
     width: calc(100% - 30px);
     margin: auto;
     margin-top: $mu200;
+
+    a,
+    button {
+      width: 100%;
+    }
   }
 
   &__modal-link {
@@ -1456,6 +1465,7 @@ $responsive-breakpoint: 'm';
         background-repeat: no-repeat;
         background-size: 100% auto;
         padding: 120px 0;
+        margin-bottom: 50px;
       }
     }
 

package/src/components/scenario/PbScenario-Estimator-Solar-Panel.stories.mdx

@@ -0,0 +1,245 @@
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import PbScenario from './PbScenario';
+import estimatesStore from '../../stores/modules/estimatesStore';
+import DEFAULT_PAYLOAD from './scenarii/solar-panel.json';
+import { TemplateSandbox } from './PbScenario.stories.mdx';
+import simpleScenarioSchema from './Simple-scenario.svg';
+
+<Meta
+  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Solar Panel"
+  component={PbScenario}
+  argTypes={{
+    scenarios: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onScenarioCompleted: {
+      action: 'Scenario completed',
+      table: { disable: true },
+    },
+    onScenarioEvent: {
+      action: 'Scenario event occured',
+      table: { disable: true },
+    },
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          estimates: estimatesStore,
+        },
+        actions: {
+          sendEventToBus({}, payload) {
+            console.log('Event sent to bus', payload);
+          },
+        },
+      },
+      [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }],
+    ),
+  ]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+<Anchor storyId="project-booster-scenario-pbscenario-features-conditional--101-simple-scenario" />
+
+# Features - PbScenario
+
+## Scenarios and steps management
+
+The scenario component allows to manage **scenarios** and **steps** :
+
+- a **scenario** is a sequence of steps,
+- a **step** is one interaction from the user perspective.
+
+## Simple scenario
+
+The scenario component will use the bounded scenarios object containing all the scenarios and steps:
+
+<details>
+  <summary class="css-1p8ieni">
+    Show/Hide <strong>scenario code</strong>:
+  </summary>
+  <Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD, null, '  ')} />
+</details>
+
+A scenario object is composed of a map of steps. A step can be a standard step or a nested scenario.
+
+This simple scenario contains:
+
+- the `__START__` scenario which is used by the component to know where to find the main scenario, its presence is mandatory,
+- the `MAIN_SCENARIO` (name it as you want) definition, pointing to its first step `MAIN_SCENARIO--STEP_1`,
+- the `MAIN_SCENARIO--STEP_1` (name it as you want) step with the component `PbCard` used for this step and the next
+  step `MAIN_SCENARIO--STEP_2` (name it as you want) to reach when completed,
+- the `MAIN_SCENARIO--STEP_2` (name it as you want) step with the component `PbCard` used for this step and the next
+  step `__END__` to reach when completed,
+- the `__END__` step with the component `PbCard` used for this step which indicates to the
+  component that the main scenario is completed, its presence is mandatory to address properly the nested scenario feature.
+
+  NB: **`__START__`** and **`__END__`** are mandatory step codes to allow the component to work properly, **DO NOT RENAME THEM**. The `__END__`
+  can display a component.
+
+<img src={simpleScenarioSchema} />
+
+<Canvas>
+  <Story
+    name="Solar Panel"
+    inline={false}
+    height="758px"
+    args={{ scenarios: DEFAULT_PAYLOAD, minHeight: 'auto' }}
+    parameters={{ storyshots: { disable: true } }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Focus on scenario definition
+
+Here is the scenario definition:
+
+```json
+{
+  "SCENARIO_CODE": {
+    "code": "SCENARIO_CODE",
+    "type": "SCENARIO",
+    "stepCode": "FIRST_STEP_CODE",
+    "meta": {
+      "your-stuff": "here"
+    }
+  }
+}
+```
+
+where:
+
+|                 |                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------------------- |
+| `SCENARIO_CODE` | the scenario code uniquely identifying it in the scenario map,                                     |
+| `code`          | the same as above, the data is duplicated inside the object to simplify steps/scenarios management |
+| `type`          | the type of step, (could be `STEP`, `SCENARIO`)                                                    |
+| `stepCode`      | the first step of the scenario                                                                     |
+| `meta`          | data needed by the scenario host                                                                   |
+
+## Focus on step definition
+
+### Mandatory properties
+
+Here is the smallest step definition (it can be extended with other properties):
+
+```json
+{
+  "STEP_CODE": {
+    "code": "STEP_CODE",
+    "type": "STEP",
+    "component": "PbComponentForStepScreen",
+    "payload": {}
+  }
+}
+```
+
+|             |                                                                                                                                |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `STEP_CODE` | the step code uniquely identifying it in the scenario map                                                                      |
+| `type`      | the type of step, (could be `STEP` or `SCENARIO`)                                                                              |
+| `component` | the component that will be used to materialize the step on the screen. See _Step component_ section below for more information |
+| `payload`   | the payload containing specific business data for the step                                                                     |
+
+### Step component
+
+The step is associated with a component. This is the component which will be displayed for the step.
+A `payload` property is also available to provide:
+
+- the **business data** needed to address the business use case (ex: the answers of a question),
+- the `viewModel` property which contains the component **view model** (ie. the data used to customise the component: label, images, ...).
+
+The `payload` property is not mandatory as the component does not always need customisation data.
+
+Here is a step definition with the component definition:
+
+```json
+{
+  "STEP_CODE": {
+    "code": "STEP_CODE",
+    "type": "STEP",
+    "component": "PbComponentForStepScreen",
+    "payload": {}
+  }
+}
+```
+
+#### Step components API
+
+The components API consists of :
+
+- the `payload` provided by the `PbScenario` component which contains business data and view model,
+- the `step-completed` event emitted by the component itself when he has finished its job.
+
+##### Payload bound property
+
+The `payload` property bound to the component will contain all the data needed by the component to do its job.
+
+This is not mandatory as the component may be self sufficient to execute its tasks.
+
+##### step-completed event
+
+The `step-completed` event is raised when the component has finished its job. It contains:
+
+- the `answers` property containing the result of the component job,
+- the `nextStep` property containing a step to override the default `nextStep` defined on the current step.
+
+## Going to next step
+
+After the user completes the task provided by the component, the component will emit the `step-completed` event.
+
+The `step-completed` event payload will contain the `answers` resulting from the user interactions and an optional
+`nextStep`:
+
+- If a `nextStep` is provided by the component, the scenario will use this as a next step.
+- If no `nextStep` is provided by the component, the scenario component will look for the `nextStep` property of
+  the current step,
+- If no `nextStep` is provided/found, the current scenario will be considered as finished and the scenario component
+  will try to resume the parent scenario.
+
+The `nextStep` object only contains a `code` property valued with the code of the targeted next step.
+If the code is `null`, it will react as if the `nextStep` is not provided (the current scenario will be considered
+as finished and the scenario component will try to resume the parent scenario, if there is no scenario to resume,
+the scenario will go to the `__END__`).
+
+Next step example to navigate to a step or a nested scenario:
+
+```json
+{
+  "nextStep": {
+    "code": "NEXT_STEP_OR_SCENARIO_CODE"
+  }
+}
+```
+
+Next step example to navigate to finish the current (nested) scenario:
+
+```json
+{
+  "nextStep": {
+    "code": null
+  }
+}
+```
+
+Next step example to navigate to end the main scenario:
+
+```json
+{
+  "nextStep": {
+    "code": "__END__"
+  }
+}
+```

package/src/components/scenario/scenarii/appointment-qualification-bathroom.json

@@ -25,6 +25,9 @@
     "code": "LMFR_QUESTION_WORKS",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step1"
+    },
     "slots": {
       "stickyBottom": {
         "display": false
@@ -280,6 +283,9 @@
     "code": "LMFR_BATHROOM_BATHTUB_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step2"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -387,6 +393,9 @@
     "code": "LMFR_BATHROOM_SHOWER_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step3"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -476,6 +485,9 @@
     "code": "LMFR_BATHROOM_FURNITURE_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step4_1/4"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -579,6 +591,9 @@
     "code": "LMFR_BATHROOM_WC_TYPE",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step5"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -629,6 +644,9 @@
     "code": "LMFR_BATHROOM_STYLE",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step3"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -756,6 +774,21 @@
           }
         }
       },
+      "callToActions": [
+        {
+          "label": "Précédent",
+          "theme": "bordered-primary-02",
+          "nextStep": {
+            "code": "__BACK__"
+          }
+        },
+        {
+          "label": "Suivant",
+          "nextStep": {
+            "code": "LMFR_QUESTION_ADD_PICTURE"
+          }
+        }
+      ],
       "skippable": [
         {
           "isAnswer": true,
@@ -784,6 +817,9 @@
     "code": "LMFR_QUESTION_PLAN_INFO",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step4_3/4"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -861,6 +897,9 @@
     "code": "LMFR_QUESTION_ADD_PLAN_LATER",
     "type": "STEP",
     "component": "MPbAlert",
+    "analytics": {
+      "funnel_name": "SDB_step4_2/4"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -935,6 +974,9 @@
     "code": "LMFR_QUESTION_ADD_PICTURE",
     "type": "STEP",
     "component": "MPbUploadDocument",
+    "analytics": {
+      "funnel_name": "SDB_step5_1/2"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1021,6 +1063,9 @@
     "code": "LMFR_QUESTION_ADD_PLAN",
     "type": "STEP",
     "component": "MPbUploadDocument",
+    "analytics": {
+      "funnel_name": "SDB_step4_4/4"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1080,16 +1125,13 @@
         "actions": {
           "BACK": {
             "label": "Précédent",
-            "theme": "bordered-neutral",
-            "icon": "ArrowBack48",
+            "theme": "bordered-primary-02",
             "nextStep": {
               "code": "__BACK__"
             }
           },
           "VALIDATE": {
             "label": "Suivant",
-            "icon": "ArrowNext48",
-            "iconPosition": "right",
             "nextStep": {
               "code": "LMFR_QUESTION_ADD_PICTURE"
             }
@@ -1111,6 +1153,9 @@
     "code": "LMFR_QUESTION_WORK_START_DATE",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step6"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1186,6 +1231,9 @@
     "code": "LMFR_QUESTION_INSTALLATION",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step7"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1266,6 +1314,9 @@
     "code": "LMFR_QUESTION_BUDGET",
     "type": "STEP",
     "component": "MPbQuestion",
+    "analytics": {
+      "funnel_name": "SDB_step8"
+    },
     "slots": {
       "beforeContent": {
         "display": true,
@@ -1359,6 +1410,9 @@
   "LMFR_COMMENT": {
     "code": "LMFR_COMMENT",
     "type": "STEP",
+    "analytics": {
+      "funnel_name": "SDB_step9"
+    },
     "component": "MPbExitOptions",
     "slots": {
       "beforeContent": {
@@ -1400,6 +1454,9 @@
     "code": "BATHROOM_END",
     "type": "STEP",
     "component": "PbPedagogy",
+    "analytics": {
+      "funnel_name": "SDB_step5_2/2"
+    },
     "payload": {
       "viewModel": {
         "title": "Nous avons bien pris rendez-vous et enregistré vos informations",

package/src/components/scenario/scenarii/solar-panel.json

@@ -0,0 +1,644 @@
+{
+  "__START__": {
+    "code": "__START__",
+    "type": "SCENARIO",
+    "meta": {
+      "estimatorId": "c353f7f8-d405-4000-86a0-63e5053a769e",
+      "businessUnit": "001",
+      "projectName": "Estimer le coût de vos panneaux photovoltaïques",
+      "webAnalytics": {
+        "category": "Panneaux photovoltaïques",
+        "scenario": "Estimation-budget-panneaux-photovoltaiques"
+      }
+    },
+    "stepCode": "SOLAR_PANEL"
+  },
+  "SOLAR_PANEL": {
+    "code": "SOLAR_PANEL",
+    "type": "SCENARIO",
+    "stepCode": "LMFR_SOLAR_PANEL_DISPLAY_PRODUCT"
+  },
+
+  "LMFR_SOLAR_PANEL_DISPLAY_PRODUCT": {
+    "code": "LMFR_SOLAR_PANEL_DISPLAY_PRODUCT",
+    "type": "STEP",
+    "component": "MPbProducts",
+    "payload": {
+      "viewModel": {
+        "label": "Estimer vos aides pour votre projet",
+        "defaultProduct": {
+          "designation": "Installation de panneaux photovoltaïques"
+        }
+      },
+      "callToActions": [
+        {
+          "type": "button",
+          "label": "Commencer",
+          "action": {
+            "type": "STEP",
+            "code": "LMFR_SOLAR_PANEL_QUESTION_HOUSING_TYPE"
+          },
+          "bordered": false
+        }
+      ]
+    }
+  },
+  "LMFR_SOLAR_PANEL_QUESTION_HOUSING_TYPE": {
+    "code": "LMFR_SOLAR_PANEL_QUESTION_HOUSING_TYPE",
+    "type": "STEP",
+    "component": "MPbQuestion",
+    "payload": {
+      "viewModel": {
+        "label": "Dans quel type de logement habitez-vous ?",
+        "answersComponent": "MPbCard",
+        "progressBar": true,
+        "widthFromL": "1of3",
+        "forceOneCardPerLineOnMobile": true
+      },
+      "answers": {
+        "HOUSE": {
+          "code": "HOUSE",
+          "viewModel": {
+            "title": "Une maison",
+            "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/house.png"
+          }
+        },
+        "APARTMENT": {
+          "code": "APARTMENT",
+          "viewModel": {
+            "title": "Un appartement",
+            "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/apartement.jpg"
+          },
+          "notification": {
+            "type": "warning",
+            "title": "Nous attirons votre attention !",
+            "content": "Nous ne realisons pas de projets de panneau photovoltaïque dans les appartements dans la mesure où votre toit est partagé",
+            "buttonText": "Voir d'autres solutions pour faire des économies de chauffage",
+            "buttonHref": "https://www.leroymerlin.fr/economie-energie/"
+          }
+        }
+      }
+    },
+    "nextStep": {
+      "conditionals": [
+        {
+          "conditions": ["isAnswerMatching('LMFR_SOLAR_PANEL_QUESTION_HOUSING_TYPE', 'HOUSE')"],
+          "nextStep": {
+            "code": "LMFR_SOLAR_PANEL_QUESTION_LOCATION"
+          }
+        }
+      ]
+    },
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "sizeXlWidth": true,
+        "component": "MPbProgress",
+        "totalStep": 5,
+        "currentStep": 1
+      }
+    }
+  },
+  "LMFR_SOLAR_PANEL_QUESTION_LOCATION": {
+    "code": "LMFR_SOLAR_PANEL_QUESTION_LOCATION",
+    "type": "STEP",
+    "component": "MPbCitySearch",
+    "payload": {
+      "value": {
+        "city": {
+          "inseeCode": "${getAnswerValue('LMFR_SOLAR_PANEL_QUESTION_LOCATION', 'city.inseeCode')}",
+          "postalCode": "${getAnswerValue('LMFR_SOLAR_PANEL_QUESTION_LOCATION', 'city.postalCode')}",
+          "name": "${getAnswerValue('LMFR_SOLAR_PANEL_QUESTION_LOCATION', 'city.name')}",
+          "region": "${getAnswerValue('LMFR_SOLAR_PANEL_QUESTION_LOCATION', 'city.region')}"
+        }
+      },
+      "viewModel": {
+        "backLabel": "Question précédente",
+        "label": "Dans quelle ville aura lieu les travaux ?",
+        "placeholder": "Code postal, Ville",
+        "actionLabel": "Continuer"
+      }
+    },
+    "nextStep": {
+      "code": "LMFR_SOLAR_PANEL_QUESTION_LINKY"
+    },
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 5,
+        "currentStep": 2
+      }
+    }
+  },
+  "LMFR_SOLAR_PANEL_QUESTION_LINKY": {
+    "code": "LMFR_SOLAR_PANEL_QUESTION_LINKY",
+    "type": "STEP",
+    "component": "MPbQuestion",
+    "payload": {
+      "viewModel": {
+        "label": "Votre logement est-il équipé d’un compteur Linky ?",
+        "answersComponent": "MPbCard",
+        "progressBar": true,
+        "widthFromL": "1of3",
+        "forceOneCardPerLineOnMobile": true
+      },
+      "answers": {
+        "YES": {
+          "code": "YES",
+          "viewModel": {
+            "title": "Oui"
+          }
+        },
+        "NO": {
+          "code": "NO",
+          "viewModel": {
+            "title": "Non"
+          },
+          "notification": {
+            "type": "warning",
+            "content": "Le compteur électrique Linky vous permet d'être facturé selon votre consommation électrique réelle. Sans ce compteur nous ne pouvons pas installer de panneaux solaires. Pour l’installer, nous vous invitons à vous rapprocher d'Enedis",
+            "buttonText": "Voir d'autres solutions pour faire des économies de chauffage",
+            "buttonHref": "https://www.leroymerlin.fr/economie-energie/"
+          }
+        }
+      },
+      "helpArea": [
+        {
+          "type": "link",
+          "label": "À quoi ressemble un compteur Linky ?",
+          "action": {
+            "type": "MODAL",
+            "viewModelDialog": {
+              "headerTitle": "À quoi ressemble un compteur Linky ?",
+              "htmlContent": "<b style='font-size:18px;'>Le compteur Linky ressemble à un boîtier rectangulaire en plastique. Il a un écran qui affiche la consommation d'électricité en kilowattheures (kWh)</b><br/><br/><p>C’est un compteur d'électricité intelligent installé par Enedis en France. Il permet de mesurer la consommation d'électricité en temps réel et de transmettre les données sans intervention humaine grâce à une communication sans fil.</p><br/>",
+              "imgUrl": "https://storage.googleapis.com/project-booster-media/energyrenovation/linky.png"
+            }
+          }
+        }
+      ]
+    },
+    "nextStep": {
+      "conditionals": [
+        {
+          "conditions": ["isAnswerMatching('LMFR_SOLAR_PANEL_QUESTION_LINKY', 'YES')"],
+          "nextStep": {
+            "code": "LMFR_SOLAR_PANEL_QUESTION_EXPOSED_ROOF_AREA"
+          }
+        }
+      ]
+    },
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "sizeXlWidth": true,
+        "component": "MPbProgress",
+        "totalStep": 5,
+        "currentStep": 3
+      }
+    }
+  },
+  "LMFR_SOLAR_PANEL_QUESTION_EXPOSED_ROOF_AREA": {
+    "code": "LMFR_SOLAR_PANEL_QUESTION_EXPOSED_ROOF_AREA",
+    "type": "STEP",
+    "component": "MPbQuestion",
+    "payload": {
+      "viewModel": {
+        "label": "Quelle surface de votre toiture est exposée au sud, ouest et/ou est ?",
+        "answersComponent": "MPbCard",
+        "progressBar": true,
+        "widthFromL": "1of3",
+        "forceOneCardPerLineOnMobile": true,
+        "notification": {
+          "type": "warning",
+          "title": "Attention : ne prenez pas en compte toutes les parties de la toiture exposées au nord",
+          "content": "Ceci comprend aussi les parties exposées  au nord-est et nord-ouest. "
+        }
+      },
+      "answers": {
+        "LESS_THAN_20": {
+          "code": "LESS_THAN_20",
+          "viewModel": {
+            "title": "Moins de 20 m²"
+          }
+        },
+        "BETWEEN_20_AND_35": {
+          "code": "BETWEEN_20_AND_35",
+          "viewModel": {
+            "title": "20 à 35 m²"
+          }
+        },
+        "MORE_THAN_35": {
+          "code": "MORE_THAN_35",
+          "viewModel": {
+            "title": "Plus de 35 m²"
+          }
+        },
+        "DONT_KNOW": {
+          "code": "DONT_KNOW",
+          "viewModel": {
+            "title": "Je ne sais pas"
+          }
+        }
+      },
+      "helpArea": [
+        {
+          "type": "link",
+          "label": "Comment calculer cette surface de toiture ?",
+          "action": {
+            "type": "MODAL",
+            "viewModelDialog": {
+              "headerTitle": "Comment calculer cette surface de toiture ?",
+              "htmlContent": "<b style='font-size:18px;'>Il est obligatoire de positionner ses panneaux solaires sur une toiture exposée au sud, est ou ouest.</b><br/><br/><p> Pour calculer la surface de votre toiture exposée au sud, nous vous conseillons d’utiliser <u>Geoportail</u>. Dans les outils cartographiques : trouvez l’onglet “Mesures” et l’outil “Mesurer une surface” pour tracer la surface de votre toiture éligible.</p><br/>",
+              "imgUrl": "https://storage.googleapis.com/project-booster-media/energyrenovation/roof_area_exposure.png",
+              "linkText": "Utiliser Geoportail",
+              "hrefLink": "https://www.geoportail.gouv.fr/"
+            }
+          }
+        }
+      ]
+    },
+    "nextStep": {
+      "code": "LMFR_SOLAR_PANEL_QUESTION_ELECTRICITY_COMSUMPTION"
+    },
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "sizeXlWidth": true,
+        "totalStep": 5,
+        "currentStep": 4
+      }
+    }
+  },
+  "LMFR_SOLAR_PANEL_QUESTION_ELECTRICITY_COMSUMPTION": {
+    "code": "LMFR_SOLAR_PANEL_QUESTION_ELECTRICITY_COMSUMPTION",
+    "type": "STEP",
+    "component": "MPbQuestion",
+    "payload": {
+      "viewModel": {
+        "label": "À combien s’élève votre consommation électrique annuelle ?",
+        "answersComponent": "MPbCard",
+        "progressBar": true,
+        "widthFromL": "1of3",
+        "forceOneCardPerLineOnMobile": true,
+        "notification": {
+          "type": "info",
+          "title": "Trouvez facilement cette information :",
+          "content": "<ul style='list-style:none; padding:0; margin:0;'><li>- En ligne via un compte client en ligne ou une application mobile.</li><li>- Sur votre facture d’électricité.</li></ul>"
+        }
+      },
+      "answers": {
+        "LESS_THAN_2000": {
+          "code": "LESS_THAN_2000",
+          "viewModel": {
+            "title": "Moins de 2 000 kWh"
+          }
+        },
+        "BETWEEN_2000_AND_4000": {
+          "code": "BETWEEN_2000_AND_4000",
+          "viewModel": {
+            "title": "2 000 à 4 000 kWh"
+          }
+        },
+        "BETWEEN_4000_AND_8000": {
+          "code": "BETWEEN_4000_AND_8000",
+          "viewModel": {
+            "title": "4 000 à 8 000 kWh"
+          }
+        },
+        "MORE_THAN_8000": {
+          "code": "MORE_THAN_8000",
+          "viewModel": {
+            "title": "Plus de 8 000 kWh"
+          }
+        },
+        "DONT_KNOW": {
+          "code": "DONT_KNOW",
+          "viewModel": {
+            "title": "Je ne sais pas"
+          }
+        }
+      }
+    },
+    "nextStep": {
+      "code": "SUMMARY"
+    },
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "sizeXlWidth": true,
+        "totalStep": 5,
+        "currentStep": 5
+      }
+    }
+  },
+
+  "SUMMARY": {
+    "code": "SUMMARY",
+    "type": "STEP",
+    "component": "MPbRestitutionList",
+    "nextStep": {
+      "type": "STEP",
+      "code": "__END__"
+    },
+    "slots": {
+      "stickyBottom": {
+        "display": false
+      }
+    },
+    "payload": {
+      "backLabel": {
+        "label": "Recommencer l'estimation",
+        "action": {
+          "type": "STEP",
+          "code": "SOLAR_PANEL"
+        }
+      },
+      "viewModel": {
+        "title": "Résultat de votre estimation",
+        "legalMentions": [
+          "* Montant estimatif établi selon les réponses renseignées et susceptible d'être ajusté lors du devis définitif. Ce montant n’engage pas Leroy Merlin."
+        ]
+      },
+      "callToActions": [
+        {
+          "type": "button",
+          "label": "Être rappelé par un expert",
+          "action": {
+            "type": "STEP",
+            "code": "LMFR_SOLAR_PANEL_QUESTION_CONTACT"
+          }
+        },
+        {
+          "conditions": ["runtimeOptions.projectMode === true"],
+          "type": "button",
+          "label": "J'enregistre mon estimation",
+          "bordered": true,
+          "action": {
+            "type": "STEP",
+            "code": "ESTIMATION_NAME"
+          }
+        },
+        {
+          "conditions": ["!runtimeOptions.projectMode && !runtimeOptions.estimateCreated"],
+          "type": "button",
+          "label": "J'enregistre mon estimation",
+          "bordered": true,
+          "action": {
+            "type": "MODAL",
+            "code": "SUMMARY",
+            "component": "PbProjectItemSave",
+            "payload": {
+              "link": "/projets/estimations/confirmation-de-votre-estimation-panneaux-photovoltaiques.html",
+              "viewModel": {
+                "type": "estimation",
+                "modalTitle": "Enregistrer l'estimation",
+                "roomsTitle": "Choisissez une pièce",
+                "projectList": {
+                  "title": "Mes projets",
+                  "buttonLabelSaveInNewProject": "Enregistrer dans un nouveau projet"
+                },
+                "titleErrorProject": "Le nom du projet doit avoir moins de 60 caractères",
+                "titleErrorType": "Le nom de l'estimation doit avoir moins de 60 caractères",
+                "notification": {
+                  "success": {
+                    "title": "Estimation enregistrée",
+                    "text": "L’estimation",
+                    "link": "Voir dans le projet"
+                  },
+                  "error": {
+                    "title": "L’estimation n’a pas pu être enregistrée",
+                    "text": "Une erreur est survenue"
+                  }
+                }
+              }
+            }
+          }
+        }
+      ]
+    }
+  },
+  "LMFR_SOLAR_PANEL_QUESTION_CONTACT": {
+    "code": "LMFR_SOLAR_PANEL_QUESTION_CONTACT",
+    "type": "STEP",
+    "component": "MPbQuestion",
+    "payload": {
+      "viewModel": {
+        "label": "Vous souhaitez être rappelé pour :",
+        "answersComponent": "MPbCard",
+        "forceOneCardPerLineOnMobile": true,
+        "widthFromL": "1of2",
+        "progressBar": true
+      },
+      "answers": {
+        "PHONE_CALL": {
+          "code": "PHONE_CALL",
+          "viewModel": {
+            "title": "Concrétiser mon projet d'isolation des planchers bas et profiter des aides",
+            "text": "Notre partenaire prend directement contact avec vous",
+            "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/phone_call.jpg"
+          }
+        },
+        "ADVISOR_APPOINTEMENT": {
+          "code": "ADVISOR_APPOINTEMENT",
+          "viewModel": {
+            "title": "Etudier mon projet de rénovation énergétique global",
+            "text": "Notre expert en rénovation énergétique vous conseille",
+            "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/advisor_appointement.png"
+          }
+        }
+      }
+    },
+    "nextStep": {
+      "conditionals": [
+        {
+          "conditions": ["isAnswerMatching('LMFR_SOLAR_PANEL_QUESTION_CONTACT', 'PHONE_CALL')"],
+          "nextStep": {
+            "code": "LMFR_SOLAR_PANEL_LEAD_FORM"
+          }
+        },
+        {
+          "conditions": ["isAnswerMatching('LMFR_SOLAR_PANEL_QUESTION_CONTACT', 'ADVISOR_APPOINTEMENT')"],
+          "nextStep": {
+            "code": "APPOINTMENT_FORM"
+          }
+        }
+      ]
+    },
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 5,
+        "currentStep": 2
+      }
+    }
+  },
+  "ESTIMATION_NAME": {
+    "code": "ESTIMATION_NAME",
+    "type": "STEP",
+    "nextStep": {
+      "code": "__END__"
+    },
+    "slots": {
+      "stickyBottom": {
+        "display": false
+      },
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 5,
+        "currentStep": 1
+      }
+    },
+    "component": "MPbNameInput",
+    "payload": {
+      "viewModel": {
+        "label": "Nommez votre estimation",
+        "backLabel": "Revoir l'estimation",
+        "placeholder": "Nom de l'estimation",
+        "actionLabel": "Sauvegarder mon estimation",
+        "validation": {
+          "maxLength": 60,
+          "maxErrorMessage": "Le nom de l'estimation doit avoir moins de 60 caractères",
+          "requiredErrorMessage": "Le nom de l'estimation est obligatoire."
+        }
+      },
+      "value": {
+        "projectName": "Estimation isolation des combles"
+      }
+    }
+  },
+  "APPOINTMENT_FORM": {
+    "code": "APPOINTMENT_FORM",
+    "type": "STEP",
+    "component": "PbAppointmentForm",
+    "payload": {
+      "viewModel": {
+        "calendarUrlPath": "leroy-merlin-renovation-energetique"
+      }
+    }
+  },
+  "LMFR_SOLAR_PANEL_LEAD_FORM": {
+    "code": "LMFR_SOLAR_PANEL_LEAD_FORM",
+    "type": "STEP",
+    "component": "PbTrezor",
+    "payload": {
+      "viewModel": {
+        "backLabel": "Question précédente",
+        "label": "Renseignez notre formulaire pour être recontacté",
+        "typeLead": "SOLAR_PANEL",
+        "defaultValue": {
+          "zipcode": {
+            "answerCode": "LMFR_SOLAR_PANEL_QUESTION_LOCATION",
+            "path": "city.postalCode"
+          }
+        },
+        "metadata": [
+          {
+            "attribut": "productRef",
+            "type": "string",
+            "answerCode": "LMFR_SOLAR_PANEL_DISPLAY_PRODUCT",
+            "path": "product.code"
+          }
+        ]
+      },
+      "callToActions": [
+        {
+          "type": "button",
+          "label": "Envoyer",
+          "action": {
+            "type": "STEP",
+            "conditionals": [
+              {
+                "conditions": ["isAnswerValue('LMFR_SOLAR_PANEL_LEAD_FORM', 'status', 'LEAD_CREATED_SUCCESSFULLY')"],
+                "nextStep": {
+                  "code": "LMFR_SOLAR_PANEL_LEAD_CREATED"
+                }
+              },
+              {
+                "conditions": ["true"],
+                "nextStep": {
+                  "code": "LMFR_SOLAR_PANEL_LEAD_CREATION_FAILED"
+                }
+              }
+            ]
+          },
+          "bordered": false
+        }
+      ]
+    }
+  },
+  "LMFR_SOLAR_PANEL_LEAD_CREATED": {
+    "code": "LMFR_SOLAR_PANEL_LEAD_CREATED",
+    "type": "STEP",
+    "component": "PbPedagogy",
+    "payload": {
+      "viewModel": {
+        "title": "Merci, votre demande a été prise en compte",
+        "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg",
+        "description": [
+          {
+            "label": "Vous serez recontacté sous 48h par un conseiller",
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/picto_plan_pour-espace-projet-compte.png"
+          }
+        ]
+      },
+      "callToActions": [
+        {
+          "isAnswer": false,
+          "label": "Retourner à l’estimation",
+          "nextStep": {
+            "code": "SUMMARY"
+          }
+        }
+      ]
+    }
+  },
+  "LMFR_SOLAR_PANEL_LEAD_CREATION_FAILED": {
+    "code": "LMFR_SOLAR_PANEL_LEAD_CREATION_FAILED",
+    "type": "STEP",
+    "component": "PbPedagogy",
+    "payload": {
+      "viewModel": {
+        "title": "Désolé, votre région n'est pas prise en charge pour le moment",
+        "description": [
+          {
+            "label": "Veuillez vous rendre dans votre magasin Leroy Merlin le plus proche",
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/picto_plan_pour-espace-projet-compte.png"
+          }
+        ]
+      },
+      "callToActions": [
+        {
+          "isAnswer": false,
+          "label": "Retourner à l’estimation",
+          "bordered": false,
+          "nextStep": {
+            "code": "SUMMARY"
+          }
+        },
+        {
+          "isAnswer": false,
+          "label": "Quitter l'estimation",
+          "bordered": true,
+          "nextStep": {
+            "code": "LMFR_SOLAR_PANEL_ADVICE"
+          }
+        }
+      ]
+    }
+  },
+  "__END__": {
+    "code": "__END__",
+    "type": "END",
+    "component": "MPbQuestion",
+    "payload": {
+      "viewModel": {
+        "label": "End"
+      }
+    }
+  }
+}

package/src/components/trezor/PbTrezor.vue

@@ -305,6 +305,12 @@ export default defineComponent({
         props.payload.viewModel.defaultValue?.zipcode?.path,
       ) || null;
 
+    const city =
+      getAnswerValue(
+        props.payload.viewModel.defaultValue?.city?.answerCode,
+        props.payload.viewModel.defaultValue?.city?.path,
+      ) || null;
+
     const convertToTypeOf = (typedVar: string, input: any): string | number | null => {
       if (!input) {
         return null;
@@ -338,7 +344,7 @@ export default defineComponent({
         address: '',
         additionalAddress: '',
         zipcode: zipcode,
-        city: '',
+        city: city,
         email: '',
         phone: '',
         optin: false,

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

@@ -7,6 +7,10 @@
       "zipcode": {
         "answerCode": "LMFR_PREVIOUS_QUESTION",
         "path": "value"
+      },
+      "city": {
+        "answerCode": "LMFR_PREVIOUS_QUESTION",
+        "path": "value"
       }
     },
     "metadata": [