project-booster-vue 8.115.7 → 8.116.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.115.7",
+  "version": "8.116.0",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",

package/src/components/appointment/PbAppointmentStartSection.vue

@@ -68,22 +68,6 @@ export default {
         nextStep: null,
       });
     },
-    computeNextStep(nextStep) {
-      let resultingNextStep;
-
-      if (nextStep?.conditionals) {
-        for (const conditional of nextStep.conditionals) {
-          if (this.areConditionsValid(conditional.conditions)) {
-            resultingNextStep = this.computeNextStep(conditional.nextStep);
-            break;
-          }
-        }
-      } else {
-        resultingNextStep = nextStep;
-      }
-
-      return resultingNextStep;
-    },
   },
 };
 </script>

package/src/components/question/PbQuestion.vue

@@ -257,6 +257,7 @@ import MLink from '../mozaic/link/MLink';
 import PbCard from '../cards/PbCard';
 import PbStickyFooter from '../sticky-footer/PbStickyFooter';
 import { sortAnswers } from './sortAnswers';
+import { areConditionsValid } from '../../service/scenarioConditionals';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -391,7 +392,7 @@ export default {
 
       if (this.payload?.answers) {
         this.displayableAnswers = Object.values(this.payload?.answers).filter((answer) => {
-          return this.areConditionsValid(answer.conditions);
+          return areConditionsValid(answer.conditions, this.answers, this.runtimeOptions);
         });
       }
 
@@ -406,7 +407,7 @@ export default {
       for (const answerCode in this.payload.answers) {
         if (
           this.payload.answers[answerCode].selected &&
-          this.areConditionsValid(this.payload.answers[answerCode].conditions)
+          areConditionsValid(this.payload.answers[answerCode].conditions, this.answers, this.runtimeOptions)
         ) {
           this.selectedAnswers[answerCode] = true;
         }
@@ -445,35 +446,14 @@ export default {
       );
     },
     isShowingFooter(viewModel) {
-      return viewModel.footer && this.areConditionsValid(viewModel.footer.conditions);
+      return viewModel.footer && areConditionsValid(viewModel.footer.conditions, this.answers, this.runtimeOptions);
     },
-    areConditionsValid(conditions) {
-      let valid = true;
-
-      if (conditions) {
-        valid = false;
-        for (const condition of conditions) {
-          try {
-            let conditionValid = new Function(
-              'isAnswerMatching',
-              'isAnswerContaining',
-              'answers',
-              'runtimeOptions',
-              `return ${condition}`,
-            ).call(this, this.isAnswerMatching, this.isAnswerContaining, this.answers, this.runtimeOptions);
-
-            valid = valid || conditionValid;
-          } catch (error) {
-            console.error(error);
-            valid = valid || true;
-          }
-        }
-      }
 
-      return valid;
-    },
     isAnswerDisabled(answer) {
-      return answer.viewModel.disabled && this.areConditionsValid(answer.viewModel.disabled.conditions);
+      return (
+        answer.viewModel.disabled &&
+        areConditionsValid(answer.viewModel.disabled.conditions, this.answers, this.runtimeOptions)
+      );
     },
     selectAnswer(stepCode, answer) {
       if (this.isAnswerDisabled(answer)) {
@@ -499,7 +479,7 @@ export default {
          */
         this.$emit(this.completedEventName, {
           answers: [answer],
-          nextStep: this.computeNextStep(answer.nextStep),
+          nextStep: answer.nextStep,
         });
       }
 
@@ -527,18 +507,6 @@ export default {
 
       return selectedAnswersNumber;
     },
-    // Function used by the scenario conditions
-    isAnswerMatching(questionCode, answerCode) {
-      return this?.answers[questionCode] && this?.answers[questionCode][0]?.code === answerCode;
-    },
-    isAnswerContaining(questionCode, answerCode) {
-      return (
-        this?.answers[questionCode] &&
-        this?.answers[questionCode].findIndex((elt) => {
-          return elt.code === answerCode;
-        }) > -1
-      );
-    },
     validMultiSelect(multiSelectOptions) {
       const answers = [];
 
@@ -550,14 +518,14 @@ export default {
 
       this.$emit(this.completedEventName, {
         answers: answers,
-        nextStep: this.computeNextStep(multiSelectOptions.nextStep),
+        nextStep: multiSelectOptions.nextStep,
       });
     },
     skipQuestion(button) {
       this.initAnswersSelectedState(this.payload.answers);
       this.$emit(this.completedEventName, {
-        answers: button.defaultAnswer ? [button.defaultAnswer] : [],
-        nextStep: this.computeNextStep(button.nextStep),
+        answers: button.isAnswer ? (button.defaultAnswer ? [button.defaultAnswer] : []) : null,
+        nextStep: button.nextStep,
       });
     },
     resetMultiSelect(multiSelectOptions, answers) {
@@ -569,22 +537,6 @@ export default {
         answer.selected = false;
       });
     },
-    computeNextStep(nextStep) {
-      let resultingNextStep;
-
-      if (nextStep?.conditionals) {
-        for (const conditional of nextStep.conditionals) {
-          if (this.areConditionsValid(conditional.conditions)) {
-            resultingNextStep = this.computeNextStep(conditional.nextStep);
-            break;
-          }
-        }
-      } else {
-        resultingNextStep = nextStep;
-      }
-
-      return resultingNextStep;
-    },
     handleShowMoreClick() {
       this.activateShowMoreAnimation();
       this.showMore();

package/src/components/question/dimensions-input/PbDimensionsInput.vue

@@ -282,7 +282,11 @@ export default {
        * @type {Event}
        */
       emit(props.completedEventName, {
-        answers: props.payload?.skippable?.defaultAnswer ? [props.payload?.skippable?.defaultAnswer] : [],
+        answers: props.payload?.skippable?.isAnswer
+          ? props.payload?.skippable?.defaultAnswer
+            ? [props.payload?.skippable?.defaultAnswer]
+            : []
+          : null,
         nextStep: props.payload?.skippable?.nextStep,
       });
     };

package/src/components/question/list-select/PbListSelect.vue

@@ -54,7 +54,7 @@
               @click="skipQuestion"
             />
             <m-button
-              v-if="hasSelectedAnswers || payload.multiSelect.alwaysDisplayMultiSelectButton"
+              v-if="hasSelectedAnswers || payload.multiSelect?.alwaysDisplayMultiSelectButton"
               class="pb-list-select__validate-button"
               size="m"
               size-from-l="l"
@@ -204,7 +204,7 @@ export default {
       return props.payload?.viewModel?.showMore?.position ?? 'center';
     });
 
-    // Submition
+    // Submit
     const validateButtonProps = computed(() => {
       let label, leftIcon, rightIcon;
 
@@ -253,52 +253,10 @@ export default {
        */
       emit(props.completedEventName, {
         answers: answersToSubmit,
-        nextStep: computeNextStep(nextStep),
+        nextStep: nextStep,
       });
     };
 
-    // Scenario management
-    const areConditionsValid = (conditions) => {
-      let valid = true;
-
-      if (conditions) {
-        valid = false;
-        for (const condition of conditions) {
-          try {
-            let conditionValid = new Function(
-              'isAnswerMatching',
-              'isAnswerContaining',
-              'answers',
-              'runtimeOptions',
-              `return ${condition}`,
-            ).call(this, isAnswerMatching, isAnswerContaining, props.answers, props.runtimeOptions);
-
-            valid = valid || conditionValid;
-          } catch (error) {
-            console.error(error);
-            valid = valid || true;
-          }
-        }
-      }
-      return valid;
-    };
-
-    const computeNextStep = (nextStep) => {
-      let resultingNextStep;
-
-      if (nextStep?.conditionals) {
-        for (const conditional of nextStep.conditionals) {
-          if (areConditionsValid(conditional.conditions)) {
-            resultingNextStep = computeNextStep(conditional.nextStep);
-            break;
-          }
-        }
-      } else {
-        resultingNextStep = nextStep;
-      }
-      return resultingNextStep;
-    };
-
     const skipQuestion = () => {
       /**
        * Emitted when step is completed
@@ -306,8 +264,12 @@ export default {
        * @type {Event}
        */
       emit(props.completedEventName, {
-        answers: props.payload.skippable.defaultAnswer ? [props.payload.skippable.defaultAnswer.value] : [],
-        nextStep: computeNextStep(props.payload?.skippable?.nextStep),
+        answers: props.payload?.skippable?.isAnswer
+          ? props.payload?.skippable?.defaultAnswer
+            ? [props.payload?.skippable?.defaultAnswer]
+            : []
+          : null,
+        nextStep: props.payload?.skippable?.nextStep,
       });
     };
 
@@ -322,19 +284,6 @@ export default {
       );
     };
 
-    const isAnswerMatching = (questionCode, answerCode) => {
-      return props.answers[questionCode] && props.answers[questionCode][0]?.code === answerCode;
-    };
-
-    const isAnswerContaining = (questionCode, answerCode) => {
-      return (
-        props.answers[questionCode] &&
-        props.answers[questionCode].findIndex((elt) => {
-          return elt.code === answerCode;
-        }) > -1
-      );
-    };
-
     const getAnswerValue = (answerCode, path) => {
       if (!props.answers[answerCode] || props.answers[answerCode].length === 0) {
         return null;

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

@@ -249,7 +249,11 @@ export default {
        * @type {Event}
        */
       emit(props.completedEventName, {
-        answers: props.payload?.skippable?.defaultAnswer ? [props.payload?.skippable?.defaultAnswer] : [],
+        answers: props.payload?.skippable?.isAnswer
+          ? props.payload?.skippable?.defaultAnswer
+            ? [props.payload?.skippable?.defaultAnswer]
+            : []
+          : null,
         nextStep: props.payload?.skippable?.nextStep,
       });
     };

package/src/components/question/upload-document/PbUploadDocument.vue

@@ -186,11 +186,10 @@ import MIcon from '../../mozaic/icon/MIcon';
 import MImage from '../../mozaic/image/MImage';
 import MLink from '../../mozaic/link/MLink';
 import PbCard from '../../cards/PbCard';
-import { sortAnswers } from '.././sortAnswers';
 import MDialog from '../../mozaic/dialog/MDialog';
-import { v4 as uuidv4 } from 'uuid';
 import PbUploadDocumentForm from './PbUploadDocumentForm';
 import PbStickyFooter from '../../sticky-footer/PbStickyFooter';
+import { areConditionsValid } from '../../../service/scenarioConditionals';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -327,7 +326,7 @@ export default {
     updateDefaultAnswers() {
       if (this.payload?.answers) {
         this.displayableAnswers = Object.values(this.payload?.answers).filter((answer) => {
-          return this.areConditionsValid(answer.conditions) && !answer.selected;
+          return areConditionsValid(answer.conditions, this.answers, this.runtimeOptions) && !answer.selected;
         });
         Object.values(this.payload?.answers).map((answer) => {
           let found = false;
@@ -371,42 +370,20 @@ export default {
       );
     },
     isShowingFooter(viewModel) {
-      return viewModel.footer && this.areConditionsValid(viewModel.footer.conditions);
-    },
-    areConditionsValid(conditions) {
-      let valid = true;
-
-      if (conditions) {
-        valid = false;
-        for (const condition of conditions) {
-          try {
-            let conditionValid = new Function(
-              'isAnswerMatching',
-              'isAnswerContaining',
-              'answers',
-              'runtimeOptions',
-              `return ${condition}`,
-            ).call(this, this.isAnswerMatching, this.isAnswerContaining, this.answers, this.runtimeOptions);
-
-            valid = valid || conditionValid;
-          } catch (error) {
-            console.error(error);
-            valid = valid || true;
-          }
-        }
-      }
-
-      return valid;
+      return viewModel.footer && areConditionsValid(viewModel.footer.conditions, this.answers, this.runtimeOptions);
     },
+
     isAnswerDisabled(answer) {
-      return answer.viewModel.disabled && this.areConditionsValid(answer.viewModel.disabled.conditions);
+      return (
+        answer.viewModel.disabled &&
+        areConditionsValid(answer.viewModel.disabled.conditions, this.answers, this.runtimeOptions)
+      );
     },
     selectAnswer(stepCode, answer) {
       if (answer.code === 'ADD_DOCUMENT') {
         this.$refs.pbUploadDocumentForm.$refs.pbDocumentUploadFormInput.click();
       }
     },
-    // Function used by the scenario conditions
     getAnswerValue(answerCode, path) {
       if (!this.answers[answerCode] || this.answers[answerCode].length === 0) {
         return null;
@@ -414,28 +391,16 @@ export default {
 
       return objectPath.get(this.answers[answerCode][0], path);
     },
-    // Function used by the scenario conditions
-    isAnswerMatching(questionCode, answerCode) {
-      return this?.answers[questionCode] && this?.answers[questionCode][0]?.code === answerCode;
-    },
-    isAnswerContaining(questionCode, answerCode) {
-      return (
-        this?.answers[questionCode] &&
-        this?.answers[questionCode].findIndex((elt) => {
-          return elt.code === answerCode;
-        }) > -1
-      );
-    },
     validMultiSelect(multiSelectOptions) {
       this.$emit(this.completedEventName, {
         answers: this.selectedDocuments,
-        nextStep: this.computeNextStep(multiSelectOptions.nextStep),
+        nextStep: multiSelectOptions.nextStep,
       });
     },
     skipQuestion(button) {
       this.$emit(this.completedEventName, {
         answers: this.selectedDocuments,
-        nextStep: this.computeNextStep(button.nextStep),
+        nextStep: button.nextStep,
       });
     },
     resetMultiSelect(multiSelectOptions, answers) {
@@ -450,22 +415,6 @@ export default {
         answer.selected = false;
       });
     },
-    computeNextStep(nextStep) {
-      let resultingNextStep;
-
-      if (nextStep?.conditionals) {
-        for (const conditional of nextStep.conditionals) {
-          if (this.areConditionsValid(conditional.conditions)) {
-            resultingNextStep = this.computeNextStep(conditional.nextStep);
-            break;
-          }
-        }
-      } else {
-        resultingNextStep = nextStep;
-      }
-
-      return resultingNextStep;
-    },
     handleShowMoreClick() {
       this.activateShowMoreAnimation();
       this.showMore();

package/src/components/restitution/PbRestitution.vue

@@ -4,7 +4,7 @@
       :class="`pb-restitution pb-restitution--${componentTheme}`"
       align-items="center"
       direction="column"
-      :style="`min-height:  ${displayRestitutionExit ? 'auto' : minHeight};`"
+      :style="`min-height:  ${restitutionMinHeight};`"
       ref="pbRestitution"
     >
       <m-link
@@ -78,6 +78,7 @@ import PbRestitutionBody from './PbRestitutionBody';
 import PbProgressionPrice from '../progression-price/PbProgressionPrice';
 import PbProjectItemSave from '../project-item-save/PbProjectItemSave';
 import PbRestitutionExit from './PbRestitutionExit';
+import { areConditionsValid } from '../../service/scenarioConditionals';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -165,6 +166,7 @@ export default {
     notifications: [],
     displayDialog: false,
     dialogViewModel: null,
+    restitutionMinHeight: '100vh',
   }),
 
   computed: {
@@ -184,7 +186,7 @@ export default {
         options: [],
       };
       formattedExitOptions.options = this.payload?.exitOptions?.options?.filter(
-        (option) => !option.conditions || this.areConditionsValid(option.conditions),
+        (option) => !option.conditions || areConditionsValid(option.conditions, this.answers, this.runtimeOptions),
       );
       return formattedExitOptions;
     },
@@ -200,7 +202,7 @@ export default {
     if (this.payload?.callToActions) {
       const saveAction = Object.values(this.payload.callToActions).find((cta) => {
         return (
-          this.areConditionsValid(cta.conditions) &&
+          areConditionsValid(cta.conditions, this.answers, this.runtimeOptions) &&
           cta.action?.type === 'MODAL' &&
           cta.action?.component === 'PbProjectItemSave'
         );
@@ -208,6 +210,9 @@ export default {
       this.projectSaveItemPayload = saveAction ? saveAction.payload : {};
       this.showSaveProjectItem = this.showSaveEstimate;
     }
+    setTimeout(() => {
+      this.restitutionMinHeight = this.payload?.exitOptions ? 'auto' : this.minHeight;
+    }, 300);
   },
 
   mounted() {
@@ -219,41 +224,11 @@ export default {
     updateDisplayedCta() {
       if (this.payload?.callToActions) {
         this.displayedCta = Object.values(this.payload.callToActions).filter((cta) => {
-          return this.areConditionsValid(cta.conditions);
+          return areConditionsValid(cta.conditions, this.answers, this.runtimeOptions);
         });
       }
     },
 
-    areConditionsValid(conditions) {
-      let valid = true;
-
-      if (conditions) {
-        valid = false;
-        for (const condition of conditions) {
-          try {
-            valid =
-              valid ||
-              new Function('isAnswerMatching', 'answers', 'runtimeOptions', `return ${condition}`).call(
-                this,
-                this.isAnswerMatching,
-                this.answers,
-                this.runtimeOptions,
-              );
-          } catch (error) {
-            console.error(error);
-            valid = valid || true;
-          }
-        }
-      }
-
-      return valid;
-    },
-
-    // Function used by the scenario conditions
-    isAnswerMatching(questionCode, answerCode) {
-      return this?.answers[questionCode] && this?.answers[questionCode][0]?.code === answerCode;
-    },
-
     callAction(action) {
       if (action.type === 'MODAL') {
         if (action.component === 'PbProjectItemSave') {

package/src/components/restitution/PbRestitutionBody.vue

@@ -72,6 +72,7 @@ import MLink from '../mozaic/link/MLink';
 import { priceFormatter } from '../../service/priceFormatter';
 import PbRestitutionBlock from './PbRestitutionBlock';
 import MNotification from '../mozaic/notifications/MNotification';
+import { areConditionsValid } from '../../service/scenarioConditionals';
 
 export default {
   name: 'PbRestitutionBody',
@@ -186,44 +187,7 @@ export default {
     },
 
     areConditionsValid(conditions) {
-      let valid = true;
-
-      if (conditions) {
-        valid = false;
-        for (const condition of conditions) {
-          try {
-            let conditionValid = new Function(
-              'isAnswerMatching',
-              'isAnswerContaining',
-              'answers',
-              'runtimeOptions',
-              `return ${condition}`,
-            ).call(this, this.isAnswerMatching, this.isAnswerContaining, this.answers, this.runtimeOptions);
-
-            valid = valid || conditionValid;
-          } catch (error) {
-            console.error(error);
-            valid = valid || true;
-          }
-        }
-      }
-
-      return valid;
-    },
-
-    // Function used by the scenario conditions
-    isAnswerMatching(questionCode, answerCode) {
-      return this?.answers && this?.answers[questionCode] && this?.answers[questionCode][0]?.code === answerCode;
-    },
-
-    isAnswerContaining(questionCode, answerCode) {
-      return (
-        this?.answers &&
-        this?.answers[questionCode] &&
-        this?.answers[questionCode].findIndex((elt) => {
-          return elt.code === answerCode;
-        }) > -1
-      );
+      return areConditionsValid(conditions, this.answers, this.runtimeOptions);
     },
   },
 };

package/src/components/scenario/PbScenario-Features-Skippable-Event.stories.mdx

@@ -0,0 +1,325 @@
+import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
+import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import PbScenario from './PbScenario';
+import DEFAULT_PAYLOAD from './default-payload.json';
+import { TemplateSandbox } from './PbScenario.stories.mdx';
+
+<Meta
+  title="Project Booster/Scenario/ 🦠 PbScenario/Features/skippable answers"
+  component={PbScenario}
+  argTypes={{
+    scenarios: {
+      table: {
+        defaultValue: {
+          summary: 'object',
+          detail: JSON.stringify(DEFAULT_PAYLOAD, null, '  '),
+        },
+      },
+      control: {
+        type: 'object',
+      },
+    },
+    onScenarioCompleted: {
+      action: 'Scenario completed',
+      table: { disable: true },
+    },
+    onScenarioEvent: {
+      action: 'Scenario event occured',
+      table: { disable: true },
+    },
+  }}
+  decorators={[nestedAppDecorator({}, [{ path: '/steps/:stepCode/previous/:answers', component: PbScenario }])]}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+/>
+
+<Anchor storyId="project-booster-scenario-pbscenario-features--skippable-scenario" />
+
+## Skippable with answer
+
+Conditions can be applied to next steps:
+
+```json
+{
+   "skippable": [
+   "isAnswer":true,
+     {
+       "label": "Skip"
+     }
+   ],
+}
+```
+
+When the isAnswer is true the step-completed sended and the state history updated
+
+export const skippableEventWithDefaultAnswerPayload = {
+  '__START__': {
+    code: '__START__',
+    type: 'SCENARIO',
+    stepCode: 'MAIN_SCENARIO',
+  },
+  'MAIN_SCENARIO': {
+    code: 'MAIN_SCENARIO',
+    type: 'SCENARIO',
+    stepCode: 'SCENARIO-1',
+  },
+  'SCENARIO-1': {
+    code: 'SCENARIO-1',
+    type: 'STEP',
+    component: 'PbQuestion',
+    payload: {
+      skippable: {
+        isAnswer: true,
+        defaultAnswer: {
+          code: 'NONE',
+          value: 'NONE',
+        },
+        label: 'Skip',
+        theme: 'bordered',
+        rightIcon:
+          'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Right_24px.svg',
+        leftIcon:
+          'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_24px.svg',
+        nextStep: {
+          code: '__END__',
+        },
+      },
+      viewModel: {
+        label: 'The question title',
+        answersComponent: 'PbCard',
+      },
+      answers: {
+        'ANSWER-1': {
+          code: 'ANSWER-1',
+          viewModel: {
+            title: 'Answer 1',
+          },
+        },
+        'ANSWER-2': {
+          code: 'ANSWER-2',
+          viewModel: {
+            title: 'Answer 2',
+          },
+        },
+        'ANSWER-3': {
+          code: 'ANSWER-3',
+          viewModel: {
+            title: 'Answer 3',
+          },
+        },
+        'ANSWER-4': {
+          code: 'ANSWER-4',
+          viewModel: {
+            title: 'Answer 4',
+          },
+        },
+      },
+    },
+    nextStep: {
+      code: '__END__',
+    },
+  },
+  '__END__': {
+    code: '__END__',
+    type: 'STEP',
+    component: 'PbQuestion',
+    payload: {
+      viewModel: {
+        label: 'Fin',
+      },
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(skippableEventWithDefaultAnswerPayload, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Skippable event with default answer"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{ scenarios: skippableEventWithDefaultAnswerPayload, minHeight: '120vh' }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+export const skippableWithoutEventQuestionPayload = {
+  '__START__': {
+    code: '__START__',
+    type: 'SCENARIO',
+    stepCode: 'MAIN_SCENARIO',
+  },
+  'MAIN_SCENARIO': {
+    code: 'MAIN_SCENARIO',
+    type: 'SCENARIO',
+    stepCode: 'SCENARIO-1',
+  },
+  'SCENARIO-1': {
+    code: 'SCENARIO-1',
+    type: 'STEP',
+    component: 'PbQuestion',
+    payload: {
+      skippable: {
+        isAnswer: false,
+        label: 'Skip',
+        theme: 'bordered',
+        rightIcon:
+          'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Right_24px.svg',
+        leftIcon:
+          'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_24px.svg',
+        nextStep: {
+          code: '__END__',
+        },
+      },
+      viewModel: {
+        label: 'The question title',
+        answersComponent: 'PbCard',
+      },
+      answers: {
+        'ANSWER-1': {
+          code: 'ANSWER-1',
+          viewModel: {
+            title: 'Answer 1',
+          },
+        },
+        'ANSWER-2': {
+          code: 'ANSWER-2',
+          viewModel: {
+            title: 'Answer 2',
+          },
+        },
+        'ANSWER-3': {
+          code: 'ANSWER-3',
+          viewModel: {
+            title: 'Answer 3',
+          },
+        },
+        'ANSWER-4': {
+          code: 'ANSWER-4',
+          viewModel: {
+            title: 'Answer 4',
+          },
+        },
+      },
+    },
+    nextStep: {
+      code: '__END__',
+    },
+  },
+  '__END__': {
+    code: '__END__',
+    type: 'STEP',
+    component: 'PbQuestion',
+    payload: {
+      viewModel: {
+        label: 'Fin',
+      },
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(skippableWithoutEventQuestionPayload, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Skippable without event"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{ scenarios: skippableWithoutEventQuestionPayload, minHeight: '120vh' }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>
+
+export const skippableEventWithEmptyArrayPayload = {
+  '__START__': {
+    code: '__START__',
+    type: 'SCENARIO',
+    stepCode: 'MAIN_SCENARIO',
+  },
+  'MAIN_SCENARIO': {
+    code: 'MAIN_SCENARIO',
+    type: 'SCENARIO',
+    stepCode: 'SCENARIO-1',
+  },
+  'SCENARIO-1': {
+    code: 'SCENARIO-1',
+    type: 'STEP',
+    component: 'PbQuestion',
+    payload: {
+      skippable: {
+        isAnswer: true,
+        label: 'Skip',
+        theme: 'bordered',
+        rightIcon:
+          'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Right_24px.svg',
+        leftIcon:
+          'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_24px.svg',
+        nextStep: {
+          code: '__END__',
+        },
+      },
+      viewModel: {
+        label: 'The question title',
+        answersComponent: 'PbCard',
+      },
+      answers: {
+        'ANSWER-1': {
+          code: 'ANSWER-1',
+          viewModel: {
+            title: 'Answer 1',
+          },
+        },
+        'ANSWER-2': {
+          code: 'ANSWER-2',
+          viewModel: {
+            title: 'Answer 2',
+          },
+        },
+        'ANSWER-3': {
+          code: 'ANSWER-3',
+          viewModel: {
+            title: 'Answer 3',
+          },
+        },
+        'ANSWER-4': {
+          code: 'ANSWER-4',
+          viewModel: {
+            title: 'Answer 4',
+          },
+        },
+      },
+    },
+    nextStep: {
+      code: '__END__',
+    },
+  },
+  '__END__': {
+    code: '__END__',
+    type: 'STEP',
+    component: 'PbQuestion',
+    payload: {
+      viewModel: {
+        label: 'Fin',
+      },
+    },
+  },
+};
+
+<Source language="json" code={JSON.stringify(skippableEventWithEmptyArrayPayload, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Skippable event with empty array"
+    inline={false}
+    height="862px"
+    parameters={{ controls: { disable: true } }}
+    args={{ scenarios: skippableEventWithEmptyArrayPayload, minHeight: '120vh' }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

package/src/components/scenario/PbScenario.vue

@@ -89,6 +89,7 @@ import PbRestitution from '../restitution/PbRestitution';
 import PbSmartProgressionPrice from '../progression-price/PbSmartProgressionPrice';
 import PbSpaceInput from '../question/space-input/PbSpaceInput';
 import PbUploadDocument from '../question/upload-document/PbUploadDocument';
+import { areConditionsValid } from '../../service/scenarioConditionals';
 
 export default {
   name: 'PbScenario',
@@ -301,8 +302,10 @@ export default {
     };
     const handleStepCompleted = ({ answers, nextStep }) => {
       disablePointerEvents();
-      state.value.answers[state.value.displayedStep.code] = answers;
-      emitEventToPipeline('STEP-COMPLETED', answers);
+      if (answers) {
+        state.value.answers[state.value.displayedStep.code] = answers;
+        emitEventToPipeline('STEP-COMPLETED', answers);
+      }
 
       if (!nextStep) {
         nextStep = state.value.displayedStep?.nextStep;
@@ -444,7 +447,7 @@ export default {
 
       if (nextStep?.conditionals) {
         for (const conditional of nextStep.conditionals) {
-          if (areConditionsValid(conditional.conditions)) {
+          if (areConditionsValid(conditional.conditions, state.value.answers, props.runtimeOptions)) {
             resultingNextStep = computeNextStep(conditional.nextStep);
             break;
           }
@@ -455,42 +458,7 @@ export default {
 
       return resultingNextStep;
     };
-    const areConditionsValid = (conditions) => {
-      let valid = true;
-
-      if (conditions) {
-        valid = false;
-        for (const condition of conditions) {
-          valid =
-            valid ||
-            new Function(
-              'isAnswerMatching',
-              'isAnswerContaining',
-              'answers',
-              'runtimeOptions',
-              `return ${condition}`,
-            ).call(this, isAnswerMatching, isAnswerContaining, state.value.answers, props.runtimeOptions);
-        }
-      }
 
-      return valid;
-    };
-    // Function used by the scenario conditions
-    const isAnswerMatching = (questionCode, answerCode) => {
-      return (
-        state.value.answers[questionCode] &&
-        state.value.answers[questionCode][0] &&
-        state.value.answers[questionCode][0].code === answerCode
-      );
-    };
-    const isAnswerContaining = (questionCode, answerCode) => {
-      return (
-        state.value.answers[questionCode] &&
-        state.value.answers[questionCode].findIndex((elt) => {
-          return elt.code === answerCode;
-        }) > -1
-      );
-    };
     const stepAnimationName = () => {
       const componentName = state.value.currentStep?.component;
       let animationName = 'pb-scenario__step--slide';

package/src/components/scenario/scenarii/appointment-qualification-kitchen.json

@@ -295,6 +295,7 @@
       },
       "skippable": [
         {
+          "isAnswer": true,
           "label": "Ajouter un plan plus tard",
           "theme": "text-primary",
           "width": "full",
@@ -304,6 +305,7 @@
           }
         },
         {
+          "isAnswer": true,
           "label": "Ajouter un plan",
           "theme": "solid",
           "width": "full",
@@ -403,6 +405,7 @@
       },
       "skippable": [
         {
+          "isAnswer": true,
           "label": "Ajouter un plan plus tard",
           "theme": "text-primary",
           "width": "full",

package/src/service/scenarioConditionals.js

@@ -0,0 +1,44 @@
+function Condition(answers, runtimeOptions, condition) {
+  this.answers = answers;
+  this.runtimeOptions = runtimeOptions;
+  this.condition = condition;
+
+  this.isAnswerMatching = (questionCode, answerCode) => {
+    return this.answers[questionCode] && this.answers[questionCode][0]?.code === answerCode;
+  };
+
+  this.isAnswerContaining = (questionCode, answerCode) => {
+    return (
+      this.answers[questionCode] &&
+      this.answers[questionCode].findIndex((elt) => {
+        return elt.code === answerCode;
+      }) > -1
+    );
+  };
+
+  this.isValid = new Function(
+    'isAnswerMatching',
+    'isAnswerContaining',
+    'answers',
+    'runtimeOptions',
+    `return ${condition}`,
+  ).call(this, this.isAnswerMatching, this.isAnswerContaining, this.answers, this.runtimeOptions);
+}
+
+export const areConditionsValid = (conditions, answers, runtimeOptions) => {
+  let valid = true;
+
+  if (conditions) {
+    valid = false;
+    for (const condition of conditions) {
+      try {
+        valid = valid || new Condition(answers, runtimeOptions, condition).isValid;
+      } catch (error) {
+        console.error(error);
+        valid = valid || true;
+      }
+    }
+  }
+
+  return valid;
+};

package/src/store/modules/appointmentQualificationStore.js

@@ -164,6 +164,7 @@ export default {
           formattedScenario[key].payload.viewModel['alwaysDisplaySkippable'] = true;
           formattedScenario[key].payload['skippable'] = [
             {
+              isAnswer: true,
               defaultAnswer: {
                 code: selectedAnswers[key][0]['code'],
               },