project-booster-vue 9.28.1 → 9.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.28.1",
+  "version": "9.29.1",
   "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}`;

package/src/components/mozaic/buttons/MButton.vue

@@ -547,6 +547,7 @@ $text-neutral: (
   border-color: $color-success-500;
   border-radius: 0.25rem 0 0 0.25rem;
   color: $color-success-500;
+  margin: 0 !important;
   padding: 0.375rem;
 }
 
@@ -555,6 +556,7 @@ $text-neutral: (
   border-color: $color-success-500;
   border-radius: 0 0.25rem 0.25rem 0;
   color: $color-success-500;
+  margin: 0 !important;
   padding: 0.375rem;
 }
 </style>

package/src/components/question/space-input/PbSpaceInput.vue

@@ -449,12 +449,15 @@ $responsive-breakpoint: 'm';
 
   &__dialog {
     &__title {
-      padding: $mu250 $mu250 0 $mu250;
+      h2 {
+        @include set-font-face('semi-bold');
+        @include set-font-scale('07', 's');
+        padding: $mu250 $mu250 0 $mu250;
+      }
     }
 
     &__body {
       padding: 0 $mu250;
-      @include set-font-scale('05', 'l');
     }
 
     &__footer {
@@ -472,3 +475,12 @@ $responsive-breakpoint: 'm';
   }
 }
 </style>
+
+<style lang="scss">
+@import 'pb-variables';
+
+.pb-space-input__dialog__body p {
+  @include set-font-scale('05', 'm');
+  margin: $mu100 0;
+}
+</style>

package/src/stores/modules/documentsStore.ts

@@ -376,7 +376,7 @@ export const mediaDocumentsListStoreOptions = {
           state.currentMediaPage * state.mediaPerPageCount,
           state.currentMediaPage * state.mediaPerPageCount + mediaNumberToAdd - 1,
           state.currentProjectId,
-          state.context.subType,
+          state.context?.subType,
         );
         commit('addMedia', media.results ? media.results : []);
 
@@ -415,7 +415,7 @@ export const mediaDocumentsListStoreOptions = {
           0,
           state.currentMediaPage * state.mediaPerPageCount - 1,
           state.currentProjectId,
-          state.context.subType,
+          state.context?.subType,
         );
         commit('setMediaList', media.results);