keystone-design-bootstrap 1.0.75 → 1.0.77

package/package.json

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

package/src/design_system/portal/LoginForm.tsx

@@ -18,10 +18,6 @@ const inputClass =
   'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-base text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
 const labelClass = 'block text-sm text-secondary mb-1';
 
-function isValidEmail(value: string): boolean {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
-}
-
 export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   const router = useRouter();
   const [step, setStep] = useState<Step>('identifier');
@@ -31,7 +27,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   }, []);
 
   // Identifier step state
-  const [email, setEmail] = useState('');
   const [phoneValue, setPhoneValue] = useState(''); // formatted national number
   const [selectedCountry, setSelectedCountry] = useState('US');
 
@@ -64,7 +59,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   // Computed API values
   const phoneDigits = phoneValue.replace(/\D/g, '');
   const fullPhone = phoneDigits.length > 0 ? `${phoneCode}${phoneDigits}` : null;
-  const emailVal = email.trim() || null;
+  const emailVal = null;
 
   const emailInput = (value: string, onChange: (v: string) => void, required = false) => (
     <input
@@ -107,8 +102,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
 
   const handleContinue = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!emailVal && !fullPhone) { setError('Enter your email address or phone number to continue.'); return; }
-    if (emailVal && !isValidEmail(emailVal)) { setError('Enter a valid email address.'); return; }
+    if (!fullPhone) { setError('Enter your phone number to continue.'); return; }
     setError(null);
     setLoading(true);
     try {
@@ -118,14 +112,14 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         body: JSON.stringify({ email: emailVal, phone: fullPhone }),
       });
       const result = await res.json().catch(() => ({ exists: null }));
-      const method = emailVal && fullPhone ? 'email_and_phone' : emailVal ? 'email' : 'phone';
+      const method = 'phone';
       if (result.exists === true) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: true });
         setWelcomeName(result.firstName ?? null);
         if (result.hasPassword === false) {
-          setIdentifiedWith(emailVal ? 'email' : 'phone');
+          setIdentifiedWith('phone');
           setStep('new');
         } else {
           setStep('returning');
@@ -134,7 +128,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: false });
-        setIdentifiedWith(emailVal ? 'email' : 'phone');
+        setIdentifiedWith('phone');
         setStep('new');
       } else {
         captureEvent('portal_login_failed', { step: 'identifier', reason: 'unknown_error' });
@@ -229,7 +223,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setError(null);
   };
 
-  const identifierSummary = [emailVal, fullPhone].filter(Boolean).join(' / ');
+  const identifierSummary = fullPhone ?? '';
 
   const headerTitle =
     step === 'identifier' ? 'Pricing & Booking Portal' :
@@ -237,7 +231,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     (welcomeName ? `Welcome back, ${welcomeName}!` : 'Welcome!');
 
   const headerSubtitle =
-    step === 'identifier' ? 'Enter your email or phone number to get started.' :
+    step === 'identifier' ? 'Enter your phone number to get started.' :
     step === 'returning' ? 'Enter your password to sign in.' :
     (welcomeName ? 'Create a password to access your account.' : "Let's get you set up.");
 
@@ -272,18 +266,9 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       {/* Step: identifier */}
       {step === 'identifier' && (
         <form onSubmit={handleContinue} className="space-y-3">
-          <div>
-            <label className={labelClass}>Email address</label>
-            {emailInput(email, setEmail)}
-          </div>
-          <div className="flex items-center gap-3">
-            <hr className="flex-1 border-secondary" />
-            <span className="text-xs text-quaternary">or</span>
-            <hr className="flex-1 border-secondary" />
-          </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            {phoneInput(phoneValue, setPhoneValue)}
+            {phoneInput(phoneValue, setPhoneValue, true)}
           </div>
           <div className="pt-1">
             <button
@@ -326,7 +311,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             onClick={goBack}
             className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
           >
-            ← {identifierSummary ? `Not ${identifierSummary}?` : 'Change email or phone'}
+            ← {identifierSummary ? `Not ${identifierSummary}?` : 'Change phone number'}
           </button>
         </form>
       )}

package/src/lib/server-api.ts

@@ -81,6 +81,8 @@ 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;
+  /** Per-site GTM container ID (e.g. GTM-ABC123), provisioned by Keystone. */
+  gtm_container_public_id?: 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
@@ -102,6 +104,13 @@ export function getPostHogApiKey(analyticsConfig: AnalyticsConfig | null | undef
   return str !== '' && str !== 'null' ? str : null;
 }
 
+/** Extract GTM container ID from analytics config for use with <GoogleTagManager containerId={...} />. */
+export function getGtmContainerPublicId(analyticsConfig: AnalyticsConfig | null | undefined): string | null {
+  const value = analyticsConfig?.gtm_container_public_id;
+  const str = value != null && value !== '' ? String(value).trim() : '';
+  return str !== '' && str !== 'null' && /^GTM-[A-Z0-9]+$/i.test(str) ? 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';

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

@@ -3,7 +3,13 @@ import type { Metadata } from 'next';
 
 import { HeaderNavigation, FooterHome } from '../../design_system/sections';
 import { ThemeProvider } from '../../contexts';
-import { MetaPixel, MetaPixelTracker, PostHogProvider, KeystoneAnalyticsTracker } from '../../tracking';
+import {
+  MetaPixel,
+  MetaPixelTracker,
+  PostHogProvider,
+  KeystoneAnalyticsTracker,
+  GoogleTagManager,
+} from '../../tracking';
 import { ChatWidget } from '../../design_system/components/ChatWidget';
 import { FormDefinitionsProvider } from '../contexts/form-definitions';
 import { KeystoneSSRProvider } from '../providers/ssr-provider';
@@ -18,6 +24,7 @@ import {
   getMetaPixelId,
   getAnalyticsConfig,
   getPostHogApiKey,
+  getGtmContainerPublicId,
   getKeystoneEnvironment,
 } from '../../lib/server-api';
 
@@ -111,7 +118,7 @@ function buildNavigationWithDynamicData(
  * Note: Next's `export const metadata` must remain in the site/app.
  * This component focuses on:
  * - fetching shared data
- * - injecting Meta Pixel (from ads_config) and PostHog (from analytics_config)
+ * - injecting Meta Pixel (from ads_config), GTM, and PostHog (from analytics_config)
  * - applying theme
  * - rendering Header + Footer
  * - rendering ChatWidget gated by `companyInformation.chat_enabled`
@@ -150,6 +157,7 @@ export async function KeystoneRootLayout(props: {
 
   const metaPixelId = getMetaPixelId(adsConfig);
   const posthogApiKey = getPostHogApiKey(analyticsConfig);
+  const gtmContainerId = getGtmContainerPublicId(analyticsConfig);
   const keystoneEnvironment = getKeystoneEnvironment(analyticsConfig);
 
   const services = Array.isArray(servicesData) ? servicesData : [];
@@ -187,6 +195,7 @@ export async function KeystoneRootLayout(props: {
     <>
       {metaPixelId ? <MetaPixel pixelId={metaPixelId} /> : null}
       {metaPixelId ? <MetaPixelTracker bookingUrl={externalManagementUrl} /> : null}
+      {gtmContainerId ? <GoogleTagManager containerId={gtmContainerId} /> : null}
       <ThemeProvider theme={theme}>
         <KeystoneSSRProvider>
           <FormDefinitionsProvider

package/src/tracking/GoogleTagManager.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import Script from 'next/script';
+
+const GTM_SCRIPT = (containerId: string) => `
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','${containerId.replace(/'/g, "\\'")}');
+`;
+
+export type GoogleTagManagerProps = {
+  /** GTM container public ID (e.g. GTM-ABC123). */
+  containerId: string | null | undefined;
+};
+
+/**
+ * Renders Google Tag Manager script + noscript fallback.
+ * Mount once at root layout level when a container is provisioned.
+ */
+export function GoogleTagManager({ containerId }: GoogleTagManagerProps) {
+  const raw = typeof containerId === 'string' ? containerId.trim() : '';
+  const id = raw && raw !== 'null' && /^GTM-[A-Z0-9]+$/i.test(raw) ? raw : '';
+
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        id="google-tag-manager"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{ __html: GTM_SCRIPT(id) }}
+      />
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${id}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+          title="google-tag-manager"
+        />
+      </noscript>
+    </>
+  );
+}

package/src/tracking/index.ts

@@ -26,5 +26,7 @@ export type { PixelEvent, PixelEventParams, PixelUserData } from './firePixelEve
 export { PostHogProvider } from './PostHogProvider';
 export type { PostHogProviderProps } from './PostHogProvider';
 export { KeystoneAnalyticsTracker } from './KeystoneAnalyticsTracker';
+export { GoogleTagManager } from './GoogleTagManager';
+export type { GoogleTagManagerProps } from './GoogleTagManager';
 export { captureEvent } from './captureEvent';
 export type { KsEventName, KsEventProperties } from './captureEvent';

package/src/utils/gradient-placeholder.ts

@@ -1,10 +1,8 @@
 /**
  * Generates a beautiful gradient SVG data URL using the full color palette
- * Based on gradients used in corporate marketing site animations
  * Each seed (post ID or index) will consistently return the same gradient
  */
 export const getGradientUrl = (seed: string | number): string => {
-  // Beautiful gradient combinations using the full palette from corporate marketing site
   // Colors match Tailwind's default palette (purple, pink, blue, green, orange, indigo)
   const gradients = [
     // Purple gradients (like from-purple-200 to-purple-300)