tsk-2: Blank screen bug fix (#16)

Closes #2

Reviewed-on: phoenix/textsender#16

.env.development.sample

@@ -0,0 +1,2 @@
+VITE_AUTH_URL="http://localhost:9080"
+VITE_API_URL="http://localhost:9081"

.env.production.sample

@@ -0,0 +1,2 @@
+VITE_AUTH_URL="http://localhost:9080"
+VITE_API_URL="http://localhost:9081"

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment
+.env.production
+.env.development

package.json

@@ -1,7 +1,7 @@
 {
   "name": "textsender",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,19 +12,20 @@
     "format:check": "npx prettier --check ."
   },
   "dependencies": {
-    "react": "^19.2.3",
+    "dotenv": "^17.4.2",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.7",
-    "react-router-dom": "^7.10.1"
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.39.4",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^6.0.3",
-    "eslint": "^9.30.1",
+    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^16.3.0",
+    "globals": "^17.5.0",
-    "vite": "^7.0.4"
+    "vite": "^8.1.0"
   }
 }

src/App.jsx

@@ -8,6 +8,7 @@ import {
 import Dashboard from './components/Dashboard';
 import Login from './components/Login';
 import Register from './components/Register';
+import ProfileForm from './components/ProfileForm';
 
 import './App.css';
 
@@ -19,6 +20,7 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/user/profile" element={<ProfileForm />} />
       </Routes>
     </Router>
   );

src/api/contactApi.js

@@ -1,12 +1,21 @@
 import { API_BASE_URL } from '../constants/api';
 
 export class CreateContactRequest {
-  first_name = '';
+  firstname = '';
-  last_name = '';
+  lastname = '';
+  nickname = '';
   phone_number = '';
   user_id = '';
 }
 
+export class UpdateContactNamesRequest {
+  firstname = '';
+  lastname = '';
+  nickname = '';
+  id = '';
+  user_id = '';
+}
+
 export const contactApi = {
   getContactsWithUserId: async (userId, authBearerToken) => {
     console.log('Fetching contacts');
@@ -55,4 +64,22 @@ export const contactApi = {
       return response.json();
     }
   },
+
+  updateContactNames: async (reqBody, authBearerToken) => {
+    const response = await fetch(`${API_BASE_URL}/api/v1/contact/update`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(reqBody),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(errorData.message || `Failed to update contact names.`);
+    } else {
+      return response.json();
+    }
+  },
 };

src/api/loginApi.js

@@ -20,3 +20,50 @@ export const loginApi = {
     }
   },
 };
+
+export const userApi = {
+  get_user_profile: async (userId) => {
+    const reponse = await fetch(
+      `${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`,
+      {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+
+  update_password: async (
+    userId,
+    currentPassword,
+    updatedPassword,
+    confirmedPassword
+  ) => {
+    const request = {
+      user_id: userId,
+      current_password: currentPassword,
+      updated_password: updatedPassword,
+      confirmed_password: confirmedPassword,
+    };
+
+    const reponse = await fetch(
+      `${AUTH_API_BASE_URL}/api/v1/user/password/update`,
+      {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(request),
+      }
+    );
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+};

src/api/scheduleApi.js

@@ -0,0 +1,44 @@
+import { API_BASE_URL } from '../constants/api';
+
+export const scheduleApi = {
+  scheduleMessage: async (reqBody, authBearerToken) => {
+    console.log('Scheduling message');
+
+    const response = await fetch(`${API_BASE_URL}/api/v1/schedule/message`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(reqBody),
+    });
+
+    if (!response.ok) {
+      throw new Error('Error scheduling message');
+    } else {
+      return response.json();
+    }
+  },
+
+  prepareMessage: async (reqBody, authBearerToken) => {
+    console.log('Preparing Scheduled message');
+
+    const response = await fetch(
+      `${API_BASE_URL}/api/v1/schedule/message/status/update`,
+      {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: authBearerToken,
+        },
+        body: JSON.stringify(reqBody),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error('Error updating status of scheduled message');
+    } else {
+      return response.json();
+    }
+  },
+};

src/api/scheduleEventApi.js

@@ -0,0 +1,25 @@
+import { API_BASE_URL } from '../constants/api';
+
+export const scheduleEventApi = {
+  scheduleMessageEvent: async (reqBody, authBearerToken) => {
+    console.log('Scheduling message Event');
+
+    const response = await fetch(
+      `${API_BASE_URL}/api/v1/schedule/message/event`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: authBearerToken,
+        },
+        body: JSON.stringify(reqBody),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error('Error scheduling message event');
+    } else {
+      return response.json();
+    }
+  },
+};

src/components/AddContact.jsx

@@ -11,6 +11,7 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
     phoneNumber: '',
     firstName: '',
     lastName: '',
+    nickName: '',
   });
   const [errors, setErrors] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -66,8 +67,9 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
       const userId = tokenService.getUserId();
       let contact = new CreateContactRequest();
       contact.phone_number = formData.phoneNumber;
-      contact.first_name = formData.firstName;
+      contact.firstname = formData.firstName;
-      contact.last_name = formData.lastName;
+      contact.lastname = formData.lastName;
+      contact.nickname = formData.nickName;
       contact.user_id = userId;
       const result = await contactApi.createContact(
         contact,
@@ -178,6 +180,23 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
               <span className="form-hint">Optional field</span>
             </div>
 
+            <div className="form-group">
+              <label htmlFor="nickName" className="form-label">
+                Nick Name
+              </label>
+              <input
+                id="nickName"
+                name="nickName"
+                type="text"
+                className="form-input"
+                value={formData.nickName}
+                onChange={handleChange}
+                placeholder="Enter nick name (optional)"
+                disabled={isSubmitting}
+              />
+              <span className="form-hint">Optional field</span>
+            </div>
+
             <div className="form-actions">
               <button
                 type="button"

src/components/Dashboard.jsx

@@ -1,18 +1,20 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import AddContact from './AddContact';
-import ViewContact from './ViewContact';
 import ViewSentMessages from './ViewSentMessages';
 
 import './Dashboard.css';
 import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
+import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
 
 const Dashboard = () => {
+  const navigate = useNavigate();
   const [activeView, setActiveView] = useState('dashboard');
   const [isWizardOpen, setIsWizardOpen] = useState(false);
+  const [isViewContactWizardOpen, setIsViewContactWizardOpen] = useState(false);
   const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false);
   const [showContactForm, setShowContactForm] = useState(false);
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
 
   const handleAddContactClick = () => {
     setShowContactForm(true);
@@ -20,15 +22,9 @@ const Dashboard = () => {
 
   const handleContactSuccess = (contactData) => {
     console.log('Contact created successfully:', contactData);
-
-    // You could:
-    // 1. Refresh the contacts list if you have one
-    // 2. Show a success notification
-    // 3. Update local state with the new contact
   };
 
   const handleWizardComplete = () => {
-    // Add your logic here for each button
     setIsWizardOpen(false);
   };
 
@@ -36,8 +32,20 @@ const Dashboard = () => {
     setIsWizardOpen(false);
   };
 
+  const handleViewWizardComplete = () => {
+    setIsViewContactWizardOpen(false);
+  };
+
+  const handleViewWizardClose = () => {
+    setIsViewContactWizardOpen(false);
+  };
+
   const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
       setActiveView(view);
+    }
   };
 
   return (
@@ -121,7 +129,7 @@ const Dashboard = () => {
 
             <button
               className="dashboard-btn tertiary"
-              onClick={() => setIsPopupOpen(true)}
+              onClick={() => setIsViewContactWizardOpen(true)}
               style={{
                 padding: '12px 24px',
                 background: '#667eea',
@@ -136,9 +144,10 @@ const Dashboard = () => {
               <span className="btn-hint">View created contacts</span>
             </button>
 
-            <ViewContact
+            <ViewContactWizardModal
-              isOpen={isPopupOpen}
+              isOpen={isViewContactWizardOpen}
-              onClose={() => setIsPopupOpen(false)}
+              onClose={handleViewWizardClose}
+              onComplete={handleViewWizardComplete}
               title="Item List"
             />
           </div>

src/components/ProfileForm.css

@@ -0,0 +1,95 @@
+.profile-form {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+}
+
+.profile-form h2 {
+  color: #333;
+  font-size: 28px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.profile-form form {
+  margin-bottom: 25px;
+}
+
+.profile-form div {
+  margin-bottom: 20px;
+}
+
+.profile-form label {
+  display: block;
+  color: #555;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.profile-form input[type='text'],
+.profile-form input[type='tel'],
+.profile-form input[type='password'] {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.profile-form input[type='text']:focus,
+.profile-form input[type='tel']:focus,
+.profile-form input[type='password']:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.profile-form input[readonly] {
+  background-color: #f9fafb;
+  cursor: not-allowed;
+}
+
+.profile-form button[type='submit'] {
+  width: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.profile-form button[type='submit']:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.profile-form button[type='button'] {
+  width: 100%;
+  background: #f1f5f9;
+  color: #334155;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.profile-form button[type='button']:hover {
+  background: #e2e8f0;
+}

src/components/ProfileForm.jsx

@@ -0,0 +1,257 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { tokenService } from '../services/TokenService';
+import { userApi } from '../api/loginApi';
+
+import './ProfileForm.css';
+
+const ProfileForm = () => {
+  const navigate = useNavigate();
+  const [activeView, setActiveView] = useState('profile');
+  const [subView, setSubView] = useState('details');
+  const [formData, setFormData] = useState({
+    firstname: '',
+    lastname: '',
+    phone: '',
+    username: '',
+    createdDate: new Date().toISOString().split('T')[0],
+    lastLoginDate: new Date().toISOString().split('T')[0],
+  });
+
+  const [passwordData, setPasswordData] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmNewPassword: '',
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const userId = tokenService.getUserId();
+      const response = await userApi.get_user_profile(userId);
+
+      if (response) {
+        const userProfile = response.data[0];
+        setFormData((prev) => ({
+          ...prev,
+          firstname: userProfile.firstname,
+          lastname: userProfile.lastname,
+          phone: userProfile.phone_number,
+          username: userProfile.username,
+          createdDate: userProfile.created,
+          lastLoginDate: userProfile.last_login,
+        }));
+      } else {
+        console.error('Error getting user profile');
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handlePasswordChange = (e) => {
+    const { name, value } = e.target;
+    setPasswordData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      navigate(`/${view}`);
+    }
+  };
+
+  const handlePasswordSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const userId = tokenService.getUserId();
+      const currentPassword = passwordData.currentPassword;
+      const newPassword = passwordData.newPassword;
+      const confirmNewPassword = passwordData.confirmNewPassword;
+
+      const response = await userApi.update_password(
+        userId,
+        currentPassword,
+        newPassword,
+        confirmNewPassword
+      );
+      if (response) {
+        console.log('Successfully updated password');
+      } else {
+        console.error('Error updating password');
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+    } finally {
+    }
+  };
+
+  const renderPasswordForm = () => (
+    <div className="profile-form">
+      <h2>Change Password</h2>
+      <form onSubmit={handlePasswordSubmit}>
+        <div>
+          <label htmlFor="currentPassword">Current Password</label>
+          <input
+            type="password"
+            id="currentPassword"
+            name="currentPassword"
+            value={passwordData.currentPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="newPassword">New Password</label>
+          <input
+            type="password"
+            id="newPassword"
+            name="newPassword"
+            value={passwordData.newPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="confirmNewPassword">Confirm New Password</label>
+          <input
+            type="password"
+            id="confirmNewPassword"
+            name="confirmNewPassword"
+            value={passwordData.confirmNewPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <button type="submit">Update Password</button>
+        <button type="button" onClick={() => setSubView('details')}>
+          Back to Profile
+        </button>
+      </form>
+    </div>
+  );
+
+  const renderProfileForm = () => (
+    <div className="profile-form">
+      <h2>User Profile</h2>
+      <form>
+        <div>
+          <label htmlFor="firstname">First Name</label>
+          <input
+            type="text"
+            id="firstname"
+            name="firstname"
+            value={formData.firstname}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="lastname">Last Name</label>
+          <input
+            type="text"
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="phone">Phone</label>
+          <input
+            type="tel"
+            id="phone"
+            name="phone"
+            value={formData.phone}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="username">Username</label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            value={formData.username}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="createdDate">Created Date</label>
+          <input
+            type="text"
+            id="createdDate"
+            name="createdDate"
+            value={formData.createdDate}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="lastLoginDate">Last Login Date</label>
+          <input
+            type="text"
+            id="lastLoginDate"
+            name="lastLoginDate"
+            value={formData.lastLoginDate}
+            readOnly
+          />
+        </div>
+      </form>
+
+      <div>
+        <button type="button" onClick={() => setSubView('password')}>
+          Change Password
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="dashboard-container">
+      {/* Navbar */}
+      <nav className="dashboard-nav">
+        <div className="nav-logo">
+          <span className="logo-text">Dashboard</span>
+        </div>
+        <div className="nav-links">
+          <button
+            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
+            onClick={() => handleNavClick('dashboard')}
+          >
+            Dashboard
+          </button>
+          <button
+            className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
+            onClick={() => handleNavClick('settings')}
+          >
+            Settings
+          </button>
+          <button
+            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
+            onClick={() => handleNavClick('profile')}
+          >
+            Profile
+          </button>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      {subView === 'details' ? renderProfileForm() : renderPasswordForm()}
+    </div>
+  );
+};
+
+export default ProfileForm;

src/components/SendMessageWizard/ConfirmationStep.jsx

@@ -5,6 +5,7 @@ function ConfirmationStep({
   selectedContacts,
   createdMessage,
   message,
+  scheduledTime,
   isSubmitting,
 }) {
   // In a real app, you might fetch full contact details here
@@ -88,6 +89,12 @@ function ConfirmationStep({
           </div>
         </div>
 
+        {/* Scheduled time Section */}
+        <div>
+          Scheduled time:{' '}
+          {scheduledTime ? scheduledTime.toISOString() : 'No schedule date'}
+        </div>
+
         {/* Summary Section */}
         <div className={styles.confirmationSection}>
           <div className={styles.sectionHeader}>

src/components/SendMessageWizard/FutureTimeForm.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+
+function FutureTimeForm({ scheduledTime, setScheduledTime }) {
+  const [selectedTime, setSelectedTime] = useState(new Date());
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  const handleTimeChange = (e) => {
+    setSelectedTime(e.target.value);
+    setScheduledTime(new Date(e.target.value));
+    setError('');
+    setSuccess('');
+  };
+
+  const validateAndSubmit = (e) => {
+    e.preventDefault();
+
+    if (!selectedTime) {
+      setError('Please select a date and time.');
+      return;
+    }
+
+    const now = new Date();
+    const inputDate = new Date(selectedTime);
+
+    // Calculate the minimum allowed time (Now + 10 minutes)
+    const minAllowedTime = new Date(now.getTime() + 10 * 60000);
+
+    if (inputDate < minAllowedTime) {
+      setError('The time must be at least 10 minutes in the future.');
+      setSuccess('');
+      setScheduledTime(null);
+    } else {
+      setError('');
+      setSuccess('Time validated successfully!');
+      setScheduledTime(inputDate);
+    }
+  };
+
+  return (
+    <div
+      style={{ maxWidth: '400px', margin: '2rem auto', fontFamily: 'Arial' }}
+    >
+      <h2>Schedule Event</h2>
+      <form onSubmit={validateAndSubmit}>
+        <div style={{ marginBottom: '1rem' }}>
+          <label
+            htmlFor="future-time"
+            style={{ display: 'block', marginBottom: '0.5rem' }}
+          >
+            Select Date and Time:
+          </label>
+          <input
+            type="datetime-local"
+            id="future-time"
+            value={selectedTime}
+            onChange={handleTimeChange}
+            style={{
+              padding: '8px',
+              width: '100%',
+              borderColor: error ? 'red' : '#ccc',
+            }}
+          />
+        </div>
+
+        {error && <p style={{ color: 'red', fontSize: '0.9rem' }}>{error}</p>}
+        {success && (
+          <p style={{ color: 'green', fontSize: '0.9rem' }}>{success}</p>
+        )}
+
+        <button
+          type="submit"
+          style={{
+            padding: '10px 20px',
+            backgroundColor: '#007BFF',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default FutureTimeForm;

src/components/SendMessageWizard/MessageForm.jsx

@@ -3,9 +3,15 @@ import styles from './SendMessageWizard.module.css';
 import { tokenService } from '../../services/TokenService';
 import { messageApi, CreateMessageRequest } from '../../api/messageApi';
 
-function MessageForm({ message, onMessageChange, onMessageCreated }) {
+function MessageForm({
+  message,
+  onMessageChange,
+  onMessageCreated,
+  onToggleScheduled,
+}) {
   const [characterCount, setCharacterCount] = useState(message.length);
   const [isCreatingMessage, setIsCreatingMessage] = useState(false);
+  const [isScheduledChecked, setIsScheduledChecked] = useState(false);
   const [createdMessage, setCreatedMessage] = useState(null);
 
   const handleMessageChange = (e) => {
@@ -14,6 +20,11 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
     setCharacterCount(newMessage.length);
   };
 
+  const handleIsScheduledCheckbox = (event) => {
+    setIsScheduledChecked(event.target.checked);
+    onToggleScheduled(event.target.checked);
+  };
+
   const createMessage = async () => {
     if (!message.trim()) {
       return;
@@ -38,10 +49,8 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
         const createdMessage = response.data[0];
         setCreatedMessage(createdMessage);
         if (onMessageCreated) {
-          console.log('Setting createdMessage');
           onMessageCreated(createdMessage);
         }
-        console.log('Created message: ', createdMessage);
       }
     } catch (error) {
       console.error(error);
@@ -97,6 +106,17 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
           <li>Check spelling and grammar</li>
         </ul>
       </div>
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            checked={isScheduledChecked}
+            onChange={handleIsScheduledCheckbox}
+            readOnly
+          />
+          Schedule Message
+        </label>
+      </div>
     </div>
   );
 }

src/components/SendMessageWizard/SendMessageWizardModal.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ContactSelection from './ContactSelection';
+import FutureTimeForm from './FutureTimeForm';
 import MessageForm from './MessageForm';
 import ConfirmationStep from './ConfirmationStep';
 import StepNavigation from './StepNavigation';
@@ -26,6 +27,14 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
             message={wizard.message}
             onMessageChange={wizard.setMessage}
             onMessageCreated={wizard.setCreatedMessage}
+            onToggleScheduled={wizard.toggleScheduled}
+          />
+        );
+      case 'schedule':
+        return (
+          <FutureTimeForm
+            scheduledTime={wizard.scheduledTime}
+            setScheduledTime={wizard.setScheduledTime}
           />
         );
       case 'confirm':
@@ -34,6 +43,7 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
             selectedContacts={wizard.selectedContacts}
             createdMessage={wizard.createdMessage}
             message={wizard.message}
+            scheduledTime={wizard.scheduledTime}
             isSubmitting={wizard.isSubmitting}
           />
         );
@@ -74,6 +84,7 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
   const stepTitles = {
     select: 'Select Contacts',
     message: 'Compose Message',
+    schedule: 'Schedule message',
     confirm: 'Review & Send',
     result: 'Result',
   };

src/components/SendMessageWizard/StepNavigation.jsx

@@ -34,6 +34,25 @@ function StepNavigation({
             </button>
           </>
         );
+      case 'schedule':
+        return (
+          <>
+            <button
+              onClick={onBack}
+              disabled={!canGoBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              Back
+            </button>
+            <button
+              onClick={onNext}
+              disabled={!canProceed}
+              className={`${styles.navButton} ${styles.nextButton}`}
+            >
+              {currentStep === 'schedule' ? 'Next' : 'Review'}
+            </button>
+          </>
+        );
       case 'confirm':
         return (
           <>

src/components/SendMessageWizard/useSendMessageWizard.js

@@ -5,14 +5,18 @@ import {
   sendMessageApi,
   SendInstantMessageRequest,
 } from '../../api/sendMessageApi';
+import { scheduleApi } from '../../api/scheduleApi.js';
+import { scheduleEventApi } from '../../api/scheduleEventApi.js';
 
 const useSendMessageWizard = () => {
   const [state, setState] = useState({
     step: 'select',
     selectedContacts: [],
+    scheduledTime: null,
     message: '',
     createdMessage: null,
     isSubmitting: false,
+    isScheduled: false,
     submissionError: null,
   });
 
@@ -24,13 +28,38 @@ const useSendMessageWizard = () => {
       case 'select':
         return state.selectedContacts.length > 0;
       case 'message':
-        return state.message.trim().length > 0;
+        if (state.message.trim().length > 0) {
+          if (state.createdMessage != null) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          return false;
+        }
+      case 'schedule':
+        console.log('Checking to see if schedule can go to the next step');
+        if (state.scheduledTime == null) {
+          return false;
+        }
+        console.log('Scheduled time is not null');
+        const result =
+          state.scheduledTime instanceof Date &&
+          isNaN(state.scheduledTime.getTime());
+
+        return !result;
       case 'confirm':
         return true;
       default:
         return false;
     }
-  }, [state.step, state.selectedContacts.length, state.message]);
+  }, [
+    state.step,
+    state.selectedContacts.length,
+    state.message,
+    state.createdMessage,
+    state.scheduledTime,
+  ]);
 
   const canGoBack = state.step !== 'select';
 
@@ -44,6 +73,14 @@ const useSendMessageWizard = () => {
     }));
   };
 
+  const toggleScheduled = (scheduled) => {
+    console.log('Yup');
+    setState((prev) => ({
+      ...prev,
+      isScheduled: scheduled,
+    }));
+  };
+
   const setMessage = (message) => {
     setState((prev) => ({ ...prev, message }));
   };
@@ -53,29 +90,67 @@ const useSendMessageWizard = () => {
     setState((prev) => ({ ...prev, createdMessage: message }));
   };
 
+  const setScheduledTime = (selectedTime) => {
+    console.log('Setting scheduled time');
+    setState((prev) => ({ ...prev, scheduledTime: selectedTime }));
+  };
+
   const nextStep = () => {
     if (!canProceedToNextStep()) return;
 
-    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    const stepOrder = ['select', 'message', 'schedule', 'confirm', 'result'];
     const currentIndex = stepOrder.indexOf(state.step);
     if (currentIndex < stepOrder.length - 1) {
+      if (state.step === 'message') {
+        if (state.isScheduled) {
+          setState((prev) => ({
+            ...prev,
+            step: stepOrder[currentIndex + 1],
+            submissionError: null,
+          }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            step: stepOrder[currentIndex + 2],
+            submissionError: null,
+          }));
+        }
+      } else {
         setState((prev) => ({
           ...prev,
           step: stepOrder[currentIndex + 1],
           submissionError: null,
         }));
       }
+    }
   };
 
   const prevStep = () => {
-    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    const stepOrder = ['select', 'message', 'schedule', 'confirm', 'result'];
     const currentIndex = stepOrder.indexOf(state.step);
+
     if (currentIndex > 0) {
+      if (state.step === 'confirm') {
+        if (state.isScheduled) {
           setState((prev) => ({
             ...prev,
             step: stepOrder[currentIndex - 1],
             submissionError: null,
           }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            step: stepOrder[currentIndex - 2],
+            submissionError: null,
+          }));
+        }
+      } else {
+        setState((prev) => ({
+          ...prev,
+          step: stepOrder[currentIndex - 1],
+          submissionError: null,
+        }));
+      }
     }
   };
 
@@ -91,6 +166,55 @@ const useSendMessageWizard = () => {
     }));
 
     try {
+      if (state.scheduledTime != null) {
+        console.log('Going to schedule message');
+
+        const schMsgReq = {
+          scheduled: state.scheduledTime.toISOString(),
+          status: 'PENDING',
+          user_id: tokenService.getUserId(),
+        };
+
+        const token = tokenService.bearerToken();
+        const schMsgResponse = await scheduleApi.scheduleMessage(
+          schMsgReq,
+          token
+        );
+
+        if (schMsgResponse) {
+          console.log('Message scheduled');
+
+          const scheduledMessageId = schMsgResponse.data[0].id;
+          for (let contact of state.selectedContacts) {
+            let schMsgEvtReq = {
+              contact_id: contact,
+              message_id: state.createdMessage.id,
+              scheduled_message_id: scheduledMessageId,
+            };
+
+            const schMsgEvtResponse =
+              await scheduleEventApi.scheduleMessageEvent(schMsgEvtReq, token);
+          }
+
+          console.log('Updating message status');
+          const req = {
+            scheduled_message_id: scheduledMessageId,
+            status: 'READY',
+          };
+          console.log(req);
+          const response = await scheduleApi.prepareMessage(req, token);
+          if (response) {
+            console.log('Message scheduled');
+            setState((prev) => ({
+              ...prev,
+              step: 'result',
+              isSubmitting: false,
+              isScheduled: false,
+              scheduledTime: null,
+            }));
+          }
+        }
+      } else {
         console.log('Sending message');
         let reqBod = new SendInstantMessageRequest();
         reqBod.user_id = tokenService.getUserId();
@@ -109,8 +233,11 @@ const useSendMessageWizard = () => {
             ...prev,
             step: 'result',
             isSubmitting: false,
+            isScheduled: false,
+            scheduledTime: null,
           }));
         }
+      }
     } catch (error) {
       if (error.name === 'AbortError') {
         console.log('Submission was aborted');
@@ -121,6 +248,8 @@ const useSendMessageWizard = () => {
         ...prev,
         submissionError: error.message || 'Failed to send messages',
         isSubmitting: false,
+        isScheduled: false,
+        scheduledTime: null,
       }));
     }
   };
@@ -130,9 +259,11 @@ const useSendMessageWizard = () => {
     setState({
       step: 'select',
       selectedContacts: [],
+      scheduledTime: null,
       message: '',
       createdMessage: null,
       isSubmitting: false,
+      isScheduled: false,
       submissionError: null,
     });
   };
@@ -146,17 +277,21 @@ const useSendMessageWizard = () => {
     // Getters
     currentStep: state.step,
     selectedContacts: state.selectedContacts,
+    scheduledTime: state.scheduledTime,
     message: state.message,
     createdMessage: state.createdMessage,
     isSubmitting: state.isSubmitting,
+    isScheduled: state.isScheduled,
     submissionError: state.submissionError,
     canProceedToNextStep: canProceedToNextStep(),
     canGoBack,
 
     // Actions
     toggleContact,
+    toggleScheduled,
     setMessage,
     setCreatedMessage,
+    setScheduledTime,
     nextStep,
     prevStep,
     submit,

src/components/ViewContact.css

@@ -1,358 +0,0 @@
-/* ViewContact.css */
-/* Contact Modal Styles */
-.contact-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 20px;
-}
-
-.contact-modal {
-  background: transparent;
-  width: 100%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-
-.contact-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.contact-title {
-  color: white;
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 32px;
-  cursor: pointer;
-  line-height: 1;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background-color 0.3s ease;
-}
-
-.close-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.contact-card {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  padding: 40px;
-  width: 100%;
-}
-
-.contact-form {
-  margin-bottom: 0;
-}
-
-.required {
-  color: #ef4444;
-}
-
-.form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 30px;
-}
-
-.cancel-btn {
-  flex: 1;
-  background: #f3f4f6;
-  color: #4b5563;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 14px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.cancel-btn:hover:not(:disabled) {
-  background: #e5e7eb;
-  transform: translateY(-1px);
-}
-
-.cancel-btn:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.cancel-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.submit-btn {
-  flex: 1;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 14px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.submit-btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
-}
-
-.submit-btn:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.submit-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.submit-error {
-  background-color: #fee;
-  border: 1px solid #fcc;
-  border-radius: 6px;
-  padding: 12px;
-  margin-bottom: 20px;
-  text-align: center;
-  color: #ef4444;
-  font-size: 14px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 480px) {
-  .contact-card {
-    padding: 30px 20px;
-  }
-
-  .contact-title {
-    font-size: 20px;
-  }
-
-  .form-actions {
-    flex-direction: column;
-  }
-}
-
-/* Loading animation */
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Scrollbar styling */
-.contact-modal::-webkit-scrollbar {
-  width: 8px;
-}
-
-.contact-modal::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.contact-modal::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 4px;
-}
-
-.contact-modal::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-/* ViewContact.css */
-/* Add to existing ViewContact.css */
-
-/* Loading spinner */
-.loading-spinner {
-  border: 4px solid #f3f4f6;
-  border-top: 4px solid #667eea;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-  margin: 0 auto;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Table styles */
-.contact-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.contact-table th {
-  background: #f9fafb;
-  padding: 12px 16px;
-  text-align: left;
-  border-bottom: 2px solid #e5e7eb;
-  color: #374151;
-  font-weight: 600;
-  font-size: 14px;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.contact-table td {
-  padding: 12px 16px;
-  border-bottom: 1px solid #e5e7eb;
-  font-size: 14px;
-}
-
-.contact-table tr:last-child td {
-  border-bottom: none;
-}
-
-.contact-table tr:hover {
-  background-color: #f9fafb;
-}
-
-/* Contact item styles */
-.contact-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.contact-item:last-child {
-  border-bottom: none;
-}
-
-.contact-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 16px;
-}
-
-.contact-info {
-  flex: 1;
-}
-
-.contact-name {
-  font-weight: 600;
-  color: #111827;
-  margin-bottom: 4px;
-}
-
-.contact-phone {
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.contact-id {
-  font-size: 12px;
-  color: #9ca3af;
-  background: #f3f4f6;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-/* Search input */
-.search-input {
-  width: 100%;
-  padding: 10px 12px;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  font-size: 14px;
-  transition: border-color 0.3s ease;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-/* Empty state */
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-}
-
-.empty-state-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  opacity: 0.5;
-}
-
-.empty-state-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: #374151;
-  margin-bottom: 8px;
-}
-
-.empty-state-description {
-  color: #6b7280;
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-/* Scrollbar for contact list */
-.contact-list-container {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.contact-list-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.contact-list-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.contact-list-container::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.contact-list-container::-webkit-scrollbar-thumb:hover {
-  background: #a1a1a1;
-}

src/components/ViewContact.jsx

@@ -1,423 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-import { DATA_KEY_ACCESS_TOKEN } from '../constants/app';
-import { tokenService } from '../services/TokenService';
-import { contactApi } from '../api/contactApi';
-
-import './ViewContact.css';
-
-const ViewContact = ({ isOpen, onClose, title = 'View Contacts' }) => {
-  const [contacts, setContacts] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [lastUpdated, setLastUpdated] = useState(null);
-  const [searchTerm, setSearchTerm] = useState('');
-
-  // Fetch contacts when the popup opens
-  const fetchContacts = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-
-      const accessToken = localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
-      const userId = tokenService.getUserId();
-
-      if (!accessToken) {
-        throw new Error('Authentication required. Please log in again.');
-      }
-
-      const result = await contactApi.getContactsWithUserId(
-        userId,
-        tokenService.bearerToken()
-      );
-
-      if (result.data) {
-        setContacts(result.data);
-        setLastUpdated(new Date());
-      } else {
-        setLoading(false);
-        throw new Error(result.message || 'Failed to load contacts');
-      }
-    } catch (err) {
-      console.error('Error fetching contacts:', err);
-      setError(err.message || 'Failed to load contacts. Please try again.');
-      setContacts([]);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      console.log('This is when I would fetch contacts');
-      fetchContacts();
-    }
-  }, [isOpen, fetchContacts]);
-
-  // Handle refresh button click
-  const handleRefresh = () => {
-    fetchContacts();
-  };
-
-  // Filter contacts based on search term
-  const filteredContacts = contacts.filter((contact) => {
-    const searchLower = searchTerm.toLowerCase();
-    return (
-      (contact.phone_number &&
-        contact.phone_number.toLowerCase().includes(searchLower)) ||
-      (contact.first_name &&
-        contact.first_name.toLowerCase().includes(searchLower)) ||
-      (contact.last_name &&
-        contact.last_name.toLowerCase().includes(searchLower)) ||
-      (contact.id && contact.id.toString().includes(searchTerm))
-    );
-  });
-
-  // Format phone number for display
-  const formatPhoneNumber = (phone) => {
-    if (!phone) return 'N/A';
-    // Simple formatting - you can customize this
-    const cleaned = phone.replace(/\D/g, '');
-    if (cleaned.length === 10) {
-      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
-    }
-    return phone;
-  };
-
-  // Format timestamp
-  const formatLastUpdated = () => {
-    if (!lastUpdated) return 'Never';
-    return lastUpdated.toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="contact-modal-overlay" onClick={onClose}>
-      <div className="contact-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="contact-card">
-          <div className="contact-header">
-            <h2 className="contact-title">{title}</h2>
-            <button className="close-btn" onClick={onClose} aria-label="Close">
-              ×
-            </button>
-          </div>
-
-          <div className="contact-form">
-            {error && (
-              <div className="submit-error">
-                <div style={{ marginBottom: '8px' }}>{error}</div>
-                <button
-                  onClick={handleRefresh}
-                  style={{
-                    background: '#ef4444',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    padding: '6px 12px',
-                    cursor: 'pointer',
-                    fontSize: '12px',
-                  }}
-                >
-                  Retry Now
-                </button>
-              </div>
-            )}
-
-            {loading ? (
-              <div style={{ textAlign: 'center', padding: '40px' }}>
-                <div className="loading-spinner" />
-                <p style={{ marginTop: '20px', color: '#4b5563' }}>
-                  Loading contacts...
-                </p>
-              </div>
-            ) : (
-              <>
-                {/* Controls */}
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: '20px',
-                    flexWrap: 'wrap',
-                    gap: '10px',
-                  }}
-                >
-                  <button
-                    onClick={handleRefresh}
-                    style={{
-                      background: '#f3f4f6',
-                      color: '#4b5563',
-                      border: '1px solid #e5e7eb',
-                      borderRadius: '6px',
-                      padding: '8px 16px',
-                      cursor: 'pointer',
-                      fontSize: '14px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px',
-                    }}
-                  >
-                    <span>⟳</span> Refresh
-                  </button>
-
-                  {/* Search Input */}
-                  <input
-                    type="text"
-                    placeholder="Search contacts..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    style={{
-                      flex: 1,
-                      minWidth: '200px',
-                      maxWidth: '300px',
-                      padding: '8px 12px',
-                      border: '1px solid #e5e7eb',
-                      borderRadius: '6px',
-                      fontSize: '14px',
-                    }}
-                  />
-
-                  <div
-                    style={{
-                      fontSize: '12px',
-                      color: '#6b7280',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px',
-                    }}
-                  >
-                    <span>Updated: {formatLastUpdated()}</span>
-                    <span
-                      style={{
-                        display: 'inline-block',
-                        width: '8px',
-                        height: '8px',
-                        borderRadius: '50%',
-                        background: lastUpdated ? '#10b981' : '#9ca3af',
-                      }}
-                    />
-                  </div>
-                </div>
-
-                {/* Contacts List */}
-                {filteredContacts.length === 0 ? (
-                  <div
-                    style={{
-                      textAlign: 'center',
-                      padding: '40px',
-                      color: '#4b5563',
-                    }}
-                  >
-                    <div style={{ fontSize: '48px', marginBottom: '16px' }}>
-                      📭
-                    </div>
-                    <p
-                      style={{
-                        fontSize: '18px',
-                        fontWeight: '500',
-                        marginBottom: '8px',
-                      }}
-                    >
-                      {searchTerm
-                        ? 'No matching contacts found'
-                        : 'No contacts available'}
-                    </p>
-                    <p style={{ marginBottom: '20px' }}>
-                      {searchTerm
-                        ? 'Try a different search term'
-                        : 'Add your first contact to get started'}
-                    </p>
-                    {searchTerm && (
-                      <button
-                        onClick={() => setSearchTerm('')}
-                        style={{
-                          background: '#f3f4f6',
-                          color: '#4b5563',
-                          border: '1px solid #e5e7eb',
-                          borderRadius: '6px',
-                          padding: '8px 16px',
-                          cursor: 'pointer',
-                          fontSize: '14px',
-                          marginBottom: '10px',
-                        }}
-                      >
-                        Clear Search
-                      </button>
-                    )}
-                  </div>
-                ) : (
-                  <>
-                    <div
-                      style={{
-                        maxHeight: '400px',
-                        overflowY: 'auto',
-                        border: '1px solid #e5e7eb',
-                        borderRadius: '8px',
-                        background: '#fafafa',
-                      }}
-                    >
-                      <div style={{ padding: '4px' }}>
-                        {filteredContacts.map((contact, index) => (
-                          <div
-                            key={contact.id}
-                            style={{
-                              padding: '16px',
-                              borderBottom:
-                                index < filteredContacts.length - 1
-                                  ? '1px solid #e5e7eb'
-                                  : 'none',
-                              background: 'white',
-                              transition: 'all 0.2s',
-                            }}
-                          >
-                            <div
-                              style={{
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'flex-start',
-                                marginBottom: '8px',
-                              }}
-                            >
-                              <div
-                                style={{
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  gap: '12px',
-                                }}
-                              >
-                                <span
-                                  style={{
-                                    background: '#667eea',
-                                    color: 'white',
-                                    width: '28px',
-                                    height: '28px',
-                                    borderRadius: '50%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    fontSize: '12px',
-                                    fontWeight: '600',
-                                  }}
-                                >
-                                  {index + 1}
-                                </span>
-                                <div>
-                                  <h4
-                                    style={{
-                                      margin: 0,
-                                      color: '#111827',
-                                      fontSize: '16px',
-                                      fontWeight: '600',
-                                    }}
-                                  >
-                                    {contact.first_name || contact.last_name
-                                      ? `${contact.first_name || ''} ${contact.last_name || ''}`.trim()
-                                      : 'Unnamed Contact'}
-                                  </h4>
-                                  <p
-                                    style={{
-                                      margin: '4px 0 0 0',
-                                      color: '#6b7280',
-                                      fontSize: '14px',
-                                    }}
-                                  >
-                                    📱 {formatPhoneNumber(contact.phone_number)}
-                                  </p>
-                                </div>
-                              </div>
-                              <span
-                                style={{
-                                  fontSize: '12px',
-                                  color: '#9ca3af',
-                                  background: '#f3f4f6',
-                                  padding: '2px 8px',
-                                  borderRadius: '4px',
-                                }}
-                              >
-                                ID: {contact.id}
-                              </span>
-                            </div>
-
-                            {/* Additional info */}
-                            <div
-                              style={{
-                                marginLeft: '40px',
-                                fontSize: '13px',
-                                color: '#6b7280',
-                              }}
-                            >
-                              {contact.created_at && (
-                                <div style={{ marginTop: '4px' }}>
-                                  Created:{' '}
-                                  {new Date(
-                                    contact.created_at
-                                  ).toLocaleDateString()}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Summary */}
-                    <div
-                      style={{
-                        marginTop: '20px',
-                        padding: '12px 16px',
-                        background: '#f0f9ff',
-                        borderRadius: '6px',
-                        border: '1px solid #bae6fd',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        fontSize: '14px',
-                      }}
-                    >
-                      <div style={{ color: '#0369a1' }}>
-                        <strong>{filteredContacts.length}</strong> contact
-                        {filteredContacts.length !== 1 ? 's' : ''}
-                        {searchTerm && ` (filtered from ${contacts.length})`}
-                      </div>
-                      <div style={{ color: '#0284c7', fontSize: '12px' }}>
-                        {searchTerm
-                          ? 'Showing search results'
-                          : 'All contacts loaded'}
-                      </div>
-                    </div>
-                  </>
-                )}
-              </>
-            )}
-
-            <div className="form-actions">
-              <button
-                type="button"
-                className="cancel-btn"
-                onClick={onClose}
-                disabled={loading}
-              >
-                Close
-              </button>
-              <button
-                type="button"
-                className="submit-btn"
-                onClick={handleRefresh}
-                disabled={loading}
-              >
-                {loading ? 'Refreshing...' : 'Refresh List'}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ViewContact;

src/components/ViewContactWizard/ConfirmationStep.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import styles from './ConfirmationStep.module.css';
+
+function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
+  if (!selectedContact || !contactDetails) {
+    return (
+      <div className={styles.confirmationStep}>
+        <div className={styles.noDataMessage}>
+          <p>No contact selected or details available.</p>
+          <p className={styles.hint}>
+            Please go back and select a contact to modify.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.confirmationStep}>
+      <h3 className={styles.sectionTitle}>Review Your Changes</h3>
+
+      <div className={styles.reviewSection}>
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>Contact Phone</span>
+          <span className={styles.reviewValue}>
+            {selectedContact.phone_number}
+          </span>
+        </div>
+
+        <div className={styles.reviewDivider} />
+
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>First Name</span>
+          <div className={styles.reviewComparison}>
+            <span className={styles.oldValue}>
+              {selectedContact.firstname || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.firstname || 'Not set'}
+            </span>
+          </div>
+        </div>
+
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>Last Name</span>
+          <div className={styles.reviewComparison}>
+            <span className={styles.oldValue}>
+              {selectedContact.lastname || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.lastname || 'Not set'}
+            </span>
+          </div>
+        </div>
+
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>Nickname</span>
+          <div className={styles.reviewComparison}>
+            <span className={styles.oldValue}>
+              {selectedContact.nickname || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.nickname || 'Not set'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {isSubmitting && (
+        <div className={styles.submittingMessage}>
+          <div className={styles.spinner}></div>
+          <p>Updating contact information...</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ConfirmationStep;

src/components/ViewContactWizard/ConfirmationStep.module.css

@@ -0,0 +1,214 @@
+/* ConfirmationStep.module.css */
+.confirmationStep {
+  padding: 32px;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sectionTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 28px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sectionTitle::before {
+  content: '✓';
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: white;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.reviewSection {
+  background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
+  border-radius: 16px;
+  padding: 32px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(10px);
+}
+
+.reviewItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #f1f5f9;
+  transition: all 0.2s ease;
+}
+
+.reviewItem:hover {
+  transform: translateX(5px);
+}
+
+.reviewItem:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.reviewLabel {
+  font-weight: 600;
+  color: #475569;
+  flex: 1;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.reviewLabel::before {
+  content: '•';
+  color: #8b5cf6;
+  font-size: 20px;
+}
+
+.reviewValue {
+  flex: 2;
+  text-align: right;
+  color: #0f172a;
+  font-weight: 500;
+  font-size: 15px;
+  background: #f1f5f9;
+  padding: 8px 16px;
+  border-radius: 8px;
+}
+
+.reviewComparison {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+}
+
+.oldValue {
+  color: #94a3b8;
+  text-decoration: line-through;
+  font-size: 14px;
+  background: #f8fafc;
+  padding: 6px 12px;
+  border-radius: 6px;
+  min-width: 100px;
+  text-align: center;
+}
+
+.arrow {
+  color: #8b5cf6;
+  font-weight: bold;
+  font-size: 20px;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.newValue {
+  color: #059669;
+  font-weight: 600;
+  font-size: 15px;
+  background: #d1fae5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  min-width: 100px;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.1);
+}
+
+.reviewDivider {
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
+  margin: 24px 0;
+  opacity: 0.3;
+}
+
+.submittingMessage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 32px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 12px;
+  border: 1px solid #bae6fd;
+  animation: pulseBg 1.5s infinite;
+}
+
+@keyframes pulseBg {
+  0%,
+  100% {
+    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  }
+  50% {
+    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
+  }
+}
+
+.spinner {
+  border: 3px solid rgba(139, 92, 246, 0.1);
+  border-top: 3px solid #8b5cf6;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.submittingMessage p {
+  color: #0369a1;
+  font-weight: 500;
+  font-size: 15px;
+}
+
+.noDataMessage {
+  text-align: center;
+  padding: 60px 20px;
+  color: #64748b;
+  font-size: 16px;
+  background: #f8fafc;
+  border-radius: 12px;
+  border: 1px dashed #cbd5e1;
+}
+
+.noDataMessage::before {
+  content: '⚠️';
+  font-size: 32px;
+  display: block;
+  margin-bottom: 16px;
+}

src/components/ViewContactWizard/ModifyForm.jsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import styles from './ModifyForm.module.css';
+
+function ModifyForm({ contactDetails, setContactDetails }) {
+  const [formData, setFormData] = useState({
+    firstname: '',
+    lastname: '',
+    nickname: '',
+  });
+
+  // Initialize form with contactDetails when component mounts or contactDetails changes
+  useEffect(() => {
+    if (contactDetails) {
+      setFormData({
+        firstname: contactDetails.firstname || '',
+        lastname: contactDetails.lastname || '',
+        nickname: contactDetails.nickname || '',
+      });
+    }
+  }, [contactDetails]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    const updatedFormData = {
+      ...formData,
+      [name]: value,
+    };
+
+    setFormData(updatedFormData);
+
+    // Update parent state with the updated form data
+    setContactDetails(updatedFormData);
+  };
+
+  return (
+    <div className={styles.modifyForm}>
+      <h3 className={styles.sectionTitle}>Edit Contact Information</h3>
+
+      <div className={styles.formGroup}>
+        <label htmlFor="firstname" className={styles.formLabel}>
+          First Name
+          <span className={styles.requiredIndicator}>*</span>
+        </label>
+        <div className={styles.inputContainer}>
+          <input
+            type="text"
+            id="firstname"
+            name="firstname"
+            value={formData.firstname}
+            onChange={handleChange}
+            className={styles.formInput}
+            placeholder="Enter contact's first name"
+            required
+            minLength="2"
+          />
+          <span className={styles.inputIcon}>👤</span>
+        </div>
+        <div className={styles.validationHint}>
+          Required • Minimum 2 characters
+        </div>
+      </div>
+
+      <div className={styles.formGroup}>
+        <label htmlFor="lastname" className={styles.formLabel}>
+          Last Name
+          <span className={styles.requiredIndicator}>*</span>
+        </label>
+        <div className={styles.inputContainer}>
+          <input
+            type="text"
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
+            onChange={handleChange}
+            className={styles.formInput}
+            placeholder="Enter contact's last name"
+            required
+            minLength="2"
+          />
+          <span className={styles.inputIcon}>📇</span>
+        </div>
+        <div className={styles.validationHint}>
+          Required • Minimum 2 characters
+        </div>
+      </div>
+
+      <div className={styles.formGroup}>
+        <label htmlFor="nickname" className={styles.formLabel}>
+          Nickname
+          <span className={styles.optionalIndicator}>(Optional)</span>
+        </label>
+        <div className={styles.inputContainer}>
+          <input
+            type="text"
+            id="nickname"
+            name="nickname"
+            value={formData.nickname}
+            onChange={handleChange}
+            className={styles.formInput}
+            placeholder="Enter a friendly nickname (optional)"
+          />
+          <span className={styles.inputIcon}>🌟</span>
+        </div>
+        <div className={styles.validationHint}>
+          Optional • Leave empty if not needed
+        </div>
+      </div>
+
+      <div className={styles.formInfo}>
+        <p>
+          Fields marked with <span className={styles.requiredIndicator}>*</span>{' '}
+          are required. Nickname is optional and can be left blank.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default ModifyForm;

src/components/ViewContactWizard/ModifyForm.module.css

@@ -0,0 +1,156 @@
+/* ModifyForm.module.css */
+.modifyForm {
+  padding: 32px;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.sectionTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.sectionTitle::before {
+  content: '✏️';
+  font-size: 24px;
+}
+
+.formGroup {
+  margin-bottom: 24px;
+}
+
+.formLabel {
+  display: block;
+  margin-bottom: 10px;
+  font-weight: 500;
+  color: #475569;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.requiredIndicator {
+  color: #ef4444;
+  font-size: 18px;
+  margin-left: 2px;
+}
+
+.optionalIndicator {
+  color: #64748b;
+  font-size: 12px;
+  margin-left: 6px;
+  font-weight: normal;
+  background: #f1f5f9;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.formInput {
+  width: 100%;
+  padding: 14px 18px;
+  border: 2px solid #e2e8f0;
+  border-radius: 10px;
+  font-size: 15px;
+  transition: all 0.3s ease;
+  background: #f8fafc;
+  color: #1e293b;
+  font-family: inherit;
+}
+
+.formInput:focus {
+  outline: none;
+  border-color: #8b5cf6;
+  background: white;
+  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
+  transform: translateY(-1px);
+}
+
+.formInput::placeholder {
+  color: #94a3b8;
+  font-size: 14px;
+}
+
+.formInput:valid:required {
+  border-color: #10b981;
+}
+
+.formInput:invalid:required:not(:placeholder-shown) {
+  border-color: #ef4444;
+}
+
+.inputContainer {
+  position: relative;
+}
+
+.inputIcon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94a3b8;
+  font-size: 18px;
+}
+
+.formInfo {
+  margin-top: 32px;
+  padding: 16px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 10px;
+  font-size: 14px;
+  color: #0369a1;
+  border-left: 4px solid #3b82f6;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.formInfo::before {
+  content: '💡';
+  font-size: 18px;
+}
+
+.formInfo p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.validationHint {
+  font-size: 13px;
+  color: #64748b;
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.validationHint::before {
+  content: 'ⓘ';
+  font-size: 12px;
+}
+
+/* Optional field styling */
+.formGroup:last-child .formInput {
+  border-color: #cbd5e1;
+}
+
+.formGroup:last-child .formInput:focus {
+  border-color: #8b5cf6;
+}

src/components/ViewContactWizard/StepNavigation.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import styles from './StepNavigation.module.css';
+
+function StepNavigation({
+  currentStep,
+  onNext,
+  onBack,
+  onSubmit,
+  onDone,
+  canProceed,
+  canGoBack,
+  isSubmitting,
+  submissionError,
+}) {
+  const renderButtons = () => {
+    switch (currentStep) {
+      case 'select':
+      case 'modify':
+        return (
+          <div className={styles.buttonGroup}>
+            <button
+              onClick={onBack}
+              disabled={!canGoBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              <span className={styles.buttonIcon}>←</span>
+              Back
+            </button>
+            <button
+              onClick={onNext}
+              disabled={!canProceed}
+              className={`${styles.navButton} ${styles.nextButton}`}
+            >
+              {currentStep === 'select' ? 'Next' : 'Review'}
+              <span className={styles.buttonIcon}>→</span>
+            </button>
+          </div>
+        );
+      case 'confirm':
+        return (
+          <div className={styles.buttonGroup}>
+            <button
+              onClick={onBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              <span className={styles.buttonIcon}>←</span>
+              Back
+            </button>
+            <button
+              onClick={onSubmit}
+              disabled={isSubmitting}
+              className={`${styles.navButton} ${styles.submitButton}`}
+            >
+              {isSubmitting ? (
+                <>
+                  <span className={styles.buttonIcon}>⏳</span>
+                  Updating...
+                </>
+              ) : (
+                <>
+                  <span className={styles.buttonIcon}>✓</span>
+                  Update Contact
+                </>
+              )}
+            </button>
+          </div>
+        );
+      case 'result':
+        return (
+          <button
+            onClick={onDone}
+            className={`${styles.navButton} ${styles.doneButton}`}
+          >
+            <span className={styles.buttonIcon}>🏁</span>
+            Done
+          </button>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.navigation}>
+      {renderButtons()}
+      {submissionError && (
+        <span className={styles.error}>{submissionError}</span>
+      )}
+    </div>
+  );
+}
+
+export default StepNavigation;

src/components/ViewContactWizard/StepNavigation.module.css

@@ -0,0 +1,204 @@
+/* StepNavigation.module.css */
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border-top: 1px solid #e2e8f0;
+  border-radius: 0 0 16px 16px;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 12px;
+}
+
+.navButton {
+  padding: 14px 28px;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 15px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.3s ease;
+  min-width: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.navButton::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5px;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.5);
+  opacity: 0;
+  border-radius: 100%;
+  transform: scale(1, 1) translate(-50%);
+  transform-origin: 50% 50%;
+}
+
+.navButton:focus:not(:active)::after {
+  animation: ripple 1s ease-out;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(40, 40);
+    opacity: 0;
+  }
+}
+
+.backButton {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  color: #475569;
+  border: 2px solid #cbd5e1;
+}
+
+.backButton:hover:not(:disabled) {
+  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
+}
+
+.backButton:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.backButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.nextButton {
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+}
+
+.nextButton:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
+  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+}
+
+.nextButton:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.nextButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none;
+}
+
+.submitButton {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+}
+
+.submitButton:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+}
+
+.submitButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none;
+}
+
+.doneButton {
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+  margin-left: auto;
+}
+
+.doneButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
+}
+
+.error {
+  color: #dc2626;
+  font-size: 14px;
+  font-weight: 500;
+  background: #fef2f2;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border-left: 4px solid #dc2626;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-5px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(5px);
+  }
+}
+
+.error::before {
+  content: '⚠️';
+  font-size: 16px;
+}
+
+.buttonIcon {
+  font-size: 16px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .navigation {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .buttonGroup {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .navButton {
+    width: 100%;
+  }
+
+  .error {
+    width: 100%;
+    text-align: center;
+  }
+}

src/components/ViewContactWizard/ViewContact.jsx

@@ -0,0 +1,150 @@
+import { React, useState, useEffect } from 'react';
+
+import { tokenService } from '../../services/TokenService';
+import { contactApi } from '../../api/contactApi';
+import styles from './ViewContact.module.css';
+
+function ViewContact({ selectedContact, onSelectedContact }) {
+  const [contacts, setContacts] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    try {
+      console.log('Going');
+      fetchContacts();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const fetchContacts = async () => {
+    try {
+      setIsLoading(true);
+      console.log('Loading contacts');
+
+      const userId = tokenService.getUserId();
+      const response = await contactApi.getContactsWithUserId(
+        userId,
+        tokenService.bearerToken()
+      );
+      if (!response) {
+        throw new Error('Failed to fetch contacts');
+      } else {
+        const data = response.data;
+        setContacts(data);
+        setError(null);
+      }
+    } catch (err) {
+      setError(err.message);
+      console.error('Error fetching contacts:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const filteredContacts = contacts.filter(
+    (contact) =>
+      contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.firstname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.lastname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.nickname?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatContactDisplay = (contact) => {
+    const phone = contact.phone_number || 'No phone';
+    const name =
+      [contact.firstname, contact.lastname].filter(Boolean).join(' ') ||
+      'Unnamed';
+    const nickname = contact.nickname ? `"${contact.nickname}"` : '';
+
+    return `${phone} - ${name} ${nickname}`.trim();
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.loading}>
+        <div className={styles.spinner}></div>
+        <p>Loading contacts...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorState}>
+        <p>Error loading contacts: {error}</p>
+        <button onClick={() => window.location.reload()}>Retry</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.contactSelection}>
+      <div className={styles.selectionHeader}>
+        <div className={styles.searchBox}>
+          <input
+            type="text"
+            placeholder="Search by phone, name, or nickname..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className={styles.searchInput}
+          />
+        </div>
+      </div>
+
+      <div className={styles.contactsList}>
+        {filteredContacts.length === 0 ? (
+          <div className={styles.emptyState}>
+            <div className={styles.emptyStateIcon}>👤</div>
+            <p className={styles.emptyStateTitle}>No contacts found</p>
+            <p className={styles.emptyStateDescription}>
+              {searchTerm
+                ? 'Try a different search term'
+                : 'No contacts available'}
+            </p>
+          </div>
+        ) : (
+          filteredContacts.map((contact) => (
+            <div
+              key={contact.id}
+              className={`${styles.contactItem} ${
+                selectedContact?.id === contact.id ? styles.selected : ''
+              }`}
+              onClick={() => onSelectedContact(contact)}
+            >
+              <div className={styles.contactAvatar}>
+                {contact.firstname?.[0]?.toUpperCase() || '?'}
+              </div>
+              <div className={styles.contactInfo}>
+                <div className={styles.contactMainInfo}>
+                  <span className={styles.contactPhone}>
+                    {contact.phone_number}
+                  </span>
+                  {contact.nickname && (
+                    <span className={styles.contactNickname}>
+                      "{contact.nickname}"
+                    </span>
+                  )}
+                </div>
+                <div className={styles.contactName}>
+                  {[contact.firstname, contact.lastname]
+                    .filter(Boolean)
+                    .join(' ') || 'Unnamed Contact'}
+                </div>
+                {selectedContact?.id === contact.id && (
+                  <div className={styles.selectedIndicator}>✓ Selected</div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ViewContact;

src/components/ViewContactWizard/ViewContact.module.css

@@ -0,0 +1,290 @@
+/* ViewContact.module.css */
+.contactSelection {
+  padding: 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.selectionHeader {
+  margin-bottom: 24px;
+}
+
+.searchBox {
+  position: relative;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 14px 48px 14px 16px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-size: 15px;
+  background: #f8fafc;
+  color: #1e293b;
+  transition: all 0.3s ease;
+}
+
+.searchInput:focus {
+  outline: none;
+  border-color: #8b5cf6;
+  background: white;
+  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
+}
+
+.searchInput::placeholder {
+  color: #94a3b8;
+}
+
+.searchBox::after {
+  content: '🔍';
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #94a3b8;
+}
+
+.contactsList {
+  flex: 1;
+  overflow-y: auto;
+  border-radius: 12px;
+  background: white;
+  border: 1px solid #e2e8f0;
+}
+
+.contactsList::-webkit-scrollbar {
+  width: 6px;
+}
+
+.contactsList::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.contactsList::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.contactsList::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.contactItem {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f1f5f9;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: white;
+}
+
+.contactItem:hover {
+  background: #f8fafc;
+  transform: translateX(4px);
+}
+
+.contactItem.selected {
+  background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-left: 4px solid #3b82f6;
+}
+
+.contactItem:last-child {
+  border-bottom: none;
+}
+
+.contactAvatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 18px;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
+}
+
+.contactInfo {
+  flex: 1;
+  min-width: 0; /* Prevents overflow */
+}
+
+.contactMainInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+
+.contactPhone {
+  font-weight: 600;
+  color: #1e293b;
+  font-size: 15px;
+  background: #f1f5f9;
+  padding: 4px 10px;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.contactNickname {
+  color: #7c3aed;
+  font-size: 14px;
+  font-style: italic;
+  background: #f3f0ff;
+  padding: 4px 10px;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.contactName {
+  color: #475569;
+  font-size: 14px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selectedIndicator {
+  color: #3b82f6;
+  font-size: 12px;
+  font-weight: 500;
+  background: rgba(59, 130, 246, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+  display: inline-block;
+  margin-top: 4px;
+  animation: fadeIn 0.3s ease;
+}
+
+/* Loading state */
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.spinner {
+  border: 4px solid #f1f5f9;
+  border-top: 4px solid #8b5cf6;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading p {
+  color: #64748b;
+  font-size: 16px;
+}
+
+/* Error state */
+.errorState {
+  text-align: center;
+  padding: 40px 20px;
+  background: #fef2f2;
+  border-radius: 12px;
+  border: 1px solid #fecaca;
+}
+
+.errorState p {
+  color: #dc2626;
+  margin-bottom: 20px;
+  font-size: 15px;
+}
+
+.errorState button {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  color: white;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.errorState button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
+}
+
+/* Empty state */
+.emptyState {
+  text-align: center;
+  padding: 60px 20px;
+  color: #64748b;
+}
+
+.emptyStateIcon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.emptyStateTitle {
+  font-size: 18px;
+  font-weight: 500;
+  color: #475569;
+  margin-bottom: 8px;
+}
+
+.emptyStateDescription {
+  font-size: 14px;
+  color: #94a3b8;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .contactSelection {
+    padding: 16px;
+  }
+
+  .contactItem {
+    padding: 14px 16px;
+  }
+
+  .contactMainInfo {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .contactAvatar {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+  }
+}

src/components/ViewContactWizard/ViewContactWizard.module.css

@@ -0,0 +1,264 @@
+/* ViewContactWizard.module.css - Updated for aesthetics */
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(15, 23, 42, 0.9) 0%,
+    rgba(30, 41, 59, 0.95) 100%
+  );
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+  animation: fadeInOverlay 0.3s ease-out;
+}
+
+@keyframes fadeInOverlay {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal {
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border-radius: 24px;
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 10px 40px -10px rgba(139, 92, 246, 0.2);
+  width: 100%;
+  max-width: 520px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(40px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 28px 32px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.modalHeader::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 200px;
+  height: 200px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+}
+
+.modalHeader::after {
+  content: '';
+  position: absolute;
+  bottom: -30%;
+  left: -10%;
+  width: 150px;
+  height: 150px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 50%;
+}
+
+.modalTitle {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0;
+  position: relative;
+  z-index: 1;
+  letter-spacing: -0.5px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.modalTitle::before {
+  content: '📱';
+  font-size: 24px;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.closeButton {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  font-size: 28px;
+  color: white;
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+  backdrop-filter: blur(5px);
+}
+
+.closeButton:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: rotate(90deg);
+}
+
+.closeButton:active {
+  transform: rotate(90deg) scale(0.95);
+}
+
+.modalBody {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+
+.modalBody::-webkit-scrollbar {
+  width: 6px;
+}
+
+.modalBody::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modalBody::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  border-radius: 10px;
+}
+
+.modalFooter {
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border-top: 1px solid #e2e8f0;
+  position: relative;
+}
+
+/* Step Indicator */
+.stepIndicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 32px 0;
+}
+
+.stepDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #cbd5e1;
+  transition: all 0.3s ease;
+}
+
+.stepDot.active {
+  width: 24px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  border-radius: 12px;
+}
+
+.stepDot.completed {
+  background: #10b981;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .modal {
+    max-height: 90vh;
+    border-radius: 20px;
+  }
+
+  .modalHeader {
+    padding: 24px;
+  }
+
+  .modalTitle {
+    font-size: 18px;
+  }
+
+  .closeButton {
+    width: 32px;
+    height: 32px;
+    font-size: 24px;
+  }
+}
+
+/* Result Step specific styles */
+.resultStep {
+  padding: 48px 32px;
+  text-align: center;
+  animation: fadeIn 0.6s ease-out;
+}
+
+.successIcon {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40px;
+  margin: 0 auto 28px;
+  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
+  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.resultTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 16px;
+}
+
+.resultMessage {
+  color: #64748b;
+  font-size: 16px;
+  line-height: 1.6;
+  max-width: 320px;
+  margin: 0 auto;
+  background: #f8fafc;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+}

src/components/ViewContactWizard/ViewContactWizardModal.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import ViewContact from './ViewContact';
+import ModifyForm from './ModifyForm';
+import ConfirmationStep from './ConfirmationStep';
+import StepNavigation from './StepNavigation';
+import useViewContactWizard from './useViewContactWizard';
+
+import styles from './ViewContactWizard.module.css';
+
+function ViewContactWizardModal({ isOpen, onClose, onComplete }) {
+  const wizard = useViewContactWizard();
+
+  if (!isOpen) return null;
+
+  const renderStep = () => {
+    switch (wizard.currentStep) {
+      case 'select':
+        return (
+          <ViewContact
+            selectedContact={wizard.selectedContact}
+            onSelectedContact={wizard.onSelectedContact}
+          />
+        );
+      case 'modify':
+        return (
+          <ModifyForm
+            contactDetails={wizard.contactDetails}
+            setContactDetails={wizard.setContactDetails}
+          />
+        );
+      case 'confirm':
+        return (
+          <ConfirmationStep
+            selectedContact={wizard.selectedContact}
+            contactDetails={wizard.contactDetails}
+            isSubmitting={wizard.isSubmitting}
+          />
+        );
+      case 'result':
+        return (
+          <div className={styles.resultStep}>
+            <div className={styles.successIcon}>✓</div>
+            <h3 className={styles.resultTitle}>
+              Contact Updated Successfully!
+            </h3>
+            <p className={styles.resultMessage}>
+              The contact details have been updated and saved to your address
+              book. You can now close this window.
+            </p>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const handleClose = () => {
+    wizard.reset();
+    onClose();
+  };
+
+  const handleComplete = () => {
+    wizard.reset();
+    onComplete();
+  };
+
+  const stepTitles = {
+    select: 'Select Contact',
+    modify: 'Edit Contact Details',
+    confirm: 'Review Changes',
+    result: 'Update Complete',
+  };
+
+  const steps = ['select', 'modify', 'confirm', 'result'];
+  const currentStepIndex = steps.indexOf(wizard.currentStep);
+
+  return (
+    <div className={styles.modalOverlay} onClick={handleClose}>
+      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.modalHeader}>
+          <h2 className={styles.modalTitle}>
+            {stepTitles[wizard.currentStep]}
+          </h2>
+          <button
+            onClick={handleClose}
+            className={styles.closeButton}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className={styles.stepIndicator}>
+          {steps.map((step, index) => (
+            <div
+              key={step}
+              className={`${styles.stepDot} ${
+                index < currentStepIndex ? styles.completed : ''
+              } ${index === currentStepIndex ? styles.active : ''}`}
+            />
+          ))}
+        </div>
+
+        <div className={styles.modalBody}>{renderStep()}</div>
+
+        <div className={styles.modalFooter}>
+          <StepNavigation
+            currentStep={wizard.currentStep}
+            onNext={wizard.nextStep}
+            onBack={wizard.prevStep}
+            onSubmit={wizard.submit}
+            onDone={handleComplete}
+            canProceed={wizard.canProceedToNextStep}
+            canGoBack={wizard.canGoBack}
+            isSubmitting={wizard.isSubmitting}
+            submissionError={wizard.submissionError}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ViewContactWizardModal;

src/components/ViewContactWizard/useViewContactWizard.js

@@ -0,0 +1,212 @@
+import { useState, useCallback, useRef } from 'react';
+
+import { contactApi, UpdateContactNamesRequest } from '../../api/contactApi';
+import { tokenService } from '../../services/TokenService';
+
+const useViewContactWizard = () => {
+  const [state, setState] = useState({
+    step: 'select',
+    selectedContact: null,
+    contactDetails: null,
+    isSubmitting: false,
+    submissionError: null,
+  });
+
+  const abortControllerRef = useRef(null);
+
+  const canProceedToNextStep = useCallback(() => {
+    switch (state.step) {
+      case 'select':
+        return state.selectedContact != null;
+      case 'modify':
+        if (!state.contactDetails) return false;
+        if (
+          !state.contactDetails.firstname ||
+          state.contactDetails.firstname.trim() === ''
+        ) {
+          return false;
+        } else if (
+          !state.contactDetails.lastname ||
+          state.contactDetails.lastname.trim() === ''
+        ) {
+          return false;
+        } else {
+          return true;
+        }
+      // Nickname is optional, so we don't validate it
+      case 'confirm':
+        return true;
+      default:
+        return false;
+    }
+  }, [state.step, state.selectedContact, state.contactDetails]);
+
+  const canGoBack = state.step !== 'select';
+
+  const setContactDetails = (newDetails) => {
+    console.log('Setting contact details:', newDetails);
+    setState((prev) => ({
+      ...prev,
+      contactDetails: { ...prev.contactDetails, ...newDetails },
+    }));
+  };
+
+  const onSelectedContact = (contact) => {
+    const contactId = contact.id;
+
+    setState((prev) => ({
+      ...prev,
+      selectedContact:
+        prev.selectedContact?.id === contactId
+          ? null
+          : {
+              id: contactId,
+              firstname: contact.firstname,
+              lastname: contact.lastname,
+              phone_number: contact.phone_number,
+              user_id: contact.user_id,
+              nickname: contact.nickname || '',
+            },
+    }));
+  };
+
+  const nextStep = () => {
+    if (!canProceedToNextStep()) return;
+
+    const stepOrder = ['select', 'modify', 'confirm', 'result'];
+    const currentIndex = stepOrder.indexOf(state.step);
+
+    if (currentIndex < stepOrder.length - 1) {
+      const nextStepValue = stepOrder[currentIndex + 1];
+
+      // When moving from select to modify, initialize contactDetails with selected contact
+      if (
+        state.step === 'select' &&
+        nextStepValue === 'modify' &&
+        state.selectedContact
+      ) {
+        setState((prev) => ({
+          ...prev,
+          step: nextStepValue,
+          submissionError: null,
+          contactDetails: {
+            firstname: prev.selectedContact.firstname || '',
+            lastname: prev.selectedContact.lastname || '',
+            nickname: prev.selectedContact.nickname || '',
+            phone_number: prev.selectedContact.phone_number || '',
+            id: prev.selectedContact.id,
+            user_id: prev.selectedContact.user_id,
+          },
+        }));
+        return;
+      }
+
+      setState((prev) => ({
+        ...prev,
+        step: nextStepValue,
+        submissionError: null,
+      }));
+    }
+  };
+
+  const prevStep = () => {
+    const stepOrder = ['select', 'modify', 'confirm', 'result'];
+    const currentIndex = stepOrder.indexOf(state.step);
+    if (currentIndex > 0) {
+      setState((prev) => ({
+        ...prev,
+        step: stepOrder[currentIndex - 1],
+        submissionError: null,
+      }));
+    }
+  };
+
+  const submit = async () => {
+    if (state.isSubmitting) return;
+
+    abortControllerRef.current = new AbortController();
+
+    setState((prev) => ({
+      ...prev,
+      isSubmitting: true,
+      submissionError: null,
+    }));
+
+    try {
+      console.log('Updating contact');
+
+      const userId = tokenService.getUserId();
+      console.log('Contact details to update: ', state.contactDetails);
+
+      let reqBody = new UpdateContactNamesRequest();
+      reqBody.firstname = state.contactDetails.firstname;
+      reqBody.lastname = state.contactDetails.lastname;
+      reqBody.nickname = state.contactDetails.nickname || ''; // Send empty string if no nickname
+      reqBody.id = state.selectedContact.id;
+      reqBody.user_id = userId;
+
+      const response = await contactApi.updateContactNames(
+        reqBody,
+        tokenService.bearerToken()
+      );
+
+      if (response) {
+        setState((prev) => ({
+          ...prev,
+          step: 'result',
+          isSubmitting: false,
+        }));
+      } else {
+        throw new Error('Failed to update contact');
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        console.log('Submission was aborted');
+        return;
+      }
+
+      setState((prev) => ({
+        ...prev,
+        submissionError: error.message || 'Failed to update contact',
+        isSubmitting: false,
+      }));
+    }
+  };
+
+  const reset = () => {
+    abortControllerRef.current?.abort();
+    setState({
+      step: 'select',
+      selectedContact: null,
+      contactDetails: null,
+      isSubmitting: false,
+      submissionError: null,
+    });
+  };
+
+  const cleanup = () => {
+    abortControllerRef.current?.abort();
+  };
+
+  return {
+    // Getters
+    currentStep: state.step,
+    selectedContact: state.selectedContact,
+    contactDetails: state.contactDetails,
+    isSubmitting: state.isSubmitting,
+    submissionError: state.submissionError,
+    canProceedToNextStep: canProceedToNextStep(),
+    canGoBack,
+
+    // Actions
+    setContactDetails,
+    onSelectedContact,
+    nextStep,
+    prevStep,
+    submit,
+    reset,
+    cleanup,
+  };
+};
+
+export default useViewContactWizard;

src/constants/api.js

@@ -1,2 +1,2 @@
-export const AUTH_API_BASE_URL = 'http://localhost:9080';
+export const AUTH_API_BASE_URL = import.meta.env.VITE_AUTH_URL;
-export const API_BASE_URL = 'http://localhost:8080';
+export const API_BASE_URL = import.meta.env.VITE_API_URL;