changes

app/components/pos/ConfirmOrder.vue

@@ -4,11 +4,14 @@ import usePlaceOrder from "~/components/pos/composables/usePlaceOrder";
 
 const id = "confirmOrderModal";
 const emit = defineEmits(["close"]);
-const { activeCart, activeCartItems, orderInfo, getCarts } = inject("pos");
-const { subtotal, shipping_address, isPending, showVietQRModal, placeOrder, testReturnPage } = usePlaceOrder({
+const { activeCart, activeCartItems, orderInfo, fullAddress, getCarts, subtotal, total } = inject("pos");
+const { isPending, showVietQRModal, placeOrder, testReturnPage } = usePlaceOrder({
   activeCart,
   activeCartItems,
   orderInfo,
+  fullAddress,
+  subtotal,
+  total,
   getCarts,
   onSuccess: () => emit("close"),
 });
@@ -73,7 +76,7 @@ const { subtotal, shipping_address, isPending, showVietQRModal, placeOrder, test
             <p>Nhận tại cửa hàng</p>
           </div>
           <div v-else>
-            <p class="font-medium fs-16 mb-0.5">{{ shipping_address }}</p>
+            <p class="font-medium fs-16 mb-0.5">{{ fullAddress }}</p>
             <p class="has-text-grey">
               <span>{{ orderInfo.receiver_name }}</span>
               <span> • </span>
@@ -108,10 +111,14 @@ const { subtotal, shipping_address, isPending, showVietQRModal, placeOrder, test
                 </td>
                 <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
               </tr>
+              <tr>
+                <td>Phí giao hàng</td>
+                <td class="has-text-right">{{ $formatNum(orderInfo.shipping_fee, { hasUnit: true }) }}</td>
+              </tr>
               <tr>
                 <td class="font-bold fs-14">Tổng cộng</td>
                 <td class="has-text-right has-text-primary font-bold fs-18">
-                  {{ $formatNum(subtotal, { hasUnit: true }) }}
+                  {{ $formatNum(total, { hasUnit: true }) }}
                 </td>
               </tr>
             </tbody>

app/components/pos/POS.vue

@@ -21,12 +21,13 @@ const { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtot
 
 const { addresses, getAddresses, isChangingCus, changeCustomer } = useCustomer({ activeCart, getCarts });
 
-const { orderInfo, isOrderValid } = useOrderInfo({
+const { orderInfo, isOrderValid, fullAddress, total } = useOrderInfo({
   activeCartId,
   activeCart,
   activeCartItems,
   addresses,
   getAddresses,
+  subtotal,
 });
 
 const showModal = ref();
@@ -63,7 +64,10 @@ provide("pos", {
   activeCartItems,
   isChangingCus,
   orderInfo,
+  fullAddress,
   getCarts,
+  subtotal,
+  total,
 });
 </script>
 
@@ -321,10 +325,14 @@ provide("pos", {
                   </td>
                   <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
                 </tr>
+                <tr>
+                  <td>Phí giao hàng</td>
+                  <td class="has-text-right">{{ $formatNum(orderInfo.shipping_fee, { hasUnit: true }) }}</td>
+                </tr>
                 <tr>
                   <td class="font-bold fs-14">Tổng cộng</td>
                   <td class="has-text-right has-text-primary font-bold fs-18">
-                    {{ $formatNum(subtotal, { hasUnit: true }) }}
+                    {{ $formatNum(total, { hasUnit: true }) }}
                   </td>
                 </tr>
               </tbody>

app/components/pos/composables/useOrderInfo.js

@@ -1,12 +1,15 @@
-export default function useOrderInfo({ activeCartId, activeCart, activeCartItems, addresses, getAddresses }) {
+export default function useOrderInfo({ activeCartId, activeCart, activeCartItems, addresses, getAddresses, subtotal }) {
   const orderInfo = ref({
     address: null,
     receiver_name: null,
     receiver_phone: null,
+    shipping_fee: null,
     deliveryMethod: null,
     paymentMethod: null,
   });
 
+  const total = computed(() => subtotal.value + orderInfo.value.shipping_fee);
+
   watch(activeCartId, () => {
     // reset fields when tab is switched
     orderInfo.value.deliveryMethod = null;
@@ -51,5 +54,10 @@ export default function useOrderInfo({ activeCartId, activeCart, activeCartItems
     return true;
   });
 
-  return { orderInfo, isOrderValid };
+  const fullAddress = computed(() => {
+    if (!orderInfo.value.address) return "";
+    return `${orderInfo.value.address.address_detail}, ${orderInfo.value.address.ward}, ${orderInfo.value.address.district}, ${orderInfo.value.address.city}`;
+  });
+
+  return { orderInfo, isOrderValid, fullAddress, total };
 }

app/components/pos/composables/usePlaceOrder.js

@@ -1,19 +1,19 @@
-export default function usePlaceOrder({ activeCart, activeCartItems, orderInfo, getCarts, onSuccess }) {
+export default function usePlaceOrder({
+  activeCart,
+  activeCartItems,
+  orderInfo,
+  fullAddress,
+  subtotal,
+  total,
+  getCarts,
+  onSuccess,
+}) {
   const { $dayjs, $id, $getdata, $insertapi, $patchapi, $deleteapi, $snackbar } = useNuxtApp();
   const isPending = ref(false);
   const paidPaymentStatus = ref();
   const invoice = ref();
   const showVietQRModal = ref();
 
-  const subtotal = computed(() => {
-    return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
-  });
-
-  const shipping_address = computed(() => {
-    if (!orderInfo.value.address) return "";
-    return `${orderInfo.value.address.address_detail}, ${orderInfo.value.address.ward}, ${orderInfo.value.address.district}, ${orderInfo.value.address.city}`;
-  });
-
   /**
    * Create a record in `invoice` as `pending`
    */
@@ -26,12 +26,12 @@ export default function usePlaceOrder({ activeCart, activeCartItems, orderInfo,
         customer_name: activeCart.value.customer__fullname,
         customer_phone: activeCart.value.customer__phone,
         customer_email: activeCart.value.customer__email,
-        shipping_address: shipping_address.value,
+        shipping_address: fullAddress.value,
         product_amount: activeCartItems.value.length,
-        shipping_fee: 0,
+        shipping_fee: orderInfo.value.shipping_fee,
         total_amount: subtotal.value,
         discount_amount: 0,
-        final_amount: subtotal.value,
+        final_amount: total.value,
         order_type: "pos",
         status: "pending",
         payment_status: 1,
@@ -124,7 +124,7 @@ export default function usePlaceOrder({ activeCart, activeCartItems, orderInfo,
       district: orderInfo.value.address.district,
       ward: orderInfo.value.address.ward,
       address: orderInfo.value.address.address_detail,
-      shipping_fee: 0,
+      shipping_fee: orderInfo.value.shipping_fee,
       carrier: orderInfo.value.deliveryMethod.id,
       tracking_code: $id(),
       status: "pending",
@@ -144,8 +144,8 @@ export default function usePlaceOrder({ activeCart, activeCartItems, orderInfo,
       data: {
         invoice: invoiceId,
         payment_method: orderInfo.value.paymentMethod.id,
-        transfer_amount: orderInfo.value.paymentMethod.code === "CASH" ? undefined : subtotal.value,
-        cash_amount: orderInfo.value.paymentMethod.code === "CASH" ? subtotal.value : undefined,
+        transfer_amount: orderInfo.value.paymentMethod.code === "CASH" ? undefined : total.value,
+        cash_amount: orderInfo.value.paymentMethod.code === "CASH" ? total.value : undefined,
       },
       notify: false,
     });
@@ -232,5 +232,5 @@ export default function usePlaceOrder({ activeCart, activeCartItems, orderInfo,
     });
   });
 
-  return { isPending, subtotal, shipping_address, placeOrder, testReturnPage, showVietQRModal };
+  return { isPending, placeOrder, testReturnPage, showVietQRModal };
 }