project-booster-vue 8.121.0 → 8.122.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.121.0",
+  "version": "8.122.2",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",

package/src/components/appointment/PbAppointment.stories.mdx

@@ -1,15 +1,24 @@
 import PbAppointment from './PbAppointment';
 import PbScenario from '../scenario/PbScenario';
 import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
-import DEFAULT_PAYLOAD from './default-payload';
-import SELECTED_SCENARIOS from './default-selected-scenarios';
+import DEFAULT_PAYLOAD from '../scenario/scenarii/appointment-qualification-kitchen.json';
+import PREVIOUS_CONTEXT from './appointmentQualification-recovery.json';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
-import documentsStore from '../../stores/modules/documentsStore';
-import appointmentQualificationStore from '../../stores/modules/appointmentQualificationStore';
+import store from '../../stores/store';
 import PbMediaUpload from '../media/upload/PbMediaUpload';
 import { rest } from 'msw';
-import { acceptedResolver } from '../../services/api/mocks/commonMock';
-import { documentThumbnailResolver, uploadDocumentResolver } from '../../services/api/mocks/documentsMock';
+import { useStore } from 'vuex';
+import { acceptedResolver, notContentResolver } from '../../services/api/mocks/commonMock';
+import {
+  getDocumentsImageFileResolver,
+  getDocumentsPdfThumbnailResolver,
+  uploadDocumentResolver,
+} from '../../services/api/mocks/documentsMock';
+import {
+  getConfigurationsByProjectIdResolver,
+  getEmptyConfigurationsByProjectIdResolver,
+} from '../../services/api/mocks/configurationsMock';
+import { getProjectByIdResolver } from '../../services/api/mocks/projectsMock';
 
 <Meta
   title="Project Booster/Components/Appointment qualification/PbAppointment 🦠"
@@ -18,32 +27,14 @@ import { documentThumbnailResolver, uploadDocumentResolver } from '../../service
     layout: 'fullscreen',
   }}
   decorators={[
-    nestedAppDecorator(
+    nestedAppDecorator(store, [
+      { path: '/steps/:stepCode/previous/:answers', component: PbScenario },
       {
-        modules: {
-          appointmentQualification: appointmentQualificationStore,
-          documents: documentsStore,
-        },
-        mutations: {
-          eventBusSendEvent(state, { code, payload }) {
-            console.log('event bus data : ', code, payload);
-          },
-        },
-        actions: {
-          sendEventToBus({ commit }, action) {
-            commit('eventBusSendEvent', action);
-          },
-        },
+        name: 'PbMediaUpload',
+        path: '/document-upload',
+        component: PbMediaUpload,
       },
-      [
-        { path: '/steps/:stepCode/previous/:answers', component: PbScenario },
-        {
-          name: 'PbMediaUpload',
-          path: '/document-upload',
-          component: PbMediaUpload,
-        },
-      ],
-    ),
+    ]),
   ]}
 />
 
@@ -51,64 +42,105 @@ import { documentThumbnailResolver, uploadDocumentResolver } from '../../service
 
 The `PbAppointment` component to make an appointment.
 
+# `PbAppointment` - Component props
+
+export const TemplateSandbox = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { PbAppointment },
+    setup() {
+      const store = useStore();
+      store.dispatch('projects/loadProject', '001');
+      store.dispatch('configurations/loadConfigurations', '001');
+      store.dispatch('configurations/defineConfiguratorTypes', [DEFAULT_PAYLOAD.__START__.meta.configuratorType]);
+      store.dispatch('configurations/searchConfigurations', '001');
+      return { args };
+    },
+    template: ` <div style="flex-direction: column;display: flex;place-content: flex-start;align-items: stretch;height: 100vh;">
+                        <pb-appointment
+                          :scenarios="args.scenarios"
+                          :previous-state="args.previousState"
+                          :runtime-options="args.runtimeOptions"
+                        />
+                </div>`,
+  };
+};
+
 ## Appointment first time
 
 <Canvas>
   <Story
     name="Feature - Appointment first time"
+    inline={false}
+    height="758px"
+    args={{ scenarios: DEFAULT_PAYLOAD, runtimeOptions: { hasConfigurations: true } }}
     parameters={{
       controls: { disable: true },
+      storyshots: { disable: true },
       msw: [
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getEmptyConfigurationsByProjectIdResolver,
+        ),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId', notContentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
         rest.post('/api/events/documents', acceptedResolver),
         rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
         rest.get(
           '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
-          documentThumbnailResolver,
+          getDocumentsPdfThumbnailResolver,
         ),
       ],
     }}
-    height="100vh"
   >
-    {{
-      components: { PbAppointment },
-      created() {
-        this.$store.dispatch('appointmentQualification/loadScenarios', DEFAULT_PAYLOAD);
-      },
-      template: `  <div style="flex-direction: column;display: flex;place-content: flex-start;align-items: stretch;height: 100vh;">
-                     <pb-appointment  />
-                   </div>`,
-    }}
+    {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
 
 ## Appointment Recovery
 
+export const previousState = {
+  answers: PREVIOUS_CONTEXT.answers,
+  refreshSteps: true,
+  history: {
+    stepIndex: PREVIOUS_CONTEXT.stepIndex,
+    steps: PREVIOUS_CONTEXT.stepHistory,
+  },
+  currentStep: PREVIOUS_CONTEXT.currentStep,
+  displayedStep: PREVIOUS_CONTEXT.currentStep,
+};
+
 <Canvas>
   <Story
     name="Feature - Appointment Recovery"
+    inline={false}
+    height="758px"
+    args={{ scenarios: DEFAULT_PAYLOAD, runtimeOptions: { hasConfigurations: true }, previousState }}
     parameters={{
-      controls: { disabled: true },
+      controls: { disable: true },
+      storyshots: { disable: true },
       msw: [
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId', getProjectByIdResolver),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getEmptyConfigurationsByProjectIdResolver,
+        ),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId', notContentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
         rest.post('/api/events/documents', acceptedResolver),
         rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),
         rest.get(
           '/api/inhabitant-projects/:inhabitantProjectId/documents/:documentId/thumbnail',
-          documentThumbnailResolver,
+          getDocumentsPdfThumbnailResolver,
         ),
       ],
-      storyshots: { disable: true },
     }}
-    height="100vh"
   >
-    {{
-      components: { PbAppointment },
-      created() {
-        this.$store.dispatch('appointmentQualification/loadScenarios', SELECTED_SCENARIOS);
-      },
-      template: `  <div style="flex-direction: column;display: flex;place-content: flex-start;align-items: stretch;height: 100vh;">
-                     <pb-appointment />
-                   </div>`,
-    }}
+    {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
 
@@ -120,10 +152,9 @@ The `PbAppointment` component to make an appointment.
       components: { PbAppointment },
       created() {
         this.$store.commit('appointmentQualification/setCreateProjectError', 'Create project error');
-        this.$store.dispatch('appointmentQualification/loadScenarios', SELECTED_SCENARIOS);
       },
       template: `  <div style="flex-direction: column;display: flex;place-content: flex-start;align-items: stretch;height: 100vh;">
-                     <pb-appointment />
+                     <pb-appointment :scenarios="DEFAULT_PAYLOAD" />
                    </div>`,
     }}
   </Story>

package/src/components/appointment/PbAppointment.vue

@@ -12,7 +12,13 @@
       @loader-click="$store.dispatch('appointmentQualification/checkAppointmentQualification')"
     />
     <m-flex v-else full-width align-items="center" justify-content="center" direction="column">
-      <pb-scenario :scenarios="scenarios" min-height="100vh" @scenario-event="handleEvent"></pb-scenario>
+      <pb-scenario
+        :scenarios="scenarios"
+        :runtime-options="runtimeOptions"
+        :previous-state="previousState"
+        min-height="100vh"
+        @scenario-event="handleEvent"
+      />
     </m-flex>
   </m-flex>
 </template>
@@ -22,17 +28,44 @@ import PbScenario from '../scenario/PbScenario';
 import PbLoader from '../loader/PbLoader';
 import MFlex from '../mozaic/flex/MFlex';
 import { mapGetters } from 'vuex';
+
 export default {
   name: 'PbAppointment',
+
   components: { MFlex, PbScenario, PbLoader },
+
+  props: {
+    /**
+     * Defines the scenario object
+     */
+    scenarios: {
+      type: Object,
+      default: () => null,
+    },
+    /**
+     * Contains the scenario previous state for rehydration
+     */
+    previousState: {
+      type: Object,
+      default: () => null,
+    },
+    /**
+     * The options provided at runtime to customize component behaviour
+     */
+    runtimeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
   computed: {
     ...mapGetters('appointmentQualification', {
-      scenarios: 'getScenarios',
       isLoadingProject: 'isLoadingProject',
       createProjectError: 'getCreateProjectError',
       appointmentLinkedError: 'getAppointmentLinkedError',
     }),
   },
+
   methods: {
     handleEvent(data) {
       this.$emit('scenario-event', data);

package/src/components/appointment/appointmentQualification-default-payload.json

@@ -26,10 +26,18 @@
     {
       "code": "ITEM-2",
       "viewModel": {
-        "title": "Un plan aux mesures de votre pièce",
+        "title": "Un plan aux mesures de votre pièce (dessin, document, plan 3D…)",
         "image": "https://storage.googleapis.com/project-booster-media/vad/liste-etapes/picto_planner-plan_40.svg",
         "imageSize": "small"
       }
+    },
+    {
+      "code": "ITEM-3",
+      "viewModel": {
+        "title": "Des photos de votre cuisine",
+        "image": "https://storage.googleapis.com/project-booster-media/vad/picto_planner-penser_photo-small.svg",
+        "imageSize": "small"
+      }
     }
   ]
 }