project-booster-vue 10.28.1 → 10.30.0

package/package.json

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

package/src/components/scenario/PbScenario-Appointment-Energy-Renovation.stories.mdx

@@ -0,0 +1,245 @@
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Meta, Source, Canvas } from '@storybook/addon-docs';
+import PbScenario from './PbScenario';
+import estimatesStore from '../../stores/modules/estimatesStore';
+import DEFAULT_PAYLOAD from './scenarii/appointment-qualification-energy-renovation.json';
+import { TemplateSandbox } from './PbScenario.stories.mdx';
+import simpleScenarioSchema from './Simple-scenario.svg';
+
+<Meta
+  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Appointment qualification/Energy Renovation"
+  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="Energy Renovation"
+    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-energy-renovation.json

@@ -0,0 +1,289 @@
+{
+  "__START__": {
+    "code": "__START__",
+    "type": "SCENARIO",
+    "meta": {
+      "businessUnit": "001",
+      "webAnalytics": {
+        "category": "Rénovation énergétique",
+        "scenario": "appointment-qualification-energy-renovation",
+        "funnel_name": "Qualifying course energy renovation",
+        "tracking": true,
+        "cdl": {
+          "pageName": "energy renovation qualification",
+          "pageType": "Configurators & services",
+          "pageSubType": "appointment qualification",
+          "pageCategory1": "Rénovation énergétique",
+          "pageCategory2": "",
+          "booking": {
+            "pageType": "Configurators & services",
+            "pageSubType": "appointment booking",
+            "pageCategory1": "energy renovation",
+            "pageCategory2": "energy renovation appointment booking"
+          }
+        }
+      },
+      "projectName": "Rénovation énergétique",
+      "projectKindHref": "/project-kinds/34048",
+      "projectTypeHref": "/project-types/61774",
+      "domesticSpaceHref": "/domestic-spaces/59419",
+      "configuratorType": "Rénovation énergétique"
+    },
+    "stepCode": "ENERGY_RENOVATION"
+  },
+  "ENERGY_RENOVATION": {
+    "code": "ENERGY_RENOVATION",
+    "type": "SCENARIO",
+    "stepCode": "LMFR_QUESTION_WORKS"
+  },
+
+  "LMFR_QUESTION_WORKS": {
+    "code": "LMFR_QUESTION_WORKS",
+    "type": "STEP",
+    "component": "MPbQuestion",
+    "slots": {
+      "stickyBottom": {
+        "display": false
+      },
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 1,
+        "currentStep": 1,
+        "sizeXlWidth": true,
+        "label": "Votre projet de rénovation énergétique"
+      }
+    },
+    "payload": {
+      "viewModel": {
+        "hero": "Estimez votre projet de rénovation énergétique",
+        "label": "Quels sont les types de travaux envisagés ?",
+        "answersComponent": "MPbCard",
+        "progressBar": true,
+        "widthFromL": "auto",
+        "widthXlSize": true,
+        "hideBackButton": true,
+        "forceOneCardPerLineOnMobile": true,
+        "sortBy": {
+          "type": ["numeric", "string"],
+          "order": ["Asc"],
+          "path": ["meta.ranking", "viewModel.title"]
+        }
+      },
+      "multiSelect": {
+        "actions": {
+          "VALIDATE": {
+            "label": "Étape suivante",
+            "nextStep": {
+              "conditionals": [
+                {
+                  "conditions": [
+                    "hasMultipleAnswers('LMFR_QUESTION_WORKS')",
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'OTHER')",
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'HELP')"
+                  ],
+                  "nextStep": {
+                    "code": "APPOINTMENT_FORM"
+                  }
+                },
+                {
+                  "conditions": [
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'EXTERNAL_WALL_INSULATION')",
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'ATTIC_INSULATION')",
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'WOOD_STOVE')",
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'AIR_WATER_HEAT_PUMP')",
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'WATER_HEATER')",
+                    "isAnswerContaining('LMFR_QUESTION_WORKS', 'PHOTOVOLTAIC')"
+                  ],
+                  "nextStep": {
+                    "code": "LMFR_QUESTION_ENERGY_RENOVATION_EXIT_OPTIONS"
+                  }
+                }
+              ]
+            }
+          }
+        }
+      },
+      "answers": {
+        "EXTERNAL_WALL_INSULATION": {
+          "code": "EXTERNAL_WALL_INSULATION",
+          "viewModel": {
+            "title": "Isolation des murs par l'extérieur"
+          },
+          "meta": {
+            "ranking": 1
+          }
+        },
+        "ATTIC_INSULATION": {
+          "code": "ATTIC_INSULATION",
+          "viewModel": {
+            "title": "Isolation des combles perdus"
+          },
+          "meta": {
+            "ranking": 2
+          }
+        },
+        "WOOD_STOVE": {
+          "code": "WOOD_STOVE",
+          "viewModel": {
+            "title": "Poêle à bois"
+          },
+          "meta": {
+            "ranking": 3
+          }
+        },
+        "AIR_WATER_HEAT_PUMP": {
+          "code": "AIR_WATER_HEAT_PUMP",
+          "viewModel": {
+            "title": "Pompe à chaleur air/eau"
+          },
+          "meta": {
+            "ranking": 4
+          }
+        },
+        "WATER_HEATER": {
+          "code": "WATER_HEATER",
+          "viewModel": {
+            "title": "Chauffe-eau"
+          },
+          "meta": {
+            "ranking": 5
+          }
+        },
+        "PHOTOVOLTAIC": {
+          "code": "PHOTOVOLTAIC",
+          "viewModel": {
+            "title": "Panneaux solaires"
+          },
+          "meta": {
+            "ranking": 6
+          }
+        },
+        "OTHER": {
+          "code": "OTHER",
+          "viewModel": {
+            "title": "Autre"
+          },
+          "meta": {
+            "ranking": 7
+          }
+        },
+        "HELP": {
+          "code": "HELP",
+          "viewModel": {
+            "title": "Je cherche des informations sur les aides à la rénovation énergétique"
+          },
+          "meta": {
+            "ranking": 8
+          }
+        }
+      }
+    }
+  },
+  "LMFR_QUESTION_ENERGY_RENOVATION_EXIT_OPTIONS": {
+    "code": "LMFR_QUESTION_ENERGY_RENOVATION_EXIT_OPTIONS",
+    "type": "STEP",
+    "component": "MPbExitOptions",
+    "slots": {
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 1,
+        "currentStep": 1,
+        "sizeXlWidth": true,
+        "label": "Votre projet de rénovation énergétique"
+      }
+    },
+    "payload": {
+      "viewModel": {
+        "conditionals": [
+          {
+            "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'EXTERNAL_WALL_INSULATION')"],
+            "viewModel": {
+              "title": "Votre projet concerne uniquement l'isolation de vos murs par l'extérieur ?",
+              "content": "<p>Définissez votre projet. Nos conseillers vous accueillent également en magasin sans rendez-vous pour réaliser ensemble votre projet.</p>",
+              "nextStep": {
+                "link": "https://www.leroymerlin.fr/services/tous-nos-services-autour-de-isolation/pose-isolation-exterieure-par-un-professionnel.html",
+                "label": "Être rappelé par nos conseillers"
+              }
+            }
+          },
+          {
+            "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'ATTIC_INSULATION')"],
+            "viewModel": {
+              "title": "Votre projet concerne uniquement l'isolation de vos combles ?",
+              "content": "<p>Définissez votre projet. Nos conseillers vous accueillent également en magasin sans rendez-vous pour réaliser ensemble votre projet.</p>",
+              "nextStep": {
+                "link": "https://www.leroymerlin.fr/services/tous-nos-services-autour-de-isolation/isolation-de-vos-combles-perdus.html",
+                "label": "Être rappelé par nos conseillers"
+              }
+            }
+          },
+          {
+            "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'WOOD_STOVE')"],
+            "viewModel": {
+              "title": "Votre projet concerne uniquement un poêle à bois ?",
+              "content": "<p>Définissez votre projet. Nos conseillers vous accueillent également en magasin sans rendez-vous pour réaliser ensemble votre projet.</p>",
+              "nextStep": {
+                "link": "https://www.leroymerlin.fr/services/tous-nos-services-autour-du-poele-a-bois/votre-poele-a-bois-livre-et-installe-par-un-professionnel.html",
+                "label": "Être rappelé par nos conseillers"
+              }
+            }
+          },
+          {
+            "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'AIR_WATER_HEAT_PUMP')"],
+            "viewModel": {
+              "title": "Votre projet concerne uniquement une pompe à chaleur air/eau ?",
+              "content": "<p>Définissez votre projet. Nos conseillers vous accueillent également en magasin sans rendez-vous pour réaliser ensemble votre projet.</p>",
+              "nextStep": {
+                "link": "https://www.leroymerlin.fr/services/tous-nos-services-autour-de-pompe-a-chaleur/votre-pompe-a-chaleur-air-eau-livree-et-installee-par-un-professionnel.html",
+                "label": "Être rappelé par nos conseillers"
+              }
+            }
+          },
+          {
+            "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'WATER_HEATER')"],
+            "viewModel": {
+              "title": "Votre projet concerne uniquement un chauffe-eau ?",
+              "content": "<p>Définissez votre projet. Nos conseillers vous accueillent également en magasin sans rendez-vous pour réaliser ensemble votre projet.</p>",
+              "nextStep": {
+                "link": "https://www.leroymerlin.fr/services/tous-nos-services-autour-du-chauffe-eau/votre-chauffe-eau-thermodynamique-livre-et-installe-par-un-professionnel.html",
+                "label": "Être rappelé par nos conseillers"
+              }
+            }
+          },
+          {
+            "conditions": ["isAnswerContaining('LMFR_QUESTION_WORKS', 'PHOTOVOLTAIC')"],
+            "viewModel": {
+              "title": "Votre projet concerne uniquement des panneaux photovoltaïques ?",
+              "content": "<p>Définissez votre projet. Nos conseillers vous accueillent également en magasin sans rendez-vous pour réaliser ensemble votre projet.</p>",
+              "nextStep": {
+                "link": "https://www.leroymerlin.fr/services/tous-nos-services-autour-du-panneau-solaire/installation-panneaux-photovoltaiques-economisez-jusqu-a-50-sur-vos-factures-electricite.html",
+                "label": "Être rappelé par nos conseillers"
+              }
+            }
+          }
+        ],
+        "backButton": {
+          "label": "Précédent",
+          "theme": "bordered-neutral",
+          "nextStep": {
+            "code": "LMFR_QUESTION_WORKS"
+          }
+        }
+      }
+    }
+  },
+
+  "APPOINTMENT_FORM": {
+    "code": "APPOINTMENT_FORM",
+    "type": "STEP",
+    "component": "MPbTimify",
+    "payload": {
+      "viewModel": {
+        "title": "Votre prise de rendez-vous pour de la rénovation énergétique",
+        "appointmentCategory": "ENERGY_RENOVATION"
+      }
+    }
+  }
+}

package/src/services/scenarioConditionals.ts

@@ -31,16 +31,31 @@ const Condition = (
     const questionAnswers = answers.get(questionCode)!;
     return questionAnswers.length > 0;
   };
+  const hasMultipleAnswers = (questionCode: string): boolean => {
+    const questionAnswers = answers.get(questionCode)!;
+    return questionAnswers.length > 1;
+  };
   const isValid: boolean = new Function(
     'isAnswerMatching',
     'isAnswerContaining',
     'isAnswerValue',
     'isJsonEmpty',
     'hasAnswers',
+    'hasMultipleAnswers',
     'answers',
     'runtimeOptions',
     `return ${condition}`,
-  ).call(this, isAnswerMatching, isAnswerContaining, isAnswerValue, isJsonEmpty, hasAnswers, answers, runtimeOptions);
+  ).call(
+    this,
+    isAnswerMatching,
+    isAnswerContaining,
+    isAnswerValue,
+    isJsonEmpty,
+    hasAnswers,
+    hasMultipleAnswers,
+    answers,
+    runtimeOptions,
+  );
   return { isValid };
 };