project-booster-vue 9.9.0 → 9.10.0

package/package.json

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

package/src/components/mozaic/notifications/MNotification.stories.mdx

@@ -184,7 +184,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
           <m-notification title="success" type="success" />
           <m-notification title="warning" type="warning" />
           <m-notification title="danger" type="danger" />
-          <m-notification title="appointment" type="appointment" />
+          <m-notification title="appointment" is-big />
         </div>
       `,
     }}

package/src/components/mozaic/notifications/MNotification.vue

@@ -5,7 +5,7 @@
       class="m-notification"
       :class="`mc-notification mc-notification--${type} ${closable ? 'mc-notification-closable' : ''} ${
         floating ? 'mc-notification--floating' : ''
-      }`"
+      } ${isBig ? 'mc-notification--big' : ''}`"
       role="alert"
     >
       <!-- Add wrapper to prevent block formatting context creation and use margin collapse -->
@@ -35,7 +35,7 @@ import { defineComponent } from 'vue';
 import MLink from '../link/MLink.vue';
 
 export const M_NOTIFICATION_VALIDATOR = {
-  types: ['information', 'success', 'warning', 'danger', 'appointment'],
+  types: ['information', 'success', 'warning', 'danger'],
 };
 
 export default defineComponent({
@@ -112,6 +112,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * Indicates whether to use the big variant of the notification
+     */
+    isBig: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   methods: {
@@ -231,9 +238,7 @@ $responsive-breakpoint: 'm';
 @import 'pb-variables';
 @import 'components/c.notification';
 
-.mc-notification--appointment {
-  @include set-notification-type('success');
-
+.mc-notification--big {
   &.mc-notification .mc-notification__content {
     display: flex;
     flex-direction: column;

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

@@ -6,7 +6,9 @@ import { rest } from 'msw';
 import { successResolver, internalServerErrorResolver } from '../../../services/api/mocks/commonMock';
 import {
   getProjectByIdResolver,
-  getDoneAppointmentByIdResolver,
+  getPastAppointmentByIdResolver,
+  getCancelledAppointmentByIdResolver,
+  getCancelledAndPastAppointmentByIdResolver,
   getStoreAppointmentByIdResolver,
   getVisioAppointmentByIdResolver,
 } from '../../../services/api/mocks/projectsMock';
@@ -106,16 +108,52 @@ The `PbProjectHub` component to access your project.
   </Story>
 </Canvas>
 
-## Showcase with done appointment
+## Showcase with appointment in the past
 
 <Canvas>
   <Story
-    name="Showcase with done appointment"
+    name="Showcase with appointment in the past"
     parameters={{
       controls: { disable: true },
       msw: [
         rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
-        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getDoneAppointmentByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getPastAppointmentByIdResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Showcase with cancelled appointment
+
+<Canvas>
+  <Story
+    name="Showcase with cancelled appointment"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getCancelledAppointmentByIdResolver),
+      ],
+    }}
+    height="100vh"
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+## Showcase with cancelled appointment in the past
+
+<Canvas>
+  <Story
+    name="Showcase with cancelled appointment in the past"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getCancelledAndPastAppointmentByIdResolver),
       ],
     }}
     height="100vh"

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

@@ -63,29 +63,19 @@
                 <div class="pb-project-hub__section-content--loading-label">Chargement...</div>
               </m-flex>
               <m-flex
-                v-else-if="!isLoadingAppointment && !appointmentLoadError && !appointment.isPast"
+                v-else-if="!isLoadingAppointment && !appointmentLoadError"
                 direction="column"
                 align-items="center"
                 full-width
               >
                 <m-notification
                   class="pb-project-hub__appointment-notification"
-                  type="appointment"
-                  :title="appointment.appointmentDate"
-                  :text="
-                    readOnly
-                      ? ''
-                      : 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.'
-                  "
+                  :title="appointmentNotificationTitle"
+                  :type="appointmentNotificationType"
+                  :text="appointmentNotificationText"
+                  :link-label="appointmentNotificationLinkLabel"
                   @link-click="handleAppointmentLinkClick"
+                  is-big
                 />
               </m-flex>
             </m-flex>
@@ -1123,6 +1113,42 @@ export default defineComponent({
       }
       return `Client n° ${this.currentInhabitantId}`;
     },
+
+    appointmentNotificationType() {
+      return this.appointment.isPast ? 'info' : this.appointment.cancelled ? 'warning' : 'success';
+    },
+
+    appointmentNotificationTitle() {
+      const prefix = this.appointment.cancelled ? 'ANNULÉ - RDV' : 'RDV';
+      const appointmentDate = new Date(this.appointment.appointmentDate);
+      const appointmenDateLabel = `${appointmentDate.toLocaleDateString('fr-FR', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })} à ${appointmentDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`;
+      const appointmentTypeLabel = (<Record<string, string>>{
+        KITCHEN_IN_STORE: 'en magasin',
+        KITCHEN_REMOTE: 'en visio-conférence',
+      })[this.appointment.appointmentType];
+      return `${prefix} le ${appointmenDateLabel} ${appointmentTypeLabel}`;
+    },
+
+    appointmentNotificationText() {
+      return this.readOnly || (this.appointment.cancelled && !this.appointment.isPast)
+        ? ''
+        : this.appointment.isPast
+        ? 'Date du rendez-vous passée.'
+        : this.appointment.appointmentType === 'KITCHEN_IN_STORE'
+        ? 'N’oubliez pas !'
+        : "Retrouvez le lien d'accès à la visio-conférence dans le mail qui vous est envoyé. \n" + 'N’oubliez pas !';
+    },
+
+    appointmentNotificationLinkLabel() {
+      return this.readOnly || this.appointment.isPast || this.appointment.cancelled
+        ? ''
+        : 'Ajoutez des plans aux mesures de votre pièce et des photos pour bien préparer le rendez-vous.';
+    },
   },
 
   watch: {

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

@@ -235,21 +235,42 @@
     "groupId": 188921,
     "calendarId": 375614,
     "appointnmentId": 3200901,
-    "appointmentDate": "RDV le samedi 4 Décembre à 16h00 en magasin",
-    "isPast": false
+    "appointmentDate": "2022-08-23T13:30:00.00Z",
+    "isPast": false,
+    "appointmentType": "KITCHEN_IN_STORE"
   },
   "visioAppointment": {
     "groupId": 188921,
     "calendarId": 375614,
     "appointnmentId": 3200901,
-    "appointmentDate": "RDV le samedi 4 Décembre à 16h00 en visio-conférence",
-    "isPast": false
+    "appointmentDate": "2022-08-23T13:30:00.00Z",
+    "isPast": false,
+    "appointmentType": "KITCHEN_REMOTE"
   },
-  "doneAppointment": {
+  "pastAppointment": {
     "groupId": 188921,
     "calendarId": 375614,
     "appointnmentId": 3200901,
-    "appointmentDate": "RDV le samedi 4 Décembre à 16h00 en visio-conférence",
-    "isPast": true
+    "appointmentDate": "2022-08-23T13:30:00.00Z",
+    "isPast": true,
+    "appointmentType": "KITCHEN_REMOTE"
+  },
+  "cancelledAndPastAppointment": {
+    "groupId": 188921,
+    "calendarId": 375614,
+    "appointnmentId": 3200901,
+    "appointmentDate": "2022-08-23T13:30:00.00Z",
+    "isPast": true,
+    "cancelled": true,
+    "appointmentType": "KITCHEN_REMOTE"
+  },
+  "cancelledAppointment": {
+    "groupId": 188921,
+    "calendarId": 375614,
+    "appointnmentId": 3200901,
+    "appointmentDate": "2022-08-23T13:30:00.00Z",
+    "isPast": false,
+    "cancelled": true,
+    "appointmentType": "KITCHEN_REMOTE"
   }
 }

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

@@ -5,7 +5,9 @@ import {
   projectAttributes,
   storeAppointment,
   visioAppointment,
-  doneAppointment,
+  pastAppointment,
+  cancelledAppointment,
+  cancelledAndPastAppointment,
 } from './jsons/projects.json';
 
 export const getEmptyProjectsResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
@@ -72,6 +74,18 @@ export const getVisioAppointmentByIdResolver = (req: RestRequest, res: ResponseC
   return res(ctx.status(200), ctx.json(visioAppointment));
 };
 
-export const getDoneAppointmentByIdResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
-  return res(ctx.status(200), ctx.json(doneAppointment));
+export const getPastAppointmentByIdResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
+  return res(ctx.status(200), ctx.json(pastAppointment));
+};
+
+export const getCancelledAppointmentByIdResolver = (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
+  return res(ctx.status(200), ctx.json(cancelledAppointment));
+};
+
+export const getCancelledAndPastAppointmentByIdResolver = (
+  req: RestRequest,
+  res: ResponseComposition,
+  ctx: RestContext,
+) => {
+  return res(ctx.status(200), ctx.json(cancelledAndPastAppointment));
 };