project-booster-vue 9.16.2 → 9.17.1

package/package.json

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

package/src/components/configurations/section/PbConfigurationsSection.vue

@@ -53,6 +53,14 @@
         Vous retrouverez ici vos simulation de budgets pour ce projet
       </div>
     </m-flex>
+    <m-flex class="pb-configurations-section__link-container" v-if="readOnly && project">
+      <m-link
+        class="pb-configurations-section__link-portal-oaa"
+        label="Lien vers le portail OAA"
+        size="s"
+        @click="window.open(linkPortalOaa, '_blank')"
+      />
+    </m-flex>
   </m-flex>
 </template>
 
@@ -64,6 +72,7 @@ import MFlex from '../../mozaic/flex/MFlex.vue';
 import PbAnimableLoader from '../../loader/PbAnimableLoader.vue';
 import PbConfigurationsList, { CONFIGURATION_ANIMATION_DURATION } from '../list/PbConfigurationsList.vue';
 import { mapGetters } from 'vuex';
+import MLink from '../../mozaic/link/MLink.vue';
 
 export default defineComponent({
   name: 'PbConfigurationsSection',
@@ -73,6 +82,7 @@ export default defineComponent({
     MFlex,
     PbAnimableLoader,
     PbConfigurationsList,
+    MLink,
   },
 
   props: {
@@ -97,6 +107,14 @@ export default defineComponent({
       configurationsPerPageCount: 'getConfigurationsPerPageCount',
       hasStillConfigurations: 'hasStillConfigurations',
     }),
+    ...mapGetters('projects', {
+      project: 'getProject',
+    }),
+    linkPortalOaa() {
+      return this.project
+        ? `http://rcloset.fr.corp.leroymerlin.com:81/page_tunnel_oaa/?mag=${this.project.store}`
+        : null;
+    },
   },
 
   methods: {

package/src/components/question/PbQuestion.vue

@@ -7,7 +7,8 @@
           :left-icon="BACK_ICON"
           :class="{
             'pb-question__back-button': true,
-            'pb-question__back-button--hidden': !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+            'pb-question__back-button--hidden':
+              !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
           }"
           @click="navigateTo(payload.viewModel)"
         />
@@ -19,10 +20,10 @@
         <div
           v-if="payload.viewModel.label"
           class="pb-question__title"
-          v-html="decorate(payload.viewModel.label, payload.defaultDecoratorValue)"
+          v-html="decorate(answers, runtimeOptions, payload.viewModel.label, payload.defaultDecoratorValue)"
         />
         <div v-if="payload.viewModel.subtitle" class="pb-question__subtitle">
-          {{ decorate(payload.viewModel.subtitle, payload.defaultDecoratorValue) }}
+          {{ decorate(answers, runtimeOptions, payload.viewModel.subtitle, payload.defaultDecoratorValue) }}
           <m-link
             v-if="payload.viewModel.video"
             :label="payload.viewModel.video.label"
@@ -35,14 +36,14 @@
             <div class="pb-question__video-block-image-container">
               <m-image
                 class="pb-question__video-block-image"
-                :src="decorate(payload.viewModel.videoBlock.image)"
+                :src="decorate(answers, runtimeOptions, payload.viewModel.videoBlock.image)"
                 cover
               />
             </div>
             <div class="pb-question__video-block-buttons-container">
               <m-button
-                :label="decorate(payload.viewModel.videoBlock.buttonLabel)"
-                :left-icon="decorate(payload.viewModel.videoBlock.icon)"
+                :label="decorate(answers, runtimeOptions, payload.viewModel.videoBlock.buttonLabel)"
+                :left-icon="decorate(answers, runtimeOptions, payload.viewModel.videoBlock.icon)"
                 theme="bordered-neutral"
                 @click="displayVideoGuide('')"
               />
@@ -71,25 +72,47 @@
                   :is="payload.viewModel.answersComponent"
                   v-if="payload.viewModel.answersComponent !== 'MButton'"
                   class="pb-question__answer__component"
-                  :image="decorate(answer.viewModel.image, payload.defaultDecoratorValue)"
-                  :image-title="decorate(answer.viewModel.imageTitle, payload.defaultDecoratorValue)"
-                  :image-ratio="decorate(answer.viewModel.imageRatio, payload.defaultDecoratorValue)"
-                  :flag-label="decorate(answer.viewModel.flagLabel, payload.defaultDecoratorValue)"
-                  :hero="decorate(answer.viewModel.hero, payload.defaultDecoratorValue)"
-                  :title="decorate(answer.viewModel.title, payload.defaultDecoratorValue)"
-                  :text="decorate(answer.viewModel.text, payload.defaultDecoratorValue)"
-                  :button-label="decorate(answer.viewModel.buttonLabel, payload.defaultDecoratorValue)"
-                  :button-href="decorate(answer.viewModel.href, payload.defaultDecoratorValue)"
-                  :link-label="decorate(answer.viewModel.linkLabel, payload.defaultDecoratorValue)"
-                  :type-icon="decorate(answer.viewModel.typeIcon, payload.defaultDecoratorValue)"
-                  :card-min-ratio="decorate(answer.viewModel.cardMinRatio, payload.defaultDecoratorValue)"
-                  :align-vertical="decorate(answer.viewModel.alignVertical, payload.defaultDecoratorValue)"
-                  :align-horizontal="decorate(answer.viewModel.alignHorizontal, payload.defaultDecoratorValue)"
-                  :align-text="decorate(answer.viewModel.alignText, payload.defaultDecoratorValue)"
+                  :image="decorate(answers, runtimeOptions, answer.viewModel.image, payload.defaultDecoratorValue)"
+                  :image-title="
+                    decorate(answers, runtimeOptions, answer.viewModel.imageTitle, payload.defaultDecoratorValue)
+                  "
+                  :image-ratio="
+                    decorate(answers, runtimeOptions, answer.viewModel.imageRatio, payload.defaultDecoratorValue)
+                  "
+                  :flag-label="
+                    decorate(answers, runtimeOptions, answer.viewModel.flagLabel, payload.defaultDecoratorValue)
+                  "
+                  :hero="decorate(answers, runtimeOptions, answer.viewModel.hero, payload.defaultDecoratorValue)"
+                  :title="decorate(answers, runtimeOptions, answer.viewModel.title, payload.defaultDecoratorValue)"
+                  :text="decorate(answers, runtimeOptions, answer.viewModel.text, payload.defaultDecoratorValue)"
+                  :button-label="
+                    decorate(answers, runtimeOptions, answer.viewModel.buttonLabel, payload.defaultDecoratorValue)
+                  "
+                  :button-href="decorate(answers, runtimeOptions, answer.viewModel.href, payload.defaultDecoratorValue)"
+                  :link-label="
+                    decorate(answers, runtimeOptions, answer.viewModel.linkLabel, payload.defaultDecoratorValue)
+                  "
+                  :type-icon="
+                    decorate(answers, runtimeOptions, answer.viewModel.typeIcon, payload.defaultDecoratorValue)
+                  "
+                  :card-min-ratio="
+                    decorate(answers, runtimeOptions, answer.viewModel.cardMinRatio, payload.defaultDecoratorValue)
+                  "
+                  :align-vertical="
+                    decorate(answers, runtimeOptions, answer.viewModel.alignVertical, payload.defaultDecoratorValue)
+                  "
+                  :align-horizontal="
+                    decorate(answers, runtimeOptions, answer.viewModel.alignHorizontal, payload.defaultDecoratorValue)
+                  "
+                  :align-text="
+                    decorate(answers, runtimeOptions, answer.viewModel.alignText, payload.defaultDecoratorValue)
+                  "
                   :selectable="!!payload.multiSelect"
                   :selected="selectedAnswers.get(answer.code)"
                   :disabled="isAnswerDisabled(answer)"
-                  :flattened="decorate(answer.viewModel.flattened, payload.defaultDecoratorValue)"
+                  :flattened="
+                    decorate(answers, runtimeOptions, answer.viewModel.flattened, payload.defaultDecoratorValue)
+                  "
                   @card-click="answer.viewModel.href ? '' : selectAnswer(payload.code, answer)"
                   @button-click="handleAnswerButtonClick"
                   @link-click="handleLinkClick(answer)"
@@ -97,14 +120,20 @@
                 <m-button
                   v-else
                   :disabled="isAnswerDisabled(answer)"
-                  :label="decorate(answer.viewModel.label, payload.defaultDecoratorValue)"
-                  :type="decorate(answer.viewModel.type, payload.defaultDecoratorValue)"
-                  :theme="decorate(answer.viewModel.theme, payload.defaultDecoratorValue)"
-                  :left-icon="decorate(answer.viewModel.leftIcon, payload.defaultDecoratorValue)"
-                  :right-icon="decorate(answer.viewModel.rightIcon, payload.defaultDecoratorValue)"
-                  :href="decorate(answer.viewModel.href, payload.defaultDecoratorValue)"
-                  :width="decorate(answer.viewModel.width, payload.defaultDecoratorValue)"
-                  :widthFromM="decorate(answer.viewModel.widthFromM, payload.defaultDecoratorValue)"
+                  :label="decorate(answers, runtimeOptions, answer.viewModel.label, payload.defaultDecoratorValue)"
+                  :type="decorate(answers, runtimeOptions, answer.viewModel.type, payload.defaultDecoratorValue)"
+                  :theme="decorate(answers, runtimeOptions, answer.viewModel.theme, payload.defaultDecoratorValue)"
+                  :left-icon="
+                    decorate(answers, runtimeOptions, answer.viewModel.leftIcon, payload.defaultDecoratorValue)
+                  "
+                  :right-icon="
+                    decorate(answers, runtimeOptions, answer.viewModel.rightIcon, payload.defaultDecoratorValue)
+                  "
+                  :href="decorate(answers, runtimeOptions, answer.viewModel.href, payload.defaultDecoratorValue)"
+                  :width="decorate(answers, runtimeOptions, answer.viewModel.width, payload.defaultDecoratorValue)"
+                  :widthFromM="
+                    decorate(answers, runtimeOptions, answer.viewModel.widthFromM, payload.defaultDecoratorValue)
+                  "
                   @click="selectAnswer(payload.code, answer)"
                 />
               </div>
@@ -296,6 +325,50 @@ const BACK_ICON =
 const INFO_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Notification_Information_24px.svg';
 
+// Function used by the scenario conditions
+const getAnswerValue = (answers: Map<string, ScenarioStepAnswer[]>) => {
+  return (answerCode: string, path: string) => {
+    let answerValue: ScenarioStepAnswer | undefined = undefined;
+    if (answers?.get(answerCode)) {
+      const answerValues = answers.get(answerCode) ?? [];
+      answerValue = objectPath.get(answerValues[0], path);
+    }
+    return answerValue;
+  };
+};
+
+export const doEval = (
+  answers: Map<string, ScenarioStepAnswer[]>,
+  valueToEval: string,
+  defaultValue: string,
+  runtimeOptions: any,
+) => {
+  return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
+    this,
+    getAnswerValue(answers),
+    answers,
+    defaultValue,
+    runtimeOptions,
+  );
+};
+
+export const decorate = (
+  answers: Map<string, ScenarioStepAnswer[]>,
+  runtimeOptions = {},
+  valueToDecorate: string,
+  defaultValue = '',
+) => {
+  if (valueToDecorate) {
+    valueToDecorate = `\`${valueToDecorate}\``;
+    try {
+      return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
+    } catch (error) {
+      return valueToDecorate || defaultValue;
+    }
+  }
+  return valueToDecorate;
+};
+
 export default defineComponent({
   name: 'PbQuestion',
 
@@ -385,6 +458,7 @@ export default defineComponent({
     dialog: undefined as undefined | ScenarioStepAnswerDialog,
     displayVideo: false,
     pbQuestionActionsButtonsMaxHeight: 0,
+    decorate,
   }),
 
   computed: {
@@ -474,33 +548,6 @@ export default defineComponent({
 
       this.updatePbQuestionActionsButtonsSizeHeight();
     },
-    decorate(valueToDecorate: string, defaultValue = '') {
-      if (valueToDecorate) {
-        valueToDecorate = `\`${valueToDecorate}\``;
-        try {
-          return this.doEval(valueToDecorate, defaultValue);
-        } catch (e) {
-          console.error(e);
-          return valueToDecorate;
-        }
-      }
-      return valueToDecorate;
-    },
-    decorateBoolean(valueToDecorate: string, defaultValue = false) {
-      if (valueToDecorate) {
-        return this.doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    },
-    doEval(valueToEval: string, defaultValue: string | boolean) {
-      return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-        this,
-        this.getAnswerValue,
-        Object.fromEntries(this.answers),
-        defaultValue,
-        this.runtimeOptions,
-      );
-    },
     isShowingFooter(viewModel: ScenarioStepAnswerViewModel) {
       return viewModel.footer && areConditionsValid(viewModel.footer.conditions!, this.answers, this.runtimeOptions);
     },
@@ -548,14 +595,6 @@ export default defineComponent({
       });
     },
     // Function used by the scenario conditions
-    getAnswerValue(answerCode: string, path: string) {
-      if (!this.answers.get(answerCode) || this.answers.get(answerCode)?.length === 0) {
-        return null;
-      }
-
-      return objectPath.get(this.answers.get(answerCode)?.at(0) as any, path);
-    },
-    // Function used by the scenario conditions
     selectedAnswersNumber() {
       let selectedAnswersNumber = 0;
 
@@ -642,7 +681,7 @@ export default defineComponent({
     },
     navigateTo(viewModel: ScenarioStepViewModel) {
       if (viewModel.backLink) {
-        window.location = this.decorate(viewModel.backLink);
+        window.location = decorate(this.answers, this.runtimeOptions, viewModel.backLink, '');
       } else {
         /**
          * Emitted when go back link is clicked

package/src/components/question/amount-input/PbAmountInput.stories.mdx

@@ -120,7 +120,7 @@ It is possible to inject a value for the component from a previous answer. To do
 
 export const valuePayload = {
   value: {
-    amount: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForAmount')",
+    amount: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForAmount')}",
   },
 };
 
@@ -137,7 +137,7 @@ export const valueWithFallbackPayload = {
     amount: '123',
   },
   value: {
-    amount: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForAmount') || defaultValue.amount",
+    amount: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForAmount') || defaultValue.amount}",
   },
 };
 
@@ -149,13 +149,15 @@ parameter is the answer Id, the second is an optionnal path to extract a spcific
 It will try to find a value in a previous answer for a question with id `LMFR_PREVIOUS_QUESTION`,
 provided thanks to the `answers` prop. If no value is found, it will use the `defaultDecoratorValue` as a fallback.
 
-export const previousAnswers = {
-  LMFR_PREVIOUS_QUESTION: [
-    {
-      pathForAmount: '456',
-    },
-  ],
-};
+export const previousAnswers = new Map(
+  Object.entries({
+    LMFR_PREVIOUS_QUESTION: [
+      {
+        pathForAmount: '456',
+      },
+    ],
+  }),
+);
 
 <Source language="json" code={JSON.stringify(previousAnswers, null, '  ')} />
 

package/src/components/question/amount-input/PbAmountInput.vue

@@ -7,7 +7,7 @@
         :class="{
           'pb-amount-input__back-button': true,
           'pb-amount-input__back-button--hidden':
-            !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
       />
@@ -64,6 +64,7 @@ import MTextInput from './../../mozaic/text-input/MTextInput.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { AmountInputPayload } from '@/components/question/amount-input/AmountInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { decorate } from '@/components/question/PbQuestion.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -85,45 +86,6 @@ const initValidation = (componentId: string, computedPayload: ComputedRef<Amount
   return validationSchema;
 };
 
-// Function used by the scenario conditions
-const getAnswerValue = (answers: Map<string, ScenarioStepAnswer[]>) => {
-  return (answerCode: string, path: string) => {
-    let answerValue: ScenarioStepAnswer | undefined = undefined;
-    if (answers?.get(answerCode)) {
-      const answerValues = answers.get(answerCode) ?? [];
-      answerValue = objectPath.get(answerValues[0], path);
-    }
-    return answerValue;
-  };
-};
-
-const doEval = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToEval: string,
-  defaultValue: string,
-  runtimeOptions: any,
-) => {
-  return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-    this,
-    getAnswerValue(answers),
-    answers,
-    defaultValue,
-    runtimeOptions,
-  );
-};
-
-const decorate = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToDecorate: string,
-  defaultValue = '',
-  runtimeOptions: any,
-) => {
-  if (valueToDecorate) {
-    return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
-  }
-  return valueToDecorate;
-};
-
 const computeDefaultValue = (
   runtimeOptions: any,
   answers: Map<string, ScenarioStepAnswer[]>,
@@ -133,9 +95,9 @@ const computeDefaultValue = (
   if (computedPayload?.value?.value) {
     amount = decorate(
       answers,
+      runtimeOptions,
       computedPayload?.value?.value?.amount,
       computedPayload?.value?.defaultDecoratorValue,
-      runtimeOptions,
     );
   }
   return amount;
@@ -188,7 +150,7 @@ export default defineComponent({
      */
     answers: {
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
-      default: () => ({}),
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
   },
 

package/src/components/question/city-search/PbCitySearch.stories.mdx

@@ -132,9 +132,9 @@ export const valuePayload = {
   },
   value: {
     city: {
-      name: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForName') || defaultValue.city.name",
-      region: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForRegion') || defaultValue.city.region",
-      inseeCode: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForInseeCode') || defaultValue.city.inseeCode",
+      name: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForName') || defaultValue.city.name}",
+      region: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForRegion') || defaultValue.city.region}",
+      inseeCode: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForInseeCode') || defaultValue.city.inseeCode}",
     },
   },
 };
@@ -159,15 +159,17 @@ parameter is the answer Id, the second is an optionnal path to extract a spcific
 
 ## Value injection from previous answer
 
-export const previousAnswers = {
-  LMFR_PREVIOUS_QUESTION: [
-    {
-      pathForName: 'Ronchin',
-      pathForRegion: 'Hauts-de-France',
-      pathForInseeCode: '59507',
-    },
-  ],
-};
+export const previousAnswers = new Map(
+  Object.entries({
+    LMFR_PREVIOUS_QUESTION: [
+      {
+        pathForName: 'Ronchin',
+        pathForRegion: 'Hauts-de-France',
+        pathForInseeCode: '59507',
+      },
+    ],
+  }),
+);
 
 Reuse the same payload as for default value and add an answer object to the component props :
 

package/src/components/question/city-search/PbCitySearch.vue

@@ -6,7 +6,8 @@
         :left-icon="BACK_ICON"
         :class="{
           'pb-city-search__back-button': true,
-          'pb-city-search__back-button--hidden': !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+          'pb-city-search__back-button--hidden':
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$router.go(-1)"
       />
@@ -96,7 +97,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
 import merge from 'lodash.merge';
@@ -109,6 +110,8 @@ import MLink from '../../mozaic/link/MLink.vue';
 import MTextInput from '../../mozaic/text-input/MTextInput.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { DebouncedFunc } from 'lodash-es';
+import { decorate } from '@/components/question/PbQuestion.vue';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -158,8 +161,8 @@ export default defineComponent({
      * The previous answers to inject
      */
     answers: {
-      type: Object,
-      default: () => ({}),
+      type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
   },
 
@@ -197,9 +200,21 @@ export default defineComponent({
 
     if (this.computedPayload?.value) {
       this.selectedCity = {
-        name: this.decorate(this?.computedPayload?.value?.city?.name, this?.computedPayload?.defaultDecoratorValue),
-        region: this.decorate(this?.computedPayload?.value?.city?.region, this?.computedPayload?.defaultDecoratorValue),
-        inseeCode: this.decorate(
+        name: decorate(
+          this.answers,
+          this.runtimeOptions,
+          this?.computedPayload?.value?.city?.name,
+          this?.computedPayload?.defaultDecoratorValue,
+        ),
+        region: decorate(
+          this.answers,
+          this.runtimeOptions,
+          this?.computedPayload?.value?.city?.region,
+          this?.computedPayload?.defaultDecoratorValue,
+        ),
+        inseeCode: decorate(
+          this.answers,
+          this.runtimeOptions,
           this?.computedPayload?.value?.city?.inseeCode,
           this?.computedPayload?.defaultDecoratorValue,
         ),
@@ -228,27 +243,6 @@ export default defineComponent({
     updateHeaderHeight() {
       this.headerHeight = this.$refs?.pbCitySearchHeader?.$el?.offsetHeight;
     },
-    decorate(valueToDecorate: string, defaultValue = '') {
-      if (valueToDecorate) {
-        return this.doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    },
-    decorateBoolean(valueToDecorate: string, defaultValue = '') {
-      if (valueToDecorate) {
-        return this.doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    },
-    doEval(valueToEval: string, defaultValue: string) {
-      return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-        this,
-        this.getAnswerValue,
-        this.answers,
-        defaultValue,
-        this.runtimeOptions,
-      );
-    },
     formatSuggestion(suggestion: google.maps.places.AutocompletePrediction) {
       let text = '';
       for (let i = 0; i < suggestion.terms.length - 1; i++) {
@@ -349,14 +343,6 @@ export default defineComponent({
         console.error(`Could not get place details for ${placeId}`, error);
       }
     },
-    // Function used by the scenario conditions
-    getAnswerValue(answerCode: string, path: string) {
-      if (!this.answers[answerCode] || this.answers[answerCode].length === 0) {
-        return null;
-      }
-
-      return objectPath.get(this.answers[answerCode][0], path);
-    },
     async handleFormValidation() {
       /**
        * Emitted when step is completed

package/src/components/question/configurations-import/PbConfigurationsImport.vue

@@ -8,7 +8,7 @@
           :class="{
             'pb-configurations-import__back-button': true,
             'pb-configurations-import__back-button--hidden':
-              !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+              !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
           }"
           @click="navigateTo(payload.viewModel)"
         />
@@ -174,6 +174,7 @@ import {
 } from '@/components/question/configurations-import/ConfigurationsImport';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { Configuration } from '@/types/pb/Configuration';
+import { decorate } from '@/components/question/PbQuestion.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -232,7 +233,7 @@ export default defineComponent({
      */
     answers: {
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
-      default: () => ({}),
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
     /**
      * Define the offset for question sticky bottom elements.
@@ -255,7 +256,7 @@ export default defineComponent({
 
     const navigateTo = (viewModel: ConfigurationsImportViewModel) => {
       if (viewModel.backLink) {
-        window.location = decorate(viewModel.backLink);
+        window.location = decorate(props.answers, props.runtimeOptions, viewModel.backLink);
       } else {
         /**
          * Emitted when go back link is clicked
@@ -265,39 +266,6 @@ export default defineComponent({
       }
     };
 
-    const decorate = (valueToDecorate: string, defaultValue = '') => {
-      if (valueToDecorate) {
-        return doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    };
-
-    const decorateBoolean = (valueToDecorate: string, defaultValue = '') => {
-      if (valueToDecorate) {
-        return doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    };
-
-    const doEval = (valueToEval: string, defaultValue: string) => {
-      return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-        this,
-        getAnswerValue,
-        props.answers,
-        defaultValue,
-        props.runtimeOptions,
-      );
-    };
-
-    const getAnswerValue = (answerCode: string, path: string) => {
-      let answerValue: ScenarioStepAnswer | undefined = undefined;
-      if (props.answers?.get(answerCode)) {
-        const answerValues = props.answers.get(answerCode) ?? [];
-        answerValue = objectPath.get(answerValues[0], path);
-      }
-      return answerValue;
-    };
-
     const displayConfigurationDialog = () => {
       showImportConfigurationDialog.value = true;
     };
@@ -342,7 +310,6 @@ export default defineComponent({
       BACK_ICON,
       INFO_ICON,
       navigateTo,
-      decorateBoolean,
       displayConfigurationDialog,
       importConfiguration,
       formatDate,

package/src/components/question/dimensions-input/PbDimensionsInput.stories.mdx

@@ -121,8 +121,8 @@ It is possible to inject a value for the component from a previous answer. To do
 
 export const valuePayload = {
   value: {
-    length: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForLength')",
-    width: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForWidth')",
+    length: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForLength')}",
+    width: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForWidth')}",
   },
 };
 
@@ -140,8 +140,8 @@ export const valueWithFallbackPayload = {
     width: '2.5',
   },
   value: {
-    length: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForLength') || defaultValue.length",
-    width: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForWidth') || defaultValue.width",
+    length: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForLength') || defaultValue.length}",
+    width: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForWidth') || defaultValue.width}",
   },
 };
 
@@ -153,14 +153,16 @@ parameter is the answer's id, the second is an optional path to extract a specif
 It will try to find a value in a previous answer for a question with id `LMFR_PREVIOUS_QUESTION`,
 provided thanks to the `answers` prop. If no value is found, it will use the `defaultDecoratorValue` as a fallback.
 
-export const previousAnswers = {
-  LMFR_PREVIOUS_QUESTION: [
-    {
-      pathForLength: '4.56',
-      pathForWidth: '7.89',
-    },
-  ],
-};
+export const previousAnswers = new Map(
+  Object.entries({
+    LMFR_PREVIOUS_QUESTION: [
+      {
+        pathForLength: '4.56',
+        pathForWidth: '7.89',
+      },
+    ],
+  }),
+);
 
 <Source language="json" code={JSON.stringify(previousAnswers, null, '  ')} />
 

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

@@ -7,7 +7,7 @@
         :class="{
           'pb-dimensions-input__back-button': true,
           'pb-dimensions-input__back-button--hidden':
-            !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
       />
@@ -102,6 +102,7 @@ import objectPath from 'object-path';
 import { ref } from 'vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { DimensionsInputPayload } from '@/components/question/dimensions-input/DimensionsInput';
+import { decorate } from '@/components/question/PbQuestion.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -142,77 +143,26 @@ const initValidation = (componentId: string, computedPayload: ComputedRef<Dimens
   return validationSchema;
 };
 
-// Function used by the scenario conditions
-const getAnswerValue = (answers: Map<string, ScenarioStepAnswer[]>) => {
-  return (answerCode: string, path: string) => {
-    let answerValue: ScenarioStepAnswer | undefined = undefined;
-    if (answers?.get(answerCode)) {
-      const answerValues = answers.get(answerCode) ?? [];
-      answerValue = objectPath.get(answerValues[0], path);
-    }
-    return answerValue;
-  };
-};
-
-const doEval = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToEval: string,
-  defaultValue: string,
-  runtimeOptions: any,
-) => {
-  return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-    this,
-    getAnswerValue(answers),
-    answers,
-    defaultValue,
-    runtimeOptions,
-  );
-};
-
-const decorate = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToDecorate: string,
-  defaultValue = '',
-  runtimeOptions: any,
-) => {
-  if (valueToDecorate) {
-    return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
-  }
-  return valueToDecorate;
-};
-
-const decorateBoolean = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToDecorate: string,
-  defaultValue = '',
-  runtimeOptions: any,
-) => {
-  if (valueToDecorate) {
-    return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
-  }
-  return valueToDecorate;
-};
-
 const computeDefaultValue = (
   runtimeOptions: any,
   answers: Map<string, ScenarioStepAnswer[]>,
   computedPayload: ComputedRef<DimensionsInputPayload>,
 ) => {
-  let length = null;
-  let width = null;
+  let length = ref(null);
+  let width = ref(null);
 
   if (computedPayload?.value?.value) {
-    length = decorate(
+    length.value = decorate(
       answers,
+      runtimeOptions,
       computedPayload?.value?.value?.length,
       computedPayload?.value?.defaultDecoratorValue,
-      runtimeOptions,
     );
-    width = decorate(
+    width.value = decorate(
       answers,
+      runtimeOptions,
       computedPayload?.value?.value?.width,
       computedPayload?.value?.defaultDecoratorValue,
-      runtimeOptions,
     );
   }
 
@@ -266,7 +216,7 @@ export default defineComponent({
      */
     answers: {
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
-      default: () => ({}),
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
   },
 

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

@@ -6,7 +6,8 @@
         :left-icon="BACK_ICON"
         :class="{
           'pb-list-select__back-button': true,
-          'pb-list-select__back-button--hidden': !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+          'pb-list-select__back-button--hidden':
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
       />
@@ -82,6 +83,7 @@ import PbItemsList from '../../items/PbItemsList.vue';
 import { sortAnswers } from '../sortAnswers';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { Item } from '@/types/pb/Item';
+import { decorate } from '@/components/question/PbQuestion.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -136,7 +138,7 @@ export default defineComponent({
      */
     answers: {
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
-      default: () => ({}),
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
     /**
      * Define the offset for question sticky bottom elements.
@@ -199,7 +201,6 @@ export default defineComponent({
       }
       return props.payload?.viewModel?.showMore?.minItemsDisplayed ?? null;
     });
-
     const showMoreLabel = computed(() => {
       return props.payload?.viewModel?.showMore?.label ?? 'Show more';
     });
@@ -232,7 +233,6 @@ export default defineComponent({
 
       return { label, leftIcon, rightIcon };
     });
-
     const submitAnswers = () => {
       const answersToSubmit = [];
       for (const answer of selectedAnswers.value) {
@@ -262,7 +262,6 @@ export default defineComponent({
         nextStep: nextStep,
       });
     };
-
     const skipQuestion = () => {
       /**
        * Emitted when step is completed
@@ -279,34 +278,10 @@ export default defineComponent({
       });
     };
 
-    // Function used by the scenario conditions
-    const doEval = (valueToEval: string, defaultValue: string) => {
-      return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-        this,
-        getAnswerValue,
-        Object.fromEntries(props.answers),
-        defaultValue,
-        props.runtimeOptions,
-      );
-    };
-
-    const getAnswerValue = (answerCode: string, path: string) => {
-      const answers = props.answers.get(answerCode);
-      if (!answers || answers.length === 0) {
-        return null;
-      }
-      return objectPath.get(answers[0], path);
-    };
-
-    const decorateBoolean = (valueToDecorate: string, defaultValue = '') => {
-      if (valueToDecorate) {
-        return doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    };
     onMounted(() => {
       updateSelectedAnswers();
     });
+
     return {
       BACK_ICON,
       INFO_ICON,
@@ -322,7 +297,6 @@ export default defineComponent({
       itemsListProps,
       skipQuestion,
       submitAnswers,
-      decorateBoolean,
       updateSelectedAnswers,
     };
   },

package/src/components/question/name-input/PbNameInput.stories.mdx

@@ -146,8 +146,8 @@ It is possible to inject a value for the component from a previous answer. To do
 
 export const valuePayload = {
   value: {
-    projectName: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName')",
-    optin: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin')",
+    projectName: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName')}",
+    optin: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin')}",
   },
 };
 
@@ -165,8 +165,8 @@ export const valueWithFallbackPayload = {
     optin: true,
   },
   value: {
-    projectName: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName') || defaultValue.projectName",
-    optin: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin') || defaultValue.optin",
+    projectName: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName') || defaultValue.projectName}",
+    optin: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin') || defaultValue.optin}",
   },
 };
 
@@ -175,13 +175,15 @@ export const valueWithFallbackPayload = {
 It will try to find a value in a previous answer for a question with id `LMFR_PREVIOUS_QUESTION`,
 provided thanks to the `answers` prop. If no value is found, it will use the `defaultDecoratorValue` as a fallback.
 
-export const previousAnswers = {
-  LMFR_PREVIOUS_QUESTION: [
-    {
-      pathForProjectName: 'Rénover la cuisine',
-    },
-  ],
-};
+export const previousAnswers = new Map(
+  Object.entries({
+    LMFR_PREVIOUS_QUESTION: [
+      {
+        pathForProjectName: 'Rénover la cuisine',
+      },
+    ],
+  }),
+);
 
 <Source language="json" code={JSON.stringify(previousAnswers, null, '  ')} />
 
@@ -218,14 +220,16 @@ With optin value :
 
 `answers` prop to add a previous answer :
 
-export const previousAnswersWithOptin = {
-  LMFR_PREVIOUS_QUESTION: [
-    {
-      pathForProjectName: 'Rénover la cuisine',
-      pathForOptin: true,
-    },
-  ],
-};
+export const previousAnswersWithOptin = new Map(
+  Object.entries({
+    LMFR_PREVIOUS_QUESTION: [
+      {
+        pathForProjectName: 'Rénover la cuisine',
+        pathForOptin: true,
+      },
+    ],
+  }),
+);
 
 <Source language="json" code={JSON.stringify(previousAnswersWithOptin, null, '  ')} />
 
@@ -251,8 +255,8 @@ export const valueWithFallbackPayloadAndOptin = {
     optin: true,
   },
   value: {
-    projectName: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName') || defaultValue.projectName",
-    optin: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin') || defaultValue.optin",
+    projectName: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForProjectName') || defaultValue.projectName}",
+    optin: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForOptin') || defaultValue.optin}",
   },
 };
 

package/src/components/question/name-input/PbNameInput.vue

@@ -6,7 +6,8 @@
         :left-icon="BACK_ICON"
         :class="{
           'pb-name-input__back-button': true,
-          'pb-name-input__back-button--hidden': !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+          'pb-name-input__back-button--hidden':
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
       />
@@ -60,6 +61,7 @@ import MToggle from '../../mozaic/toggle/MToggle.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { NameInputPayload } from '@/components/question/name-input/NameInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { decorate } from '@/components/question/PbQuestion.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -84,58 +86,6 @@ const initValidation = (componentId: string, computedPayload: ComputedRef<NameIn
   });
   return validationSchema;
 };
-
-// Function used by the scenario conditions
-const getAnswerValue = (answers: Map<string, ScenarioStepAnswer[]>) => {
-  return (answerCode: string, path: string) => {
-    let answerValue: ScenarioStepAnswer | undefined = undefined;
-    if (answers?.get(answerCode)) {
-      const answerValues = answers.get(answerCode) ?? [];
-      answerValue = objectPath.get(answerValues[0], path);
-    }
-    return answerValue;
-  };
-};
-
-const doEval = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToEval: string,
-  defaultValue: string,
-  runtimeOptions: any,
-) => {
-  return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-    this,
-    getAnswerValue(answers),
-    answers,
-    defaultValue,
-    runtimeOptions,
-  );
-};
-
-const decorate = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToDecorate: string,
-  defaultValue = '',
-  runtimeOptions: any,
-) => {
-  if (valueToDecorate) {
-    return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
-  }
-  return valueToDecorate;
-};
-
-const decorateBoolean = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToDecorate: string,
-  defaultValue = '',
-  runtimeOptions: any,
-) => {
-  if (valueToDecorate) {
-    return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
-  }
-  return valueToDecorate;
-};
-
 const computeDefaultValue = (
   runtimeOptions: any,
   answers: Map<string, ScenarioStepAnswer[]>,
@@ -147,15 +97,15 @@ const computeDefaultValue = (
   if (computedPayload?.value?.value) {
     name.value = decorate(
       answers,
+      runtimeOptions,
       computedPayload?.value?.value?.projectName,
       computedPayload?.value?.defaultDecoratorValue,
-      runtimeOptions,
     );
     optin.value = decorate(
       answers,
+      runtimeOptions,
       computedPayload?.value?.value?.optin,
       computedPayload?.value?.defaultDecoratorValue,
-      runtimeOptions,
     );
   }
 
@@ -209,7 +159,7 @@ export default defineComponent({
      */
     answers: {
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
-      default: () => ({}),
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
   },
 

package/src/components/question/space-input/PbSpaceInput.stories.mdx

@@ -122,7 +122,7 @@ It is possible to inject a value for the component from a previous answer. To do
 
 export const valuePayload = {
   value: {
-    space: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForSpace')",
+    space: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForSpace')}",
   },
 };
 
@@ -139,7 +139,7 @@ export const valueWithFallbackPayload = {
     space: '123',
   },
   value: {
-    space: "getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForSpace') || defaultValue.space",
+    space: "${getAnswerValue('LMFR_PREVIOUS_QUESTION', 'pathForSpace') || defaultValue.space}",
   },
 };
 
@@ -148,13 +148,15 @@ export const valueWithFallbackPayload = {
 It will try to find a value in a previous answer for a question with id `LMFR_PREVIOUS_QUESTION`,
 provided thanks to the `answers` prop. If no value is found, it will use the `defaultDecoratorValue` as a fallback.
 
-export const previousAnswers = {
-  LMFR_PREVIOUS_QUESTION: [
-    {
-      pathForSpace: '456',
-    },
-  ],
-};
+export const previousAnswers = new Map(
+  Object.entries({
+    LMFR_PREVIOUS_QUESTION: [
+      {
+        pathForSpace: '456',
+      },
+    ],
+  }),
+);
 
 <Source language="json" code={JSON.stringify(previousAnswers, null, '  ')} />
 

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

@@ -6,7 +6,8 @@
         :left-icon="BACK_ICON"
         :class="{
           'pb-space-input__back-button': true,
-          'pb-space-input__back-button--hidden': !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+          'pb-space-input__back-button--hidden':
+            !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
       />
@@ -96,6 +97,7 @@ import MIcon from '../../mozaic/icon/MIcon.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { decorate } from '@/components/question/PbQuestion.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -117,57 +119,6 @@ const initValidation = (componentId: string, computedPayload: ComputedRef<SpaceI
   return validationSchema;
 };
 
-// Function used by the scenario conditions
-const getAnswerValue = (answers: Map<string, ScenarioStepAnswer[]>) => {
-  return (answerCode: string, path: string) => {
-    let answerValue: ScenarioStepAnswer | undefined = undefined;
-    if (answers?.get(answerCode)) {
-      const answerValues = answers.get(answerCode) ?? [];
-      answerValue = objectPath.get(answerValues[0], path);
-    }
-    return answerValue;
-  };
-};
-
-const doEval = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToEval: string,
-  defaultValue: string,
-  runtimeOptions: any,
-) => {
-  return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-    this,
-    getAnswerValue(answers),
-    answers,
-    defaultValue,
-    runtimeOptions,
-  );
-};
-
-const decorate = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToDecorate: string,
-  defaultValue = '',
-  runtimeOptions: any,
-) => {
-  if (valueToDecorate) {
-    return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
-  }
-  return valueToDecorate;
-};
-
-const decorateBoolean = (
-  answers: Map<string, ScenarioStepAnswer[]>,
-  valueToDecorate: string,
-  defaultValue = '',
-  runtimeOptions: any,
-) => {
-  if (valueToDecorate) {
-    return doEval(answers, valueToDecorate, defaultValue, runtimeOptions);
-  }
-  return valueToDecorate;
-};
-
 const computeDefaultValue = (
   runtimeOptions: any,
   answers: Map<string, ScenarioStepAnswer[]>,
@@ -177,9 +128,9 @@ const computeDefaultValue = (
   if (computedPayload?.value?.value) {
     space = decorate(
       answers,
+      runtimeOptions,
       computedPayload?.value?.value?.space,
       computedPayload?.value?.defaultDecoratorValue,
-      runtimeOptions,
     );
   }
   return space;
@@ -233,7 +184,7 @@ export default defineComponent({
      */
     answers: {
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
-      default: () => ({}),
+      default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
   },
 
@@ -299,7 +250,6 @@ export default defineComponent({
       computedPayload,
       handleFormSubmit,
       isShowingFooter,
-      decorateBoolean,
       skipQuestion,
     };
   },

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

@@ -8,7 +8,7 @@
           :class="{
             'pb-upload-document__back-button': true,
             'pb-upload-document__back-button--hidden':
-              !showBackButton && !decorateBoolean(payload.viewModel.forceBackButton),
+              !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
           }"
           @click="navigateTo(payload.viewModel)"
         />
@@ -156,6 +156,7 @@ import {
   UploadDocumentViewModel,
 } from '@/components/question/upload-document/UploadDocument';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { decorate, doEval } from '@/components/question/PbQuestion.vue';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -261,7 +262,7 @@ export default defineComponent({
 
     const navigateTo = (viewModel: UploadDocumentViewModel) => {
       if (viewModel.backLink) {
-        window.location = doEval(viewModel.backLink);
+        window.location = doEval(props.answers, viewModel.backLink, '', props.runtimeOptions);
       } else {
         /**
          * Emitted when go back link is clicked
@@ -271,38 +272,6 @@ export default defineComponent({
       }
     };
 
-    const decorate = (answers: Map<string, ScenarioStepAnswer[]>, valueToDecorate: string, defaultValue = '') => {
-      if (valueToDecorate) {
-        return doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    };
-
-    const decorateBoolean = (valueToDecorate: string, defaultValue = '') => {
-      if (valueToDecorate) {
-        return doEval(valueToDecorate, defaultValue);
-      }
-      return valueToDecorate;
-    };
-
-    const doEval = (valueToEval: string, defaultValue = '') => {
-      return new Function('getAnswerValue', 'answers', 'defaultValue', 'runtimeOptions', `return ${valueToEval}`).call(
-        this,
-        getAnswerValue,
-        previousAnswers,
-        defaultValue,
-        props.runtimeOptions,
-      );
-    };
-
-    const getAnswerValue = (answerCode: string, path: string) => {
-      const answers = props.answers.get(answerCode);
-      if (!answers || answers.length === 0) {
-        return null;
-      }
-      return objectPath.get(answers[0], path);
-    };
-
     const handleDisplayDialogEvent = (event: Event) => {
       if (!event) {
         pbMediaUpload.value?.$refs.pbMediaUploadFormInput.click();
@@ -350,7 +319,6 @@ export default defineComponent({
       showMoreButtonDisplayed,
       thumbnailUrl,
       decorate,
-      decorateBoolean,
       handleDisplayDialogEvent,
       validMultiSelect,
       skipQuestion,