@autobusal/common 1.11.0 → 1.13.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

@@ -23,10 +23,10 @@ interface Props {
  *    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.
+ *  - 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();
@@ -51,29 +51,6 @@ const UnderConstruction = ({ t }: Props): JSX.Element => {
     };
   }, []);
 
-  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' });

package/Viewer/Data.tsx

@@ -32,7 +32,25 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
 
   switch (item.type) {
     case 'checkbox':
-      return <input type="checkbox" value={ 1 } defaultChecked={ Number(item.value) === 1 } { ...refs(item.name, Validate(String(item.rules), t)) } />;
+      // Edited: Ferjolt Ozuni - Date: 2026-08-01
+      // Honour item.onChange, which only 'select' supported before (see
+      // Items/Dropdown). Without it a checkbox could not drive which OTHER
+      // fields are shown - the caller's handler simply never fired - so a
+      // form like "enable analytics, then ask for the container id" had no
+      // way to reveal the second field. Reports the CHECKED state rather
+      // than the input's value attribute, which is the constant 1 and would
+      // tell the caller nothing.
+      return (
+        <input
+          type="checkbox"
+          value={ 1 }
+          defaultChecked={ Number(item.value) === 1 }
+          { ...refs(item.name, {
+            ...Validate(String(item.rules), t),
+            ...(item.onChange ? { onChange: (event: any) => item.onChange!(event.target.checked ? 1 : 0) } : {})
+          }) }
+        />
+      );
 
     case 'checkbox-list':
     case 'checkbox-list-all':

package/package.json

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