project-booster-vue 9.42.0 → 9.42.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.42.0",
+  "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/products/default-payload.json

@@ -3,11 +3,8 @@
     "backLabel": "Question précédente",
     "label": "Estimer votre projet de rénovation énergétique en 2mn",
     "defaultProduct": {
-      "price": {
-        "initialUnitAmount": 200
-      },
       "designation": "Pompe à chaleur air/air",
-      "photo": "https://storage.googleapis.com/project-booster-media/energyrenovation/heat-pump-air-water/default_heat_pump.jpg"
+      "photo": "https://storage.googleapis.com/project-booster-media/energyrenovation/default_heat_pump.jpg"
     }
   },
   "callToActions": [

package/src/components/restitution/PbRestitutionList.stories.mdx

@@ -138,7 +138,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
 <Canvas>
   <Story
     name="101 Sandbox"
-    args={{ payload: DEFAULT_PAYLOAD, runtimeOptions: { isLoggedIn: true } }}
+    args={{ payload: DEFAULT_PAYLOAD, runtimeOptions: { isLoggedIn: true, projectMode: true } }}
     parameters={{
       msw: [
         rest.get('/api/inhabitant-projects', getProjectsResolver),

package/src/components/restitution/PbRestitutionList.vue

@@ -50,6 +50,13 @@
           :label="button.label"
           @click="callAction(button.action)"
           :theme="button.bordered ? 'bordered' : 'solid'"
+          v-if="!button.conditions"
+        />
+        <m-button
+          :label="button.label"
+          @click="callAction(button.action)"
+          :theme="button.bordered ? 'bordered' : 'solid'"
+          v-if="checkConditional(button.conditions) && button.conditions"
         />
       </div>
       <div class="pb-restitution-list__footer__save">
@@ -142,6 +149,7 @@ import { RestitutionPayload, RestitutionPayloadAction } from '@/types/pb/Restitu
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import PbRestitutionListBlock from './PbRestitutionListBlock.vue';
 import { Project } from '../../types/pb/Project';
+import { areConditionsValid } from '../../services/scenarioConditionals';
 
 export default defineComponent({
   components: {
@@ -211,11 +219,21 @@ export default defineComponent({
   created() {
     if (this.payload?.callToActions) {
       if (this.payload?.callToActions) {
+        const saveAction = Object.values(this.payload.callToActions).find((cta) => {
+          return (
+            areConditionsValid(cta.conditions!, this.answers, this.runtimeOptions) &&
+            cta.action?.type === 'MODAL' &&
+            cta.action?.component === 'PbProjectItemSave'
+          );
+        });
         this.showSaveProjectItem = this.showSaveEstimate;
       }
     }
   },
   methods: {
+    checkConditional(cta: any) {
+      return areConditionsValid(cta, this.answers, this.runtimeOptions);
+    },
     handleShowDialog(content: any) {
       this.dialogContent = content;
       this.showDialog = !this.showDialog;
@@ -251,6 +269,11 @@ export default defineComponent({
             this.showSaveProjectItem = true;
           }
 
+          this.$emit('click-save-item', {
+            answers: [],
+            action: action,
+          });
+        } else if (action.code === 'SAVED_ITEM') {
           this.$emit('click-save-item', {
             answers: [],
             action: action,

package/src/components/restitution/restitution-list-default.json

@@ -6,9 +6,22 @@
     {
       "type": "button",
       "label": "Être rappelé par un expert",
-      "href": "",
+      "action": {
+        "type": "STEP",
+        "code": "STEP_CODE"
+      },
       "bordered": false
     },
+    {
+      "conditions": ["runtimeOptions.projectMode === true"],
+      "type": "button",
+      "label": "J'enregistre mon estimation",
+      "bordered": true,
+      "action": {
+        "type": "MODAL",
+        "code": "SUMMARY"
+      }
+    },
     {
       "conditions": ["!runtimeOptions.projectMode && !runtimeOptions.estimateCreated"],
       "type": "button",

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/services/api/productApi.ts

@@ -20,11 +20,14 @@ export const updateProductApiClient = (config: { apiKey: string; baseUrl: string
 };
 
 export const getProductById = async (productId: string, storeId: string) => {
-  const response = await clientApi.get(`/product/${productId}${storeId ? '?storeId=' + storeId : ''}`);
-
-  return JSON.parse(
-    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
-      return `: "${escape($1)}"`;
-    }),
-  );
+  try {
+    const response = await clientApi.get(`/products/${productId}${storeId ? '?storeId=' + storeId : ''}`);
+    return JSON.parse(
+      JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
+        return `: "${escape($1)}"`;
+      }),
+    );
+  } catch (e) {
+    return false;
+  }
 };

package/src/stores/modules/productsStore.ts

@@ -37,12 +37,16 @@ export default {
       commit('setRefProduct', ref);
     },
     async loadProduct({ commit, state }: ProductContext, { payload, sessions }: { payload: object; sessions: any }) {
-      if (!state.refProduct) {
-        commit('setCurrentProduct', payload);
-      } else {
-        const product = await getProductById(state.refProduct, sessions.storeId);
+      if (state.refProduct) {
+        const product = await getProductById(state.refProduct, (sessions && sessions.storeId) || null);
 
-        commit('setCurrentProduct', 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;
 }