project-booster-vue 10.18.2 → 10.19.0

package/package.json

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

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

@@ -21,12 +21,7 @@
     <div class="m-pb-navigation__right column-full">
       <m-button
         :label="nextButtonLabel"
-        @click.prevent="
-          $emit('next-step', {
-            answers,
-            nextStep: payload.viewModel.nextStep,
-          })
-        "
+        @click.prevent="emitClickEvent(payload.viewModel.nextStep)"
         icon="ArrowNext48"
         iconPosition="right"
         :data-cerberus="sanitizeCerberusAttribut('MPB-NAVIGATION', nextButtonLabel)"
@@ -56,10 +51,18 @@ import { MButton } from '@mozaic-ds/vue-3';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { PayloadAction } from '../types/genericPayload';
+import { areConditionsValid } from '@/services/scenarioConditionals';
 
 const $emit = defineEmits(['go-back', 'next-step']);
 
 const props = defineProps({
+  /**
+   * The options provided at runtime to customize component behaviour
+   */
+  runtimeOptions: {
+    type: Object,
+    default: () => ({}),
+  },
   payload: {
     type: Object,
     default: () => ({}),
@@ -130,6 +133,28 @@ const props = defineProps({
     default: EventTypeEnum.SUBMIT,
   },
 });
+
+const emitClickEvent = (nextStep: any) => {
+  if (nextStep.code) {
+    $emit('next-step', {
+      answsers: props.answers,
+      nextStep: nextStep,
+    });
+  } else if (nextStep.conditionals) {
+    let toNextStep = null;
+    nextStep.conditionals.every((condition: any) => {
+      const valid = areConditionsValid(condition!, props.answers, props.runtimeOptions);
+      if (valid) {
+        toNextStep = condition.nextStep;
+        $emit('next-step', {
+          answsers: props.answers,
+          nextStep: toNextStep,
+        });
+        return;
+      }
+    });
+  }
+};
 </script>
 
 <style lang="scss">

package/src/components/rework/question/dimensions-input/MPbDimensionsInput.vue

@@ -186,18 +186,17 @@ const { length, width } = computeDefaultValue(props.runtimeOptions, props.answer
 const validationSchema = initValidation(componentId, computedPayload);
 const { handleSubmit } = useForm({ validationSchema: validationSchema.value });
 
-const handleFormSubmit = handleSubmit((values) => {
-  const elementLengthId = `text-input-length-${componentId}` as string;
-  const elementWidthId = `text-input-width-${componentId}` as string;
+const handleFormSubmit = (params: any) => {
   $emit(props.completedEventName, {
     answers: [
       {
-        length: values[elementLengthId],
-        width: values[elementWidthId],
+        length,
+        width,
       },
     ],
+    nextStep: params.nextStep,
   });
-});
+};
 
 const skipQuestion = () => {
   $emit(props.completedEventName, {

package/src/components/rework/question/list-select/MPbListSelect.vue

@@ -25,37 +25,6 @@
         :items-per-page="itemsPerPage"
         @update:model-value="handleSelectionChange"
       />
-      <!-- <div class="pb-list-select__actions-container" :style="`bottom: ${stickyBottomOffset};`">
-        <div class="pb-list-select__actions">
-          <div
-            ref="pbListSelectNextButtonContainer"
-            class="pb-list-select__next-button-container"
-            justify-content="center"
-          >
-            <m-button
-              v-if="payload.skippable && (!hasSelectedAnswers || payload.viewModel.alwaysDisplaySkippable)"
-              class="pb-list-select__next-button"
-              :label="payload.skippable.label"
-              :left-icon="payload.skippable.leftIcon"
-              :right-icon="payload.skippable.rightIcon"
-              size="m"
-              size-from-l="l"
-              @click="skipQuestion"
-            />
-            <m-button
-              v-if="hasSelectedAnswers || payload.multiSelect?.alwaysDisplayMultiSelectButton"
-              class="pb-list-select__validate-button"
-              size="m"
-              size-from-l="l"
-              :disabled="!hasSelectedAnswers"
-              :label="validateButtonProps.label"
-              :left-icon="validateButtonProps.leftIcon"
-              :right-icon="validateButtonProps.rightIcon"
-              @click="submitAnswers"
-            />
-          </div>
-        </div>
-      </div> -->
 
       <m-pb-navigation
         :answers="answers"

package/src/components/rework/question/upload-document/MPbUploadDocument.vue

@@ -84,19 +84,15 @@
       }}</m-link>
     </div>
 
-    <div class="pb-upload-document__buttons row-flex" v-if="payload.multiSelect">
-      <div class="pb-upload-document__buttons__button" v-for="button in payload.multiSelect.actions">
-        <m-button
-          :label="button.label"
-          @click="validMultiSelect(button)"
-          :theme="button.theme"
-          :icon="button.icon"
-          size="m"
-          size-from-l="l"
-          :iconPosition="button.iconPosition"
-        />
-      </div>
-    </div>
+    <m-pb-navigation
+      :payload="payload"
+      :answers="answers"
+      :stepLocation="stepLocation"
+      :trackingStatus="true"
+      @go-back="$emit('go-back')"
+      @next-step="validMultiSelect(payload?.multiSelect?.actions?.VALIDATE)"
+      :step-number="stepNumber"
+    />
 
     <m-pb-media-upload
       :payload="payload.viewModel.mediaPayload"
@@ -126,6 +122,7 @@ import {
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate, doEval } from '@/services/decorate';
 import { EmitEventName } from '../../services/emit';
+import MPbNavigation from '../../navigation/MPbNavigation.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -185,6 +182,20 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  /**
+   * Current step location
+   */
+  stepLocation: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Current step number
+   */
+  stepNumber: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const store = useStore();
@@ -227,14 +238,10 @@ const handleDisplayDialogEvent = (event: Event) => {
 };
 
 const validMultiSelect = (multiSelectOptions: UploadDocumentMultiSelectAction) => {
-  if (multiSelectOptions.nextStep.code == '__BACK__') {
-    $emit('go-back');
-  } else {
-    $emit(props.completedEventName, {
-      answers: selectedDocuments.value.length ? selectedDocuments.value : null,
-      nextStep: multiSelectOptions.nextStep,
-    });
-  }
+  $emit(props.completedEventName, {
+    answers: null,
+    nextStep: multiSelectOptions.nextStep,
+  });
 };
 
 const skipQuestion = (button: UploadDocumentMultiSelectAction) => {

package/src/components/scenario/scenarii/estimator-floor.json

@@ -44,7 +44,8 @@
         "component": "MPbProgress",
         "totalStep": 9,
         "currentStep": 1,
-        "sizeXlWidth": true
+        "sizeXlWidth": true,
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -147,6 +148,7 @@
       "beforeContent": {
         "display": true,
         "component": "MPbProgress",
+        "label": "Estimer le budget de votre revêtement de sol",
         "totalStep": 9,
         "currentStep": 2,
         "sizeXlWidth": true
@@ -217,7 +219,7 @@
         "totalStep": 9,
         "currentStep": 2,
         "sizeXlWidth": true,
-        "label": "Votre projet cuisine"
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -345,7 +347,7 @@
         "totalStep": 9,
         "currentStep": 2,
         "sizeXlWidth": true,
-        "label": "Votre projet cuisine"
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -423,7 +425,7 @@
         "totalStep": 9,
         "currentStep": 3,
         "sizeXlWidth": true,
-        "label": "Estimer vos aides pour votre projet"
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -443,6 +445,9 @@
           "label": "Voir d'autres revêtements",
           "minItemsDisplayed": 4,
           "position": "start"
+        },
+        "nextStep": {
+          "code": "LMFR_FLOOR_QUESTION_DUMP"
         }
       },
       "answers": {
@@ -573,9 +578,6 @@
             "alignHorizontal": "center",
             "alignText": "center"
           },
-          "nextStep": {
-            "code": "LMFR_FLOOR_QUESTION_DUMP"
-          },
           "meta": {
             "ranking": 10
           }
@@ -612,7 +614,8 @@
         "component": "MPbProgress",
         "totalStep": 9,
         "currentStep": 4,
-        "sizeXlWidth": true
+        "sizeXlWidth": true,
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -676,7 +679,8 @@
         "component": "MPbProgress",
         "totalStep": 9,
         "currentStep": 4,
-        "sizeXlWidth": true
+        "sizeXlWidth": true,
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -757,7 +761,7 @@
         "totalStep": 9,
         "currentStep": 5,
         "sizeXlWidth": true,
-        "label": "Votre projet cuisine"
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -811,49 +815,17 @@
     "code": "LMFR_FLOOR_QUESTION_DIMENSION_WIDTH_LENGTH",
     "type": "STEP",
     "component": "MPbDimensionsInput",
-    "nextStep": {
-      "conditionals": [
-        {
-          "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'TILES')"],
-          "nextStep": {
-            "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_TILES"
-          }
-        },
-        {
-          "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'LAMINATE')"],
-          "nextStep": {
-            "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_LAMINATE"
-          }
-        },
-        {
-          "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'SOFT_FLOOR')"],
-          "nextStep": {
-            "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_SOFT_FLOOR"
-          }
-        },
-        {
-          "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'PARQUET')"],
-          "nextStep": {
-            "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_PARQUET"
-          }
-        },
-        {
-          "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'CARPET')"],
-          "nextStep": {
-            "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_CARPET"
-          }
-        },
-        {
-          "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'UNKNOWN')"],
-          "nextStep": {
-            "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_UNKNOWN"
-          }
-        }
-      ]
-    },
     "slots": {
       "stickyBottom": {
         "display": false
+      },
+      "beforeContent": {
+        "display": true,
+        "component": "MPbProgress",
+        "totalStep": 9,
+        "currentStep": 6,
+        "sizeXlWidth": true,
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -863,7 +835,6 @@
       },
       "viewModel": {
         "label": "Quelles sont les dimensions de cette pièce ?",
-        "image": "https://storage.googleapis.com/project-booster-media/bathroom/size/size-length_width.png",
         "backLabel": "Question précédente",
         "lengthPlaceholder": "Longueur",
         "widthPlaceholder": "Largeur",
@@ -879,6 +850,46 @@
           "widthMaxErrorMessage": "La largeur doit être comprise entre 1m et 10m",
           "widthMinErrorMessage": "La largeur doit être comprise entre 1m et 10m",
           "notValidNumberMessage": "Veuillez ne saisir que des chiffres"
+        },
+        "nextStep": {
+          "conditionals": [
+            {
+              "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'TILES')"],
+              "nextStep": {
+                "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_TILES"
+              }
+            },
+            {
+              "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'LAMINATE')"],
+              "nextStep": {
+                "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_LAMINATE"
+              }
+            },
+            {
+              "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'SOFT_FLOOR')"],
+              "nextStep": {
+                "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_SOFT_FLOOR"
+              }
+            },
+            {
+              "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'PARQUET')"],
+              "nextStep": {
+                "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_PARQUET"
+              }
+            },
+            {
+              "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'CARPET')"],
+              "nextStep": {
+                "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_CARPET"
+              }
+            },
+            {
+              "conditions": ["isAnswerMatching('LMFR_FLOOR_QUESTION_NEW', 'UNKNOWN')"],
+              "nextStep": {
+                "code": "LMFR_FLOOR_QUESTION_QUALITY_RANGE_UNKNOWN"
+              }
+            }
+          ]
         }
       }
     }
@@ -898,7 +909,7 @@
         "totalStep": 9,
         "currentStep": 7,
         "sizeXlWidth": true,
-        "label": "Votre projet cuisine"
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -1016,7 +1027,7 @@
         "totalStep": 9,
         "currentStep": 6,
         "sizeXlWidth": true,
-        "label": "Votre projet cuisine"
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -1079,8 +1090,9 @@
         "display": true,
         "component": "MPbProgress",
         "totalStep": 9,
-        "currentStep": 7,
-        "sizeXlWidth": true
+        "currentStep": 8,
+        "sizeXlWidth": true,
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -1345,7 +1357,7 @@
         "totalStep": 9,
         "currentStep": 8,
         "sizeXlWidth": true,
-        "label": "Votre projet cuisine"
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {
@@ -1408,7 +1420,8 @@
         "component": "MPbProgress",
         "totalStep": 9,
         "currentStep": 9,
-        "sizeXlWidth": true
+        "sizeXlWidth": true,
+        "label": "Estimer le budget de votre revêtement de sol"
       }
     },
     "payload": {