project-booster-vue 9.4.0 → 9.7.0

package/package.json

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

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

@@ -0,0 +1,94 @@
+import { Story, Meta, ArgsTable, Canvas } from '@storybook/addon-docs';
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import PbAppointmentForm from './PbAppointmentForm';
+import appointmentQualificationStore from '../../stores/modules/appointmentQualificationStore';
+import inhabitantsStore from '../../stores/modules/inhabitantsStore';
+import { rest } from 'msw';
+import { useStore } from 'vuex';
+import { v4 as uuidv4 } from 'uuid';
+import { getInhabitantByIdResolver } from '../../services/api/mocks/inhabitantsMock';
+import { declarationsWithAppointmentResolver } from '../../services/api/mocks/appointmentQualificationMock';
+import SCENARIO from '../scenario/scenarii/appointment-qualification-kitchen.json';
+
+<Meta
+  title="Project Booster/Components/Appointment qualification/ PbAppointmentForm 🦠"
+  component={PbAppointmentForm}
+  argTypes={{}}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+  decorators={[
+    nestedAppDecorator(
+      {
+        modules: {
+          appointmentQualification: appointmentQualificationStore,
+          inhabitants: inhabitantsStore,
+        },
+        mutations: {
+          eventBusSendEvent(state, { code, payload }) {
+            console.log('event bus data : ', code, payload);
+          },
+        },
+        actions: {
+          sendEventToBus({ commit }, action) {
+            commit('eventBusSendEvent', action);
+          },
+        },
+      },
+      [],
+    ),
+  ]}
+/>
+
+# 🦠 `PbAppointmentForm` - Component
+
+The `PbAppointmentForm` component that include in a iframe the clicRDV form.
+
+export const TemplateSandbox = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PbAppointmentForm },
+  setup() {
+    const store = useStore();
+    store.dispatch('appointmentQualification/initSessions', {
+      formId: 'appointment-qualification-kitchen',
+      correlationId: uuidv4(),
+      businessUnit: '001',
+      source: 'APPOINTMENT_QUALIFICATION',
+      sourceDetail: 'KITCHEN',
+      calendarId: '375615',
+      storeId: '006',
+      appointmentQualificationFormStructure: SCENARIO,
+    });
+    store.commit('appointmentQualification/setCurrentAppointmentQualification', {
+      inhabitantProjectId: uuidv4(),
+      appointmentQualificationId: uuidv4(),
+    });
+    store.commit('inhabitants/setCurrentInhabitant', {
+      firstName: 'Jean',
+      lastName: 'Dupont',
+      email: 'jean.dupont@yopmail.com',
+    });
+    store.commit('appointmentQualification/setClicRDVBaseUrl', 'https://sandbox-user.clicrdv.com');
+    return { args };
+  },
+  template: `<pb-appointment-form />
+  />`,
+});
+
+<Canvas>
+  <Story
+    inline={false}
+    height="862px"
+    name="101 Sandbox"
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-api/users/:buId/:inhabitantId', getInhabitantByIdResolver),
+        rest.post('/api/declarations-without-appointment', declarationsWithAppointmentResolver),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="101 Sandbox" />

package/src/components/appointment/PbAppointmentForm.vue

@@ -0,0 +1,57 @@
+<template>
+  <m-flex class="pb-appointment-form__container">
+    <iframe v-if="appointmentFormUrl" :src="appointmentFormUrl" style="border: 0; min-height: 110rem; width: 100%">
+      <p>
+        Your browser doesn't support iframes. To book an appointment, please follow this link :
+        <a :href="appointmentFormUrl">{{ appointmentFormUrl }}</a>
+      </p>
+    </iframe>
+  </m-flex>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { useStore } from 'vuex';
+import MFlex from '../mozaic/flex/MFlex.vue';
+
+export default defineComponent({
+  name: 'PbAppointmentForm',
+  components: { MFlex },
+
+  setup() {
+    const store = useStore();
+
+    const appointmentFormUrl = computed(() => {
+      const sessions = store.getters['appointmentQualification/getSessions'];
+      const currentAppointmentQualification =
+        store.getters['appointmentQualification/getCurrentAppointmentQualification'];
+      const currentUser = store.getters['inhabitants/getCurrentInhabitant'];
+      const baseUrl = store.getters['appointmentQualification/getClicRDVBaseUrl'];
+
+      let url = `${baseUrl}{/leroy-merlin-${sessions.storeId}`;
+      url += `?calendar_id=${sessions.calendarId}`;
+      url += `&vevent[str5]=${currentAppointmentQualification.inhabitantProjectId}`;
+      url += `&fiche[email]=${currentUser.email}`;
+      url += `&fiche[lastname]=${currentUser.lastName}`;
+      url += `&fiche[firstname]=${currentUser.firstName}`;
+
+      return url;
+    });
+
+    return {
+      appointmentFormUrl,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'pb-variables';
+
+.pb-appointment-form {
+  &__container {
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+</style>

package/src/components/appointment/PbAppointmentStartSection.vue

@@ -1,7 +1,9 @@
 <template>
   <m-flex full-width class="pb-appointment-section">
     <m-flex align-items="center" full-width class="pb-appointment-section__content" direction="column">
-      <div class="pb-appointment-section__content-title">Gagnez du temps en préparant votre Rendez-vous</div>
+      <div class="pb-appointment-section__content-title">
+        {{ decorate(payload.viewModel.title, payload.defaultDecoratorValue) }}
+      </div>
       <m-flex
         justify-content="center"
         align-items="center"
@@ -50,6 +52,7 @@ import MFlex from '../mozaic/flex/MFlex.vue';
 import PbItemsList from '../items/PbItemsList.vue';
 import MButton from '../mozaic/buttons/MButton.vue';
 import { ScenarioStepAnswer, ScenarioStepPayload } from '@/types/pb/Scenario';
+import objectPath from 'object-path';
 
 export default defineComponent({
   name: 'PbAppointmentStartSection',
@@ -62,6 +65,20 @@ export default defineComponent({
       type: Object as PropType<ScenarioStepPayload>,
       default: () => null,
     },
+    /**
+     * The options provided at runtime to customize component behaviour
+     */
+    runtimeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    /**
+     * The previous answers to inject
+     */
+    answers: {
+      type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
+    },
   },
   methods: {
     selectAnswer(answer: ScenarioStepAnswer) {
@@ -70,6 +87,40 @@ export default defineComponent({
         nextStep: undefined,
       });
     },
+    decorate(valueToDecorate: string, defaultValue = '') {
+      if (valueToDecorate) {
+        valueToDecorate = `\`${valueToDecorate}\``;
+        try {
+          return this.doEval(valueToDecorate, defaultValue);
+        } catch (e) {
+          console.error(e);
+          return valueToDecorate;
+        }
+      }
+      return valueToDecorate;
+    },
+    decorateBoolean(valueToDecorate: string, defaultValue = false) {
+      if (valueToDecorate) {
+        return this.doEval(valueToDecorate, defaultValue);
+      }
+      return valueToDecorate;
+    },
+    doEval(valueToEval: string, defaultValue: string | boolean) {
+      return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
+        this,
+        this.getAnswerValue,
+        Object.fromEntries(this.answers),
+        defaultValue,
+        this.runtimeOptions,
+      );
+    },
+    getAnswerValue(answerCode: string, path: string) {
+      if (!this.answers.get(answerCode) || this.answers.get(answerCode)?.length === 0) {
+        return null;
+      }
+
+      return objectPath.get(this.answers.get(answerCode)?.at(0) as any, path);
+    },
   },
 });
 </script>

package/src/components/pedagogy/PbPedagogy.stories.mdx

@@ -2,7 +2,7 @@ import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '
 import DEFAULT_PAYLOAD from './default-payload';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import PbPedagogy from './PbPedagogy';
-import { pbPedagogyStore } from './PbPedagogyStore';
+import store from '../../stores/store';
 
 <Meta
   title="Project Booster/Components/Pedagogy/ PbPedagogy 🦠"
@@ -23,7 +23,7 @@ import { pbPedagogyStore } from './PbPedagogyStore';
   parameters={{
     layout: 'fullscreen',
   }}
-  decorators={[nestedAppDecorator(pbPedagogyStore, [])]}
+  decorators={[nestedAppDecorator(store, [])]}
 />
 
 # 🦠 `PbPedagogy` - Component

package/src/components/pedagogy/PbPedagogy.vue

@@ -4,10 +4,16 @@
       <m-icon class="pb-pedagogy__content-icon" :icon="payload.viewModel.icon" color="primary-01-500" size="xl" />
       <div class="pb-pedagogy__content-title">{{ payload.viewModel.title }}</div>
 
-      <div class="pb-pedagogy__content-description">
-        <m-icon :icon="IMAGE_SRC" />
-        <div class="pb-pedagogy__content-description-text" v-html="payload.viewModel.description" />
-      </div>
+      <m-flex class="pb-pedagogy__content-description" v-if="payload.viewModel.description" direction="column">
+        <div
+          class="pb-pedagogy__content-description-line"
+          v-for="(line, index) in payload.viewModel.description"
+          :key="index"
+        >
+          <m-icon :icon="line.icon" v-if="line.icon" />
+          <div class="pb-pedagogy__content-description-line-text" v-html="line.label" />
+        </div>
+      </m-flex>
       <m-button
         v-if="payload.viewModel.downloadButton"
         :theme="payload.viewModel.downloadButton.theme"
@@ -15,12 +21,20 @@
         class="pb-pedagogy__content-upload-button"
         @click="handleButtonLinkClicked"
       />
+      <m-button
+        v-if="payload.multiSelect"
+        theme="primary"
+        :label="payload.multiSelect.actions.VALIDATE.label"
+        class="pb-pedagogy__content-action-button"
+        @click="handleValidateClicked"
+      />
       <m-flex
         justify-content="center"
         align-items="center"
         full-width
         class="pb-pedagogy__content-cards"
         direction="column"
+        v-if="payload.cards"
       >
         <div class="pb-pedagogy__content-cards-title">Pour aller plus loin</div>
         <pb-cards-list :cards="payload.cards" @card-click="handleCardClick" />
@@ -35,6 +49,7 @@ import MButton from '../mozaic/buttons/MButton.vue';
 import MFlex from '../mozaic/flex/MFlex.vue';
 import MIcon from '../mozaic/icon/MIcon.vue';
 import PbCardsList from '../cards/PbCardsList.vue';
+import { mapGetters } from 'vuex';
 
 interface PedagogyCardViewmodel {
   url: string;
@@ -51,8 +66,6 @@ interface PedagogyCard {
   viewModel: PedagogyCardViewmodel;
 }
 
-const IMAGE_SRC = 'https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png';
-
 export default defineComponent({
   name: 'PbPedagogy',
   components: { PbCardsList, MButton, MIcon, MFlex },
@@ -66,9 +79,13 @@ export default defineComponent({
     },
   },
   data: () => ({
-    IMAGE_SRC,
     value: [],
   }),
+  computed: {
+    ...mapGetters('appointmentQualification', {
+      currentAppointmentQualification: 'getCurrentAppointmentQualification',
+    }),
+  },
   watch: {
     value(newValue) {
       const selectedCard = this.payload.cards.find((card: PedagogyCard) => card.value === newValue);
@@ -107,7 +124,18 @@ export default defineComponent({
           },
         },
       });
-      window.open(card.viewModel.url, '_blank');
+      const targetUrl = card.viewModel.url.replace(
+        '@@PB_PROJECT_ID_FILLER@@',
+        this.currentAppointmentQualification.inhabitantProjectId,
+      );
+      window.open(targetUrl, '_blank');
+    },
+
+    async handleValidateClicked() {
+      this.$emit('step-completed', {
+        answers: [],
+        nextStep: this.payload.multiSelect.actions.VALIDATE.nextStep,
+      });
     },
   },
 });
@@ -154,7 +182,7 @@ $responsive-breakpoint: 'm';
       min-height: $mu400;
     }
 
-    &-description {
+    &-description-line {
       align-items: center;
       display: flex;
       flex-direction: column;
@@ -185,6 +213,10 @@ $responsive-breakpoint: 'm';
       margin-top: $mu200;
     }
 
+    &-action-button {
+      margin-top: $mu200;
+    }
+
     &-cards {
       margin-top: $mu200;
 

package/src/components/pedagogy/default-payload.json

@@ -2,7 +2,12 @@
   "viewModel": {
     "title": "Un email de rappel pour préparer votre RDV vous sera envoyé",
     "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/mail_80.svg",
-    "description": " Les mesures et &nbsp; <span class='pb-pedagogy__content-description-bold'> plans de votre pièce </span> &nbsp; sont importants pour le rendez-vous. Ils\n          permettront à votre conseiller de créer un &nbsp; <span class='pb-pedagogy__content-description-bold'> plan 3D adapté </span> &nbsp; à votre cuisine.\n          <span class='pb-pedagogy__content-description-bold'> Vous pouvez les ajouter à partir à partir du mail que vous avez reçu. </span>",
+    "description": [
+      {
+        "label": "Les mesures et &nbsp; <span class='pb-pedagogy__content-description-bold'> plans de votre pièce </span> &nbsp; sont importants pour le rendez-vous. Ils\n          permettront à votre conseiller de créer un &nbsp; <span class='pb-pedagogy__content-description-bold'> plan 3D adapté </span> &nbsp; à votre cuisine.\n          <span class='pb-pedagogy__content-description-bold'> Vous pouvez les ajouter à partir à partir du mail que vous avez reçu. </span>",
+        "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
+      }
+    ],
     "downloadButton": {
       "label": "Comment faire son plan ? (PDF)",
       "theme": "bordered",

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/components/question/PbQuestion.vue

@@ -297,7 +297,7 @@ export default defineComponent({
   props: {
     /**
      * The component view model and business data as an object. The provided prop
-     * is merged with the default payload value so only overriden values will change
+     * is merged with the default payload value so only overridden values will change
      * from the default ones.
      */
     payload: {
@@ -320,7 +320,7 @@ export default defineComponent({
       default: true,
     },
     /**
-     * Name for the event to send when the step is questio is answered
+     * Name for the event to send when the step is question is answered
      */
     completedEventName: {
       type: String,
@@ -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/question/list-select/PbListSelect.vue

@@ -44,7 +44,7 @@
             justify-content="center"
           >
             <m-button
-              v-if="payload.skippable && !hasSelectedAnswers"
+              v-if="payload.skippable && (!hasSelectedAnswers || payload.viewModel.alwaysDisplaySkippable)"
               class="pb-list-select__next-button"
               :label="payload.skippable.label"
               :left-icon="payload.skippable.leftIcon"