@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/account/components/order-card/index.tsx

@@ -0,0 +1,221 @@
+import Thumbnail from "@modules/products/components/thumbnail"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { convertToLocale } from "@core/util/money"
+import { HttpTypes } from "@medusajs/types"
+import Delivered from "@modules/common/icons/delivered"
+
+type OrderCardProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const getStatusConfig = (status: string) => {
+  const statusLower = status?.toLowerCase() || ""
+
+  if (statusLower.includes("cancel")) {
+    return {
+      label: "Cancelled",
+      bgColor: "bg-[#FFF1F2]",
+      textColor: "text-[#BE123C]",
+      iconBg: "bg-[#BE123C]",
+      icon: "×",
+    }
+  }
+
+  if (statusLower === "delivered" || statusLower === "complete" || statusLower === "completed") {
+    return {
+      label: "Delivered",
+      bgColor: "bg-[#E6F4F0]",
+      textColor: "text-[#008A5D]",
+      iconBg: "bg-[#008A5D]",
+      icon: <Delivered />,
+    }
+  }
+
+  if (statusLower === "shipped" || statusLower === "partially_shipped") {
+    return {
+      label: "Out For Delivery",
+      bgColor: "bg-[#EBF5FF]",
+      textColor: "text-[#0068D2]",
+      iconBg: "bg-[#0068D2]",
+      icon: (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="1" y="3" width="15" height="13" />
+          <polygon points="16 8 20 8 23 11 23 16 16 16 16 8" />
+          <circle cx="5.5" cy="18.5" r="2.5" />
+          <circle cx="18.5" cy="18.5" r="2.5" />
+        </svg>
+      ),
+    }
+  }
+
+  if (statusLower === "fulfilled" || statusLower === "partially_fulfilled") {
+    return {
+      label: "Shipped",
+      bgColor: "bg-[#F3E8FF]",
+      textColor: "text-brand-accent",
+      iconBg: "bg-brand-accent",
+      icon: (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
+          <polyline points="3.29 7 12 12 20.71 7" />
+          <line x1="12" y1="22" x2="12" y2="12" />
+        </svg>
+      ),
+    }
+  }
+
+  if (statusLower === "returned" || statusLower === "partially_returned") {
+    return {
+      label: statusLower === "returned" ? "Returned" : "Partially Returned",
+      bgColor: "bg-[#F0F9FF]",
+      textColor: "text-[#0284C7]",
+      iconBg: "bg-[#0284C7]",
+      icon: (
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M3 21v-5h5" />
+        </svg>
+      ),
+    }
+  }
+
+  if (statusLower === "return_requested") {
+    return {
+      label: "Return Requested",
+      bgColor: "bg-[#FEFCE8]",
+      textColor: "text-[#D97706]",
+      iconBg: "bg-[#CA8A04]",
+      icon: (
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+          <polyline points="22,6 12,13 2,6" />
+          <path d="M12 13v5" />
+        </svg>
+      ),
+    }
+  }
+
+  return {
+    label: "Order Confirmed",
+    bgColor: "bg-[#F0FDF4]",
+    textColor: "text-[#16A34A]",
+    iconBg: "bg-[#16A34A]",
+    icon: (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    ),
+  }
+}
+
+const OrderCard = ({ order }: OrderCardProps) => {
+  const isCancelled = order.status === "canceled" || order.status === "cancelled"
+
+  const returns = (order as HttpTypes.StoreOrder & { returns?: { status: string }[]; return_orders?: { status: string }[] }).returns
+    || (order as HttpTypes.StoreOrder & { return_orders?: { status: string }[] }).return_orders
+    || []
+  const isReviewedReturn = returns.some((r) => r.status === "received" || r.status === "partially_received")
+  const isRequestedReturn = returns.some((r) => r.status === "requested")
+
+  const isRefunded = order.payment_status === "refunded" || order.payment_status === "partially_refunded"
+
+  const statusToDisplay = isCancelled
+    ? "canceled"
+    : isReviewedReturn
+      ? "returned"
+      : isRequestedReturn
+        ? "return_requested"
+        : (order.fulfillment_status || order.status)
+
+  const statusConfig = getStatusConfig(statusToDisplay)
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    const day = date.getDate()
+    const month = date.toLocaleDateString("en-US", { month: "short" })
+    const weekday = date.toLocaleDateString("en-US", { weekday: "short" })
+    return `${weekday}, ${day} ${month}`
+  }
+
+  const renderStatusIcon = () => {
+    if (statusConfig.label === "Delivered") {
+      return <Delivered width={36} height={36} className="shrink-0" />
+    }
+
+    return (
+      <div
+        className={`${statusConfig.iconBg} w-9 h-9 rounded-full flex items-center justify-center text-inverse shrink-0 text-sm font-bold leading-none [&>svg]:w-4 [&>svg]:h-4`}
+      >
+        {statusConfig.icon}
+      </div>
+    )
+  }
+
+  return (
+    <LocalizedClientLink href={`/orders/${order.id}`}>
+      <div
+        className="bg-page-bg rounded-lg p-4 transition-all hover:shadow-md cursor-pointer border border-gray-100"
+        data-testid="order-card"
+      >
+        <div className="flex items-center gap-3 mb-4">
+          {renderStatusIcon()}
+          <div className="flex-1 text-left min-w-0">
+            <div className="flex items-center flex-wrap gap-2">
+              <h3 className={`font-bold ${statusConfig.textColor} text-lg tracking-tight leading-tight`}>
+                {statusConfig.label}
+              </h3>
+              {isRefunded && (
+                <span className="text-[10px] font-bold text-[#008A5D] bg-[#E1F2ED] px-2.5 py-1 rounded-full uppercase tracking-widest border border-[#008A5D]/10">
+                  Amount Refunded ✨
+                </span>
+              )}
+            </div>
+            <p className="text-sm text-gray-400 font-medium tracking-tight mt-1">
+              on {formatDate(order.created_at?.toString() || new Date().toISOString())}
+            </p>
+          </div>
+        </div>
+
+        <div className="bg-[#F5F5F5] rounded-2xl p-4 space-y-4">
+          {order.items?.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center gap-4 small:gap-6"
+              data-testid="order-item"
+            >
+              <div className="w-24 h-24 flex-shrink-0 rounded-xl overflow-hidden bg-page-bg">
+                <Thumbnail
+                  thumbnail={item.thumbnail}
+                  variantImages={item.variant?.images}
+                  images={item.variant?.product?.images}
+                  size="square"
+                />
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <span className="text-[10px] uppercase tracking-wider text-gray-400 font-semibold block mb-0.5">
+                  Chocomelon Baby
+                </span>
+                <h4 className="font-bold text-[#04122C] text-base mb-1 line-clamp-2 whitespace-normal break-words">
+                  {item.product_title || item.title}
+                </h4>
+                <div className="flex items-center gap-3">
+                  <p className="text-sm font-medium text-gray-500">
+                    {item.variant_title && `Size: ${item.variant_title}`}
+                  </p>
+                  <p className="font-bold text-[#04122C] text-base">
+                    {convertToLocale({
+                      amount: item.total || (item.unit_price * item.quantity) || 0,
+                      currency_code: order.currency_code,
+                    })}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </LocalizedClientLink>
+  )
+}
+
+export default OrderCard

package/templates/storefront/src/modules/account/components/order-overview/index.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import { Button } from "@medusajs/ui"
+import { useState, useMemo } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import OrderCard from "../order-card"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { Pagination } from "@modules/store/components/pagination"
+import { HttpTypes } from "@medusajs/types"
+
+const ORDERS_PER_PAGE = 5
+
+const OrderOverview = ({ orders }: { orders: HttpTypes.StoreOrder[] }) => {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const currentPage = Math.max(1, Number(searchParams.get("page")) || 1)
+
+  // Sort orders by created_at descending (latest first)
+  const sortedOrders = useMemo(() => {
+    return [...orders].sort((a, b) => {
+      return new Date(b.created_at || 0).getTime() - new Date(a.created_at || 0).getTime()
+    })
+  }, [orders])
+
+  // Filter orders based on search query
+  const filteredOrders = useMemo(() => {
+    if (!searchQuery.trim()) return sortedOrders
+
+    return sortedOrders.filter((order) => {
+      const searchLower = searchQuery.toLowerCase()
+      return (
+        order.display_id?.toString().includes(searchLower) ||
+        order.items?.some((item) =>
+          item.title?.toLowerCase().includes(searchLower)
+        )
+      )
+    })
+  }, [sortedOrders, searchQuery])
+
+  const totalPages = Math.max(1, Math.ceil(filteredOrders.length / ORDERS_PER_PAGE))
+  const safePage = Math.min(currentPage, totalPages)
+
+  const displayedOrders = useMemo(() => {
+    const start = (safePage - 1) * ORDERS_PER_PAGE
+    return filteredOrders.slice(start, start + ORDERS_PER_PAGE)
+  }, [filteredOrders, safePage])
+
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value)
+
+    const params = new URLSearchParams(searchParams)
+    params.set("page", "1")
+    router.replace(`${pathname}?${params.toString()}`)
+  }
+
+  const rangeStart = filteredOrders.length === 0 ? 0 : (safePage - 1) * ORDERS_PER_PAGE + 1
+  const rangeEnd = Math.min(safePage * ORDERS_PER_PAGE, filteredOrders.length)
+
+  if (orders?.length) {
+    return (
+      <div className="flex flex-col gap-y-6 w-full">
+        {/* Header with Search */}
+        <div className="flex flex-col small:flex-row items-start small:items-center justify-between gap-4 w-full">
+          <h2 className="text-2xl font-bold text-heading whitespace-nowrap">All Orders</h2>
+          <div className="relative w-full max-w-md">
+            <svg
+              className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              />
+            </svg>
+            <input
+              type="text"
+              placeholder="Search orders"
+              value={searchQuery}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-transparent transition-all"
+            />
+          </div>
+        </div>
+
+        {/* Orders List */}
+        <div className="flex flex-col gap-y-4 w-full">
+          {displayedOrders.length > 0 ? (
+            displayedOrders.map((o) => (
+              <div key={o.id}>
+                <OrderCard order={o} />
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              No orders found matching your search.
+            </div>
+          )}
+        </div>
+
+        {filteredOrders.length > ORDERS_PER_PAGE && (
+          <Pagination
+            page={safePage}
+            totalPages={totalPages}
+            data-testid="orders-pagination"
+          />
+        )}
+
+        <div className="text-center text-sm text-gray-500">
+          {filteredOrders.length > 0
+            ? `Showing ${rangeStart}-${rangeEnd} of ${filteredOrders.length} orders`
+            : "No orders to display"}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="w-full flex flex-col items-center gap-y-6 py-12"
+      data-testid="no-orders-container"
+    >
+      <div className="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mb-2">
+        <svg
+          className="w-10 h-10 text-gray-300"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+          />
+        </svg>
+      </div>
+      <h2 className="text-2xl font-bold text-heading">Nothing to see here</h2>
+      <p className="text-base-regular">
+        You don&apos;t have any orders yet, let us change that 🛍️
+      </p>
+      <div className="mt-4">
+        <LocalizedClientLink href="/" passHref>
+          <Button data-testid="continue-shopping-button">
+            Continue shopping
+          </Button>
+        </LocalizedClientLink>
+      </div>
+    </div>
+  )
+}
+
+export default OrderOverview

package/templates/storefront/src/modules/account/components/overview/index.tsx

@@ -0,0 +1,189 @@
+import { Container } from "@medusajs/ui"
+
+import ChevronDown from "@modules/common/icons/chevron-down"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { convertToLocale } from "@core/util/money"
+import { getOrderDisplayStatus, getStatusConfig } from "@core/util/order-status"
+import Delivered from "@modules/common/icons/delivered"
+import { HttpTypes } from "@medusajs/types"
+
+type OverviewProps = {
+  customer: HttpTypes.StoreCustomer | null
+  orders: HttpTypes.StoreOrder[] | null
+}
+
+const Overview = ({ customer, orders }: OverviewProps) => {
+  return (
+    <div data-testid="overview-page-wrapper">
+      <div className="hidden small:block">
+        <div className="text-xl-semi flex justify-between items-center mb-4">
+          <span data-testid="welcome-message" data-value={customer?.first_name}>
+            Hello {customer?.first_name}
+          </span>
+          <span className="text-small-regular text-ui-fg-base">
+            Signed in as:{" "}
+            <span
+              className="font-semibold"
+              data-testid="customer-email"
+              data-value={customer?.email}
+            >
+              {customer?.email}
+            </span>
+          </span>
+        </div>
+        <div className="flex flex-col py-8 border-t border-gray-200">
+          <div className="flex flex-col gap-y-4 h-full col-span-1 row-span-2 flex-1">
+            <div className="flex items-start gap-x-16 mb-6">
+              <div className="flex flex-col gap-y-4">
+                <h3 className="text-large-semi">Profile</h3>
+                <div className="flex items-end gap-x-2">
+                  <span
+                    className="text-3xl-semi leading-none"
+                    data-testid="customer-profile-completion"
+                    data-value={getProfileCompletion(customer)}
+                  >
+                    {getProfileCompletion(customer)}%
+                  </span>
+                  <span className="uppercase text-base-regular text-ui-fg-subtle">
+                    Completed
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-y-4">
+                <h3 className="text-large-semi">Addresses</h3>
+                <div className="flex items-end gap-x-2">
+                  <span
+                    className="text-3xl-semi leading-none"
+                    data-testid="addresses-count"
+                    data-value={customer?.addresses?.length || 0}
+                  >
+                    {customer?.addresses?.length || 0}
+                  </span>
+                  <span className="uppercase text-base-regular text-ui-fg-subtle">
+                    Saved
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-y-4">
+              <div className="flex items-center gap-x-2">
+                <h3 className="text-large-semi">Recent orders</h3>
+              </div>
+              <ul
+                className="flex flex-col gap-y-4"
+                data-testid="orders-wrapper"
+              >
+                {orders && orders.length > 0 ? (
+                  orders.slice(0, 5).map((order) => {
+                    const statusConfig = getStatusConfig(getOrderDisplayStatus(order))
+
+                    return (
+                      <li
+                        key={order.id}
+                        data-testid="order-wrapper"
+                        data-value={order.id}
+                      >
+                        <LocalizedClientLink
+                          href={`/orders/${order.id}`}
+                        >
+                          <Container className="bg-page-bg flex justify-between items-center p-4">
+                            <div className="grid grid-cols-4 grid-rows-2 text-small-regular gap-x-4 flex-1">
+                              <span className="font-semibold">Date placed</span>
+                              <span className="font-semibold">
+                                Order number
+                              </span>
+                              <span className="font-semibold">
+                                Total amount
+                              </span>
+                              <span className="font-semibold">Status</span>
+                              <span data-testid="order-created-date">
+                                {new Date(order.created_at).toDateString()}
+                              </span>
+                              <span
+                                data-testid="order-id"
+                                data-value={order.display_id}
+                              >
+                                #{order.display_id}
+                              </span>
+                              <span data-testid="order-amount">
+                                {convertToLocale({
+                                  amount: order.total,
+                                  currency_code: order.currency_code,
+                                })}
+                              </span>
+                              <span data-testid="order-status">
+                                <span className="inline-flex items-center gap-1.5">
+                                  {statusConfig.label === "Delivered" ? (
+                                    <Delivered width={20} height={20} className="shrink-0" />
+                                  ) : (
+                                    <span
+                                      className={`${statusConfig.iconBg} w-5 h-5 rounded-full flex items-center justify-center text-inverse shrink-0 text-[10px] font-bold leading-none [&>svg]:w-2.5 [&>svg]:h-2.5`}
+                                    >
+                                      {statusConfig.icon}
+                                    </span>
+                                  )}
+                                  <span className={`font-semibold text-xs ${statusConfig.textColor}`}>
+                                    {statusConfig.label}
+                                  </span>
+                                </span>
+                              </span>
+                            </div>
+                            <button
+                              className="flex items-center justify-between"
+                              data-testid="open-order-button"
+                            >
+                              <span className="sr-only">
+                                Go to order #{order.display_id}
+                              </span>
+                              <ChevronDown className="-rotate-90" />
+                            </button>
+                          </Container>
+                        </LocalizedClientLink>
+                      </li>
+                    )
+                  })
+                ) : (
+                  <span data-testid="no-orders-message">No recent orders</span>
+                )}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const getProfileCompletion = (customer: HttpTypes.StoreCustomer | null) => {
+  let count = 0
+
+  if (!customer) {
+    return 0
+  }
+
+  if (customer.email) {
+    count++
+  }
+
+  if (customer.first_name && customer.last_name) {
+    count++
+  }
+
+  if (customer.phone) {
+    count++
+  }
+
+  const billingAddress = customer.addresses?.find(
+    (addr) => addr.is_default_billing
+  )
+
+  if (billingAddress) {
+    count++
+  }
+
+  return (count / 4) * 100
+}
+
+export default Overview