project-booster-vue 9.14.2 → 9.16.1

package/package.json

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

package/src/components/configurations/list/PbConfigurationsList.vue

@@ -34,6 +34,7 @@
               class="pb-configurations-list__card"
               :flag-label="configuration.type"
               :hero="configuration.label"
+              :flattened="readOnly"
               :title="
                 configuration.prices && configuration.prices['20.0'] !== undefined
                   ? `${configuration.prices['20.0']}€`
@@ -126,6 +127,13 @@ export default defineComponent({
       type: String,
       default: '1of3',
     },
+    /**
+     * Indicates whether the UI is read only (Collaborators mode)
+     */
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: () => ({

package/src/components/configurations/section/PbConfigurationsSection.vue

@@ -17,6 +17,7 @@
       :configurations="configurations"
       :is-loading-configurations="isLoadingConfigurations"
       :show-load-more-button="hasStillConfigurations"
+      :readOnly="readOnly"
       @configuration-click="handleConfigurationClickEvent"
       @load-more="handleLoadMoreEvent"
       @refresh-configuration="handleRefreshConfigurationEvent"
@@ -74,6 +75,16 @@ export default defineComponent({
     PbConfigurationsList,
   },
 
+  props: {
+    /**
+     * Indicates whether the UI is read only (Collaborators mode)
+     */
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data: () => ({
     CONFIGURATION_ANIMATION_DURATION,
   }),

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -291,7 +291,7 @@
                 </m-accordion>
               </div>
               <div class="pb-project-hub__section-content">
-                <pb-configurations-section @configuration-click="handleConfigurationClickEvent" />
+                <pb-configurations-section @configuration-click="handleConfigurationClickEvent" :readOnly="readOnly" />
               </div>
             </m-flex>
             <m-flex
@@ -908,7 +908,7 @@ export default defineComponent({
       default: () => PROJECT_LOAD_PAYLOAD,
     },
     /**
-     * Indicates whether the UI is read only
+     * Indicates whether the UI is read only (Collaborators mode)
      */
     readOnly: {
       type: Boolean,

package/src/components/question/PbQuestion.vue

@@ -30,6 +30,25 @@
             @click="displayVideoGuide('')"
           />
         </div>
+        <div v-if="payload.viewModel.videoBlock" class="pb-question__video-block-container">
+          <div v-if="payload.viewModel.videoBlock" class="pb-question__video-block">
+            <div class="pb-question__video-block-image-container">
+              <m-image
+                class="pb-question__video-block-image"
+                :src="decorate(payload.viewModel.videoBlock.image)"
+                cover
+              />
+            </div>
+            <div class="pb-question__video-block-buttons-container">
+              <m-button
+                :label="decorate(payload.viewModel.videoBlock.buttonLabel)"
+                :left-icon="decorate(payload.viewModel.videoBlock.icon)"
+                theme="bordered-neutral"
+                @click="displayVideoGuide('')"
+              />
+            </div>
+          </div>
+        </div>
       </div>
       <m-container fluid class="pb-question__answers-container">
         <m-flexy class="pb-question__answers-container-flexy">
@@ -783,6 +802,85 @@ $answers-apparition-duration: '0.5s';
     }
   }
 
+  &__video-block {
+    @include set-border-radius('m');
+
+    border: 1px solid $color-grey-300;
+    display: flex;
+    flex-direction: column;
+    margin-top: $mu200;
+    max-height: 112px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    @include set-from-screen('s') {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    @include set-from-screen('m') {
+      flex-direction: row;
+      max-height: unset;
+      width: 80%;
+    }
+
+    @include set-from-screen('l') {
+      flex-direction: row;
+      width: 75%;
+    }
+
+    @include set-from-screen('xl') {
+      flex-direction: row;
+      max-width: 768px;
+      width: 50%;
+    }
+
+    &-container {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+
+    &-image-container {
+      width: 100%;
+
+      @include set-from-screen('s') {
+        width: 100%;
+      }
+
+      @include set-from-screen('m') {
+        width: 33%;
+      }
+    }
+
+    &-buttons-container {
+      align-items: center;
+      display: flex;
+      flex-grow: 1;
+      justify-content: center;
+      padding: $mu200 $mu100;
+      position: absolute;
+      width: 100%;
+
+      @include set-from-screen('s') {
+        padding: $mu200 $mu100;
+        width: 100%;
+      }
+
+      @include set-from-screen('m') {
+        padding: 0 $mu200;
+        position: static;
+        width: 66%;
+      }
+
+      @include set-from-screen('xl') {
+        padding: 0 $mu200;
+        width: 66%;
+      }
+    }
+  }
+
   &__answers-container {
     margin: 0 auto;
     max-width: 100%;

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

@@ -3,7 +3,12 @@
     "hero": "The question hero",
     "label": "The question title",
     "subtitle": "The question subtitle",
-    "answersComponent": "PbCard"
+    "answersComponent": "PbCard",
+    "videoBlock": {
+      "buttonLabel": "Voir le guide en vidéo (1min)",
+      "icon": "https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Media_Play_24px.svg",
+      "image": "https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
+    }
   },
   "answers": {
     "ANSWER-1": {