@autobusal/common 1.10.0 → 1.12.0

package/Meta.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import ReactGA from 'react-ga4';
+import { pageview } from '@autobusal/providers/Setup/analytics';
 import { useGetSettings } from '@autobusal/providers/services';
 
 interface Props {
@@ -124,28 +124,32 @@ const useCanonicalUrl = (explicit?: string): string => {
   return explicit ?? `${ window.location.origin }${ location.pathname }`;
 };
 
-// GA4's gtag.js only auto-sends a page_view on its initial `config` call
-// (see providers/Setup/analytics.ts, which disables that and initializes
-// with send_page_view: false) - every client-side route change in this SPA
-// was otherwise invisible to analytics. Meta is the one component rendered
-// on nearly every real page (136 call sites across both apps), already
-// tracks the canonical path via useLocation, and mounts fresh on every
-// navigation - the natural place to fire the pageview React Router itself
-// doesn't have a dedicated hook for. The 2-3 truly Meta-less pages (a
-// redirect-only auth callback, an invalid-signature bounce) aren't
-// meaningful page views anyway.
+// A single-page app never reloads, so GTM's page-load trigger fires exactly
+// once per session - every client-side route change after that is invisible
+// unless it is announced. Meta is the one component rendered on nearly every
+// real page (136 call sites across both apps), already tracks the canonical
+// path via useLocation, and mounts fresh on every navigation - the natural
+// place to fire the pageview React Router itself has no dedicated hook for.
+// The 2-3 truly Meta-less pages (a redirect-only auth callback, an
+// invalid-signature bounce) aren't meaningful page views anyway.
+//
+// Edited: Ferjolt Ozuni - Date: 2026-08-01
+// Pushes to the GTM dataLayer rather than calling GA4 directly. The brand's
+// container decides what to do with it, so switching or adding an analytics
+// product is a change in GTM rather than in this file.
 const usePageviewTracking = (path: string, title: string): void => {
   const { data: settings } = useGetSettings();
-  const gaId = settings.preferences.googleAnalyticsID;
+
+  const container = settings.analytics?.gtm_id;
 
   useEffect(() => {
-    if (gaId === null) {
+    if (!container) {
       return;
     }
 
-    ReactGA.send({ hitType: 'pageview', page: path, title });
+    pageview(path, title);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [gaId, path]);
+  }, [container, path]);
 };
 
 const Meta = ({ title, keywords, description, image, url, type = 'website', noIndex = false, children }: Props): JSX.Element => {

package/UnderConstruction/UnderConstruction.tsx

@@ -0,0 +1,83 @@
+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 still runs, because Providers loads it before this
+ *    renders - a pre-launch page is exactly when a brand wants to measure
+ *    interest. It uses the brand's ONE container (admin > Analytics), not a
+ *    separate id of its own; nothing extra is needed here.
+ */
+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();
+    };
+  }, []);
+
+  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.12.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"