project-booster-vue 9.28.2 → 9.30.0

package/package.json

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

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/services/scenarioConditionals.ts

@@ -1,4 +1,5 @@
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import objectPath from 'object-path';
 
 const Condition = (
   condition: string,
@@ -17,6 +18,10 @@ const Condition = (
       }) > -1
     );
   };
+  const isAnswerValue = (questionCode: string, path: string, value: any) => {
+    const questionAnswers = answers.get(questionCode)!;
+    return questionAnswers ? objectPath.get(questionAnswers[0], path) === value : false;
+  };
   const hasAnswers = (questionCode: string) => {
     const questionAnswers = answers.get(questionCode)!;
     return questionAnswers.length > 0;
@@ -24,11 +29,12 @@ const Condition = (
   const isValid: boolean = new Function(
     'isAnswerMatching',
     'isAnswerContaining',
+    'isAnswerValue',
     'hasAnswers',
     'answers',
     'runtimeOptions',
     `return ${condition}`,
-  ).call(this, isAnswerMatching, isAnswerContaining, hasAnswers, answers, runtimeOptions);
+  ).call(this, isAnswerMatching, isAnswerContaining, isAnswerValue, hasAnswers, answers, runtimeOptions);
   return { isValid };
 };