project-booster-vue 8.104.5 → 8.105.2

package/package.json

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

package/src/components/appointment/PbAppointment.stories.mdx

@@ -51,11 +51,11 @@ import { documentThumbnailResolver, uploadDocumentResolver } from '../../service
 
 The `PbAppointment` component to make an appointment.
 
-## Start Appointment
+## Appointment first time
 
 <Canvas>
   <Story
-    name="Feature - Start Appointment"
+    name="Feature - Appointment first time"
     parameters={{
       controls: { disable: true },
       msw: [
@@ -111,10 +111,10 @@ The `PbAppointment` component to make an appointment.
   </Story>
 </Canvas>
 
-## Error Appointment
+## Appointment Error
 
 <Canvas>
-  <Story name="Feature - Error Appointment" parameters={{ controls: { disabled: true } }} height="100vh">
+  <Story name="Feature - Appointment Error" parameters={{ controls: { disabled: true } }} height="100vh">
     {{
       components: { PbAppointment },
       created() {

package/src/components/appointment/PbAppointment.vue

@@ -12,7 +12,7 @@
       @click="$store.dispatch('appointmentQualification/checkAppointmentQualification')"
     />
     <m-flex v-else full-width align-items="center" justify-content="center" direction="column">
-      <pb-scenario :scenarios="scenarios" in-height="100vh" @scenario-event="handleEvent"></pb-scenario>
+      <pb-scenario :scenarios="scenarios" min-height="100vh" @scenario-event="handleEvent"></pb-scenario>
     </m-flex>
   </m-flex>
 </template>

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

@@ -296,8 +296,9 @@
       "skippable": [
         {
           "label": "Ajouter un plan plus tard",
-          "theme": "bordered",
+          "theme": "text-primary",
           "width": "full",
+          "widthFromM": "fit",
           "nextStep": {
             "code": "ADD_PLAN_LATER"
           }
@@ -405,6 +406,7 @@
           "label": "Ajouter un plan plus tard",
           "theme": "text-primary",
           "width": "full",
+          "widthFromM": "fit",
           "nextStep": {
             "code": "ADD_PLAN_LATER"
           }

package/src/components/appointment/default-selected-scenarios.json

@@ -346,8 +346,9 @@
       "skippable": [
         {
           "label": "Ajouter un plan plus tard",
-          "theme": "bordered",
+          "theme": "text-primary",
           "width": "full",
+          "widthFromM": "fit",
           "nextStep": {
             "code": "ADD_PLAN_LATER"
           }
@@ -455,6 +456,7 @@
           "label": "Ajouter un plan plus tard",
           "theme": "text-primary",
           "width": "full",
+          "widthFromM": "fit",
           "nextStep": {
             "code": "ADD_PLAN_LATER"
           }
@@ -479,6 +481,14 @@
             "image": "https://storage.googleapis.com/project-booster-media/common/icons/plus--title-offset.jpg"
           }
         },
+        "ANSWER-1": {
+          "code": "ANSWER-1",
+          "selected": true,
+          "newDocumentUploaded": false,
+          "viewModel": {
+            "title": "Answer 1"
+          }
+        },
         "ANSWER-2": {
           "code": "ANSWER-2",
           "selected": true,
@@ -494,6 +504,54 @@
           "viewModel": {
             "title": "Answer 3"
           }
+        },
+        "ANSWER-4": {
+          "code": "ANSWER-4",
+          "selected": true,
+          "newDocumentUploaded": false,
+          "viewModel": {
+            "title": "Answer 4"
+          }
+        },
+        "ANSWER-5": {
+          "code": "ANSWER-5",
+          "selected": true,
+          "newDocumentUploaded": false,
+          "viewModel": {
+            "title": "Answer 5"
+          }
+        },
+        "ANSWER-6": {
+          "code": "ANSWER-6",
+          "selected": true,
+          "newDocumentUploaded": false,
+          "viewModel": {
+            "title": "Answer 6"
+          }
+        },
+        "ANSWER-7": {
+          "code": "ANSWER-7",
+          "selected": true,
+          "newDocumentUploaded": false,
+          "viewModel": {
+            "title": "Answer 7"
+          }
+        },
+        "ANSWER-8": {
+          "code": "ANSWER-8",
+          "selected": true,
+          "newDocumentUploaded": false,
+          "viewModel": {
+            "title": "Answer 8"
+          }
+        },
+        "ANSWER-9": {
+          "code": "ANSWER-9",
+          "selected": true,
+          "newDocumentUploaded": false,
+          "viewModel": {
+            "title": "Answer 9"
+          }
         }
       }
     }

package/src/components/question/PbQuestion.vue

@@ -88,7 +88,7 @@
               </div>
             </m-flexy-col>
           </transition-group>
-          <m-flex v-if="showMoreButtonDisplayed" class="pb-question__show-more-container">
+          <m-flex v-if="showMoreButtonDisplayed" class="pb-question__show-more-container" justify-content="center">
             <m-button
               theme="bordered"
               class="pb-question__show-more-button"
@@ -97,22 +97,22 @@
               @click="handleShowMoreClick()"
             />
           </m-flex>
-          <div
-            v-if="isShowingFooter(payload.viewModel)"
-            class="pb-question__footer"
-            :class="{
-              'pb-question__footer--gray': payload.viewModel.footer.theme && payload.viewModel.footer.theme === 'gray',
-            }"
-          >
-            <div class="pb-question__footer-icon">
-              <m-icon color="primary-01-500" :icon="INFO_ICON" />
-            </div>
-            <div class="pb-question__footer-label">
-              {{ payload.viewModel.footer.label }}
-            </div>
-          </div>
         </m-flexy>
       </m-container>
+      <div
+        v-if="isShowingFooter(payload.viewModel)"
+        class="pb-question__footer"
+        :class="{
+          'pb-question__footer--gray': payload.viewModel.footer.theme && payload.viewModel.footer.theme === 'gray',
+        }"
+      >
+        <div class="pb-question__footer-icon">
+          <m-icon color="primary-01-500" :icon="INFO_ICON" />
+        </div>
+        <div class="pb-question__footer-label">
+          {{ payload.viewModel.footer.label }}
+        </div>
+      </div>
     </div>
     <pb-sticky-footer
       v-show="
@@ -679,6 +679,10 @@ export default {
     displayVideoGuide() {
       this.displayDialog = true;
       this.displayVideo = true;
+      this.$store.dispatch('sendEventToBus', {
+        code: 'APPOINTMENT-QUALIFICATION-VIDEO-CLICKED',
+        payload: {},
+      });
     },
   },
 };
@@ -838,6 +842,7 @@ $answers-apparition-duration: '0.5s';
   &__show-more {
     &-container {
       box-sizing: border-box;
+      padding-bottom: $mu100;
       width: 100%;
     }
 
@@ -853,6 +858,7 @@ $answers-apparition-duration: '0.5s';
       box-sizing: border-box;
 
       @include set-from-screen($responsive-breakpoint) {
+        max-width: 384px;
         width: 100%;
       }
     }
@@ -1002,7 +1008,6 @@ $answers-apparition-duration: '0.5s';
       display: flex;
       flex-direction: column;
       flex-wrap: nowrap;
-
       height: 100%;
       padding: $mu150;
       width: 100%;
@@ -1056,9 +1061,12 @@ $answers-apparition-duration: '0.5s';
         @include set-font-face('semi-bold');
       }
     }
+
     &-video-container {
+      padding: $mu100;
       width: 100%;
     }
+
     &-footer {
       box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
       padding: $mu100;

package/src/components/question/upload-document/PbUploadDocument.vue

@@ -114,36 +114,29 @@
       <transition-group name="pb-upload-document__actions--animated" mode="out-in">
         <div
           v-if="payload.multiSelect && areMultiselectButtonsDisplayed() && hasAnswersSelected()"
+          ref="pbQuestionActionsButtonsValidate"
           class="pb-upload-document__actions-container"
+          key="validate"
         >
-          <m-flex
-            ref="pbQuestionActionsButtons1"
-            class="pb-upload-document__actions-buttons"
-            :class="{ 'pb-upload-document__actions-buttons--more-padding': showMoreButtonDisplayed }"
-            justify-content="center"
-            align-items="center"
-            direction="row"
-          >
-            <m-button
-              v-if="isResetMultiselectButtonDisplayed()"
-              class="pb-upload-document__cancel-button"
-              theme="bordered"
-              size="m"
-              size-from-l="l"
-              width="full"
-              :label="payload.multiSelect.actions.RESET.label"
-              @click="resetMultiSelect(payload.multiSelect.actions.RESET, payload.answers)"
-            />
-            <m-button
-              v-if="isValidateMultiselectButtonDisplayed()"
-              class="pb-upload-document__validate-button"
-              size="m"
-              size-from-l="l"
-              width="full"
-              :label="payload.multiSelect.actions.VALIDATE.label"
-              @click="validMultiSelect(payload.multiSelect.actions.VALIDATE)"
-            />
-          </m-flex>
+          <m-button
+            v-if="isResetMultiselectButtonDisplayed()"
+            class="pb-upload-document__actions-buttons-button"
+            theme="bordered"
+            size="m"
+            size-from-l="l"
+            width="full"
+            :label="payload.multiSelect.actions.RESET.label"
+            @click="resetMultiSelect(payload.multiSelect.actions.RESET, payload.answers)"
+          />
+          <m-button
+            v-if="isValidateMultiselectButtonDisplayed()"
+            class="pb-upload-document__actions-buttons-button"
+            size="m"
+            size-from-l="l"
+            width="full"
+            :label="payload.multiSelect.actions.VALIDATE.label"
+            @click="validMultiSelect(payload.multiSelect.actions.VALIDATE)"
+          />
         </div>
         <div
           v-if="
@@ -155,27 +148,19 @@
           class="pb-upload-document__actions-container"
           key="skip"
         >
-          <m-flex
-            class="pb-question__actions-buttons"
-            :class="{ 'pb-question__actions-buttons--more-padding': showMoreButtonDisplayed }"
-            justify-content="center"
-            align-items="center"
-            direction="row"
-          >
-            <m-button
-              v-for="button in payload.skippable"
-              :key="button.label"
-              class="pb-upload-document__actions-buttons-button"
-              :label="button.label"
-              :theme="button.theme ? button.theme : 'bordered'"
-              :right-icon="button.rightIcon"
-              :left-icon="button.leftIcon"
-              size="m"
-              :width="button.width"
-              :widthFromM="button.widthFromM"
-              @click="skipQuestion(button)"
-            />
-          </m-flex>
+          <m-button
+            v-for="button in payload.skippable"
+            :key="button.label"
+            class="pb-upload-document__actions-buttons-button"
+            :label="button.label"
+            :theme="button.theme ? button.theme : 'bordered'"
+            :right-icon="button.rightIcon"
+            :left-icon="button.leftIcon"
+            size="m"
+            :width="button.width"
+            :widthFromM="button.widthFromM"
+            @click="skipQuestion(button)"
+          />
         </div>
       </transition-group>
     </pb-sticky-footer>
@@ -287,7 +272,7 @@ export default {
     selectedDocuments: [],
     displayableAnswers: [],
     displayedAnswers: [],
-    lastItemIndex: 0,
+    lastItemIndex: 1,
     pageSize: 8,
     showMoreAnimation: '',
     showAnswerDelay: 0,
@@ -316,6 +301,7 @@ export default {
   },
 
   mounted() {
+    window.addEventListener('resize', this.updatePbQuestionActionsButtonsSizeHeight);
     this.updateDefaultAnswers();
     this.updateSelectedDocuments(this.answers[this.stepName]);
     this.updatePbQuestionActionsButtonsSizeHeight();
@@ -327,8 +313,8 @@ export default {
       if (selectedDocuments) {
         this.selectedDocuments = selectedDocuments;
         if (this.payload.viewModel.showMore) {
-          if (this.lastItemIndex < this.pageSize) {
-            this.lastItemIndex = this.pageSize;
+          if (this.lastItemIndex < this.pageSize - 1) {
+            this.lastItemIndex = this.pageSize - 1;
           }
           this.displayedAnswers = this.selectedDocuments.slice(0, this.lastItemIndex);
         } else {
@@ -491,7 +477,7 @@ export default {
         }, delay);
         delay += this.showAnswerDelay;
       }
-      this.lastItemIndex += this.pageSize;
+      this.lastItemIndex = this.lastItemIndex + this.pageSize;
     },
     activateShowMoreAnimation() {
       this.showMoreAnimation = 'pb-upload-document__answers-animation';
@@ -602,8 +588,8 @@ $answers-apparition-duration: '0.5s';
 }
 
 .pb-upload-document__container {
-  margin: 0 $mu050;
-  width: calc(100% - #{$mu050} - #{$mu050});
+  padding: 0 $mu050;
+  width: 100%;
 }
 
 .pb-upload-document {
@@ -623,10 +609,6 @@ $answers-apparition-duration: '0.5s';
     }
   }
 
-  &__cancel-button ~ &__validate-button {
-    margin-left: $mu050;
-  }
-
   &__hero {
     @include set-font-face('semi-bold');
     @include set-font-scale('09', 's');
@@ -742,6 +724,7 @@ $answers-apparition-duration: '0.5s';
   &__show-more {
     &-container {
       box-sizing: border-box;
+      padding-bottom: $mu100;
       width: 100%;
     }
 
@@ -754,11 +737,6 @@ $answers-apparition-duration: '0.5s';
     }
   }
 
-  &__sticky-footer {
-    margin: 0 #{-$mu050};
-    width: calc(100% + 2 * #{$mu050});
-  }
-
   &__footer {
     &-container {
       font-size: $size-font-05;
@@ -780,49 +758,52 @@ $answers-apparition-duration: '0.5s';
     }
   }
 
+  &__sticky-footer {
+    margin: 0 #{-$mu050};
+    width: calc(100% + 2 * #{$mu050});
+  }
+
   &__actions-container {
+    align-items: stretch;
     backface-visibility: hidden;
     background-color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     padding: $mu100;
+
+    @include set-from-screen($responsive-breakpoint) {
+      flex-direction: row;
+    }
+
     button {
-      max-width: 384px;
       &:nth-child(n + 2) {
         margin: $mu050 0 0 0;
+
         @include set-from-screen($responsive-breakpoint) {
           margin: 0 0 0 $mu050;
+          max-width: 384px;
         }
       }
     }
   }
 
-  &__actions {
-    box-sizing: border-box;
-    position: relative;
-
-    &-buttons-container {
-      box-sizing: border-box;
-      left: 50%;
-      position: absolute;
-      transform: translateX(-50%);
-      width: 100%;
+  &__actions--animated {
+    &-enter-from {
+      opacity: 0;
+      transform: translate(0, 50%);
     }
 
-    &--animated,
-    &--animated-with-replacer {
-      &-enter-from {
-        opacity: 0;
-        transform: translate(0, 56px);
-      }
-
-      &-enter-active,
-      &-leave-active {
-        transition: transform 0.2s ease-out, opacity 0.1s ease-out;
-      }
+    &-enter-active,
+    &-leave-active {
+      transition: transform 0.2s ease-out, opacity 0.1s ease-out;
+    }
 
-      &-leave-to {
-        opacity: 0;
-        transform: translate(0, 56px);
-      }
+    &-leave-to {
+      opacity: 0;
+      position: absolute;
+      transform: translate(0, 50%);
+      width: 100%;
     }
   }
 }

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

@@ -40,8 +40,9 @@
   "skippable": [
     {
       "label": "Ajouter un plan plus tard",
-      "theme": "bordered",
+      "theme": "text-primary",
       "width": "full",
+      "widthFromM": "fit",
       "nextStep": {
         "code": "LMFR_QUESTION_ADD_PLAN_LATER"
       }

package/src/components/scenario/PbScenario.vue

@@ -237,14 +237,9 @@ export default {
           emit('scenario-completed', state.value.answers);
           emitEventToPipeline('SCENARIO-COMPLETED', step);
         } else {
-          emit('STEP-STARTED', step);
+          emitEventToPipeline('STEP-STARTED', step);
         }
         if (state.value.currentStep.component === 'PbRestitution' && !props.runtimeOptions.projectMode) {
-          /**
-           * Emitted when the user lands on PbRestitution
-           * @event RESTITUTION-LANDED
-           */
-
           emitEventToPipeline('RESTITUTION-LANDED', state.value.answers);
         }
       }

package/src/components/scenario/scenarii/appointment-qualification-kitchen.json

@@ -296,8 +296,9 @@
       "skippable": [
         {
           "label": "Ajouter un plan plus tard",
-          "theme": "bordered",
+          "theme": "text-primary",
           "width": "full",
+          "widthFromM": "fit",
           "nextStep": {
             "code": "ADD_PLAN_LATER"
           }
@@ -405,6 +406,7 @@
           "label": "Ajouter un plan plus tard",
           "theme": "text-primary",
           "width": "full",
+          "widthFromM": "fit",
           "nextStep": {
             "code": "ADD_PLAN_LATER"
           }