Add customer product fixed price UI

2026-07-06 12:52:31 +02:00
parent 987acc5b0f
commit 2fd0893773
9 changed files with 387 additions and 25 deletions
@@ -24,8 +24,24 @@ const onCustomerChange = () => {
  isCustomerSelected.value = false;
 }

-const parseValue = (value) => {
-  let tmp_value = parseFloat(value).toFixed(2);
+const parseFixedPriceValue = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  const parsed = Number.parseInt(String(value), 10);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+const formatNumber = (value) => Number.isInteger(value) ? String(value) : value.toFixed(2);
+
+const parseValue = (discount) => {
+  const fixedPrice = parseFixedPriceValue(discount.fixed_price);
+  if (fixedPrice !== null) {
+    return `${formatNumber(fixedPrice)} Kr.`;
+  }
+
+  let tmp_value = parseFloat(discount.percentage).toFixed(2);
  // Add the percentage sign
  return `${tmp_value}%`;
 }
@@ -78,7 +94,7 @@ watch(customer_id, onCustomerChange, { immediate: true });
        <!--<span class="icon is-small mr-1">
          <i class="fas fa-percent" aria-hidden="true"></i>
        </span> -->
-        <span>{{ parseValue(discount.percentage) }}</span>
+        <span>{{ parseValue(discount) }}</span>
      </div>
    </div>
  </div>
@@ -86,4 +102,4 @@ watch(customer_id, onCustomerChange, { immediate: true });

 <style scoped>

-</style>
+</style>
@@ -29,6 +29,8 @@ const discount_product = ref(null);
 const discount_category = ref(null);
 // The global discount (if any)
 const discount_global = ref(null);
+// The fixed product price (if any)
+const fixed_product_price = ref(null);

 // Show the discounts dropdown
 const showDiscountsDropdown = ref(false);
@@ -49,6 +51,19 @@ const hasGlobalDiscount = () => {
  return discount_global.value > 0;
 }

+const hasFixedProductPrice = () => {
+  return fixed_product_price.value !== null;
+}
+
+const parseFixedPriceValue = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  const parsed = Number.parseInt(String(value), 10);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
 // Set the product discount
 const setProductDiscount = (percentage) => {
  // Check if the percentage is a number
@@ -83,6 +98,16 @@ const setGlobalDiscount = (percentage) => {
  discount_global.value = percentage;
 }

+const setFixedProductPrice = (fixedPrice) => {
+  const parsedFixedPrice = parseFixedPriceValue(fixedPrice);
+  if (parsedFixedPrice === null) {
+    fixed_product_price.value = null;
+    return;
+  }
+
+  fixed_product_price.value = parsedFixedPrice;
+}
+

 // Debugging function
 const getDiscountDebug = () => {
@@ -101,9 +126,15 @@ const getDiscountDebug = () => {

 // Parse the customer discounts
 const parseCustomerDiscounts = () => {
-  const tmp_discount_product = props.customer_discounts.find((discount) => discount.product_or_category_id === props.product.id && !discount.is_category)
-  const tmp_discount_category = props.customer_discounts.find((discount) => discount.product_or_category_id === props.product.category && discount.is_category);
-  const tmp_discount_global = props.customer_discounts.find((discount) => discount.id === 999999 && discount.is_category);
+  discount_product.value = null;
+  discount_category.value = null;
+  discount_global.value = null;
+  fixed_product_price.value = null;
+
+  const customerDiscounts = Array.isArray(props.customer_discounts) ? props.customer_discounts : [];
+  const tmp_discount_product = customerDiscounts.find((discount) => discount.product_or_category_id == props.product.id && Number(discount.is_category) === 0)
+  const tmp_discount_category = customerDiscounts.find((discount) => discount.product_or_category_id == props.product.category && Number(discount.is_category) === 1);
+  const tmp_discount_global = customerDiscounts.find((discount) => discount.id === 999999 && Number(discount.is_category) === 1);

  //console.log("Product discount: ", tmp_discount_product);
  //console.log("Category discount: ", tmp_discount_category);
@@ -112,6 +143,7 @@ const parseCustomerDiscounts = () => {
  // Set the product discount
  if (tmp_discount_product) {
    setProductDiscount(tmp_discount_product.percentage);
+    setFixedProductPrice(tmp_discount_product.fixed_price);
  }
  // Set the category discount
  if (tmp_discount_category) {
@@ -125,6 +157,10 @@ const parseCustomerDiscounts = () => {

 // Get the best discount for the customer
 const getBestDiscount = () => {
+    if (hasFixedProductPrice()) {
+        highestEligibleDiscount.value = 0;
+        return 0;
+    }
    // Set the best discount to 0
    let tmp_best_discount = 0;
    // Check if the product discount is higher than the current best discount
@@ -182,13 +218,32 @@ watch(() => props.customer_discounts, () => {
          <span
              aria-haspopup="true"
              aria-controls="dropdown-menu"
-              v-if="highestEligibleDiscount > 0"
+              v-if="hasFixedProductPrice()"
+              class="tag is-success is-light is-text text-can-not-select"
+          >{{ fixed_product_price }} Kr.</span>
+          <span
+              aria-haspopup="true"
+              aria-controls="dropdown-menu"
+              v-else-if="highestEligibleDiscount > 0"
              class="tag is-warning is-light is-text text-can-not-select"
          > -{{ highestEligibleDiscount }}%</span>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
          <div class="dropdown-content py-0">
            <div class="list has-overflow-ellipsis" style="width: 340px">
+              <template v-if="hasFixedProductPrice()">
+                <a class="list-item">
+                  <div class="list-item-content">
+                    <div class="list-item-title">Fast pris</div>
+                  </div>
+                  <div class="list-item-controls list-item-controls-force-visible">
+                    <div class="tags has-addons">
+                      <span class="tag is-success is-light">{{ fixed_product_price }} Kr.</span>
+                    </div>
+                  </div>
+                </a>
+              </template>
+              <template v-else>
              <!-- Best discount -->
              <a class="list-item">
                <div class="list-item-content">
@@ -239,6 +294,7 @@ watch(() => props.customer_discounts, () => {
                  </div>
                </div>
              </a>
+              </template>
            </div>
          </div>
        </div>
@@ -254,4 +310,4 @@ watch(() => props.customer_discounts, () => {
 .text-can-not-select {
  user-select: none;
 }
-</style>
+</style>
@@ -6,7 +6,7 @@ import {
  loadOrderItems,
  productCategoryAllowed,
  setProductsCategory,
-  getUserProductDiscount,
+  getUserProductPrice,
  showFakeCreateOrderItem,
  department_id,
  user_discounts,
@@ -549,10 +549,9 @@ const addPreviousOrderToCurrent = async (previousOrder) => {
      continue;
    }

-    const previousOrderProduct = getPreviousOrderProduct(orderItem);
-    const discount = getUserProductDiscount(previousOrderProduct || {});
+    const previousOrderProduct = getPreviousOrderProduct(orderItem) || { id: productId, price: getPreviousOrderProductPrice(orderItem) };
    const basePrice = getPreviousOrderProductPrice(orderItem);
-    const discountedPrice = (basePrice - (basePrice * (discount / 100))).toFixed(0);
+    const discountedPrice = String(getUserProductPrice({ ...previousOrderProduct, price: basePrice }));

    showFakeCreateOrderItem(productId, quantity, discountedPrice);
    await createOrderItem(orderId, productId, quantity);
@@ -586,9 +585,7 @@ const getRecommendedProductPrice = (productId) => {
    return '0';
  }

-  const discount = getUserProductDiscount(product);
-  const price = Number(product.price ?? 0);
-  return (price - (price * (discount / 100))).toFixed(0);
+  return String(getUserProductPrice(product));
 };

 const isRecommendedProductCategoryAllowed = (productId) => {
@@ -1844,13 +1844,30 @@ export const getUserDiscounts = async () => {
    });
 };

-/** Get user product discount */
-export const getUserProductDiscount = (product, allowCategory = null, onlyCategory = null) => {
-  // Check if the user discounts are loaded
+const ensureUserDiscountsLoaded = () => {
  if (!has_user_discounts_loaded.value) {
    has_user_discounts_loaded.value = true;
    getUserDiscounts().then(() => {});
  }
+};
+
+const isDirectCustomerProductDiscount = (discount, productId) => {
+  return discount?.product_or_category_id == productId && Number(discount?.is_category) === 0;
+};
+
+const parseFixedPriceValue = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  const parsed = Number.parseInt(String(value), 10);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+/** Get user product discount */
+export const getUserProductDiscount = (product, allowCategory = null, onlyCategory = null) => {
+  // Check if the user discounts are loaded
+  ensureUserDiscountsLoaded();

  // Get the product's id
  const productId = product.id;
@@ -1948,6 +1965,36 @@ export const getUserProductDiscount = (product, allowCategory = null, onlyCatego
  return appliedDiscount;
 };

+export const getUserProductFixedPrice = (product) => {
+  ensureUserDiscountsLoaded();
+
+  const productId = product?.id;
+  if (productId === null || productId === undefined) {
+    return null;
+  }
+
+  const fixedPriceDiscount = (Array.isArray(user_discounts.value) ? user_discounts.value : []).find((discount) => (
+    isDirectCustomerProductDiscount(discount, productId) && parseFixedPriceValue(discount.fixed_price) !== null
+  ));
+
+  return fixedPriceDiscount ? parseFixedPriceValue(fixedPriceDiscount.fixed_price) : null;
+};
+
+export const getUserProductPrice = (product) => {
+  const fixedPrice = getUserProductFixedPrice(product);
+  if (fixedPrice !== null) {
+    return fixedPrice;
+  }
+
+  const price = Number(product?.price ?? 0);
+  const discount = Number(getUserProductDiscount(product) || 0);
+  if (!Number.isFinite(price)) {
+    return 0;
+  }
+
+  return Number((price - (price * (discount / 100))).toFixed(0));
+};
+
 export const showFakeCreateOrderItem = (product, quantity, price) => {
  order_items.value.push({
    id: Math.floor(Math.random() * 1000),
@@ -189,7 +189,7 @@ const descriptionKeyOverrides: Partial<Record<EntityType, string[]>> = {
  xlvask_customers: ['email', 'city', 'address', 'vatnumber'],
  motorapi_lookups: ['endpoint', 'license_plate', 'result'],
  fxratesapi_conversion_rates: ['base', 'target', 'endpoint', 'result'],
-  customer_discounts: ['customer_number', 'percentage'],
+  customer_discounts: ['customer_number', 'fixed_price', 'percentage'],
  module_config: ['description', 'value'],
  department_goals: ['criteria.type', 'criteria.progress_alert_frequency', 'criteria.progress_alert_destination']
 };
@@ -251,6 +251,7 @@ const keyFieldOverrides: Partial<Record<EntityType, FieldSelector[]>> = {
  ),
  customer_discounts: fieldList(
    field('Discount', 'discount', 'percentage'),
+    field('Fixed price', 'fixed_price'),
    field('Target', 'product_or_category_id', 'object_id'),
    field('Category', 'is_category'),
    field('Customer #', 'customer_number'),
@@ -61,6 +61,19 @@ export const getUserData = async () => {
      });
 };

+const isDirectProductDiscount = (discount, productId) => {
+  return discount?.product_or_category_id == productId && Number(discount?.is_category) === 0;
+};
+
+const parseFixedPriceValue = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  const parsed = Number.parseInt(String(value), 10);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
 /** Get user product discount */
 export const getUserProductDiscount = (product, allowCategory = 1, onlyCategory = 0, allowGlobal = 0) => {
  // Get the product id
@@ -133,12 +146,25 @@ export const getUserProductOnlyDiscount = (product) => {
  // Find the discount for the product
  let discount = null;
  try {
-    discount = user.discounts.value.find(discount => discount.product_or_category_id == productId && !discount.is_category) || null;
+    discount = user.discounts.value.find(discount => isDirectProductDiscount(discount, productId)) || null;
  } catch (e) {}
  // If the discount is not found, return 0
  return discount ? discount.percentage : 0;
 };

+export const getUserProductFixedPrice = (product) => {
+  const productId = product.id;
+  let fixedPriceDiscount = null;
+
+  try {
+    fixedPriceDiscount = user.discounts.value.find((discount) => (
+      isDirectProductDiscount(discount, productId) && parseFixedPriceValue(discount.fixed_price) !== null
+    )) || null;
+  } catch (e) {}
+
+  return fixedPriceDiscount ? parseFixedPriceValue(fixedPriceDiscount.fixed_price) : null;
+};
+
 export const isProductAllowedToApplyCategoryDiscounts = (product) => {
  // Check if the product is allowed to apply category discounts
  return parseInt(product.apply_category_discount) === 1;
@@ -166,6 +192,21 @@ export const getProductBestApplicableDiscount = (product) => {
  return Math.max(productDiscount, categoryDiscount, globalDiscount);
 }

+export const getProductEffectivePrice = (product) => {
+  const fixedPrice = getUserProductFixedPrice(product);
+  if (fixedPrice !== null) {
+    return fixedPrice;
+  }
+
+  const basePrice = Number(product.price ?? 0);
+  const discount = Number(getProductBestApplicableDiscount(product) || 0);
+  if (!Number.isFinite(basePrice)) {
+    return 0;
+  }
+
+  return Number((basePrice - (basePrice * (discount / 100))).toFixed(0));
+}
+
 export const user = {
  id: ref(''),
  customer_number: ref(''),
@@ -199,9 +240,11 @@ export const user = {
    getUserCategoryDiscount: getUserCategoryDiscount,
    getUserGlobalDiscount: getUserGlobalDiscount,
    getUserProductOnlyDiscount: getUserProductOnlyDiscount,
+    getUserProductFixedPrice: getUserProductFixedPrice,
    isProductAllowedToApplyCategoryDiscounts: isProductAllowedToApplyCategoryDiscounts,
    getProductCategory: getProductCategory,
    getProductBestApplicableDiscount: getProductBestApplicableDiscount,
+    getProductEffectivePrice: getProductEffectivePrice,
  },
 };
 </script>
@@ -3,7 +3,7 @@
 import UserSubPageWrapper from "@/views/dashboards/superUserDashboard/user/UserSubPageWrapper.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
 import { useRouter } from 'vue-router'
-import { user, getUserData, userId, setUser, getUserProductDiscount, getUserGlobalDiscount, getProductBestApplicableDiscount, getUserProductOnlyDiscount, getProductCategory, getUserCategoryDiscount, isProductAllowedToApplyCategoryDiscounts } from "@/views/dashboards/superUserDashboard/user/SuperUserSelectedUserObject.vue";
+import { user, getUserData, userId, setUser, getUserProductDiscount, getUserGlobalDiscount, getProductBestApplicableDiscount, getUserProductOnlyDiscount, getUserProductFixedPrice, getProductEffectivePrice, getProductCategory, getUserCategoryDiscount, isProductAllowedToApplyCategoryDiscounts } from "@/views/dashboards/superUserDashboard/user/SuperUserSelectedUserObject.vue";
 import { getProducts } from "@/components/shop/Products.vue";
 import { ref } from 'vue';
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
@@ -56,6 +56,72 @@ const editDiscount = (product, isCategory) => {
    allowOutsideClick: () => !Swal.isLoading()
  });
 }
+
+const formatPrice = (price) => `${Number(price || 0).toFixed(0)} Kr.`;
+
+const getProductPriceDisplay = (product) => {
+  const fixedPrice = getUserProductFixedPrice(product);
+  if (fixedPrice !== null) {
+    return `${formatPrice(fixedPrice)} (fast pris)`;
+  }
+
+  const discount = getProductBestApplicableDiscount(product);
+  if (discount === 0) {
+    return formatPrice(product.price);
+  }
+
+  return `${formatPrice(getProductEffectivePrice(product))} (${discount}% rabat)`;
+};
+
+const editFixedPrice = (product) => {
+  const fixedPrice = getUserProductFixedPrice(product);
+  Swal.fire({
+    title: product.name + ' ( product: ' + product.id + ' )',
+    input: 'number',
+    inputValue: fixedPrice === null ? '' : fixedPrice,
+    inputLabel: 'Fast pris (Kr.)',
+    inputAttributes: {
+      autocapitalize: 'off',
+      min: 0,
+      step: 1
+    },
+    showCancelButton: true,
+    confirmButtonText: 'Save',
+    showLoaderOnConfirm: true,
+    inputValidator: (value) => {
+      const normalizedValue = String(value ?? '').trim();
+      if (normalizedValue === '') {
+        return null;
+      }
+
+      const parsedValue = Number(normalizedValue);
+      if (!Number.isInteger(parsedValue) || parsedValue < 0) {
+        return 'Fast pris skal være et heltal eller tom.';
+      }
+
+      return null;
+    },
+    preConfirm: (value) => {
+      const normalizedValue = String(value ?? '').trim();
+      const fixedPriceValue = normalizedValue === '' ? null : Number.parseInt(normalizedValue, 10);
+      return authenticatedRequest(`/superuser/user/discounts`, "POST", {
+        user_id: userId.value,
+        object_id: product.id,
+        discount: getUserProductOnlyDiscount(product),
+        fixed_price: fixedPriceValue,
+        is_category: false
+      })
+          .then((response) => {
+            console.log(response);
+            getUserData();
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+    },
+    allowOutsideClick: () => !Swal.isLoading()
+  });
+}
 </script>

 <template>
@@ -74,6 +140,7 @@ const editDiscount = (product, isCategory) => {
            <th>{{ $t('tables.common.category') }}</th>
            <th>{{ $t('tables.common.product_name') }}</th>
            <th>{{ $t('tables.common.price') }}</th>
+            <th>Fast pris</th>
            <th>{{ $t('tables.common.discount_item') }}</th>
            <th>{{ $t('tables.common.discount_category') }}</th>
          </tr>
@@ -84,8 +151,16 @@ const editDiscount = (product, isCategory) => {
            <td>{{ getProductCategory(product)}}</td>
            <td>{{ product.name }}</td>
            <!-- Price -->
-            <td v-if="getProductBestApplicableDiscount(product) === 0">{{ product.price }} Kr.</td>
-            <td v-else>{{ (product.price - (product.price * (getProductBestApplicableDiscount(product) / 100))).toFixed(0) }} Kr. ({{ getProductBestApplicableDiscount(product) }}% rabat)</td>
+            <td>{{ getProductPriceDisplay(product) }}</td>
+
+            <!-- Fixed price -->
+            <td
+                class="is-clickable"
+                @click="editFixedPrice(product)"
+                :data-testid="`customer-fixed-price-${product.id}`"
+            ><template v-if="getUserProductFixedPrice(product) !== null">{{ getUserProductFixedPrice(product) }} Kr.</template><template v-else>-</template>
+              <i class="is-pulled-right fas fa-edit"></i>
+            </td>

            <!-- Discount: Item -->
            <td
@@ -122,4 +197,4 @@ const editDiscount = (product, isCategory) => {

 <style scoped>

-</style>
+</style>
@@ -0,0 +1,125 @@
+// @vitest-environment jsdom
+import { mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/components/session/authenticatedRequest.vue", () => ({
+  authenticatedRequest: vi.fn(),
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {},
+}));
+
+import {
+  getProductBestApplicableDiscount,
+  getProductEffectivePrice,
+  getUserProductFixedPrice,
+  user,
+} from "@/views/dashboards/superUserDashboard/user/SuperUserSelectedUserObject.vue";
+import CustomerProductDiscountDisplay from "@/components/displays/department/pos/displays/CustomerProductDiscountDisplay.vue";
+
+const product = {
+  id: 101,
+  category: 9,
+  category_id: 9,
+  name: "Premium wash",
+  price: 1000,
+  apply_category_discount: 1,
+};
+
+const globalDiscount = {
+  id: 999999,
+  product_or_category_id: "global",
+  is_category: 1,
+  percentage: 50,
+  fixed_price: null,
+};
+
+const categoryDiscount = {
+  id: 200,
+  product_or_category_id: 9,
+  is_category: 1,
+  percentage: 80,
+  fixed_price: null,
+};
+
+beforeEach(() => {
+  user.discounts.value = [];
+});
+
+describe("customer product fixed prices", () => {
+  it("uses a direct fixed product price as the effective price without changing discount selection", () => {
+    user.discounts.value = [
+      globalDiscount,
+      categoryDiscount,
+      {
+        id: 300,
+        product_or_category_id: 101,
+        is_category: 0,
+        percentage: 10,
+        fixed_price: 350,
+      },
+    ];
+
+    expect(getProductBestApplicableDiscount(product)).toBe(80);
+    expect(getUserProductFixedPrice(product)).toBe(350);
+    expect(getProductEffectivePrice(product)).toBe(350);
+  });
+
+  it("falls back to the existing best-discount calculation when fixed price is not set", () => {
+    user.discounts.value = [
+      globalDiscount,
+      {
+        ...categoryDiscount,
+        percentage: 30,
+      },
+      {
+        id: 300,
+        product_or_category_id: 101,
+        is_category: 0,
+        percentage: 10,
+        fixed_price: null,
+      },
+    ];
+
+    expect(getUserProductFixedPrice(product)).toBeNull();
+    expect(getProductBestApplicableDiscount(product)).toBe(50);
+    expect(getProductEffectivePrice(product)).toBe(500);
+  });
+
+  it("treats zero as a set fixed price", () => {
+    user.discounts.value = [
+      {
+        id: 300,
+        product_or_category_id: 101,
+        is_category: 0,
+        percentage: 10,
+        fixed_price: 0,
+      },
+    ];
+
+    expect(getUserProductFixedPrice(product)).toBe(0);
+    expect(getProductEffectivePrice(product)).toBe(0);
+  });
+
+  it("shows fixed price instead of discount percentage in the POS product badge", () => {
+    const wrapper = mount(CustomerProductDiscountDisplay, {
+      props: {
+        product,
+        customer_discounts: [
+          categoryDiscount,
+          {
+            id: 300,
+            product_or_category_id: 101,
+            is_category: 0,
+            percentage: 10,
+            fixed_price: 350,
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.text()).toContain("350 Kr.");
+    expect(wrapper.text()).not.toContain("-80%");
+  });
+});
@@ -356,6 +356,7 @@ describe("system search card view-model behavior", () => {
          id: 326,
          customer_number: 12345679,
          discount: 12.5,
+          fixed_price: 350,
          object_id: "global",
          is_category: true,
          created_at: "2026-03-12T09:15:00Z",
@@ -364,6 +365,7 @@ describe("system search card view-model behavior", () => {
    );

    expect(vm.keyFields.some((entry) => entry.label === "Discount" && entry.value === "12.5%")).toBe(true);
+    expect(vm.keyFields.some((entry) => entry.label === "Fixed price" && entry.value === "350")).toBe(true);
    expect(vm.keyFields.some((entry) => entry.label === "Target" && entry.value === "global")).toBe(true);
    expect(vm.keyFields.some((entry) => entry.label === "Category" && entry.value === "Yes")).toBe(true);
    expect(vm.keyFields.some((entry) => entry.label === "Created" && entry.value.includes("2026-03-12"))).toBe(true);