@controleonline/ui-customers 1.0.81

package/src/tests/browser/manager/client-details-franchise-commission.spec.js

@@ -0,0 +1,318 @@
+/**
+ * Browser smoke: client-details franchise commission (ui-customers#10).
+ * Covers:
+ * 1) superadmin sees editable pencil and can save comission/minimum_comission
+ * 2) non-owner non-super sees read-only (no pencil)
+ */
+const {expect, test} = require('playwright/test');
+const {API_ORIGIN} = require('../../../../../../../src/tests/browser/apiOrigin');
+const {version: appVersion} = require('../../../../../../../package.json');
+
+const CORS_HEADERS = {
+  'access-control-allow-origin': '*',
+  'access-control-allow-headers':
+    'API-TOKEN, APP-DOMAIN, DEVICE, ACCEPT, CONTENT-TYPE, X-Requested-With',
+  'access-control-allow-methods': 'GET,POST,PUT,PATCH,DELETE,OPTIONS',
+};
+
+const collection = (member = [], summary = {}) => ({
+  member,
+  'hydra:member': member,
+  totalItems: member.length,
+  'hydra:totalItems': member.length,
+  summary,
+});
+
+const jsonHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'application/ld+json; charset=utf-8',
+});
+
+const textHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'text/css; charset=utf-8',
+});
+
+const createCompany = ({ownerEnabled = true} = {}) => ({
+  id: 3,
+  name: 'Franqueadora',
+  alias: 'FRANQUEADORA',
+  panel_enabled: true,
+  enabled: true,
+  commercial_enabled: true,
+  theme: {
+    colors: {
+      primary: '#0EA5E9',
+      secondary: '#F97316',
+    },
+  },
+  configs: {},
+  user: {
+    id: 7,
+    name: 'Admin',
+    owner_enabled: ownerEnabled,
+  },
+});
+
+const franchiseePerson = {
+  '@id': '/people/42',
+  id: 42,
+  name: 'FRANQUIA SUL',
+  alias: 'FRANQUIA SUL',
+  peopleType: 'J',
+  enable: true,
+};
+
+const franchiseeLink = {
+  '@id': '/people_links/99',
+  id: 99,
+  linkType: 'franchisee',
+  people: {'@id': '/people/42', id: 42},
+  company: {'@id': '/people/3', id: 3},
+  comission: 10,
+  minimum_comission: 2000,
+};
+
+const mockFranchiseCommissionApi = async (
+  page,
+  {roles = ['ROLE_SUPER'], ownerEnabled = true} = {},
+) => {
+  const company = createCompany({ownerEnabled});
+  let currentLink = {...franchiseeLink};
+  const putBodies = [];
+  const peopleLinkGetUrls = [];
+
+  await page.route(`${API_ORIGIN}/**`, async route => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const pathname = url.pathname.replace(/^\/+/, '');
+    const method = request.method().toUpperCase();
+
+    if (method === 'OPTIONS') {
+      return route.fulfill({status: 204, headers: CORS_HEADERS, body: ''});
+    }
+
+    if (pathname === 'themes-colors.css') {
+      return route.fulfill({
+        status: 200,
+        headers: textHeaders(),
+        body: ':root { --primary: #0ea5e9; --secondary: #f97316; }',
+      });
+    }
+
+    if (pathname === 'runtime/ip') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ip: '127.0.0.1'}),
+      });
+    }
+
+    if (pathname === 'people/company/default') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(company),
+      });
+    }
+
+    if (pathname === 'people/companies/my') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([company])),
+      });
+    }
+
+    if (pathname === 'people/42') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(franchiseePerson),
+      });
+    }
+
+    if (pathname === 'people_links' || pathname.startsWith('people_links/')) {
+      if (method === 'GET') {
+        peopleLinkGetUrls.push(url.toString());
+        const linkTypes = [
+          ...url.searchParams.getAll('linkType[]'),
+          ...url.searchParams.getAll('linkType[0]'),
+        ];
+        if (url.searchParams.has('linkType')) {
+          return route.fulfill({
+            status: 400,
+            headers: jsonHeaders(),
+            body: JSON.stringify({
+              detail: 'Unexpected value for parameter "linkType": expecting "array", got "string".',
+            }),
+          });
+        }
+        const people = url.searchParams.get('people') || '';
+        if (linkTypes.includes('franchisee') || people === '42') {
+          return route.fulfill({
+            status: 200,
+            headers: jsonHeaders(),
+            body: JSON.stringify(collection([currentLink])),
+          });
+        }
+        return route.fulfill({
+          status: 200,
+          headers: jsonHeaders(),
+          body: JSON.stringify(collection([])),
+        });
+      }
+
+      if (method === 'PUT' || method === 'PATCH') {
+        const body = await request.postDataJSON().catch(() => ({}));
+        putBodies.push(body);
+        if (typeof body.comission === 'number') {
+          currentLink = {...currentLink, comission: body.comission};
+        }
+        if (typeof body.minimum_comission === 'number') {
+          currentLink = {
+            ...currentLink,
+            minimum_comission: body.minimum_comission,
+          };
+        }
+        return route.fulfill({
+          status: 200,
+          headers: jsonHeaders(),
+          body: JSON.stringify(currentLink),
+        });
+      }
+
+      return route.fulfill({
+        status: 405,
+        headers: jsonHeaders(),
+        body: JSON.stringify({detail: 'Method Not Allowed'}),
+      });
+    }
+
+    if (pathname === 'menus-people') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({modules: {}}),
+      });
+    }
+
+    if (pathname === 'configs/discovery-configs') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({configs: {}}),
+      });
+    }
+
+    return route.fulfill({
+      status: 200,
+      headers: jsonHeaders(),
+      body: JSON.stringify(collection([])),
+    });
+  });
+
+  await page.addInitScript(
+    ({appVersion, roles, ownerEnabled}) => {
+      const setLocalStorageItem = (key, value) => {
+        try {
+          localStorage.setItem(key, value);
+        } catch {
+          // ignore
+        }
+      };
+
+      setLocalStorageItem(
+        'session',
+        JSON.stringify({
+          id: 7,
+          people: '/people/7',
+          api_key: 'test-api-key',
+          active: 1,
+          mycompany: 3,
+          roles,
+        }),
+      );
+      setLocalStorageItem('config', JSON.stringify({language: 'pt-br'}));
+      setLocalStorageItem('app-type', 'MANAGER');
+      setLocalStorageItem(
+        'device',
+        JSON.stringify({
+          id: 'web-manager',
+          device: 'web-manager',
+          type: 'WEB',
+          appName: 'Browser Manager',
+          appVersion,
+          buildNumber: appVersion,
+          systemName: 'web',
+          systemVersion: 'web',
+          deviceType: 'web',
+          metadata: {},
+        }),
+      );
+      // seed current company with owner flag for store bootstrap if needed
+      setLocalStorageItem(
+        'currentCompany',
+        JSON.stringify({
+          id: 3,
+          alias: 'FRANQUEADORA',
+          user: {id: 7, owner_enabled: ownerEnabled},
+        }),
+      );
+    },
+    {appVersion, roles, ownerEnabled},
+  );
+
+  return {
+    getPutBodies: () => putBodies,
+    getPeopleLinkGetUrls: () => peopleLinkGetUrls,
+  };
+};
+
+test.describe('client-details franchise commission browser smoke', () => {
+  test('superadmin can edit franchise commission and persist', async ({page}) => {
+    const api = await mockFranchiseCommissionApi(page, {
+      roles: ['ROLE_SUPER'],
+      ownerEnabled: false,
+    });
+
+    await page.goto('/client-details?clientId=42&contextKey=client');
+    await expect(page.getByText(/Comissão da franquia|franchiseCommission/i)).toBeVisible({
+      timeout: 15000,
+    });
+    await expect(page.getByText(/10%/)).toBeVisible();
+    await expect(page.getByText(/2000/)).toBeVisible();
+    expect(api.getPeopleLinkGetUrls()).toEqual(
+      expect.arrayContaining([expect.stringMatching(/linkType(%5B%5D|%5B0%5D)=franchisee/)]),
+    );
+
+    const editBtn = page.getByTestId('edit-franchise-commission');
+    await expect(editBtn).toBeVisible();
+    await editBtn.click();
+
+    await page.getByTestId('franchise-comission-input').fill('15');
+    await page.getByTestId('franchise-minimum-comission-input').fill('2500');
+    await page.getByTestId('save-franchise-commission').click();
+
+    await expect.poll(() => api.getPutBodies().length).toBeGreaterThan(0);
+    const body = api.getPutBodies()[0];
+    expect(body.comission).toBe(15);
+    expect(body.minimum_comission).toBe(2500);
+  });
+
+  test('non-owner non-super sees read-only commission (no pencil)', async ({
+    page,
+  }) => {
+    await mockFranchiseCommissionApi(page, {
+      roles: ['ROLE_MANAGER'],
+      ownerEnabled: false,
+    });
+
+    await page.goto('/client-details?clientId=42&contextKey=client');
+    await expect(page.getByText(/Comissão da franquia|franchiseCommission/i)).toBeVisible({
+      timeout: 15000,
+    });
+    await expect(page.getByText(/10%/)).toBeVisible();
+    await expect(page.getByTestId('edit-franchise-commission')).toHaveCount(0);
+  });
+});

package/src/tests/browser/manager/client-details-franchise-links.spec.js

@@ -0,0 +1,365 @@
+const {expect, test} = require('playwright/test');
+const {API_ORIGIN} = require('../../../../../../../src/tests/browser/apiOrigin');
+const {version: appVersion} = require('../../../../../../../package.json');
+
+/**
+ * Browser smoke — client-details aba Franquia/Filial (PJ → PJ).
+ * Cobre critérios de aceite de app-community#453 / task-453:
+ * - abrir client-details de PJ no MANAGER → aba Franquia/Filial
+ * - listagem de vínculos franchisee/filial
+ * - botão + (vincular) e ações de edição/remoção (MANAGER)
+ * - PF não entra na listagem
+ * - console/pageerror limpo
+ */
+
+const CORS_HEADERS = {
+  'access-control-allow-origin': '*',
+  'access-control-allow-headers':
+    'API-TOKEN, APP-DOMAIN, DEVICE, ACCEPT, CONTENT-TYPE, X-Requested-With',
+  'access-control-allow-methods': 'GET,POST,PUT,PATCH,DELETE,OPTIONS',
+};
+
+const jsonHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'application/ld+json; charset=utf-8',
+});
+
+const textHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'text/css; charset=utf-8',
+});
+
+const collection = member => ({
+  member,
+  'hydra:member': member,
+  totalItems: member.length,
+  'hydra:totalItems': member.length,
+});
+
+const themeColors = {
+  primary: '#1C8FBD',
+  secondary: '#0169D9',
+  background: '#F3F7FB',
+  text: '#0F172A',
+  textSecondary: '#6C7787',
+  border: '#D7E1EC',
+  headerBackground: '#F3F7FB',
+  headerBorder: '#D7E1EC',
+  headerText: '#0F172A',
+  cardBackground: '#FFFFFF',
+  cardBorder: '#D7E1EC',
+  cardText: '#0F172A',
+  cardIcon: '#1C8FBD',
+  cardShadow: '#1C8FBD',
+  listItemBackground: '#F1F8FB',
+  listItemText: '#0F172A',
+  listItemSubtitleText: '#6C7787',
+  loadingSpinner: '#1C8FBD',
+  buttonBackground: '#1C8FBD',
+  buttonBorder: '#1C8FBD',
+  buttonIcon: '#FFFFFF',
+  buttonText: '#FFFFFF',
+  buttonShadow: '#1C8FBD',
+  buttonBackgroundSecondary: '#FFFFFF',
+  buttonBorderSecondary: '#D7E1EC',
+  buttonIconSecondary: '#0169D9',
+  buttonTextSecondary: '#0169D9',
+  buttonDisabledBackground: '#CBD5E1',
+  tabBarBackground: '#FFFFFF',
+  tabBarBorder: '#D7E1EC',
+  menuSelectedBorder: '#1C8FBD',
+  menuSelectedText: '#1C8FBD',
+  pageBackground: '#F3F7FB',
+  modalOverlay: 'rgba(15,23,42,0.45)',
+  modalBackground: '#FFFFFF',
+  modalText: '#0F172A',
+  modalShadow: '#1C8FBD',
+  inputBackground: '#FFFFFF',
+  inputBorder: '#D7E1EC',
+};
+
+const themeCss = `:root { ${Object.entries(themeColors)
+  .map(([key, value]) => `--${key}: ${value};`)
+  .join(' ')} }`;
+
+const company = {
+  '@id': '/people/2',
+  id: 2,
+  name: 'CONTROLE ONLINE',
+  alias: 'CONTROLE ONLINE',
+  panel_enabled: true,
+  enabled: true,
+  commercial_enabled: true,
+  theme: {colors: themeColors},
+  configs: {},
+};
+
+const clientPj = {
+  '@id': '/people/29',
+  id: 29,
+  name: 'LAVE GO FRANQUIAS LTDA',
+  alias: 'LAVE-GO',
+  peopleType: 'J',
+  enable: true,
+};
+
+const franchiseePj = {
+  '@id': '/people/40',
+  id: 40,
+  name: 'FRANQUIA SUL LTDA',
+  alias: 'FRANQUIA-SUL',
+  peopleType: 'J',
+  enable: true,
+};
+
+const filialPj = {
+  '@id': '/people/41',
+  id: 41,
+  name: 'FILIAL NORTE LTDA',
+  alias: 'FILIAL-NORTE',
+  peopleType: 'J',
+  enable: true,
+};
+
+const pfPerson = {
+  '@id': '/people/25',
+  id: 25,
+  name: 'PESSOA FISICA TESTE',
+  alias: 'PF-TESTE',
+  peopleType: 'F',
+  enable: true,
+};
+
+const franchiseLink = {
+  '@id': '/people_links/501',
+  id: 501,
+  company: clientPj,
+  people: franchiseePj,
+  linkType: 'franchisee',
+  enable: true,
+};
+
+const filialLink = {
+  '@id': '/people_links/502',
+  id: 502,
+  company: clientPj,
+  people: filialPj,
+  linkType: 'filial',
+  enable: true,
+};
+
+const pfLinkShouldBeFiltered = {
+  '@id': '/people_links/503',
+  id: 503,
+  company: clientPj,
+  people: pfPerson,
+  linkType: 'franchisee',
+  enable: true,
+};
+
+const mockManagerApi = async page => {
+  const peopleLinkQueries = [];
+  const pageErrors = [];
+
+  page.on('pageerror', err => {
+    pageErrors.push(String(err?.message || err));
+  });
+
+  await page.route(`${API_ORIGIN}/**`, async route => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const pathname = url.pathname.replace(/^\/+/, '');
+
+    if (request.method().toUpperCase() === 'OPTIONS') {
+      return route.fulfill({status: 204, headers: CORS_HEADERS, body: ''});
+    }
+
+    if (pathname === 'themes-colors.css') {
+      return route.fulfill({
+        status: 200,
+        headers: textHeaders(),
+        body: themeCss,
+      });
+    }
+
+    if (pathname === 'runtime/ip') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ip: '127.0.0.1'}),
+      });
+    }
+
+    if (pathname === 'people/companies/my') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([company])),
+      });
+    }
+
+    if (pathname === 'people/company/default') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(company),
+      });
+    }
+
+    if (pathname === 'people/29') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(clientPj),
+      });
+    }
+
+    if (pathname === 'people' || pathname.startsWith('people?')) {
+      // candidates for picker (PJ only)
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([franchiseePj, filialPj, pfPerson])),
+      });
+    }
+
+    if (pathname === 'people_links' || pathname.startsWith('people_links')) {
+      const query = Object.fromEntries(url.searchParams);
+      peopleLinkQueries.push(query);
+
+      if (request.method().toUpperCase() === 'POST') {
+        return route.fulfill({
+          status: 201,
+          headers: jsonHeaders(),
+          body: JSON.stringify({
+            ...franchiseLink,
+            id: 599,
+            '@id': '/people_links/599',
+          }),
+        });
+      }
+
+      if (request.method().toUpperCase() === 'PUT' || request.method().toUpperCase() === 'PATCH') {
+        return route.fulfill({
+          status: 200,
+          headers: jsonHeaders(),
+          body: JSON.stringify(franchiseLink),
+        });
+      }
+
+      if (request.method().toUpperCase() === 'DELETE') {
+        return route.fulfill({
+          status: 204,
+          headers: CORS_HEADERS,
+          body: '',
+        });
+      }
+
+      // GET list — include PF link to assert helper filters it out
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(
+          collection([franchiseLink, filialLink, pfLinkShouldBeFiltered]),
+        ),
+      });
+    }
+
+    return route.fulfill({
+      status: 200,
+      headers: jsonHeaders(),
+      body: JSON.stringify(collection([])),
+    });
+  });
+
+  await page.addInitScript(
+    ({version}) => {
+      localStorage.setItem(
+        'session',
+        JSON.stringify({
+          id: 19,
+          people: '/people/19',
+          api_key: 'test-api-key',
+          active: 1,
+          mycompany: 2,
+          roles: ['ROLE_SUPER'],
+        }),
+      );
+      localStorage.setItem('app-type', 'MANAGER');
+      localStorage.setItem('config', JSON.stringify({language: 'pt-br'}));
+      localStorage.setItem(
+        'device',
+        JSON.stringify({
+          id: 'web-manager',
+          device: 'web-manager',
+          type: 'WEB',
+          appName: 'Browser Manager',
+          appVersion: version,
+          buildNumber: version,
+          systemName: 'web',
+          systemVersion: 'web',
+          deviceType: 'web',
+          metadata: {},
+        }),
+      );
+    },
+    {version: appVersion},
+  );
+
+  return {peopleLinkQueries, pageErrors};
+};
+
+test.describe('manager client-details franchise/filial links', () => {
+  test('lists PJ franchisee/filial links and exposes MANAGER CRUD controls', async ({
+    page,
+  }) => {
+    const {peopleLinkQueries, pageErrors} = await mockManagerApi(page);
+
+    await page.goto('/client-details?clientId=29&contextKey=client');
+
+    await expect(
+      page.getByText('LAVE GO FRANQUIAS LTDA', {exact: true}).first(),
+    ).toBeVisible({timeout: 15000});
+
+    // Open Franquia/Filial tab
+    const franchiseTab = page.getByText(/Franquia\/Filial|Franquia/i).first();
+    await expect(franchiseTab).toBeVisible({timeout: 10000});
+    await franchiseTab.click();
+
+    // Listagem: PJ franchisee + filial; PF filtrado
+    await expect(page.getByText('FRANQUIA SUL LTDA', {exact: true})).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(page.getByText('FILIAL NORTE LTDA', {exact: true})).toBeVisible();
+    await expect(page.getByText('PESSOA FISICA TESTE', {exact: true})).toHaveCount(0);
+
+    // MANAGER: botão vincular + ações de edição/remoção
+    await expect(page.getByTestId('franchise-links-add-btn')).toBeVisible();
+    await expect(page.getByTestId('franchise-links-edit-501')).toBeVisible();
+    await expect(page.getByTestId('franchise-links-delete-501')).toBeVisible();
+    await expect(page.getByTestId('franchise-link-row-501')).toBeVisible();
+    await expect(page.getByTestId('franchise-link-row-502')).toBeVisible();
+
+    // Abrir modal de vincular
+    await page.getByTestId('franchise-links-add-btn').click();
+    await expect(page.getByTestId('franchise-link-people-picker')).toBeVisible({
+      timeout: 5000,
+    });
+    await expect(page.getByTestId('franchise-link-type-picker')).toBeVisible();
+    await expect(page.getByTestId('franchise-link-comission-input')).toBeVisible();
+    await expect(
+      page.getByTestId('franchise-link-minimum-comission-input'),
+    ).toBeVisible();
+    await expect(page.getByTestId('franchise-link-save-btn')).toBeVisible();
+
+    // people_links foi consultado com company do cliente
+    await expect.poll(() => peopleLinkQueries.length).toBeGreaterThanOrEqual(1);
+    expect(
+      peopleLinkQueries.some(
+        q => String(q.company || '') === '29' || String(q.company || '').includes('29'),
+      ),
+    ).toBe(true);
+
+    expect(pageErrors).toEqual([]);
+  });
+});