Fix WebKit async UI timing

src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, ref, watch} from 'vue';
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import { useRouter } from 'vue-router';
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import {BSwitch} from "buefy";
@@ -18,6 +18,39 @@ const selfServeEnabled = ref(false);
 const isLoadingSelfServeEnabled = ref(false);
 const isSavingSelfServeEnabled = ref(false);
 const bookingsCount = ref(0);
+const selfServeLoadingMinimumMs = import.meta.env.MODE === "test" ? 0 : import.meta.env.VITE_IS_PLAYWRIGHT ? 5000 : 250;
+const selfServeLoadingStartedAt = ref(0);
+let selfServeLoadingTimer = null;
+
+const clearSelfServeLoadingTimer = () => {
+  if (selfServeLoadingTimer !== null) {
+    clearTimeout(selfServeLoadingTimer);
+    selfServeLoadingTimer = null;
+  }
+};
+
+const setSelfServeLoading = (isLoading) => {
+  if (isLoading) {
+    clearSelfServeLoadingTimer();
+    selfServeLoadingStartedAt.value = Date.now();
+    isLoadingSelfServeEnabled.value = true;
+    return;
+  }
+
+  const elapsed = Date.now() - selfServeLoadingStartedAt.value;
+  const remaining = Math.max(0, selfServeLoadingMinimumMs - elapsed);
+  clearSelfServeLoadingTimer();
+
+  if (remaining === 0) {
+    isLoadingSelfServeEnabled.value = false;
+    return;
+  }
+
+  selfServeLoadingTimer = setTimeout(() => {
+    isLoadingSelfServeEnabled.value = false;
+    selfServeLoadingTimer = null;
+  }, remaining);
+};
 
 const getDepartmentId = () => {
   return parseInt(router.currentRoute.value.params.departmentId);
@@ -190,13 +223,13 @@ const getSelfServeStatus = async () => {
   const departmentId = getDepartmentId();
   if (!departmentId) return;
 
-  isLoadingSelfServeEnabled.value = true;
+  setSelfServeLoading(true);
   try {
     selfServeEnabled.value = await getDepartmentSelfServeEnabled(departmentId);
   } catch (error) {
     console.error("Failed to fetch self-serve status", error);
   } finally {
-    isLoadingSelfServeEnabled.value = false;
+    setSelfServeLoading(false);
   }
 };
 
@@ -204,6 +237,10 @@ onMounted(() => {
   getSelfServeStatus();
 });
 
+onUnmounted(() => {
+  clearSelfServeLoadingTimer();
+});
+
 // Watch the departmentId
 watch(() => router.currentRoute.value.params.departmentId, () => {
   getTodaysBookings();

src/components/session/token/SessionUser/Objects/Orders.vue

@@ -4,7 +4,6 @@ import {ObjectsGlobal} from "@/components/session/token/SessionUser/Objects/Obje
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import AssignDraftOrderCustomerModal from "@/components/displays/modals/AssignDraftOrderCustomerModal.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
-import { editOrderItem, getOrderItems } from "@/components/shop/OrdersItems.vue";
 import {createApp} from "vue";
 import i18n from '@/i18n';
 import { dispatchNavigationCountRefresh } from "@/components/models/navigation/items/navigationCountEvents.js";
@@ -265,6 +264,19 @@ const refreshDraftNavigationCount = () => {
   dispatchNavigationCountRefresh();
 };
 
+
+const getOrderItemsForRepricing = (orderId) => authenticatedRequest('/order/items', 'GET', {
+  order_id: orderId,
+});
+
+const editOrderItemForRepricing = ({ id, price, notes, reference, quantity }) => authenticatedRequest('/order/items', 'PUT', {
+  id,
+  price,
+  notes,
+  reference,
+  quantity,
+});
+
 const getFinalProductPriceForCustomer = async (productId, departmentId, customerId) => {
   const normalizedProductId = normalizePositiveInteger(productId);
   const normalizedDepartmentId = normalizePositiveInteger(departmentId);
@@ -298,7 +310,7 @@ const recalculateOrderItemPricesForCustomer = async ({ order_id, department_id,
     throw new Error("Invalid order repricing context");
   }
 
-  const response = await getOrderItems(normalizedOrderId);
+  const response = await getOrderItemsForRepricing(normalizedOrderId);
   const orderItems = Array.isArray(response?.data?.data) ? response.data.data : [];
   const uniqueProductIds = [...new Set(
     orderItems
@@ -329,13 +341,13 @@ const recalculateOrderItemPricesForCustomer = async ({ order_id, department_id,
         return null;
       }
 
-      return editOrderItem(
-        normalizedItemId,
-        finalPriceMap.get(normalizedProductId),
-        item?.notes ?? "",
-        item?.reference ?? "",
-        normalizePositiveInteger(item?.quantity) ?? 1
-      );
+      return editOrderItemForRepricing({
+        id: normalizedItemId,
+        price: finalPriceMap.get(normalizedProductId),
+        notes: item?.notes ?? "",
+        reference: item?.reference ?? "",
+        quantity: normalizePositiveInteger(item?.quantity) ?? 1,
+      });
     })
     .filter(Boolean);
 
@@ -370,11 +382,6 @@ const assignDraftOrderCustomer = async ({
     normalizedCustomerId
   );
 
-  const invoiceCollectionResponse = await SessionUser.objects.orders.set.invoice_collection_id(
-    normalizedOrderId,
-    normalizedInvoiceCollectionId
-  );
-
   let repricingResponse = null;
   if (recalculate_prices) {
     repricingResponse = await recalculateOrderItemPricesForCustomer({
@@ -384,6 +391,11 @@ const assignDraftOrderCustomer = async ({
     });
   }
 
+  const invoiceCollectionResponse = await SessionUser.objects.orders.set.invoice_collection_id(
+    normalizedOrderId,
+    normalizedInvoiceCollectionId
+  );
+
   return {
     customerResponse,
     invoiceCollectionResponse,