@autobusal/common 1.25.1 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 1.26.0
+
+### Added
+
+- **`HandoffBanner`** — "You are managing *X* as its administrator", shown on a
+  brand's own domain for the length of a brand handoff, with a **Finish**
+  button that ends the session. Rendered by both apps' private layouts; renders
+  nothing at all unless `/bff/session` reports a handoff, so an ordinary
+  session costs one request. See `magus/BRAND_HANDOFF_PLAN.md`.
+
+  Not the same component as magus's `ImpersonationBanner` and not driven by the
+  same signal: that one reads `localStorage['impersonating']`, which page
+  JavaScript sets and can therefore be wrong. This reads the BFF session, which
+  is the only thing that actually knows. There is also nothing on this origin to
+  *revert* to — the admin's own session is alive and untouched on a different
+  origin — so the action is an explicit end, not a revert.
+
+- **`handoff` action on `Table`** — its own icon and label rather than borrowing
+  `login_as`, for the same reason `reply` is not `approve`: `login_as` changes
+  who you are *within* a brand, a handoff leaves for another brand's domain in a
+  new tab.
+
+### Notes
+
+- **There is deliberately no `pagehide`/`sendBeacon` revoke.** One was built, to
+  shorten the window when somebody closes the tab, and testing removed it:
+  `pagehide` with `persisted === false` also fires on a plain **page refresh**,
+  so F5 revoked the token and dumped the admin on the logged-out screen.
+  Measured — an identical reload driven by curl, with no beacon in play, keeps
+  the session. No browser API distinguishes closing from reloading at that
+  moment, so what remains is two mechanisms that both work (the Finish button
+  and the two-hour token expiry) rather than three where one misfires.
+
+- The banner puts **Finish next to the message** rather than at the far edge.
+  `space-between` reads better but the whitelabel admin's content column is a
+  fixed 1491px that overflows the viewport at ordinary window sizes, which put
+  the button off-screen at x=1856 — the one control that reliably ends the
+  session cannot be the one you have to scroll sideways to find.
+
 ## 1.25.1
 
 **The SEO override wears the site's own form clothes.**

package/HandoffBanner/HandoffBanner.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+import { TFunction } from 'i18next';
+import apiClient, { isBffMode } from '@autobusal/providers/Queries/apiClient';
+import { Banner, Text, Brand, Origin, FinishButton } from './styles';
+
+export interface HandoffState {
+  /**
+   * The brand whose admin started this - shown so it is obvious this session
+   * did not begin here
+   */
+  from?: string | null
+
+  /**
+   * The brand being managed
+   */
+  brand?: string | null
+}
+
+interface Props {
+  /**
+   * Both apps render this from their own private layout, and they load
+   * different primary namespaces - magus 'normal', alvavel 'whitelabel' - so
+   * this is typed to the one they share and every string below asks for
+   * `common` explicitly. Same shape as Breadcrumbs, which both also render.
+   */
+  t: TFunction<'common'>
+}
+
+/**
+ * "You are managing X as its administrator."
+ *
+ * Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * Shown on the TARGET brand's own domain for the length of a brand handoff -
+ * see magus/BRAND_HANDOFF_PLAN.md. Deliberately not the same component as
+ * ImpersonationBanner and not driven by the same signal:
+ *
+ *  - ImpersonationBanner reads localStorage['impersonating'], which page
+ *    JavaScript sets and can therefore be wrong. This reads the BFF session
+ *    itself, which is the only thing that actually knows.
+ *  - There is no `impersonator_token` on this origin to revert to. The
+ *    admin's own session is alive and untouched on a DIFFERENT origin, so
+ *    the action here is an explicit END, not a revert.
+ *
+ * The domain in the address bar, the logo and the colour scheme have already
+ * told the user where they are - every brand carries its own identity, which
+ * is most of why this design was chosen over a label switcher. The bar is
+ * the part that says the session is temporary and how to end it.
+ */
+const HandoffBanner = ({ t }: Props): (JSX.Element | null) => {
+  const [ handoff, setHandoff ] = useState<HandoffState | null>(null);
+
+  useEffect(() => {
+    // bearer-mode brands have no BFF, so there is no session endpoint to ask
+    // and no handoff that could have happened.
+    if (!isBffMode) {
+      return;
+    }
+
+    let cancelled = false;
+
+    apiClient
+      .get('/session')
+      .then(response => {
+        if (!cancelled && response.data?.handoff) {
+          setHandoff(response.data.handoff);
+        }
+      })
+      // A failure here means "no handoff", which is the default. It must not
+      // surface as an error toast on every page load of every ordinary
+      // session.
+      .catch(() => undefined);
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  /**
+   * THERE IS DELIBERATELY NO pagehide/sendBeacon REVOKE HERE.
+   *
+   * Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * The plan called for one, to shorten the window when somebody closes the
+   * tab: the BFF cookie is `lifetime => 0`, a BROWSER-session cookie, so it
+   * survives a closed tab and dies only with the whole browser, and
+   * sendBeacon is the only request a browser reliably delivers from a dying
+   * page. It was built, and TESTING KILLED IT.
+   *
+   * `pagehide` does not mean "the user is leaving". With
+   * `event.persisted === false` it also fires on a plain PAGE REFRESH and on
+   * any hard navigation within the same tab - so pressing F5 revoked the
+   * token and dumped the admin on the logged-out screen. Measured: an
+   * identical reload driven by curl, with no beacon in play, keeps the
+   * session; the browser one destroyed it every time.
+   *
+   * There is no browser API that distinguishes closing from reloading at
+   * pagehide time - PerformanceNavigationTiming only knows AFTER the next
+   * load, which is too late to have not revoked. So the choice was a
+   * shorter window in one case against a refresh silently ending the session
+   * in every case, and the window was never the bigger risk: it is already
+   * bounded at two hours by the token's own expiry.
+   *
+   * What remains is two mechanisms that both work, rather than three where
+   * one misfires: the Finish button below, and the two-hour expiry.
+   */
+
+  if (!handoff) {
+    return null;
+  }
+
+  const onFinish = (): void => {
+    // /bff/logout already revokes the token upstream and destroys the local
+    // session, so this needs no endpoint of its own. A hard assignment
+    // rather than a router navigation, because every cached query in this
+    // tab belongs to a session that no longer exists.
+    apiClient
+      .post('/logout')
+      .catch(() => undefined)
+      .finally(() => {
+        window.location.href = '/';
+      });
+  };
+
+  return (
+    <Banner>
+      <Text>
+        { t('handoff.managing', { ns: 'common' }) }
+
+        <Brand>{ handoff.brand }</Brand>
+
+        { t('handoff.as_admin', { ns: 'common' }) }
+
+        { handoff.from ? <Origin>{ t('handoff.from', { brand: handoff.from, ns: 'common' }) }</Origin> : null }
+      </Text>
+
+      <FinishButton type="button" onClick={ onFinish }>
+        { t('handoff.finish', { ns: 'common' }) }
+      </FinishButton>
+    </Banner>
+  );
+};
+
+export default HandoffBanner;

package/HandoffBanner/styles.ts

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+/**
+ * Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * Full width, above everything, and NOT dismissible - a session that is
+ * writing to somebody else's brand should not be possible to forget you are
+ * in. It uses the warning colour rather than the info colour that
+ * ImpersonationBanner uses, because the two states can never both be true on
+ * one screen and reading differently at a glance is the point.
+ */
+export const Banner = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  /**
+   * Finish sits NEXT TO the message, not pushed to the far edge.
+   *
+   * space-between reads better on a normal container and is wrong here. The
+   * whitelabel admin's content column is a fixed 1491px that overflows the
+   * viewport at every ordinary window size, so a right-aligned button landed
+   * at x=1856 - off-screen, reachable only by scrolling sideways. The one
+   * control that reliably ends a session on somebody else's brand cannot be
+   * the one you have to go looking for.
+   */
+  justify-content: flex-start;
+  gap: 14px;
+  margin-bottom: 20px;
+  padding: 12px 16px;
+  color: ${ props => props.theme.font.warning };
+  background: ${ props => props.theme.background.neutral };
+  border: 1px solid ${ props => props.theme.font.warning };
+  border-radius: ${ props => props.theme.borderRadius };
+  font-size: ${ props => props.theme.size.s };
+`;
+
+export const Text = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+`;
+
+export const Brand = styled.strong`
+  color: ${ props => props.theme.font.normal };
+  font-weight: 700;
+`;
+
+/**
+ * Where the session came from - quieter than the rest, because it answers a
+ * question somebody might have rather than one they are being asked.
+ */
+export const Origin = styled.span`
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const FinishButton = styled.button`
+  flex-shrink: 0;
+  padding: 6px 16px;
+  color: ${ props => props.theme.font.warning };
+  background: ${ props => props.theme.background.normal };
+  border: 1px solid ${ props => props.theme.font.warning };
+  border-radius: ${ props => props.theme.borderRadius };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    color: ${ props => props.theme.background.normal };
+    background: ${ props => props.theme.font.warning };
+  }
+`;

package/Table/Actions/Icon.tsx

@@ -4,7 +4,7 @@ import { BiEditAlt, BiTransfer, BiTrash } from 'react-icons/bi';
 import { FaTrash } from 'react-icons/fa';
 import { GiMoneyStack } from 'react-icons/gi';
 import { IoDocumentLockOutline } from 'react-icons/io5';
-import { RiBusLine, RiEyeLine, RiLoginCircleLine, RiReplyLine } from 'react-icons/ri';
+import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiReplyLine } from 'react-icons/ri';
 
 interface Props {
   type: string
@@ -23,6 +23,14 @@ const Icon = ({ type, t }: Props): (JSX.Element | null) => {
     case 'login_as':
       return <RiLoginCircleLine title={ t('table.actions.custom.login_as', { ns: 'common' }) } />;
 
+    // Edited: Ferjolt Ozuni - Date: 2026-08-05
+    // Its own action rather than borrowing 'login_as', for the same reason
+    // 'reply' below is not 'approve': the verbs differ. login_as changes who
+    // you are WITHIN this brand; a handoff leaves for another brand's own
+    // domain in a new tab, and the leaving is the part worth showing.
+    case 'handoff':
+      return <RiExternalLinkLine title={ t('table.actions.custom.handoff', { ns: 'common' }) } />;
+
     case 'approve':
       return <AiOutlineCheck title={ t('table.actions.custom.approve', { ns: 'common' }) } />;
 

package/index.ts

@@ -34,6 +34,7 @@ import Required from './Required/Required';
 import Road from './Road/Road';
 import LocaleGate from './Locale/LocaleGate';
 import SeoOverride from './SeoOverride/SeoOverride';
+import HandoffBanner from './HandoffBanner/HandoffBanner';
 import localiseRoutes from './Locale/routes';
 import { splitLocale, withLocale, localeFromPath } from './Locale/locale';
 import RouteItem from './RouteItem/RouteItem';
@@ -85,6 +86,7 @@ export {
   Road,
   LocaleGate,
   SeoOverride,
+  HandoffBanner,
   localiseRoutes,
   splitLocale,
   withLocale,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"