project-booster-vue 10.23.8 → 10.24.0

package/package.json

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

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -1010,6 +1010,8 @@ export default defineComponent({
         BATHROOM_IN_STORE: 'en magasin',
         BATHROOM_AT_HOME: 'à domicile',
         BATHROOM_FURNITURES_AND_SHOWER: 'à distance',
+        GARDEN_REMOTE: 'à distance',
+        GARDEN_IN_STORE: 'en magasin',
       })[this.appointment.appointmentType];
       return `${prefix} le ${appointmenDateLabel} ${appointmentTypeLabel}`;
     },

package/src/components/projects/projects-list/PbProjectHub.vue

@@ -1011,6 +1011,8 @@ export default defineComponent({
         BATHROOM_IN_STORE: 'en magasin',
         BATHROOM_AT_HOME: 'à domicile',
         BATHROOM_FURNITURES_AND_SHOWER: 'à distance',
+        GARDEN_REMOTE: 'à distance',
+        GARDEN_IN_STORE: 'en magasin',
       })[this.appointment.appointmentType];
       return `${prefix} le ${appointmenDateLabel} ${appointmentTypeLabel}`;
     },

package/src/components/question/upload-document/UploadDocument.ts

@@ -55,9 +55,24 @@ export interface UploadDocumentViewModel {
   answerComponent: string;
   startOpened: boolean;
   backLink?: string;
+  forceOneCardPerLineOnMobile?: boolean;
   mediaPayload: UploadDocumentMediaPayload;
   showMore?: boolean;
   analytics?: any;
+  redirectLink?: UploadDocumentRedirectLink;
+  upload?: {
+    label: string;
+  };
+  download: {
+    label: string;
+    href: string;
+    fileName?: string;
+  };
+}
+
+interface UploadDocumentRedirectLink {
+  label: string;
+  link: string;
 }
 
 export interface UploadDocumentPayload {

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

@@ -37,11 +37,26 @@
               width-from-l="1of3"
             >
               <div class="pb-upload-document__answer">
-                <div
-                  class="pb-upload-document__answer-plan mc-button mc-button--bordered-neutral"
-                  @click="displayDocumentDialog"
-                >
-                  {{ payload.viewModel.addTitle || 'Importer un fichier' }}
+                <div v-if="payload.viewModel.upload" class="pb-upload-document__answer__upload">
+                  <div
+                    class="pb-upload-document__answer__upload__content mc-button mc-button--bordered-neutral"
+                    @click="displayDocumentDialog"
+                  >
+                    <span>{{ payload.viewModel.upload.label || 'Sélectionner un fichier' }}</span>
+                  </div>
+                </div>
+                <div v-if="payload.viewModel.download" class="pb-upload-document__answer__download">
+                  <a
+                    class="pb-upload-document__answer__download__content mc-button mc-button--bordered-neutral"
+                    target="_blank"
+                    :href="payload.viewModel.download.href"
+                    :download="payload.viewModel.download.fileName ? '' : ''"
+                  >
+                    <img :src="DownloadIcon" alt="download" style="width: 24px" />
+                    <span class="pb-upload-document__answer__download__content__text">{{
+                      payload.viewModel.download.label || 'Télécharger un fichier'
+                    }}</span>
+                  </a>
                 </div>
               </div>
             </m-flexy-col>
@@ -108,6 +123,9 @@
 </template>
 
 <script lang="ts" setup>
+//@ts-ignore
+import DownloadIcon from '@mozaic-ds/icons/svg/Media_Download_Web_24px.svg';
+
 import { computed, onMounted, ref, PropType } from 'vue';
 import { MButton, MLink } from '@mozaic-ds/vue-3';
 import MContainer from '../../../mozaic/grid/MContainer.vue';
@@ -438,6 +456,7 @@ $answers-apparition-duration: '0.5s';
   &__answer {
     box-sizing: border-box;
     height: 100%;
+
     padding: $mu050;
 
     @include set-from-screen($responsive-breakpoint) {
@@ -452,6 +471,34 @@ $answers-apparition-duration: '0.5s';
     &-card {
       height: 100%;
     }
+
+    &__upload {
+      &__content {
+        align-items: center;
+        width: 16rem;
+
+        color: $color-primary-01-500;
+        border-color: $color-primary-01-500;
+
+        &:hover {
+          color: white;
+          background-color: $color-primary-01-500;
+        }
+      }
+    }
+
+    &__download {
+      margin-top: $mu050;
+
+      &__content {
+        align-items: center;
+        width: 21rem;
+
+        &__text {
+          margin-left: $mu100;
+        }
+      }
+    }
   }
 
   &__decorator-stripe {

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

@@ -1,5 +1,5 @@
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
-import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { Anchor, Story, Meta, Props, Source, Canvas } from '@storybook/addon-docs';
 import PbScenario from './PbScenario';
 import estimatesStore from '../../stores/modules/estimatesStore';
 import DEFAULT_PAYLOAD from './scenarii/appointment-qualification-kitchen.json';
@@ -7,7 +7,7 @@ import { TemplateSandbox } from './PbScenario.stories.mdx';
 import simpleScenarioSchema from './Simple-scenario.svg';
 
 <Meta
-  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Qualification/Kitchen Qualification"
+  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Appointment qualification/Kitchen"
   component={PbScenario}
   argTypes={{
     scenarios: {
@@ -92,7 +92,7 @@ This simple scenario contains:
 
 <Canvas>
   <Story
-    name="Kitchen Qualification"
+    name="Kitchen"
     inline={false}
     height="758px"
     args={{ scenarios: DEFAULT_PAYLOAD, minHeight: 'auto' }}

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

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

@@ -1,5 +1,5 @@
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
-import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { Anchor, Story, Meta, Props, Source, Canvas } from '@storybook/addon-docs';
 import PbScenario from './PbScenario';
 import estimatesStore from '../../stores/modules/estimatesStore';
 import DEFAULT_PAYLOAD from './scenarii/appointment-qualification-bathroom.json';
@@ -7,7 +7,7 @@ import { TemplateSandbox } from './PbScenario.stories.mdx';
 import simpleScenarioSchema from './Simple-scenario.svg';
 
 <Meta
-  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Qualification/Bathroom Qualification"
+  title="Project Booster/Scenario/PbScenario 🦠/Test (locally)/Appointment qualification/Bathroom"
   component={PbScenario}
   argTypes={{
     scenarios: {
@@ -92,7 +92,7 @@ This simple scenario contains:
 
 <Canvas>
   <Story
-    name="Bathroom Qualification"
+    name="Bathroom"
     inline={false}
     height="758px"
     args={{ scenarios: DEFAULT_PAYLOAD, minHeight: 'auto' }}

package/src/components/scenario/scenarii/appointment-qualification-bathroom.json

@@ -7,7 +7,15 @@
       "webAnalytics": {
         "category": "Salle de bains",
         "scenario": "appointment-qualification-bathroom",
-        "tracking": true
+        "funnel_name": "Qualifying course bathroom",
+        "tracking": true,
+        "cdl": {
+          "pageName": "bathroom qualification",
+          "pageType": "Configurators & services",
+          "pageSubType": "appointment qualification",
+          "pageCategory1": "Salle de bains",
+          "pageCategory2": ""
+        }
       },
       "projectName": "Rénover une salle de bains",
       "projectKindHref": "/project-kinds/34048",
@@ -53,9 +61,6 @@
           "type": ["numeric", "string"],
           "order": ["Asc"],
           "path": ["meta.ranking", "viewModel.title"]
-        },
-        "analytics": {
-          "funnel_name": "SDB_step1"
         }
       },
       "multiSelect": {
@@ -311,10 +316,7 @@
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
         "widthFromL": "1of3",
-        "widthXlSize": true,
-        "analytics": {
-          "funnel_name": "SDB_step2"
-        }
+        "widthXlSize": true
       },
       "answers": {
         "STRAIGH_TUB": {
@@ -416,9 +418,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step3"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -498,9 +497,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step4_1/4"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -611,9 +607,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step5"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -664,9 +657,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step3"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -825,9 +815,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step4_3/4"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -906,9 +893,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step4_2/4"
-        },
         "title": "Transmettre mon plan plus tard",
         "type": "warning",
         "exitOptionsTitle": "Réaliser rapidement votre plan :",
@@ -968,12 +952,12 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step5_1/2"
-        },
         "label": "Possédez-vous des photos de votre salle de bain actuelle ?",
-        "addText": "Plus on en sait, mieux vous serez accompagné",
-        "addTitle": "Importer des photos",
+
+        "upload": {
+          "label": "Importer des photos"
+        },
+
         "answersComponent": "PbCard",
         "showMore": {
           "itemsPerPage": 4,
@@ -1057,12 +1041,12 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step4_4/4"
-        },
         "label": "Ajouter un plan",
-        "addTitle": "Sélectionner un fichier",
-        "addText": "",
+
+        "upload": {
+          "label": "Sélectionner un fichier"
+        },
+
         "answersComponent": "PbCard",
         "redirectLink": {
           "label": "Utiliser une simulation 3D à la place",
@@ -1147,9 +1131,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step6"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -1225,9 +1206,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step7"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -1308,9 +1286,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step8"
-        },
         "answersComponent": "MPbCard",
         "progressBar": true,
         "forceOneCardPerLineOnMobile": true,
@@ -1405,9 +1380,6 @@
     },
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step9"
-        },
         "title": "Pour que vous soyez pleinement satisfait et que votre projet soit réussi : qu'est-ce qui est le plus important pour vous ?",
         "content": "<p>Cette question est facultative.</p>",
         "typeForm": {
@@ -1444,9 +1416,6 @@
     "component": "PbPedagogy",
     "payload": {
       "viewModel": {
-        "analytics": {
-          "funnel_name": "SDB_step5_2/2"
-        },
         "title": "Nous avons bien pris rendez-vous et enregistré vos informations",
         "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg",
         "description": [