project-booster-vue 9.16.3 → 9.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.16.3",
+  "version": "9.17.2",
   "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,51 @@ 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),
+    Object.fromEntries(answers),
+    defaultValue,
+    runtimeOptions,
+  );
+};
+
+export const decorate = (
+  answers: Map<string, ScenarioStepAnswer[]>,
+  runtimeOptions = {},
+  valueToDecorate: string,
+  defaultValue = '',
+) => {
+  let decoratedValue = valueToDecorate;
+  if (valueToDecorate) {
+    const stringToEval = `\`${valueToDecorate}\``;
+    try {
+      decoratedValue = doEval(answers, stringToEval, defaultValue, runtimeOptions);
+    } catch (error) {
+      decoratedValue = valueToDecorate || defaultValue;
+    }
+  }
+  return decoratedValue;
+};
+
 export default defineComponent({
   name: 'PbQuestion',
 
@@ -385,6 +459,7 @@ export default defineComponent({
     dialog: undefined as undefined | ScenarioStepAnswerDialog,
     displayVideo: false,
     pbQuestionActionsButtonsMaxHeight: 0,
+    decorate,
   }),
 
   computed: {
@@ -474,33 +549,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 +596,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 +682,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,