@afncdelacru/brady-chat 0.4.0 → 0.4.1

package/src/lib/ProgressiveContactForm.tsx

@@ -1,337 +0,0 @@
-import React, { useState } from 'react';
-import { motion } from 'motion/react';
-import { useRecruitingFlow, UserRole } from './RecruitingFlowContext';
-
-interface ProgressiveContactFormProps {
-	onSubmit: (data: any) => void;
-	onCancel?: () => void;
-	primaryCTA: string;
-	secondaryCTA?: string;
-	context: 'LO' | 'BM';
-}
-
-export function ProgressiveContactForm({ 
-	onSubmit, 
-	onCancel,
-	primaryCTA,
-	secondaryCTA = "Not right now",
-	context
-}: ProgressiveContactFormProps) {
-	const { identityState, userIdentity, currentRole, setCurrentRole, sessionData, updateSessionData } = useRecruitingFlow();
-  
-	type RoleType = 'LO' | 'BM';
-	const [formData, setFormData] = useState<{
-		firstName: string;
-		lastName: string;
-		email: string;
-		phone: string;
-		role: RoleType;
-		notes: string;
-	}>({
-		firstName: userIdentity.firstName || '',
-		lastName: userIdentity.lastName || '',
-		email: userIdentity.email || '',
-		phone: userIdentity.phone || '',
-		role: (currentRole === 'BM' || currentRole === 'LO') ? currentRole : (context === 'BM' ? 'BM' : 'LO'),
-		notes: ''
-	});
-
-	const [showNotes, setShowNotes] = useState(false);
-	const [roleChanged, setRoleChanged] = useState(false);
-
-	const handleRoleChange = (newRole: UserRole) => {
-		setFormData(prev => ({ ...prev, role: newRole }));
-    
-		// Detect role crossover
-		if (newRole !== (context === 'BM' ? 'BM' : 'LO')) {
-			setRoleChanged(true);
-			setCurrentRole(newRole);
-		} else {
-			setRoleChanged(false);
-		}
-	};
-
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
-    
-		// Update session data with role at submit
-		updateSessionData({ 
-			rolePrefAtSubmit: formData.role,
-			submissionTimestamp: Date.now()
-		});
-
-		// Tag submission with all tracking data
-		const submissionData = {
-			...formData,
-			...sessionData,
-			intentLevel: sessionData,
-			timestamp: Date.now()
-		};
-
-		onSubmit(submissionData);
-	};
-
-	const updateField = (field: string, value: string) => {
-		setFormData(prev => ({ ...prev, [field]: value }));
-	};
-
-	// Render based on identity state
-	const renderForm = () => {
-		switch (identityState) {
-			case 'KNOWN_RECRUIT':
-				return (
-					<>
-						{/* Pre-filled email */}
-						<div>
-							<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-								Email
-							</label>
-							<input
-								type="email"
-								value={formData.email}
-								onChange={(e) => updateField('email', e.target.value)}
-								className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-								required
-							/>
-						</div>
-
-						{/* Pre-filled phone if exists */}
-						{formData.phone && (
-							<div>
-								<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-									Mobile Phone
-								</label>
-								<input
-									type="tel"
-									value={formData.phone}
-									onChange={(e) => updateField('phone', e.target.value)}
-									className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-								/>
-							</div>
-						)}
-
-						{/* Optional notes (collapsed) */}
-						{!showNotes ? (
-							<button
-								type="button"
-								onClick={() => setShowNotes(true)}
-								className="text-sm text-[#4399D1] hover:text-[#2B7AB8] transition-colors"
-							>
-								+ Anything we should know before the conversation?
-							</button>
-						) : (
-							<div>
-								<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-									Additional Notes (Optional)
-								</label>
-								<textarea
-									value={formData.notes}
-									onChange={(e) => updateField('notes', e.target.value)}
-									rows={3}
-									className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent resize-none"
-									placeholder="Any questions or specific scenarios you'd like to discuss..."
-								/>
-							</div>
-						)}
-					</>
-				);
-
-			case 'SEMI_KNOWN':
-				return (
-					<>
-						{/* Pre-filled name */}
-						<div className="grid grid-cols-2 gap-4">
-							<div>
-								<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-									First Name
-								</label>
-								<input
-									type="text"
-									value={formData.firstName}
-									onChange={(e) => updateField('firstName', e.target.value)}
-									className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-									required
-								/>
-							</div>
-							<div>
-								<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-									Last Name
-								</label>
-								<input
-									type="text"
-									value={formData.lastName}
-									onChange={(e) => updateField('lastName', e.target.value)}
-									className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-									required
-								/>
-							</div>
-						</div>
-
-						{/* Email required */}
-						<div>
-							<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-								Email
-							</label>
-							<input
-								type="email"
-								value={formData.email}
-								onChange={(e) => updateField('email', e.target.value)}
-								className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-								required
-							/>
-						</div>
-
-						{/* Phone optional */}
-						<div>
-							<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-								Mobile Phone (Optional)
-							</label>
-							<input
-								type="tel"
-								value={formData.phone}
-								onChange={(e) => updateField('phone', e.target.value)}
-								className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-							/>
-						</div>
-
-						{/* Role selector */}
-						<div>
-							<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-								I'm exploring
-							</label>
-							<div className="flex gap-4">
-								<label className="flex-1 flex items-center gap-3 px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg cursor-pointer hover:border-[#4399D1] transition-colors">
-									<input
-										type="radio"
-										name="role"
-										value="LO"
-										checked={formData.role === 'LO'}
-										onChange={() => handleRoleChange('LO')}
-										className="text-[#4399D1] focus:ring-[#4399D1]"
-									/>
-									<span className="text-sm text-zinc-900 dark:text-white">Loan Officer</span>
-								</label>
-								<label className="flex-1 flex items-center gap-3 px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg cursor-pointer hover:border-[#4399D1] transition-colors">
-									<input
-										type="radio"
-										name="role"
-										value="BM"
-										checked={formData.role === 'BM'}
-										onChange={() => handleRoleChange('BM')}
-										className="text-[#4399D1] focus:ring-[#4399D1]"
-									/>
-									<span className="text-sm text-zinc-900 dark:text-white">Branch Manager</span>
-								</label>
-							</div>
-						</div>
-					</>
-				);
-
-			case 'ANONYMOUS':
-			default:
-				return (
-					<>
-						{/* First name required */}
-						<div>
-							<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-								First Name
-							</label>
-							<input
-								type="text"
-								value={formData.firstName}
-								onChange={(e) => updateField('firstName', e.target.value)}
-								className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-								required
-								placeholder="Enter your first name"
-							/>
-						</div>
-
-						{/* Email required */}
-						<div>
-							<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-2">
-								Email
-							</label>
-							<input
-								type="email"
-								value={formData.email}
-								onChange={(e) => updateField('email', e.target.value)}
-								className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#4399D1] focus:border-transparent"
-								required
-								placeholder="your.email@example.com"
-							/>
-						</div>
-
-						{/* Role selector (optional) */}
-						<div>
-							<label className="block text-sm text-zinc-700 dark:text-zinc-300 mb-3">
-								I'm exploring (optional)
-							</label>
-							<div className="flex gap-4">
-								<label className="flex-1 flex items-center gap-3 px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg cursor-pointer hover:border-[#4399D1] transition-colors">
-									<input
-										type="radio"
-										name="role"
-										value="LO"
-										checked={formData.role === 'LO'}
-										onChange={() => handleRoleChange('LO')}
-										className="text-[#4399D1] focus:ring-[#4399D1]"
-									/>
-									<span className="text-sm text-zinc-900 dark:text-white">Loan Officer</span>
-								</label>
-								<label className="flex-1 flex items-center gap-3 px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 rounded-lg cursor-pointer hover:border-[#4399D1] transition-colors">
-									<input
-										type="radio"
-										name="role"
-										value="BM"
-										checked={formData.role === 'BM'}
-										onChange={() => handleRoleChange('BM')}
-										className="text-[#4399D1] focus:ring-[#4399D1]"
-									/>
-									<span className="text-sm text-zinc-900 dark:text-white">Branch Manager</span>
-								</label>
-							</div>
-						</div>
-					</>
-				);
-		}
-	};
-
-	return (
-		<form onSubmit={handleSubmit} className="space-y-4">
-			{/* Role Crossover Confirmation */}
-			{roleChanged && (
-				<motion.div
-					initial={{ opacity: 0, height: 0 }}
-					animate={{ opacity: 1, height: 'auto' }}
-					className="p-3 bg-[#4399D1]/10 border border-[#4399D1]/20 rounded-lg"
-				>
-					<p className="text-sm text-[#4399D1]">
-						Got it — we'll tailor this for a {formData.role === 'BM' ? 'Branch Manager' : 'Loan Officer'} perspective.
-					</p>
-				</motion.div>
-			)}
-
-			{/* Progressive Form Fields */}
-			{renderForm()}
-
-			{/* CTAs */}
-			<div className="space-y-3 pt-4">
-				<button
-					type="submit"
-					className="w-full px-6 py-3 bg-gradient-to-r from-[#4399D1] to-[#2B7AB8] hover:from-[#2B7AB8] hover:to-[#4399D1] text-white rounded-lg transition-all duration-300 shadow-lg"
-				>
-					{primaryCTA}
-				</button>
-				{onCancel && (
-					<button
-						type="button"
-						onClick={onCancel}
-						className="w-full px-6 py-3 bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
-					>
-						{secondaryCTA}
-					</button>
-				)}
-			</div>
-		</form>
-	);
-}

package/src/lib/RecruitingFlowContext.tsx

@@ -1,259 +0,0 @@
-import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
-
-// Identity States
-export type IdentityState = 'KNOWN_RECRUIT' | 'SEMI_KNOWN' | 'ANONYMOUS';
-
-// Intent Levels
-export type IntentLevel = 'LOW' | 'MEDIUM' | 'HIGH';
-
-// User Role
-export type UserRole = 'LO' | 'BM' | 'UNKNOWN';
-
-// Page Context
-export type PageContext = 'LO' | 'BM';
-
-// User Identity Data
-interface UserIdentity {
-  firstName?: string;
-  lastName?: string;
-  email?: string;
-  phone?: string;
-  role?: UserRole;
-}
-
-// Intent Tracking
-interface IntentData {
-  level: IntentLevel;
-  actions: string[];
-  calculatorOpens: number;
-  calculatorAdjustments: number;
-  calculatorTimeSpent: number;
-  highIntentActions: string[];
-}
-
-// Session Data for Tagging
-interface SessionData {
-  identityState: IdentityState;
-  pageContext: PageContext;
-  pageType: 'Personalized' | 'Generic';
-  calculatorsUsed: ('LO' | 'BM')[];
-  userAdjustedInputs: boolean;
-  rolePrefAtSubmit?: UserRole;
-  submissionTimestamp?: number;
-}
-
-interface RecruitingFlowContextType {
-  // Identity
-  identityState: IdentityState;
-  userIdentity: UserIdentity;
-  updateUserIdentity: (data: Partial<UserIdentity>) => void;
-  
-  // Intent
-  intentData: IntentData;
-  trackAction: (action: string, type?: 'low' | 'medium' | 'high') => void;
-  trackCalculatorOpen: (type: 'LO' | 'BM') => void;
-  trackCalculatorAdjustment: () => void;
-  trackCalculatorTime: (seconds: number) => void;
-  
-  // Role Management
-  currentRole: UserRole;
-  setCurrentRole: (role: UserRole) => void;
-  
-  // Session
-  sessionData: SessionData;
-  updateSessionData: (data: Partial<SessionData>) => void;
-}
-
-const RecruitingFlowContext = createContext<RecruitingFlowContextType | undefined>(undefined);
-
-interface RecruitingFlowProviderProps {
-  children: ReactNode;
-  initialIdentityState?: IdentityState;
-  initialUserData?: UserIdentity;
-  pageContext: PageContext;
-  pageType: 'Personalized' | 'Generic';
-}
-
-export function RecruitingFlowProvider({ 
-  children, 
-  initialIdentityState = 'ANONYMOUS',
-  initialUserData = {},
-  pageContext,
-  pageType
-}: RecruitingFlowProviderProps) {
-  const [identityState, setIdentityState] = useState<IdentityState>(initialIdentityState);
-  const [userIdentity, setUserIdentity] = useState<UserIdentity>(initialUserData);
-  const [currentRole, setCurrentRole] = useState<UserRole>(initialUserData.role || 'UNKNOWN');
-  
-  const [intentData, setIntentData] = useState<IntentData>({
-    level: 'LOW',
-    actions: [],
-    calculatorOpens: 0,
-    calculatorAdjustments: 0,
-    calculatorTimeSpent: 0,
-    highIntentActions: []
-  });
-
-  const [sessionData, setSessionData] = useState<SessionData>({
-    identityState,
-    pageContext,
-    pageType,
-    calculatorsUsed: [],
-    userAdjustedInputs: false
-  });
-
-  // Update identity state when user data changes
-  useEffect(() => {
-    const hasName = !!(userIdentity.firstName && userIdentity.lastName);
-    const hasContact = !!(userIdentity.email || userIdentity.phone);
-    
-    if (hasName && hasContact) {
-      setIdentityState('KNOWN_RECRUIT');
-    } else if (hasName) {
-      setIdentityState('SEMI_KNOWN');
-    } else {
-      setIdentityState('ANONYMOUS');
-    }
-  }, [userIdentity]);
-
-  // Update session data when identity state changes
-  useEffect(() => {
-    setSessionData(prev => ({ ...prev, identityState }));
-  }, [identityState]);
-
-  const updateUserIdentity = useCallback((data: Partial<UserIdentity>) => {
-    setUserIdentity(prev => ({ ...prev, ...data }));
-  }, []);
-
-  const trackAction = useCallback((action: string, type: 'low' | 'medium' | 'high' = 'low') => {
-    setIntentData(prev => {
-      const newActions = [...prev.actions, action];
-      let newLevel = prev.level;
-      const newHighIntentActions = [...prev.highIntentActions];
-
-      // Upgrade intent level (never downgrade)
-      if (type === 'high') {
-        newLevel = 'HIGH';
-        newHighIntentActions.push(action);
-      } else if (type === 'medium' && prev.level === 'LOW') {
-        newLevel = 'MEDIUM';
-      }
-
-      return {
-        ...prev,
-        level: newLevel,
-        actions: newActions,
-        highIntentActions: newHighIntentActions
-      };
-    });
-  }, []);
-
-  const trackCalculatorOpen = useCallback((type: 'LO' | 'BM') => {
-    setIntentData(prev => {
-      const newOpens = prev.calculatorOpens + 1;
-      const newActions = [...prev.actions];
-      let newLevel = prev.level;
-      
-      // Multiple opens = medium intent
-      if (newOpens > 1 && prev.level === 'LOW') {
-        newLevel = 'MEDIUM';
-        newActions.push('calculator_reopened');
-      } else if (newOpens === 1) {
-        newActions.push('calculator_opened');
-      }
-      
-      return {
-        ...prev,
-        calculatorOpens: newOpens,
-        level: newLevel,
-        actions: newActions
-      };
-    });
-
-    setSessionData(prev => {
-      const calculatorsUsed = prev.calculatorsUsed.includes(type) 
-        ? prev.calculatorsUsed 
-        : [...prev.calculatorsUsed, type];
-      return { ...prev, calculatorsUsed };
-    });
-  }, []);
-
-  const trackCalculatorAdjustment = useCallback(() => {
-    setIntentData(prev => {
-      const newAdjustments = prev.calculatorAdjustments + 1;
-      let newLevel = prev.level;
-      const newActions = [...prev.actions];
-      
-      // Multiple adjustments = medium intent (only upgrade, never downgrade)
-      if (newAdjustments >= 2 && prev.level === 'LOW') {
-        newLevel = 'MEDIUM';
-        newActions.push('calculator_adjusted_multiple');
-      } else if (newAdjustments === 1) {
-        newActions.push('calculator_adjusted');
-      }
-      
-      return {
-        ...prev,
-        calculatorAdjustments: newAdjustments,
-        level: newLevel,
-        actions: newActions
-      };
-    });
-
-    setSessionData(prev => ({ ...prev, userAdjustedInputs: true }));
-  }, []);
-
-  const trackCalculatorTime = useCallback((seconds: number) => {
-    setIntentData(prev => {
-      const newTimeSpent = prev.calculatorTimeSpent + seconds;
-      let newLevel = prev.level;
-      const newActions = [...prev.actions];
-      
-      // Lingering > 30 seconds = medium intent
-      if (newTimeSpent > 30 && prev.level === 'LOW' && prev.calculatorTimeSpent <= 30) {
-        newLevel = 'MEDIUM';
-        newActions.push('calculator_lingered');
-      }
-      
-      return {
-        ...prev,
-        calculatorTimeSpent: newTimeSpent,
-        level: newLevel,
-        actions: newActions
-      };
-    });
-  }, []);
-
-  const updateSessionData = useCallback((data: Partial<SessionData>) => {
-    setSessionData(prev => ({ ...prev, ...data }));
-  }, []);
-
-  const value: RecruitingFlowContextType = {
-    identityState,
-    userIdentity,
-    updateUserIdentity,
-    intentData,
-    trackAction,
-    trackCalculatorOpen,
-    trackCalculatorAdjustment,
-    trackCalculatorTime,
-    currentRole,
-    setCurrentRole,
-    sessionData,
-    updateSessionData
-  };
-
-  return (
-    <RecruitingFlowContext.Provider value={value}>
-      {children}
-    </RecruitingFlowContext.Provider>
-  );
-}
-
-export function useRecruitingFlow() {
-  const context = useContext(RecruitingFlowContext);
-  if (context === undefined) {
-    throw new Error('useRecruitingFlow must be used within a RecruitingFlowProvider');
-  }
-  return context;
-}