project-booster-vue 9.63.10 → 9.64.0

package/package.json

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

package/src/components/media/upload/PbMediaUpload.vue

@@ -424,7 +424,9 @@ export default defineComponent({
          * @event media-uploaded
          * @type {Event}
          */
-        this.$emit('media-uploaded', { id: this.uploadedMediaId, name: this.fileName, url: this.mediaPreviewUrl });
+        setTimeout(() => {
+          this.$emit('media-uploaded', { id: this.uploadedMediaId, name: this.fileName, url: this.mediaPreviewUrl });
+        }, 100);
         this.reset();
       }
     },

package/src/components/rework/alert/MPbAlert.vue

@@ -42,6 +42,8 @@
           :label="button.label"
           @click="callAction(button.nextStep)"
           :theme="button.theme"
+          :icon="button.icon"
+          :iconPosition="button.iconPosition"
           style="margin-left: 1rem"
           :data-cerberus="sanitizeCerberusAttribut('MPB-ALERT', button.label)"
         />

package/src/components/rework/alert/default-payload.json

@@ -42,11 +42,14 @@
     {
       "label": "Précédent",
       "nextStep": "Code",
-      "theme": "bordered-primary-02"
+      "theme": "bordered-primary-02",
+      "icon": "ArrowBack48"
     },
     {
       "label": "Etape suivante",
-      "nextStep": "Code"
+      "nextStep": "Code",
+      "icon": "ArrowNext48",
+      "iconPosition": "right"
     }
   ]
 }

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -38,6 +38,7 @@
           :theme="payload.viewModel.backButton.theme"
           @click="callAction(payload.viewModel.backButton.nextStep)"
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
+          icon="ArrowBack48"
         />
       </div>
 
@@ -49,6 +50,8 @@
           :label="condition.viewModel.nextStep.label"
           :href="condition.viewModel.nextStep.link"
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', condition.viewModel.nextStep.label)"
+          icon="ArrowNext48"
+          iconPosition="right"
         />
       </div>
     </div>
@@ -61,6 +64,7 @@
           :theme="payload.viewModel.backButton.theme"
           @click="callAction(payload.viewModel.backButton.nextStep)"
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
+          icon="ArrowBack48"
         />
       </div>
 
@@ -69,6 +73,8 @@
           :label="payload.viewModel.nextStep.label"
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', 'NEXT')"
           @click="callAction(payload.viewModel.nextStep)"
+          icon="ArrowNext48"
+          iconPosition="right"
         />
       </div>
     </div>

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

@@ -146,6 +146,15 @@
             :label="notification.buttonText"
           />
         </div>
+        <div class="pb-question__redirect-link" v-if="payload.redirectLink">
+          <m-button
+            width="full"
+            width-from-xxl="full"
+            width-from-l="full"
+            :href="payload.redirectLink.href"
+            :label="payload.redirectLink.label"
+          />
+        </div>
       </m-container>
       <div
         v-if="isShowingFooter(payload.viewModel)"
@@ -170,14 +179,6 @@
       </div>
     </div>
     <pb-sticky-footer
-      v-show="
-        payload.skippable ||
-        (payload.multiSelect &&
-          ((payload.multiSelect && areMultiselectButtonsDisplayed() && hasAnswersSelected) ||
-            (payload.skippable &&
-              isSkipButtonsDisplayed() &&
-              (payload.viewModel.alwaysDisplaySkippable || !hasAnswersSelected))))
-      "
       ref="pbStickyFooter"
       class="pb-question__sticky-footer"
       :style="`height: ${pbQuestionActionsButtonsMaxHeight + Number.parseInt(stickyBottomOffset.replace('px', ''))}px;`"
@@ -185,54 +186,44 @@
       :intersection-observer-delay="250"
     >
       <transition-group name="pb-question__actions--animated" mode="out-in">
-        <div
-          v-if="payload.multiSelect && areMultiselectButtonsDisplayed() && hasAnswersSelected"
-          ref="pbQuestionActionsButtonsValidate"
-          class="pb-question__actions-container"
-          key="validate"
-        >
-          <m-button
-            v-if="isResetMultiselectButtonDisplayed()"
-            class="pb-question__actions-buttons-button"
-            theme="bordered"
-            size="m"
-            size-from-l="l"
-            :label="payload.multiSelect.actions.RESET.label"
-            @click="resetMultiSelect(payload.answers)"
-          />
-          <m-button
-            v-if="isValidateMultiselectButtonDisplayed()"
-            class="pb-question__actions-buttons-button"
-            size="m"
-            size-from-l="l"
-            :label="payload.multiSelect.actions.VALIDATE.label"
-            @click="validMultiSelect(payload?.multiSelect?.actions?.VALIDATE)"
-          />
-        </div>
-        <div
-          v-else-if="
-            payload.skippable &&
-            isSkipButtonsDisplayed() &&
-            (payload.viewModel.alwaysDisplaySkippable || !hasAnswersSelected)
-          "
-          ref="pbQuestionActionsButtonsSkip"
-          class="pb-question__actions-container"
-          key="skip"
-        >
-          <m-button
-            v-for="button in skippables"
-            :key="button?.label"
-            class="pb-question__actions-buttons-button"
-            :label="button?.label"
-            :theme="button?.theme ? button?.theme : 'bordered'"
-            :right-icon="button?.rightIcon"
-            :left-icon="button?.leftIcon"
-            size="m"
-            size-from-l="l"
-            :width="button?.width"
-            :widthFromM="button?.widthFromM"
-            @click="skipQuestion(button)"
-          />
+        <div ref="pbQuestionActionsButtonsValidate" class="pb-question__actions-container row-flex" key="validate">
+          <div class="pb-question__actions-container__column">
+            <m-button
+              label="Précédent"
+              theme="bordered-neutral"
+              class="pb-question__actions-buttons-button"
+              size="m"
+              size-from-l="l"
+              @click="$emit('go-back')"
+              v-if="!payload.viewModel.hideBackButton"
+              icon="ArrowBack48"
+            >
+            </m-button>
+          </div>
+          <div class="pb-question__actions-container__column" v-if="!skippables">
+            <m-button
+              class="pb-question__actions-buttons-button"
+              size="m"
+              size-from-l="l"
+              icon="ArrowNext48"
+              iconPosition="right"
+              label="Etape suivante"
+              @click="validMultiSelect(payload?.multiSelect?.actions?.VALIDATE)"
+            />
+          </div>
+          <div v-else class="pb-question__actions-container__column">
+            <m-button
+              v-for="button in skippables"
+              :key="button?.label"
+              class="pb-question__actions-buttons-button"
+              :label="button?.label"
+              :theme="button?.theme ? button?.theme : 'bordered'"
+              :icon="button.icon"
+              :iconPosition="button.iconPosition"
+              size="m"
+              @click="skipQuestion(button)"
+            />
+          </div>
         </div>
       </transition-group>
     </pb-sticky-footer>
@@ -356,7 +347,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import MButton from '../../mozaic/buttons/MButton.vue';
+import { MButton } from '@mozaic-ds/vue-3';
 import MContainer from '../../mozaic/grid/MContainer.vue';
 import MDialog from '../../mozaic/dialog/MDialog.vue';
 import MFlex from '../../mozaic/flex/MFlex.vue';
@@ -503,7 +494,7 @@ export default defineComponent({
       return this.lastItemIndex < Object.values(this.displayableAnswers).length && this.payload.viewModel.showMore;
     },
     skippables() {
-      return Array.isArray(this.payload.skippable) ? this.payload.skippable : [this.payload.skippable];
+      return Array.isArray(this.payload.skippable) ? this.payload.skippable : null;
     },
     hasAnswersSelected() {
       return Object.values(Object.fromEntries(this.selectedAnswers)).findIndex((answerValue) => answerValue) > -1;
@@ -534,6 +525,7 @@ export default defineComponent({
     this.updatePbQuestionActionsButtonsSizeHeight();
     this.progressBar = this.payload.viewModel?.progressBar || false;
     this.widthXlSize = this.payload.viewModel?.widthXlSize || false;
+    this.notification = this.payload.viewModel.notification || undefined;
   },
 
   beforeUnmount() {
@@ -631,10 +623,10 @@ export default defineComponent({
          * Emitted when step is completed
          * @event dynamic event name according to completedEventName prop
          */
-        this.$emit(this.completedEventName, {
-          answers: [answer],
-          nextStep: answer.nextStep,
-        });
+        // this.$emit(this.completedEventName, {
+        //   answers: [answer],
+        //   nextStep: answer.nextStep,
+        // });
       }
 
       this.$nextTick(() => {
@@ -1182,6 +1174,17 @@ $answers-apparition-duration: '0.5s';
 
     @include set-from-screen($responsive-breakpoint) {
       flex-direction: row;
+      max-width: 746px;
+      margin: auto;
+    }
+
+    &__column {
+      width: 50%;
+
+      &:last-child {
+        display: flex;
+        justify-content: flex-end;
+      }
     }
 
     button {

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

@@ -11,6 +11,10 @@
       "image": "https://images.unsplash.com/photo-1577106777018-886191d770b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80"
     }
   },
+  "redirectLink": {
+    "label": "Aller vers google",
+    "href": "https://google.fr"
+  },
   "answers": {
     "ANSWER-1": {
       "code": "ANSWER-1",

package/src/components/rework/question/upload-document/MPbUploadDocument.vue

@@ -90,7 +90,16 @@
 
     <div class="pb-upload-document__buttons row-flex" v-if="payload.multiSelect">
       <div class="pb-upload-document__buttons__button" v-for="button in payload.multiSelect.actions">
-        <m-button :label="button.label" @click="validMultiSelect(button)" :theme="button.theme" />
+        <m-button label="Précédent" @click="$emit('go-back')" theme="bordered-neutral" icon="ArrowBack48" />
+      </div>
+      <div class="pb-upload-document__buttons__button" v-for="button in payload.multiSelect.actions">
+        <m-button
+          :label="button.label"
+          @click="validMultiSelect(button)"
+          :theme="button.theme"
+          :icon="button.icon"
+          :iconPosition="button.iconPosition"
+        />
       </div>
     </div>
 
@@ -106,7 +115,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted, ref, PropType, Ref, ComponentCustomProperties } from 'vue';
-import MButton from '../../../mozaic/buttons/MButton.vue';
+import { MButton } from '@mozaic-ds/vue-3';
 import MContainer from '../../../mozaic/grid/MContainer.vue';
 import MFlex from '../../../mozaic/flex/MFlex.vue';
 import MFlexy from '../../../mozaic/grid/MFlexy.vue';

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

@@ -52,10 +52,13 @@
   "callToActions": [
     {
       "label": "Précédent",
-      "theme": "bordered-primary-02"
+      "theme": "bordered-primary-02",
+      "icon": "ArrowLeft48"
     },
     {
-      "label": "Suivant"
+      "label": "Suivant",
+      "icon": "ArrowRight48",
+      "iconPosition": "right"
     }
   ],
   "skippable": [

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

@@ -80,7 +80,7 @@ $responsive-breakpoint: 'm';
   padding: $mu150 $mu150 0 $mu150;
 
   @include set-from-screen($responsive-breakpoint) {
-    padding: $mu250 $mu250 0 $mu250;
+    padding: $mu250 0 0 0;
     width: 630px;
   }
 

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

@@ -13,7 +13,7 @@
       <div class="pb-restitution-list-line__wrapper">
         <m-notification class="pb-restitution-list-line__label" v-if="line.details" size="s">
           <template #default>
-            <p style="margin: 0">{{ line.details }}</p>
+            <p style="margin: 0" v-html="line.details"></p>
           </template>
         </m-notification>
 

package/src/components/scenario/PbScenario.vue

@@ -758,8 +758,8 @@ export default defineComponent({
 @import 'layouts/l.flexy';
 
 $responsive-breakpoint: 'm';
-$slide-animation-duration: 0.15s;
-$slide-sticky-top-animation-duration: 0.15s;
+$slide-animation-duration: 0.25s;
+$slide-sticky-top-animation-duration: 0.25s;
 $slide-sticky-top-animation-delay: $slide-animation-duration;
 $slide-sticky-bottom-animation-duration: 0.3s;
 $slide-sticky-bottom-animation-delay: $slide-animation-duration + 0.45s;
@@ -816,14 +816,6 @@ $slide-sticky-bottom-animation-delay: $slide-animation-duration + 0.45s;
   }
 
   &__step--slide {
-    &-enter-from {
-      transform: translateX(100vw);
-    }
-
-    &-leave-to {
-      transform: translateX(-100vw);
-    }
-
     &-enter-active,
     &-leave-active {
       transition: transform $slide-animation-duration, opacity $slide-animation-duration;
@@ -835,14 +827,6 @@ $slide-sticky-bottom-animation-delay: $slide-animation-duration + 0.45s;
     }
 
     &-reversed {
-      &-enter-from {
-        transform: translateX(-100vw);
-      }
-
-      &-leave-to {
-        transform: translateX(100vw);
-      }
-
       &-enter-active,
       &-leave-active {
         transition: transform $slide-animation-duration, opacity $slide-animation-duration;

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

@@ -46,6 +46,7 @@
         "progressBar": true,
         "widthFromL": "1of3",
         "widthXlSize": true,
+        "hideBackButton": true,
         "forceOneCardPerLineOnMobile": true,
         "sortBy": {
           "type": ["numeric", "string"],
@@ -785,6 +786,20 @@
           }
         }
       },
+      "skippable": [
+        {
+          "isAnswer": true,
+          "label": "Passer à l'étape suivante",
+          "icon": "ArrowNext48",
+          "iconPosition": "right",
+          "theme": "text-primary",
+          "width": "full",
+          "widthFromM": "fit",
+          "nextStep": {
+            "code": "LMFR_QUESTION_PLAN_INFO"
+          }
+        }
+      ],
       "answers": {
         "NATURAL": {
           "code": "NATURAL",
@@ -1106,25 +1121,12 @@
           }
         }
       },
-      "callToActions": [
-        {
-          "label": "Précédent",
-          "theme": "bordered-primary-02",
-          "nextStep": {
-            "code": "__BACK__"
-          }
-        },
-        {
-          "label": "Suivant",
-          "nextStep": {
-            "code": "LMFR_QUESTION_WORK_START_DATE"
-          }
-        }
-      ],
       "multiSelect": {
         "actions": {
           "VALIDATE": {
-            "label": "Continuer",
+            "label": "Etape suivante",
+            "icon": "ArrowNext48",
+            "iconPosition": "right",
             "nextStep": {
               "conditionals": [
                 {
@@ -1206,25 +1208,12 @@
           }
         }
       },
-      "callToActions": [
-        {
-          "label": "Précédent",
-          "theme": "bordered-primary-02",
-          "nextStep": {
-            "code": "__BACK__"
-          }
-        },
-        {
-          "label": "Suivant",
-          "nextStep": {
-            "code": "LMFR_QUESTION_ADD_PICTURE"
-          }
-        }
-      ],
       "multiSelect": {
         "actions": {
           "VALIDATE": {
-            "label": "Continuer",
+            "label": "Etape suivante",
+            "icon": "ArrowNext48",
+            "iconPosition": "right",
             "nextStep": {
               "conditionals": [
                 {

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

@@ -79,7 +79,7 @@ export default defineComponent({
   &::before {
     background-color: white;
     bottom: -1px;
-    box-shadow: 0 -#{$mu050} $mu100 rgba(0, 0, 0, 0.35);
+    box-shadow: 0 -#{$mu050} $mu100 rgba(0, 0, 0, 0.05);
     content: '';
     display: flex;
     justify-content: center;

package/src/types/pb/Scenario.ts

@@ -5,10 +5,11 @@ export interface ScenarioStepAnswerSortOptions {
 }
 
 export interface ScenarioStepSkippableOptions {
+  [x: string]: unknown;
   label?: string;
   theme?: string;
-  rightIcon?: string;
-  leftIcon?: string;
+  icon?: string;
+  iconPosition?: string;
   isAnswer?: boolean;
   width: string;
   widthFromM: string;
@@ -140,6 +141,7 @@ export interface ScenarioStepPayload {
     type: string;
     action: string;
   };
+  redirectLink?: any;
 }
 
 export interface ScenarioStepViewModel {
@@ -174,6 +176,7 @@ export interface ScenarioStepViewModel {
   widthFromL?: string;
   progressBar?: boolean;
   widthXlSize?: boolean;
+  notification?: ScenarioStepAnswerNotification;
 }
 
 export interface ScenarioStep {