@pradip1995/segment-login-template 0.5.10 → 0.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/account-orders.tsx

@@ -1,16 +1,29 @@
 "use client"
 
-import { useMemo, useState } from "react"
+import { useMemo, useState, type MouseEvent } from "react"
+import { usePathname, useRouter } from "next/navigation"
 import type { HttpTypes } from "@medusajs/types"
+import { addToCart } from "@pradip1995/commerce-core/client/actions/cart"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import { acct } from "./account-theme"
 
-function statusStyle(status?: string, fulfillment?: string) {
-  const s = (fulfillment || status || "").toLowerCase()
-  if (s.includes("cancel")) {
+function isCancelled(order: HttpTypes.StoreOrder) {
+  const status = (order.status || "").toLowerCase()
+  return status === "canceled" || status === "cancelled"
+}
+
+function canReorder(order: HttpTypes.StoreOrder) {
+  if (isCancelled(order)) return false
+  const fulfillment = (order.fulfillment_status || "").toLowerCase()
+  return ["delivered", "partially_delivered"].includes(fulfillment)
+}
+
+function statusStyle(order: HttpTypes.StoreOrder) {
+  if (isCancelled(order)) {
     return "bg-[#FFF1F2] text-[#BE123C] border-[#BE123C]/20"
   }
+  const s = (order.fulfillment_status || order.status || "").toLowerCase()
   if (s === "delivered" || s === "complete" || s === "completed") {
     return "bg-[#E6F4F0] text-[#008A5D] border-[#008A5D]/20"
   }
@@ -23,16 +36,27 @@ function statusStyle(status?: string, fulfillment?: string) {
   return "bg-surface-muted text-muted border-cart-border"
 }
 
+function statusLabel(order: HttpTypes.StoreOrder) {
+  if (isCancelled(order)) return "Cancelled"
+  return (order.fulfillment_status || order.status || "").replace(/_/g, " ")
+}
+
 export default function AccountOrders({
   orders,
 }: {
   orders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
 }) {
   const [query, setQuery] = useState("")
+  const [reorderingId, setReorderingId] = useState<string | null>(null)
+  const router = useRouter()
+  const pathname = usePathname() || ""
+  const countryCode = pathname.split("/").filter(Boolean)[0] || "in"
 
   const safeOrders: HttpTypes.StoreOrder[] = useMemo(() => {
     if (Array.isArray(orders)) return orders
-    if (Array.isArray((orders as any)?.orders)) return (orders as any).orders
+    if (Array.isArray((orders as { orders?: HttpTypes.StoreOrder[] })?.orders)) {
+      return (orders as { orders: HttpTypes.StoreOrder[] }).orders
+    }
     return []
   }, [orders])
 
@@ -41,16 +65,31 @@ export default function AccountOrders({
     if (!q) return safeOrders
     return safeOrders.filter((order) => {
       const id = String(order.display_id ?? order.id)
-      const status = String(order.status ?? "").replace(/_/g, " ")
-      const fulfillment = String(order.fulfillment_status ?? "").replace(/_/g, " ")
-      return (
-        id.includes(q) ||
-        status.toLowerCase().includes(q) ||
-        fulfillment.toLowerCase().includes(q)
-      )
+      const status = statusLabel(order)
+      return id.includes(q) || status.toLowerCase().includes(q)
     })
   }, [safeOrders, query])
 
+  async function handleReorder(event: MouseEvent, order: HttpTypes.StoreOrder) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!canReorder(order) || reorderingId) return
+    setReorderingId(order.id)
+    try {
+      for (const item of order.items || []) {
+        if (!item.variant_id) continue
+        await addToCart({
+          variantId: item.variant_id,
+          quantity: item.quantity || 1,
+          countryCode,
+        })
+      }
+      router.push(`/${countryCode}/cart`)
+    } catch {
+      setReorderingId(null)
+    }
+  }
+
   return (
     <div className="space-y-6">
       <div className="pb-6 border-b border-cart-border">
@@ -84,28 +123,22 @@ export default function AccountOrders({
       ) : (
         <ul className="space-y-4">
           {filtered.map((order) => {
-            const label = (
-              order.fulfillment_status ||
-              order.status ||
-              ""
-            ).replace(/_/g, " ")
+            const label = statusLabel(order)
+            const showReorder = canReorder(order)
             return (
               <li key={order.id}>
-                <LocalizedLink
-                  href={`/orders/${order.id}`}
-                  className={`${acct.card} p-5 flex flex-wrap items-center justify-between gap-4 hover:border-brand-accent transition-colors block`}
+                <div
+                  className={`${acct.card} p-5 flex flex-wrap items-center justify-between gap-4`}
                 >
-                  <div className="space-y-2 min-w-0">
+                  <LocalizedLink
+                    href={`/orders/${order.id}`}
+                    className="space-y-2 min-w-0 flex-1 hover:opacity-90 transition-opacity"
+                  >
                     <div className="flex flex-wrap items-center gap-2">
                       <p className={`font-bold ${acct.heading}`}>
                         Order #{order.display_id}
                       </p>
-                      <span
-                        className={`${acct.badge} capitalize ${statusStyle(
-                          order.status,
-                          order.fulfillment_status
-                        )}`}
-                      >
+                      <span className={`${acct.badge} capitalize ${statusStyle(order)}`}>
                         {label}
                       </span>
                     </div>
@@ -118,11 +151,21 @@ export default function AccountOrders({
                       {order.items?.length ?? 0} item
                       {(order.items?.length ?? 0) === 1 ? "" : "s"}
                     </p>
-                  </div>
-                  <p className={`text-base font-bold ${acct.accent} shrink-0`}>
-                    {formatPrice(order.total, order.currency_code)}
-                  </p>
-                </LocalizedLink>
+                    <p className={`text-base font-bold ${acct.accent}`}>
+                      {formatPrice(order.total, order.currency_code)}
+                    </p>
+                  </LocalizedLink>
+                  {showReorder ? (
+                    <button
+                      type="button"
+                      className={acct.btnPrimary}
+                      disabled={reorderingId === order.id}
+                      onClick={(event) => handleReorder(event, order)}
+                    >
+                      {reorderingId === order.id ? "Adding…" : "Reorder"}
+                    </button>
+                  ) : null}
+                </div>
               </li>
             )
           })}