changes

app/components/pos/CartItem.vue

@@ -2,6 +2,7 @@
 const props = defineProps({
   cartItem: Object,
   deleteable: Boolean,
+  invalid: Boolean,
 });
 const { $deleteapi, $formatNum, $snackbar } = useNuxtApp();
 const { getCarts } = inject("pos");
@@ -30,7 +31,12 @@ async function removeFromCart() {
 </script>
 
 <template>
-  <div class="card m-0">
+  <div
+    class="card m-0"
+    :style="{
+      borderColor: invalid ? 'var(--bulma-danger-70)' : '',
+    }"
+  >
     <div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
       <div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
         <div class="media m-0">
@@ -48,6 +54,14 @@ async function removeFromCart() {
               <span> • </span>
               <span>{{ cartItem.imei__variant__color__name }}</span>
             </p>
+            <p
+              v-if="invalid"
+              class="is-size-7 has-text-danger-40"
+            >
+              IMEI sản phẩm
+              <span class="tag is-light is-danger fs-11">{{ cartItem.imei__imei }}</span>
+              không có sẵn
+            </p>
           </div>
         </div>
         <p class="has-text-primary-50 font-medium">

app/components/pos/ConfirmOrder.vue

@@ -4,10 +4,13 @@ import usePlaceOrder from "~/components/pos/composables/usePlaceOrder";
 
 const id = "confirmOrderModal";
 const emit = defineEmits(["close"]);
-const { activeCart, activeCartItems, orderInfo, fullAddress, getCarts, subtotal, total } = inject("pos");
+const { activeCart, activeCartItems, invalidCartItems, orderInfo, fullAddress, getCarts, subtotal, total } =
+  inject("pos");
+
 const { isPending, showVietQRModal, placeOrder, testReturnPage } = usePlaceOrder({
   activeCart,
   activeCartItems,
+  invalidCartItems,
   orderInfo,
   fullAddress,
   subtotal,
@@ -56,6 +59,7 @@ const { isPending, showVietQRModal, placeOrder, testReturnPage } = usePlaceOrder
             v-for="cartItem in activeCartItems"
             :key="cartItem.id"
             :cartItem="cartItem"
+            :invalid="invalidCartItems.find((ci) => ci.id === cartItem.id)"
           />
         </div>
       </div>

app/components/pos/POS.vue

@@ -13,7 +13,7 @@ const { $insertapi, $formatNum } = useNuxtApp();
 
 const { carts, cartItems, customers, getCarts, isPending } = useCartData();
 
-const { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtotal } = useActiveCart({
+const { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtotal, invalidCartItems } = useActiveCart({
   carts,
   cartItems,
   customers,
@@ -45,7 +45,7 @@ function openConfirmModal() {
   showModal.value = {
     component: "pos/ConfirmOrder",
     title: "Xác nhận đơn hàng",
-    width: "60%",
+    width: "700px",
   };
 }
 
@@ -62,6 +62,7 @@ provide("pos", {
   activeCartId,
   activeCart,
   activeCartItems,
+  invalidCartItems,
   isChangingCus,
   orderInfo,
   fullAddress,
@@ -131,6 +132,7 @@ provide("pos", {
                     :key="cartItem.id"
                     :cartItem="cartItem"
                     deleteable
+                    :invalid="invalidCartItems.find((ci) => ci.id === cartItem.id)"
                   />
                 </div>
                 <p

app/components/pos/composables/useActiveCart.js

@@ -27,5 +27,10 @@ export default function useActiveCart({ carts, cartItems, customers }) {
     return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
   });
 
-  return { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtotal };
+  const invalidCartItems = ref([]);
+
+  watch(activeCartId, () => {
+    invalidCartItems.value = [];
+  });
+  return { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtotal, invalidCartItems };
 }

app/components/pos/composables/usePlaceOrder.js

@@ -1,6 +1,7 @@
 export default function usePlaceOrder({
   activeCart,
   activeCartItems,
+  invalidCartItems,
   orderInfo,
   fullAddress,
   subtotal,
@@ -16,6 +17,22 @@ export default function usePlaceOrder({
   const payment_record = ref();
   const showVietQRModal = ref();
 
+  async function checkImeiAvai() {
+    const imeisSold = await $getdata("IMEI_Sold");
+    const invalidImeis = [];
+
+    for (const cartItem of activeCartItems.value) {
+      if (imeisSold.find((sold) => sold.imei === cartItem.imei__imei)) {
+        invalidImeis.push(cartItem);
+      }
+    }
+
+    return {
+      allAvailable: invalidImeis.length === 0,
+      invalidImeis,
+    };
+  }
+
   /**
    * Create a record in `invoice` as `pending`
    */
@@ -193,6 +210,14 @@ export default function usePlaceOrder({
   }
 
   async function placeOrder() {
+    const { allAvailable, invalidImeis } = await checkImeiAvai();
+    if (!allAvailable) {
+      invalidCartItems.value = invalidImeis;
+      console.error("IMEIs not available", invalidImeis);
+      $snackbar("Một số IMEI đã được bán, vui lòng kiểm tra lại", "Error");
+      return;
+    }
+
     await createOrder();
 
     if (orderInfo.value.paymentMethod.code === "CASH") {

app/components/snackbar/Error.vue

@@ -9,7 +9,7 @@
     </span>
     <p
       v-html="content"
-      class="control is-expanded fs-14 has-text-danger-85"
+      class="control is-expanded fs-14 has-text-danger-90"
     ></p>
   </div>
 </template>

app/components/snackbar/Success.vue

@@ -4,12 +4,12 @@
       <Icon
         name="material-symbols:check-circle-rounded"
         :size="18"
-        class="has-text-success-70"
+        class="has-text-success-80"
       />
     </span>
     <p
       v-html="content"
-      class="control is-expanded fs-14 has-text-success-80"
+      class="control is-expanded fs-14 has-text-success-90"
     ></p>
   </div>
 </template>