keystone-design-bootstrap 1.0.81 → 1.0.83

package/src/design_system/portal/LoginForm.tsx

@@ -1,19 +1,20 @@
 'use client';
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { countries } from '../../utils/countries';
 import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
 import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import { captureEvent } from '../../tracking/captureEvent';
-type Step = 'identifier' | 'returning' | 'new';
+
+type Step = 'identifier' | 'verify' | 'profile';
+type FunnelStep = 'identifier' | 'signin' | 'signup';
 
 interface LoginFormProps {
   onSuccess?: () => void;
   onClose?: () => void;
 }
 
-// text-base (16px) prevents iOS from auto-zooming when the input is focused.
 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';
@@ -22,31 +23,30 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   const router = useRouter();
   const [step, setStep] = useState<Step>('identifier');
 
-  useEffect(() => {
-    captureEvent('portal_login_started');
-  }, []);
-
-  // Identifier step state
-  const [phoneValue, setPhoneValue] = useState(''); // formatted national number
+  const [phoneValue, setPhoneValue] = useState('');
   const [selectedCountry, setSelectedCountry] = useState('US');
+  const [verificationCode, setVerificationCode] = useState('');
+  const [verificationToken, setVerificationToken] = useState<string | null>(null);
 
-  // Later steps
-  const [welcomeName, setWelcomeName] = useState<string | null>(null);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
-  const [password, setPassword] = useState('');
-  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [email, setEmail] = useState('');
+
+  const [resendAvailableAt, setResendAvailableAt] = useState<number | null>(null);
+  const [secondsUntilResend, setSecondsUntilResend] = useState(0);
+
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
-  // Additional contact method collected on the new-user step.
-  // Kept separate so typing here doesn't affect the identifier-step conditions.
-  const [additionalPhone, setAdditionalPhone] = useState('');
-  const [additionalEmail, setAdditionalEmail] = useState('');
-  // Snapshot of which method the user identified with, set when moving to step 'new'.
-  const [identifiedWith, setIdentifiedWith] = useState<'email' | 'phone' | null>(null);
+  useEffect(() => {
+    captureEvent('portal_login_started');
+  }, []);
+
+  useEffect(() => {
+    const funnelStep: FunnelStep = step === 'identifier' ? 'identifier' : step === 'verify' ? 'signin' : 'signup';
+    captureEvent('portal_login_step_viewed', { step: funnelStep });
+  }, [step]);
 
-  // Phone helpers
   const country = useMemo(() => countries.find((c) => c.code === selectedCountry), [selectedCountry]);
   const phoneCode = country ? (country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`) : '+1';
   const nationalMask = useMemo(() => getNationalMask(country), [country]);
@@ -55,23 +55,22 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     () => countries.map((c) => ({ label: c.phoneCode.startsWith('+') ? c.phoneCode : `+${c.phoneCode}`, value: c.code })),
     []
   );
-
-  // Computed API values
   const phoneDigits = phoneValue.replace(/\D/g, '');
   const fullPhone = phoneDigits.length > 0 ? `${phoneCode}${phoneDigits}` : null;
-  const emailVal = null;
-
-  const emailInput = (value: string, onChange: (v: string) => void, required = false) => (
-    <input
-      type="email"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder="you@example.com"
-      className={inputClass}
-      autoComplete="email"
-      required={required}
-    />
-  );
+
+  useEffect(() => {
+    if (!resendAvailableAt) {
+      setSecondsUntilResend(0);
+      return;
+    }
+    const tick = () => {
+      const remaining = Math.max(0, Math.ceil((resendAvailableAt - Date.now()) / 1000));
+      setSecondsUntilResend(remaining);
+    };
+    tick();
+    const interval = window.setInterval(tick, 1000);
+    return () => window.clearInterval(interval);
+  }, [resendAvailableAt]);
 
   const phoneInput = (value: string, onChange: (v: string) => void, required = false) => (
     <div className="flex rounded-input border border-primary overflow-hidden focus-within:border-brand focus-within:ring-1 focus-within:ring-brand transition-colors">
@@ -100,144 +99,233 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     </div>
   );
 
-  const handleContinue = async (e: React.FormEvent) => {
+  const finishPasswordlessAuth = async ({
+    token,
+    firstNameValue,
+    lastNameValue,
+    emailValue,
+  }: {
+    token: string;
+    firstNameValue: string;
+    lastNameValue: string;
+    emailValue: string;
+  }): Promise<boolean> => {
+    const res = await fetch('/api/consumer/passwordless_auth', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({
+        phone: fullPhone,
+        verification_token: token,
+        first_name: firstNameValue.trim(),
+        last_name: lastNameValue.trim(),
+        email: emailValue.trim(),
+      }),
+    });
+    const result = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError(result.error || 'Authentication failed. Please try again.');
+      captureEvent('portal_login_failed', { step: 'signup', reason: result.error || 'passwordless_auth_failed' });
+      return false;
+    }
+
+    firePixelEvent('Lead');
+    captureEvent('portal_login_step_advanced', { from_step: 'signup', to_step: 'authenticated', reason: 'passwordless_auth_success' });
+    captureEvent('portal_login_completed', { flow: 'signup' });
+    setResendAvailableAt(null);
+    setSecondsUntilResend(0);
+    if (onSuccess) onSuccess(); else router.refresh();
+    return true;
+  };
+
+  const handleSendCode = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!fullPhone) { setError('Enter your phone number to continue.'); return; }
-    setError(null);
+    if (!fullPhone) {
+      setError('Enter your phone number to continue.');
+      captureEvent('portal_login_failed', { step: 'identifier', reason: 'validation_missing_phone' });
+      return;
+    }
+
     setLoading(true);
+    setError(null);
+    captureEvent('portal_login_step_submitted', { step: 'identifier' });
     try {
-      const res = await fetch('/api/consumer/initiate', {
+      const res = await fetch('/api/consumer/send_code', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: emailVal, phone: fullPhone }),
+        credentials: 'include',
+        body: JSON.stringify({ phone: fullPhone }),
       });
-      const result = await res.json().catch(() => ({ exists: null }));
-      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('phone');
-          setStep('new');
-        } else {
-          setStep('returning');
+      const result = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        if (result.code === 'cooldown_active' && typeof result.retry_in_seconds === 'number') {
+          setResendAvailableAt(Date.now() + result.retry_in_seconds * 1000);
         }
-      } else if (result.exists === false) {
-        await setPixelUserData({ email: emailVal, phone: fullPhone });
-        firePixelEvent('Lead');
-        captureEvent('portal_login_identified', { method, user_exists: false });
-        setIdentifiedWith('phone');
-        setStep('new');
-      } else {
-        captureEvent('portal_login_failed', { step: 'identifier', reason: 'unknown_error' });
-        setError('Something went wrong. Please check your connection and try again.');
+        setError(result.error || 'Could not send verification code.');
+        return;
       }
+
+      await setPixelUserData({ phone: fullPhone });
+      firePixelEvent('Lead');
+
+      setResendAvailableAt(result.resend_available_at ? new Date(result.resend_available_at).getTime() : Date.now() + 5 * 60 * 1000);
+      setStep('verify');
+      captureEvent('portal_login_step_advanced', { from_step: 'identifier', to_step: 'signin', reason: 'verification_code_sent' });
     } catch {
+      setError('Could not send verification code.');
       captureEvent('portal_login_failed', { step: 'identifier', reason: 'network_error' });
-      setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
     }
   };
 
-  const handleSignIn = async (e: React.FormEvent) => {
+  const handleVerifyCode = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError(null);
+    const code = verificationCode.replace(/\D/g, '');
+    if (!fullPhone || code.length !== 4) {
+      setError('Enter the 4-digit code sent to your phone.');
+      captureEvent('portal_login_failed', { step: 'signin', reason: 'validation_invalid_code' });
+      return;
+    }
+
     setLoading(true);
+    setError(null);
+    captureEvent('portal_login_step_submitted', { step: 'signin' });
     try {
-      const res = await fetch('/api/consumer/login', {
+      const res = await fetch('/api/consumer/verify_code', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: emailVal, phone: fullPhone, password }),
+        credentials: 'include',
+        body: JSON.stringify({ phone: fullPhone, code }),
       });
       const result = await res.json().catch(() => ({}));
-      if (!res.ok) {
-        if (result.code === 'not_found' || result.code === 'no_password') {
-          setStep('new');
-          setError(null);
-          return;
-        }
-        captureEvent('portal_login_failed', { step: 'signin', reason: result.code || 'invalid_credentials' });
-        setError(result.error || 'Login failed. Please try again.');
+      if (!res.ok || !result.verification_token) {
+        setError(result.error || 'That code is invalid or expired.');
+        captureEvent('portal_login_failed', { step: 'signin', reason: result.code || 'verification_failed' });
+        return;
+      }
+
+      setVerificationToken(result.verification_token);
+      setFirstName(result.first_name || '');
+      setLastName(result.last_name || '');
+      setEmail(result.email || '');
+
+      const hasCompleteExistingProfile =
+        typeof result.first_name === 'string' && result.first_name.trim().length > 0 &&
+        typeof result.last_name === 'string' && result.last_name.trim().length > 0 &&
+        typeof result.email === 'string' && result.email.trim().length > 0;
+
+      if (hasCompleteExistingProfile) {
+        captureEvent('portal_login_step_advanced', {
+          from_step: 'signin',
+          to_step: 'authenticated',
+          reason: 'verification_success_profile_complete',
+        });
+        await finishPasswordlessAuth({
+          token: result.verification_token,
+          firstNameValue: result.first_name,
+          lastNameValue: result.last_name,
+          emailValue: result.email,
+        });
         return;
       }
-      captureEvent('portal_login_completed', { flow: 'signin' });
-      if (onSuccess) onSuccess(); else router.refresh();
+
+      setStep('profile');
+      captureEvent('portal_login_step_advanced', { from_step: 'signin', to_step: 'signup', reason: 'verification_success' });
     } catch {
+      setError('That code is invalid or expired.');
       captureEvent('portal_login_failed', { step: 'signin', reason: 'network_error' });
-      setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
     }
   };
 
-  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; }
-    setError(null);
+  const handleResendCode = async () => {
+    if (!fullPhone || loading || secondsUntilResend > 0) return;
     setLoading(true);
+    setError(null);
     try {
-      const additionalPhoneDigits = additionalPhone.replace(/\D/g, '');
-      const additionalFullPhone = additionalPhoneDigits.length > 0 ? `${phoneCode}${additionalPhoneDigits}` : null;
-      const additionalEmailVal = additionalEmail.trim() || null;
-
-      const res = await fetch('/api/consumer/signup', {
+      const res = await fetch('/api/consumer/send_code', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: emailVal ?? additionalEmailVal,
-          phone: fullPhone ?? additionalFullPhone,
-          password,
-          password_confirmation: passwordConfirm,
-          first_name: firstName.trim() || undefined,
-          last_name: lastName.trim() || undefined,
-        }),
+        credentials: 'include',
+        body: JSON.stringify({ phone: fullPhone }),
       });
       const result = await res.json().catch(() => ({}));
       if (!res.ok) {
-        captureEvent('portal_login_failed', { step: 'signup', reason: result.error || 'signup_failed' });
-        setError(result.error || 'Signup failed. Please try again.');
+        if (result.code === 'cooldown_active' && typeof result.retry_in_seconds === 'number') {
+          setResendAvailableAt(Date.now() + result.retry_in_seconds * 1000);
+        }
+        setError(result.error || 'Could not request a new code yet.');
         return;
       }
-      captureEvent('portal_login_completed', { flow: 'signup' });
-      if (onSuccess) onSuccess(); else router.refresh();
+
+      setVerificationCode('');
+      setResendAvailableAt(result.resend_available_at ? new Date(result.resend_available_at).getTime() : Date.now() + 5 * 60 * 1000);
     } catch {
+      setError('Could not request a new code yet.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleProfileSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!fullPhone || !verificationToken) {
+      setError('Verification expired. Please request a new code.');
+      setStep('identifier');
+      return;
+    }
+    if (!firstName.trim() || !lastName.trim() || !email.trim()) {
+      setError('Please enter your first name, last name, and email.');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    captureEvent('portal_login_step_submitted', { step: 'signup' });
+    try {
+      await finishPasswordlessAuth({
+        token: verificationToken,
+        firstNameValue: firstName,
+        lastNameValue: lastName,
+        emailValue: email,
+      });
+    } catch {
+      setError('Authentication failed. Please try again.');
       captureEvent('portal_login_failed', { step: 'signup', reason: 'network_error' });
-      setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
     }
   };
 
-  const goBack = () => {
+  const goBackToPhone = () => {
     setStep('identifier');
-    setPassword('');
-    setPasswordConfirm('');
-    setAdditionalPhone('');
-    setAdditionalEmail('');
-    setIdentifiedWith(null);
+    setVerificationCode('');
+    setVerificationToken(null);
+    setFirstName('');
+    setLastName('');
+    setEmail('');
+    setResendAvailableAt(null);
     setError(null);
   };
 
-  const identifierSummary = fullPhone ?? '';
-
-  const headerTitle =
-    step === 'identifier' ? 'Pricing & Booking Portal' :
-    step === 'returning' ? (welcomeName ? `Welcome back, ${welcomeName}!` : 'Welcome back!') :
-    (welcomeName ? `Welcome back, ${welcomeName}!` : 'Welcome!');
+  const formatCountdown = (totalSeconds: number) => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
 
+  const headerTitle = step === 'identifier' ? 'Pricing & Booking Portal' : step === 'verify' ? 'Verify your phone' : 'Complete your profile';
   const headerSubtitle =
-    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.");
+    step === 'identifier'
+      ? 'Enter your phone number to get started.'
+      : step === 'verify'
+        ? 'We sent a 4-digit verification code by text.'
+        : 'Enter your first name, last name, and email.';
 
   return (
     <div>
-      {/* Header */}
       <div className="flex items-start justify-between gap-4 mb-5">
         <div>
           <h3 className="text-lg font-normal text-primary">{headerTitle}</h3>
@@ -263,64 +351,69 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         </div>
       )}
 
-      {/* Step: identifier */}
-      {step === 'identifier' && (
-        <form onSubmit={handleContinue} className="space-y-3">
-          <div>
-            <label className={labelClass}>Phone number</label>
-            {phoneInput(phoneValue, setPhoneValue, true)}
-          </div>
-          <div className="pt-1">
+      <div className="relative overflow-hidden transition-all duration-300 ease-out">
+        {step === 'identifier' && (
+          <form onSubmit={handleSendCode} className="space-y-3">
+            <div>
+              <label className={labelClass}>Phone number</label>
+              {phoneInput(phoneValue, setPhoneValue, true)}
+            </div>
+            <div className="pt-1">
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+              >
+                {loading ? 'Sending code…' : 'Continue'}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {step === 'verify' && (
+          <form onSubmit={handleVerifyCode} className="space-y-3">
+            <div>
+              <label className={labelClass}>Verification code</label>
+              <input
+                type="text"
+                value={verificationCode}
+                onChange={(e) => setVerificationCode(e.target.value.replace(/\D/g, '').slice(0, 4))}
+                placeholder="0000"
+                className={inputClass}
+                autoComplete="one-time-code"
+                inputMode="numeric"
+                required
+              />
+            </div>
+            <div className="pt-1">
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+              >
+                {loading ? 'Verifying…' : 'Verify code'}
+              </button>
+            </div>
             <button
-              type="submit"
-              disabled={loading}
-              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+              type="button"
+              onClick={handleResendCode}
+              disabled={loading || secondsUntilResend > 0}
+              className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors disabled:opacity-50"
             >
-              {loading ? 'Looking you up…' : 'Continue'}
+              {secondsUntilResend > 0 ? `Request new code in ${formatCountdown(secondsUntilResend)}` : 'Request new code'}
             </button>
-          </div>
-        </form>
-      )}
-
-      {/* Step: returning user */}
-      {step === 'returning' && (
-        <form onSubmit={handleSignIn} className="space-y-3">
-          <div>
-            <label className={labelClass}>Password</label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••"
-              className={inputClass}
-              required
-              autoComplete="current-password"
-            />
-          </div>
-          <div className="pt-1">
             <button
-              type="submit"
-              disabled={loading}
-              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+              type="button"
+              onClick={goBackToPhone}
+              className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
             >
-              {loading ? 'Signing in…' : 'Sign in'}
+              ← Use a different phone number
             </button>
-          </div>
-          <button
-            type="button"
-            onClick={goBack}
-            className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
-          >
-            ← {identifierSummary ? `Not ${identifierSummary}?` : 'Change phone number'}
-          </button>
-        </form>
-      )}
+          </form>
+        )}
 
-      {/* Step: new user / claim account */}
-      {step === 'new' && (
-        <form onSubmit={handleSignUp} className="space-y-3">
-          {/* Only ask for name if we don't already know who they are */}
-          {!welcomeName && (
+        {step === 'profile' && (
+          <form onSubmit={handleProfileSubmit} className="space-y-3">
             <div className="grid grid-cols-2 gap-3">
               <div>
                 <label className={labelClass}>First name</label>
@@ -347,62 +440,37 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                 />
               </div>
             </div>
-          )}
-          {/* Collect the missing contact method so the business can reach out */}
-          {identifiedWith === 'email' && (
-            <div>
-              <label className={labelClass}>Phone number</label>
-              {phoneInput(additionalPhone, setAdditionalPhone, true)}
-            </div>
-          )}
-          {identifiedWith === 'phone' && (
             <div>
               <label className={labelClass}>Email address</label>
-              {emailInput(additionalEmail, setAdditionalEmail, true)}
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                className={inputClass}
+                autoComplete="email"
+                required
+              />
+            </div>
+            <div className="pt-1">
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+              >
+                {loading ? 'Finishing…' : 'Continue'}
+              </button>
             </div>
-          )}
-          <div>
-            <label className={labelClass}>Password</label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••"
-              className={inputClass}
-              required
-              autoComplete="new-password"
-            />
-          </div>
-          <div>
-            <label className={labelClass}>Confirm password</label>
-            <input
-              type="password"
-              value={passwordConfirm}
-              onChange={(e) => setPasswordConfirm(e.target.value)}
-              placeholder="••••••••"
-              className={inputClass}
-              required
-              autoComplete="new-password"
-            />
-          </div>
-          <div className="pt-1">
             <button
-              type="submit"
-              disabled={loading}
-              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
+              type="button"
+              onClick={goBackToPhone}
+              className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
             >
-              {loading ? 'Creating account…' : 'Create account'}
+              ← Use a different phone number
             </button>
-          </div>
-          <button
-            type="button"
-            onClick={goBack}
-            className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
-          >
-            ← Back
-          </button>
-        </form>
-      )}
+          </form>
+        )}
+      </div>
     </div>
   );
 }

package/src/design_system/portal/LoginModalController.tsx

@@ -60,10 +60,12 @@ export function LoginModalController() {
   // Close the modal once the router transition has fully completed and the
   // server component has re-rendered with the new authenticated state.
   useEffect(() => {
-    if (refreshing && !isPending) {
+    if (!(refreshing && !isPending)) return;
+    const timeout = window.setTimeout(() => {
       setOpen(false);
       setRefreshing(false);
-    }
+    }, 0);
+    return () => window.clearTimeout(timeout);
   }, [refreshing, isPending]);
 
   return (