project-booster-vue 10.22.1 → 10.22.3

package/package.json

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

package/src/components/date-picker/MPbDatePicker.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue';
+import { useStore } from 'vuex';
 import MLink from '../mozaic/link/MLink.vue';
 import MButton from '../mozaic/buttons/MButton.vue';
 
@@ -7,17 +8,24 @@ const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 const props = defineProps(['payload']);
 const emit = defineEmits(['go-back']);
-const moveDate = ref(null);
+const store = useStore();
 
-function handleChange(event) {
-  moveDate.value = event.target.value;
-}
+const moveDate = ref(store.state.answers.moveDate);
 
-function handleSubmit() {
+function commitStep(moveDateValue) {
+  store.commit('setMoveDate', moveDateValue);
   emit('step-completed', {
-    answers: [{ moveDate: moveDate.value }],
+    answers: [{ moveDate: moveDateValue }],
   });
 }
+
+function handleSubmit() {
+  commitStep(moveDate.value);
+}
+
+function skipQuestion() {
+  commitStep(null);
+}
 </script>
 
 <template>
@@ -26,14 +34,14 @@ function handleSubmit() {
     <div class="date-picker">
       <span class="title">{{ props.payload.viewModel.title }}</span>
       <span class="subtile">{{ props.payload.viewModel.subtitle }}</span>
-      <input type="date" @input="handleChange" class="mc-text-input mc-field__input input-text-date" />
+      <input type="date" v-model="moveDate" class="mc-text-input mc-field__input input-text-date" />
       <MButton
         class="button"
         :label="props.payload.viewModel.actionLabel"
         @click="handleSubmit"
         :disabled="!moveDate"
       />
-      <m-link class="skip-link" :label="props.payload.viewModel.skipLabel" @click.once="handleSubmit" />
+      <m-link class="skip-link" :label="props.payload.viewModel.skipLabel" @click.once="skipQuestion" />
     </div>
   </div>
 </template>

package/src/components/projects/project-item-save/PbProjectItemSave.vue

@@ -111,6 +111,10 @@ export const answerGettersMappers: Map<string, (param: any) => void> = new Map<s
     MPbProducts: ({ product }: { product: object }) => {
       return { product };
     },
+    MPbDimensionsInput: ({ width, length }: { width: string; length: string }): { width: number; length: number } => {
+      return { width: parseFloat(width), length: parseFloat(length) };
+    },
+    MPbListSelect: ({ value }: { value: string }): string => value,
   }),
 );
 

package/src/components/rework/navigation/MPbNavigation.vue

@@ -21,7 +21,11 @@
     <div class="m-pb-navigation__right column-full">
       <m-button
         :label="nextButtonLabel"
-        @click.prevent="emitClickEvent(payload?.viewModel?.nextStep || payload?.nextStep)"
+        @click.prevent="
+          emitClickEvent(
+            payload?.viewModel?.nextStep || payload?.nextStep || payload?.multiSelect?.actions?.VALIDATE?.nextStep,
+          )
+        "
         icon="ArrowNext48"
         iconPosition="right"
         :data-cerberus="sanitizeCerberusAttribut('MPB-NAVIGATION', nextButtonLabel)"

package/src/components/rework/question/MPbQuestion.vue

@@ -154,40 +154,44 @@
           </div>
         </div>
 
-        <m-notification class="pb-question__notifications" :type="notification.type" v-if="notification">
-          <template #default>
-            <strong style="font-size: 16px; line-height: 20px">{{ notification.title }}</strong>
-            <p
-              style="font-size: 16px; line-height: 20px; margin-bottom: 0"
-              v-if="notification.content"
-              v-html="notification.content"
-            ></p>
-            <m-link
-              style="margin-top: 15px"
-              v-if="notification?.modal"
-              :label="notification?.modal.title"
-              @click.prevent="displayNotificationDialog = true"
-            ></m-link>
-          </template>
-        </m-notification>
-        <div class="pb-question__redirect-link" v-if="!!notification?.buttonText">
-          <m-button
-            width="full"
-            width-from-xxl="full"
-            width-from-l="full"
-            :href="notification.buttonHref"
-            v-if="notification.buttonHref"
-            :label="notification.buttonText"
-          />
-          <m-button
-            width="full"
-            width-from-xxl="full"
-            width-from-l="full"
-            v-else-if="notification?.buttonStep"
-            @click.prevent="callAction(notification?.buttonStep, [], $emit)"
-            :label="notification.buttonText"
-          />
-        </div>
+        <template
+          v-if="notification && areConditionsValid(notification.conditions || [], props.answers, props.runtimeOptions)"
+        >
+          <m-notification class="pb-question__notifications" :type="notification.type">
+            <template #default>
+              <strong style="font-size: 16px; line-height: 20px">{{ notification.title }}</strong>
+              <p
+                style="font-size: 16px; line-height: 20px; margin-bottom: 0"
+                v-if="notification.content"
+                v-html="notification.content"
+              ></p>
+              <m-link
+                style="margin-top: 15px"
+                v-if="notification?.modal"
+                :label="notification?.modal.title"
+                @click.prevent="displayNotificationDialog = true"
+              ></m-link>
+            </template>
+          </m-notification>
+          <div class="pb-question__redirect-link" v-if="!!notification?.buttonText">
+            <m-button
+              width="full"
+              width-from-xxl="full"
+              width-from-l="full"
+              :href="notification.buttonHref"
+              v-if="notification.buttonHref"
+              :label="notification.buttonText"
+            />
+            <m-button
+              width="full"
+              width-from-xxl="full"
+              width-from-l="full"
+              v-else-if="notification?.buttonStep"
+              @click.prevent="callAction(notification?.buttonStep, [], $emit)"
+              :label="notification.buttonText"
+            />
+          </div>
+        </template>
         <div class="pb-question__redirect-link" v-if="payload.redirectLink">
           <m-button
             width="full"

package/src/components/rework/question/default-payload.json

@@ -7,6 +7,11 @@
     "answersComponent": "MPbCard",
     "widthFromM": "1of2",
     "widthFromL": "1of2",
+    "notification": {
+      "type": "info",
+      "content": "orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet tincidunt libero.",
+      "conditions": ["true"]
+    },
     "videoBlock": {
       "buttonLabel": "Voir le guide en vidéo (1min)",
       "icon": "https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Media_Play_24px.svg",

package/src/types/pb/Scenario.ts

@@ -131,6 +131,7 @@ export interface ScenarioStepAnswerNotification {
     htmlContent: string;
     link: string;
   };
+  conditions?: string[];
 }
 
 export interface ScenarioStepAnswers {