pleno-vue/tests/e2e/pos-customer-rules.spec.js

import { test, expect } from "@playwright/test";
import { createPosFixture, mockApi, primeMockSession } from "./support/network.js";

const POS_PERMISSIONS = [
  "admin",
  "department_access_12",
  "delete_order",
  "edit_order_items",
  "get_user",
  "list_customer_attributes",
  "get_custom_prices_other",
];
const POS_STEP_TIMEOUT = 20_000;

function json(body, status = 200) {
  return {
    status,
    contentType: "application/json",
    body: JSON.stringify(body),
  };
}

async function primeOperatorSession(page, token = "pos-customer-rules-token") {
  await primeMockSession(page, { token, bootPath: "/login" });
}

async function openPosAndSelectCustomer(page, customer) {
  await page.goto("/admin/12/modules/pos?step=1");
  await expect(page.getByTestId("pos-step-1")).toBeVisible({ timeout: POS_STEP_TIMEOUT });

  await page.locator("#reg_1").fill("AB12345");
  await page.locator("#pos_select_customer_input").fill(String(customer.customerNumber));
  await expect(page.locator(".customer-drop-down-select").first()).toBeVisible();
  await page.locator(".customer-drop-down-select").first().click();
  await expect(page.locator(".field.has-addons input[disabled]").last()).toHaveValue(customer.name);
  await expect(page.locator(".pos-selected-customer__title").filter({ hasText: customer.name }).first()).toBeVisible();
}

function buildTodayTimestamp(time = "10:00:00.000Z") {
  return `${new Date().toISOString().split("T")[0]}T${time}`;
}

async function commitDesktopReg1ByBlur(page, value = "AB12345") {
  const reg1Input = page.locator("#reg_1");
  await reg1Input.fill(value);
  await reg1Input.evaluate((element) => {
    element.blur();
  });
}

function getSelectedCustomerPhoneValue(page) {
  return page
    .locator(".pos-selected-customer__row")
    .filter({ has: page.locator(".pos-selected-customer__label", { hasText: "Telefon" }) })
    .first()
    .locator(".pos-selected-customer__value");
}

test("rules tab reloads customer attributes when the panel becomes visible", async ({ page }, testInfo) => {
  test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");

  const fixture = createPosFixture({
    customerAttributesByNumber: {
      12345679: [
        { id: 1, customer_number: 12345679, attribute: "invoiceAllOrdersIndividually" },
        { id: 2, customer_number: 12345679, attribute: "invoiceWithStripe" },
      ],
    },
  });
  const customer = fixture.customersByNumber[12345679];

  await mockApi(page, {
    authenticated: true,
    permissions: POS_PERMISSIONS,
    edgeGateways: false,
    pos: fixture,
  });
  await primeOperatorSession(page);

  await page.goto("/admin/12/modules/pos?step=1");
  await expect(page.getByTestId("pos-step-1")).toBeVisible({ timeout: POS_STEP_TIMEOUT });

  await page.locator("#reg_1").fill("AB12345");
  await page.locator("#pos_select_customer_input").fill(String(customer.customerNumber));
  await expect(page.locator(".customer-drop-down-select").first()).toBeVisible();
  await page.locator(".customer-drop-down-select").first().click();
  await expect(page.locator(".field.has-addons input[disabled]").last()).toHaveValue(customer.name);

  await expect(page.locator(".pos-selected-customer__title").filter({ hasText: customer.name }).first()).toBeVisible();

  const rulesTab = page.locator('[data-testid="pos-customer-tab-rules"]:visible').first();
  await expect(rulesTab).toBeVisible();

  const customerAttributesResponse = page.waitForResponse((response) => {
    return (
      response.request().method() === "GET" &&
      response.url().includes(`/customer/attributes?customer_number=${customer.customerNumber}`)
    );
  });

  await rulesTab.click();
  await customerAttributesResponse;

  await expect(page.locator("#invoiceAllOrdersIndividually:visible")).toBeChecked();
  await expect(page.locator("#invoiceWithStripe:visible")).toBeChecked();
});

test("duplicate warning moves below customer rules when rules tab is selected", async ({ page }, testInfo) => {
  test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");

  const fixture = createPosFixture({
    ordersById: {
      54520: {
        id: 54520,
        customer_id: 12345679,
        department_id: 12,
        reference: "DUP-RULES-TAB",
        po: "",
        safety_seal: "",
        notes: "",
        reg_1: "AB12345",
        reg_2: "",
        reg_3: "",
        invoice_collection_id: null,
        booking_id: null,
        completed_at: null,
        closed_at: null,
        created_at: buildTodayTimestamp("09:30:00.000Z"),
        include_in_invoice: null,
      },
    },
  });
  const customer = fixture.customersByNumber[12345679];

  await mockApi(page, {
    authenticated: true,
    permissions: POS_PERMISSIONS,
    edgeGateways: false,
    pos: fixture,
  });
  await primeOperatorSession(page, "pos-customer-rules-duplicate-placement-token");
  await openPosAndSelectCustomer(page, customer);
  await commitDesktopReg1ByBlur(page);

  const actionRail = page.getByTestId("pos-step-1-action-rail");
  const actionRailWarning = actionRail.getByTestId("pos-desktop-duplicate-warning-inline");
  await expect(actionRailWarning).toBeVisible({ timeout: 10_000 });

  await page.locator('[data-testid="pos-customer-tab-rules"]:visible').first().click();

  const rulesFooter = page.getByTestId("pos-customer-rules-footer");
  const rulesFooterWarning = rulesFooter.getByTestId("pos-desktop-duplicate-warning-inline");
  const rulesFooterNext = rulesFooter.getByTestId("pos-next-step");
  await expect(rulesFooterWarning).toBeVisible({ timeout: 10_000 });
  await expect(rulesFooterNext).toBeVisible({ timeout: 10_000 });
  await expect(actionRail).toHaveCount(0);

  const lastRuleRow = page.getByTestId("pos-customer-rule-row").last();
  const lastRuleBox = await lastRuleRow.boundingBox();
  const warningBox = await rulesFooterWarning.boundingBox();
  const footerNextBox = await rulesFooterNext.boundingBox();
  expect(lastRuleBox).not.toBeNull();
  expect(warningBox).not.toBeNull();
  expect(footerNextBox).not.toBeNull();
  expect(warningBox.y).toBeGreaterThanOrEqual(lastRuleBox.y + lastRuleBox.height);
  expect(footerNextBox.y).toBeGreaterThanOrEqual(warningBox.y + warningBox.height);

  await page.locator('[data-testid="pos-customer-tab-details"]:visible').first().click();

  await expect(actionRailWarning).toBeVisible({ timeout: 10_000 });
  await expect(actionRail.getByTestId("pos-next-step")).toBeVisible({ timeout: 10_000 });
  await expect(page.getByTestId("pos-customer-rules-footer")).toHaveCount(0);
});

test("customer details renders top-level phone object when economic customer payload is invalid", async ({
  page,
}, testInfo) => {
  test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");

  const fixture = createPosFixture();
  const customer = fixture.customersByNumber[12345679];
  let usersCustomerInterceptCount = 0;

  await mockApi(page, {
    authenticated: true,
    permissions: POS_PERMISSIONS,
    edgeGateways: false,
    pos: fixture,
  });

  await page.route(/\/users\/customer(?:\?.*)?$/, async (route) => {
    if (route.request().method() !== "GET") {
      await route.fallback();
      return;
    }
    usersCustomerInterceptCount += 1;

    await route.fulfill(
      json({
        success: true,
        data: {
          customer_name: customer.name,
          phone: {
            country_code: 45,
            number: 42331128,
          },
          economic_customer: [],
        },
      })
    );
  });

  await primeOperatorSession(page);
  await page.goto(`/admin/12/modules/pos?customer_id=${customer.customerNumber}&step=1`);
  await expect(page.getByTestId("pos-step-1")).toBeVisible({ timeout: POS_STEP_TIMEOUT });
  await expect(page.locator(".pos-selected-customer__title").filter({ hasText: customer.name }).first()).toBeVisible();
  await expect.poll(() => usersCustomerInterceptCount).toBeGreaterThan(0);

  const phoneValue = getSelectedCustomerPhoneValue(page);
  await expect(phoneValue).toHaveText("42331128");
  await expect(phoneValue).not.toContainText("{");
  await expect(phoneValue).not.toContainText("country_code");
  await expect(phoneValue).not.toContainText("number");
});

test("customer details renders economic customer mobilePhone object as number only", async ({ page }, testInfo) => {
  test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");

  const baseFixture = createPosFixture();
  const baseCustomer = baseFixture.customersByNumber[12345679];
  const fixture = createPosFixture({
    customersByNumber: {
      12345679: {
        ...baseCustomer,
        mobilePhone: {
          country_code: 45,
          number: 42331128,
        },
      },
    },
  });
  const customer = fixture.customersByNumber[12345679];

  await mockApi(page, {
    authenticated: true,
    permissions: POS_PERMISSIONS,
    edgeGateways: false,
    pos: fixture,
  });

  await primeOperatorSession(page);
  await openPosAndSelectCustomer(page, customer);

  const phoneValue = getSelectedCustomerPhoneValue(page);
  await expect(phoneValue).toHaveText("42331128");
  await expect(phoneValue).not.toContainText("{");
  await expect(phoneValue).not.toContainText("country_code");
  await expect(phoneValue).not.toContainText("number");
});