project-booster-vue 9.42.1 → 9.42.2

package/package.json

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

package/src/components/pedagogy/PbPedagogy.vue

@@ -143,7 +143,9 @@ export default defineComponent({
 
     async handleValidateClicked() {
       this.$emit('step-completed', {
-        answers: this.payload.multiSelect.actions.VALIDATE.isAnswer ? [this.payload.multiSelect.actions.VALIDATE] : [],
+        answers: this.payload.multiSelect.actions.VALIDATE.isAnswer
+          ? [this.payload.multiSelect.actions.VALIDATE]
+          : null,
         nextStep: this.payload.multiSelect.actions.VALIDATE.nextStep,
       });
     },

package/src/components/products/PbProducts.vue

@@ -102,6 +102,7 @@ export default defineComponent({
   computed: {
     ...mapGetters('products', {
       product: 'getCurrentProduct',
+      refProduct: 'getRefProduct',
     }),
     ...mapGetters('appointmentQualification', {
       sessions: 'getSessions',
@@ -109,7 +110,6 @@ export default defineComponent({
   },
   created() {
     this.$store.dispatch('products/loadProduct', {
-      uuid: this.$route.params.refProduct || null,
       payload: this.payload.viewModel.defaultProduct,
       sessions: this.sessions,
     });
@@ -120,10 +120,16 @@ export default defineComponent({
         if (action.code === '__BACK__') {
           this.$emit('go-back');
         } else {
+          let product = null;
+
+          if (this.refProduct) {
+            product = this.product;
+          }
+
           this.$emit('step-completed', {
             answers: [
               {
-                product: this.product,
+                product: product,
               },
             ],
             nextStep: action,

package/src/components/scenario/PbScenario.vue

@@ -106,6 +106,7 @@ import PbConfigurationsImport from '../question/configurations-import/PbConfigur
 import PbCitySearch from '../question/city-search/PbCitySearch.vue';
 import PbWarningMessage from '../warning-message/PbWarningMessage.vue';
 import PbProducts from '../products/PbProducts.vue';
+import PbTrezor from '../trezor/PbTrezor.vue';
 import PbIncrementalAmountInput from '../question/incremental-amount-input/PbIncrementalAmountInput.vue';
 import { areConditionsValid } from '../../services/scenarioConditionals';
 import {
@@ -146,6 +147,7 @@ export default defineComponent({
     PbWarningMessage,
     PbIncrementalAmountInput,
     PbProducts,
+    PbTrezor,
   },
 
   props: {

package/src/components/trezor/PbTrezor.vue

@@ -1,5 +1,13 @@
 <template>
   <m-flex class="pb-trezor" direction="column">
+    <m-link
+      v-if="showBackButton"
+      :left-icon="BACK_ICON"
+      :label="payload.viewModel.backLabel || 'Retour'"
+      class="pb-trezor__back-button"
+      @click.once="$emit('go-back')"
+    />
+
     <div class="pb-trezor__title" v-if="payload?.viewModel?.label">
       {{ payload.viewModel.label }}
     </div>
@@ -114,9 +122,12 @@ import { useStore } from 'vuex';
 import MFlex from './../mozaic/flex/MFlex.vue';
 import MButton from '../mozaic/buttons/MButton.vue';
 import MCheckbox from '../mozaic/checkbox/MCheckbox.vue';
+import MLink from '../mozaic/link/MLink.vue';
 import MTextInput from '../mozaic/text-input/MTextInput.vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { object, string, boolean } from 'yup';
+const BACK_ICON =
+  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 
 export default defineComponent({
   name: 'PbTrezor',
@@ -125,6 +136,7 @@ export default defineComponent({
     MButton,
     MTextInput,
     MCheckbox,
+    MLink,
   },
   props: {
     /**
@@ -167,7 +179,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const store = useStore();
-    let formData = ref({
+    let formData = ref<any>({
       values: {
         lastname: '',
         firstname: '',
@@ -209,33 +221,32 @@ export default defineComponent({
 
     const validateAllFields = async (action: any) => {
       await validationSchema.validate(formData.value.values).then(async () => {
-        const sending = await store.dispatch(
-          'trezor/sendFormData',
-          {
+        const sending = await store.dispatch('trezor/sendFormData', {
+          payload: {
             customer: {
               lastname: formData.value.values.lastname,
               firstname: formData.value.values.firstname,
-              zipcode: formData.value.values.zipcode,
+              zip: formData.value.values.zipcode,
               email: formData.value.values.email,
               phone: formData.value.values.phone,
             },
             optin: formData.value.values.optin,
             optinPartners: formData.value.values.optinPartners,
           },
-          props.payload.viewModel.typeLead,
-        );
+          typeLead: props.payload.viewModel.typeLead,
+        });
 
         if (sending) {
           emit('step-completed', {
-            answers: [],
-            nextStep: action,
+            answers: null,
+            nextStep: action.action,
           });
         }
       });
     };
 
     const callAction = async (item: any) => {
-      if (item.action.type === 'submit') {
+      if (item.action.type === 'STEP') {
         await validateAllFields(item);
       }
     };
@@ -244,6 +255,7 @@ export default defineComponent({
       formData,
       callAction,
       validate,
+      BACK_ICON,
     };
   },
 });
@@ -260,6 +272,20 @@ $responsive-breakpoint: 'm';
 .pb-trezor {
   margin: 0 auto;
   max-width: 1024px;
+
+  &__back-button {
+    align-self: flex-start;
+    opacity: 1;
+    padding: $mu100 0 $mu100 $mu100;
+    transition: opacity 0.15s 0.5s;
+    z-index: 2;
+
+    &--hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('08', 'm');
@@ -269,7 +295,7 @@ $responsive-breakpoint: 'm';
 
     @include set-from-screen($responsive-breakpoint) {
       margin: auto;
-      padding: $mu250 0 $mu250 0;
+      padding: 0 0 $mu250 0;
       text-align: center;
     }
   }

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

@@ -9,7 +9,8 @@
       "type": "button",
       "label": "Envoyer",
       "action": {
-        "type": "submit"
+        "type": "STEP",
+        "code": "STEP_CODE"
       },
       "bordered": false
     }

package/src/stores/modules/productsStore.ts

@@ -37,10 +37,14 @@ export default {
       commit('setRefProduct', ref);
     },
     async loadProduct({ commit, state }: ProductContext, { payload, sessions }: { payload: object; sessions: any }) {
-      const product = await getProductById(state.refProduct, (sessions && sessions.storeId) || null);
+      if (state.refProduct) {
+        const product = await getProductById(state.refProduct, (sessions && sessions.storeId) || null);
 
-      if (product) {
-        commit('setCurrentProduct', { ...payload, ...product });
+        if (product) {
+          commit('setCurrentProduct', { ...payload, ...product });
+        } else {
+          commit('setCurrentProduct', payload);
+        }
       } else {
         commit('setCurrentProduct', payload);
       }

package/src/stores/modules/trezorStore.ts

@@ -30,7 +30,7 @@ export default {
       { commit, state }: TrezorContext,
       { payload, typeLead }: { payload: object; typeLead: string },
     ) => {
-      if (!typeLead) {
+      if (typeLead) {
         const sendData = await sendTrezorForm(typeLead, payload);
         commit('setFormData', sendData);
       }

package/src/stores/state.ts

@@ -8,6 +8,7 @@ import { PlannerState } from '@/stores/modules/plannerStore';
 import { ProjectsState } from '@/stores/modules/projectsStore';
 import { ToolsState } from '@/stores/modules/toolsStore';
 import { ProductState } from './modules/productsStore';
+import { TrezorState } from './modules/trezorStore';
 
 export interface State {
   appointmentQualification: AppointmentQualificationState;
@@ -20,4 +21,5 @@ export interface State {
   projects: ProjectsState;
   tools: ToolsState;
   products: ProductState;
+  trezor: TrezorState;
 }