keystone-design-bootstrap 1.0.81 → 1.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "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

@@ -7,6 +7,7 @@ import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
 import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import { captureEvent } from '../../tracking/captureEvent';
 type Step = 'identifier' | 'returning' | 'new';
+type FunnelStep = 'identifier' | 'signin' | 'signup';
 
 interface LoginFormProps {
   onSuccess?: () => void;
@@ -26,6 +27,12 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     captureEvent('portal_login_started');
   }, []);
 
+  const toFunnelStep = (value: Step): FunnelStep => (value === 'returning' ? 'signin' : value === 'new' ? 'signup' : 'identifier');
+
+  useEffect(() => {
+    captureEvent('portal_login_step_viewed', { step: toFunnelStep(step) });
+  }, [step]);
+
   // Identifier step state
   const [phoneValue, setPhoneValue] = useState(''); // formatted national number
   const [selectedCountry, setSelectedCountry] = useState('US');
@@ -102,7 +109,12 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
 
   const handleContinue = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!fullPhone) { setError('Enter your phone number to continue.'); return; }
+    if (!fullPhone) {
+      captureEvent('portal_login_failed', { step: 'identifier', reason: 'validation_missing_phone' });
+      setError('Enter your phone number to continue.');
+      return;
+    }
+    captureEvent('portal_login_step_submitted', { step: 'identifier' });
     setError(null);
     setLoading(true);
     try {
@@ -119,15 +131,30 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         captureEvent('portal_login_identified', { method, user_exists: true });
         setWelcomeName(result.firstName ?? null);
         if (result.hasPassword === false) {
+          captureEvent('portal_login_step_advanced', {
+            from_step: 'identifier',
+            to_step: 'signup',
+            reason: 'existing_user_without_password',
+          });
           setIdentifiedWith('phone');
           setStep('new');
         } else {
+          captureEvent('portal_login_step_advanced', {
+            from_step: 'identifier',
+            to_step: 'signin',
+            reason: 'existing_user_with_password',
+          });
           setStep('returning');
         }
       } else if (result.exists === false) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: false });
+        captureEvent('portal_login_step_advanced', {
+          from_step: 'identifier',
+          to_step: 'signup',
+          reason: 'new_user',
+        });
         setIdentifiedWith('phone');
         setStep('new');
       } else {
@@ -144,6 +171,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
 
   const handleSignIn = async (e: React.FormEvent) => {
     e.preventDefault();
+    captureEvent('portal_login_step_submitted', { step: 'signin' });
     setError(null);
     setLoading(true);
     try {
@@ -155,6 +183,11 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       const result = await res.json().catch(() => ({}));
       if (!res.ok) {
         if (result.code === 'not_found' || result.code === 'no_password') {
+          captureEvent('portal_login_step_advanced', {
+            from_step: 'signin',
+            to_step: 'signup',
+            reason: 'signin_requires_signup',
+          });
           setStep('new');
           setError(null);
           return;
@@ -163,6 +196,11 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         setError(result.error || 'Login failed. Please try again.');
         return;
       }
+      captureEvent('portal_login_step_advanced', {
+        from_step: 'signin',
+        to_step: 'authenticated',
+        reason: 'signin_success',
+      });
       captureEvent('portal_login_completed', { flow: 'signin' });
       if (onSuccess) onSuccess(); else router.refresh();
     } catch {
@@ -175,9 +213,22 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
 
   const handleSignUp = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!welcomeName && !firstName.trim()) { setError('Please enter your first name.'); return; }
-    if (!welcomeName && !lastName.trim()) { setError('Please enter your last name.'); return; }
-    if (password !== passwordConfirm) { setError('Passwords do not match.'); return; }
+    if (!welcomeName && !firstName.trim()) {
+      captureEvent('portal_login_failed', { step: 'signup', reason: 'validation_missing_first_name' });
+      setError('Please enter your first name.');
+      return;
+    }
+    if (!welcomeName && !lastName.trim()) {
+      captureEvent('portal_login_failed', { step: 'signup', reason: 'validation_missing_last_name' });
+      setError('Please enter your last name.');
+      return;
+    }
+    if (password !== passwordConfirm) {
+      captureEvent('portal_login_failed', { step: 'signup', reason: 'validation_password_mismatch' });
+      setError('Passwords do not match.');
+      return;
+    }
+    captureEvent('portal_login_step_submitted', { step: 'signup' });
     setError(null);
     setLoading(true);
     try {
@@ -203,6 +254,11 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         setError(result.error || 'Signup failed. Please try again.');
         return;
       }
+      captureEvent('portal_login_step_advanced', {
+        from_step: 'signup',
+        to_step: 'authenticated',
+        reason: 'signup_success',
+      });
       captureEvent('portal_login_completed', { flow: 'signup' });
       if (onSuccess) onSuccess(); else router.refresh();
     } catch {
@@ -214,6 +270,10 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   };
 
   const goBack = () => {
+    if (step === 'returning' || step === 'new') {
+      const fromStep = step === 'returning' ? 'signin' : 'signup';
+      captureEvent('portal_login_back_clicked', { from_step: fromStep, to_step: 'identifier' });
+    }
     setStep('identifier');
     setPassword('');
     setPasswordConfirm('');

package/src/tracking/captureEvent.ts

@@ -45,6 +45,10 @@ export type KsEventName =
   | 'portal_tab_viewed'
   // Member portal — authentication flow
   | 'portal_login_started'
+  | 'portal_login_step_viewed'
+  | 'portal_login_step_submitted'
+  | 'portal_login_step_advanced'
+  | 'portal_login_back_clicked'
   | 'portal_login_identified'
   | 'portal_login_completed'
   | 'portal_login_failed';
@@ -92,6 +96,29 @@ export type KsEventProperties = {
   /** Fired when the portal login modal is opened / login flow starts. */
   portal_login_started: Record<string, never>;
 
+  /** Fired whenever a login step becomes visible to the user. */
+  portal_login_step_viewed: {
+    step: 'identifier' | 'signin' | 'signup';
+  };
+
+  /** Fired when the user submits a specific login step. */
+  portal_login_step_submitted: {
+    step: 'identifier' | 'signin' | 'signup';
+  };
+
+  /** Fired when the flow transitions from one step to another state. */
+  portal_login_step_advanced: {
+    from_step: 'identifier' | 'signin' | 'signup';
+    to_step: 'signin' | 'signup' | 'authenticated';
+    reason: string;
+  };
+
+  /** Fired when the user explicitly navigates back to the identifier step. */
+  portal_login_back_clicked: {
+    from_step: 'signin' | 'signup';
+    to_step: 'identifier';
+  };
+
   /**
    * Fired after the identifier step resolves — we know whether the user
    * already has an account.