project-booster-vue 10.0.0-beta.2 → 10.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "10.0.0-beta.2",
+  "version": "10.0.1",
   "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,6 +200,7 @@
         ></m-link>
       </div>
     </div>
+
     <pb-sticky-footer
       ref="pbStickyFooter"
       class="pb-question__sticky-footer"
@@ -202,7 +223,7 @@
             >
             </m-button>
           </div>
-          <div class="pb-question__actions-container__column" v-if="!skippables">
+          <div class="pb-question__actions-container__column" v-if="!skippables || hasAnswersSelected">
             <m-button
               class="pb-question__actions-buttons-button"
               size="m"
@@ -211,9 +232,10 @@
               iconPosition="right"
               label="Etape suivante"
               @click="validMultiSelect(payload?.multiSelect?.actions?.VALIDATE)"
+              :disabled="!hasAnswersSelected"
             />
           </div>
-          <div v-else class="pb-question__actions-container__column">
+          <div v-else-if="skippables && !hasAnswersSelected" class="pb-question__actions-container__column">
             <m-button
               v-for="button in skippables"
               :key="button?.label"
@@ -246,24 +268,6 @@
         </m-flexy-col>
       </m-flexy>
     </m-container>
-    <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>
 
     <m-modal
       :modalTitle="notification?.modal?.title"
@@ -282,6 +286,7 @@
       :modalTitle="helpDialog?.viewModelDialog.headerTitle"
       :open="displayDialogHelp"
       @update:open="displayDialogHelp = false"
+      class="mc-modal--overflow"
       v-if="helpDialog"
     >
       <template #default>
@@ -531,7 +536,7 @@ export default defineComponent({
     this.updateSelectedAnswers();
     this.updatePbQuestionActionsButtonsSizeHeight();
     this.progressBar = this.payload.viewModel?.progressBar || false;
-    this.widthXlSize = this.payload.viewModel?.widthXlSize || false;
+    this.widthXlSize = this.payload.viewModel?.widthXlSize || true;
     this.notification = this.payload.viewModel.notification || undefined;
   },
 
@@ -1062,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%;
 
@@ -1186,11 +1191,36 @@ $answers-apparition-duration: '0.5s';
     }
 
     &__column {
-      width: 50%;
+      width: 100%;
+
+      & > button {
+        width: 100%;
+      }
+
+      @include set-from-screen($responsive-breakpoint) {
+        width: 50%;
+
+        & > button {
+          width: auto;
+        }
+      }
 
       &:last-child {
         display: flex;
-        justify-content: flex-end;
+        margin-bottom: $mu050;
+
+        @include set-from-screen($responsive-breakpoint) {
+          justify-content: flex-end !important;
+          order: 2;
+        }
+      }
+
+      &:first-child {
+        order: 2;
+
+        @include set-from-screen($responsive-breakpoint) {
+          order: 1;
+        }
       }
     }
 
@@ -1360,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;
     }
 
@@ -1385,6 +1415,11 @@ $answers-apparition-duration: '0.5s';
     width: calc(100% - 30px);
     margin: auto;
     margin-top: $mu200;
+
+    a,
+    button {
+      width: 100%;
+    }
   }
 
   &__modal-link {
@@ -1430,6 +1465,7 @@ $responsive-breakpoint: 'm';
         background-repeat: no-repeat;
         background-size: 100% auto;
         padding: 120px 0;
+        margin-bottom: 50px;
       }
     }
 

package/src/components/rework/question/space-input/MPbSpaceInput.vue

@@ -395,7 +395,7 @@ $responsive-breakpoint: 'm';
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('06', 'm');
 
-      padding: $mu250 $mu100 $mu050 $mu100;
+      padding: $mu250 $mu100 $mu050 0;
       text-align: left;
     }
   }

package/src/components/rework/question/upload-document/MPbUploadDocument.vue

@@ -89,15 +89,14 @@
     </div>
 
     <div class="pb-upload-document__buttons row-flex" v-if="payload.multiSelect">
-      <div class="pb-upload-document__buttons__button" v-for="button in payload.multiSelect.actions">
-        <m-button label="Précédent" @click="$emit('go-back')" theme="bordered-neutral" icon="ArrowBack48" />
-      </div>
       <div class="pb-upload-document__buttons__button" v-for="button in payload.multiSelect.actions">
         <m-button
           :label="button.label"
           @click="validMultiSelect(button)"
           :theme="button.theme"
           :icon="button.icon"
+          size="m"
+          size-from-l="l"
           :iconPosition="button.iconPosition"
         />
       </div>

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__"
+  }
+}
+```