keystone-design-bootstrap 1.0.70 → 1.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.70",
+  "version": "1.0.71",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/lib/server-api.ts

@@ -81,6 +81,12 @@ export function getMetaPixelId(adsConfig: { meta_pixel_id?: string } | null | un
 export type AnalyticsConfig = {
   /** PostHog project API key — platform-wide, from POSTHOG_API_KEY env var on the Rails server. */
   posthog_api_key?: string;
+  /**
+   * Environment identifier from KEYSTONE_ENV on the Rails server (e.g. "production", "staging",
+   * "development"). Registered as a PostHog super property on every event so the sync job can
+   * filter by environment and avoid cross-environment data contamination.
+   */
+  environment?: string;
 };
 
 /** Analytics config for customer sites. Returns platform-wide analytics keys (e.g. PostHog). */
@@ -96,6 +102,11 @@ export function getPostHogApiKey(analyticsConfig: AnalyticsConfig | null | undef
   return str !== '' && str !== 'null' ? str : null;
 }
 
+/** Extract environment string from analytics config for use with <PostHogProvider environment={...} />. */
+export function getKeystoneEnvironment(analyticsConfig: AnalyticsConfig | null | undefined): string {
+  return analyticsConfig?.environment?.trim() || 'development';
+}
+
 export async function getServices(): Promise<Service[] | null> {
   return serverFetch<Service[]>('/public/services', defaultOptions);
 }

package/src/next/layouts/root-layout.tsx

@@ -18,6 +18,7 @@ import {
   getMetaPixelId,
   getAnalyticsConfig,
   getPostHogApiKey,
+  getKeystoneEnvironment,
 } from '../../lib/server-api';
 
 import type { CompanyInformation, Location, NavItem, Service, SiteConfig } from '../../types';
@@ -149,6 +150,7 @@ export async function KeystoneRootLayout(props: {
 
   const metaPixelId = getMetaPixelId(adsConfig);
   const posthogApiKey = getPostHogApiKey(analyticsConfig);
+  const keystoneEnvironment = getKeystoneEnvironment(analyticsConfig);
 
   const services = Array.isArray(servicesData) ? servicesData : [];
   const locations = Array.isArray(locationsData) ? locationsData : [];
@@ -226,6 +228,7 @@ export async function KeystoneRootLayout(props: {
             apiHost={posthogHost}
             accountId={accountId}
             accountName={accountName}
+            environment={keystoneEnvironment}
           >
             <KeystoneAnalyticsTracker bookingUrl={bookingHref} />
             {bodyContent}

package/src/tracking/PostHogProvider.tsx

@@ -14,6 +14,12 @@ export type PostHogProviderProps = {
   accountId?: number;
   /** Keystone account name (company_name) — attached to every event as a super property. */
   accountName?: string;
+  /**
+   * Environment identifier from KEYSTONE_ENV on the Rails server (e.g. "production", "staging",
+   * "development"). Registered as a super property so events can be filtered by environment
+   * in PostHog and the sync job only imports data for the matching environment.
+   */
+  environment?: string;
   children: React.ReactNode;
 };
 
@@ -102,7 +108,7 @@ function PostHogPageviewTracker() {
  * Mount once in the root layout body. One project key covers all customer
  * sites — filter by account_name or site_domain in the PostHog dashboard.
  */
-export function PostHogProvider({ apiKey, apiHost, accountId, accountName, children }: PostHogProviderProps) {
+export function PostHogProvider({ apiKey, apiHost, accountId, accountName, environment, children }: PostHogProviderProps) {
   useEffect(() => {
     posthog.init(apiKey, {
       api_host: apiHost ?? DEFAULT_HOST,
@@ -113,9 +119,10 @@ export function PostHogProvider({ apiKey, apiHost, accountId, accountName, child
     posthog.register({
       ...(accountId !== undefined && { account_id: accountId }),
       ...(accountName && { account_name: accountName }),
+      ...(environment && { environment }),
       site_domain: window.location.hostname,
     });
-  }, [apiKey, apiHost, accountId, accountName]);
+  }, [apiKey, apiHost, accountId, accountName, environment]);
 
   return (
     <PHProvider client={posthog}>