tsk-6: Send Message (#22)

Closes #6

Reviewed-on: phoenix/textsender#22
Co-authored-by: phoenix <kundeng00@pm.me>
Co-committed-by: phoenix <kundeng00@pm.me>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "textsender",
-  "version": "0.0.0",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "textsender",
-      "version": "0.0.0",
+      "version": "0.0.3",
       "dependencies": {
         "react": "^19.2.3",
         "react-dom": "^19.2.3",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "textsender",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -4,9 +4,11 @@ import {
   Route,
   Navigate,
 } from 'react-router-dom';
+
 import Dashboard from './components/Dashboard';
 import Login from './components/Login';
 import Register from './components/Register';
+
 import './App.css';
 
 function App() {
@@ -17,16 +19,6 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
-        {/* Add other routes as needed */}
-        <Route
-          path="/login"
-          element={
-            <div className="login-placeholder">
-              <h1>Login Page</h1>
-              <p>This would be your login page</p>
-            </div>
-          }
-        />
       </Routes>
     </Router>
   );

src/api/contactApi.js

@@ -0,0 +1,58 @@
+import { API_BASE_URL } from '../constants/api';
+
+export class CreateContactRequest {
+  first_name = '';
+  last_name = '';
+  phone_number = '';
+  user_id = '';
+}
+
+export const contactApi = {
+  getContactsWithUserId: async (userId, authBearerToken) => {
+    console.log('Fetching contacts');
+    const response = await fetch(
+      `${API_BASE_URL}/api/v1/contact?user_id=${userId}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: authBearerToken,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw new Error('Session expired. Please log in again.');
+      } else if (response.status === 404) {
+        console.log('No contacts associated with user');
+        throw new Error('No contacts associated with user');
+      } else {
+        throw new Error(`Failed to fetch contacts: ${response.status}`);
+      }
+    } else {
+      return response.json();
+    }
+  },
+
+  createContact: async (contact, authBearerToken) => {
+    const response = await fetch(`${API_BASE_URL}/api/v1/contact/new`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(contact),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(
+        errorData.message ||
+          `Failed to create contact. Status: ${response.status}`
+      );
+    } else {
+      return response.json();
+    }
+  },
+};

src/api/loginApi.js

@@ -0,0 +1,22 @@
+import { AUTH_API_BASE_URL } from '../constants/api';
+
+export class LoginRequest {
+  username = '';
+  password = '';
+}
+
+export const loginApi = {
+  login: async (request) => {
+    const reponse = await fetch(`${AUTH_API_BASE_URL}/api/v1/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+};

src/api/messageApi.js

@@ -0,0 +1,29 @@
+import { API_BASE_URL } from '../constants/api';
+
+export class CreateMessageRequest {
+  content = '';
+  user_id = '';
+}
+
+export const messageApi = {
+  createMessage: async (requestBody, authBearerToken) => {
+    const response = await fetch(`${API_BASE_URL}/api/v1/message/new`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      if (response.status === 500) {
+        throw new Error('Something went wrong with the system');
+      } else {
+        throw new Error('Failed to create message');
+      }
+    } else {
+      return response.json();
+    }
+  },
+};

src/api/messageEventResponseApi.js

@@ -0,0 +1,30 @@
+import { API_BASE_URL } from '../constants/api';
+
+export const messageEventResponseApi = {
+  getMessageEventResponsesByUserId: async (userId, authBearerToken) => {
+    const response = await fetch(
+      `${API_BASE_URL}/api/v1/schedule/message/event/response?user_id=${userId}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: authBearerToken,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw new Error('Session expired. Please log in again.');
+      } else if (response.status === 404) {
+        console.log('No message event responses associated with user');
+        // setLoading(false);
+        return;
+      } else {
+        throw new Error(`Failed to fetch sent messages: ${response.status}`);
+      }
+    } else {
+      return response.json();
+    }
+  },
+};

src/api/registerApi.js

@@ -0,0 +1,24 @@
+import { AUTH_API_BASE_URL } from '../constants/api';
+
+export class RegisterRequest {
+  phone_number = '';
+  firstname = '';
+  password = '';
+}
+
+export const registerApi = {
+  registerUser: async (request) => {
+    const response = await fetch(`${AUTH_API_BASE_URL}/api/v1/register`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+
+    if (response.ok) {
+      return response.json();
+    } else {
+      console.error('Error registering');
+      throw new Error('Registration failed');
+    }
+  },
+};

src/api/sendMessageApi.js

@@ -0,0 +1,26 @@
+import { API_BASE_URL } from '../constants/api';
+
+export class SendInstantMessageRequest {
+  contact_ids = [];
+  message_id = '';
+  user_id = '';
+}
+
+export const sendMessageApi = {
+  sendInstantMessage: async (requestBody, authBearerToken) => {
+    const response = await fetch(`${API_BASE_URL}/api/v1/instant/message`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to send instant message');
+    } else {
+      return response.json();
+    }
+  },
+};

src/components/AddContact.jsx

@@ -1,11 +1,8 @@
 import { useState } from 'react';
 
-import { API_BASE_URL } from '../constants/api';
+import { contactApi, CreateContactRequest } from '../api/contactApi';
-import {
+import { tokenService } from '../services/TokenService';
-  DATA_KEY_ACCESS_TOKEN,
+import { DATA_KEY_ADDED_CONTACT_ID } from '../constants/app';
-  DATA_KEY_ADDED_CONTACT_ID,
-  DATA_KEY_USER_ID,
-} from '../constants/app';
 
 import './AddContact.css';
 
@@ -66,33 +63,16 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
     setSubmitError('');
 
     try {
-      const userId = localStorage.getItem(DATA_KEY_USER_ID);
+      const userId = tokenService.getUserId();
-      const accessToken = localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
+      let contact = new CreateContactRequest();
-      const reqBod = {
+      contact.phone_number = formData.phoneNumber;
-        phone_number: formData.phoneNumber,
+      contact.first_name = formData.firstName;
-        first_name: formData.firstName,
+      contact.last_name = formData.lastName;
-        last_name: formData.lastName,
+      contact.user_id = userId;
-        user_id: userId,
+      const result = await contactApi.createContact(
-      };
+        contact,
-      // Send the API request directly from the Contact component
+        tokenService.bearerToken()
-      const response = await fetch(`${API_BASE_URL}/api/v1/contact/new`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${accessToken}`,
-        },
-        body: JSON.stringify(reqBod),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(
-          errorData.message ||
-            `Failed to create contact. Status: ${response.status}`
       );
-      }
-
-      const result = await response.json();
       if (result.data.length > 0) {
         console.log('Contact added');
         const contactId = result.data[0].id;

src/components/Dashboard.jsx

@@ -5,11 +5,13 @@ import ViewContact from './ViewContact';
 import ViewSentMessages from './ViewSentMessages';
 
 import './Dashboard.css';
+import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
 
 const Dashboard = () => {
   const [activeView, setActiveView] = useState('dashboard');
-  const [showContactForm, setShowContactForm] = useState(false);
+  const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false);
+  const [showContactForm, setShowContactForm] = useState(false);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
 
   const handleAddContactClick = () => {
@@ -25,9 +27,13 @@ const Dashboard = () => {
     // 3. Update local state with the new contact
   };
 
-  const handleButtonClick = (buttonNumber) => {
+  const handleWizardComplete = () => {
-    console.log(`Button ${buttonNumber} clicked`);
     // Add your logic here for each button
+    setIsWizardOpen(false);
+  };
+
+  const handleWizardClose = () => {
+    setIsWizardOpen(false);
   };
 
   const handleNavClick = (view) => {
@@ -71,12 +77,18 @@ const Dashboard = () => {
           <div className="button-grid">
             <button
               className="dashboard-btn primary"
-              onClick={() => handleButtonClick(1)}
+              onClick={() => setIsWizardOpen(true)}
             >
-              <span className="btn-text">Choice 1</span>
+              <span className="btn-text">Send Message</span>
-              <span className="btn-hint">Click for action 1</span>
+              <span className="btn-hint">Send a message</span>
             </button>
 
+            <SendMessageWizardModal
+              isOpen={isWizardOpen}
+              onClose={handleWizardClose}
+              onComplete={handleWizardComplete}
+            />
+
             <button
               className="dashboard-btn primary"
               onClick={() => setViewSentMessagesOpen(true)}

src/components/Login.jsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { AUTH_API_BASE_URL } from '../constants/api';
+import { tokenService } from '../services/TokenService';
-import { DATA_KEY_ACCESS_TOKEN, DATA_KEY_USER_ID } from '../constants/app';
+import { loginApi, LoginRequest } from '../api/loginApi';
 
 import './Login.css';
 
-// function Login() {
 const Login = () => {
   const navigate = useNavigate();
   const [formData, setFormData] = useState({
@@ -64,22 +63,16 @@ const Login = () => {
       // Simulate API call
       await new Promise((resolve) => setTimeout(resolve, 1000));
 
-      const reqBod = {
+      let reqBod = new LoginRequest();
-        username: formData.username,
+      reqBod.username = formData.username;
-        password: formData.password,
+      reqBod.password = formData.password;
-      };
+      const response = await loginApi.login(reqBod);
-      const reponse = await fetch(`${AUTH_API_BASE_URL}/api/v1/login`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(reqBod),
-      });
 
-      if (reponse.ok) {
+      if (response) {
-        const response = await reponse.json();
         const loginResult = response.data[0];
         const token = loginResult.access_token;
-        localStorage.setItem(DATA_KEY_ACCESS_TOKEN, token);
+        tokenService.setToken(token);
-        localStorage.setItem(DATA_KEY_USER_ID, loginResult.user_id);
+        tokenService.setUserId(loginResult.user_id);
         alert(`Login successful! Welcome, ${formData.username}`);
         navigate('/dashboard');
       } else {

src/components/Register.jsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
-import { AUTH_API_BASE_URL } from '../constants/api';
 import { DATA_KEY_REGISTERED_USER_ID } from '../constants/app';
+import { registerApi, RegisterRequest } from '../api/registerApi';
 
 import './Register.css';
 
@@ -84,23 +84,16 @@ const Register = () => {
       // Prepare data for API call (remove confirmPassword)
       const { confirmPassword, ...userData } = formData;
 
-      const reqBod = {
+      let reqBod = new RegisterRequest();
-        phone_number: userData.phoneNumber,
+      reqBod.phone_number = userData.phoneNumber;
-        username: userData.username,
+      reqBod.username = userData.username;
-        password: userData.password,
+      reqBod.password = userData.password;
-      };
 
-      const response = await fetch(`${AUTH_API_BASE_URL}/api/v1/register`, {
+      const response = await registerApi.registerUser(reqBod);
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(reqBod),
-      });
 
-      if (response.ok) {
+      if (response) {
         alert('Registration successful! Redirecting to login...');
-        const res = await response.json();
+        localStorage.setItem(DATA_KEY_REGISTERED_USER_ID, response.data[0].id);
-        console.log(`Result: ${res.message}`);
-        localStorage.setItem(DATA_KEY_REGISTERED_USER_ID, res.data[0].id);
         navigate('/login');
       } else {
         console.error('Error registering');

src/components/SendMessageWizard/ConfirmationStep.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import styles from './SendMessageWizard.module.css';
+
+function ConfirmationStep({
+  selectedContacts,
+  createdMessage,
+  message,
+  isSubmitting,
+}) {
+  // In a real app, you might fetch full contact details here
+  // For now, we'll work with just the IDs
+
+  const contactsCount = selectedContacts.length;
+  const messagePreview =
+    message.length > 100 ? `${message.substring(0, 100)}...` : message;
+
+  const getContactListText = () => {
+    if (contactsCount === 0) return 'No contacts selected';
+    if (contactsCount === 1) return '1 contact selected';
+    return `${contactsCount} contacts selected`;
+  };
+
+  return (
+    <div className={styles.confirmationStep}>
+      <div className={styles.confirmationHeader}>
+        <h3>Ready to Send</h3>
+        <p className={styles.confirmationSubtitle}>
+          Review your message and recipients before sending
+        </p>
+      </div>
+
+      <div className={styles.confirmationSections}>
+        {/* Recipients Section */}
+        <div className={styles.confirmationSection}>
+          <div className={styles.sectionHeader}>
+            <span className={styles.sectionIcon}>👥</span>
+            <h4>Recipients</h4>
+          </div>
+          <div className={styles.sectionContent}>
+            <div className={styles.recipientsSummary}>
+              <span className={styles.recipientsCount}>
+                {getContactListText()}
+              </span>
+              {contactsCount > 0 && (
+                <div className={styles.recipientIds}>
+                  <strong>Contact IDs:</strong>
+                  <div className={styles.idList}>
+                    {selectedContacts.map((id, index) => (
+                      <span key={id} className={styles.idTag}>
+                        {id}
+                        {index < selectedContacts.length - 1 && ', '}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Message Section */}
+        <div className={styles.confirmationSection}>
+          <div className={styles.sectionHeader}>
+            <span className={styles.sectionIcon}>💬</span>
+            <h4>Message</h4>
+          </div>
+          <div className={styles.sectionContent}>
+            <div className={styles.messagePreviewContainer}>
+              <div className={styles.messagePreview}>
+                {message || (
+                  <em className={styles.noMessage}>No message entered</em>
+                )}
+              </div>
+              <div className={styles.messageStats}>
+                <div className={styles.statItem}>
+                  <span className={styles.statLabel}>Characters:</span>
+                  <span className={styles.statLabel}>
+                    {createdMessage.content.length}
+                  </span>
+                </div>
+                <div className={styles.statItem}>
+                  <span className={styles.statValue}>
+                    {message.trim() ? message.trim().split(/\s+/).length : 0}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Summary Section */}
+        <div className={styles.confirmationSection}>
+          <div className={styles.sectionHeader}>
+            <span className={styles.sectionIcon}>📊</span>
+            <h4>Summary</h4>
+          </div>
+          <div className={styles.sectionContent}>
+            <div className={styles.summaryStats}>
+              <div className={styles.summaryStat}>
+                <span className={styles.statNumber}>{contactsCount}</span>
+                <span className={styles.statLabel}>Recipients</span>
+              </div>
+              <div className={styles.summaryStat}>
+                <span className={styles.statNumber}>
+                  {message.split('.').length - 1}
+                </span>
+                <span className={styles.statLabel}>Sentences</span>
+              </div>
+              <div className={styles.summaryStat}>
+                <span className={styles.statNumber}>
+                  {Math.ceil(message.length / 160)}
+                </span>
+                <span className={styles.statLabel}>SMS Parts</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Warning/Info Section */}
+        <div className={styles.confirmationNotice}>
+          <div className={styles.noticeIcon}>⚠️</div>
+          <div className={styles.noticeContent}>
+            <strong>Important:</strong> Once sent, messages cannot be recalled.
+            Please double-check your recipients and message content.
+            {isSubmitting && (
+              <div className={styles.sendingNotice}>
+                <div className={styles.sendingSpinner}></div>
+                <span>Sending messages...</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfirmationStep;

src/components/SendMessageWizard/ConfirmationStep.module.css

@@ -0,0 +1,203 @@
+/* Confirmation Step Styles */
+.confirmationStep {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.confirmationHeader {
+  text-align: center;
+}
+
+.confirmationHeader h3 {
+  margin: 0 0 8px 0;
+  color: #111827;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.confirmationSubtitle {
+  margin: 0;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.confirmationSections {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.confirmationSection {
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.sectionIcon {
+  font-size: 20px;
+}
+
+.sectionHeader h4 {
+  margin: 0;
+  color: #374151;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.sectionContent {
+  padding-left: 32px;
+}
+
+.recipientsSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recipientsCount {
+  font-weight: 500;
+  color: #111827;
+}
+
+.recipientIds {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.idList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  font-size: 13px;
+}
+
+.idTag {
+  background-color: #e5e7eb;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Consolas', monospace;
+}
+
+.messagePreviewContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.messagePreview {
+  background-color: white;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  min-height: 80px;
+}
+
+.noMessage {
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.messageStats {
+  display: flex;
+  gap: 16px;
+}
+
+.statItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.statLabel {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.statValue {
+  font-weight: 600;
+  color: #111827;
+}
+
+.summaryStats {
+  display: flex;
+  justify-content: space-around;
+  gap: 16px;
+}
+
+.summaryStat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.statNumber {
+  font-size: 24px;
+  font-weight: 700;
+  color: #3b82f6;
+}
+
+.statLabel {
+  font-size: 12px;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.confirmationNotice {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background-color: #fff7ed;
+  border: 1px solid #fed7aa;
+  border-radius: 8px;
+  color: #9a3412;
+}
+
+.noticeIcon {
+  font-size: 20px;
+}
+
+.noticeContent {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.noticeContent strong {
+  color: #ea580c;
+}
+
+.sendingNotice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+}
+
+.sendingSpinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #f97316;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}

src/components/SendMessageWizard/ContactSelection.jsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import styles from './SendMessageWizard.module.css';
+
+import { tokenService } from '../../services/TokenService';
+import { contactApi } from '../../api/contactApi';
+
+function ContactSelection({ selectedContacts, onToggleContact }) {
+  const [contacts, setContacts] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    const fetchContacts = async () => {
+      try {
+        setIsLoading(true);
+
+        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);
+      }
+    };
+
+    fetchContacts();
+  }, []);
+
+  const filteredContacts = contacts.filter(
+    (contact) =>
+      contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.first_name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleSelectAll = () => {
+    const allContactIds = contacts.map((contact) => contact.id);
+    if (selectedContacts.length === contacts.length) {
+      // Deselect all
+      allContactIds.forEach((id) => {
+        if (selectedContacts.includes(id)) onToggleContact(id);
+      });
+    } else {
+      // Select all
+      allContactIds.forEach((id) => {
+        if (!selectedContacts.includes(id)) onToggleContact(id);
+      });
+    }
+  };
+
+  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 contacts..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className={styles.searchInput}
+          />
+        </div>
+
+        <div className={styles.selectionControls}>
+          <button onClick={handleSelectAll} className={styles.selectAllButton}>
+            {selectedContacts.length === contacts.length
+              ? 'Deselect All'
+              : 'Select All'}
+          </button>
+          <span className={styles.selectionCount}>
+            {selectedContacts.length} of {contacts.length} selected
+          </span>
+        </div>
+      </div>
+
+      <div className={styles.contactsList}>
+        {filteredContacts.length === 0 ? (
+          <p className={styles.noResults}>No contacts found</p>
+        ) : (
+          filteredContacts.map((contact) => (
+            <div
+              key={contact.id}
+              className={`${styles.contactItem} ${
+                selectedContacts.includes(contact.id) ? styles.selected : ''
+              }`}
+              onClick={() => onToggleContact(contact.id)}
+            >
+              <div className={styles.contactCheckbox}>
+                <input
+                  type="checkbox"
+                  checked={selectedContacts.includes(contact.id)}
+                  onChange={() => {}}
+                  readOnly
+                />
+              </div>
+              <div className={styles.contactInfo}>
+                <span className={styles.contactName}>
+                  {contact.phone_number}
+                </span>
+                <span className={styles.contactEmail}>
+                  {contact.first_name}
+                </span>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ContactSelection;

src/components/SendMessageWizard/MessageForm.jsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import styles from './SendMessageWizard.module.css';
+import { tokenService } from '../../services/TokenService';
+import { messageApi, CreateMessageRequest } from '../../api/messageApi';
+
+function MessageForm({ message, onMessageChange, onMessageCreated }) {
+  const [characterCount, setCharacterCount] = useState(message.length);
+  const [isCreatingMessage, setIsCreatingMessage] = useState(false);
+  const [createdMessage, setCreatedMessage] = useState(null);
+
+  const handleMessageChange = (e) => {
+    const newMessage = e.target.value;
+    onMessageChange(newMessage);
+    setCharacterCount(newMessage.length);
+  };
+
+  const createMessage = async () => {
+    if (!message.trim()) {
+      return;
+    }
+
+    setIsCreatingMessage(true);
+    setCreatedMessage(null);
+
+    try {
+      const userId = tokenService.getUserId();
+      let reqBod = new CreateMessageRequest();
+      reqBod.user_id = userId;
+      reqBod.content = message;
+      const response = await messageApi.createMessage(
+        reqBod,
+        tokenService.bearerToken()
+      );
+
+      if (!response) {
+        throw new Error('Failed to create message');
+      } else {
+        const createdMessage = response.data[0];
+        setCreatedMessage(createdMessage);
+        if (onMessageCreated) {
+          console.log('Setting createdMessage');
+          onMessageCreated(createdMessage);
+        }
+        console.log('Created message: ', createdMessage);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsCreatingMessage(false);
+    }
+  };
+
+  return (
+    <div className={styles.messageForm}>
+      <div className={styles.formGroup}>
+        <label htmlFor="message" className={styles.formLabel}>
+          Your Message
+        </label>
+        <textarea
+          id="message"
+          value={message}
+          onChange={handleMessageChange}
+          placeholder="Type your message here..."
+          className={styles.messageTextarea}
+          rows={8}
+        />
+        <div className={styles.textareaFooter}>
+          <span className={styles.characterCount}>
+            {characterCount} characters
+          </span>
+          <button
+            type="button"
+            onClick={createMessage}
+            disabled={isCreatingMessage || !message.trim()}
+            className={styles.testButton}
+          >
+            {isCreatingMessage ? 'Creating message...' : 'Create message'}
+          </button>
+        </div>
+      </div>
+
+      {createdMessage && (
+        <div
+          className={`${styles.createdMessage} ${
+            createdMessage.content ? styles.success : styles.error
+          }`}
+        >
+          {createdMessage.content}
+        </div>
+      )}
+
+      <div className={styles.messageTips}>
+        <h4>Tips:</h4>
+        <ul>
+          <li>Keep messages clear and concise</li>
+          <li>Use [Name] placeholder for personalization</li>
+          <li>Check spelling and grammar</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default MessageForm;

src/components/SendMessageWizard/SendMessageWizard.module.css

@@ -0,0 +1,453 @@
+/* Modal Styles */
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modalHeader {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modalHeader h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 28px;
+  line-height: 1;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+}
+
+.closeButton:hover {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.modalBody {
+  padding: 24px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.modalFooter {
+  padding: 20px 24px;
+  border-top: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+/* Contact Selection Styles */
+.contactSelection {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.selectionHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.searchBox {
+  position: relative;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 10px 16px;
+  padding-left: 40px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.searchInput:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.searchBox::before {
+  content: '🔍';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+}
+
+.selectionControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.selectAllButton {
+  padding: 6px 12px;
+  background-color: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.selectAllButton:hover {
+  background-color: #e5e7eb;
+}
+
+.selectionCount {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.contactsList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.contactItem {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  gap: 12px;
+}
+
+.contactItem:hover {
+  border-color: #3b82f6;
+  background-color: #f8fafc;
+}
+
+.contactItem.selected {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.contactCheckbox {
+  display: flex;
+  align-items: center;
+}
+
+.contactCheckbox input[type='checkbox'] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: #3b82f6;
+}
+
+.contactInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.contactName {
+  font-weight: 500;
+  color: #111827;
+}
+
+.contactEmail {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.noResults {
+  text-align: center;
+  padding: 32px;
+  color: #6b7280;
+  font-style: italic;
+}
+
+/* Loading State */
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  gap: 16px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.errorState {
+  text-align: center;
+  padding: 32px;
+  color: #dc2626;
+}
+
+.errorState button {
+  margin-top: 12px;
+  padding: 8px 16px;
+  background-color: #dc2626;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+/* Message Form Styles */
+.messageForm {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.formLabel {
+  font-weight: 500;
+  color: #374151;
+}
+
+.messageTextarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+  transition: border-color 0.2s;
+}
+
+.messageTextarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.textareaFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.characterCount {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.testButton {
+  padding: 6px 12px;
+  background-color: #10b981;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.testButton:hover:not(:disabled) {
+  background-color: #059669;
+}
+
+.testButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.testResult {
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.testResult.success {
+  background-color: #d1fae5;
+  color: #065f46;
+  border: 1px solid #a7f3d0;
+}
+
+.testResult.error {
+  background-color: #fee2e2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+.messageTips {
+  background-color: #f8fafc;
+  padding: 16px;
+  border-radius: 8px;
+  border-left: 4px solid #3b82f6;
+}
+
+.messageTips h4 {
+  margin: 0 0 8px 0;
+  color: #374151;
+}
+
+.messageTips ul {
+  margin: 0;
+  padding-left: 20px;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.messageTips li {
+  margin-bottom: 4px;
+}
+
+/* Step Navigation */
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navButton {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.navButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.backButton {
+  background-color: white;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.backButton:hover:not(:disabled) {
+  background-color: #f9fafb;
+}
+
+.nextButton {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.nextButton:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.submitButton {
+  background-color: #10b981;
+  color: white;
+}
+
+.submitButton:hover:not(:disabled) {
+  background-color: #059669;
+}
+
+.doneButton {
+  background-color: #8b5cf6;
+  color: white;
+}
+
+.doneButton:hover:not(:disabled) {
+  background-color: #7c3aed;
+}
+
+/* Result Step */
+.resultStep {
+  text-align: center;
+  padding: 32px;
+}
+
+.success {
+  color: #065f46;
+}
+
+.error {
+  color: #dc2626;
+}
+
+.error h3 {
+  margin-top: 0;
+}

src/components/SendMessageWizard/SendMessageWizardModal.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import ContactSelection from './ContactSelection';
+import MessageForm from './MessageForm';
+import ConfirmationStep from './ConfirmationStep';
+import StepNavigation from './StepNavigation';
+import useSendMessageWizard from './useSendMessageWizard';
+import styles from './SendMessageWizard.module.css';
+
+function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
+  const wizard = useSendMessageWizard();
+
+  if (!isOpen) return null;
+
+  const renderStep = () => {
+    switch (wizard.currentStep) {
+      case 'select':
+        return (
+          <ContactSelection
+            selectedContacts={wizard.selectedContacts}
+            onToggleContact={wizard.toggleContact}
+          />
+        );
+      case 'message':
+        return (
+          <MessageForm
+            message={wizard.message}
+            onMessageChange={wizard.setMessage}
+            onMessageCreated={wizard.setCreatedMessage}
+          />
+        );
+      case 'confirm':
+        return (
+          <ConfirmationStep
+            selectedContacts={wizard.selectedContacts}
+            createdMessage={wizard.createdMessage}
+            message={wizard.message}
+            isSubmitting={wizard.isSubmitting}
+          />
+        );
+      case 'result':
+        return (
+          <div className={styles.resultStep}>
+            {wizard.submissionError ? (
+              <div className={styles.error}>
+                <h3>Error Sending Messages</h3>
+                <p>{wizard.submissionError}</p>
+              </div>
+            ) : (
+              <div className={styles.success}>
+                <h3>Messages Sent Successfully!</h3>
+                <p>
+                  Your message has been sent to {wizard.selectedContacts.length}{' '}
+                  contacts.
+                </p>
+              </div>
+            )}
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const handleClose = () => {
+    wizard.reset();
+    onClose();
+  };
+
+  const handleComplete = () => {
+    wizard.reset();
+    onComplete();
+  };
+
+  const stepTitles = {
+    select: 'Select Contacts',
+    message: 'Compose Message',
+    confirm: 'Review & Send',
+    result: 'Result',
+  };
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <div className={styles.modalHeader}>
+          <h2>{stepTitles[wizard.currentStep]}</h2>
+          <button
+            onClick={handleClose}
+            className={styles.closeButton}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </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 SendMessageWizardModal;

src/components/SendMessageWizard/StepNavigation.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styles from './SendMessageWizard.module.css';
+
+function StepNavigation({
+  currentStep,
+  onNext,
+  onBack,
+  onSubmit,
+  onDone,
+  canProceed,
+  canGoBack,
+  isSubmitting,
+  submissionError,
+}) {
+  const renderButtons = () => {
+    switch (currentStep) {
+      case 'select':
+      case 'message':
+        return (
+          <>
+            <button
+              onClick={onBack}
+              disabled={!canGoBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              Back
+            </button>
+            <button
+              onClick={onNext}
+              disabled={!canProceed}
+              className={`${styles.navButton} ${styles.nextButton}`}
+            >
+              {currentStep === 'select' ? 'Next' : 'Review'}
+            </button>
+          </>
+        );
+      case 'confirm':
+        return (
+          <>
+            <button
+              onClick={onBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              Back
+            </button>
+            <button
+              onClick={onSubmit}
+              disabled={isSubmitting}
+              className={`${styles.navButton} ${styles.submitButton}`}
+            >
+              {isSubmitting ? 'Sending...' : 'Send Messages'}
+            </button>
+          </>
+        );
+      case 'result':
+        return (
+          <button
+            onClick={onDone}
+            className={`${styles.navButton} ${styles.doneButton}`}
+          >
+            Done
+          </button>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.navigation}>
+      {renderButtons()}
+      {submissionError && (
+        <span className={styles.error} style={{ color: '#dc2626' }}>
+          {submissionError}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default StepNavigation;

src/components/SendMessageWizard/useSendMessageWizard.js

@@ -0,0 +1,168 @@
+import { useState, useCallback, useRef } from 'react';
+
+import { tokenService } from '../../services/TokenService';
+import {
+  sendMessageApi,
+  SendInstantMessageRequest,
+} from '../../api/sendMessageApi';
+
+const useSendMessageWizard = () => {
+  const [state, setState] = useState({
+    step: 'select',
+    selectedContacts: [],
+    message: '',
+    createdMessage: null,
+    isSubmitting: false,
+    submissionError: null,
+  });
+
+  const abortControllerRef = useRef(null);
+
+  // Computed values
+  const canProceedToNextStep = useCallback(() => {
+    switch (state.step) {
+      case 'select':
+        return state.selectedContacts.length > 0;
+      case 'message':
+        return state.message.trim().length > 0;
+      case 'confirm':
+        return true;
+      default:
+        return false;
+    }
+  }, [state.step, state.selectedContacts.length, state.message]);
+
+  const canGoBack = state.step !== 'select';
+
+  // Actions
+  const toggleContact = (contactId) => {
+    setState((prev) => ({
+      ...prev,
+      selectedContacts: prev.selectedContacts.includes(contactId)
+        ? prev.selectedContacts.filter((id) => id !== contactId)
+        : [...prev.selectedContacts, contactId],
+    }));
+  };
+
+  const setMessage = (message) => {
+    setState((prev) => ({ ...prev, message }));
+  };
+
+  const setCreatedMessage = (message) => {
+    console.log('Setting created message');
+    setState((prev) => ({ ...prev, createdMessage: message }));
+  };
+
+  const nextStep = () => {
+    if (!canProceedToNextStep()) return;
+
+    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    const currentIndex = stepOrder.indexOf(state.step);
+    if (currentIndex < stepOrder.length - 1) {
+      setState((prev) => ({
+        ...prev,
+        step: stepOrder[currentIndex + 1],
+        submissionError: null,
+      }));
+    }
+  };
+
+  const prevStep = () => {
+    const stepOrder = ['select', 'message', '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('Sending message');
+      let reqBod = new SendInstantMessageRequest();
+      reqBod.user_id = tokenService.getUserId();
+      reqBod.message_id = state.createdMessage.id;
+      state.selectedContacts.forEach((selectedContact) => {
+        reqBod.contact_ids.push(selectedContact);
+      });
+      const response = await sendMessageApi.sendInstantMessage(
+        reqBod,
+        tokenService.bearerToken()
+      );
+
+      if (response) {
+        // Success - move to result step
+        setState((prev) => ({
+          ...prev,
+          step: 'result',
+          isSubmitting: false,
+        }));
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        console.log('Submission was aborted');
+        return;
+      }
+
+      setState((prev) => ({
+        ...prev,
+        submissionError: error.message || 'Failed to send messages',
+        isSubmitting: false,
+      }));
+    }
+  };
+
+  const reset = () => {
+    abortControllerRef.current?.abort();
+    setState({
+      step: 'select',
+      selectedContacts: [],
+      message: '',
+      createdMessage: null,
+      isSubmitting: false,
+      submissionError: null,
+    });
+  };
+
+  // Cleanup
+  const cleanup = () => {
+    abortControllerRef.current?.abort();
+  };
+
+  return {
+    // Getters
+    currentStep: state.step,
+    selectedContacts: state.selectedContacts,
+    message: state.message,
+    createdMessage: state.createdMessage,
+    isSubmitting: state.isSubmitting,
+    submissionError: state.submissionError,
+    canProceedToNextStep: canProceedToNextStep(),
+    canGoBack,
+
+    // Actions
+    toggleContact,
+    setMessage,
+    setCreatedMessage,
+    nextStep,
+    prevStep,
+    submit,
+    reset,
+    cleanup,
+  };
+};
+
+export default useSendMessageWizard;

src/components/ViewContact.jsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useCallback } from 'react';
 
-import { API_BASE_URL } from '../constants/api';
+import { DATA_KEY_ACCESS_TOKEN } from '../constants/app';
-import { DATA_KEY_ACCESS_TOKEN, DATA_KEY_USER_ID } from '../constants/app';
+import { tokenService } from '../services/TokenService';
+import { contactApi } from '../api/contactApi';
 
 import './ViewContact.css';
 
@@ -19,42 +20,22 @@ const ViewContact = ({ isOpen, onClose, title = 'View Contacts' }) => {
       setError(null);
 
       const accessToken = localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
-      const userId = localStorage.getItem(DATA_KEY_USER_ID);
+      const userId = tokenService.getUserId();
 
       if (!accessToken) {
         throw new Error('Authentication required. Please log in again.');
       }
 
-      console.log('Fetching contacts');
+      const result = await contactApi.getContactsWithUserId(
-      const response = await fetch(
+        userId,
-        `${API_BASE_URL}/api/v1/contact?user_id=${userId}`,
+        tokenService.bearerToken()
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${accessToken}`,
-          },
-        }
       );
 
-      if (!response.ok) {
-        if (response.status === 401) {
-          throw new Error('Session expired. Please log in again.');
-        } else if (response.status === 404) {
-          console.log('No contacts associated with user');
-          setLoading(false);
-          return;
-        } else {
-          throw new Error(`Failed to fetch contacts: ${response.status}`);
-        }
-      }
-
-      const result = await response.json();
-
       if (result.data) {
         setContacts(result.data);
         setLastUpdated(new Date());
       } else {
+        setLoading(false);
         throw new Error(result.message || 'Failed to load contacts');
       }
     } catch (err) {

src/components/ViewSentMessages.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 
-import { API_BASE_URL } from '../constants/api';
+import { tokenService } from '../services/TokenService';
-import { DATA_KEY_ACCESS_TOKEN, DATA_KEY_USER_ID } from '../constants/app';
+import { messageEventResponseApi } from '../api/messageEventResponseApi';
 
 import './ViewSentMessages.css';
 
@@ -22,43 +22,19 @@ const ViewSentMessages = ({
       setLoading(true);
       setError(null);
 
-      const accessToken = localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
+      const userId = tokenService.getUserId();
-      const userId = localStorage.getItem(DATA_KEY_USER_ID);
+      const response =
-
+        await messageEventResponseApi.getMessageEventResponsesByUserId(
-      if (!accessToken) {
+          userId,
-        throw new Error('Authentication required. Please log in again.');
+          tokenService.bearerToken()
-      }
-
-      const response = await fetch(
-        `${API_BASE_URL}/api/v1/schedule/message/event/response?user_id=${userId}`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${accessToken}`,
-          },
-        }
         );
 
-      if (!response.ok) {
+      if (response) {
-        if (response.status === 401) {
-          throw new Error('Session expired. Please log in again.');
-        } else if (response.status === 404) {
-          console.log('No messages sent associated with user');
-          setLoading(false);
-          return;
-        } else {
-          throw new Error(`Failed to fetch sent messages: ${response.status}`);
-        }
-      }
-
-      const result = await response.json();
-
-      if (result.data) {
         setLastUpdated(new Date());
-        setSentMessages(result.data);
+        setSentMessages(response.data);
       } else {
-        throw new Error(result.message || 'Failed to load sent messages');
+        setLoading(false);
+        throw new Error(response.message || 'Failed to load sent messages');
       }
     } catch (err) {
       setError(err.message || 'Failed to load sent messages.');

src/services/TokenService.jsx

@@ -0,0 +1,25 @@
+import { DATA_KEY_ACCESS_TOKEN, DATA_KEY_USER_ID } from '../constants/app';
+
+class TokenService {
+  getToken() {
+    return localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
+  }
+
+  setToken(token) {
+    localStorage.setItem(DATA_KEY_ACCESS_TOKEN, token);
+  }
+
+  getUserId() {
+    return localStorage.getItem(DATA_KEY_USER_ID);
+  }
+
+  setUserId(userId) {
+    localStorage.setItem(DATA_KEY_USER_ID, userId);
+  }
+
+  bearerToken() {
+    return `Bearer ${this.getToken()}`;
+  }
+}
+
+export const tokenService = new TokenService();