@pradip1995/segment-powerhouse-cart 0.1.1

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@pradip1995/segment-powerhouse-cart",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./src/cart.css"
+  ],
+  "files": [
+    "src",
+    "public"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "@pradip1995/segment-analytics": "^0.2.4",
+    "@pradip1995/segment-primitives": "^0.4.0"
+  },
+  "devDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/cart.css

@@ -0,0 +1,413 @@
+.powerhouse-cart {
+  --layout-container-max-width: 1400px;
+  color: #1d1d1d;
+  padding-bottom: 4rem;
+}
+
+.powerhouse-cart__inner {
+  max-width: var(--layout-container-max-width);
+  margin: 0 auto;
+  padding: 1.5rem 10px 0;
+}
+
+.powerhouse-cart__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.powerhouse-cart__header h1 {
+  margin: 0;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 2.1rem;
+  font-weight: 600;
+  line-height: 1.15;
+}
+
+.powerhouse-cart__continue {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: #1d1d1d;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  text-decoration: none;
+}
+
+.powerhouse-cart__continue:hover {
+  text-decoration: underline;
+}
+
+.powerhouse-cart__layout {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.powerhouse-cart__main {
+  min-width: 0;
+}
+
+.powerhouse-cart__shipping {
+  margin-bottom: 1.5rem;
+}
+
+.powerhouse-cart__shipping p {
+  margin: 0 0 0.65rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+.powerhouse-cart__meter {
+  height: 4px;
+  overflow: hidden;
+  background: #e8e8e8;
+}
+
+.powerhouse-cart__progress {
+  height: 100%;
+  background: #1d1d1d;
+}
+
+.powerhouse-cart__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+  padding: 2rem 1rem 3rem;
+  text-align: center;
+}
+
+.powerhouse-cart__empty p {
+  margin: 0 0 1.25rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 1.05rem;
+}
+
+.powerhouse-cart__empty-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 2.75rem;
+  padding: 0.65rem 1.15rem;
+  border-radius: 2px;
+  background: #1d1d1d;
+  color: #fff;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.powerhouse-cart__empty-btn:hover {
+  background: #000;
+}
+
+.powerhouse-cart__table {
+  width: 100%;
+}
+
+.powerhouse-cart__head {
+  display: none;
+}
+
+.powerhouse-cart__head span {
+  font-family: var(--font-sans, inherit);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #6b6b6b;
+}
+
+.powerhouse-cart__row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.85rem;
+  padding: 1.15rem 0;
+  border-top: 1px solid #e6e6e6;
+}
+
+.powerhouse-cart__row--pending {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.powerhouse-cart__thumb {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+  width: 5.5rem;
+  height: 5.5rem;
+  overflow: hidden;
+  background: #f3f3f3;
+}
+
+.powerhouse-cart__thumb img {
+  object-fit: cover;
+}
+
+.powerhouse-cart__thumb-empty {
+  width: 100%;
+  height: 100%;
+  background: #ececec;
+}
+
+.powerhouse-cart__product {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.powerhouse-cart__copy {
+  min-width: 0;
+}
+
+.powerhouse-cart__title {
+  display: block;
+  color: #1d1d1d;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.35;
+  text-decoration: none;
+}
+
+.powerhouse-cart__title:hover {
+  text-decoration: underline;
+}
+
+.powerhouse-cart__variant,
+.powerhouse-cart__mobile-price {
+  margin: 0.3rem 0 0;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.8125rem;
+  color: #6b6b6b;
+}
+
+.powerhouse-cart__price,
+.powerhouse-cart__total {
+  display: none;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+}
+
+.powerhouse-cart__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-top: 0.75rem;
+}
+
+.powerhouse-cart__qty {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #d0d0d0;
+  border-radius: 2px;
+  background: #fff;
+}
+
+.powerhouse-cart__qty button,
+.powerhouse-cart__qty span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.1rem;
+  min-height: 2.1rem;
+  border: 0;
+  background: transparent;
+  color: #1d1d1d;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+}
+
+.powerhouse-cart__qty button {
+  cursor: pointer;
+}
+
+.powerhouse-cart__qty button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.powerhouse-cart__remove {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #6b6b6b;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.powerhouse-cart__remove:hover {
+  color: #1d1d1d;
+  text-decoration: underline;
+}
+
+.powerhouse-cart__sidebar {
+  min-width: 0;
+}
+
+.powerhouse-cart__promo {
+  margin: 0 0 1rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+}
+
+.powerhouse-cart__promo a {
+  color: #1d1d1d;
+  font-weight: 700;
+}
+
+.powerhouse-cart__promo-image {
+  display: block;
+  width: 100%;
+  max-width: 18rem;
+  height: auto;
+}
+
+.powerhouse-cart__notes label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+}
+
+.powerhouse-cart__notes textarea {
+  width: 100%;
+  min-height: 6.5rem;
+  margin-bottom: 1.25rem;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid #d0d0d0;
+  border-radius: 2px;
+  background: #fff;
+  color: #1d1d1d;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  resize: vertical;
+}
+
+.powerhouse-cart__notes textarea:focus {
+  outline: none;
+  border-color: #1d1d1d;
+}
+
+.powerhouse-cart__totals {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.powerhouse-cart__totals-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+}
+
+.powerhouse-cart__totals-row--discount {
+  color: #1f6b3a;
+}
+
+.powerhouse-cart__tax-note {
+  margin: 0.15rem 0 0.85rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.8125rem;
+  color: #6b6b6b;
+}
+
+.powerhouse-cart__checkout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.85rem;
+  padding: 0.7rem 1.15rem;
+  border-radius: 2px;
+  background: #1d1d1d;
+  color: #fff;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.powerhouse-cart__checkout:hover {
+  background: #000;
+}
+
+@media screen and (min-width: 720px) {
+  .powerhouse-cart__inner {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 2rem;
+  }
+
+  .powerhouse-cart__header h1 {
+    font-size: 2.4rem;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .powerhouse-cart__layout {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 3.5rem;
+  }
+
+  .powerhouse-cart__main {
+    flex: 1;
+  }
+
+  .powerhouse-cart__sidebar {
+    width: 18.5rem;
+    flex-shrink: 0;
+  }
+
+  .powerhouse-cart__head {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 6.5rem 8.5rem 6.5rem;
+    gap: 1rem;
+    padding: 0 0 0.65rem;
+    border-bottom: 1px solid #e6e6e6;
+  }
+
+  .powerhouse-cart__head span:nth-child(2),
+  .powerhouse-cart__head span:nth-child(3),
+  .powerhouse-cart__head span:nth-child(4) {
+    text-align: center;
+  }
+
+  .powerhouse-cart__row {
+    grid-template-columns: minmax(0, 1fr) 6.5rem 8.5rem 6.5rem;
+    align-items: center;
+  }
+
+  .powerhouse-cart__mobile-price {
+    display: none;
+  }
+
+  .powerhouse-cart__price,
+  .powerhouse-cart__total {
+    display: block;
+    text-align: center;
+  }
+
+  .powerhouse-cart__actions {
+    margin-top: 0;
+    justify-content: center;
+  }
+
+  .powerhouse-cart__remove {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,10 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "powerhouse-cart",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "cartPage",
+}
+export default manifest

package/src/segment.tsx

@@ -0,0 +1,320 @@
+"use client"
+
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import { deleteLineItem, updateLineItem } from "@pradip1995/commerce-core/client/actions/cart"
+import {
+  trackCartLineItemQuantityChange,
+  trackCartLineItemRemoved,
+} from "@pradip1995/segment-analytics/cart-line-item-events"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import { resolveMediaUrl } from "@pradip1995/segment-primitives/resolve-media-url"
+import {
+  DEFAULT_CHECKOUT_LABEL,
+  DEFAULT_CONTINUE_HREF,
+  DEFAULT_CONTINUE_LABEL,
+  DEFAULT_EMPTY_BUTTON,
+  DEFAULT_EMPTY_MESSAGE,
+  DEFAULT_FREE_SHIPPING_PREFIX,
+  DEFAULT_FREE_SHIPPING_THRESHOLD,
+  DEFAULT_NOTES_LABEL,
+  DEFAULT_PROMO_HREF,
+  DEFAULT_PROMO_IMAGE,
+  DEFAULT_PROMO_LINK_LABEL,
+  DEFAULT_PROMO_TEXT,
+  DEFAULT_TAX_NOTE,
+  DEFAULT_TITLE,
+  type PowerhouseCartProps,
+} from "./types"
+import "./cart.css"
+
+function isPlaceholderVariant(title?: string | null) {
+  if (!title) return true
+  const normalized = title.toLowerCase()
+  return (
+    normalized === "default" ||
+    normalized.includes("default variant") ||
+    normalized.includes("default option")
+  )
+}
+
+function lineTotal(item: HttpTypes.StoreCartLineItem) {
+  if (typeof item.total === "number") return item.total
+  return (item.unit_price ?? 0) * (item.quantity ?? 1)
+}
+
+function lineItemImage(item: HttpTypes.StoreCartLineItem) {
+  const product = item.product || item.variant?.product || null
+  const firstVariantImage = item.variant?.images?.[0]
+  const candidates = [
+    item.thumbnail,
+    item.variant?.thumbnail,
+    product?.thumbnail,
+    typeof firstVariantImage === "string" ? firstVariantImage : firstVariantImage?.url,
+    product?.images?.[0]?.url,
+  ]
+
+  for (const candidate of candidates) {
+    const resolved = resolveMediaUrl(candidate)
+    if (resolved) return resolved
+  }
+
+  return null
+}
+
+function ContinueArrow() {
+  return (
+    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" aria-hidden>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.7272 5.6364L10.3636 1.27279L11.6364 0L17.2728 5.6364L11.6364 11.2728L10.3636 10L14.7272 5.6364Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 4.73645H16V6.53645H0V4.73645Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+function CartIcon() {
+  return (
+    <svg width="22" height="21" viewBox="0 0 25 24" fill="currentColor" aria-hidden>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.33877C1.61048 2.00005 2.00378 2.23945 2.10939 2.81599L5.01743 18.1859C5.12011 18.7286 5.64325 19.0852 6.18591 18.9826C6.25933 18.9658 6.31389 18.9692 6.34159 18.9692H18.8179C19.0302 18.9691 19.2141 18.9765 19.4075 18.9842C20.0255 19.0043 20.3767 19.0061 20.7177 18.9406C21.08 18.871 21.4685 18.7189 21.8028 18.3961C22.1291 18.081 22.3266 17.6772 22.4479 17.2384L23.944 8.46865C24.2528 7.20993 23.2684 5.99987 21.9896 6H4.74727L4.07666 2.45562C3.83133 1.12381 2.76159 0 1.33889 0H1ZM5.12568 8L6.8227 16.9692H18.8179C19.0686 16.9691 19.3257 16.9793 19.5406 16.9877C20.0684 17.0047 20.2307 16.9976 20.3403 16.9766C20.4059 16.96 20.4639 16.8918 20.5077 16.7487L21.9794 8.09186C21.9908 8.00108 21.989 8H5.12568ZM9.36658 24C10.195 24 10.8666 23.2982 10.8666 22.4326C10.8666 21.567 10.195 20.8653 9.36658 20.8653C8.53815 20.8653 7.86658 21.567 7.86658 22.4326C7.86658 23.2982 8.53815 24 9.36658 24ZM19.5048 22.4326C19.5048 23.2982 18.8332 24 18.0048 24C17.1763 24 16.5048 23.2982 16.5048 22.4326C16.5048 21.567 17.1763 20.8653 18.0048 20.8653C18.8332 20.8653 19.5048 21.567 19.5048 22.4326Z"
+      />
+    </svg>
+  )
+}
+
+function ShippingBar({
+  subtotal,
+  threshold,
+  currency,
+  prefix,
+}: {
+  subtotal: number
+  threshold: number
+  currency: string
+  prefix: string
+}) {
+  const progress = threshold > 0 ? Math.min(100, (subtotal / threshold) * 100) : 0
+  return (
+    <div className="powerhouse-cart__shipping">
+      <p>
+        {prefix} <strong>{formatPrice(threshold, currency)}</strong>!
+      </p>
+      <div className="powerhouse-cart__meter" aria-hidden>
+        <div className="powerhouse-cart__progress" style={{ width: `${progress}%` }} />
+      </div>
+    </div>
+  )
+}
+
+function LineItemRow({
+  item,
+  currency,
+  countryCode,
+}: {
+  item: HttpTypes.StoreCartLineItem
+  currency: string
+  countryCode: string
+}) {
+  const router = useRouter()
+  const [pending, startTransition] = useTransition()
+  const thumbnail = lineItemImage(item)
+  const variantLabel = item.variant?.title
+  const showVariant = Boolean(variantLabel && !isPlaceholderVariant(variantLabel))
+
+  function changeQty(next: number) {
+    if (next < 1 || !item.id) return
+    const previousQuantity = item.quantity ?? 1
+    startTransition(async () => {
+      await updateLineItem({ lineId: item.id, quantity: next })
+      trackCartLineItemQuantityChange(item, currency, previousQuantity, next)
+      router.refresh()
+    })
+  }
+
+  function remove() {
+    if (!item.id) return
+    startTransition(async () => {
+      trackCartLineItemRemoved(item, currency)
+      await deleteLineItem(item.id)
+      router.refresh()
+    })
+  }
+
+  return (
+    <article className={`powerhouse-cart__row${pending ? " powerhouse-cart__row--pending" : ""}`}>
+      <div className="powerhouse-cart__product">
+        <LocalizedLink
+          href={`/products/${item.product_handle}`}
+          countryCode={countryCode}
+          className="powerhouse-cart__thumb"
+        >
+          {thumbnail ? (
+            <Image src={thumbnail} alt={item.title || "Product"} fill sizes="88px" unoptimized />
+          ) : (
+            <div className="powerhouse-cart__thumb-empty" />
+          )}
+        </LocalizedLink>
+        <div className="powerhouse-cart__copy">
+          <LocalizedLink
+            href={`/products/${item.product_handle}`}
+            countryCode={countryCode}
+            className="powerhouse-cart__title"
+          >
+            {item.title}
+          </LocalizedLink>
+          {showVariant ? <p className="powerhouse-cart__variant">{variantLabel}</p> : null}
+          <p className="powerhouse-cart__mobile-price">{formatPrice(item.unit_price, currency)}</p>
+        </div>
+      </div>
+      <p className="powerhouse-cart__price">{formatPrice(item.unit_price, currency)}</p>
+      <div className="powerhouse-cart__actions">
+        <div className="powerhouse-cart__qty">
+          <button
+            type="button"
+            onClick={() => changeQty((item.quantity || 1) - 1)}
+            disabled={pending || (item.quantity ?? 1) <= 1}
+            aria-label="Decrease quantity"
+          >
+            −
+          </button>
+          <span>{item.quantity}</span>
+          <button
+            type="button"
+            onClick={() => changeQty((item.quantity || 0) + 1)}
+            disabled={pending}
+            aria-label="Increase quantity"
+          >
+            +
+          </button>
+        </div>
+        <button type="button" className="powerhouse-cart__remove" onClick={remove} disabled={pending}>
+          Remove
+        </button>
+      </div>
+      <p className="powerhouse-cart__total">{formatPrice(lineTotal(item), currency)}</p>
+    </article>
+  )
+}
+
+export default function PowerhouseCart(props: PowerhouseCartProps) {
+  const countryCode = props.countryCode?.toLowerCase() || "in"
+  const cart = props.cart
+  const items = cart?.items || []
+  const currency = cart?.currency_code || "inr"
+  const subtotal = cart?.subtotal ?? 0
+  const title = props.title || DEFAULT_TITLE
+  const continueLabel = props.continueLabel || DEFAULT_CONTINUE_LABEL
+  const continueHref = props.continueHref || DEFAULT_CONTINUE_HREF
+  const emptyMessage = props.emptyMessage || DEFAULT_EMPTY_MESSAGE
+  const emptyButton = props.emptyButton || DEFAULT_EMPTY_BUTTON
+  const checkoutLabel = props.checkoutLabel || DEFAULT_CHECKOUT_LABEL
+  const notesLabel = props.notesLabel || DEFAULT_NOTES_LABEL
+  const taxNote = props.taxNote || DEFAULT_TAX_NOTE
+  const threshold = props.freeShippingThreshold ?? DEFAULT_FREE_SHIPPING_THRESHOLD
+  const shippingPrefix = props.freeShippingPrefix || DEFAULT_FREE_SHIPPING_PREFIX
+  const promoText = props.promoText ?? DEFAULT_PROMO_TEXT
+  const promoLinkLabel = props.promoLinkLabel || DEFAULT_PROMO_LINK_LABEL
+  const promoHref = props.promoHref || DEFAULT_PROMO_HREF
+  const promoImage = props.promoImage ?? DEFAULT_PROMO_IMAGE
+  const isEmpty = items.length === 0
+
+  return (
+    <section className="powerhouse-cart">
+      <div className="powerhouse-cart__inner">
+        <header className="powerhouse-cart__header">
+          <h1>{title}</h1>
+          <LocalizedLink href={continueHref} countryCode={countryCode} className="powerhouse-cart__continue">
+            {continueLabel}
+            <ContinueArrow />
+          </LocalizedLink>
+        </header>
+
+        <div className="powerhouse-cart__layout">
+          <div className="powerhouse-cart__main">
+            <ShippingBar
+              subtotal={subtotal}
+              threshold={threshold}
+              currency={currency}
+              prefix={shippingPrefix}
+            />
+
+            {isEmpty ? (
+              <div className="powerhouse-cart__empty">
+                <p>{emptyMessage}</p>
+                <LocalizedLink href={continueHref} countryCode={countryCode} className="powerhouse-cart__empty-btn">
+                  <CartIcon />
+                  {emptyButton}
+                </LocalizedLink>
+              </div>
+            ) : (
+              <div className="powerhouse-cart__table">
+                <div className="powerhouse-cart__head">
+                  <span>Product</span>
+                  <span>Price</span>
+                  <span>Quantity</span>
+                  <span>Total</span>
+                </div>
+                {items.map((item) => (
+                  <LineItemRow key={item.id} item={item} currency={currency} countryCode={countryCode} />
+                ))}
+              </div>
+            )}
+          </div>
+
+          <aside className="powerhouse-cart__sidebar">
+            {isEmpty ? (
+              <>
+                {promoText ? (
+                  <p className="powerhouse-cart__promo">
+                    {promoText}{" "}
+                    <LocalizedLink href={promoHref} countryCode={countryCode}>
+                      <strong>{promoLinkLabel}</strong>
+                    </LocalizedLink>
+                  </p>
+                ) : null}
+                {promoImage ? <img src={promoImage} alt="" className="powerhouse-cart__promo-image" /> : null}
+              </>
+            ) : (
+              <>
+                <div className="powerhouse-cart__notes">
+                  <label htmlFor="powerhouse-cart-note">{notesLabel}</label>
+                  <textarea id="powerhouse-cart-note" name="note" rows={4} />
+                </div>
+                <div className="powerhouse-cart__totals">
+                  <div className="powerhouse-cart__totals-row">
+                    <span>Subtotal</span>
+                    <strong>{formatPrice(cart?.subtotal, currency)}</strong>
+                  </div>
+                  {(cart?.discount_total ?? 0) > 0 ? (
+                    <div className="powerhouse-cart__totals-row powerhouse-cart__totals-row--discount">
+                      <span>Discount</span>
+                      <strong>-{formatPrice(cart?.discount_total, currency)}</strong>
+                    </div>
+                  ) : null}
+                </div>
+                <p className="powerhouse-cart__tax-note">{taxNote}</p>
+                <LocalizedLink href="/checkout" countryCode={countryCode} className="powerhouse-cart__checkout">
+                  {checkoutLabel}
+                </LocalizedLink>
+              </>
+            )}
+          </aside>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/types.ts

@@ -0,0 +1,37 @@
+import type { HttpTypes } from "@medusajs/types"
+
+export type PowerhouseCartProps = {
+  cart?: HttpTypes.StoreCart | null
+  countryCode?: string
+  title?: string
+  continueLabel?: string
+  continueHref?: string
+  emptyMessage?: string
+  emptyButton?: string
+  checkoutLabel?: string
+  notesLabel?: string
+  notesPlaceholder?: string
+  taxNote?: string
+  freeShippingThreshold?: number
+  freeShippingPrefix?: string
+  promoText?: string
+  promoLinkLabel?: string
+  promoHref?: string
+  promoImage?: string
+}
+
+export const DEFAULT_TITLE = "Your cart"
+export const DEFAULT_CONTINUE_LABEL = "Continue shopping"
+export const DEFAULT_CONTINUE_HREF = "/store"
+export const DEFAULT_EMPTY_MESSAGE = "Your cart is empty"
+export const DEFAULT_EMPTY_BUTTON = "Continue shopping"
+export const DEFAULT_CHECKOUT_LABEL = "Checkout"
+export const DEFAULT_NOTES_LABEL = "Add a note to your order"
+export const DEFAULT_NOTES_PLACEHOLDER = ""
+export const DEFAULT_TAX_NOTE = "Taxes and shipping calculated at checkout"
+export const DEFAULT_FREE_SHIPPING_THRESHOLD = 150
+export const DEFAULT_FREE_SHIPPING_PREFIX = "Free shipping on orders over"
+export const DEFAULT_PROMO_TEXT = "Save up to 50% on our clearance items."
+export const DEFAULT_PROMO_LINK_LABEL = "Shop clearance sale →"
+export const DEFAULT_PROMO_HREF = "/store"
+export const DEFAULT_PROMO_IMAGE = "/cart-sale.jpg"