project-booster-vue 9.55.2 → 9.55.3

package/package.json

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

package/src/components/rework/question/MPbQuestion.vue

@@ -122,7 +122,15 @@
         <m-notification class="pb-question__notifications" :type="notification.type" v-if="notification">
           <template #default>
             <strong style="font-size: 16px; line-height: 20px">{{ notification.title }}</strong>
-            <p style="font-size: 16px; line-height: 20px; margin-bottom: 0">{{ notification.content }}</p>
+            <p style="font-size: 16px; line-height: 20px; margin-bottom: 0" v-if="notification.content">
+              {{ notification.content }}
+            </p>
+            <m-link
+              style="margin-top: 15px"
+              v-if="notification?.modal"
+              :label="notification?.modal.title"
+              @click.prevent="displayNotificationDialog = true"
+            ></m-link>
           </template>
         </m-notification>
         <div class="pb-question__redirect-link" v-if="notification">
@@ -130,7 +138,7 @@
             width="full"
             width-from-xxl="full"
             width-from-l="full"
-            :href="notification.buttonHref"
+            @click.prevent="handleGoTo(notification?.buttonStepCode)"
             :label="notification.buttonText"
           />
         </div>
@@ -242,13 +250,7 @@
       </m-flexy>
     </m-container>
     <div class="pb-question__padding-bottom" v-if="!payload.helpArea" />
-    <m-flex
-      class="pb-question__help"
-      v-if="payload.helpArea"
-      direction="column"
-      align-items="center"
-      justify-content="center"
-    >
+    <m-flex class="pb-question__help" v-if="payload.helpArea" direction="column">
       <div v-for="helpItem in payload.helpArea" :key="helpItem.type">
         <div v-if="helpItem.type === 'text'">
           <p class="pb-question__help__text">{{ helpItem.label }}</p>
@@ -266,10 +268,23 @@
       </div>
     </m-flex>
 
+    <m-modal
+      :modalTitle="notification?.modal?.title"
+      :open="displayNotificationDialog"
+      @update:open="displayNotificationDialog = false"
+    >
+      <template #default>
+        <div v-html="notification?.modal?.htmlContent"></div>
+      </template>
+      <template #footer>
+        <m-button label="Fermer" @click.prevent="displayNotificationDialog = false" />
+      </template>
+    </m-modal>
+
     <m-modal
       :modalTitle="helpDialog?.viewModelDialog.headerTitle"
-      v-model="displayDialogHelp"
-      :open.sync="displayDialogHelp"
+      :open="displayDialogHelp"
+      @update:open="displayDialogHelp = false"
       v-if="helpDialog"
     >
       <template #default>
@@ -465,6 +480,7 @@ export default defineComponent({
     INFO_ICON,
     displayDialog: false,
     displayDialogHelp: false,
+    displayNotificationDialog: false,
     dialog: undefined as undefined | ScenarioStepAnswerDialog,
     helpDialog: undefined as undefined | ScenarioStepDialog,
     displayVideo: false,
@@ -794,12 +810,23 @@ export default defineComponent({
 
       if (answer.notification) {
         this.notification = answer.notification;
+
+        Object.keys(Object.fromEntries(this.selectedAnswers)).forEach((answerCode) => {
+          this.selectedAnswers.set(answerCode, false);
+        });
+        this.selectedAnswers.set(answer.code, !this.selectedAnswers.get(answer.code) ?? true);
       } else if (answer?.viewModel?.href) {
         return '';
       } else {
         return this.selectAnswer(payload.code, answer);
       }
     },
+    handleGoTo(stepCode: string) {
+      this.$emit(this.completedEventName, {
+        answers: [],
+        nextStep: stepCode,
+      });
+    },
   },
 });
 </script>
@@ -1299,6 +1326,13 @@ $answers-apparition-duration: '0.5s';
 
   &__help {
     margin-bottom: $mu250;
+
+    @include set-from-screen($responsive-breakpoint) {
+      max-width: 554px;
+      margin: 0 auto;
+      text-align: left;
+    }
+
     &__link,
     &__text {
       margin: 0;

package/src/components/rework/question/space-input/MPbSpaceInput.vue

@@ -105,29 +105,20 @@
       </m-flex>
     </form>
 
-    <m-dialog
+    <m-modal
+      :modalTitle="contentModal.headerTitle"
+      :open="showModal"
+      @update:open="showModal = false"
       class="pb-space-input__dialog"
-      :show-dialog="showModal"
-      width="680px"
-      height="520px"
-      maxHeight="100vh"
-      @update:show-dialog="handleShowModal"
-      v-if="computedPayload.helpArea"
     >
-      <template v-slot:header>
-        <div class="pb-space-input__dialog__title">
-          <h2>{{ contentModal.headerTitle }}</h2>
-        </div>
+      <template #default>
+        <h3>{{ contentModal.headerTitle }}</h3>
+        <div v-html="contentModal.htmlContent"></div>
       </template>
-      <template v-slot:body>
-        <div class="pb-space-input__dialog__body" v-html="contentModal.htmlContent"></div>
+      <template #footer>
+        <m-button label="Fermer" @click.prevent="showModal = false" />
       </template>
-      <template v-slot:footer>
-        <m-flex class="pb-space-input__dialog__footer" align-items="center" justify-content="center">
-          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleShowModal"></m-button>
-        </m-flex>
-      </template>
-    </m-dialog>
+    </m-modal>
   </m-flex>
 </template>
 
@@ -146,6 +137,7 @@ import MFlexyCol from '../../../mozaic/grid/MFlexyCol.vue';
 import MIcon from '../../../mozaic/icon/MIcon.vue';
 import MDialog from '../../../mozaic/dialog/MDialog.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
+import { MModal } from '@mozaic-ds/vue-3';
 import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
@@ -200,6 +192,7 @@ export default defineComponent({
     MTextInput,
     MIcon,
     MDialog,
+    MModal,
   },
 
   props: {

package/src/components/rework/restitution/MPbRestitutionList.vue

@@ -287,6 +287,10 @@ $responsive-breakpoint: 'm';
   display: none;
 }
 
+.pb-restitution-wrapper {
+  margin-bottom: $mu250;
+}
+
 .pb-restitution-list {
   @include set-font-face('regular');
 

package/src/components/scenario/scenarii/floor-insulation.json

@@ -68,11 +68,13 @@
             "title": "Locataire"
           },
           "notification": {
-            "type": "warning",
+            "type": "information",
             "title": "Le calcul des aides se base sur les revenus de votre propriétaire La plupart des aides sont destinées aux propriétaires.",
             "content": "Nous vous conseillons donc de vous rapprocher de votre propriétaire, c'est lui qui pourra monter le dossier d'obtention des aides pour votre projet.",
             "buttonText": "Voir d'autres solutions pour faire des économies de chauffage",
-            "buttonHref": "https://google.fr/"
+            "buttonStepCode": {
+              "code": "LMFR_FLOOR_INSULATION_ADVICE"
+            }
           }
         }
       }
@@ -123,11 +125,17 @@
             "image": "https://storage.googleapis.com/project-booster-media/energyrenovation/apartement.jpg"
           },
           "notification": {
-            "type": "warning",
-            "title": "Le calcul des aides se base sur les revenus de votre propriétaire La plupart des aides sont destinées aux propriétaires.",
-            "content": "Nous vous conseillons donc de vous rapprocher de votre propriétaire, c'est lui qui pourra monter le dossier d'obtention des aides pour votre projet.",
+            "type": "information",
+            "title": "Nous attirons votre attention ! Faire des travaux d’isolation dans un appartement nécessite certaines précautions.",
+            "modal": {
+              "link": "Voir les précautions pour isoler son appartement",
+              "title": "Nos recommandations pour vos projets de rénovations",
+              "htmlContent": " <h4 style='margin-top:0;'>Avant d’isoler votre appartement, voici quelques précautions à prendre :</h4> <ul style='padding-left:30px;'> <li>Informez-vous sur les modes d'isolation possible pour votre sol.</li> <li>Informez la copropriété de votre projet, et notamment du bruit que peuvent générer les travaux.</li> </ul>"
+            },
             "buttonText": "Voir d'autres solutions pour faire des économies de chauffage",
-            "buttonHref": "https://google.fr/"
+            "buttonStepCode": {
+              "code": "LMFR_FLOOR_INSULATION_ADVICE"
+            }
           }
         }
       }
@@ -137,7 +145,7 @@
         {
           "conditions": ["isAnswerMatching('LMFR_FLOOR_INSULATION_QUESTION_HOUSING_TYPE', 'HOUSE')"],
           "nextStep": {
-            "code": "LMFR_FLOOR_INSULATION_QUESTION_CONSTRUCTION_AGE"
+            "code": "LMFR_FLOOR_INSULATION_QUESTION_SURFACE_AREA"
           }
         }
       ]
@@ -167,8 +175,7 @@
         "NEW": {
           "code": "NEW",
           "viewModel": {
-            "title": "Moins de 2 ans",
-            "text": "Si votre logement à moins de 2 ans, vous ne serez pas éligible aux aides"
+            "title": "Moins de 2 ans"
           }
         },
         "RECENT": {
@@ -1989,7 +1996,7 @@
             "type": "MODAL",
             "dialogViewModel": {
               "headerTitle": "Pour calculer la surface de vos planchers bas à isoler c'est facile.",
-              "htmlContent": "<p>Vous devrez simplement connaître la longueur et la largeur au sol de votre cave, garage ou sous sol à isoler. Il suffit ensuite de multiplier la longueur par la largeur de la façon suivante :<br/><b>Surface de la pièce à isoler = Longueur x Largeur</b></p>"
+              "htmlContent": "<p>Vous devrez simplement connaître la longueur et la largeur au sol de votre cave, garage ou sous sol à isoler. Il suffit ensuite de multiplier la longueur par la largeur de la façon suivante :<br/><br/><b>Surface de la pièce à isoler = Longueur x Largeur</b></p>"
             }
           }
         }
@@ -2056,7 +2063,9 @@
       "viewModel": {
         "label": "Pour aller plus loin dans votre projet",
         "answersComponent": "MPbCard",
-        "forceOneCardPerLineOnMobile": true
+        "widthFromL": "1of2",
+        "forceOneCardPerLineOnMobile": true,
+        "progressBar": true
       },
       "answers": {
         "DISCOVER_OUR_HEATERS": {

package/src/types/pb/Scenario.ts

@@ -104,9 +104,14 @@ export interface ScenarioStepDialog {
 export interface ScenarioStepAnswerNotification {
   type: string;
   title: string;
-  content: string;
+  content?: string;
   buttonText: string;
-  buttonHref: string;
+  buttonStepCode: string;
+  modal?: {
+    title: string;
+    htmlContent: string;
+    link: string;
+  };
 }
 
 export interface ScenarioStepAnswers {