ui-soxo-bootstrap-core 2.6.62-dev.1 → 2.6.62-dev.3

package/core/lib/components/support-desk/support-desk.scss

@@ -0,0 +1,143 @@
+.support-desk {
+  .ant-drawer-body {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__tabs {
+    height: 100%;
+
+    .ant-tabs-nav {
+      margin: 0;
+      padding: 0 16px;
+    }
+
+    .ant-tabs-content-holder {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .ant-tabs-content,
+    .ant-tabs-tabpane {
+      height: 100%;
+    }
+  }
+}
+
+.support-frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+// ---- Raise a ticket ----
+.support-raise {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 16px;
+    font-size: 13px;
+    background: rgba(0, 0, 0, 0.02);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  &__frame {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+
+  &__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    z-index: 1;
+  }
+}
+
+// ---- My tickets ----
+.support-tickets {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 0 16px 16px;
+  }
+}
+
+.support-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 16px 0;
+}
+
+.support-tickets__frame {
+  flex: 1;
+  min-height: 0;
+}
+
+.support-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+
+  &__search {
+    width: 260px;
+    max-width: 100%;
+  }
+
+  &__select {
+    width: 140px;
+  }
+
+  &__dates {
+    max-width: 100%;
+  }
+
+  &__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 4px;
+  }
+}
+
+.support-subject {
+  min-width: 200px;
+
+  &__title {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 360px;
+  }
+
+  &__text {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 360px;
+  }
+}

package/core/lib/components/support-desk/support-desk.utils.js

@@ -0,0 +1,363 @@
+/**
+ * Support desk logic: constants, setting/config, encrypted token and the Helpdesk ticket API.
+ *
+ * Settings come from `HELPATR`:
+ *   helpDeskLink    raise ticket form URL (required)
+ *   projectToken    project code known by the Helpdesk (required)
+ *   encryptedToken  base64 secret that decodes to 64 bytes (required)
+ *   myTicketsLink   ticket list page, default: /my-tickets on the helpDeskLink host
+ *   apiUrl          Helpdesk API host, default: host of the ticket list page
+ *   tokenTtlSeconds token lifetime, default 300, minimum 30
+ *
+ * A token is made for every use (open, reload, each API call) and never cached, so a short
+ * lifetime cannot expire before the Helpdesk reads it. CLOCK_SKEW_SECONDS is added on both
+ * sides of the window so a slightly wrong device clock does not reject a fresh token.
+ *
+ * Security: the secret is delivered to the browser, so any logged in user can read it.
+ * Move token creation to the API if that is not acceptable.
+ */
+
+// ==============================|| CONSTANTS ||============================== //
+
+export const PAGE_SIZE = 10;
+
+// Token lifetime (seconds). Used when `tokenTtlSeconds` is missing or too small.
+export const DEFAULT_TTL_SECONDS = 300;
+export const MIN_TTL_SECONDS = 30;
+
+// Extra time added on both sides of the token window so a wrong device clock does not reject it.
+export const CLOCK_SKEW_SECONDS = 30;
+
+// Ticket list request is cancelled after this long.
+export const REQUEST_TIMEOUT_MS = 15000;
+
+// After this long without the form finishing to load, offer "Open in new tab".
+export const FORM_SLOW_MS = 8000;
+
+// Messages the Helpdesk API returns in `error`, mapped to text the user can act on.
+export const API_ERROR_MESSAGES = {
+  missing_token: 'No token was sent. Please contact your administrator.',
+  invalid_token: 'We could not verify your access. Please try again.',
+  expired_token: 'Your access link expired. Please try again.',
+  project_not_found: 'We could not find the project for this application.',
+  branch_not_found: 'We could not find the branch for your account.',
+  server_misconfigured: 'The Helpdesk is not available right now. Please try again in a moment.',
+};
+
+export const STATUS_COLORS = {
+  open: 'blue',
+  replied: 'purple',
+  resolved: 'green',
+  closed: 'default',
+  unassigned: 'orange',
+  'on-hold': 'orange',
+  'work-in-progress': 'processing',
+  'ready-for-confirmation': 'green',
+  assigned: 'blue',
+};
+
+export const PRIORITY_COLORS = {
+  urgent: 'red',
+  critical: 'red',
+  high: 'volcano',
+  medium: 'gold',
+  low: 'green',
+};
+
+// ==============================|| HELPERS ||============================== //
+
+export const normalize = (value) => (value || '').toLowerCase().replace(/\s+/g, '-');
+
+/**
+ * Turns the HTML the API returns for `description` into plain text.
+ * DOMParser builds an inert document, so nothing in the markup (images, scripts) is loaded or run.
+ */
+export function toPlainText(html) {
+  if (!html) return '';
+  const doc = new DOMParser().parseFromString(String(html), 'text/html');
+  return (doc.body.textContent || '').replace(/\s+/g, ' ').trim();
+}
+
+/** `creation` arrives as "YYYY-MM-DD HH:mm:ss". */
+export function parseCreation(value) {
+  if (!value) return null;
+  const parsed = new Date(String(value).replace(' ', 'T'));
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+export function formatDate(value) {
+  const parsed = parseCreation(value);
+  if (!parsed) return value || '-';
+  return parsed.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
+}
+
+export function formatDateTime(value) {
+  const parsed = parseCreation(value);
+  return parsed ? parsed.toLocaleString() : '';
+}
+
+// ==============================|| CONFIG ||============================== //
+
+function safeUrl(path, base) {
+  try {
+    return new URL(path, base).toString();
+  } catch (e) {
+    return '';
+  }
+}
+
+/**
+ * @param {object} helpDeskSetting value of settings.HELPATR
+ * @param {object} user logged in user
+ * @returns {object} config. `enabled` is false when a required setting is missing, so the
+ * caller should not show the Help button.
+ */
+export function resolveSupportConfig(helpDeskSetting = {}, user = {}) {
+  const { helpDeskLink, myTicketsLink, apiUrl, projectToken, encryptedToken, tokenTtlSeconds } = helpDeskSetting || {};
+
+  const ticketsUrl = myTicketsLink || (helpDeskLink ? safeUrl('/my-tickets', helpDeskLink) : '');
+  const apiBase = apiUrl || (ticketsUrl ? safeUrl('/', ticketsUrl).replace(/\/$/, '') : '');
+
+  const ttl = Number(tokenTtlSeconds);
+
+  return {
+    enabled: Boolean(helpDeskLink && projectToken && encryptedToken),
+    formUrl: helpDeskLink || '',
+    ticketsUrl,
+    apiBase: apiBase.replace(/\/+$/, ''),
+    projectToken,
+    secret: encryptedToken,
+    user: (user && (user.email || user.username)) || '',
+    ttlSeconds: Number.isFinite(ttl) && ttl > 0 ? Math.max(MIN_TTL_SECONDS, ttl) : DEFAULT_TTL_SECONDS,
+  };
+}
+
+// ==============================|| TOKEN ||============================== //
+
+const KEY_BYTES = 64;
+
+const encoder = new TextEncoder();
+
+function base64ToBytes(value) {
+  // Accept standard and url-safe base64, with or without padding / whitespace.
+  const normalized = String(value).trim().replace(/-/g, '+').replace(/_/g, '/').replace(/\s+/g, '');
+  const padded = normalized + '='.repeat((4 - (normalized.length % 4)) % 4);
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+
+function bytesToBase64Url(bytes) {
+  let binary = '';
+  const view = new Uint8Array(bytes);
+  for (let i = 0; i < view.length; i += 1) binary += String.fromCharCode(view[i]);
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+function concat(...parts) {
+  const total = parts.reduce((sum, part) => sum + part.length, 0);
+  const out = new Uint8Array(total);
+  let offset = 0;
+  parts.forEach((part) => {
+    out.set(part, offset);
+    offset += part.length;
+  });
+  return out;
+}
+
+/**
+ * Compact JWE with alg "dir" and enc "A256CBC-HS512" (RFC 7518 5.2.6).
+ * Key = 32 byte MAC key + 32 byte AES key.
+ */
+async function encryptJwe(payload, secret) {
+  const subtle = window.crypto && window.crypto.subtle;
+  if (!subtle) {
+    throw new Error('Support needs a secure (https) connection to open.');
+  }
+
+  const macKey = await subtle.importKey('raw', secret.slice(0, 32), { name: 'HMAC', hash: 'SHA-512' }, false, ['sign']);
+  const encKey = await subtle.importKey('raw', secret.slice(32), { name: 'AES-CBC' }, false, ['encrypt']);
+
+  const header = bytesToBase64Url(encoder.encode(JSON.stringify({ alg: 'dir', enc: 'A256CBC-HS512' })));
+  const aad = encoder.encode(header);
+  const iv = window.crypto.getRandomValues(new Uint8Array(16));
+
+  const ciphertext = new Uint8Array(await subtle.encrypt({ name: 'AES-CBC', iv }, encKey, encoder.encode(JSON.stringify(payload))));
+
+  // AAD length in bits as a 64 bit big endian number.
+  const al = new Uint8Array(8);
+  new DataView(al.buffer).setUint32(4, aad.length * 8);
+
+  const mac = new Uint8Array(await subtle.sign('HMAC', macKey, concat(aad, iv, ciphertext, al)));
+  const tag = mac.slice(0, 32);
+
+  return `${header}..${bytesToBase64Url(iv)}.${bytesToBase64Url(ciphertext)}.${bytesToBase64Url(tag)}`;
+}
+
+/** Branch code of the logged in user, saved as `db_ptr` at login. */
+function readBranch() {
+  try {
+    return localStorage.getItem('db_ptr') || '';
+  } catch (e) {
+    return '';
+  }
+}
+
+/**
+ * Mints a fresh token. Always call right before use.
+ * @throws {Error} with a user-safe message
+ */
+export async function createToken(config) {
+  if (!config.projectToken || !config.secret) {
+    throw new Error('Support is not configured. Contact your administrator.');
+  }
+  if (!config.user) {
+    throw new Error('Your account has no email, so Support cannot be opened.');
+  }
+
+  let secret;
+  try {
+    secret = base64ToBytes(config.secret);
+  } catch (e) {
+    throw new Error('Support link secret is not valid base64.');
+  }
+  if (secret.length !== KEY_BYTES) {
+    throw new Error(`Support link secret must decode to ${KEY_BYTES} bytes (got ${secret.length}).`);
+  }
+
+  const now = Math.floor(Date.now() / 1000);
+  return encryptJwe(
+    {
+      token: config.projectToken,
+      user: config.user,
+      branch: readBranch(),
+      iat: now - CLOCK_SKEW_SECONDS,
+      exp: now + config.ttlSeconds + CLOCK_SKEW_SECONDS,
+    },
+    secret
+  );
+}
+
+function withToken(baseUrl, token) {
+  const separator = baseUrl.includes('?') ? '&' : '?';
+  return `${baseUrl}${separator}d=${encodeURIComponent(token)}`;
+}
+
+export async function buildFormUrl(config) {
+  if (!config.formUrl) throw new Error('Support form link is not configured.');
+  return withToken(config.formUrl, await createToken(config));
+}
+
+export async function buildTicketsPageUrl(config) {
+  if (!config.ticketsUrl) throw new Error('Support ticket list link is not configured.');
+  return withToken(config.ticketsUrl, await createToken(config));
+}
+
+export async function buildTicketsApiUrl(config, params = {}) {
+  if (!config.apiBase) throw new Error('Support ticket API is not configured.');
+
+  const query = new URLSearchParams({ d: await createToken(config) });
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') query.set(key, value);
+  });
+
+  return `${config.apiBase}/api/method/get_tickets_based_on_token?${query.toString()}`;
+}
+
+// ==============================|| TICKET API ||============================== //
+
+export class TicketApiError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+  }
+}
+
+async function getJson(url, signal) {
+  const controller = new AbortController();
+  let timedOut = false;
+
+  const timer = setTimeout(() => {
+    timedOut = true;
+    controller.abort();
+  }, REQUEST_TIMEOUT_MS);
+  const onAbort = () => controller.abort();
+  if (signal) signal.addEventListener('abort', onAbort);
+
+  try {
+    const response = await fetch(url, { credentials: 'omit', signal: controller.signal });
+    if (!response.ok) {
+      throw new TicketApiError('http', `The Helpdesk returned an error (HTTP ${response.status}).`);
+    }
+
+    const body = await response.json();
+    // Frappe wraps whitelisted method responses in `message`.
+    return body?.message ?? body;
+  } catch (err) {
+    if (err instanceof TicketApiError) throw err;
+    if (timedOut) throw new TicketApiError('timeout', 'The Helpdesk took too long to respond.');
+    if (err?.name === 'AbortError') throw new TicketApiError('aborted', '');
+    if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+      throw new TicketApiError('offline', 'You appear to be offline. Check your connection and try again.');
+    }
+    if (err instanceof TypeError) throw new TicketApiError('blocked', 'The browser blocked the request to the Helpdesk.');
+    throw new TicketApiError('unknown', 'We got an unexpected answer from the Helpdesk.');
+  } finally {
+    clearTimeout(timer);
+    if (signal) signal.removeEventListener('abort', onAbort);
+  }
+}
+
+/**
+ * Fetches one page of the user's tickets with a fresh token.
+ * If the server says the token expired (slow network, short lifetime), a new token is made
+ * and the call is repeated once.
+ *
+ * @returns {Promise<{tickets: object[], total: number, statuses: string[], priorities: string[]}>}
+ * @throws {TicketApiError|Error}
+ */
+export async function fetchTickets(config, params, signal) {
+  let result;
+
+  for (let attempt = 0; attempt < 2; attempt += 1) {
+    result = await getJson(await buildTicketsApiUrl(config, params), signal);
+    if (result?.success || result?.error !== 'expired_token') break;
+  }
+
+  if (!result?.success) {
+    throw new TicketApiError('http', API_ERROR_MESSAGES[result?.error] || API_ERROR_MESSAGES.invalid_token);
+  }
+
+  return {
+    tickets: result.tickets || [],
+    total: result.total_count || 0,
+    statuses: result.statuses || [],
+    priorities: result.priorities || [],
+  };
+}
+
+// ==============================|| NEW TAB ||============================== //
+
+/**
+ * Opens a link in a new tab. The tab is opened first, so popup blockers allow it, and then
+ * pointed at the link once it is ready.
+ *
+ * @param {Function} buildUrl async function that returns the full link (makes a fresh token)
+ * @throws {Error} with a user-safe message when the link cannot be made or the tab is blocked
+ */
+export async function openInNewTab(buildUrl) {
+  const popup = window.open('', '_blank');
+
+  try {
+    const url = await buildUrl();
+    if (!popup) {
+      throw new Error('Your browser blocked the new tab. Allow pop-ups for this site and try again.');
+    }
+    popup.opener = null;
+    popup.location.href = url;
+  } catch (err) {
+    if (popup) popup.close();
+    throw err;
+  }
+}