Update versions (#24)

Reviewed-on: phoenix/textsender#24
Co-authored-by: phoenix <mail@kundeng.us>
Co-committed-by: phoenix <mail@kundeng.us>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "textsender",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,19 +12,19 @@
     "format:check": "npx prettier --check ."
   },
   "dependencies": {
-    "react": "^19.2.3",
+    "react": "^19.2.5",
-    "react-dom": "^19.2.3",
+    "react-dom": "^19.2.5",
-    "react-router-dom": "^7.10.1"
+    "react-router-dom": "^7.14.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.39.4",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^6.0.1",
-    "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.0.8"
   }
 }

src/api/contactApi.js

@@ -7,6 +7,14 @@ export class CreateContactRequest {
   user_id = '';
 }
 
+export class UpdateContactNamesRequest {
+  first_name = '';
+  last_name = '';
+  nickname = '';
+  contact_id = '';
+  user_id = '';
+}
+
 export const contactApi = {
   getContactsWithUserId: async (userId, authBearerToken) => {
     console.log('Fetching contacts');
@@ -55,4 +63,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/components/Dashboard.jsx

@@ -1,18 +1,20 @@
 import { useState } from 'react';
 
 import AddContact from './AddContact';
-import ViewContact from './ViewContact';
+// import ViewContact from './ViewContact';
 import ViewSentMessages from './ViewSentMessages';
 
 import './Dashboard.css';
 import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
+import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
 
 const Dashboard = () => {
   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 [isPopupOpen, setIsPopupOpen] = useState(false);
 
   const handleAddContactClick = () => {
     setShowContactForm(true);
@@ -36,6 +38,14 @@ const Dashboard = () => {
     setIsWizardOpen(false);
   };
 
+  const handleViewWizardComplete = () => {
+    setIsViewContactWizardOpen(false);
+  };
+
+  const handleViewWizardClose = () => {
+    setIsViewContactWizardOpen(false);
+  };
+
   const handleNavClick = (view) => {
     setActiveView(view);
   };
@@ -121,7 +131,7 @@ const Dashboard = () => {
 
             <button
               className="dashboard-btn tertiary"
-              onClick={() => setIsPopupOpen(true)}
+              onClick={() => setIsViewContactWizardOpen(true)}
               style={{
                 padding: '12px 24px',
                 background: '#667eea',
@@ -136,9 +146,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/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.first_name || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.first_name || '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.last_name || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.last_name || '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({
+    first_name: '',
+    last_name: '',
+    nickname: '',
+  });
+
+  // Initialize form with contactDetails when component mounts or contactDetails changes
+  useEffect(() => {
+    if (contactDetails) {
+      setFormData({
+        first_name: contactDetails.first_name || '',
+        last_name: contactDetails.last_name || '',
+        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="first_name" className={styles.formLabel}>
+          First Name
+          <span className={styles.requiredIndicator}>*</span>
+        </label>
+        <div className={styles.inputContainer}>
+          <input
+            type="text"
+            id="first_name"
+            name="first_name"
+            value={formData.first_name}
+            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="last_name" className={styles.formLabel}>
+          Last Name
+          <span className={styles.requiredIndicator}>*</span>
+        </label>
+        <div className={styles.inputContainer}>
+          <input
+            type="text"
+            id="last_name"
+            name="last_name"
+            value={formData.last_name}
+            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.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.last_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.nickname?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatContactDisplay = (contact) => {
+    const phone = contact.phone_number || 'No phone';
+    const name =
+      [contact.first_name, contact.last_name].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.first_name?.[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.first_name, contact.last_name]
+                    .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.first_name ||
+          state.contactDetails.first_name.trim() === ''
+        ) {
+          return false;
+        } else if (
+          !state.contactDetails.last_name ||
+          state.contactDetails.last_name.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,
+              first_name: contact.first_name,
+              last_name: contact.last_name,
+              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: {
+            first_name: prev.selectedContact.first_name || '',
+            last_name: prev.selectedContact.last_name || '',
+            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.first_name = state.contactDetails.first_name;
+      reqBody.last_name = state.contactDetails.last_name;
+      reqBody.nickname = state.contactDetails.nickname || ''; // Send empty string if no nickname
+      reqBody.contact_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;