@pradip1995/segment-free-shipping-nudge 0.2.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pradip1995/segment-free-shipping-nudge",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "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/index.ts

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

package/src/manifest.ts

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

package/src/segment.css

@@ -0,0 +1,79 @@
+.free-shipping-nudge--inline {
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+}
+
+.free-shipping-nudge__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.free-shipping-nudge__track {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.free-shipping-nudge__fill {
+  height: 0.25rem;
+  border-radius: 9999px;
+  background: linear-gradient(to right, #a1a1aa, #71717a);
+  transition: width 0.5s ease;
+}
+
+.free-shipping-nudge__fill--complete {
+  background: linear-gradient(to right, #4ade80, #22c55e);
+}
+
+.free-shipping-nudge--popup {
+  position: fixed;
+  right: 1.25rem;
+  bottom: 1.25rem;
+  z-index: 40;
+  max-width: 24rem;
+}
+
+.free-shipping-nudge__close {
+  align-self: flex-end;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  background: var(--color-text-heading);
+  color: var(--color-text-inverse);
+  border: none;
+  margin-bottom: 0.5rem;
+}
+
+.free-shipping-nudge__popup-card {
+  background: var(--color-text-heading);
+  color: var(--color-text-inverse);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+
+.free-shipping-nudge__actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.free-shipping-nudge__action {
+  flex: 1;
+  text-align: center;
+  border-radius: 1rem;
+  padding: 0.625rem 1rem;
+  background: var(--color-surface);
+  color: var(--color-text-heading);
+  text-decoration: none;
+}
+
+.free-shipping-nudge__action--ghost {
+  background: transparent;
+  color: var(--color-text-inverse);
+  border: 1px solid var(--color-text-inverse);
+}

package/src/segment.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import "./segment.css"
+import { useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+
+type FreeShippingPrice = HttpTypes.StorePrice & {
+  shipping_option_id?: string
+  target_reached: boolean
+  target_remaining: number
+  remaining_percentage: number
+}
+
+function computeTarget(cart: HttpTypes.StoreCart, price: HttpTypes.StorePrice) {
+  const priceRule = (price.price_rules || []).find((pr) => pr.attribute === "item_total")
+  if (!priceRule) {
+    return {
+      target_reached: false,
+      target_remaining: 0,
+      remaining_percentage: 0,
+    }
+  }
+
+  const currentAmount = cart.item_total ?? 0
+  const targetAmount = parseFloat(priceRule.value)
+
+  if (priceRule.operator === "gt") {
+    return {
+      target_reached: currentAmount > targetAmount,
+      target_remaining: currentAmount > targetAmount ? 0 : targetAmount + 1 - currentAmount,
+      remaining_percentage: Math.min(100, (currentAmount / targetAmount) * 100),
+    }
+  }
+
+  if (priceRule.operator === "gte") {
+    return {
+      target_reached: currentAmount >= targetAmount,
+      target_remaining: currentAmount >= targetAmount ? 0 : targetAmount - currentAmount,
+      remaining_percentage: Math.min(100, (currentAmount / targetAmount) * 100),
+    }
+  }
+
+  return {
+    target_reached: currentAmount === targetAmount,
+    target_remaining: targetAmount > currentAmount ? targetAmount - currentAmount : 0,
+    remaining_percentage: Math.min(100, (currentAmount / targetAmount) * 100),
+  }
+}
+
+function resolveFreeShippingPrice(
+  cart: HttpTypes.StoreCart,
+  shippingOptions: HttpTypes.StoreCartShippingOption[]
+): FreeShippingPrice | null {
+  const prices = shippingOptions
+    .flatMap((shippingOption) => {
+      const validCurrencyPrices = shippingOption.prices.filter(
+        (price) =>
+          price.currency_code === cart.currency_code &&
+          (price.price_rules || []).some((rule) => rule.attribute === "item_total")
+      )
+
+      return validCurrencyPrices.map((price) => ({
+        ...price,
+        shipping_option_id: shippingOption.id,
+        ...computeTarget(cart, price),
+      }))
+    })
+    .filter((price) => price.amount === 0)
+
+  return (prices[0] as FreeShippingPrice | undefined) ?? null
+}
+
+function FreeShippingInline({
+  cart,
+  price,
+}: {
+  cart: HttpTypes.StoreCart
+  price: FreeShippingPrice
+}) {
+  return (
+    <div className="free-shipping-nudge free-shipping-nudge--inline">
+      <div className="free-shipping-nudge__row">
+        <span className="free-shipping-nudge__label">
+          {price.target_reached ? "Free shipping unlocked!" : "Unlock free shipping"}
+        </span>
+        {!price.target_reached ? (
+          <span className="free-shipping-nudge__remaining">
+            Only{" "}
+            <strong>
+              {formatPrice(price.target_remaining, cart.currency_code)}
+            </strong>{" "}
+            away
+          </span>
+        ) : null}
+      </div>
+      <div className="free-shipping-nudge__track" aria-hidden>
+        <div
+          className={`free-shipping-nudge__fill${price.target_reached ? " free-shipping-nudge__fill--complete" : ""}`}
+          style={{ width: `${price.remaining_percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+function FreeShippingPopup({
+  cart,
+  price,
+}: {
+  cart: HttpTypes.StoreCart
+  price: FreeShippingPrice
+}) {
+  const [isClosed, setIsClosed] = useState(false)
+
+  if (price.target_reached || isClosed) return null
+
+  return (
+    <div className="free-shipping-nudge free-shipping-nudge--popup">
+      <button
+        type="button"
+        className="free-shipping-nudge__close"
+        onClick={() => setIsClosed(true)}
+        aria-label="Dismiss"
+      >
+        ×
+      </button>
+      <div className="free-shipping-nudge__popup-card">
+        <div className="free-shipping-nudge__row">
+          <span className="free-shipping-nudge__label">Unlock free shipping</span>
+          <span className="free-shipping-nudge__remaining">
+            Only{" "}
+            <strong>
+              {formatPrice(price.target_remaining, cart.currency_code)}
+            </strong>{" "}
+            away
+          </span>
+        </div>
+        <div className="free-shipping-nudge__track" aria-hidden>
+          <div
+            className="free-shipping-nudge__fill"
+            style={{ width: `${price.remaining_percentage}%` }}
+          />
+        </div>
+        <div className="free-shipping-nudge__actions">
+          <LocalizedLink href="/cart" className="free-shipping-nudge__action free-shipping-nudge__action--ghost">
+            View cart
+          </LocalizedLink>
+          <LocalizedLink href="/store" className="free-shipping-nudge__action">
+            View products
+          </LocalizedLink>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function FreeShippingNudge({
+  cart,
+  shippingOptions = [],
+  variant = "inline",
+}: {
+  cart?: HttpTypes.StoreCart | null
+  shippingOptions?: HttpTypes.StoreCartShippingOption[]
+  variant?: "popup" | "inline"
+}) {
+  if (!cart || shippingOptions.length === 0) return null
+
+  const price = resolveFreeShippingPrice(cart, shippingOptions)
+  if (!price) return null
+
+  if (variant === "popup") {
+    return <FreeShippingPopup cart={cart} price={price} />
+  }
+
+  return <FreeShippingInline cart={cart} price={price} />
+}