@pagamio/frontend-commons-lib 0.8.340 → 0.8.342

package/lib/auth/components/LoginPage.d.ts

@@ -66,9 +66,10 @@ export interface PhonePinLoginConfig {
 }
 /**
  * Configuration for the username + PIN login tab.
- * When provided, a "Login Number + PIN" tab is displayed alongside the other
- * tabs. Login numbers are admin-assigned 10-digit numeric identifiers (there
- * is no self-service signup for this method).
+ * When provided, an "Operator ID + PIN" tab is displayed alongside the other
+ * tabs. Operator IDs are admin-assigned 10-digit numeric identifiers (the
+ * underlying API field stays `loginNumber`; only the user-facing copy has
+ * been renamed to align with the mobile Welcome Back screen).
  */
 export interface UsernamePinLoginConfig {
     /** Login with login number and PIN. Should throw on error. */
@@ -77,7 +78,7 @@ export interface UsernamePinLoginConfig {
      * Optional callback called instead of onLoginSuccess when mustChangePIN is true.
      */
     onMustChangePIN?: (loginNumber: string, response: any) => void;
-    /** Optional label for the username-PIN tab (default: 'Login Number + PIN') */
+    /** Optional label for the username-PIN tab (default: 'Operator ID') */
     tabLabel?: string;
     /** Optional label for the password tab (default: 'Email & Password') */
     passwordTabLabel?: string;
@@ -164,8 +165,9 @@ interface PagamioLoginPageProps<T extends CustomAuthConfig> extends BaseAuthPage
      */
     phonePinConfig?: PhonePinLoginConfig;
     /**
-     * When provided, adds a "Login Number + PIN" tab alongside the standard login
-     * form. The tab handles the 2-step login-number + PIN flow internally.
+     * When provided, adds an "Operator ID" tab alongside the standard login
+     * form. The tab handles the 2-step Operator ID + PIN flow internally.
+     * (Underlying API field name stays `loginNumber`.)
      */
     usernamePinConfig?: UsernamePinLoginConfig;
 }

package/lib/auth/components/LoginPage.js

@@ -53,7 +53,18 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const formRef = useRef(null);
-    const [activeTab, setActiveTab] = useState('password');
+    // Default-active tab follows the "phone-first" hierarchy from the
+    // commerce-os mobile Welcome Back screen: Phone → Operator ID → Email.
+    // Falls back to whichever tab is actually configured when the others
+    // aren't enabled, so single-tab consumers keep working unchanged.
+    const showPhoneTabInitial = Boolean(phoneOtpConfig || phonePinConfig);
+    const showUsernameTabInitial = Boolean(usernamePinConfig);
+    const defaultActiveTab = showPhoneTabInitial
+        ? 'phone'
+        : showUsernameTabInitial
+            ? 'username'
+            : 'password';
+    const [activeTab, setActiveTab] = useState(defaultActiveTab);
     const [phoneStep, setPhoneStep] = useState('enterPhone');
     const [phoneNumber, setPhoneNumber] = useState('');
     const [phoneOtpValue, setPhoneOtpValue] = useState('');
@@ -98,16 +109,19 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
     ];
     const loginNumberField = [
         {
+            // Internal field name stays `loginNumber` to match the auth API
+            // payload; only the user-facing strings change to "Operator ID" to
+            // align with the mobile Welcome Back screen.
             name: 'loginNumber',
-            label: 'Login Number',
+            label: 'Operator ID',
             type: 'text',
-            placeholder: '1230000001',
+            placeholder: 'Enter Operator ID',
             gridSpan: 12,
             validation: {
-                required: 'Login number is required',
+                required: 'Operator ID is required',
                 pattern: {
                     value: /^\d{10}$/,
-                    message: 'Login number must be exactly 10 digits',
+                    message: 'Operator ID must be exactly 10 digits',
                 },
             },
         },
@@ -308,10 +322,10 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
         usernamePinConfig?.passwordTabLabel ??
         'Email';
     const phoneTabLabel = phoneOtpConfig?.tabLabel ?? phonePinConfig?.tabLabel ?? 'Phone';
-    const usernameTabLabel = usernamePinConfig?.tabLabel ?? 'Login Number';
-    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [showTabs && (_jsxs("div", { className: "mb-6 flex divide-x divide-border overflow-hidden rounded-lg border border-border", role: "tablist", "aria-label": "Login method", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'password'
-                                ? 'bg-primary text-primary-foreground'
-                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel }), showPhoneTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'phone', onClick: () => {
+    // "Operator ID" aligns the web tab label with the mobile Welcome Back
+    // screen. Consumers can still override via usernamePinConfig.tabLabel.
+    const usernameTabLabel = usernamePinConfig?.tabLabel ?? 'Operator ID';
+    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [showTabs && (_jsxs("div", { className: "mb-6 flex divide-x divide-border overflow-hidden rounded-lg border border-border", role: "tablist", "aria-label": "Login method", children: [showPhoneTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'phone', onClick: () => {
                                 setActiveTab('phone');
                                 setPhoneStep('enterPhone');
                                 setPhoneOtpValue('');
@@ -326,7 +340,9 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
                                 setUsernameError(null);
                             }, className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'username'
                                 ? 'bg-primary text-primary-foreground'
-                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: usernameTabLabel }))] })), activeTab === 'password' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: usernameTabLabel })), _jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'password'
+                                ? 'bg-primary text-primary-foreground'
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel })] })), activeTab === 'password' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
                                 ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
                                 password: '',
                                 rememberMe: false,
@@ -351,6 +367,6 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
                                         setUsernameStep('enterLoginNumber');
                                         setLoginNumberPinValue('');
                                         setUsernameError(null);
-                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change login number" })] }))] }))] }) }));
+                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change Operator ID" })] }))] }))] }) }));
 }
 export default PagamioLoginPage;

package/lib/pagamio-table/data-table/types.d.ts

@@ -177,6 +177,15 @@ export interface UsePagamioTableConfig<T extends BaseEntity> {
     enabled?: boolean;
     staleTime?: number;
     gcTime?: number;
+    /**
+     * Auto-refetch interval (ms) for tables backed by long-running jobs
+     * (exports, imports, async report generation). Pass a fixed number to
+     * always poll, `false` to disable, or a predicate `(rows) => number | false`
+     * that returns the interval only while any row is still in flight — the
+     * predicate runs on every fetch settle so polling stops automatically
+     * once everything is terminal.
+     */
+    refetchInterval?: number | false | ((rows: T[]) => number | false);
     /**
      * Keep the previous page's rows visible while the next page fetches
      * (TanStack `placeholderData: keepPreviousData`). Defaults to true so

package/lib/shared/hooks/usePagamioTable.d.ts

@@ -17,4 +17,4 @@ export declare const pagamioMapping: ResponseMapping;
  * The hook tracks `page` zero-indexed internally; we bump on the way out.
  */
 export declare const pagamioQueryConfig: QueryParamConfig;
-export declare const usePagamioTable: <T extends BaseEntity>({ queryKey, queryFn, enabled: queryEnabled, staleTime, gcTime, keepPreviousData: keepPrev, data: clientData, columns, defaultFilters, responseMapping, queryParamConfig, pagination: paginationConfig, filtering: filteringConfig, sorting: sortingConfig, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }: UsePagamioTableConfig<T>) => UsePagamioTableReturn<T>;
+export declare const usePagamioTable: <T extends BaseEntity>({ queryKey, queryFn, enabled: queryEnabled, staleTime, gcTime, refetchInterval, keepPreviousData: keepPrev, data: clientData, columns, defaultFilters, responseMapping, queryParamConfig, pagination: paginationConfig, filtering: filteringConfig, sorting: sortingConfig, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }: UsePagamioTableConfig<T>) => UsePagamioTableReturn<T>;

package/lib/shared/hooks/usePagamioTable.js

@@ -158,7 +158,7 @@ function clientSort(items, sortConfig) {
     return sorted;
 }
 // ─── Hook ────────────────────────────────────────────────────────────
-export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = true, staleTime, gcTime, keepPreviousData: keepPrev = true, data: clientData, columns, defaultFilters = {}, responseMapping = springBootMapping, queryParamConfig = defaultQueryConfig, pagination: paginationConfig = { enabled: true, mode: 'client' }, filtering: filteringConfig = { enabled: true, mode: 'client', searchMode: 'server' }, sorting: sortingConfig = { enabled: true, mode: 'client' }, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }) => {
+export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = true, staleTime, gcTime, refetchInterval, keepPreviousData: keepPrev = true, data: clientData, columns, defaultFilters = {}, responseMapping = springBootMapping, queryParamConfig = defaultQueryConfig, pagination: paginationConfig = { enabled: true, mode: 'client' }, filtering: filteringConfig = { enabled: true, mode: 'client', searchMode: 'server' }, sorting: sortingConfig = { enabled: true, mode: 'client' }, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }) => {
     // ── Local state ──────────────────────────────────────────────────
     const [currentPage, setCurrentPage] = useState(paginationConfig.pageIndex ?? 0);
     const [pageSize, setPageSize] = useState(paginationConfig.pageSize ?? 10);
@@ -190,6 +190,18 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         staleTime,
         gcTime,
         placeholderData: keepPrev ? keepPreviousData : undefined,
+        // Predicate form re-extracts rows from the raw response so callers can
+        // gate polling on row state (e.g. "any pending export") without needing
+        // to know the responseMapping shape.
+        refetchInterval: typeof refetchInterval === 'function'
+            ? (query) => {
+                const raw = query.state.data;
+                if (!raw)
+                    return false;
+                const { data: rows } = processResponse(raw, responseMapping);
+                return refetchInterval(rows);
+            }
+            : refetchInterval,
     });
     // ── Process server response ──────────────────────────────────────
     const { serverData, serverTotal } = useMemo(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.340",
+  "version": "0.8.342",
   "publishConfig": {
     "access": "public",
     "provenance": false