project-booster-vue 9.28.2 → 9.29.0

package/package.json

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

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

@@ -71,8 +71,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     store.commit('appointmentQualification/setClicRDVBaseUrl', 'https://sandbox-user.clicrdv.com');
     return { args };
   },
-  template: `<pb-appointment-form />
-  />`,
+  template: `<pb-appointment-form :payload="args.payload" />`,
 });
 
 <Canvas>
@@ -92,3 +91,24 @@ export const TemplateSandbox = (args, { argTypes }) => ({
 </Canvas>
 
 <ArgsTable story="101 Sandbox" />
+
+# 🦠 `PbAppointmentForm` - Component with custom calendar
+
+The `PbAppointmentForm` component that include in a iframe the clicRDV form with custom calendar.
+
+<Canvas>
+  <Story
+    inline={false}
+    height="862px"
+    name="With custom calendar"
+    args={{ payload: { viewModel: { calendarUrlPath: 'custom-calendar' } } }}
+    parameters={{
+      msw: [
+        rest.get('/api/inhabitant-api/users/:buId/:inhabitantId', getInhabitantByIdResolver),
+        rest.post('/api/declarations-without-appointment', declarationsWithAppointmentResolver),
+      ],
+    }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/appointment/PbAppointmentForm.vue

@@ -23,7 +23,18 @@ export default defineComponent({
   name: 'PbAppointmentForm',
   components: { MFlex },
 
-  setup() {
+  props: {
+    /**
+     * The component view model and business data as an object.
+     */
+    payload: {
+      type: Object,
+      default: () => null,
+      required: false,
+    },
+  },
+
+  setup(props) {
     const store = useStore();
 
     const appointmentFormUrl = computed(() => {
@@ -33,9 +44,15 @@ export default defineComponent({
       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}`;
+      let url = '';
+      if (props.payload?.viewModel?.calendarUrlPath) {
+        url = `${baseUrl}/${props.payload.viewModel.calendarUrlPath}?`;
+      } else {
+        url = `${baseUrl}/leroy-merlin-${sessions.storeId}`;
+        url += `?calendar_id=${sessions.calendarId}`;
+        url += `&vevent[str5]=${currentAppointmentQualification.inhabitantProjectId}`;
+      }
+
       if (currentUser) {
         url += `&fiche[email]=${currentUser.email}`;
         url += `&fiche[lastname]=${currentUser.lastName}`;