Cart Action

Overview

Composable Action Path: composables/useCart/useCartApi.ts
API Route: PUT /api/carts/[cartId]

Detailed Description

The updateCart action is a fundamental component of the cart management system, allowing users to modify the core properties of an existing cart. This action is essential for maintaining cart data integrity and providing a flexible shopping experience.

The action is particularly important in scenarios where users need to:

• Update cart name
• Change cart type (CART/BUYING_LIST)

Process Flow

sequenceDiagram
    participant U as User
    participant C as Vue Component
    participant UC as useCart
    participant S as Store Pinia
    participant A as API
    participant Auth as Auth Service

    U->>C: Update cart request
    C->>UC: updateCart(params)
    UC->>Auth: Check authentication
    Auth-->>UC: Auth status

    alt Success
        UC->>A: PUT /api/carts/[cartId]
        A-->>UC: Cart data
        UC->>S: Update store
        S-->>C: Update UI
        C-->>U: Success notification
    else Error
        UC->>A: PUT /api/carts/[cartId]
        A-->>UC: Error response
        UC-->>C: Error handling
        C-->>U: Error notification
    end

Call Parameters

Main Interface

interface UpdateCartRequest {
  cartId: string; // Required - Cart identifier
  name: string; // Required - Cart name
  type: CartTypeDto; // Required - Cart type
}

Detailed Parameters

CartTypeDto Enum

type CartTypeDto = 'CART' | 'BUYING_LIST';

Example Call

const { updateCart } = useCart();

await updateCart({
  cartId: 'cart-123',
  name: 'My Updated Cart',
  type: 'CART',
});

Composable Returns

Response Interface

// The function returns void
// No response data is returned

Success Response Format

{
  "success": true
}

Error Handling

Error Types

1. 401 Unauthorized

   • Cause: Invalid or expired authentication token
   • Action: Redirect to login page
   • Message: "Authentication required"
   • Format: { success: false, error: "Authentication required" }

2. 400 Bad Request

   • Cause: Invalid parameters or validation failure
   • Action: Display validation error
   • Message: "Invalid cart data"
   • Format: { success: false, error: "Invalid cart data" }

3. 404 Not Found

   • Cause: Cart not found
   • Action: Display error and redirect to cart list
   • Message: "Cart not found"
   • Format: { success: false, error: "Cart not found" }

4. 500 Internal Server Error

   • Cause: Server-side error
   • Action: Display generic error
   • Message: "Internal server error"
   • Format: { success: false, error: "Internal server error" }

Error Handling Example

try {
  await updateCart({
    cartId: 'cart-123',
    name: 'Updated Cart',
    type: 'CART',
  });
} catch (error) {
  if (error.statusCode === 401) {
    navigateTo('/login');
  } else if (error.statusCode === 404) {
    showError('Cart not found');
    navigateTo('/carts');
  } else {
    showError('An error occurred while updating the cart');
  }
}

Use Cases

1. Cart Management

   • Updating cart name for better organization
   • Changing cart type between CART and BUYING_LIST
   • Maintaining cart metadata

2. Cart Customization

   • Personalizing cart display
   • Setting cart preferences
   • Managing cart settings

3. Cart Workflow

   • Managing cart lifecycle
   • Handling cart transitions
   • Updating cart properties

Important Points

Performance

• Optimized API calls
• Efficient store updates
• Minimal data transfer
• Caching strategy

Security

• Authentication required
• Account-level access control
• Data validation
• Secure parameter handling

Flexibility

• Multiple update options
• Customizable cart properties
• Extensible interface
• Future-proof design

Integration

• Seamless store integration
• Real-time updates
• Error handling
• State management

Technical Implementation

export const useCart = () => {
  const updateCart = async (params: UpdateCartRequest): Promise<UpdateCartResponse> => {
    try {
      // Authentication check
      if (!isAuthenticated()) {
        throw new Error('Authentication required');
      }

      // API call
      const response = await $fetch<UpdateCartResponse>(`/api/carts/${params.cartId}`, {
        method: 'PUT',
        body: params,
      });

      // Store update
      if (response.success) {
        cartStore.updateCart(response.data);
      }

      return response;
    } catch (error) {
      handleError(error);
      throw error;
    }
  };

  return {
    updateCart,
  };
};

Execution Flow

1. Initial Call

   TypeScript

   const { updateCart } = useCart();

2. Authentication Check

   • Verify user is authenticated
   • Validate token
   • Check permissions

3. API Call

   • Prepare request parameters
   • Send PUT request
   • Handle response

4. Response Handling

   • Process success response
   • Update store
   • Handle errors

5. Error Management

   • Catch exceptions
   • Process error types
   • Update UI
   • Handle redirects