project-booster-vue 8.99.0 → 8.100.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.99.0",
+  "version": "8.100.2",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",

package/src/components/appointment/default-payload.json

@@ -277,7 +277,13 @@
         "subtitle": "Votre conseiller aura besoin de ces mesures pour créer votre plan de cuisine en 3D.",
         "widthFromL": "1of3",
         "forceOneCardPerLineOnMobile": true,
-        "answersComponent": "PbCard"
+        "answersComponent": "PbCard",
+        "video": {
+          "src": "https://players.brightcove.net/2812541250001/SkgXKciHDZ_default/index.html?videoId=6270735637001&autoplay=play",
+          "theme": "bordered",
+          "label": "Voir le guide en vidéo",
+          "icon": "https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Media_Play_24px.svg"
+        }
       },
       "skippable": [
         {
@@ -353,7 +359,13 @@
         "subtitle": "Sur une feuille, dessinez la pièce et reportez les bonnes mesures, prenez une photo du plan et ajoutez la.",
         "answersComponent": "PbCard",
         "forceOneCardPerLineOnMobile": true,
-        "widthFromL": "1of3"
+        "widthFromL": "1of3",
+        "video": {
+          "src": "https://players.brightcove.net/2812541250001/SkgXKciHDZ_default/index.html?videoId=6270735637001&autoplay=play",
+          "theme": "bordered",
+          "label": "Voir le guide en vidéo",
+          "icon": "https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Media_Play_24px.svg"
+        }
       },
       "skippable": [
         {

package/src/components/products/PbProducts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb-products">
+  <div class="pb-products" ref="pbProducts">
     <m-link
       class="pb-products__back-button"
       :label="project.name"
@@ -91,6 +91,7 @@ export default {
   },
   mounted() {
     this.updateProduct();
+    this.scrollToTop();
   },
   methods: {
     displayProductsList(item, section) {
@@ -103,6 +104,16 @@ export default {
       this.categoryName = selectedCategory.title ?? selectedCategory.viewModel.title;
       this.$store.dispatch('loadProductsByWorkKind', categoryId);
     },
+    scrollToTop() {
+      setTimeout(() => {
+        const top = this.$refs.pbProducts.getBoundingClientRect().top;
+        window.scroll({
+          top,
+          left: 0,
+          behavior: 'smooth',
+        });
+      }, 200);
+    },
   },
 };
 </script>

package/src/components/question/PbQuestion.vue

@@ -21,6 +21,12 @@
         </div>
         <div v-if="payload.viewModel.subtitle" class="pb-question__subtitle">
           {{ payload.viewModel.subtitle }}
+          <m-link
+            v-if="payload.viewModel.video"
+            :label="payload.viewModel.video.label"
+            theme="primary"
+            @click="displayVideoGuide"
+          />
         </div>
       </div>
       <m-container fluid class="pb-question__answers-container">
@@ -112,6 +118,7 @@
       class="pb-question__sticky-footer"
       :style="`height: ${pbQuestionActionsButtonsMaxHeight + Number.parseInt(stickyBottomOffset.replace('px', ''))}px;`"
       :bottom-offset="stickyBottomOffset"
+      intersection-observer-delay="200"
     >
       <transition-group name="pb-question__actions--animated" mode="out-in">
         <div
@@ -200,27 +207,35 @@
       </m-flexy>
     </m-container>
     <m-dialog class="pb-question__dialog" v-model:show-dialog="displayDialog">
-      <template #header>
+      <template #header v-if="!displayVideo">
         <span>{{ dialog.headerTitle }}</span>
       </template>
       <template #body>
-        <div class="pb-question__dialog-body">
+        <div class="pb-question__dialog-body" v-if="!displayVideo">
           <div :style="`background-image: url(${dialog.imageUrl});`" class="pb-question__dialog-body-image" />
           <m-flex direction="column" class="pb-question__dialog-body-description">
             <div class="pb-question__dialog-body-title">{{ dialog.title }}</div>
             <div class="pb-question__dialog-body-text" v-html="dialog.text" />
-            <m-link
-              v-if="dialog.link"
-              :label="dialog.link.label"
-              :theme="dialog.link.theme"
-              :href="dialog.link.href"
-              width-from-m="fit"
-              width="full"
+            <m-button
+              class="pb-question__dialog-body-button"
+              :label="payload.viewModel.video.label"
+              :theme="payload.viewModel.video.theme"
+              :left-icon="payload.viewModel.video.icon"
+              width="fit"
+              @click="displayVideo = true"
             />
           </m-flex>
         </div>
+        <iframe
+          v-else
+          :src="payload.viewModel.video.src"
+          class="pb-question__dialog-video-container"
+          frameborder="0"
+          allowfullscreen
+          allow="autoplay"
+        ></iframe>
       </template>
-      <template #footer>
+      <template #footer v-if="!displayVideo">
         <m-flex class="pb-question__dialog-footer" justify-content="center">
           <m-button
             label="Fermer"
@@ -234,7 +249,6 @@
     </m-dialog>
   </div>
 </template>
-
 <script>
 import objectPath from 'object-path';
 import MButton from '../mozaic/buttons/MButton';
@@ -334,6 +348,7 @@ export default {
     INFO_ICON,
     displayDialog: false,
     dialog: null,
+    displayVideo: false,
     pbQuestionActionsButtonsMaxHeight: 0,
   }),
 
@@ -357,6 +372,11 @@ export default {
     answers() {
       this.updateSelectedAnswers();
     },
+    displayDialog(newVal) {
+      if (!newVal) {
+        this.displayVideo = false;
+      }
+    },
   },
 
   mounted() {
@@ -657,6 +677,10 @@ export default {
         },
       });
     },
+    displayVideoGuide() {
+      this.displayDialog = true;
+      this.displayVideo = true;
+    },
   },
 };
 </script>
@@ -946,7 +970,9 @@ $answers-apparition-duration: '0.5s';
       color: $color-grey-600;
       padding: $mu150 $mu350 $mu150 $mu150;
     }
-
+    :deep(.m-dialog__close) {
+      background-color: transparent;
+    }
     :deep(.m-dialog__body) {
       display: flex;
       flex-grow: 1;
@@ -1010,7 +1036,9 @@ $answers-apparition-duration: '0.5s';
         @include set-font-face('semi-bold');
       }
     }
-
+    &-video-container {
+      width: 100%;
+    }
     &-footer {
       box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
       padding: $mu100;

package/src/components/restitution/PbRestitution.vue

@@ -153,9 +153,11 @@ export default {
       return this.payload?.theme ?? this.theme;
     },
     displayedExitOptions() {
-      return this.payload?.exitOptions.filter(
-        (exitOption) => !exitOption.conditions || this.areConditionsValid(exitOption.conditions),
+      let formattedExitOptions = this.payload?.exitOptions;
+      formattedExitOptions.options = formattedExitOptions.options.filter(
+        (option) => !option.conditions || this.areConditionsValid(option.conditions),
       );
+      return formattedExitOptions;
     },
   },
 

package/src/components/restitution/PbRestitutionExit.vue

@@ -7,12 +7,12 @@
       align-items="center"
       justify-content="center"
     >
-      <div class="pb-restitution-exit__section-title">{{ title }}</div>
+      <div class="pb-restitution-exit__section-title">{{ exitOptions.title }}</div>
       <m-container class="pb-restitution-exit__section-content-cards-container" fluid>
         <m-flexy class="pb-restitution-exit__section-content-cards-flexy">
           <m-flexy-col
             class="pb-restitution-exit__section-content-card-flexy"
-            v-for="tool in exitOptions"
+            v-for="tool in exitOptions.options"
             :key="tool.id"
             width="full"
             width-from-m="1of4"
@@ -46,12 +46,8 @@ export default {
   components: { PbCard, MFlexyCol, MFlexy, MContainer, MFlex },
   props: {
     exitOptions: {
-      type: Array,
-      default: () => [],
-    },
-    title: {
-      type: String,
-      default: 'Concevoir ma cuisine',
+      type: Object,
+      default: null,
     },
   },
   methods: {

package/src/components/restitution/restitution-with-conditionnal-exit-options.json

@@ -3,35 +3,38 @@
     "title": "Votre projet de construction neuve se situe entre",
     "subtitle": "Construire ma nouvelle maison"
   },
-  "exitOptions": [
-    {
-      "id": "Concevoir-ma-cuisine-en-3D",
-      "title": "Concevoir ma cuisine en 3D",
-      "subtitle": "Concevez votre cuisine vous-même avec notre configurateur 3D et finalisez votre projet en magasin",
-      "type": "oaa",
-      "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html",
-      "image": "https://storage.googleapis.com/project-booster-media/common/services/tools.jpg",
-      "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')"]
-    },
-    {
-      "id": "Réaliser votre plan de cuisine avec un expert",
-      "title": "Réaliser votre plan de cuisine avec un expert",
-      "subtitle": "Sur rendez-vous à distance",
-      "type": "oaa",
-      "link": "https://www.leroymerlin.fr/assistance-technique.html",
-      "image": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg",
-      "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')"]
-    },
-    {
-      "id": "Découvrir nos cuisines",
-      "title": "Découvrir nos cuisines",
-      "subtitle": "Découvrez l’ensemble de nos cuisines Delinia ID et leurs nombreuses possibilités de personnalisation.",
-      "type": "oaa",
-      "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html?mag=190",
-      "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg",
-      "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_2')"]
-    }
-  ],
+  "exitOptions": {
+    "title": "Concevoir ma cuisine",
+    "options": [
+      {
+        "id": "Concevoir-ma-cuisine-en-3D",
+        "title": "Concevoir ma cuisine en 3D",
+        "subtitle": "Concevez votre cuisine vous-même avec notre configurateur 3D et finalisez votre projet en magasin",
+        "type": "oaa",
+        "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/tools.jpg",
+        "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')"]
+      },
+      {
+        "id": "Réaliser votre plan de cuisine avec un expert",
+        "title": "Réaliser votre plan de cuisine avec un expert",
+        "subtitle": "Sur rendez-vous à distance",
+        "type": "oaa",
+        "link": "https://www.leroymerlin.fr/assistance-technique.html",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg",
+        "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_1')"]
+      },
+      {
+        "id": "Découvrir nos cuisines",
+        "title": "Découvrir nos cuisines",
+        "subtitle": "Découvrez l’ensemble de nos cuisines Delinia ID et leurs nombreuses possibilités de personnalisation.",
+        "type": "oaa",
+        "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html?mag=190",
+        "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg",
+        "conditions": ["isAnswerMatching('QUESTION_1', 'QUESTION_1--ANSWER_2')"]
+      }
+    ]
+  },
   "callToActions": [
     {
       "type": "button",

package/src/components/restitution/restitution-with-exit-options.json

@@ -3,32 +3,35 @@
     "title": "Votre projet de construction neuve se situe entre",
     "subtitle": "Construire ma nouvelle maison"
   },
-  "exitOptions": [
-    {
-      "id": "Concevoir-ma-cuisine-en-3D",
-      "title": "Concevoir ma cuisine en 3D",
-      "subtitle": "Concevez votre cuisine vous-même avec notre configurateur 3D et finalisez votre projet en magasin",
-      "type": "oaa",
-      "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html",
-      "image": "https://storage.googleapis.com/project-booster-media/common/services/tools.jpg"
-    },
-    {
-      "id": "Réaliser votre plan de cuisine avec un expert",
-      "title": "Réaliser votre plan de cuisine avec un expert",
-      "subtitle": "Sur rendez-vous à distance",
-      "type": "oaa",
-      "link": "https://www.leroymerlin.fr/assistance-technique.html",
-      "image": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg"
-    },
-    {
-      "id": "Découvrir nos cuisines",
-      "title": "Découvrir nos cuisines",
-      "subtitle": "Découvrez l’ensemble de nos cuisines Delinia ID et leurs nombreuses possibilités de personnalisation.",
-      "type": "oaa",
-      "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html?mag=190",
-      "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg"
-    }
-  ],
+  "exitOptions": {
+    "title": "Concevoir ma cuisine",
+    "options": [
+      {
+        "id": "Concevoir-ma-cuisine-en-3D",
+        "title": "Concevoir ma cuisine en 3D",
+        "subtitle": "Concevez votre cuisine vous-même avec notre configurateur 3D et finalisez votre projet en magasin",
+        "type": "oaa",
+        "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/tools.jpg"
+      },
+      {
+        "id": "Réaliser votre plan de cuisine avec un expert",
+        "title": "Réaliser votre plan de cuisine avec un expert",
+        "subtitle": "Sur rendez-vous à distance",
+        "type": "oaa",
+        "link": "https://www.leroymerlin.fr/assistance-technique.html",
+        "image": "https://storage.googleapis.com/project-booster-media/common/services/appointment.jpg"
+      },
+      {
+        "id": "Découvrir nos cuisines",
+        "title": "Découvrir nos cuisines",
+        "subtitle": "Découvrez l’ensemble de nos cuisines Delinia ID et leurs nombreuses possibilités de personnalisation.",
+        "type": "oaa",
+        "link": "https://cuisine3d-did.leroymerlin.fr/Page_Tunnel_Cuisine/page_tunnel_cuisine.html?mag=190",
+        "image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg"
+      }
+    ]
+  },
   "callToActions": [
     {
       "type": "button",

package/src/components/sticky-footer/PbStickyFooter.vue

@@ -21,9 +21,16 @@ export default {
       type: String,
       default: '0',
     },
+    /**
+     * Intersection observer delay in ms.
+     */
+    intersectionObserverDelay: {
+      type: Number,
+      default: 0,
+    },
   },
 
-  setup() {
+  setup(props) {
     const pbStickyFooter = ref(null);
 
     const stuck = ref(false);
@@ -40,10 +47,13 @@ export default {
         },
         {
           root: null,
-          threshold: [0.1, 0.96, 0.98, 1],
+          threshold: [0.1, 0.5, 0.96, 0.98, 0.99, 1],
         },
       );
-      observer.observe(pbStickyFooter.value);
+
+      setTimeout(() => {
+        observer.observe(pbStickyFooter.value);
+      }, props.intersectionObserverDelay);
     });
 
     return {

package/src/pages/project/project-hub/PbProjectHub.vue

@@ -1085,7 +1085,7 @@ export default {
     },
 
     scrollToTop() {
-      const top = this.$refs.pbProjectHubContainer.$el.offsetTop;
+      const top = this.$refs.pbProjectHubContainer.getBoundingClientRect().offsetTop;
       window.scroll({
         top,
         left: 0,