project-booster-vue 9.5.0 → 9.6.0

package/package.json

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

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,12 +72,20 @@
                   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>
@@ -773,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';
@@ -1370,6 +1378,18 @@ export default defineComponent({
     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>

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) => {