Cart Page¶

The CartPage acts as the user's staging area for purchasing products. Because Socon-MKT operates as a peer-to-peer social marketplace, the cart behaves differently than traditional e-commerce platforms. Instead of a single checkout gateway, items are grouped by individual sellers, and "checkout" is initiated via direct chat negotiations.

The page is constrained to a readable maximum width of 760px and is designed for a highly responsive mobile and desktop experience.

Component Architecture¶

The cart view breaks down complex, paginated data into logical, seller-based groupings.

1. CartPage (Main Wrapper)¶

This component fetches the raw, paginated cart data and performs heavy data transformation on the client side.

Data Grouping (groupedCart): Uses a useMemo hook to iterate over the flattened infinite list of cart items and groups them by sellerId. This ensures that even if a user adds items from the same seller at different times, they appear together in the UI.
Total Estimation (grandTotal): Calculates the total cost of all items in the cart.
Summary Card: A sticky right-rail (on desktop) or bottom block (on mobile) that displays the total estimate, reminding the user that shipping fees and final negotiations happen per seller.
Empty & Error States: Provides fallback UI if the cart is empty or if the network request fails.

2. CartItem¶

Renders a specific group of products belonging to a single seller.

Seller Header: Displays the seller's avatar, business title, and verification badge, linking directly to their store profile.
Product List: Maps through the items array for that specific seller, rendering the product image, title, and a customized "Soko Price Tag".
Action - Remove Item: Allows users to remove a product from their cart via the useDeleteCart mutation.
Action - Message Seller: Acts as the "checkout" button for this specific seller. It triggers the useFetchChatId hook to initiate a chat room using the first product in the group as the context, then dynamically redirects the user to the inbox/:chatId route.

State Management & Optimistic UI¶

The cart relies on @tanstack/react-query to handle pagination, state synchronization, and immediate UI feedback.

Infinite Scrolling (useInfiniteFetchCart): Uses a sentinel div monitored by react-intersection-observer to seamlessly fetch the next cursor-based page of cart items as the user scrolls.
Optimistic Deletions (useDeleteCart): When a user removes an item, the UI updates instantly. The mutation intercepts the active query cache, manually filters out the deleted productId from the deeply nested infinite pages array, and updates the screen before the server even responds. If the backend request fails, it automatically rolls back to the previous state.

API Endpoints & Data Structures¶

The cart leverages four specific endpoints via the globally configured Axios authApi instance.

(Note: Deletion uses a POST request to a specific action endpoint rather than a standard DELETE method).

1. Fetch Cart (Infinite)¶

Retrieves the paginated list of items currently in the user's cart.

Endpoint: GET /posts/cart/
Query Parameters: c (Cursor string for pagination)
Authorization: Required (Bearer Token)

Response Structure (CartResponse):

{
  "next": "url_string | null",
  "previous": "url_string | null",
  "results": [
    {
      "id": "string",
      "created_at": "ISO 8601 string",
      "user": {
        "profile_pic": "string | null"
      },
      "product_obj": {
        "id": "string",
        "title": "string | null",
        "price": "string | null",
        "category": "string | null",
        "unit": "string | null",
        "created_at": "ISO 8601 string",
        "updated_at": "ISO 8601 string",
        "author": {
          "id": "string",
          "username": "string",
          "email": "string",
          "profile": {
            "profile_id": "string",
            "profile_pic": "string | null",
            "seller_profile": {
              "id": "string",
              "business_title": "string",
              "category": ["string"],
              "is_verified": true,
              "business_logo": "string | null"
            }
          }
        },
        "media": [
          {
            "id": "string",
            "file": "string_url",
            "media_type": "image | video",
            "name": "string",
            "size": "string",
            "width": 1080,
            "height": 1080,
            "thumbnail": "string_url | null"
          }
        ]
      }
    }
  ]
}

2. Add Item to Cart¶

Adds a new product to the user's cart.

Endpoint: POST /posts/cart/
Payload:
```
{
  "product": "product_id_string"
}
```
Authorization: Required (Bearer Token)

3. Remove Item from Cart¶

Removes a specific product from the cart.

Endpoint: POST /posts/cart/delete_cart/
Payload:
```
{
  "productId": "product_id_string"
}
```
Authorization: Required (Bearer Token)

4. Initiate Checkout Chat¶

Creates or retrieves an existing chat session with the seller regarding a specific product.

Endpoint: POST /chat/confirm_chat/
Payload:
```
{
  "productId": "product_id_string"
}
```
Authorization: Required (Bearer Token)
Response Structure (ChatIdReponse):
```
{
  "chatId": "string"
}
```