tsk-10: Edit Contact (#23)
Closes #10 Reviewed-on: phoenix/textsender#23 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
This commit is contained in:
phoenix
@@ -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();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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
|
||||
isOpen={isPopupOpen}
|
||||
onClose={() => setIsPopupOpen(false)}
|
||||
<ViewContactWizardModal
|
||||
isOpen={isViewContactWizardOpen}
|
||||
onClose={handleViewWizardClose}
|
||||
onComplete={handleViewWizardComplete}
|
||||
title="Item List"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user