project-booster-vue 9.61.0 → 9.62.0

package/package.json

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

package/src/components/landing/PbProjectsLanding.vue

@@ -117,12 +117,7 @@
               theme="primary"
               size="s"
               sizeFromM="s"
-              @click="
-                redirect(
-                  '/services/bricolage-pour-vos-travaux-a-domicile/pose-et-installation-a-domicile/',
-                  'projectsLandingInstall',
-                )
-              "
+              @click="redirect('/services/', 'projectsLandingInstall')"
             />
           </div>
         </div>
@@ -138,7 +133,7 @@
             buttonLabel="Découvrir nos outils"
             size="s"
             size-from-m="s"
-            @button-click="redirect('/hub-outils.html', 'projectsLandingTools')"
+            @button-click="redirect('/outils/', 'projectsLandingTools')"
           />
         </div>
       </div>
@@ -346,7 +341,7 @@ export default defineComponent({
         {
           title: 'Réaliser des devis et des plans 3D',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/solution_projet-conception.png',
-          href: '/hub-outils.html',
+          href: '/outils/',
         },
         {
           title: 'Planifier les étapes de votre projet',
@@ -372,12 +367,12 @@ export default defineComponent({
         {
           title: 'Cuisine',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-cuisine.png',
-          href: '/produits/cuisine/',
+          href: '/produits/cuisine/projet-cuisine/',
         },
         {
           title: 'Salle de bains',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/projet-salle_de_bain.png',
-          href: '/produits/salle-de-bains/',
+          href: '/produits/salle-de-bains/renovation/salle-de-bains/',
         },
         {
           title: 'Rangement',
@@ -403,24 +398,24 @@ export default defineComponent({
       toolsCards3: [
         {
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/artisans-partenaires.png',
-          href: '/produits/cuisine/',
+          href: '/produits/cuisine/projet-cuisine/',
         },
       ],
       toolsCards4: [
         {
           title: 'Pose et installation à domicile',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/service-pose.png',
-          href: '/services/bricolage-pour-vos-travaux-a-domicile/pose-et-installation-a-domicile/',
+          href: '/services/',
         },
         {
           title: 'Location de matériel',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/service-location_materiel.png',
-          href: '/services/location/location-de-materiel/',
+          href: '/services/location-de-materiel/',
         },
         {
           title: 'Location de véhicule',
           image: 'https://storage.googleapis.com/project-booster-media/landing-projet/service-location_vehicule.png',
-          href: '/services/location/location-utilitaire/',
+          href: '/services/location-utilitaire/',
         },
       ],
       toolsCards5: [

package/src/components/scenario/PbScenario-Appoitment-Bathroom.stories.mdx

@@ -7,7 +7,7 @@ import { TemplateSandbox } from './PbScenario.stories.mdx';
 import simpleScenarioSchema from './Simple-scenario.svg';
 
 <Meta
-  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Bathroom Estimator"
+  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Bathroom Qualification"
   component={PbScenario}
   argTypes={{
     scenarios: {
@@ -92,7 +92,7 @@ This simple scenario contains:
 
 <Canvas>
   <Story
-    name="Bathroom Estimator"
+    name="Bathroom Qualification"
     inline={false}
     height="758px"
     args={{ scenarios: DEFAULT_PAYLOAD, minHeight: 'auto' }}

package/src/components/scenario/PbScenario-Estimator-Bathroom.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/estimator-bathroom.json';
+import { TemplateSandbox } from './PbScenario.stories.mdx';
+import simpleScenarioSchema from './Simple-scenario.svg';
+
+<Meta
+  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Bathroom Estimator"
+  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="Bathroom Estimator"
+    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__"
+  }
+}
+```