project-booster-vue 10.16.0 → 10.16.2

package/package.json

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

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

@@ -53,6 +53,9 @@
       :nextButtonAction="payload.viewModel.nextStep"
       :step-number="stepNumber"
       :next-step-type="EventTypeEnum.BUTTON"
+      :trackingStatus="trackingStatus"
+      @go-back="$emit('go-back')"
+      @next-step="callAction(payload.viewModel.nextStep, [], emit)"
     />
 
     <m-modal :modalTitle="titleModal" :open="showModal" @update:open="handleCloseModal" class="m-pb-alert__dialog">
@@ -78,7 +81,7 @@
 
 <script lang="ts" setup>
 import { MNotification, MButton, MCard, MModal } from '@mozaic-ds/vue-3';
-import { PayloadAction } from '../types/genericPayload';
+import { callAction } from '../services/navigate';
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import { EventTypeEnum, formatEvent } from '../services/event';
@@ -137,21 +140,6 @@ const handleShowModal = (option: any) => {
     window.open(option.viewModel.button.href, '_blank');
   }
 };
-
-/**
- * Send action to completed step
- * @param action
- */
-const callAction = (button: PayloadAction) => {
-  if (button.nextStep.code != '__BACK__') {
-    emit('step-completed', {
-      answers: null,
-      nextStep: button.code,
-    });
-  } else {
-    emit('go-back');
-  }
-};
 </script>
 
 <style lang="scss">

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

@@ -82,6 +82,17 @@
         />
       </div>
     </div>
+
+    <m-pb-navigation
+      :payload="payload"
+      :nextButtonAction="payload.viewModel.nextStep"
+      :step-number="stepNumber"
+      :next-step-type="EventTypeEnum.BUTTON"
+      v-if="payload?.viewModel?.nextStep"
+      :trackingStatus="trackingStatus"
+      @go-back="$emit('go-back')"
+      @next-step="goToNavigation(payload.viewModel.nextStep)"
+    />
   </div>
 </template>
 
@@ -99,6 +110,7 @@ import DEFAULT_PAYLOAD from './default-payload.json';
 import merge from 'lodash.merge';
 import { decorate } from '@/services/decorate';
 import { formatEvent, EventTypeEnum } from '../services/event';
+import MPbNavigation from '../navigation/MPbNavigation.vue';
 
 const props = defineProps({
   /**
@@ -196,7 +208,6 @@ $responsive-breakpoint: 'm';
 .m-pb-exit-options {
   width: calc(100% - $mu250);
   margin: 4rem auto;
-  padding: 0 $mu125;
 
   @include set-from-screen($responsive-breakpoint) {
     width: 100%;

package/src/components/rework/exit-options/with-typeform.json

@@ -5,20 +5,16 @@
     "typeForm": {
       "placeholder": "Par exemple : garder un miroir que vous appréciez"
     },
-    "callToActions": [
-      {
-        "label": "Précédent",
-        "theme": "bordered-neutral",
-        "nextStep": {
-          "code": "LMFR_BATHROOM_BATHTUB_BUDGET"
-        }
-      },
-      {
-        "label": "Etape suivante",
-        "nextStep": {
-          "code": "BATHROOM_END"
-        }
+    "nextStep": {
+      "code": "APPOINTMENT_FORM",
+      "label": "Etape suivante"
+    },
+    "backButton": {
+      "label": "Précédent",
+      "theme": "bordered-neutral",
+      "nextStep": {
+        "code": "__BACK__"
       }
-    ]
+    }
   }
 }

package/src/components/rework/question/city-search/MPbCitySearch.vue

@@ -69,11 +69,11 @@
       </div>
 
       <m-pb-navigation
-        :trackingStatus="trackingStatus"
         :answers="answers"
         :payload="payload"
         :nextButtonAction="payload.viewModel.nextStep"
         :disabledNextButton="!selectedCity"
+        :trackingStatus="trackingStatus"
         @go-back="$emit('go-back')"
         @next-step="nextStep"
         :step-number="stepNumber"

package/src/components/rework/question/configurations-import/MPbConfigurationsImport.stories.mdx

@@ -80,6 +80,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<m-pb-configurations-import
+        style="width:720px;margin:100px auto 0 auto;"
         :payload="args.payload"
         :show-back-button="args.showBackButton"
         :answers="args.answers"

package/src/components/rework/question/configurations-import/MPbConfigurationsImport.vue

@@ -1,18 +1,6 @@
 <template>
   <div class="pb-configurations-import_container">
     <div class="pb-configurations-import">
-      <m-flex align-items="center">
-        <m-link
-          :label="payload.viewModel.backLabel || 'Question précédente'"
-          :left-icon="BACK_ICON"
-          :class="{
-            'pb-configurations-import__back-button': true,
-            'pb-configurations-import__back-button--hidden':
-              !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
-          }"
-          @click="navigateTo(payload.viewModel)"
-        />
-      </m-flex>
       <div v-if="payload.viewModel.hero" class="pb-configurations-import__hero">
         {{ payload.viewModel.hero }}
       </div>
@@ -356,7 +344,6 @@ $answers-apparition-duration: '0.5s';
   width: 100%;
 
   @include set-from-screen($responsive-breakpoint) {
-    width: 754px;
     margin: 0 auto;
   }
 
@@ -401,7 +388,7 @@ $answers-apparition-duration: '0.5s';
       padding: $mu200 $mu125 $mu100 $mu125;
 
       @include set-from-screen($responsive-breakpoint) {
-        padding: $mu250 $mu100 $mu100 $mu100;
+        padding: 0;
         width: 100%;
       }
     }
@@ -458,7 +445,7 @@ $answers-apparition-duration: '0.5s';
     padding: $mu050;
 
     @include set-from-screen($responsive-breakpoint) {
-      padding: $mu100;
+      padding: $mu100 0;
     }
 
     &-card {
@@ -470,7 +457,7 @@ $answers-apparition-duration: '0.5s';
     margin: $mu100 $mu050 0 $mu050;
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: $mu100 $mu100 0 $mu100;
+      margin: $mu100 0 0 0;
     }
   }
 
@@ -478,7 +465,7 @@ $answers-apparition-duration: '0.5s';
     margin: $mu150 $mu050 0 $mu050;
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: $mu150 $mu100 0 $mu100;
+      margin: $mu150 0 0 0;
     }
 
     &__button {

package/src/components/rework/question/upload-document/MPbUploadDocument.stories.mdx

@@ -98,6 +98,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     return { args };
   },
   template: `<m-pb-upload-document
+    style="width:720px;margin:100px auto 0 auto;"
     :payload="args.payload"
     :show-back-button="args.showBackButton"
     :answers="args.answers"

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

@@ -282,8 +282,8 @@ $answers-apparition-duration: '0.5s';
   width: 100%;
 
   @include set-from-screen($responsive-breakpoint) {
-    width: 769px;
     margin: 0 auto;
+    padding: 0;
   }
 }
 
@@ -297,6 +297,10 @@ $answers-apparition-duration: '0.5s';
     padding: 0 $mu100;
     margin-top: $mu250;
 
+    @include set-from-screen($responsive-breakpoint) {
+      padding: 0;
+    }
+
     &__button {
       width: 50%;
 
@@ -308,6 +312,10 @@ $answers-apparition-duration: '0.5s';
 
   &__redirect-link {
     margin: $mu100 $mu100 0 $mu100;
+
+    @include set-from-screen($responsive-breakpoint) {
+      margin: $mu100 0 0 0;
+    }
   }
 
   &__back-button {
@@ -355,7 +363,7 @@ $answers-apparition-duration: '0.5s';
       padding: 0 $mu050 $mu100 $mu050;
 
       @include set-from-screen($responsive-breakpoint) {
-        padding: $mu250 $mu100 $mu100 $mu100;
+        padding: 0;
         width: 100%;
       }
     }
@@ -417,7 +425,7 @@ $answers-apparition-duration: '0.5s';
     padding: $mu050;
 
     @include set-from-screen($responsive-breakpoint) {
-      padding: $mu100;
+      padding: $mu100 0 0 0;
     }
 
     :deep(.pb-upload-document__answer__component) {

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

@@ -947,26 +947,11 @@
               }
             }
           }
-        ]
-      },
-      "callToActions": [
-        {
-          "label": "Précédent",
-          "nextStep": {
-            "code": "__BACK__"
-          },
-          "theme": "bordered-primary-02"
-        },
-        {
-          "label": "Etape suivante",
-          "nextStep": {
-            "code": "LMFR_QUESTION_ADD_PICTURE"
-          }
+        ],
+        "nextStep": {
+          "code": "LMFR_QUESTION_ADD_PICTURE"
         }
-      ]
-    },
-    "nextStep": {
-      "code": "LMFR_QUESTION_ADD_PICTURE"
+      }
     }
   },
   "LMFR_QUESTION_ADD_PICTURE": {