project-booster-vue 9.34.0 → 9.35.0

package/package.json

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

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": [