project-booster-vue 9.63.11 → 9.64.1

package/package.json

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

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

@@ -126,9 +126,11 @@
         <m-notification class="pb-question__notifications" :type="notification.type" v-if="notification">
           <template #default>
             <strong style="font-size: 16px; line-height: 20px">{{ notification.title }}</strong>
-            <p style="font-size: 16px; line-height: 20px; margin-bottom: 0" v-if="notification.content">
-              {{ notification.content }}
-            </p>
+            <p
+              style="font-size: 16px; line-height: 20px; margin-bottom: 0"
+              v-if="notification.content"
+              v-html="notification.content"
+            ></p>
             <m-link
               style="margin-top: 15px"
               v-if="notification?.modal"
@@ -137,15 +139,24 @@
             ></m-link>
           </template>
         </m-notification>
-        <div class="pb-question__redirect-link" v-if="notification">
+        <div class="pb-question__redirect-link" v-if="!!notification?.buttonText">
           <m-button
             width="full"
             width-from-xxl="full"
             width-from-l="full"
-            @click.prevent="handleGoTo(notification?.buttonStepCode)"
+            :href="notification.buttonHref"
             :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 +181,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 +188,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>
@@ -292,7 +285,12 @@
       v-if="helpDialog"
     >
       <template #default>
-        <h4>{{ helpDialog?.viewModelDialog.subTitle }}</h4>
+        <h4 v-if="!!helpDialog?.viewModelDialog?.subTitle">{{ helpDialog?.viewModelDialog?.subTitle }}</h4>
+        <div
+          class="pb-question__dialog-help__body"
+          v-if="!!helpDialog?.viewModelDialog?.htmlContent"
+          v-html="helpDialog.viewModelDialog.htmlContent"
+        ></div>
         <div
           :style="`background-image: url(${helpDialog.viewModelDialog.imgUrl});`"
           class="pb-question__dialog-help__body__image"
@@ -356,7 +354,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 +501,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 +532,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 +630,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 +1181,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;
@@ -95,6 +96,7 @@ export interface ScenarioStepDialog {
   viewModelDialog: {
     headerTitle: string;
     subTitle: string;
+    htmlContent: string;
     imgUrl?: string;
     linkText?: string;
     hrefLink?: string;
@@ -140,6 +142,7 @@ export interface ScenarioStepPayload {
     type: string;
     action: string;
   };
+  redirectLink?: any;
 }
 
 export interface ScenarioStepViewModel {
@@ -174,6 +177,7 @@ export interface ScenarioStepViewModel {
   widthFromL?: string;
   progressBar?: boolean;
   widthXlSize?: boolean;
+  notification?: ScenarioStepAnswerNotification;
 }
 
 export interface ScenarioStep {