@autobusal/providers 1.2.7 → 1.2.9

package/CHANGELOG.md

@@ -0,0 +1,66 @@
+# Changelog
+
+All notable changes to `@autobusal/providers` are documented here. This project
+adheres to [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
+[Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.2.9] - 2026-07-19
+
+### Added
+
+- **Selectable auth transport in `Queries/apiClient.ts`.** A new
+  `VITE_AUTH_MODE` env flag (`bff` | `bearer`, defaulting to `bff`) picks how
+  the Axios client talks to the API. In `bff` mode the client targets the
+  same-origin `/bff` with `withCredentials`, relying on the httpOnly
+  `bff_session` cookie so no Bearer token or CSRF token ever lives in
+  JavaScript. `bearer` mode preserves the legacy transport (`VITE_API_OBT`
+  base URL, `withXSRFToken`, localStorage token) for brands that cannot run a
+  server-side component at their origin.
+- **`isBffMode` export** derived from `VITE_AUTH_MODE`, re-exported from the
+  package root (`index.ts`) so consumers can branch on the active transport.
+- **`GatewayCredentials<T>` interface in `types/settings.ts`**, modelling the
+  new per-gateway shape of `{ mode, sandbox, production }` so every payment
+  gateway can store a sandbox and a production credential set plus which one
+  is active.
+
+### Changed
+
+- **`Queries/apiClient.ts` request interceptor is now bearer-only.** The
+  interceptor that reads `token` from localStorage and sets the
+  `Authorization` header is only registered when not in BFF mode; in BFF mode
+  there is no token in JavaScript to attach.
+- **`types/settings.ts` `LabelPayments` gateways reshaped.** `bkt`, `stripe`,
+  `mollie`, `raiffeisen`, and `nexi` are now wrapped in
+  `GatewayCredentials<...>` (sandbox/production/mode). The BKT credential key
+  was corrected from `authid` to `authId`, Stripe gained a `webhook_secret`
+  field, and `devpos` gained `mode`, `sandbox_url`, and `production_url` so
+  its API host is configurable per-label instead of hardcoded to the demo URL.
+- **`Providers.tsx` wraps the tree in an outer `<Suspense>` boundary.**
+  `Styles` and `Setup` both call `useGetSettings()` (a suspense query) above
+  the existing inner boundary; on a cold settings cache their suspension had
+  no boundary to catch it. The outer boundary shows the `loading` fallback
+  during the initial settings fetch; the module-scope QueryClient means the
+  suspended remount reuses the same cache with no refetch loop.
+- **`Notifications/Notifications.tsx` error toast duration raised to 6000ms**
+  (from the 4s default) so users are less likely to miss error notifications.
+- **`Setup/languages.ts` i18next `debug` is now `import.meta.env.DEV`** instead
+  of hardcoded `true`, silencing i18next debug logging in production builds.
+- **`Errors/Message.tsx` logo is now a keyboard-accessible control** (`role`,
+  `tabIndex`, `onKeyDown` for Enter/Space, `alt` text) with a matching
+  `:focus-visible` outline and `display: inline-block` in `Errors/styles.ts`.
+
+### Fixed
+
+- **Error page crash on non-English locales (`Errors/Message.tsx`).** The
+  translations lookup now falls back to `errors.en` when the selected locale
+  is absent from `errors.ts`; previously a non-English selection (e.g.
+  `localStorage` language `sq`) made the lookup `undefined` and crashed the
+  error page.
+- **Crash inside the 500 response interceptor (`Queries/apiClient.ts`).** The
+  server-error message lookup now falls back to `languages.en` for the same
+  reason, so a missing locale can no longer throw from within the error
+  interceptor itself.
+
+Authored by Ferjolt Ozuni. Consolidated from the magus and alvavel whitelabel
+patch sets into canonical @autobusal source (eliminates per-repo patch-package
+divergence).

package/Errors/Message.tsx

@@ -19,15 +19,28 @@ const Message = ({ type }: Props): JSX.Element => {
 
   const language = getLanguage('en');
 
-  const translations = errors[language as keyof typeof errors];
+  // Fall back to English for any locale not present in errors.ts - otherwise a
+  // non-English selection (e.g. localStorage language = 'sq') would make this
+  // `undefined` and crash the error page on `.not_found`/`.system`.
+  const translations = errors[language as keyof typeof errors] ?? errors.en;
 
   return (
     <>
       <Background />
 
       <Container className="box">
-        <Logo>
-          <img src={ `${ data.url }/logo-${ theme }.svg` } onClick={ () => navigate('/') } />
+        <Logo
+          role="button"
+          tabIndex={ 0 }
+          onClick={ () => navigate('/') }
+          onKeyDown={ event => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              navigate('/');
+            }
+          } }
+        >
+          <img src={ `${ data.url }/logo-${ theme }.svg` } alt="Home" />
         </Logo>
 
         <Description>

package/Errors/styles.ts

@@ -25,12 +25,18 @@ export const Container = styled.div`
 
 export const Logo = styled.div`
   margin-bottom: 20px;
+  display: inline-block;
 
   & > img {
     display: block;
     width: 250px;
     cursor: pointer;
   }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
 `;
 
 export const Description = styled.div`

package/Notifications/Notifications.tsx

@@ -39,6 +39,8 @@ export const Provider = ({ children }: Props): JSX.Element => {
           },
 
           error: {
+            // errors stay up longer - at the default 4s users often miss them
+            duration: 6000,
             style: {
               background: ourTheme.font.error,
               color: '#FFFFFF'

package/Providers.tsx

@@ -12,19 +12,29 @@ interface Props {
 }
 
 const Providers = ({ type, loading, children }: Props): JSX.Element => (
-  <Recaptcha>
-    <Queries>
-      <Styles>
-        <Notifications>
-          <Setup type={ type }>
-            <Suspense fallback={ loading }>
-              { children }
-            </Suspense>
-          </Setup>
-        </Notifications>
-      </Styles>
-    </Queries>
-  </Recaptcha>
+  // Styles and Setup both call useGetSettings() (a useSuspenseQuery) and sit
+  // ABOVE the inner <Suspense> below, so on a cold settings cache their
+  // suspension had no boundary to catch it and React threw error #426
+  // ("a component suspended while responding to synchronous input"). This
+  // outer boundary catches those two suspensions (showing `loading` during
+  // the initial settings fetch). The QueryClient in <Queries> is created at
+  // module scope, so remounting this subtree while suspended keeps the same
+  // client and cache - no refetch loop.
+  <Suspense fallback={ loading }>
+    <Recaptcha>
+      <Queries>
+        <Styles>
+          <Notifications>
+            <Setup type={ type }>
+              <Suspense fallback={ loading }>
+                { children }
+              </Suspense>
+            </Setup>
+          </Notifications>
+        </Styles>
+      </Queries>
+    </Recaptcha>
+  </Suspense>
 );
 
 export default Providers;

package/Queries/apiClient.ts

@@ -3,14 +3,30 @@ import languages from '@lang/errors';
 import { getLanguage } from '../Setup/languages';
 import { error as systemError } from '@autobusal/utilities';
 
-const apiClient = axios.create({
-  baseURL: import.meta.env.VITE_API_OBT,
-  withCredentials: true,
-  withXSRFToken: true
-});
+// Auth transport is selectable per brand via VITE_AUTH_MODE - ONE codebase,
+// one flag, so there is a single auth path to maintain across every whitelabel:
+//  - 'bff' (default): all calls go through the same-origin BFF (public/bff/,
+//    served at /bff), which holds the auth token server-side and attaches it
+//    upstream. The browser carries only a first-party httpOnly `bff_session`
+//    cookie, so there is no Bearer token in JavaScript and no CSRF to manage.
+//  - 'bearer': legacy transport for a brand that cannot run a server-side
+//    component at its origin (pure-static hosting) or hasn't deployed its BFF
+//    yet - a Sanctum token from localStorage is sent as `Authorization`.
+// See AUTH_STORAGE_DESIGN.md.
+const authMode = import.meta.env.VITE_AUTH_MODE ?? 'bff';
+
+export const isBffMode = authMode !== 'bearer';
+
+const apiClient = axios.create(
+  isBffMode
+    ? { baseURL: '/bff', withCredentials: true }
+    : { baseURL: import.meta.env.VITE_API_OBT, withCredentials: true, withXSRFToken: true }
+);
 
-apiClient.interceptors.request.use(
-  config => {
+// bearer mode only: attach the token from localStorage. In bff mode the token
+// never enters JavaScript, so there is nothing to attach here.
+if (!isBffMode) {
+  apiClient.interceptors.request.use(config => {
     const token = localStorage.getItem('token');
 
     if (token !== null) {
@@ -18,8 +34,8 @@ apiClient.interceptors.request.use(
     }
 
     return config;
-  }
-);
+  });
+}
 
 apiClient.interceptors.response.use(response => (
   response
@@ -44,7 +60,10 @@ apiClient.interceptors.response.use(response => (
     if (error.response.status === 500) {
       const language = getLanguage('en');
 
-      systemError(languages[language as keyof typeof languages].server);
+      // Fall back to English for any locale not present in errors.ts, so a
+      // non-English selection can't make this `undefined` and throw inside the
+      // error interceptor itself.
+      systemError((languages[language as keyof typeof languages] ?? languages.en).server);
     }
   } else if (error.request) {
     console.log('REQUEST IS NOT DEFINED');
@@ -55,4 +74,4 @@ apiClient.interceptors.response.use(response => (
   return Promise.reject(error);
 });
 
-export default apiClient;
+export default apiClient;

package/Setup/languages.ts

@@ -20,7 +20,7 @@ const languages = (type: string, defaultLanguage: string): void => {
       },
       lng: getLanguage(defaultLanguage),
       fallbackLng: defaultLanguage,
-      debug: true,
+      debug: import.meta.env.DEV,
       backend: {
         loadPath: `${ import.meta.env.VITE_API_OBT }/languages/{{lng}}/{{ns}}.json`
       },

package/index.ts

@@ -1,5 +1,5 @@
 import Providers from './Providers';
-import apiClient from './Queries/apiClient';
+import apiClient, { isBffMode } from './Queries/apiClient';
 import ErrorBoundary from './Errors/ErrorBoundary';
 import Message from './Errors/Message';
 import useMenuStore from './stores/menu';
@@ -7,6 +7,7 @@ import { useUserStore } from './stores/user';
 
 export {
   apiClient,
+  isBffMode,
   ErrorBoundary,
   Message,
   useMenuStore,

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@autobusal/providers",
-  "version": "1.2.7",
+  "version": "1.2.9",
+  "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"
 }

package/types/settings.ts

@@ -124,6 +124,16 @@ export interface LabelSettings {
   }
 }
 
+// Edited: Ferjolt Ozuni - Date: 2026-07-18
+// Added: every gateway now stores a sandbox AND a production credential
+// set plus which one is active, instead of one flat set - see
+// obtapi's app/Traits/PaymentCredentials.php for the backend side.
+export interface GatewayCredentials<T> {
+  mode: 'sandbox' | 'production'
+  sandbox: T
+  production: T
+}
+
 export interface LabelPayments {
   available: {
     reserve: boolean
@@ -135,40 +145,48 @@ export interface LabelPayments {
     nexi: boolean
   }
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-18
+  // Added: mode/sandbox_url/production_url - the DevPos API host was
+  // hardcoded to the demo url in obtapi's config/devpos.php, now
+  // configurable per-label - see App\Processes\DevPos\Client::endpoints().
   devpos: {
     vat: number
     barcode: string
     authorization: string
     exchange_rate: number
     cash_register_index: string
+    mode: 'sandbox' | 'production'
+    sandbox_url: string
+    production_url: string
   }
 
-  bkt: {
+  bkt: GatewayCredentials<{
     url: string
-    authid: string
+    authId: string
     domain: string
     storeKey: string
     currencyId: string
-  }
+  }>
 
-  stripe: {
+  stripe: GatewayCredentials<{
     account: string
     secret: string
-  }
+    webhook_secret: string
+  }>
 
-  mollie: {
+  mollie: GatewayCredentials<{
     key: string
-  }
+  }>
 
-  raiffeisen: {
+  raiffeisen: GatewayCredentials<{
     client_id: string
     username: string
     password: string
-  }
+  }>
 
-  nexi: {
+  nexi: GatewayCredentials<{
     api_key: string
-  }
+  }>
 }
 
 export interface UploadData {

package/types/users.ts

@@ -19,6 +19,7 @@ export interface UserData {
   subscription: SubscribedData
   api: ApiData
   created_at: string
+  token?: string
   admin?: AdminData
   financer?: FinancerData
   operator?: OperatorData