Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/cart-summary.

When to use it

Use CartSummary when the page needs a clear itemized view of what the customer is buying plus the financial breakdown around it. It works in drawers, cart pages, and checkout review steps.

Choose read-only mode for review surfaces. Add handlers only when the summary truly needs to act like an editing surface.

Composition notes

The component combines three concerns: line items, pricing totals, and optional cart actions. Keep all three connected to the same cart state so quantity, promo discounts, shipping, and totals never drift apart.

If the layout already has a dedicated promo-code area or quantity editor, avoid duplicating those controls inside the summary.

Behavior and theming guidance

Use this component to reduce decision friction, not add more. Keep totals easy to scan and make any discount state obvious.

The summary already has a strong structural treatment, so prefer tuning spacing and container placement around it before rewriting the internal sections.

Review notes

These notes define scoped usage boundaries without claiming exact prop or runtime truth beyond SDK package reference.

CartSummary stays focused on line items, totals, and optional cart actions. The component can present normalized cart data, but the app still owns the live backend, locale/runtime context, and any checkout handoff policy.

• Attach the live cart runtime at EnadProvider, then use Cart adapters to choose the shipped Brink or mock path, or to keep a custom backend behind the public CartAdapter seam.
• Keep locale, cookies, and shopper identity in the app shell so totals, formatting, and cart actions inherit a consistent runtime boundary from Runtime adapters.
• If the surrounding layout already owns promo codes, quantity editing, or checkout flow logic, compose around the summary instead of duplicating those responsibilities inside it.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=CartSummary.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes