keystone-design-bootstrap 1.0.72 → 1.0.74

package/package.json

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

@@ -44,6 +44,13 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   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);
+
   // Phone helpers
   const country = useMemo(() => countries.find((c) => c.code === selectedCountry), [selectedCountry]);
   const phoneCode = country ? (country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`) : '+1';
@@ -59,28 +66,23 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   const fullPhone = phoneDigits.length > 0 ? `${phoneCode}${phoneDigits}` : null;
   const emailVal = email.trim() || null;
 
-  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const digits = e.target.value.replace(/\D/g, '');
-    const formatted = nationalMask ? formatDigitsToMask(digits, nationalMask) : digits;
-    setPhoneValue(formatted);
-  };
-
-  const emailInput = (
+  const emailInput = (value: string, onChange: (v: string) => void, required = false) => (
     <input
       type="email"
-      value={email}
-      onChange={(e) => setEmail(e.target.value)}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
       placeholder="you@example.com"
       className={inputClass}
       autoComplete="email"
+      required={required}
     />
   );
 
-  const phoneInput = (
+  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">
       <select
         value={selectedCountry}
-        onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
+        onChange={(e) => { setSelectedCountry(e.target.value); onChange(''); }}
         className="border-r border-secondary bg-secondary px-2 py-2.5 text-base text-secondary focus:outline-none"
         aria-label="Country code"
       >
@@ -90,11 +92,15 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       </select>
       <input
         type="tel"
-        value={phoneValue}
-        onChange={handlePhoneChange}
+        value={value}
+        onChange={(e) => {
+          const digits = e.target.value.replace(/\D/g, '');
+          onChange(nationalMask ? formatDigitsToMask(digits, nationalMask) : digits);
+        }}
         placeholder={nationalPlaceholder}
         className="flex-1 px-3 py-2.5 text-base text-primary placeholder-quaternary bg-transparent focus:outline-none"
         autoComplete="tel"
+        required={required}
       />
     </div>
   );
@@ -118,11 +124,17 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: true });
         setWelcomeName(result.firstName ?? null);
-        setStep(result.hasPassword === false ? 'new' : 'returning');
+        if (result.hasPassword === false) {
+          setIdentifiedWith(emailVal ? 'email' : 'phone');
+          setStep('new');
+        } else {
+          setStep('returning');
+        }
       } else if (result.exists === false) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: false });
+        setIdentifiedWith(emailVal ? 'email' : 'phone');
         setStep('new');
       } else {
         captureEvent('portal_login_failed', { step: 'identifier', reason: 'unknown_error' });
@@ -175,12 +187,16 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setError(null);
     setLoading(true);
     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', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          email: emailVal,
-          phone: fullPhone,
+          email: emailVal ?? additionalEmailVal,
+          phone: fullPhone ?? additionalFullPhone,
           password,
           password_confirmation: passwordConfirm,
           first_name: firstName.trim() || undefined,
@@ -207,6 +223,9 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setStep('identifier');
     setPassword('');
     setPasswordConfirm('');
+    setAdditionalPhone('');
+    setAdditionalEmail('');
+    setIdentifiedWith(null);
     setError(null);
   };
 
@@ -255,7 +274,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         <form onSubmit={handleContinue} className="space-y-3">
           <div>
             <label className={labelClass}>Email address</label>
-            {emailInput}
+            {emailInput(email, setEmail)}
           </div>
           <div className="flex items-center gap-3">
             <hr className="flex-1 border-secondary" />
@@ -264,7 +283,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
           </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            {phoneInput}
+            {phoneInput(phoneValue, setPhoneValue)}
           </div>
           <div className="pt-1">
             <button
@@ -345,16 +364,16 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             </div>
           )}
           {/* Collect the missing contact method so the business can reach out */}
-          {emailVal && !fullPhone && (
+          {identifiedWith === 'email' && (
             <div>
-              <label className={labelClass}>Phone number <span className="text-quaternary">(optional)</span></label>
-              {phoneInput}
+              <label className={labelClass}>Phone number</label>
+              {phoneInput(additionalPhone, setAdditionalPhone, true)}
             </div>
           )}
-          {fullPhone && !emailVal && (
+          {identifiedWith === 'phone' && (
             <div>
-              <label className={labelClass}>Email address <span className="text-quaternary">(optional)</span></label>
-              {emailInput}
+              <label className={labelClass}>Email address</label>
+              {emailInput(additionalEmail, setAdditionalEmail, true)}
             </div>
           )}
           <div>