project-booster-vue 9.36.4 → 9.37.0

package/package.json

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

package/src/components/media/upload/PbMediaUpload.vue

@@ -470,7 +470,7 @@ export default defineComponent({
       return await mediaValidator({
         minHeight: 16,
         minWidth: 16,
-        maxFileSize: 20000000,
+        maxFileSize: 20_000_000, // max document file size is: 20MB
         accept: this.acceptedUploadedTypes,
       })(file);
     },

package/src/components/question/PbQuestion.vue

@@ -410,12 +410,15 @@ export const doEval = (
   );
 };
 
+//TODO Think to move this kind of function in something like "helpers" or "tools"
+// because this is use in multiple components (as PbIncrementalAmountInput.vue),
+// and it shouldn't be in a component.
 export const decorate = (
   answers: Map<string, ScenarioStepAnswer[]>,
   runtimeOptions = {},
   valueToDecorate: string,
   defaultValue = '',
-) => {
+): string => {
   let decoratedValue = valueToDecorate;
   if (valueToDecorate) {
     const stringToEval = `\`${valueToDecorate}\``;

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

@@ -9,7 +9,7 @@
           'pb-city-search__back-button--hidden':
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
-        @click.once="$router.go(-1)"
+        @click.once="$emit('go-back')"
       />
     </m-flex>
     <div class="pb-city-search__title">

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

@@ -155,7 +155,13 @@ export default defineComponent({
     const computedPayload = computed(() => {
       let tempPayload = cloneDeep(DEFAULT_PAYLOAD);
       tempPayload = merge(tempPayload, props.payload);
+
+      // This will doEval and decorate dynamically variables from JSON templates
+      // For instance:
+      // "${getAnswerValue('DEVELOPER', 'code') == 'YES' ? 'I'm developer' : 'I'm not developer'}"
       tempPayload.viewModel.label = decorate(props.answers!, props.runtimeOptions, tempPayload.viewModel.label);
+      tempPayload.viewModel.subtitle = decorate(props.answers!, props.runtimeOptions, tempPayload.viewModel.subtitle);
+
       return tempPayload as IncrementalAmountPayload;
     });
     const pbIncrementalAmountInput = ref<HTMLElement>();

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