First build

Client-Registration/src/components/steps/ContactStep.jsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect } from 'react';
+import { useAuth } from '../../auth/AuthProvider';
+import { useRegistration } from '../../context/RegistrationContext';
+
+export default function ContactStep() {
+    const { user } = useAuth();
+    const { contactData, setContactData, saveContact, goBack, loading, error } = useRegistration();
+
+    // Pre-fill from auth claims on mount
+    useEffect(() => {
+        if (user) {
+            setContactData(prev => ({
+                contactName: prev.contactName || user.displayName || '',
+                contactEmail: prev.contactEmail || user.email || '',
+                contactPhone: prev.contactPhone || '',
+            }));
+        }
+    }, [user, setContactData]);
+
+    const handleChange = useCallback((e) => {
+        const { name, value } = e.target;
+        setContactData(prev => ({ ...prev, [name]: value }));
+    }, [setContactData]);
+
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        saveContact();
+    }, [saveContact]);
+
+    return (
+        <div className="step-card">
+            <div className="step-header">
+                <span className="step-icon">👤</span>
+                <h2>Contact Information</h2>
+                <p className="step-description">
+                    How should we reach you about your advertising account?
+                </p>
+            </div>
+
+            {user && (
+                <div className="info-card">
+                    <div className="info-card-primary">{user.displayName}</div>
+                    <div className="info-card-secondary">{user.email}</div>
+                </div>
+            )}
+
+            {error && <div className="error-message">{error}</div>}
+
+            <form onSubmit={handleSubmit}>
+                <div className="form-group">
+                    <label htmlFor="contactName">Full Name <span className="required">*</span></label>
+                    <input
+                        type="text"
+                        id="contactName"
+                        name="contactName"
+                        value={contactData.contactName}
+                        onChange={handleChange}
+                        placeholder="Jane Smith"
+                        required
+                    />
+                </div>
+
+                <div className="form-group">
+                    <label htmlFor="contactEmail">Email <span className="required">*</span></label>
+                    <input
+                        type="email"
+                        id="contactEmail"
+                        name="contactEmail"
+                        value={contactData.contactEmail}
+                        onChange={handleChange}
+                        placeholder="jane@example.com"
+                        required
+                    />
+                </div>
+
+                <div className="form-group">
+                    <label htmlFor="contactPhone">Phone</label>
+                    <input
+                        type="tel"
+                        id="contactPhone"
+                        name="contactPhone"
+                        value={contactData.contactPhone}
+                        onChange={handleChange}
+                        placeholder="(555) 123-4567"
+                    />
+                </div>
+
+                <div className="step-actions">
+                    <button type="button" className="btn-secondary" onClick={goBack}>
+                        ← Back
+                    </button>
+                    <button type="submit" className="btn-primary" disabled={loading}>
+                        {loading ? 'Saving...' : 'Continue →'}
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+}