project-booster-vue 9.55.4 → 9.56.1

package/package.json

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

package/src/components/pedagogy/PbPedagogy.stories.mdx

@@ -1,6 +1,7 @@
 import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
 import DEFAULT_PAYLOAD from './default-payload';
 import WITH_INSTRUCTIONS from './with-instructions';
+import WITH_MAIL_LEAD from './with-email-lead';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import PbPedagogy from './PbPedagogy';
 import store from '../../stores/store';
@@ -57,3 +58,11 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## showCase
+
+<Canvas>
+  <Story inline={false} height="862px" name="With Mail Lead" args={{ payload: WITH_MAIL_LEAD }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/pedagogy/PbPedagogy.vue

@@ -14,6 +14,21 @@
           <div class="pb-pedagogy__content-description-line-text" v-html="line.label" />
         </div>
       </m-flex>
+      <form action="#" class="pb-pedagogy__form-lead" v-if="payload.viewModel.showFormLead">
+        <input
+          type="email"
+          class="pb-pedagogy__form-lead__input"
+          v-model="emailToSaved"
+          required
+          :placeholder="payload.viewModel.showFormLead.inputPlaceholder"
+        />
+        <div v-if="error && error.message" class="pb-pedagogy__error">{{ error.message }}</div>
+        <m-button
+          :label="payload.viewModel.showFormLead.buttonLabel"
+          class="pb-pedagogy__form-lead__button mc-button--full"
+          @click="saveFormLead(payload.viewModel.showFormLead)"
+        />
+      </form>
       <m-flex
         class="pb-pedagogy__content__button-informations"
         align-items="center"
@@ -89,6 +104,8 @@ export default defineComponent({
   },
   data: () => ({
     value: [],
+    emailToSaved: '',
+    error: {},
   }),
   computed: {
     ...mapGetters('appointmentQualification', {
@@ -149,6 +166,25 @@ export default defineComponent({
         nextStep: action.nextStep,
       });
     },
+    saveFormLead(action: any) {
+      const validation = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.emailToSaved.trim());
+
+      if (this.emailToSaved.trim() != '' && validation) {
+        this.error = false;
+        this.$emit('step-completed', {
+          answers: [
+            {
+              email: this.emailToSaved,
+            },
+          ],
+          nextStep: action.nextStep,
+        });
+      } else {
+        this.error = {
+          message: 'Veuillez rentrer un email valide.',
+        };
+      }
+    },
   },
 });
 </script>
@@ -163,6 +199,28 @@ $responsive-breakpoint: 'm';
   padding-top: $mu500;
   width: 100%;
 
+  &__form-lead {
+    margin-top: $mu250;
+    width: 100%;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 230px;
+    }
+
+    &__input {
+      margin-bottom: $mu100;
+      width: calc(100% - 1.2rem);
+      padding: $mu050;
+    }
+  }
+
+  &__error {
+    @include set-font-scale('04', 'm');
+
+    color: $color-danger-500;
+    margin-bottom: $mu050;
+  }
+
   &__content {
     box-sizing: border-box;
     padding: $mu100;

package/src/components/pedagogy/with-email-lead.json

@@ -0,0 +1,27 @@
+{
+  "viewModel": {
+    "title": "Merci pour votre choix. Ce service sera prochainement disponible.",
+    "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg",
+    "description": [
+      {
+        "label": "Vous voulez être informé lorsque ce service sera disponible ? Laissez nous votre email et nous vous enverrons un message."
+      }
+    ],
+    "showFormLead": {
+      "buttonLabel": "Envoyer",
+      "inputPlaceholder": "votre email",
+      "nextStep": {
+        "code": "SUMMARY"
+      }
+    }
+  },
+  "callToActions": [
+    {
+      "isAnswer": false,
+      "label": "Retourner à l’estimation",
+      "nextStep": {
+        "code": "SUMMARY"
+      }
+    }
+  ]
+}

package/src/components/restitution/PbRestitution.vue

@@ -279,9 +279,13 @@ export default defineComponent({
       if (action?.type === 'MODAL') {
         this.dialogViewModel = action.dialogViewModel;
         this.displayDialog = true;
+      } else if (action?.type === 'STEP') {
+        this.$emit('step-completed', {
+          answers: [],
+          nextStep: action,
+        });
       }
     },
-
     handleDialogClose() {
       this.showSaveProjectItem = false;
     },

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/bathroom-estimate.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__"
+  }
+}
+```