Message Center

Description

The Message Center is a feature within the account page that allows users to view and manage messages related to orders, updates, and notifications. This document provides a technical breakdown of the Message Center's implementation, including API integration, message retrieval and handling, UI rendering, and error management.

Purpose

The Message Center enhances user experience by consolidating important notifications in a centralized location. It provides users with easy access to their messages, enables marking messages as read/unread, and maintains consistent error and loading states, ensuring seamless interaction with the platform.

Use Cases

• Retrieve Messages for a User: Fetch customer messages from an API endpoint, handling both cases where messages are present and where there are no messages. Messages are stored in the account store and rendered on the frontend.
• Mark Messages as Read: Allows users to mark selected messages as read, which updates the read state of each message. The action triggers a PUT request to the API, and upon success, it refreshes the list of messages to reflect the changes.
• Error and Loading State Management: Ensures that users are informed if messages fail to load or if an error occurs during message retrieval or read marking. Shows loading indicators while messages are being fetched and updates the UI based on API responses.

Key Features

The primary features of the Message Center include:

• API Integration: Fetches messages based on customer ID and marks them as read using the following endpoints:
  • GET /customers/{customerId}/messages – Retrieves messages.
  • PUT /customers/{customerId}/messages – Marks messages as read.
• Error Handling: Manages and displays error states, logging errors in the store for access during troubleshooting.
• Loading Indicator: A loading indicator is displayed while fetching messages, providing feedback on ongoing actions.
• HTML Parsing for Messages: Renders messages containing HTML or text content, ensuring all message formats display correctly.

Implementation Details

API Integration and Store Actions

The Message Center leverages two primary functions in the account store to handle API calls and manage message data: fetchMessages and markAsReadMessages.

fetchMessages

Fetches messages for a specified customer ID and updates the account store's state.

async fetchMessages(customerId: String) {
  try {
    this.is_messages_fetching = true;
    this.messages_error = null; 

    const response = await useAjaxEcom(
      `/customers/${customerId}/messages`,
      { method: "get" }
    );

    if (response.success && response.messages) {
      this.messages = response.messages;
    } else {
      this.messages = [];
      this.messages_error = response.error || "Unknown error occurred"; 
    }
  } catch (error) {
    this.messages = [];
    this.messages_error = error.message || "Error fetching messages"; 
  } finally {
    this.is_messages_fetching = false; 
  }
}

Parameters:

• customerId: The unique identifier for the customer whose messages are being fetched.

Functionality:

• Sets is_messages_fetching to true to show a loading indicator.
• Clears any previous errors.
• Calls the API to retrieve messages for the specified customerId.
• Updates the store's messages state with the retrieved data or handles cases where no messages are returned.
• If an error occurs, updates messages_error with the error message.
• Ends with is_messages_fetching set to false to hide the loading indicator.

markAsReadMessages

Marks selected messages as read for a given customer.

async markAsReadMessages(customerId: String, messageIds: Array<string>) {
  try {
    this.is_messages_fetching = true;
    this.messages_error = null; 
    const body = { message_ids: messageIds };

    const response = await useAjaxEcom(
      `/customers/${customerId}/messages`,
      {
        method: "put",
        params: body
      }
    );

    if (!response) {
      await this.fetchMessages(customerId);
    } else {
      this.messages_error = response.error || "Unknown error occurred"; 
    }
  } catch (error) {
    this.messages = [];
    this.messages_error = error.message || "Error fetching messages"; 
  } finally {
    this.is_messages_fetching = false; 
  }
}

Parameters:

• customerId: The customer’s unique identifier.
• messageIds: An array of message IDs to be marked as read.

Functionality:

• Sets is_messages_fetching to true to display a loading state.
• Clears any previous error messages.
• Sends a PUT request with selected message IDs to mark them as read.
• If successful, re-fetches messages to update the read state in the UI.
• Handles any errors by setting messages_error.
• Ends by setting is_messages_fetching to false, hiding the loading indicator.

Helper Functions

• getDescription: Parses HTML tags in message content, converting them to structured text elements.
• formatMessageTime: Converts UNIX timestamps into human-readable formats (e.g., "15 minutes ago").
• getHyperlinkText: Extracts hyperlinks and relevant text from message content, providing users with actionable links.

Acceptance Criteria

• Users can fetch messages relevant to their account, with each message displaying accurate content.
• Users can mark messages as read, with the UI updating accordingly.
• Proper error handling for scenarios where messages fail to load.
• Loading indicators should be visible during API calls for message retrieval and status updates.