@autobusal/common 1.9.0 → 1.11.0

package/Avatar.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { OperatorData } from '@autobusal/providers/types/operators';
 import { AgentData } from '@autobusal/providers/types/agents';
+import { logoBox } from './styles';
 
 interface Props {
   display?: OperatorData | AgentData
@@ -19,8 +20,8 @@ const Container = styled.div`
   gap: 10px;
 
   & > img {
-    display: block;
-    width: 80px;
+    ${ logoBox('80px', '48px') }
+
     border-radius: ${ props => props.theme.borderRadius };
   }
 `;

package/CompanyItem/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
+import { logoBox } from '../styles';
 
 export const Item = styled.div<{
   $column: boolean
@@ -41,8 +42,8 @@ const LogoCss = css`
   justify-content: center;
 
   & > img {
-    display: block;
-    width: 120px;
+    ${ logoBox('120px', '72px') }
+
     border-radius: ${ props => props.theme.borderRadius };
   }
 `;

package/RouteItem/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
+import { logoFit } from '../styles';
 
 export const Container = styled.div`
   padding: 10px;
@@ -29,8 +30,13 @@ export const Logo = styled(Link)`
   border-radius: ${ props => props.theme.borderRadius };
 
   & > img {
-    display: block;
+    ${ logoFit }
+
+    /* the container carries aspect-ratio: 1.35 - filling it completely is
+       what lets object-fit letterbox inside that shape, instead of the
+       image dictating its own height and spilling out of it */
     width: 100%;
+    height: 100%;
   }
 `;
 

package/UnderConstruction/UnderConstruction.tsx

@@ -0,0 +1,106 @@
+import { useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { Screen, Content, Logo, Title, Message, Road } from './styles';
+import { useGetSettings } from '@autobusal/providers/services';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+/**
+ * The holding page a brand shows while its site is still being built.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Rendered INSTEAD of the router, so no real page is reachable while it is
+ * on - a visitor who guesses a deep URL gets this too, which is the point.
+ *
+ * Two things happen alongside the visuals:
+ *
+ *  - crawlers are told not to index. The tag is written directly rather
+ *    than through <Meta>, because this renders before the app and must not
+ *    depend on any of it. It also removes any competing robots tag a
+ *    prerendered snapshot may have baked in, so an older "index" directive
+ *    cannot win by being first in the document.
+ *
+ *  - Google Tag Manager loads, if the brand configured a container. That is
+ *    deliberate: a pre-launch page is exactly when a brand wants to measure
+ *    interest, and it is the only analytics that runs here since the app
+ *    itself never boots.
+ */
+const UnderConstruction = ({ t }: Props): JSX.Element => {
+  const { data: settings } = useGetSettings();
+
+  const construction = settings?.construction;
+
+  const company = settings?.preferences?.company ?? '';
+
+  useEffect(() => {
+    // Own the robots directive outright - see the note above on why a
+    // leftover tag from a prerendered snapshot would otherwise be picked up
+    // in preference to this one.
+    document.querySelectorAll('meta[name="robots"]').forEach(tag => tag.remove());
+
+    const robots = document.createElement('meta');
+    robots.setAttribute('name', 'robots');
+    robots.setAttribute('content', 'noindex, nofollow');
+    document.head.appendChild(robots);
+
+    return () => {
+      robots.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = construction?.gtm_id;
+
+    if (!container) {
+      return;
+    }
+
+    // Guard against a double insert - this component can re-render, and two
+    // GTM containers on one page double-count everything they measure.
+    if (document.getElementById('gtm-container')) {
+      return;
+    }
+
+    (window as any).dataLayer = (window as any).dataLayer || [];
+    (window as any).dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+
+    const script = document.createElement('script');
+    script.id = 'gtm-container';
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtm.js?id=${ encodeURIComponent(container) }`;
+    document.head.appendChild(script);
+  }, [construction?.gtm_id]);
+
+  const title = construction?.title || t('under_construction.title', { ns: 'common', company });
+
+  const message = construction?.message || t('under_construction.message', { ns: 'common' });
+
+  return (
+    <Screen>
+      <Content>
+        { settings?.url && (
+          // the brand's own light-theme logo, same asset the site header
+          // uses; hidden rather than showing a broken image if a brand has
+          // not uploaded one yet
+          <Logo
+            src={ `${ settings.url }/logo-light.svg` }
+            alt={ company }
+            onError={ (event) => { event.currentTarget.style.display = 'none'; } }
+          />
+        ) }
+
+        <Title>{ title }</Title>
+
+        <Message>{ message }</Message>
+
+      </Content>
+
+      <Road aria-hidden="true" />
+    </Screen>
+  );
+};
+
+export default UnderConstruction;

package/UnderConstruction/styles.ts

@@ -0,0 +1,115 @@
+import styled, { keyframes } from 'styled-components';
+
+/**
+ * The holding page shown while a brand is still being built.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Deliberately self-contained: it renders INSTEAD of the app, before any
+ * route or layout, so it cannot lean on the site chrome for anything. It
+ * uses the brand's own theme colours so it still looks like the brand
+ * rather than a generic maintenance page.
+ */
+
+const drift = keyframes`
+  from { transform: translate3d(0, 0, 0); }
+  to   { transform: translate3d(-50%, 0, 0); }
+`;
+
+const rise = keyframes`
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: translateY(0); }
+`;
+
+export const Screen = styled.main`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: 40px 20px 0;
+  overflow: hidden;
+  text-align: center;
+  /* Inherit the app's own page background rather than naming a theme key.
+     There is no primary.background in the theme - guessing at one fell
+     through to primary.neutral, a mid grey that belongs to cards and
+     borders, so the holding page came out lighter than the site it stands
+     in for. body already carries the brand's real page colour. */
+  background: inherit;
+  color: ${ props => props.theme.font.normal };
+`;
+
+export const Content = styled.div`
+  position: relative;
+  z-index: 1;
+  max-width: 620px;
+  animation: ${ rise } 0.6s ease-out both;
+`;
+
+export const Logo = styled.img`
+  display: block;
+  width: 180px;
+  height: 64px;
+
+  /* same rule as everywhere else - never crop or stretch a brand logo */
+  object-fit: contain;
+  object-position: center;
+  margin: 0 auto 32px;
+`;
+
+export const Title = styled.h1`
+  margin: 0 0 16px;
+  font-size: clamp(28px, 5vw, 44px);
+  line-height: 1.15;
+`;
+
+export const Message = styled.p`
+  margin: 0 auto;
+  max-width: 46ch;
+  font-size: clamp(15px, 2vw, 18px);
+  line-height: 1.6;
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * A slow band of road at the foot of the page. Purely decorative, and
+ * hidden from assistive tech - it carries no information.
+ */
+export const Road = styled.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 96px;
+  opacity: 0.5;
+  background: linear-gradient(
+    to top,
+    ${ props => props.theme.primary.normal }22,
+    transparent
+  );
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 34px;
+    left: 0;
+    width: 200%;
+    height: 3px;
+    border-radius: 3px;
+    background: repeating-linear-gradient(
+      to right,
+      ${ props => props.theme.primary.normal }66 0 42px,
+      transparent 42px 84px
+    );
+    animation: ${ drift } 6s linear infinite;
+  }
+
+  /* a moving dashed line is exactly the kind of thing that should stop for
+     anyone who has asked motion to stop */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      animation: none;
+    }
+  }
+`;

package/index.ts

@@ -31,6 +31,7 @@ import RouteFeature from './RouteFeature/RouteFeature';
 import RouteItem from './RouteItem/RouteItem';
 import Row from './Table/Row';
 import Table from './Table/Table';
+import UnderConstruction from './UnderConstruction/UnderConstruction';
 import Viewer from './Viewer/Viewer';
 
 export {
@@ -71,5 +72,6 @@ export {
   RouteItem,
   Row,
   Table,
+  UnderConstruction,
   Viewer
 };

package/package.json

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

package/styles.ts

@@ -0,0 +1,51 @@
+import { css } from 'styled-components';
+
+/**
+ * How an operator/agent logo is displayed, everywhere.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-07-31
+ *
+ * Logos are uploaded by operators at whatever size and shape they happen to
+ * have - tall badges, wide wordmarks, squares. Every place that rendered
+ * one set a width (or `width: 100%`) and no height and no `object-fit`, so
+ * the image was left to take whatever height its own ratio implied: inside
+ * a fixed or aspect-ratio'd box that meant it overflowed and was visibly
+ * cropped, and in a flex row it stretched its neighbours around.
+ *
+ * `object-fit: contain` is the whole fix. It scales the image down until it
+ * fits INSIDE the box in its own aspect ratio, never cropping and never
+ * distorting. Whatever room is left over stays empty - deliberately
+ * transparent rather than a colour, so the logo sits on whatever the
+ * surrounding card already uses and dark and light themes both work without
+ * a second rule.
+ *
+ * The box needs BOTH dimensions for this to mean anything: with only a
+ * width there is no leftover space for `contain` to preserve, and the
+ * behaviour collapses back to the original bug. Callers pass the size.
+ *
+ * `object-position: center` is explicit rather than relied upon - it is the
+ * default, but the whole point here is that nothing about the framing is
+ * left to chance.
+ */
+export const logoFit = css`
+  display: block;
+  object-fit: contain;
+  object-position: center;
+
+  /* no fill, so the logo adopts whatever surface it is placed on */
+  background: transparent;
+`;
+
+/**
+ * A complete logo box: fits the image inside the given dimensions without
+ * cropping or stretching it.
+ *
+ * Pass the size the layout wants; the image keeps its own proportions
+ * within it.
+ */
+export const logoBox = (width: string, height: string) => css`
+  ${ logoFit }
+
+  width: ${ width };
+  height: ${ height };
+`;