project-booster-vue 9.30.1 → 9.31.0

package/package.json

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

package/src/components/warning-message/PbWarningMessage.stories.mdx

@@ -4,6 +4,7 @@ import cloneDeep from 'lodash.clonedeep';
 import PbWarningMessage from './PbWarningMessage';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import WITHOUT_EXPLAIN_LINK from './without-explain-link.json';
+import WITH_MODAL from './with-modal.json';
 
 <Meta
   title="Project Booster/Components/Warning Message/PbWarningMessage 🦠"
@@ -57,3 +58,11 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+# `PbWarningMessage` - With Modal
+
+<Canvas>
+  <Story name="With Modal" args={{ payload: WITH_MODAL }}>
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

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

@@ -26,7 +26,16 @@
           <h3>{{ payload.viewModel.subtitle }}</h3>
           <p>{{ payload.viewModel.content }}</p>
           <div class="pb-warning-message__container__message__right__link" v-if="payload.viewModel.explainLink">
-            <a :href="payload.viewModel.explainLink.href">{{ payload.viewModel.explainLink.label }}</a>
+            <a
+              v-if="payload.viewModel.explainLink.action"
+              href="#"
+              @click.prevent="handleHelpDialog(payload.viewModel.explainLink.action.viewModelDialog)"
+            >
+              {{ payload.viewModel.explainLink.label }}
+            </a>
+            <a v-else :href="payload.viewModel.explainLink.href">
+              {{ payload.viewModel.explainLink.label }}
+            </a>
           </div>
         </div>
       </m-flex>
@@ -53,18 +62,44 @@
         />
       </m-flex>
     </div>
+
+    <m-dialog
+      class="pb-warning-message__dialog-help"
+      :show-dialog="displayDialogHelp"
+      width="771px"
+      height="492px"
+      maxHeight="100vh"
+      @update:show-dialog="handleHelpDialog"
+      v-if="dialogHelpContent"
+    >
+      <template #header>
+        <div class="pb-warning-message__dialog-help__title">
+          <h2>{{ dialogHelpContent.headerTitle }}</h2>
+        </div>
+      </template>
+      <template #body>
+        <div class="pb-warning-message__dialog-help__body" v-html="dialogHelpContent.contentHtml"></div>
+      </template>
+      <template v-slot:footer>
+        <m-flex class="pb-question__dialog-help__footer" align-items="center" justify-content="center">
+          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleHelpDialog"></m-button>
+        </m-flex>
+      </template>
+    </m-dialog>
   </m-flex>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
 import MFlex from './../mozaic/flex/MFlex.vue';
 import MLink from '../mozaic/link/MLink.vue';
 import MButton from '../mozaic/buttons/MButton.vue';
+import MDialog from '../mozaic/dialog/MDialog.vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import SVGInjector from 'svg-injector';
 import { WarningMessagePayloadAction } from '@/types/pb/WarningMessage';
+import { DialogContent } from './dialogContent';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 const WARNING_ICON =
@@ -76,6 +111,7 @@ export default defineComponent({
     MFlex,
     MLink,
     MButton,
+    MDialog,
   },
   props: {
     /**
@@ -146,6 +182,13 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const componentId = uuidv4();
+    const displayDialogHelp = ref(false);
+    const dialogHelpContent = ref();
+
+    const handleHelpDialog = (content: DialogContent) => {
+      displayDialogHelp.value = !displayDialogHelp.value;
+      dialogHelpContent.value = content;
+    };
 
     const skipQuestion = () => {
       /**
@@ -168,6 +211,9 @@ export default defineComponent({
       skipQuestion,
       BACK_ICON,
       WARNING_ICON,
+      displayDialogHelp,
+      handleHelpDialog,
+      dialogHelpContent,
     };
   },
 });
@@ -184,7 +230,13 @@ $responsive-breakpoint: 'm';
   @include set-font-face('regular');
   flex-grow: 1;
   margin: 0 auto;
-  width: calc(100% - #{$mu050} - #{$mu050});
+  padding: 0 $mu100;
+  width: calc(100% - #{$mu100} - #{$mu100});
+
+  @include set-from-screen($responsive-breakpoint) {
+    width: calc(100% - #{$mu200} - #{$mu200});
+  }
+
   &__back-button-container {
     align-self: flex-start;
   }
@@ -251,7 +303,9 @@ $responsive-breakpoint: 'm';
   }
 
   &__container {
-    width: 511px;
+    @include set-from-screen($responsive-breakpoint) {
+      width: 511px;
+    }
   }
 
   &__container__message__left {
@@ -274,7 +328,10 @@ $responsive-breakpoint: 'm';
 
   &__container--button {
     margin: $mu250 auto 0 auto;
-    width: 311px;
+
+    @include set-from-screen($responsive-breakpoint) {
+      width: 311px;
+    }
 
     &__ok {
       margin-bottom: $mu100;
@@ -282,3 +339,28 @@ $responsive-breakpoint: 'm';
   }
 }
 </style>
+
+<style lang="scss">
+@import 'pb-variables';
+
+.pb-warning-message {
+  &__dialog-help {
+    &__title {
+      padding: $mu250 $mu250 0 $mu250;
+    }
+
+    &__body {
+      padding: 0 $mu250;
+      @include set-font-scale('05', 'l');
+      &__image {
+        background-size: cover;
+        padding: 120px 0;
+      }
+    }
+
+    &__footer {
+      padding: $mu100 $mu250 $mu250 $mu250;
+    }
+  }
+}
+</style>

package/src/components/warning-message/dialogContent.ts

@@ -0,0 +1,4 @@
+export interface DialogContent {
+  headerTitle: string;
+  contentHtml: string;
+}

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

@@ -0,0 +1,38 @@
+{
+  "viewModel": {
+    "backLabel": "Question précédente",
+    "label": "Vos travaux dans un appartement",
+    "subtitle": "Nous attirons votre attention !",
+    "content": "La pose d’une pompe à chaleur n’est pas adaptée a un appartement. Nous n’avons pas d’offre pour les appartements aujourd’hui..",
+    "explainLink": {
+      "type": "link",
+      "label": "Comment faire des travaux de rénovation énergétique en tant que locataire ?",
+      "action": {
+        "viewModelDialog": {
+          "headerTitle": "Votre travaux dans un appartement",
+          "contentHtml": "Mon contenu de modal ici"
+        }
+      }
+    }
+  },
+  "callToActions": [
+    {
+      "type": "button",
+      "label": "Ok, poursuivre l'estimation",
+      "action": {
+        "type": "STEP",
+        "code": "__END__"
+      },
+      "bordered": false
+    },
+    {
+      "type": "button",
+      "label": "Changer de le type de propriété",
+      "action": {
+        "type": "STEP",
+        "code": "__BACK__"
+      },
+      "bordered": true
+    }
+  ]
+}