project-booster-vue 9.3.1 → 9.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.3.1",
+  "version": "9.6.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -81,21 +81,21 @@
     "@mswjs/interceptors": "0.12.7",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@storybook/addon-a11y": "6.4.21",
-    "@storybook/addon-essentials": "6.4.21",
+    "@storybook/addon-a11y": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.4.21",
+    "@storybook/addon-links": "6.4.22",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.21",
-    "@storybook/addon-storyshots-puppeteer": "6.4.21",
-    "@storybook/addon-storysource": "6.4.21",
-    "@storybook/addons": "6.4.21",
-    "@storybook/builder-webpack5": "6.4.21",
-    "@storybook/manager-webpack5": "6.4.21",
-    "@storybook/source-loader": "6.4.21",
+    "@storybook/addon-storyshots": "6.4.22",
+    "@storybook/addon-storyshots-puppeteer": "6.4.22",
+    "@storybook/addon-storysource": "6.4.22",
+    "@storybook/addons": "6.4.22",
+    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/source-loader": "6.4.22",
     "@storybook/storybook-deployer": "2.8.11",
-    "@storybook/theming": "6.4.21",
-    "@storybook/vue3": "6.4.21",
+    "@storybook/theming": "6.4.22",
+    "@storybook/vue3": "6.4.22",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/vue": "6.5.1",
     "@types/axios": "0.14.0",
@@ -147,7 +147,7 @@
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-mdx": "1.16.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-storybook": "0.5.8",
+    "eslint-plugin-storybook": "0.5.10",
     "eslint-plugin-vue": "7.11.1",
     "fluent-json-schema": "3.0.1",
     "husky": "6.0.0",

package/src/components/media/upload/document-upload-payload.json

@@ -25,9 +25,14 @@
           "label": "Un plan d’architecte"
         },
         {
-          "type": "PLAN",
-          "subtype": "KITCHEN_DESIGNER_PLAN",
-          "label": "Un plan d’un autre cuisiniste"
+          "type": "PHOTO",
+          "subtype": "ANY",
+          "label": "Une photo"
+        },
+        {
+          "type": "OTHER",
+          "subtype": "ANY",
+          "label": "Autre"
         }
       ]
     }

package/src/components/projects/project-hub/PbProjectHub-Features-Appointment.stories.mdx

@@ -7,7 +7,8 @@ import { successResolver, internalServerErrorResolver } from '../../../services/
 import {
   getProjectByIdResolver,
   getDoneAppointmentByIdResolver,
-  getAppointmentByIdResolver,
+  getStoreAppointmentByIdResolver,
+  getVisioAppointmentByIdResolver,
 } from '../../../services/api/mocks/projectsMock';
 
 <Meta
@@ -54,12 +55,28 @@ The `PbProjectHub` component to access your project.
 
 <Canvas>
   <Story
-    name="Showcase with appointment"
+    name="Showcase with store appointment"
     parameters={{
       controls: { disable: true },
       msw: [
         rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
-        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getAppointmentByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getStoreAppointmentByIdResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Showcase with visio appointment"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getVisioAppointmentByIdResolver),
       ],
     }}
     height="100vh"
@@ -77,7 +94,7 @@ The `PbProjectHub` component to access your project.
       controls: { disable: true },
       msw: [
         rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
-        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getAppointmentByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getStoreAppointmentByIdResolver),
       ],
     }}
     args={{

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

@@ -72,18 +72,36 @@
                   class="pb-project-hub__appointment-notification"
                   type="appointment"
                   :title="appointment.appointmentDate"
-                  :link-label="readOnly ? '' : 'Préparez votre rendez-vous !'"
-                  :link-href="
+                  :text="
                     readOnly
                       ? ''
-                      : `/projets/preparation-rendez-vous/cuisine.html?appointmentId=${appointment.appointmentId}&groupId=${appointment.groupId}&calendarId=${appointment.calendarId}&leadSourceDetail=Project_Space`
+                      : appointment.appointmentDate.endsWith('en magasin')
+                      ? 'N’oubliez pas !'
+                      : 'Retrouvez le lien d\'accès à la visio-conférence dans le mail qui vous est envoyé. \n' +
+                        'N’oubliez pas !'
                   "
+                  :link-label="
+                    readOnly
+                      ? ''
+                      : 'Ajoutez des plans aux mesures de votre pièce et des photos pour bien préparer le rendez-vous.'
+                  "
+                  @link-click="handleAppointmentLinkClick"
                 />
               </m-flex>
             </m-flex>
             <m-flex v-if="isDocumentsDisplayed" class="pb-project-hub__section" direction="column" full-width>
               <div class="pb-project-hub__section-header">
-                <div class="pb-project-hub__section-title">{{ titleDocument }}</div>
+                <div class="pb-project-hub__section-title-container">
+                  <div class="pb-project-hub__section-title">{{ titleDocument }}</div>
+                  <pb-media-upload
+                    v-if="displayedDocuments && displayedDocuments.length > 0"
+                    storeModuleName="documents"
+                    :payload="DOCUMENT_UPLOAD_PAYLOAD"
+                    acceptedFileTypes="image jpeg, image png, image heif, image heic, image/heif-sequence, image/heic-sequence, application
+                pdf"
+                    @media-uploaded="handleDocumentUploaded"
+                  />
+                </div>
               </div>
               <div class="pb-project-hub__section-content">
                 <m-flex
@@ -383,7 +401,15 @@
             </m-flex>
             <m-flex v-if="isMediaDisplayed" class="pb-project-hub__section" direction="column" full-width>
               <div class="pb-project-hub__section-header">
-                <div class="pb-project-hub__section-title">{{ titlePhotoInspiration }}</div>
+                <div class="pb-project-hub__section-title-container">
+                  <div class="pb-project-hub__section-title">{{ titlePhotoInspiration }}</div>
+                  <pb-media-upload
+                    v-if="displayedInspirations && displayedInspirations.length > 0"
+                    storeModuleName="documents"
+                    :payload="MEDIA_UPLOAD_PAYLOAD"
+                    @media-uploaded="handleMediaUploaded"
+                  />
+                </div>
               </div>
               <div class="pb-project-hub__section-content">
                 <m-flex
@@ -755,7 +781,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 import { format } from 'date-fns';
 import Velocity from 'velocity-animate';
 import { mapGetters } from 'vuex';
@@ -789,6 +815,9 @@ import { Tool } from '@/types/pb/Tool';
 import { Configuration } from '@/types/pb/Configuration';
 import { Estimate } from '@/types/pb/Estimate';
 import { Task } from '@/types/pb/Task';
+import PbMediaUpload from '@/components/media/upload/PbMediaUpload.vue';
+import DOCUMENT_UPLOAD_PAYLOAD from '@/components/media/upload/document-upload-payload.json';
+import MEDIA_UPLOAD_PAYLOAD from '@/components/media/upload/media-upload-payload.json';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -830,6 +859,7 @@ export default defineComponent({
   name: 'PbProjectHub',
 
   components: {
+    PbMediaUpload,
     MAccordion,
     MButton,
     MContainer,
@@ -917,6 +947,8 @@ export default defineComponent({
     showMoreButtonAnimationDelay: 0,
     BACK_ICON,
     TASK_MODEL,
+    DOCUMENT_UPLOAD_PAYLOAD,
+    MEDIA_UPLOAD_PAYLOAD,
     displayCategoriesDialog: false,
   }),
 
@@ -1338,6 +1370,26 @@ export default defineComponent({
         behavior: 'smooth',
       });
     },
+
+    handleDocumentUploaded() {
+      this.$store.dispatch('documents/refreshMediaList');
+    },
+
+    handleMediaUploaded() {
+      this.$store.dispatch('media/refreshMediaList');
+    },
+
+    handleAppointmentLinkClick() {
+      this.$store.dispatch('sendEventToBus', {
+        code: 'appointmentLinkClicked',
+        payload: this.project.id,
+      });
+      nextTick(() => {
+        (<any>(
+          window
+        )).location = `/projets/preparation-rendez-vous/cuisine.html?inhabitantProjectId=${this.project.id}&appointmentId=${this.appointment.appointmentId}&groupId=${this.appointment.groupId}&calendarId=${this.appointment.calendarId}&leadSourceDetail=Project_Space`;
+      });
+    },
   },
 });
 </script>
@@ -1403,6 +1455,11 @@ $appear-duration: 100ms;
 
     &-header {
       padding-bottom: $mu150;
+      width: 100%;
+    }
+
+    &-title-container {
+      display: flex;
     }
 
     &-title {
@@ -1410,6 +1467,7 @@ $appear-duration: 100ms;
       @include set-font-scale('07', 'm');
 
       color: $color-grey-800;
+      flex-grow: 1;
     }
 
     &-subtitle {

package/src/components/question/PbQuestion.vue

@@ -432,14 +432,13 @@ export default defineComponent({
         const questionPossibleAnswer = this.questionPossibleAnswers.get(answerCode);
         if (
           questionPossibleAnswer &&
-          (questionPossibleAnswer?.selected ||
-            answerValues.findIndex(
-              (answer: ScenarioStepAnswer | string) =>
-                (typeof answer === 'string' && answer === answerCode) ||
-                (typeof answer === 'object' &&
-                  (<ScenarioStepAnswer>answer)?.code === answerCode &&
-                  (<ScenarioStepAnswer>answer)?.selected),
-            ) >= 0) &&
+          answerValues.findIndex(
+            (answer: ScenarioStepAnswer | string) =>
+              (typeof answer === 'string' && answer === answerCode) ||
+              (typeof answer === 'object' &&
+                (<ScenarioStepAnswer>answer)?.code === answerCode &&
+                (<ScenarioStepAnswer>answer)?.selected),
+          ) >= 0 &&
           areConditionsValid(questionPossibleAnswer.conditions!, this.answers, this.runtimeOptions)
         ) {
           this.selectedAnswers.set(answerCode, true);
@@ -499,10 +498,9 @@ export default defineComponent({
       if (!this.payload.multiSelect) {
         this.initAnswersSelectedState(this.payload.answers);
       }
-      answer.selected = !answer.selected;
 
       if (this.payload.multiSelect) {
-        this.selectedAnswers.set(answer.code, answer.selected);
+        this.selectedAnswers.set(answer.code, !this.selectedAnswers.get(answer.code) ?? true);
 
         const selected = Object.fromEntries(Object.entries(this.selectedAnswers).filter(([, value]) => value === true));
         /**
@@ -514,7 +512,7 @@ export default defineComponent({
         Object.keys(Object.fromEntries(this.selectedAnswers)).forEach((answerCode) => {
           this.selectedAnswers.set(answerCode, false);
         });
-        this.selectedAnswers.set(answer.code, answer.selected);
+        this.selectedAnswers.set(answer.code, !this.selectedAnswers.get(answer.code) ?? true);
 
         /**
          * Emitted when step is completed

package/src/components/scenario/PbScenario.vue

@@ -289,7 +289,12 @@ export default defineComponent({
       let stepIndex = state.value.history.stepIndex - 1;
 
       const steps = state.value.history.steps ?? [];
-      while (stepIndex > 0 && steps[stepIndex - 1].step.type !== 'STEP') {
+      while (
+        stepIndex > 0 &&
+        steps[stepIndex - 1] &&
+        steps[stepIndex - 1].step &&
+        steps[stepIndex - 1].step.type !== 'STEP'
+      ) {
         stepIndex--;
       }
 
@@ -356,7 +361,13 @@ export default defineComponent({
       }
     };
     const goToStep = (stepIndex: number) => {
-      let requestedStep = state.value.history?.steps?.[stepIndex - 1];
+      let requestedStep = state.value.history?.steps ? state.value.history.steps[stepIndex - 1] : undefined;
+
+      if (!requestedStep) {
+        requestedStep = state.value.history?.steps
+          ? state.value.history.steps[state.value.history.stepIndex - 1]
+          : undefined;
+      }
 
       if (requestedStep) {
         if (requestedStep.step.resetAnswersOnBack) {

package/src/services/api/mocks/jsons/projects.json

@@ -231,7 +231,14 @@
       }
     }
   },
-  "appointment": {
+  "storeAppointment": {
+    "groupId": 188921,
+    "calendarId": 375614,
+    "appointnmentId": 3200901,
+    "appointmentDate": "RDV le samedi 4 Décembre à 16h00 en magasin",
+    "isPast": false
+  },
+  "visioAppointment": {
     "groupId": 188921,
     "calendarId": 375614,
     "appointnmentId": 3200901,

package/src/services/api/mocks/projectsMock.ts

@@ -1,5 +1,12 @@
 import { RestRequest, ResponseComposition, RestContext } from 'msw';
-import { projectsEmpty, projects, projectAttributes, appointment, doneAppointment } from './jsons/projects.json';
+import {
+  projectsEmpty,
+  projects,
+  projectAttributes,
+  storeAppointment,
+  visioAppointment,
+  doneAppointment,
+} from './jsons/projects.json';
 
 export const getEmptyProjectsResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
   return res(
@@ -57,8 +64,12 @@ export const getProjectAttributesByIdResolver = (req: RestRequest, res: Response
   return res(ctx.status(200), ctx.json(projectAttributes));
 };
 
-export const getAppointmentByIdResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
-  return res(ctx.status(200), ctx.json(appointment));
+export const getStoreAppointmentByIdResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
+  return res(ctx.status(200), ctx.json(storeAppointment));
+};
+
+export const getVisioAppointmentByIdResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
+  return res(ctx.status(200), ctx.json(visioAppointment));
 };
 
 export const getDoneAppointmentByIdResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {