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 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("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");
});