@autobusal/common 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # 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.**
+
+`SeoOverride` declared its own `Field`/`Label`/`Input`/`Textarea` and restated the global field styling with *different* values — transparent instead of `inputs.background`, a primary-coloured border, its own font size — then sat on the bare page rather than a card. On a country or city screen that made the two SEO fields the only ones on screen not matching the form directly beneath them, which is the opposite of what its own comment claimed.
+
+It uses `.box` and `.row` now, the site's own card and field classes, with plain inputs so `GlobalStyles` reaches them exactly as it reaches every `Viewer` row. Being controlled is the only thing that genuinely differs from a Viewer row, and that is a state concern, not a visual one. The textarea keeps a single rule, for height: `GlobalStyles` gives every text input 38px, right for one line and useless for a description.
+
+Reaches the label SEO tab too, which had the same problem. Checked it does not land inside another card — `admin-label`'s `Options` is the tab strip, not a wrapper around the tab bodies.
+
 ## 1.25.0
 
 **New `setDepartureZone(zone)` — the date picker floors on today WHERE THE COACH LEAVES.**

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/SeoOverride/SeoOverride.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { ContainerLocales, LocaleButton, Notice, Field, Label, Input, Textarea } from './styles';
+import { Container, ContainerLocales, LocaleButton, Notice, Textarea } from './styles';
 import { useGetSettings } from '@autobusal/providers/services';
 
 export interface SeoEntry {
@@ -70,8 +70,15 @@ const SeoOverride = ({ value, t, onChange }: Props): JSX.Element => {
     return !!(entry?.title?.trim() || entry?.description?.trim());
   };
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-05
+  // `.box` and `.row` are the site's own card and field classes, and the
+  // inputs are left plain so GlobalStyles reaches them - the same shape
+  // Viewer/Item renders. Being controlled is the only way this differs from
+  // a Viewer row, and that is a state concern, not a visual one; styling
+  // them separately is what made the two SEO fields the odd ones out on
+  // every country and city screen.
   return (
-    <>
+    <Container className="box">
       <ContainerLocales>
         { available.map(language => (
           <LocaleButton
@@ -88,27 +95,27 @@ const SeoOverride = ({ value, t, onChange }: Props): JSX.Element => {
 
       <Notice>{ t('seo_override.notice', { ns: 'common' }) }</Notice>
 
-      <Field>
-        <Label>{ t('seo_override.title', { ns: 'common' }) }</Label>
+      <div className="row">
+        { t('seo_override.title', { ns: 'common' }) }
 
-        <Input
+        <input
           type="text"
           maxLength={ 250 }
           value={ current.title ?? '' }
           onChange={ (event) => update('title', event.target.value) }
         />
-      </Field>
+      </div>
 
-      <Field>
-        <Label>{ t('seo_override.description', { ns: 'common' }) }</Label>
+      <div className="row row-nomargin">
+        { t('seo_override.description', { ns: 'common' }) }
 
         <Textarea
           maxLength={ 500 }
           value={ current.description ?? '' }
           onChange={ (event) => update('description', event.target.value) }
         />
-      </Field>
-    </>
+      </div>
+    </Container>
   );
 };
 

package/SeoOverride/styles.ts

@@ -1,5 +1,20 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * The editor's own card.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-05
+ * `.box` is the site's card surface (GlobalStyles), the same one Viewer
+ * draws itself on. This block sits directly above a Viewer on the country
+ * and city screens, so on the bare page background it read as loose
+ * furniture that happened to be above the form rather than part of it -
+ * which is exactly backwards, since the form's Save button is what submits
+ * these fields.
+ */
+export const Container = styled.div`
+  margin-bottom: 20px;
+`;
+
 export const ContainerLocales = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -47,42 +62,20 @@ export const Notice = styled.p`
 `;
 
 /**
- * The editor's own fields, rather than Viewer rows.
+ * Height, and nothing else.
  *
- * Ferjolt Ozuni - Date: 2026-08-02
- * Viewer's inputs are uncontrolled (defaultValue + a react-hook-form ref),
- * which cannot hold thirteen languages' worth of state while showing one -
- * switching language would discard whatever had just been typed. These are
- * controlled, and styled to match the rows they sit among.
+ * Ferjolt Ozuni - Date: 2026-08-05
+ * How a field looks - fill, border, radius, weight, colour, width - belongs
+ * to GlobalStyles, which already styles `textarea` alongside every text
+ * input on the site. This file used to restate all of it with DIFFERENT
+ * values (transparent fill, a primary-coloured border, its own font size),
+ * which is the whole reason these two fields were the only ones on the
+ * screen that did not match the form beneath them. The single thing
+ * GlobalStyles cannot get right here is the height: 38px is correct for a
+ * one-line input and useless for a description.
  */
-export const Field = styled.div`
-  margin-bottom: 15px;
-`;
-
-export const Label = styled.label`
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 600;
-  font-size: ${ props => props.theme.size.m };
-`;
-
-const field = css`
-  width: 100%;
-  padding: 10px;
-  border: 1px solid ${ props => props.theme.primary.neutral };
-  border-radius: ${ props => props.theme.borderRadius };
-  background: transparent;
-  color: ${ props => props.theme.font.normal };
-  font-family: inherit;
-  font-size: ${ props => props.theme.size.m };
-`;
-
-export const Input = styled.input`
-  ${ field }
-`;
-
 export const Textarea = styled.textarea`
-  ${ field }
-  min-height: 90px;
+  height: 90px;
+  padding: 8px 10px;
   resize: vertical;
 `;

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.0",
+  "version": "1.26.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"