project-booster-vue 10.23.4 → 10.23.6

package/package.json

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

package/src/components/products/PbProducts.vue

@@ -18,10 +18,10 @@
 
     <m-flex class="pb-products__body" direction="column" align-items="center" v-if="product">
       <m-flex class="pb-products__body__item" direction="column" align-items="center" justify-content="center">
-        <div class="pb-products__body__item__thumbnail">
+        <div class="pb-products__body__item__thumbnail" v-if="product.photo">
           <img :src="product.photo" alt="" />
         </div>
-        <div class="pb-products__body__item__title">{{ product.designation }}</div>
+        <div class="pb-products__body__item__title" v-if="product.designation">{{ product.designation }}</div>
       </m-flex>
 
       <m-flex class="pb-products__container--button" direction="column" align-items="center" justify-content="center">

package/src/components/rework/products/MPbProducts.vue

@@ -12,22 +12,22 @@
       </m-link>
     </div>
 
-    <div class="pb-products__body row-flex column" v-if="product">
+    <div class="pb-products__body row-flex column">
       <div class="pb-products__title">
         {{ payload.viewModel.label }}
       </div>
 
-      <div class="pb-products__body__item" v-if="product.designation">
+      <div class="pb-products__body__item" v-if="product">
         <div class="pb-products__body__item__thumbnail" v-if="product.photo">
           <img :src="product.photo" alt="photo du produit" />
         </div>
-        <div class="pb-products__body__item__title">{{ product.designation }}</div>
+        <div class="pb-products__body__item__title" v-if="designation">{{ designation }}</div>
       </div>
       <div class="pb-products__body__item" v-else>
-        <div class="pb-products__body__item__thumbnail">
+        <div class="pb-products__body__item__thumbnail" v-if="payload.viewModel.defaultProduct.photo">
           <img :src="payload.viewModel.defaultProduct.photo" alt="photo du produit" />
         </div>
-        <div class="pb-products__body__item__title">{{ payload.viewModel.defaultProduct.designation }}</div>
+        <div class="pb-products__body__item__title">{{ designation }}</div>
       </div>
 
       <div class="pb-products__container--button">
@@ -53,7 +53,7 @@
 import { Product } from '@/types/pb/Estimate';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { MButton, MLink } from '@mozaic-ds/vue-3';
-import { PropType, defineProps, onMounted, ref } from 'vue';
+import { PropType, defineProps, onBeforeMount, onMounted, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { PayloadAction } from '../types/genericPayload';
 
@@ -61,24 +61,9 @@ const emit = defineEmits(['go-back', 'step-completed']);
 
 const store = useStore();
 const metadata = store.getters['metaData/metaData'];
-const refProduct: string = store.getters['products/getRefProduct'];
-const product = ref<Product>(store.getters['products/getCurrentProduct']);
 
-if (!product.value) {
-  product.value = {
-    code: 'Code du produit',
-    designation: 'Désignation du produit',
-    photo: '',
-    price: {
-      unitAmount: 0,
-      initialUnitAmount: 0,
-      unitAmountNoTax: 0,
-      initialUnitAmountNoTax: 0,
-      currency: 'EURO',
-      discount: null,
-    },
-  };
-}
+const product = ref<Product>();
+const designation = ref<string>();
 
 const props = defineProps({
   /**
@@ -135,9 +120,9 @@ const props = defineProps({
 });
 
 /**
- * onMounted load product and load this
+ * Load product from store.
  */
-onMounted(() => {
+onBeforeMount(() => {
   if (store.hasModule('products')) {
     store.dispatch('products/loadProduct', {
       payload: props.payload.viewModel.defaultProduct,
@@ -146,6 +131,19 @@ onMounted(() => {
   }
 });
 
+/**
+ * Update product and designation when product is loaded.
+ */
+onMounted(() => {
+  watch(
+    () => store.getters['products/getCurrentProduct'],
+    (newProduct) => {
+      product.value = newProduct;
+      designation.value = product.value?.designation || props.payload.viewModel.defaultProduct?.designation || '';
+    },
+  );
+});
+
 /**
  * Send action to completed step
  * @param action
@@ -155,20 +153,21 @@ const callAction = (action: PayloadAction) => {
     if (action.code === '__BACK__') {
       emit('go-back');
     } else {
-      let productToSend = null;
-
-      if (refProduct) {
-        productToSend = product.value;
+      if (product.value) {
+        emit('step-completed', {
+          answers: [
+            {
+              product: product.value,
+            },
+          ],
+          nextStep: action,
+        });
+      } else {
+        emit('step-completed', {
+          answers: [{}],
+          nextStep: action,
+        });
       }
-
-      emit('step-completed', {
-        answers: [
-          {
-            product: productToSend,
-          },
-        ],
-        nextStep: action,
-      });
     }
   }
 };

package/src/stores/modules/productsStore.ts

@@ -32,10 +32,11 @@ export default {
     updateRefProduct({ commit }: ProductContext, { ref }: { ref: string }) {
       commit('setRefProduct', ref);
     },
+
     async loadProduct(
       { commit, state }: ProductContext,
       { payload, storeId }: { payload: ProductPayload; storeId: string },
-    ) {
+    ): Promise<void> {
       if (state.refProduct) {
         const product: Product | null = await getProductById(state.refProduct, storeId);