Skip to main content

Commerce, Cart, Delivery, And Vendors

Quick Answer​

Commerce apps combine several core modules: src/core/cart, src/core/payments, src/core/delivery, and src/core/vendor. Together they power cart management, checkout, order placement, vendor/category browsing, vendor admin flows, and delivery tracking.

Treat checkout as a transaction flow. UI state, payment confirmation, order writes, vendor assignment, and delivery status must stay consistent.

Source Map​

src/core/cart
|-- api
|-- components
|-- hooks
|-- redux
`-- ui

src/core/delivery
|-- IMDelivery
|-- IMOrderTrackingScreen
|-- IMPlacingOrderModal
|-- api
|-- hooks
`-- redux

src/core/vendor
|-- admin
|-- api
|-- components
|-- hooks
|-- redux
`-- ui

Cart And Checkout​

The cart module handles:

  • cart item state;
  • edit cart modal;
  • checkout screen;
  • selected payment method;
  • shipping address;
  • placing orders through the active backend.

Checkout usually depends on:

  • src/core/payments for payment method setup;
  • src/core/delivery for order tracking;
  • app config for currency, merchant, and provider settings;
  • backend validation for totals and inventory.

Vendors​

The vendor module handles:

  • categories;
  • vendor lists;
  • single vendor detail;
  • vendor filters;
  • vendor map views;
  • vendor mutations;
  • admin/vendor owner flows when enabled.

Vendor data should be scoped carefully. A vendor owner should not be able to edit another vendor's data.

Delivery​

The delivery module handles:

  • placing order modal;
  • order tracking screen;
  • driver/vendor delivery UI;
  • route/directions helpers;
  • single order subscription;
  • delivery status state.

If live tracking is enabled, review map costs, location permissions, Firestore read/write frequency, and background behavior.

Order Lifecycle Checklist​

A production commerce app should define these states clearly:

cart -> checkout -> payment pending -> paid -> order placed
-> accepted -> preparing -> picked up -> delivered -> completed/canceled

Keep payment status and order status separate. A failed payment should not create a paid order.

Verification Checklist​

Test:

  • add item to cart;
  • edit quantity;
  • remove item;
  • shipping address capture;
  • card checkout;
  • PayPal checkout if enabled;
  • cash on delivery if enabled;
  • order persistence;
  • vendor receives/loads order if applicable;
  • delivery tracking opens;
  • order cancellation/failure path;
  • duplicate submit protection.

Troubleshooting​

ProblemFix
Cart total is wrongRecalculate totals server-side and compare with client display.
Payment succeeds but order is missingCheck order persistence after payment confirmation.
Order appears twiceAdd idempotency/order locking and disable repeated submit while processing.
Vendor list is emptyCheck vendor collection, category filters, and Firestore rules.
Delivery map is blankCheck map setup, API keys, location permissions, and order coordinates.