@autobusal/common 1.10.0 → 1.11.0

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