project-booster-vue 9.34.0 → 9.35.2

package/package.json

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

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

@@ -97,6 +97,8 @@ export const answerGettersMappers: Map<string, (param: any) => void> = new Map<s
       return { width: parseFloat(width), length: parseFloat(length) };
     },
     PbListSelect: ({ value }: { value: string }): string => value,
+    PbCitySearch: ({ city }: { city: any }) => city.postalCode,
+    PbIncrementalAmountInput: ({ value }: { value: string }) => parseInt(value),
   }),
 );
 

package/src/components/projects/projects-list/PbProjectsList.vue

@@ -375,10 +375,6 @@ $responsive-breakpoint: 'm';
   &__back-button {
     justify-content: flex-start;
     margin-top: $mu200;
-
-    @include set-from-screen($responsive-breakpoint) {
-      margin-top: 0;
-    }
   }
 
   &--fade {

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

@@ -229,7 +229,12 @@ export default defineComponent({
           this?.computedPayload?.defaultDecoratorValue,
         ),
       };
-      this.searchKeyword = this?.selectedCity?.name;
+
+      if (this.selectedCity.postalCode == 'undefined') {
+        this.selectedCity = null;
+      } else {
+        this.searchKeyword = this.selectedCityToKeyword();
+      }
       this.forceHideSuggestions = true;
     }
 
@@ -344,8 +349,7 @@ export default defineComponent({
               region: selectedCity.address_components[2].short_name,
             };
 
-            this.searchKeyword =
-              this.selectedCity.postalCode + ' ' + this.selectedCity.name + ', ' + this.selectedCity.region;
+            this.searchKeyword = this.selectedCityToKeyword();
             this.$forceUpdate();
           }
         });
@@ -383,6 +387,9 @@ export default defineComponent({
         name: placeData.data[0].nom,
       };
     },
+    selectedCityToKeyword(): string {
+      return this.selectedCity?.postalCode + ' ' + this.selectedCity?.name + ', ' + this.selectedCity?.region;
+    },
   },
 });
 </script>

package/src/components/question/incremental-amount-input/IncrementalAmount.ts

@@ -3,7 +3,6 @@ export interface IncrementalAmountValidation {
   maxValue: number;
   defaultValue: number;
   requiredErrorMessage: string;
-  thresholdsIncluded: number;
   minValueErrorMessage: string;
   maxValueErrorMessage: string;
 }
@@ -11,7 +10,9 @@ export interface IncrementalAmountValidation {
 export interface IncrementalAmountViewModel {
   backLabel: string;
   label: string;
+  subtitle: string;
   actionLabel: string;
+  image: string;
   validation: IncrementalAmountValidation;
   minValue: number;
   maxValue: number;
@@ -20,5 +21,6 @@ export interface IncrementalAmountViewModel {
 
 export interface IncrementalAmountPayload {
   viewModel: IncrementalAmountViewModel;
+  value: { value: string };
   defaultDecoratorValue: string;
 }

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -40,7 +40,7 @@
 
       <m-flex class="pb-incremental-amount-input__body" justify-content="start" align-items="start">
         <m-quantity-selector
-          :value="computedPayload.viewModel.defaultValue"
+          :value="quantitySelector"
           :valuemin="computedPayload.viewModel.minValue"
           :valuemax="computedPayload.viewModel.maxValue"
           @input="handleQuantitySelector"
@@ -74,10 +74,27 @@ import { ref } from 'vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/components/question/PbQuestion.vue';
 import MQuantitySelector from '../../mozaic/quantityselector/MQuantitySelector.vue';
+import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 
+const computeDefaultValue = (
+  runtimeOptions: any,
+  answers: Map<string, ScenarioStepAnswer[]>,
+  computedPayload: ComputedRef<IncrementalAmountPayload>,
+) => {
+  let amount;
+  if (computedPayload?.value?.value) {
+    amount = decorate(
+      answers,
+      runtimeOptions,
+      computedPayload?.value?.value?.value,
+      computedPayload?.value?.defaultDecoratorValue,
+    );
+  }
+  return amount;
+};
 export default defineComponent({
   name: 'PbIncrementalAmountInput',
   components: {
@@ -94,7 +111,7 @@ export default defineComponent({
      * from the default ones.
      */
     payload: {
-      type: Object,
+      type: Object as PropType<IncrementalAmountPayload>,
       default: () => ({}),
     },
     /**
@@ -136,11 +153,17 @@ export default defineComponent({
   setup(props, { emit }) {
     const componentId = uuidv4();
     const computedPayload = computed(() => {
-      const tempPayload = cloneDeep(DEFAULT_PAYLOAD);
-      return merge(tempPayload, props.payload);
+      let tempPayload = cloneDeep(DEFAULT_PAYLOAD);
+      tempPayload = merge(tempPayload, props.payload);
+      tempPayload.viewModel.label = decorate(props.answers!, props.runtimeOptions, tempPayload.viewModel.label);
+      return tempPayload as IncrementalAmountPayload;
     });
     const pbIncrementalAmountInput = ref<HTMLElement>();
-    let quantitySelector = props.payload.viewModel.defaultValue || props.defaultValue;
+
+    let quantitySelector = parseInt(computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload)!);
+    if (!quantitySelector) {
+      quantitySelector = props.payload.viewModel.defaultValue || props.defaultValue;
+    }
 
     const handleFormSubmit = () => {
       emit(props.completedEventName, {

package/src/components/warning-message/PbWarningMessage.vue

@@ -17,10 +17,19 @@
       {{ payload.viewModel.label }}
     </div>
 
-    <div class="pb-warning-message__container--background">
+    <div class="pb-warning-message__head" v-if="payload.viewModel.headBlock">
+      <div class="pb-warning-message__head__image">
+        <img :src="payload.viewModel.headBlock.image" alt="Icon" />
+      </div>
+      <div class="pb-warning-message__head__text">
+        <p>{{ payload.viewModel.headBlock.text }}</p>
+      </div>
+    </div>
+
+    <div class="pb-warning-message__container--background" v-if="payload">
       <m-flex class="pb-warning-message__container__message">
         <div class="pb-warning-message__container__message__left">
-          <img :data-src="injectIcon(WARNING_ICON)" id="pb-warning-message-icon" alt="Icon" />
+          <img :data-src="injectIcon()" id="pb-warning-message-icon" alt="Icon" />
         </div>
         <div class="pb-warning-message__container__message__right">
           <h3>{{ payload.viewModel.subtitle }}</h3>
@@ -100,6 +109,7 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import SVGInjector from 'svg-injector';
 import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
 import { DialogContent } from './dialogContent';
+import { string } from 'yup';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 const WARNING_ICON =
@@ -151,21 +161,31 @@ export default defineComponent({
       type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
       default: () => new Map<string, ScenarioStepAnswer[]>(),
     },
+    /**
+     * Component icon
+     */
+    icon: {
+      type: string,
+      default: () => WARNING_ICON,
+    },
   },
   methods: {
-    injectIcon(icon: string) {
+    injectIcon() {
       this.$nextTick(() => {
-        const element = document.getElementById('pb-warning-message-icon');
+        const element = document.querySelector('#pb-warning-message-icon');
         if (element) {
           SVGInjector(element, {
             each: function (svg) {
-              (svg as any).setAttribute('fill', '#C65200');
+              if (svg) {
+                console.log(svg);
+                (svg as any).setAttribute('fill', '#C65200');
+              }
             },
           });
         }
       });
 
-      return icon;
+      return this.icon;
     },
     callAction(action: WarningMessagePayloadAction) {
       if (action.type === 'STEP') {
@@ -280,6 +300,23 @@ $responsive-breakpoint: 'm';
     padding: 0 0 $mu250 0;
   }
 
+  &__head {
+    &__image {
+      width: 240px;
+
+      img {
+        height: auto;
+        width: 100%;
+      }
+    }
+
+    &__text {
+      @include set-font-face('semi-bold');
+      @include set-font-scale('05', 's');
+      text-align: center;
+    }
+  }
+
   &__container__message__right {
     h3 {
       @include set-font-face('semi-bold');

package/src/components/warning-message/with-modal.json

@@ -13,6 +13,10 @@
           "contentHtml": "Mon contenu de modal ici"
         }
       }
+    },
+    "headBlock": {
+      "image": "https://storage.googleapis.com/project-booster-media/new-house/Estimation%20Construction%20Neuve%20-%20Localisation.png",
+      "text": "Isolation des combles perdus"
     }
   },
   "callToActions": [