project-booster-vue 9.6.0 → 9.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.6.0",
+  "version": "9.8.1",
   "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/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,

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"

package/src/components/scenario/{PbScenario-Features-Test.stories.mdx → PbScenario-Features-Appointment.stories.mdx}

@@ -1,8 +1,9 @@
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
-import { Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import { Story, Meta, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
 import PbScenario from './PbScenario';
 import DEFAULT_PAYLOAD from './scenarii/appointment-qualification-kitchen.json';
 import store from '../../stores/store';
+import { v4 as uuidv4 } from 'uuid';
 import { useStore } from 'vuex';
 import { rest } from 'msw';
 import {
@@ -17,6 +18,7 @@ import {
   getDocumentsImageFileResolver,
   uploadDocumentResolver,
 } from '../../services/api/mocks/documentsMock';
+import { getInhabitantByIdResolver } from '../../services/api/mocks/inhabitantsMock.ts';
 
 <Meta
   title="Project Booster/Scenario/PbScenario 🦠/ VAD"
@@ -60,10 +62,24 @@ export const TemplateSandbox = (args, { argTypes }) => {
     components: { PbScenario },
     setup() {
       const store = useStore();
+      store.dispatch('documentsPlans/updateContext', { type: 'DOCUMENT', subType: 'PLAN' });
+      store.dispatch('documentsPictures/updateContext', { type: 'DOCUMENT', subType: 'PHOTO' });
       store.dispatch('projects/loadProject', '001');
       store.dispatch('configurations/loadConfigurations', '001');
       store.dispatch('configurations/defineConfiguratorTypes', [DEFAULT_PAYLOAD.__START__.meta.configuratorType]);
       store.dispatch('configurations/searchConfigurations', '001');
+      store.dispatch('inhabitants/loadInhabitant', '123456');
+      store.dispatch('appointmentQualification/loadClicRDVBaseUrl');
+      store.dispatch('appointmentQualification/initSessions', {
+        formId: 'appointment-qualification-kitchen',
+        correlationId: uuidv4(),
+        businessUnit: '001',
+        source: 'APPOINTMENT_QUALIFICATION',
+        sourceDetail: 'KITCHEN',
+        calendarId: '375615',
+        storeId: '006',
+        appointmentQualificationFormStructure: DEFAULT_PAYLOAD,
+      });
       return { args };
     },
     template: `<div style="height: 64px; width: 100%; background-color: lightblue">HEADER</div>
@@ -83,7 +99,10 @@ export const TemplateSandbox = (args, { argTypes }) => {
     name="101 Sandbox"
     inline={false}
     height="758px"
-    args={{ scenarios: DEFAULT_PAYLOAD, runtimeOptions: { hasConfigurations: true } }}
+    args={{
+      scenarios: DEFAULT_PAYLOAD,
+      runtimeOptions: { hasConfigurations: true, postQualificationAppointment: true },
+    }}
     parameters={{
       storyshots: { disable: true },
       msw: [
@@ -118,7 +137,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
     name="Without simulations"
     inline={false}
     height="758px"
-    args={{ scenarios: DEFAULT_PAYLOAD }}
+    args={{ scenarios: DEFAULT_PAYLOAD, runtimeOptions: { postQualificationAppointment: true } }}
     parameters={{
       storyshots: { disable: true },
       msw: [
@@ -140,6 +159,43 @@ Simple scenario used in this demo:
 
 <Source language="json" code={JSON.stringify(DEFAULT_PAYLOAD, null, '  ')} />
 
+# qualification before appointment
+
+<Canvas>
+  <Story
+    name="Qualification before appointment"
+    inline={false}
+    height="758px"
+    args={{
+      scenarios: DEFAULT_PAYLOAD,
+      runtimeOptions: { hasConfigurations: true, postQualificationAppointment: false },
+    }}
+    parameters={{
+      storyshots: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId', getProjectByIdResolver),
+        rest.get('/api/inhabitant-api/users/:buId/:inhabitantId', getInhabitantByIdResolver),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getEmptyConfigurationsByProjectIdResolver,
+        ),
+        rest.post('/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId', notContentResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.get(
+          '/api/inhabitant-projects/:projectId/documents/:documentId/thumbnail',
+          getDocumentsImageThumbnailResolver,
+        ),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
 ## Scenario-event payload
 
 A event emitted has a `code`, `payload` and `context`. The `payload` depends on the `code`.

package/src/components/scenario/PbScenario.vue

@@ -86,6 +86,7 @@ import { useRouter, useRoute } from 'vue-router';
 import MFlex from '../mozaic/flex/MFlex.vue';
 import PbAmountInput from '../question/amount-input/PbAmountInput.vue';
 import PbAppointmentStartSection from '../appointment/PbAppointmentStartSection.vue';
+import PbAppointmentForm from '../appointment/PbAppointmentForm.vue';
 import PbDimensionsInput from '../question/dimensions-input/PbDimensionsInput.vue';
 import PbListSelect from '../question/list-select/PbListSelect.vue';
 import PbLoginRedirect from '../question/login-redirect/PbLoginRedirect.vue';
@@ -133,6 +134,7 @@ export default defineComponent({
     PbSpaceInput,
     PbUploadDocument,
     PbConfigurationsImport,
+    PbAppointmentForm,
   },
 
   props: {

package/src/components/scenario/scenarii/appointment-qualification-kitchen.json

@@ -24,6 +24,9 @@
     "type": "STEP",
     "component": "PbAppointmentStartSection",
     "payload": {
+      "viewModel": {
+        "title": "${runtimeOptions.postQualificationAppointment === false ? 'Gagnez du temps en préparant votre rendez-vous' : 'Préparez votre Rendez-vous.'}"
+      },
       "answers": {
         "CONTINUE": {
           "code": "CONTINUE",
@@ -75,14 +78,116 @@
           }
         },
         {
-          "conditions": ["isAnswerMatching('START_SCENARIO', 'LATER')"],
+          "conditions": [
+            "isAnswerMatching('START_SCENARIO', 'LATER') && runtimeOptions.postQualificationAppointment === true"
+          ],
           "nextStep": {
             "code": "START_LATER"
           }
+        },
+        {
+          "conditions": [
+            "isAnswerMatching('START_SCENARIO', 'LATER') && runtimeOptions.postQualificationAppointment === false"
+          ],
+          "nextStep": {
+            "code": "LMFR_QUESTION_QUALIFICATION_EXIT"
+          }
         }
       ]
     }
   },
+  "LMFR_QUESTION_QUALIFICATION_EXIT": {
+    "code": "LMFR_QUESTION_QUALIFICATION_EXIT",
+    "type": "STEP",
+    "component": "PbListSelect",
+    "payload": {
+      "viewModel": {
+        "label": "Pouvez-vous nous dire pourquoi vous souhaitez préparer votre RDV plus tard ?",
+        "backLabel": "Question précédente",
+        "separator": true,
+        "padding": true,
+        "actionLabel": "Continuer",
+        "sortBy": {
+          "type": ["numeric"],
+          "order": ["Asc"],
+          "path": ["meta.ranking"]
+        }
+      },
+      "answers": {
+        "NOT_UNDERSTOOD": {
+          "code": "NOT_UNDERSTOOD",
+          "viewModel": {
+            "title": "Je n’ai pas compris ce qu’on attend de moi"
+          },
+          "meta": {
+            "ranking": 1
+          }
+        },
+        "NO_PLAN": {
+          "code": "NO_PLAN",
+          "viewModel": {
+            "title": "Je n'ai pas de plan"
+          },
+          "meta": {
+            "ranking": 2
+          }
+        },
+        "PROJECT_UNDEFINED": {
+          "code": "PROJECT_UNDEFINED",
+          "viewModel": {
+            "title": "Mon projet n’est pas clair pour le moment"
+          },
+          "meta": {
+            "ranking": 3
+          }
+        },
+        "PROJECT_STORE": {
+          "code": "PROJECT_STORE",
+          "viewModel": {
+            "title": "Je préfère me déplacer directement en magasin"
+          },
+          "meta": {
+            "ranking": 4
+          }
+        },
+        "OTHER": {
+          "code": "OTHER",
+          "customizeValue": true,
+          "viewModel": {
+            "title": "Autre"
+          },
+          "meta": {
+            "ranking": 5
+          }
+        }
+      }
+    },
+    "nextStep": {
+      "code": "LMFR_QUESTION_QUALIFICATION_EXIT_CONFIRMATION"
+    }
+  },
+  "LMFR_QUESTION_QUALIFICATION_EXIT_CONFIRMATION": {
+    "code": "LMFR_QUESTION_QUALIFICATION_EXIT_CONFIRMATION",
+    "type": "STEP",
+    "component": "PbPedagogy",
+    "payload": {
+      "code": "LMFR_QUESTION_QUALIFICATION_EXIT_CONFIRMATION",
+      "viewModel": {
+        "title": "Merci pour votre réponse",
+        "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg"
+      },
+      "multiSelect": {
+        "actions": {
+          "VALIDATE": {
+            "label": "Continuer et prendre RDV",
+            "nextStep": {
+              "code": "APPOINTMENT_FORM"
+            }
+          }
+        }
+      }
+    }
+  },
   "LMFR_QUESTION_SCENARIO": {
     "code": "LMFR_QUESTION_SCENARIO",
     "type": "SCENARIO",
@@ -441,7 +546,20 @@
             "image": "https://storage.googleapis.com/project-booster-media/vad/plans/noplan-later.jpg"
           },
           "nextStep": {
-            "code": "__END__"
+            "conditionals": [
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                "nextStep": {
+                  "code": "__END__"
+                }
+              },
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === false"],
+                "nextStep": {
+                  "code": "PROJECT_UPDATED"
+                }
+              }
+            ]
           }
         }
       }
@@ -466,7 +584,7 @@
     "component": "PbQuestion",
     "payload": {
       "viewModel": {
-        "label": "${answers.LMFR_QUESTION_PLAN[0].code === 'HAVE_PLAN' ? 'Sur votre plan, vérifiez que vous avez les bonnes mesures :' : 'Réalisez rapidement un plan avec les mesures de votre pièce en 3 étapes'}",
+        "label": "${${answers.LMFR_QUESTION_PLAN[0].code === 'HAVE_PLAN' ? 'Sur votre plan, vérifiez que vous avez les bonnes mesures :' : 'Réalisez rapidement un plan avec les mesures de votre pièce en 3 étapes'}",
         "subtitle": "${answers.LMFR_QUESTION_PLAN[0].code === 'HAVE_PLAN' ? 'Votre conseiller aura besoin de ces mesures pour créer votre plan de cuisine en 3D.' : 'Sur une feuille, dessinez la pièce et reportez les bonnes mesures, prenez une photo du plan et ajoutez la.'}",
         "widthFromL": "1of3",
         "forceOneCardPerLineOnMobile": true,
@@ -486,7 +604,20 @@
           "width": "full",
           "widthFromM": "fit",
           "nextStep": {
-            "code": "ADD_PLAN_LATER"
+            "conditionals": [
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                "nextStep": {
+                  "code": "START_LATER"
+                }
+              },
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === false"],
+                "nextStep": {
+                  "code": "PROJECT_UPDATED"
+                }
+              }
+            ]
           }
         },
         {
@@ -602,7 +733,20 @@
           "width": "full",
           "widthFromM": "fit",
           "nextStep": {
-            "code": "ADD_PLAN_LATER"
+            "conditionals": [
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                "nextStep": {
+                  "code": "START_LATER"
+                }
+              },
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === false"],
+                "nextStep": {
+                  "code": "PROJECT_UPDATED"
+                }
+              }
+            ]
           }
         }
       ],
@@ -652,7 +796,20 @@
           "width": "full",
           "widthFromM": "fit",
           "nextStep": {
-            "code": "__END__"
+            "conditionals": [
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                "nextStep": {
+                  "code": "__END__"
+                }
+              },
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === false"],
+                "nextStep": {
+                  "code": "PROJECT_UPDATED"
+                }
+              }
+            ]
           }
         },
         {
@@ -739,7 +896,20 @@
           "width": "full",
           "widthFromM": "fit",
           "nextStep": {
-            "code": "__END__"
+            "conditionals": [
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                "nextStep": {
+                  "code": "__END__"
+                }
+              },
+              {
+                "conditions": ["runtimeOptions.postQualificationAppointment === false"],
+                "nextStep": {
+                  "code": "PROJECT_UPDATED"
+                }
+              }
+            ]
           }
         }
       ],
@@ -748,7 +918,20 @@
           "VALIDATE": {
             "label": "Continuer",
             "nextStep": {
-              "code": "__END__"
+              "conditionals": [
+                {
+                  "conditions": ["runtimeOptions.postQualificationAppointment === true"],
+                  "nextStep": {
+                    "code": "__END__"
+                  }
+                },
+                {
+                  "conditions": ["runtimeOptions.postQualificationAppointment === false"],
+                  "nextStep": {
+                    "code": "PROJECT_UPDATED"
+                  }
+                }
+              ]
             }
           }
         }
@@ -764,29 +947,33 @@
       }
     }
   },
-  "ADD_PLAN_LATER": {
-    "code": "ADD_PLAN_LATER",
+  "START_LATER": {
+    "code": "START_LATER",
     "type": "STEP",
     "component": "PbPedagogy",
     "payload": {
-      "code": "ADD_PLAN_LATER",
+      "code": "START_LATER",
       "viewModel": {
-        "title": "Retrouvez le lien pour ajouter un plan dans le mail de confirmation du RDV",
+        "title": "Retrouvez le lien pour continuer la préparation de votre RDV dans le mail de confirmation du RDV",
         "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/mail_80.svg",
-        "description": "N’oubliez pas d’ajouter un plan avec les mesures de votre pièce. Votre conseiller à besoin de ces informations pour la conception de votre cuisine en 3D.",
-        "downloadButton": {
-          "label": "Télécharger le guide pour faire votre plan",
-          "theme": "bordered",
-          "href": "https://storage.googleapis.com/project-booster-media/vad/PDF/Plan_Prise-de-mesure_Leroy-Merlin.pdf"
-        }
+        "description": [
+          {
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png",
+            "label": "Retrouvez votre projet dans votre compte Leroy Merlin, vous pourrez encore ajouter des plans et photos."
+          },
+          {
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png",
+            "label": "Votre conseiller a accès à vos plans et informations utiles pour le rendez-vous."
+          }
+        ]
       },
       "cards": [
         {
-          "code": "Estimer votre budget cuisine en quelques clics",
+          "code": "Retrouver mon projet dans mon compte Leroy Merlin",
           "viewModel": {
-            "url": "https://www.leroymerlin.fr/estimez-le-cout-de-votre-prochaine-cuisine.html?leadSource=Appointment_Qualification&leadSourceDetail=Cuisine",
-            "image": "https://media.leroymerlin.fr/Capture/37/bc/a121f7e74212ad2d356fd3cf2c8a/estimer-mon-budget-cuisine5e5d20ae063b330009a4a372.jpg?width=500&auto=webp&crop=16:9",
-            "title": "Estimer votre budget cuisine en quelques clics",
+            "url": "https://www.leroymerlin.fr/espace-perso/espace-projets.html#/projects/@@PB_PROJECT_ID_FILLER@@",
+            "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/Qualif-RDV-VAD-%20Conseiller-de-vente.png",
+            "title": "Retrouver mon projet dans mon compte Leroy Merlin",
             "width": "full",
             "widthFromM": "1of3",
             "widthFromL": "1of3"
@@ -816,62 +1003,45 @@
           }
         }
       ]
-    },
-    "slots": {
-      "stickyTop": {
-        "display": false
-      }
     }
   },
-  "START_LATER": {
-    "code": "START_LATER",
+  "PROJECT_UPDATED": {
+    "code": "PROJECT_UPDATED",
     "type": "STEP",
     "component": "PbPedagogy",
     "payload": {
-      "code": "START_LATER",
+      "code": "PROJECT_UPDATED",
       "viewModel": {
-        "title": "Retrouvez le lien pour continuer la préparation de votre RDV dans le mail de confirmation du RDV",
-        "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/mail_80.svg",
-        "description": "N’oubliez pas de poursuivre la préparation de votre RDV. Votre conseiller à besoin de ces informations pour la conception de votre cuisine en 3D"
-      },
-      "cards": [
-        {
-          "code": "Estimer votre budget cuisine en quelques clics",
-          "viewModel": {
-            "url": "https://www.leroymerlin.fr/estimez-le-cout-de-votre-prochaine-cuisine.html?leadSource=Appointment_Qualification&leadSourceDetail=Cuisine",
-            "image": "https://media.leroymerlin.fr/Capture/37/bc/a121f7e74212ad2d356fd3cf2c8a/estimer-mon-budget-cuisine5e5d20ae063b330009a4a372.jpg?width=500&auto=webp&crop=16:9",
-            "title": "Estimer votre budget cuisine en quelques clics",
-            "width": "full",
-            "widthFromM": "1of3",
-            "widthFromL": "1of3"
-          }
-        },
-        {
-          "code": "Découvrir nos gammes de cuisines",
-          "viewModel": {
-            "url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
-            "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg",
-            "title": "Découvrir nos gammes de cuisines",
-            "width": "full",
-            "widthFromM": "1of3",
-            "widthFromL": "1of3"
+        "title": "Les informations de votre projet ont été mises à jour",
+        "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg",
+        "description": [
+          {
+            "label": "Retrouvez votre projet dans votre compte Leroy Merlin, vous pourrez encore ajouter des plans et photos",
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
+          },
+          {
+            "label": "Votre conseiller a accès à vos plans et informations utiles pour le rendez-vous.",
+            "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
           }
-        },
-        {
-          "code": "Des idées et conseils pour votre cuisine",
-          "viewModel": {
-            "value": "3",
-            "url": "https://www.leroymerlin.fr/inspiration/les-meilleures-idees-pour-chaque-piece/cuisine/",
-            "image": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/inspiration-cuisine.jpg",
-            "title": "Des idées et conseils pour votre cuisine",
-            "width": "full",
-            "widthFromM": "1of3",
-            "widthFromL": "1of3"
+        ]
+      },
+      "multiSelect": {
+        "actions": {
+          "VALIDATE": {
+            "label": "Continuer et prendre RDV",
+            "nextStep": {
+              "code": "APPOINTMENT_FORM"
+            }
           }
         }
-      ]
+      }
     }
   },
+  "APPOINTMENT_FORM": {
+    "code": "APPOINTMENT_FORM",
+    "type": "STEP",
+    "component": "PbAppointmentForm"
+  },
   "__END__": {
     "code": "__END__",
     "type": "END",
@@ -879,9 +1049,12 @@
     "payload": {
       "code": "__END__",
       "viewModel": {
-        "title": "Vos informations ont été mises à jour",
+        "title": "Les informations de votre projet ont été mises à jour",
         "icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/check_80.svg",
-        "description": "Votre conseiller a accès à vos plans et informations utiles pour le rendez-vous. Si vous souhaitez encore ajouter des plans ou mesures, cliquez sur le lien dans le mail de rappel"
+        "description": {
+          "label": "Votre conseiller aura accès à vos plans et informations utiles pour le rendez-vous. Si vous souhaitez encore ajouter des plans retrouvez votre projet dans votre compte Leroy Merlin.",
+          "icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
+        }
       },
       "cards": [
         {

package/src/services/api/appointmentQualificationsApi.ts

@@ -57,4 +57,38 @@ const declarationsWithAppointment = async (data: any) => {
   );
 };
 
-export { declarationsWithAppointment, saveAnswersByAppointmentQualificationId, getAppointmentQualification };
+const declarationsWithoutAppointment = async (data: any) => {
+  const response = await clientApi.post('/declarations-without-appointment', data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+  return JSON.parse(
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
+      return `: "${he.escape($1)}"`;
+    }),
+  );
+};
+
+const linkInhabitantProjectToAppointmentQualification = async (data: any, inhabitantProjectId: any) => {
+  const response = await clientApi.post(
+    `/inhabitant-projects/${inhabitantProjectId}/appointment-qualifications`,
+    data,
+    {
+      headers: { 'Content-Type': 'application/json' },
+    },
+  );
+
+  return JSON.parse(
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
+      return `: "${he.escape($1)}"`;
+    }),
+  );
+};
+
+export {
+  linkInhabitantProjectToAppointmentQualification,
+  declarationsWithAppointment,
+  saveAnswersByAppointmentQualificationId,
+  getAppointmentQualification,
+  declarationsWithoutAppointment,
+};

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

@@ -6,6 +6,7 @@ export const getInhabitantByIdResolver = (req: RestRequest, res: ResponseComposi
     ctx.json({
       firstName: 'Jean',
       lastName: 'Dupont',
+      email: 'jean.dupont@yopmail.com',
     }),
   );
 };

package/src/stores/modules/appointmentQualificationStore.ts

@@ -2,12 +2,15 @@ import {
   getAppointmentQualification,
   saveAnswersByAppointmentQualificationId,
   declarationsWithAppointment,
+  declarationsWithoutAppointment,
+  linkInhabitantProjectToAppointmentQualification,
 } from '../../services/api/appointmentQualificationsApi';
 import { sendAppointmentQualificationEvent, sendAppointmentQualificationAnswers } from '../../services/api/eventsApi';
 import { ActionContext } from 'vuex';
 import { State } from '@/stores/state';
 
 export interface AppointmentQualificationState {
+  clicRDVBaseUrl: string;
   createProjectError: Error;
   isLoadingProject: boolean;
   appointmentLinkedError: Error;
@@ -53,6 +56,9 @@ export default {
     getCurrentAppointmentQualification(state: AppointmentQualificationState) {
       return state.currentAppointmentQualification;
     },
+    getClicRDVBaseUrl(state: AppointmentQualificationState) {
+      return state.clicRDVBaseUrl;
+    },
   },
 
   mutations: {
@@ -74,6 +80,9 @@ export default {
     setSession(state: AppointmentQualificationState, sessions: any) {
       state.sessions = sessions;
     },
+    setClicRDVBaseUrl(state: AppointmentQualificationState, baseURL: any) {
+      state.clicRDVBaseUrl = baseURL;
+    },
   },
 
   actions: {
@@ -125,6 +134,48 @@ export default {
         commit('setIsLoadingProject', false);
       }
     },
+    async createDeclarationProjectWithoutAppointment({ commit, state }: AppointmentQualificationContext) {
+      try {
+        const project = {
+          businessUnit: state.sessions.businessUnit,
+          name: state.sessions.appointmentQualificationFormStructure['__START__']?.meta?.projectName,
+          sourceDetail: state.sessions.sourceDetail,
+          store: state.sessions.storeId,
+          projectKindHref: state.sessions.appointmentQualificationFormStructure['__START__']?.meta?.projectKindHref,
+          projectTypeHref: state.sessions.appointmentQualificationFormStructure['__START__']?.meta?.projectTypeHref,
+          domesticSpaceHref: state.sessions.appointmentQualificationFormStructure['__START__']?.meta?.domesticSpaceHref,
+          correlationId: state.sessions.correlationId,
+        };
+        const result = await declarationsWithoutAppointment(project);
+        commit('setCurrentAppointmentQualification', result);
+        commit('setIsLoadingProject', false);
+      } catch (e) {
+        commit('setCreateProjectError', new Error());
+        commit('setIsLoadingProject', false);
+      }
+    },
+    async linkProjectWithAppointment({ commit, state }: AppointmentQualificationContext) {
+      commit('setIsLoadingProject', true);
+      try {
+        const data = {
+          clicRDVData: {
+            calendarId: state.sessions.calendarId,
+            groupId: state.sessions.groupId,
+            appointmentId: state.sessions.appointmentId,
+          },
+          correlationId: state.sessions.correlationId,
+        };
+        const result = await linkInhabitantProjectToAppointmentQualification(
+          state.currentAppointmentQualification.inhabitantProjectId,
+          data,
+        );
+        commit('setCurrentAppointmentQualification', result);
+        commit('setIsLoadingProject', false);
+      } catch (e) {
+        commit('setIsLoadingProject', false);
+        commit('setIsAppointmentsError', e);
+      }
+    },
     async startEndAppointmentQualificationEvent(_: AppointmentQualificationContext, event: Event) {
       await sendAppointmentQualificationEvent(event);
     },
@@ -140,5 +191,12 @@ export default {
     initSessions({ commit }: AppointmentQualificationContext, sessions: any) {
       commit('setSession', sessions);
     },
+    loadClicRDVBaseUrl({ commit }: AppointmentQualificationContext) {
+      if ((<any>window).config) {
+        commit('setClicRDVBaseUrl', (<any>window).config.VUE_APP_CLICRDV_BASE_URL);
+      } else {
+        commit('setClicRDVBaseUrl', 'https://www.clicrdv.com');
+      }
+    },
   },
 };

package/src/components/pedagogy/PbPedagogyStore.ts

@@ -1,17 +0,0 @@
-import { ActionContext } from 'vuex';
-import { State } from '@/stores/state';
-
-type PedagogyContext = ActionContext<any, State>;
-
-const pbPedagogyStore = {
-  state: {},
-  getters: {},
-  mutations: {},
-  actions: {
-    sendEventToBus(_: PedagogyContext, action: any): void {
-      console.log('Event sent to bus: ', JSON.stringify(action, null, '\t'));
-    },
-  },
-};
-
-export { pbPedagogyStore };