project-booster-vue 10.22.26 → 10.23.0

package/README.md

@@ -15,7 +15,8 @@ Team: project-booster@adeo.com
 - ~~Sébastien Martinage~~
 - ~~Adrien Stadler~~
 - ~~Narjisse Loulanti~~
-- Ekaterina Kelekhsaeva: ekaterina.kelekhsaeva1@ext.adeo.com
+- ~~Ekaterina Kelekhsaeva~~
+- Yann Delaporte: yann.delaporte@ext.adeo.com
 
 #### Developers
 
@@ -29,10 +30,11 @@ Team: project-booster@adeo.com
 - ~~Clément Buchart~~
 - ~~Mickaël Margollé~~
 - ~~Jean-Baptiste Renault~~
-- Anthony Pillot: anthony.pillot@ext.leroymerlin.fr
-- Maxime Drecourt: maxime.drecourt@ext.adeo.com
-- Yassine Bourakba: yassine.bourakba@ext.adeo.com
+- ~~Maxime Drecourt~~
+- ~~Yassine Bourakba~~
+- Anthony Pillot: anthony.pillot@ext.adeo.com
 - Samir Aliche: samir.aliche@ext.adeo.com
+- Adrien Déprez: adrien.deprez@ext.adeo.com
 
 ## Get started
 

package/package.json

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

package/src/components/rework/products/MPbProducts.vue

@@ -50,19 +50,26 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { MButton, MLink } from '@mozaic-ds/vue-3';
-import { ScenarioProduct, ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { defineProps, PropType, onMounted, ref, Ref, computed } from 'vue';
+import { PropType, defineProps, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
 import { PayloadAction } from '../types/genericPayload';
-import { formatEvent, EventTypeEnum } from '../services/event';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 
 const store = useStore();
 const metadata = store.getters['metaData/metaData'];
 const refProduct = store.getters['products/getRefProduct'];
-const product = computed(() => store.getters['products/getCurrentProduct']);
+const product = ref(store.getters['products/getCurrentProduct']);
+
+if (!product.value) {
+  product.value = {
+    designation: 'Désignation par défaut',
+    photo: 'Photo par défaut',
+    value: 'Valeur par défaut',
+  };
+}
 
 const props = defineProps({
   /**

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

@@ -12,8 +12,9 @@
         :left-icon="BACK_ICON"
         class="pb-restitution-list__back-button"
         @click.once="callAction(payload.backLabel.action)"
-        >{{ payload.backLabel.label || "Recommencer l'estimation" }}</m-link
       >
+        {{ payload.backLabel.label || "Recommencer l'estimation" }}
+      </m-link>
     </m-flex>
     <div class="pb-restitution-list__title">{{ payload?.viewModel?.title }}</div>
 
@@ -40,33 +41,59 @@
         >
           <default>{{ notification.text }}</default>
           <footer>
-            <MLink size="m" :href="notification.linkHref" target="_blank">
+            <m-link size="m" :href="notification.linkHref" target="_blank">
               {{ notification.linkLabel }}
-            </MLink>
+            </m-link>
           </footer>
         </m-notification>
       </m-flex>
     </m-flex>
   </m-flex>
 
-  <div class="pb-restitution-list__footer" direction="row" v-if="showButtonBar">
-    <div class="pb-restitution-list__footer__call" v-for="button in payload.callToActions" :key="button.label">
-      <m-button
-        :label="button.label"
-        @click="callAction(button.action)"
-        :theme="button.bordered ? 'bordered' : 'solid'"
-        v-if="areConditionsValid(button.conditions)"
-        :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', button.label)"
-      />
-    </div>
-    <div class="pb-restitution-list__footer__save">
-      <pb-project-item-save
-        v-model:show-save-item="showSaveProjectItem"
-        @item-saved="handleItemCreated"
-        @dialog-close="handleDialogClose"
-        v-if="isLoggedIn"
-        :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'save-estimate')"
-      />
+  <div class="pb-restitution-list__footer" v-if="showButtonBar">
+    <div class="pb-restitution-list__footer__content">
+      <div class="pb-restitution-list__footer__content__call">
+        <div v-for="button in payload.callToActions" :key="button.label">
+          <m-button
+            class="pb-restitution-list__footer__content__call__button"
+            :label="button.label"
+            @click="callAction(button.action)"
+            :theme="button.bordered ? 'bordered' : 'solid'"
+            v-if="areConditionsValid(button.conditions)"
+            :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', button.label)"
+          />
+        </div>
+        <div class="pb-restitution-list__footer__content__save">
+          <pb-project-item-save
+            v-model:show-save-item="showSaveProjectItem"
+            @item-saved="handleItemCreated"
+            @dialog-close="handleDialogClose"
+            v-if="isLoggedIn"
+            :data-cerberus="sanitizeCerberusAttribut('PB-RESTITUTION', 'save-estimate')"
+          />
+        </div>
+      </div>
+      <div class="pb-restitution-list__footer__content__card" v-if="payload.cards">
+        <div class="pb-restitution-list__footer__content__card__item" v-for="card in payload.cards">
+          <m-card
+            outlined
+            v-bind="{
+              title: card.title,
+              imgSrc: card.image.src,
+              imgAlt: card.image.alt,
+            }"
+          >
+            <template v-slot:default>
+              <div>
+                <p>{{ card.text }}</p>
+              </div>
+            </template>
+            <template v-slot:footer>
+              <m-link size="m" :href="card.link.href">{{ card.link.label }}</m-link>
+            </template>
+          </m-card>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -120,21 +147,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { mapGetters } from 'vuex';
-import MFlex from '../../mozaic/flex/MFlex.vue';
-import PbProjectItemSave from '../../projects/project-item-save/PbProjectItemSave.vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { NotificationOptions } from '@/types/pb/Notification';
 import { RestitutionListPayload, RestitutionPayloadCallToAction } from '@/types/pb/Restitution';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import PbRestitutionListBlock from './MPbRestitutionListBlock.vue';
-import { Project } from '../../../types/pb/Project';
+import { MButton, MCard, MLink, MModal, MNotification } from '@mozaic-ds/vue-3';
+import { PropType, defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
-import { MModal, MButton, MLink, MNotification } from '@mozaic-ds/vue-3';
+import { Project } from '../../../types/pb/Project';
+import MFlex from '../../mozaic/flex/MFlex.vue';
+import PbProjectItemSave from '../../projects/project-item-save/PbProjectItemSave.vue';
+import { EventTypeEnum, formatEvent } from '../services/event';
+import PbRestitutionListBlock from './MPbRestitutionListBlock.vue';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
-import { sanitizeCerberusAttribut } from '@/services/sanitize';
-import { formatEvent, EventTypeEnum } from '../services/event';
 
 export default defineComponent({
   components: {
@@ -145,6 +172,7 @@ export default defineComponent({
     PbRestitutionListBlock,
     PbProjectItemSave,
     MNotification,
+    MCard,
   },
   data() {
     return {
@@ -304,6 +332,7 @@ export default defineComponent({
 @import 'pb-variables';
 
 $responsive-breakpoint: 'm';
+
 .hidden {
   display: none;
 }
@@ -367,30 +396,53 @@ $responsive-breakpoint: 'm';
 
   &__footer {
     display: flex;
-    flex-direction: column;
     justify-content: center;
-    padding: $mu050;
 
-    @include set-from-screen($responsive-breakpoint) {
-      width: 720px;
-      flex-direction: row;
-      margin: 0 auto;
-    }
+    &__content {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-areas: 'call' 'card';
+      row-gap: 2rem;
 
-    &__call {
-      width: 100%;
-      margin: 0 0 $mu050 0;
+      justify-content: center;
 
-      @include set-from-screen($responsive-breakpoint) {
-        width: auto;
-        margin: 0 $mu050 0 0;
-      }
+      &__call {
+        grid-area: call;
+        grid-column: 1 / 3;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
 
-      button {
         width: 100%;
 
-        @include set-from-screen($responsive-breakpoint) {
-          width: auto;
+        &__button {
+          width: 150px;
+          margin: 0 $mu100 0 $mu100;
+
+          @include set-from-screen($responsive-breakpoint) {
+            width: 280px;
+          }
+        }
+      }
+
+      &__card {
+        grid-area: card;
+        grid-column: 1 / 3;
+
+        row-gap: 1rem;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+
+        &__item {
+          width: 150px;
+          margin: 0 $mu100 0 $mu100;
+
+          @include set-from-screen($responsive-breakpoint) {
+            width: 280px;
+          }
         }
       }
     }
@@ -583,4 +635,13 @@ $responsive-breakpoint: 'm';
   margin-top: $mu075;
   width: 100%;
 }
+
+:deep(.mc-card__img) {
+  height: 100%;
+  object-fit: cover;
+}
+
+:deep(.mc-card--bordered) {
+  height: 100%;
+}
 </style>

package/src/components/rework/restitution/restitution-list-default.json

@@ -13,19 +13,10 @@
     ]
   },
   "callToActions": [
-    {
-      "type": "button",
-      "label": "Être rappelé par un expert",
-      "action": {
-        "type": "STEP",
-        "code": "STEP_CODE"
-      },
-      "bordered": false
-    },
     {
       "conditions": ["runtimeOptions.projectMode === true"],
       "type": "button",
-      "label": "J'enregistre mon estimation",
+      "label": "Enregistrer mon estimation",
       "bordered": true,
       "action": {
         "type": "MODAL",
@@ -35,13 +26,48 @@
     {
       "conditions": ["!runtimeOptions.projectMode && !runtimeOptions.estimateCreated"],
       "type": "button",
-      "label": "J'enregistre mon estimation",
+      "label": "Enregistrer mon estimation",
       "action": {
         "type": "MODAL",
         "code": "SUMMARY",
         "component": "PbProjectItemSave"
       },
       "bordered": true
+    },
+    {
+      "type": "button",
+      "label": "Être rappelé par un expert",
+      "action": {
+        "type": "STEP",
+        "code": "STEP_CODE"
+      },
+      "bordered": false
+    }
+  ],
+  "cards": [
+    {
+      "title": "Concevoir ma salle de bain en 3D",
+      "text": "Concevez votre salle de bain vous-même avec notre configurateur 3D et finalisez votre projet en magasin.",
+      "image": {
+        "src": "https://storage.googleapis.com/project-booster-media/bathroom/exit-options/bathroom-3d.jpg",
+        "alt": "Concevoir ma salle de bain en 3D"
+      },
+      "link": {
+        "label": "Découvrir le configurateur 3D",
+        "href": "https://sdb3d.leroymerlin.fr/Page_Tunnel/tunnel-sdb_is6.html"
+      }
+    },
+    {
+      "title": "Prendre rendez-vous",
+      "text": "Vous avez les mesures de votre salle de bains ? Consultez un expert en magasin ou à distance pour finaliser votre projet.",
+      "image": {
+        "src": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg",
+        "alt": "Prendre rendez-vous pour ma salle de bains"
+      },
+      "link": {
+        "label": "Prendre rendez-vous",
+        "href": "/services/realisez-votre-projet-salle-de-bains.html"
+      }
     }
   ]
 }

package/src/types/pb/Restitution.ts

@@ -68,8 +68,8 @@ export interface RestitutionDialogViewModel {
 
 export interface RestitutionPayloadCallToAction {
   type: 'button' | 'link' | 'MODAL';
-  conditions?: string[];
-  label?: string;
+  conditions: string[];
+  label: string;
   message?: string;
   href?: string;
   bordered?: boolean;
@@ -88,7 +88,27 @@ export interface RestitutionListPayload {
   viewModel: RestitutionListViewModelPayload;
   callToActions: RestitutionPayloadCallToAction[];
   exitOptions: RestitutionExitOptions;
-  backLabel: any;
+  backLabel: {
+    label: string;
+    action: {
+      type: string;
+      code: string;
+    };
+  };
+  cards: RestitutionListCard[];
+}
+
+export interface RestitutionListCard {
+  title: string;
+  text: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: {
+    href: string;
+    label: string;
+  };
 }
 
 export interface RestitutionListViewModelPayload {