ui-soxo-bootstrap-core 2.6.61 → 2.6.62-dev.2

package/DEVELOPER_GUIDE.md

@@ -17,6 +17,7 @@ Incorrect versioning or incorrect tags will break the publish pipeline — follo
 - Publishing via GitHub Release UI
 - How GitHub Action Detects Release Type
 - Summary Table
+- CI/CD Authentication (Trusted Publishing)
 - Common Mistakes & Fixes
 
 ---
@@ -255,17 +256,14 @@ npm publish --tag dev
 
 # ⚙️ How GitHub Action Detects Release Type
 
-If version contains `dev`:
+The workflow reads the `version` field from `package.json` at publish time:
 
-```
-npm publish --tag dev
-```
+| Condition                    | Command                                                 | Result                             |
+| ---------------------------- | ------------------------------------------------------- | ---------------------------------- |
+| Version contains `-dev`      | `npm publish --provenance --access public --tag dev`    | Publishes to the `dev` dist-tag    |
+| Version has no `-dev` suffix | `npm publish --provenance --access public --tag latest` | Publishes to the `latest` dist-tag |
 
-Otherwise:
-
-```
-npm publish
-```
+The workflow also enforces that the GitHub release tag matches `v<version>` from `package.json` and fails the run immediately if they diverge — this prevents the most common publish failure described below.
 
 ---
 
@@ -283,6 +281,37 @@ npm publish
 
 ---
 
+# 🔐 CI/CD Authentication (Trusted Publishing)
+
+As of npm's 2025 policy changes, classic automation tokens (`NPM_TOKEN`) are deprecated. This repo now authenticates to npm via **OIDC Trusted Publishing** — GitHub Actions exchanges a short-lived OIDC token for a publish token at run time, so **no secret is stored in the repository**.
+
+## What this means for developers
+
+Nothing. You still follow the same flow: `npm version` → push tag → create GitHub Release. The auth happens transparently in CI.
+
+## What this means for maintainers
+
+The first-time setup on npmjs.com must be done once per package:
+
+1. Log in to [npmjs.com](https://www.npmjs.com) → open the package (`ui-soxo-bootstrap-core`) → **Settings**.
+2. Under **Trusted Publisher**, click **Add trusted publisher** and fill in:
+   - Publisher: **GitHub Actions**
+   - Organization or user: `soxo-tech`
+   - Repository: `bootstrap-core`
+   - Workflow filename: `npm-publish.yml`
+   - Environment name: *(leave blank)*
+3. Save. Any old `NPM_TOKEN` repository secret can be removed.
+
+## Runtime requirements
+
+The workflow runs on Node 20 and upgrades npm to the latest CLI (`npm install -g npm@latest`) because OIDC trusted publishing requires **npm ≥ 11.5.1**. The `--provenance` flag attaches a verifiable build attestation to every published version, visible on the npmjs.com package page.
+
+## If publish fails with `403 Forbidden` or `ENEEDAUTH`
+
+The trusted publisher config on npmjs.com no longer matches the workflow. Check that org, repo, and workflow filename match exactly — including case.
+
+---
+
 # ⚠️ Common Mistakes & Fixes
 
 | Mistake                   | Issue              | Fix                          |

package/core/lib/components/consent/signature-pad.js

@@ -224,4 +224,4 @@ const SignatureCanvasComponent = ({
     );
 };
 
-export default SignatureCanvasComponent;
+export default SignatureCanvasComponent;

package/core/lib/components/global-header/global-header.js

@@ -2,7 +2,7 @@
  *
  * Global header component
  */
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { motion, useAnimation } from 'framer-motion';
 import { boxVariants } from './animations';
 import { GlobalContext, GlobalProvider } from './../../Store';
@@ -21,6 +21,8 @@ import { useTranslation } from 'react-i18next';
 import SettingsUtil from '../../../utils/settings.utils';
 import SpotlightSearch from '../spotlight-search/spotlight-search.component';
  import LicenseAlert from '../../../components/license-management/license-alert';
+import SupportDesk from '../support-desk/support-desk';
+import { resolveSupportConfig } from '../support-desk/support-desk.utils';
 
 const { Title } = Typography;
 function GlobalHeaderContent({ loading, appSettings, children, isConnected, history, modules = [], sidemenu = [], reload, meta = {}, 
@@ -32,6 +34,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
   const { isMobile, user = { locations: [] }, kiosk, state, settings } = useContext(GlobalContext);
   const [visible, setVisible] = useState(false);
   const helpDeskSetting = settings?.HELPATR || {};
+  // Memoised: the drawer's effects depend on this object, so it must keep its identity across renders.
+  const supportConfig = useMemo(() => resolveSupportConfig(helpDeskSetting, user), [helpDeskSetting, user]);
+  const [supportOpen, setSupportOpen] = useState(false);
   // Variable to handle toggling of menu
   const [collapsed, setCollapsed] = useState(false);
   // varibale handle branch switcher
@@ -203,23 +208,16 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                   <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
                   {/* Reload Button Ends */}
                   {/* Help-desk-btn */}
-                  {helpDeskSetting?.showSupportBtn
-                    ? (() => {
-                        return (
-                          <Tooltip title={helpDeskSetting?.toolTipText} overlayClassName="modern-tooltip">
-                            <span>
-                              <Button
-                                onClick={() => window.open(helpDeskSetting?.helpDeskLink ?? '', '_blank')}
-                                type="default"
-                                size="small"
-                              >
-                                {helpDeskSetting?.buttonText || 'Help'}
-                              </Button>
-                            </span>
-                          </Tooltip>
-                        );
-                      })()
-                    : null}
+                  {/* Shown only when the support settings are complete, so the button never does nothing */}
+                  {helpDeskSetting?.showSupportBtn && supportConfig.enabled ? (
+                    <Tooltip title={helpDeskSetting?.toolTipText} overlayClassName="modern-tooltip">
+                      <span>
+                        <Button onClick={() => setSupportOpen(true)} type="default" size="small">
+                          {helpDeskSetting?.buttonText || 'Help'}
+                        </Button>
+                      </span>
+                    </Tooltip>
+                  ) : null}
                   {/** Switch Languages starts */}
                   {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
                   {/** Switch Languages ends */}
@@ -244,7 +242,11 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
 
 
 
-  {licAlert && licenseData && ( 
+  {supportConfig.enabled && supportOpen ? (
+        <SupportDesk open={supportOpen} onClose={() => setSupportOpen(false)} config={supportConfig} title={helpDeskSetting?.buttonText || 'Support'} />
+      ) : null}
+
+  {licAlert && licenseData && (
        <div
           style={{
             top: 0,
@@ -290,4 +292,4 @@ function ProfileAvatar() {
       {/* {user.name} */}
     </Link>
   );
-}
+}

package/core/lib/components/support-desk/components/my-tickets/my-tickets.js

@@ -0,0 +1,343 @@
+/**
+ * "My Tickets" tab. Only the logged in user's tickets are returned: the encrypted token
+ * carries their email and the Helpdesk filters on it. Nothing is filtered on the client.
+ *
+ * If the browser blocks the API call (CORS) the Helpdesk's own page is shown in an iframe.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, DatePicker, Empty, Input, Result, Select, Table, Tag, Typography, message } from 'antd';
+import { ClearOutlined, ExportOutlined, PlusOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  PAGE_SIZE,
+  PRIORITY_COLORS,
+  STATUS_COLORS,
+  buildTicketsPageUrl,
+  fetchTickets,
+  formatDate,
+  formatDateTime,
+  normalize,
+  openInNewTab,
+  toPlainText,
+} from '../../support-desk.utils';
+
+const { Text } = Typography;
+
+// ==============================|| STATE ||============================== //
+
+const SEARCH_DEBOUNCE_MS = 350;
+
+/**
+ * @param {object} config result of resolveSupportConfig
+ * @param {boolean} active load only while the tab is visible
+ */
+function useTickets(config, active) {
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [status, setStatusState] = useState();
+  const [priority, setPriorityState] = useState();
+  const [range, setRangeState] = useState(null);
+  const [page, setPage] = useState(1);
+
+  const [tickets, setTickets] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [options, setOptions] = useState({ statuses: [], priorities: [] });
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [fallbackUrl, setFallbackUrl] = useState('');
+
+  // The newest request wins; older ones are cancelled.
+  const controllerRef = useRef(null);
+
+  useEffect(() => {
+    if (search === debouncedSearch) return undefined;
+
+    const timer = setTimeout(() => {
+      setDebouncedSearch(search);
+      setPage(1);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [search, debouncedSearch]);
+
+  const load = useCallback(async () => {
+    if (controllerRef.current) controllerRef.current.abort();
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const result = await fetchTickets(
+        config,
+        {
+          page,
+          page_size: PAGE_SIZE,
+          search: debouncedSearch,
+          status,
+          priority,
+          date_from: range?.[0]?.format('YYYY-MM-DD'),
+          date_to: range?.[1]?.format('YYYY-MM-DD'),
+        },
+        controller.signal
+      );
+
+      setTickets(result.tickets);
+      setTotal(result.total);
+      // Keep the last known options so the dropdowns do not empty when a filter returns no rows.
+      setOptions((prev) => ({
+        statuses: result.statuses.length ? result.statuses : prev.statuses,
+        priorities: result.priorities.length ? result.priorities : prev.priorities,
+      }));
+    } catch (err) {
+      if (err.code === 'aborted') return;
+
+      // Blocked by CORS: show the Helpdesk's own page instead of a dead tab.
+      if (err.code === 'blocked') {
+        try {
+          setFallbackUrl(await buildTicketsPageUrl(config));
+          return;
+        } catch (e) {
+          /* fall through to the error state */
+        }
+      }
+
+      setError(err.message || 'Please try again in a moment.');
+      setTickets([]);
+      setTotal(0);
+    } finally {
+      if (controllerRef.current === controller) setLoading(false);
+    }
+  }, [config, page, debouncedSearch, status, priority, range]);
+
+  useEffect(() => {
+    if (active) load();
+  }, [active, load]);
+
+  // Cancel anything in flight when the drawer closes.
+  useEffect(
+    () => () => {
+      if (controllerRef.current) controllerRef.current.abort();
+      controllerRef.current = null;
+    },
+    []
+  );
+
+  const withFirstPage = (setter) => (value) => {
+    setter(value);
+    setPage(1);
+  };
+
+  const hasFilters = Boolean(search || status || priority || range);
+
+  const clearFilters = () => {
+    setSearch('');
+    setDebouncedSearch('');
+    setStatusState(undefined);
+    setPriorityState(undefined);
+    setRangeState(null);
+    setPage(1);
+  };
+
+  return {
+    filters: { search, status, priority, range },
+    setSearch,
+    setStatus: withFirstPage(setStatusState),
+    setPriority: withFirstPage(setPriorityState),
+    setRange: withFirstPage(setRangeState),
+    clearFilters,
+    hasFilters,
+    options,
+    page,
+    setPage,
+    tickets,
+    total,
+    loading,
+    error,
+    fallbackUrl,
+    reload: load,
+  };
+}
+
+// ==============================|| FILTERS ||============================== //
+
+function TicketFilters({ tickets }) {
+  const { filters, options, hasFilters, setSearch, setStatus, setPriority, setRange, clearFilters } = tickets;
+
+  return (
+    <div className="support-filters">
+      <Input
+        allowClear
+        className="support-filters__search"
+        prefix={<SearchOutlined />}
+        placeholder="Search by ticket ID or subject"
+        value={filters.search}
+        onChange={(event) => setSearch(event.target.value)}
+      />
+      <Select allowClear placeholder="Status" value={filters.status} onChange={setStatus} className="support-filters__select">
+        {options.statuses.map((item) => (
+          <Select.Option key={item} value={item}>
+            {item}
+          </Select.Option>
+        ))}
+      </Select>
+      <Select allowClear placeholder="Priority" value={filters.priority} onChange={setPriority} className="support-filters__select">
+        {options.priorities.map((item) => (
+          <Select.Option key={item} value={item}>
+            {item}
+          </Select.Option>
+        ))}
+      </Select>
+      <DatePicker.RangePicker value={filters.range} onChange={setRange} className="support-filters__dates" />
+      <div className="support-filters__actions">
+        {hasFilters && (
+          <Button type="link" icon={<ClearOutlined />} onClick={clearFilters}>
+            Clear
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ==============================|| TABLE ||============================== //
+
+const columns = [
+  {
+    title: 'Ticket',
+    dataIndex: 'name',
+    width: 110,
+    render: (value) => <Text strong>{value}</Text>,
+  },
+  {
+    title: 'Subject',
+    dataIndex: 'subject',
+    render: (value, row) => {
+      const description = toPlainText(row.description);
+      return (
+        <div className="support-subject">
+          <div className="support-subject__title" title={value}>
+            {value || '-'}
+          </div>
+          {description && (
+            <div className="support-subject__text" title={description}>
+              {description}
+            </div>
+          )}
+        </div>
+      );
+    },
+  },
+  {
+    title: 'Status',
+    dataIndex: 'status',
+    width: 160,
+    render: (value) => <Tag color={STATUS_COLORS[normalize(value)] || 'default'}>{value || '-'}</Tag>,
+  },
+  {
+    title: 'Priority',
+    dataIndex: 'priority',
+    width: 100,
+    render: (value) => <Tag color={PRIORITY_COLORS[normalize(value)] || 'default'}>{value || '-'}</Tag>,
+  },
+  {
+    title: 'Created',
+    dataIndex: 'creation',
+    width: 120,
+    render: (value) => <span title={formatDateTime(value)}>{formatDate(value)}</span>,
+  },
+];
+
+function TicketTable({ tickets, onRaiseTicket }) {
+  const { tickets: rows, total, page, setPage, loading, error, hasFilters, clearFilters, reload } = tickets;
+
+  if (error) {
+    return (
+      <Result
+        status="warning"
+        title="We couldn't load your tickets"
+        subTitle={error}
+        extra={
+          <Button type="primary" icon={<ReloadOutlined />} onClick={reload}>
+            Try again
+          </Button>
+        }
+      />
+    );
+  }
+
+  const empty = hasFilters ? (
+    <Empty description="No tickets match your filters">
+      <Button onClick={clearFilters}>Clear filters</Button>
+    </Empty>
+  ) : (
+    <Empty description="You haven't raised any tickets yet">
+      <Button type="primary" icon={<PlusOutlined />} onClick={onRaiseTicket}>
+        Raise a ticket
+      </Button>
+    </Empty>
+  );
+
+  return (
+    <Table
+      size="middle"
+      rowKey="name"
+      columns={columns}
+      dataSource={rows}
+      loading={loading}
+      scroll={{ x: 640 }}
+      locale={{ emptyText: loading ? <div style={{ height: 120 }} /> : empty }}
+      pagination={{
+        current: page,
+        pageSize: PAGE_SIZE,
+        total,
+        showSizeChanger: false,
+        hideOnSinglePage: true,
+        showTotal: (count, [from, to]) => `${from}-${to} of ${count} tickets`,
+        onChange: setPage,
+      }}
+    />
+  );
+}
+
+// ==============================|| MY TICKETS ||============================== //
+
+export default function MyTickets({ config, active, onRaiseTicket }) {
+  const tickets = useTickets(config, active);
+
+  const handleOpenInNewTab = () =>
+    openInNewTab(() => buildTicketsPageUrl(config)).catch((err) => message.error(err?.message || 'Unable to open your tickets right now.'));
+
+  // Reload also works in fallback mode: it makes a new link, so the embedded page reloads.
+  const toolbar = (
+    <div className="support-toolbar">
+      <Button type="link" size="small" icon={<ReloadOutlined />} onClick={tickets.reload} disabled={tickets.loading}>
+        Reload
+      </Button>
+      <Button type="link" size="small" icon={<ExportOutlined />} onClick={handleOpenInNewTab}>
+        Open in new tab
+      </Button>
+    </div>
+  );
+
+  if (tickets.fallbackUrl) {
+    return (
+      <div className="support-tickets">
+        {toolbar}
+        <div className="support-tickets__frame">
+          <iframe title="My support tickets" src={tickets.fallbackUrl} className="support-frame" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="support-tickets">
+      {toolbar}
+      <TicketFilters tickets={tickets} />
+      <div className="support-tickets__body">
+        <TicketTable tickets={tickets} onRaiseTicket={onRaiseTicket} />
+      </div>
+    </div>
+  );
+}

package/core/lib/components/support-desk/components/raise-ticket/raise-ticket.js

@@ -0,0 +1,116 @@
+/**
+ * "Raise a Ticket" tab: the Helpdesk form in an iframe.
+ *
+ * The link is minted when the tab opens, so an idle session never holds an expired token.
+ *
+ * Frappe's session cookie is SameSite=Lax, so some browsers render the embedded form blank.
+ * If the form has not loaded after FORM_SLOW_MS we offer "Open in new tab", which opens a
+ * fresh link as a top level page.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Alert, Button, Result, Spin, message } from 'antd';
+import { ExportOutlined, ReloadOutlined } from '@ant-design/icons';
+import { FORM_SLOW_MS, buildFormUrl, openInNewTab } from '../../support-desk.utils';
+
+export default function RaiseTicket({ config }) {
+  const [url, setUrl] = useState('');
+  // minting -> loading (iframe requested) -> ready (iframe finished) | error
+  const [phase, setPhase] = useState('minting');
+  const [error, setError] = useState('');
+  const [slow, setSlow] = useState(false);
+
+  const requestRef = useRef(0);
+
+  const load = useCallback(async () => {
+    const requestId = requestRef.current + 1;
+    requestRef.current = requestId;
+
+    setPhase('minting');
+    setError('');
+    setSlow(false);
+
+    try {
+      const next = await buildFormUrl(config);
+      if (requestRef.current !== requestId) return;
+      setUrl(next);
+      setPhase('loading');
+    } catch (err) {
+      if (requestRef.current !== requestId) return;
+      setUrl('');
+      setError(err?.message || 'Unable to open the Support form right now.');
+      setPhase('error');
+    }
+  }, [config]);
+
+  useEffect(() => {
+    load();
+    // Ignore the result of a request that finishes after unmount.
+    return () => {
+      requestRef.current += 1;
+    };
+  }, [load]);
+
+  // Warn when the form is slow or blank.
+  useEffect(() => {
+    if (phase !== 'loading') return undefined;
+    const timer = setTimeout(() => setSlow(true), FORM_SLOW_MS);
+    return () => clearTimeout(timer);
+  }, [phase, url]);
+
+  const handleOpenInNewTab = () =>
+    openInNewTab(() => buildFormUrl(config)).catch((err) => message.error(err?.message || 'Unable to open the Support form right now.'));
+
+  if (phase === 'error') {
+    return (
+      <Result
+        status="warning"
+        title="We couldn't open the Support form"
+        subTitle={error}
+        extra={
+          <Button type="primary" icon={<ReloadOutlined />} onClick={load}>
+            Try again
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <div className="support-raise">
+      <div className="support-raise__bar">
+        <span>Tell us about your issue and our support team will reply as soon as possible.</span>
+        <span>
+          <Button type="link" size="small" icon={<ReloadOutlined />} onClick={load} disabled={phase === 'minting'}>
+            Reload
+          </Button>
+          <Button type="link" size="small" icon={<ExportOutlined />} onClick={handleOpenInNewTab}>
+            Open in new tab
+          </Button>
+        </span>
+      </div>
+
+      {slow && phase === 'loading' && (
+        <Alert
+          banner
+          type="warning"
+          showIcon
+          message="The form is taking longer than usual. If it stays blank, open it in a new tab."
+          action={
+            <Button size="small" icon={<ReloadOutlined />} onClick={load}>
+              Reload
+            </Button>
+          }
+        />
+      )}
+
+      <div className="support-raise__frame">
+        {phase !== 'ready' && (
+          <div className="support-raise__loading">
+            <Spin tip="Preparing the Support form…" />
+          </div>
+        )}
+        {url && <iframe title="Support" src={url} allow="clipboard-write" className="support-frame" onLoad={() => setPhase('ready')} />}
+      </div>
+    </div>
+  );
+}

package/core/lib/components/support-desk/support-desk.dom.test.js

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+import { toPlainText } from './support-desk.utils';
+
+describe('toPlainText', () => {
+  it('strips markup and collapses spaces', () => {
+    expect(toPlainText('<p>Hello   <b>world</b></p>\n<p>again</p>')).toBe('Hello world again');
+    expect(toPlainText('')).toBe('');
+    expect(toPlainText(null)).toBe('');
+  });
+
+  it('does not load or run anything in the markup', async () => {
+    window.__pwned = false;
+    toPlainText('<img src="x" onerror="window.__pwned = true"><script>window.__pwned = true</script>');
+
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(window.__pwned).toBe(false);
+  });
+});