Seller Profile Page

The SellerProfilePage is a dual-purpose interface on Socon-MKT. For regular users, it acts as a public storefront displaying a merchant's products, reviews, and business policies. For the merchant themselves, it conditionally unlocks private tabs to manage active orders and edit their business details.

The page utilizes a maximum width of 1280px and features a responsive grid layout, prioritizing a tabbed interface alongside a sticky metadata sidebar for desktop users.

Component Architecture

The profile aggregates several highly specialized tabs to organize merchant data effectively.

1. SellerProfileHeader

Renders the visual identity of the storefront.

  • Visuals: Displays the cover image, business logo (which can be clicked to view in a full-screen lightbox), and verification badges.
  • Dynamic Actions: Analyzes the seller.is_own boolean. If false, it displays the standard "Follow" button. If true, it displays an "Edit Business" button, which triggers the EditSellerProfile modal overlay.
  • Metrics: Displays aggregated statistics including total followers, total sales, and the average star rating.

2. Tabbed Interface

The layout conditionally renders specific sub-components based on the active tab and the user's permissions:

  • ProductsProfileTab: An infinitely scrolling grid of the seller's active product listings. Displays thumbnail previews, title, and formatted pricing.
  • ReviewsTab: An infinitely scrolling list of verified buyer reviews. Includes a visually distinct summary card at the top displaying the average rating and total review count.
  • SellerOrdersTab (Private): Rendered only if seller.is_own is true. This is the merchant's operational dashboard, displaying active negotiations and purchases.
  • SellersAbout: A text-heavy tab detailing the merchant's biography, structured delivery zones/fees, payment methods, and standard terms and conditions.

3. Order Management & Alerts (SellerOrdersTab)

When the merchant is viewing their own orders, they are provided with administrative controls.

  • Status Updates: Features a <select> dropdown mapped to the platform's standard Deal Steps (NEGOTIATING, AGREED, DELIVERING, COMPLETED). Changing this triggers a backend status update.
  • OrderAlertModal: If a transaction goes sour (e.g., a buyer becomes unresponsive), the merchant can click the "🚩 Alert Admin" button. This opens a modal where they can submit a textual report tied directly to the orderId for the Socon-MKT moderation team to review.

State Management & Optimistic UI

Because merchants need their dashboard to feel instantaneous, the order management tab heavily utilizes cache manipulation via @tanstack/react-query.

  • Optimistic Order Updates (useUpdateOrderStatus): When a merchant changes an order's status from the dropdown, the mutation immediately intercepts the cache. It iterates through the paginated ["seller_order"] array, locates the specific orderId, and updates its status locally before the server responds. If the request fails, the cache rolls back to its previous state.
  • Infinite Scrolling: The Products, Reviews, and Orders tabs all independently utilize the react-intersection-observer sentinel to fetch their respective cursor-based pages, keeping the initial payload lightweight.

API Endpoints & Data Structures

The profile utilizes multiple specific endpoints via the authApi Axios instance to segregate public data from private operational data.

1. Retrieve & Update Profile

Fetches the high-level storefront details and determines ownership permissions.

  • Endpoint: GET /users/retrieve_seller/:sellerId/
  • Update Endpoint: PATCH /users/retrieve_seller/:sellerId/
  • Authorization: Required (Bearer Token)
  • Response Structure (DetailedSellerProfile): 
    {
  "id": "string",
  "business_title": "string",
  "is_verified": true,
  "is_activated": true,
  "created_at": "ISO 8601 string",
  "is_following": false,
  "business_logo": "string_url | null",
  "payment": "string | null",
  "category": ["string"],
  "delivery": [
    {
      "area": "string",
      "fees": "string"
    }
  ],
  "about": "string | null",
  "terms": "string | null",
  "location": "string | null",
  "total_followers": 150,
  "total_sales": 45,
  "rating": "4.8",
  "is_own": false,
  "profile": { /* BaseProfile Object */ }
}

2. Fetch Seller Products (Infinite)

  • Endpoint: GET /posts/seller_product/
  • Query Parameters: sellerId, c (cursor)

3. Fetch Seller Reviews (Infinite)

  • Endpoint: GET /posts/review/
  • Query Parameters: sellerId, c (cursor)

4. Fetch & Update Seller Orders (Infinite - Private)

Retrieves the list of active orders. Only succeeds if the authenticated user is the merchant.

  • Endpoint: GET /posts/seller_order/
  • Update Endpoint: PATCH /posts/seller_order/:orderId/
  • Payload (Patch): 
    {
  "status": "NEGOTIATING | AGREED | DELIVERING | COMPLETED"
}

5. Alert Admin

Submits a moderation request for a specific order.

  • Endpoint: POST /posts/order_alert/
  • Payload (OrderAlertRequest): 
    {
  "order": "order_id_string",
  "text": "string"
}