@pradip1995/segment-jewelry-checkout-form 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-jewelry-checkout-form",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,8 @@
   "exports": {
     ".": "./src/index.ts",
     "./manifest": "./src/manifest.ts",
-    "./payment-block": "./src/payment-block.tsx"
+    "./payment-block": "./src/payment-block.tsx",
+    "./checkout-line": "./src/checkout-line.ts"
   },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
@@ -26,8 +27,8 @@
   "dependencies": {
     "@medusajs/types": "^2.8.0",
     "@pradip1995/segment-analytics": "^0.2.2",
-    "@pradip1995/segment-primitives": "^0.4.7",
-    "@pradip1995/segment-tokens": "^0.3.7"
+    "@pradip1995/segment-primitives": "^0.4.11",
+    "@pradip1995/segment-tokens": "^0.3.14"
   },
   "devDependencies": {
     "@pradip1995/plugin-sdk": "^0.2.0",
@@ -37,6 +38,7 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "test": "node --experimental-strip-types --test src/*.test.ts"
   }
 }

package/src/checkout-bag-items.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import Image from "next/image"
+import type { HttpTypes } from "@medusajs/types"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import { resolveCartLineItemImage } from "@pradip1995/segment-primitives/resolve-media-url"
+import { checkoutItemCount, checkoutLineView } from "./checkout-line"
+
+export default function CheckoutBagItems({
+  cart,
+  title = "Your items",
+}: {
+  cart: HttpTypes.StoreCart
+  title?: string
+}) {
+  const items = cart.items || []
+  const currency = cart.currency_code || "inr"
+  const itemCount = checkoutItemCount(items)
+
+  if (items.length === 0) return null
+
+  return (
+    <section className="jewelry-checkout-bag" aria-label={title}>
+      <header className="jewelry-checkout-bag__head">
+        <h2 className="jewelry-checkout-bag__title">{title}</h2>
+        <p className="jewelry-checkout-bag__count">
+          {itemCount} {itemCount === 1 ? "item" : "items"}
+        </p>
+      </header>
+
+      <ul className="jewelry-checkout-bag__list">
+        {items.map((item) => {
+          const line = checkoutLineView(item)
+          const thumbnail = resolveCartLineItemImage(item)
+          return (
+            <li key={item.id} className="jewelry-checkout-bag__item">
+              <div className="jewelry-checkout-bag__thumb">
+                {thumbnail ? (
+                  <Image
+                    src={thumbnail}
+                    alt={line.title}
+                    fill
+                    className="object-cover"
+                    sizes="88px"
+                    unoptimized
+                  />
+                ) : (
+                  <div className="jewelry-checkout-bag__thumb-empty" aria-hidden />
+                )}
+              </div>
+              <div className="jewelry-checkout-bag__meta">
+                <p className="jewelry-checkout-bag__name">{line.title}</p>
+                {line.variantLabel ? (
+                  <p className="jewelry-checkout-bag__variant">{line.variantLabel}</p>
+                ) : null}
+                <p className="jewelry-checkout-bag__qty">
+                  {line.quantityLabel}
+                  <span aria-hidden> · </span>
+                  {formatPrice(line.unitPrice, currency)} each
+                </p>
+              </div>
+              <p className="jewelry-checkout-bag__total">{formatPrice(line.lineTotal, currency)}</p>
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}

package/src/checkout-line.test.ts

@@ -0,0 +1,147 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+import {
+  checkoutItemCount,
+  checkoutLineView,
+  isPlaceholderVariant,
+  type CheckoutLineItemInput,
+  type CheckoutLineView,
+} from "./checkout-line.ts"
+
+const LINE_CASES: Array<{
+  name: string
+  item: CheckoutLineItemInput
+  want: CheckoutLineView
+}> = [
+  {
+    name: "shows title, qty, and line total for a single piece",
+    item: {
+      id: "li_1",
+      title: "Pendants demo 3",
+      quantity: 1,
+      unit_price: 869,
+      total: 869,
+    },
+    want: {
+      id: "li_1",
+      title: "Pendants demo 3",
+      variantLabel: null,
+      quantity: 1,
+      quantityLabel: "Qty 1",
+      unitPrice: 869,
+      lineTotal: 869,
+    },
+  },
+  {
+    name: "multiplies unit price when line total is missing",
+    item: {
+      id: "li_2",
+      title: "Gold hoop",
+      quantity: 3,
+      unit_price: 500,
+    },
+    want: {
+      id: "li_2",
+      title: "Gold hoop",
+      variantLabel: null,
+      quantity: 3,
+      quantityLabel: "Qty 3",
+      unitPrice: 500,
+      lineTotal: 1500,
+    },
+  },
+  {
+    name: "prefers product title and keeps a real variant label",
+    item: {
+      id: "li_3",
+      title: "Variant name",
+      product_title: "Emerald ring",
+      quantity: 2,
+      unit_price: 1200,
+      total: 2400,
+      variant: { title: "18K Gold / 6" },
+    },
+    want: {
+      id: "li_3",
+      title: "Emerald ring",
+      variantLabel: "18K Gold / 6",
+      quantity: 2,
+      quantityLabel: "Qty 2",
+      unitPrice: 1200,
+      lineTotal: 2400,
+    },
+  },
+  {
+    name: "hides a default variant label",
+    item: {
+      id: "li_4",
+      title: "Pendants demo 2",
+      quantity: 1,
+      unit_price: 846,
+      total: 846,
+      variant: { title: "Default" },
+    },
+    want: {
+      id: "li_4",
+      title: "Pendants demo 2",
+      variantLabel: null,
+      quantity: 1,
+      quantityLabel: "Qty 1",
+      unitPrice: 846,
+      lineTotal: 846,
+    },
+  },
+  {
+    name: "treats missing quantity as one and falls back to Product",
+    item: { id: "", title: "   " },
+    want: {
+      id: "",
+      title: "Product",
+      variantLabel: null,
+      quantity: 1,
+      quantityLabel: "Qty 1",
+      unitPrice: 0,
+      lineTotal: 0,
+    },
+  },
+]
+
+const COUNT_CASES: Array<{
+  name: string
+  items: Array<{ quantity?: number | null }> | null | undefined
+  want: number
+}> = [
+  { name: "counts mixed quantities", items: [{ quantity: 1 }, { quantity: 2 }], want: 3 },
+  { name: "returns zero for an empty list", items: [], want: 0 },
+  { name: "returns zero when items are missing", items: null, want: 0 },
+]
+
+const VARIANT_CASES: Array<{ name: string; title: string | null; want: boolean }> = [
+  { name: "treats null as a placeholder variant", title: null, want: true },
+  { name: "treats Default as a placeholder variant", title: "Default", want: true },
+  { name: "keeps a real size variant", title: "Size 6", want: false },
+]
+
+describe("checkoutLineView", () => {
+  for (const row of LINE_CASES) {
+    it(row.name, () => {
+      assert.deepEqual(checkoutLineView(row.item), row.want)
+    })
+  }
+})
+
+describe("checkoutItemCount", () => {
+  for (const row of COUNT_CASES) {
+    it(row.name, () => {
+      assert.equal(checkoutItemCount(row.items), row.want)
+    })
+  }
+})
+
+describe("isPlaceholderVariant", () => {
+  for (const row of VARIANT_CASES) {
+    it(row.name, () => {
+      assert.equal(isPlaceholderVariant(row.title), row.want)
+    })
+  }
+})

package/src/checkout-line.ts

@@ -0,0 +1,58 @@
+export type CheckoutLineItemInput = {
+  id?: string | null
+  title?: string | null
+  product_title?: string | null
+  quantity?: number | null
+  unit_price?: number | null
+  total?: number | null
+  variant?: { title?: string | null } | null
+}
+
+export type CheckoutLineView = {
+  id: string
+  title: string
+  variantLabel: string | null
+  quantity: number
+  quantityLabel: string
+  unitPrice: number
+  lineTotal: number
+}
+
+export function isPlaceholderVariant(title?: string | null): boolean {
+  if (!title) return true
+  const normalized = title.toLowerCase()
+  return (
+    normalized === "default" ||
+    normalized.includes("default variant") ||
+    normalized.includes("default option")
+  )
+}
+
+export function checkoutLineView(item: CheckoutLineItemInput): CheckoutLineView {
+  const quantity = Math.max(1, Number(item.quantity) || 1)
+  const unitPrice = Number(item.unit_price) || 0
+  const lineTotal =
+    typeof item.total === "number" ? item.total : unitPrice * quantity
+  const variantTitle = item.variant?.title
+  const variantLabel =
+    variantTitle && !isPlaceholderVariant(variantTitle) ? variantTitle : null
+
+  return {
+    id: item.id || "",
+    title: (item.product_title || item.title || "Product").trim() || "Product",
+    variantLabel,
+    quantity,
+    quantityLabel: `Qty ${quantity}`,
+    unitPrice,
+    lineTotal,
+  }
+}
+
+export function checkoutItemCount(
+  items: Array<{ quantity?: number | null }> | null | undefined
+): number {
+  return (items || []).reduce(
+    (sum, item) => sum + Math.max(0, Number(item.quantity) || 0),
+    0
+  )
+}

package/src/jewelry-checkout-form.css

@@ -861,3 +861,136 @@
     grid-template-columns: 1fr;
   }
 }
+
+.jewelry-checkout-bag {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(59, 31, 78, 0.12);
+}
+
+.jewelry-checkout-bag__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.jewelry-checkout-bag__title {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #1a1224;
+}
+
+.jewelry-checkout-bag__title::before {
+  content: "";
+  width: 3px;
+  height: 0.95em;
+  border-radius: 1px;
+  background: #3b1f4e;
+}
+
+.jewelry-checkout-bag__count {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #6b6573;
+}
+
+.jewelry-checkout-bag__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.jewelry-checkout-bag__item {
+  display: grid;
+  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: center;
+  padding: 0.85rem;
+  border: 1px solid rgba(59, 31, 78, 0.12);
+  border-radius: 0.85rem;
+  background: #ffffff;
+}
+
+.jewelry-checkout-bag__thumb {
+  position: relative;
+  width: 5.5rem;
+  height: 5.5rem;
+  overflow: hidden;
+  border-radius: 0.7rem;
+  background: #faf6f1;
+  border: 1px solid rgba(59, 31, 78, 0.1);
+}
+
+.jewelry-checkout-bag__thumb-empty {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #faf6f1 0%, #f4eff8 100%);
+}
+
+.jewelry-checkout-bag__meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.jewelry-checkout-bag__name {
+  margin: 0;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: #1a1224;
+}
+
+.jewelry-checkout-bag__variant {
+  margin: 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #6b6573;
+}
+
+.jewelry-checkout-bag__qty {
+  margin: 0.1rem 0 0;
+  font-size: 0.8125rem;
+  color: #6b6573;
+}
+
+.jewelry-checkout-bag__total {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: #3b1f4e;
+  white-space: nowrap;
+}
+
+@media (max-width: 520px) {
+  .jewelry-checkout-bag__item {
+    grid-template-columns: 4.25rem minmax(0, 1fr);
+  }
+
+  .jewelry-checkout-bag__thumb {
+    width: 4.25rem;
+    height: 4.25rem;
+  }
+
+  .jewelry-checkout-bag__total {
+    grid-column: 2;
+    justify-self: start;
+  }
+}

package/src/segment.tsx

@@ -2,6 +2,7 @@
 
 import type { HttpTypes } from "@medusajs/types"
 import AddressFields from "./address-fields"
+import CheckoutBagItems from "./checkout-bag-items"
 import LeaveCheckoutGuard from "./leave-checkout-guard"
 import "./jewelry-checkout-form.css"
 
@@ -9,10 +10,12 @@ export default function JewelryCheckoutForm({
   cart,
   customer,
   formTitle = "Contact & shipping",
+  itemsTitle = "Your items",
 }: {
   cart?: HttpTypes.StoreCart
   customer?: HttpTypes.StoreCustomer | null
   formTitle?: string
+  itemsTitle?: string
   shippingMethods?: HttpTypes.StoreCartShippingOption[]
   paymentProviders?: Array<{ id: string }>
   shopName?: string
@@ -35,6 +38,7 @@ export default function JewelryCheckoutForm({
         <form id="checkout-address-form" autoComplete="off">
           <AddressFields cart={cart} customer={customer} formTitle={formTitle} />
         </form>
+        <CheckoutBagItems cart={cart} title={itemsTitle} />
       </div>
     </>
   )