fix : Enhance request test

src/store/test-request.js

@@ -1,6 +1,7 @@
 const defaultState = {
   lab: null,
-  products: []
+  products: {},
+  order: {}
 }
 
 export default {
@@ -16,6 +17,9 @@ export default {
     CLEAR_TEST_REQUEST(state) {
       state.lab = null
       state.products = []
+    },
+    SET_ORDER(state, order) {
+      state.order = order
     }
   },
   actions: {
@@ -25,7 +29,5 @@ export default {
     async getProduct({ commit }, product) {
       commit("SET_PRODUCTS", product)
     }
-  },
-  getters: {
   }
 }

src/views/Dashboard/Customer/Home/RequestTest/Checkout/PaymentCheckout.vue

@@ -5,21 +5,24 @@
 
     template
       v-row.customer-payment-checkout__row
-        LabDetailCard
+        LabDetailCard(
+          :serviceDetail="service"
+        )
         PaymentDetailCard(
+          :serviceDetail="service"
+          :orderDetail="detailOrder"
+          :loading="isLoading"
           @cancel="isCancelled = true"
           @onContinue="onContinue"
         )
-
-
 </template>
 
 <script>
 
-import { mapState } from "vuex"
+import { mapState, mapMutations } from "vuex"
 import LabDetailCard from "../LabDetailCard.vue"
 import PaymentDetailCard from "../PaymentDetailCard.vue"
-import { queryOrderDetailByOrderID } from "@debionetwork/polkadot-provider"
+import { queryLabById, queryOrderDetailByOrderID, queryServiceById } from "@debionetwork/polkadot-provider"
 
 
 export default {
@@ -32,30 +35,128 @@ export default {
 
   computed: {
     ...mapState({
-      api: (state) => state.substrate.api
+      api: (state) => state.substrate.api,
+      web3: (state) => state.metamask.web3,
+      dataService: (state) => state.testRequest.products
     })
   },
 
   data: () => ({
-    isCancelled: false
+    isCancelled: false,
+    isLoading: false,
+    detailOrder: {},
+    service: {}
   }),
 
   async mounted () {
+    if (!this.$route.params.id) {
+      this.service = this.dataService
+    }
+
     if (this.$route.params.id) {
-      const detailOrder = await queryOrderDetailByOrderID(this.api, this.$route.params.id)
-      if (detailOrder.status === "Cancelled") {
+      this.detailOrder = await queryOrderDetailByOrderID(this.api, this.$route.params.id)
+
+      this.setOrderDetail(this.detailOrder)
+
+      if (this.detailOrder.status === "Cancelled") {
         this.isCancelled = true
       }
+      await this.getServiceDetail()
     }
   },
 
   methods: {
+    ...mapMutations({
+      setProductsToRequest: "testRequest/SET_PRODUCTS",
+      setOrderDetail: "testRequest/SET_ORDER"
+    }),
+
     onContinue () {
       this.$router.push({ name: "customer-request-test-service"})
-    }
-  }
+    },
+
+    async getServiceDetail() {
+      this.isLoading = true
+      const labDetail = await queryLabById(this.api, this.detailOrder.sellerId)
+      const serviceDetail = await queryServiceById(this.api, this.detailOrder.serviceId)
+
+      let {
+        accountId: labId,
+        info: {
+          name: labName,
+          address: labAddress,
+          city,
+          region,
+          country,
+          profileImage: labImage
+        },
+        verificationStatus,
+        stakeStatus
+      } = labDetail
+
+      let {
+        id: serviceId,
+        info: {
+          name: serviceName,
+          category: serviceCategory,
+          description: serviceDescription,
+          longDescription,
+          image: serviceImage,
+          dnaCollectionProcess,
+          testResultSample: resultSample,
+          expectedDuration: {
+            duration,
+            durationType
+          },
+          pricesByCurrency
+        },
+        serviceFlow
+      } = serviceDetail
+
+      const labRateData = await this.$store.dispatch("rating/getLabRate", labId)
+      const serviceData = await this.$store.dispatch("rating/getServiceRate", serviceId)
+      const detailPrice = pricesByCurrency[0]
+
+      this.service = {
+        serviceId, 
+        serviceName, 
+        serviceRate: serviceData.rating_service,
+        serviceImage, 
+        serviceCategory, 
+        serviceDescription, 
+        longDescription, 
+        labId,
+        labName,
+        labRate: labRateData.rating,
+        labAddress,
+        labImage,
+        totalPrice: this.formatPrice(detailPrice.totalPrice.replaceAll(",", "")),
+        servicePrice: this.formatPrice(detailPrice.priceComponents[0].value.replaceAll(",","")),
+        qcPrice: this.formatPrice(detailPrice.additionalPrices[0].value.replaceAll(",","")),
+        currency: detailPrice.currency.toUpperCase(),
+        city,
+        country,
+        region,
+        countRateLab: labRateData.count,
+        countServiceRate: serviceData.count_rating_service,
+        duration, 
+        durationType,
+        verificationStatus,
+        stakeStatus,
+        indexPrice: 0,
+        dnaCollectionProcess, 
+        resultSample,
+        serviceFlow
+      }
 
+      this.setProductsToRequest(this.service)
+      this.isLoading = false
+    },
 
+    formatPrice(price) {
+      return this.web3.utils.fromWei(price, "ether")
+    }
+  }
 }
 </script>
 

src/views/Dashboard/Customer/Home/RequestTest/Checkout/index.vue

@@ -45,15 +45,15 @@ export default {
   },
 
   async mounted () {
-    if (!this.$route.params.id && this.dataService.length === 0) {
+    if (!this.$route.params.id && !Object.values(this.dataService).length) {
       this.$router.push({ name: "customer-request-test"})
     }
-
   },
+
   methods: {
     handleBack() {
       if (!this.$route.params.id) return
-      this.$router.push({ name: "customer-request-test-service"})
+      this.$router.push({ name: "customer-request-test-service"}) 
     }
   }
 }

src/views/Dashboard/Customer/Home/RequestTest/LabDetailCard.vue

@@ -2,72 +2,65 @@
   v-container.container-card
     v-card.menu-card
       v-row.menu-card__service
-        ui-debio-avatar.menu-card__service-avatar(:src="service.serviceImage" size="90" rounded)
+        ui-debio-avatar.menu-card__service-avatar(:src="computeAvatar" size="90" rounded)
 
-        b.menu-card__service-title {{ service.serviceName }}
-          ui-debio-rating.menu-card__rating(:rating="service.serviceRate" :total-reviews="service.countServiceRate" size="10")
+        b.menu-card__service-title {{ serviceDetail.serviceName }}
+          ui-debio-rating.menu-card__rating(:rating="serviceDetail.serviceRate" :total-reviews="serviceDetail.countServiceRate" size="10")
 
           v-row.menu-card__service-detail
             v-col(cols="5.5")
               b.menu-card__service-sub-title Price
               .menu-card__service-description
-                | {{ price }} 
-                | {{ currency }}
+                | {{ serviceDetail.totalPrice }}
+                | {{ serviceDetail.currency }} 
             v-col(cols="6.5") 
               b.menu-card__service-sub-title Duration
               .menu-card__service-description
-                | {{ service.duration }} 
-                | {{ service.durationType }}
+                | {{ serviceDetail.duration }} 
+                | {{ serviceDetail.durationType }}
 
       hr.menu-card__line
 
       v-row.menu-card__lab
-        ui-debio-avatar.menu-card__lab-avatar(:src="service.labImage" size="90" rounded)
-        b.menu-card__lab-title {{ service.labName }}
-          ui-debio-rating.menu-card__rating(:rating="service.labRate" :total-reviews="service.countRateLab" size="10")
-          .menu-card__address {{ service.labAddress }}, {{ service.city }}, {{ country }}
+        ui-debio-avatar.menu-card__lab-avatar(:src="serviceDetail.labImage" size="90" rounded)
+        b.menu-card__lab-title {{ serviceDetail.labName }}
+          ui-debio-rating.menu-card__rating(:rating="serviceDetail.labRate" :total-reviews="serviceDetail.countRateLab" size="10")
+          .menu-card__address {{ serviceDetail.labAddress }}, {{ serviceDetail.city }}, {{ computeCountry(serviceDetail.country) }}
 </template>
 
 <script>
 
-import { mapState } from "vuex"
 import { getLocations } from "@/common/lib/api"
 
 
 export default {
   name: "LabDetailCard",
+  props: {
+    serviceDetail: Object
+  },
 
   data: () => ({
-    service: {},
-    countries: [],
-    price: "",
-    currency: "",
-    country: ""
+    countries: []
   }),
 
-  async mounted () {
-    await this.getCountries()
-
-    if (this.dataService) {      
-      this.service = this.dataService
-      this.price = this.web3.utils.fromWei(this.service.price, "ether")      
-      this.currency = this.service.currency.toUpperCase()
-      this.country = this.countries.filter((c) => c.iso2 === this.service.country)[0].name
+  computed: {
+    computeAvatar() {
+      return this.serviceDetail.serviceImage ? this.serviceDetail.serviceImage : require("@/assets/debio-logo.png")
     }
   },
 
-  computed: {
-    ...mapState({
-      mnemonicData: (state) => state.substrate.mnemonicData,
-      dataService: (state) => state.testRequest.products,
-      web3: (state) => state.metamask.web3
-    })
+  async mounted() {
+    await this.getCountries()
   },
 
   methods: {
     async getCountries() {
       const { data : { data }} = await getLocations()
       this.countries = data
+    },
+
+    computeCountry(country) {
+      return this.countries.filter((c) => c.iso2 === country)[0].name
     }
   }
 }

src/views/Dashboard/Customer/Home/RequestTest/MenuCard.vue

@@ -12,7 +12,7 @@
             .menu-card__name 
               b {{ title }}
             .menu-card__price 
-              b {{ formatPrice(price) }} {{ currency.toUpperCase() }}
+              b {{ price }} {{ currency.toUpperCase() }}
 
           .menu-card__description {{ description }}
 
@@ -25,7 +25,6 @@
 
 <script>
 
-import { mapState } from "vuex"
 import { getStates } from "@/common/lib/api"
 
 export default {
@@ -47,12 +46,6 @@ export default {
     description: String
   },
 
-  computed: {
-    ...mapState({
-      web3: (state) => state.metamask.web3
-    })
-  },
-
   async mounted() {
     await this.getStateData()
   },
@@ -66,10 +59,6 @@ export default {
       const {data: {data}} = await getStates(this.country)
       const states = data
       this.state = states.filter((s) => s.state_code === this.region)[0].name
-    },
-
-    formatPrice(price) {
-      return this.web3.utils.fromWei(String(price), "ether")
     }
   }
 }