@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/app/[countryCode]/(checkout)/checkout/payment/page.tsx

@@ -0,0 +1,47 @@
+import { retrieveCart } from "@core/data/cart"
+import { retrieveCustomer } from "@core/data/customer"
+import { listCartPaymentMethods } from "@core/data/payment"
+import PaymentWrapper from "@modules/checkout/components/payment-wrapper"
+import CheckoutShippingTracker from "@modules/checkout/components/checkout-shipping-tracker"
+import Payment from "@modules/checkout/components/payment"
+import Review from "@modules/checkout/components/review"
+import CheckoutSummary from "@modules/checkout/templates/checkout-summary"
+import BackLink from "@modules/checkout/components/back-link"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+export const metadata: Metadata = {
+  title: "Payment - Checkout",
+}
+
+export default async function PaymentPage() {
+  const cart = await retrieveCart()
+
+  if (!cart) {
+    return notFound()
+  }
+
+  const customer = await retrieveCustomer()
+  const paymentMethods = await listCartPaymentMethods(cart.region?.id ?? "")
+
+  if (!paymentMethods) {
+    return notFound()
+  }
+
+  return (
+    <div className="w-full max-w-[1360px] mx-auto px-3 min-[550px]:px-4 sm:px-6 md:px-8 min-[1023px]:px-4 min-[1150px]:px-6 min-[1360px]:px-8 py-4 min-[550px]:py-6 sm:py-8 md:py-12 min-[1023px]:py-10 min-[1150px]:py-12 min-[1360px]:py-12">
+      {/* Back Button */}
+      <div className="mb-4 min-[550px]:mb-6">
+        <BackLink />
+      </div>
+      <div className="grid grid-cols-1 min-[1024px]:grid-cols-[1fr_416px] gap-4 min-[550px]:gap-5 sm:gap-6 md:gap-8 min-[768px]:gap-6 min-[1023px]:gap-4 min-[1150px]:gap-6 min-[1200px]:gap-10 min-[1360px]:gap-12 w-full">
+        <PaymentWrapper cart={cart}>
+          <div className="w-full grid grid-cols-1 gap-y-6 min-[550px]:gap-y-8">
+            <Payment cart={cart} availablePaymentMethods={paymentMethods} />
+          </div>
+        </PaymentWrapper>
+        <CheckoutSummary cart={cart} customer={customer} />
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(checkout)/layout.tsx

@@ -0,0 +1,31 @@
+import Nav from "@modules/layout/templates/nav"
+import Footer from "@modules/layout/templates/footer"
+import { ModalProvider } from "@core/context/modal-context"
+import NavWrapper from "@modules/layout/components/nav-wrapper"
+import { WishlistProvider } from "@core/context/wishlist-context"
+import CheckoutLeaveGuard from "@modules/checkout/components/checkout-leave-guard"
+import { retrieveCustomer } from "@core/data/customer"
+import VerificationBanner from "@modules/layout/components/verification-banner"
+
+export default async function CheckoutLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const customer = await retrieveCustomer()
+  return (
+    <WishlistProvider>
+      <ModalProvider>
+        <CheckoutLeaveGuard />
+        <NavWrapper>
+          <Nav />
+        </NavWrapper>
+        {customer && <VerificationBanner customer={customer} />}
+        <div className="w-full bg-page-bg relative min-h-screen">
+          <div className="relative" data-testid="checkout-container">{children}</div>
+        </div>
+        <Footer />
+      </ModalProvider>
+    </WishlistProvider>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(checkout)/not-found.tsx

@@ -0,0 +1,19 @@
+import InteractiveLink from "@modules/common/components/interactive-link"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "404",
+  description: "Something went wrong",
+}
+
+export default async function NotFound() {
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center min-h-[calc(100vh-64px)]">
+      <h1 className="text-2xl-semi text-ui-fg-base">Page not found</h1>
+      <p className="text-small-regular text-ui-fg-base">
+        The page you tried to access does not exist.
+      </p>
+      <InteractiveLink href="/">Go to frontpage</InteractiveLink>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/addresses/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import AddressBook from "@modules/account/components/address-book"
+
+import { getRegion } from "@core/data/regions"
+import { retrieveCustomer } from "@core/data/customer"
+
+export const metadata: Metadata = {
+  title: "Addresses",
+  description: "View your addresses",
+}
+
+export default async function Addresses(props: {
+  params: Promise<{ countryCode: string }>
+}) {
+  const params = await props.params
+  const { countryCode } = params
+  const customer = await retrieveCustomer()
+  const region = await getRegion(countryCode)
+
+  if (!customer || !region) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="addresses-page-wrapper">
+      <AddressBook customer={customer} region={region} />
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from "@modules/common/icons/spinner"
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center w-full h-full text-ui-fg-base">
+      <Spinner size={36} />
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/orders/details/[id]/page.tsx

@@ -0,0 +1,35 @@
+import { loadOrderData } from "@controllers/order/load-order-data"
+import { OrderDetailsController } from "@controllers/order/order-details-controller"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+export const dynamic = "force-dynamic"
+
+type Props = {
+  params: Promise<{ id: string }>
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
+  const order = await loadOrderData(params.id)
+
+  if (!order) {
+    notFound()
+  }
+
+  return {
+    title: `Order #${order.display_id}`,
+    description: `View your order`,
+  }
+}
+
+export default async function OrderDetailPage(props: Props) {
+  const params = await props.params
+  const order = await loadOrderData(params.id)
+
+  if (!order) {
+    notFound()
+  }
+
+  return <OrderDetailsController order={order} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/orders/exchange/[id]/page.tsx

@@ -0,0 +1,47 @@
+
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { retrieveOrder } from "@core/data/orders"
+import { sdk } from "@core/config"
+import ExchangeRequestTemplate from "@modules/account/templates/exchange-request-template"
+
+type Props = {
+    params: Promise<{ id: string; countryCode: string }>
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+    const params = await props.params
+    return {
+        title: `Exchange Order #${params.id}`,
+        description: "Request an exchange for your order.",
+    }
+}
+
+export default async function ExchangePage(props: Props) {
+    const params = await props.params
+
+    const order = await retrieveOrder(params.id).catch(() => null)
+
+    if (!order) {
+        return notFound()
+    }
+
+    // Fetch return reasons
+    const { return_reasons } = await sdk.client.fetch<any>(
+        "/store/return-reasons",
+        {
+            method: "GET",
+            query: { fields: "id,value,label" },
+            next: { tags: ["return_reasons"] },
+        }
+    )
+
+    return (
+        <div className="bg-gray-50 min-h-screen">
+            <ExchangeRequestTemplate
+                order={order as any}
+                returnReasons={return_reasons || []}
+            />
+        </div>
+    )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/orders/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from "next"
+
+import OrderOverview from "@modules/account/components/order-overview"
+import { notFound } from "next/navigation"
+import { listOrders } from "@core/data/orders"
+import Divider from "@modules/common/components/divider"
+
+
+export const metadata: Metadata = {
+  title: "Orders",
+  description: "Overview of your previous orders.",
+}
+
+export default async function Orders() {
+  const orders = await listOrders()
+
+  if (!orders) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="orders-page-wrapper">
+      <div>
+        <OrderOverview orders={orders} />
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/orders/return/[id]/page.tsx

@@ -0,0 +1,66 @@
+
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { retrieveOrder } from "@core/data/orders"
+import { listReturnReasons, listReturnShippingOptions } from "@core/data/returns"
+import ReturnRequestTemplate from "@modules/account/templates/return-request-template"
+import { hasReturnableItems } from "@core/util/returns"
+
+export const metadata: Metadata = {
+  title: "Request Return",
+  description: "Request a return for your order",
+}
+
+type Props = {
+  params: Promise<{ id: string }>
+}
+
+export default async function ReturnRequestPage(props: Props) {
+  const params = await props.params;
+
+  const order = await retrieveOrder(params.id).catch(() => null)
+
+  if (!order) {
+    notFound()
+  }
+
+  // Check eligibility logic mentioned in doc
+  if (!hasReturnableItems(order)) {
+    // Or render a "Not eligible" message component
+    return (
+      <div className="max-w-4xl mx-auto py-16 px-4 text-center">
+        <h1 className="text-2xl font-bold mb-4">Return Not Available</h1>
+        <p className="text-gray-600 mb-8">This order matches no returnable items. Items might be past the return window or already returned.</p>
+        <a href="/account/orders" className="text-blue-600 hover:underline">Back to Orders</a>
+      </div>
+    )
+  }
+
+  // Get cart ID for shipping options
+  const cartId = (order as any).cart_id
+
+  if (!cartId) {
+    // Doc says: "No Cart ID: Returns 404 page"
+    // But strictly following safe implementation is better, but obeying doc:
+    // "Returns 404 page (cart required for shipping options)"
+    // I'll stick to a softer error or fallback if possible, but let's conform.
+  }
+
+  // Extract product IDs for context
+  const productIds = order.items?.map((item: any) => item.product_id).filter(Boolean) as string[]
+
+  // Fetch return shipping options and return reasons
+  const [shippingOptions, returnReasons] = await Promise.all([
+    listReturnShippingOptions(cartId || "", (order as any).region_id, productIds),
+    listReturnReasons(),
+  ])
+
+  return (
+    <ReturnRequestTemplate
+      order={order}
+      shippingOptions={shippingOptions}
+      returnReasons={returnReasons}
+    />
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/page.tsx

@@ -0,0 +1,22 @@
+import { Metadata } from "next"
+
+import Overview from "@modules/account/components/overview"
+import { notFound } from "next/navigation"
+import { retrieveCustomer } from "@core/data/customer"
+import { listOrders } from "@core/data/orders"
+
+export const metadata: Metadata = {
+  title: "Account",
+  description: "Overview of your account activity.",
+}
+
+export default async function OverviewTemplate() {
+  const customer = await retrieveCustomer().catch(() => null)
+  const orders = (await listOrders().catch(() => null)) || null
+
+  if (!customer) {
+    notFound()
+  }
+
+  return <Overview customer={customer} orders={orders} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/payment-methods/page.tsx

@@ -0,0 +1,23 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { retrieveCustomer } from "@core/data/customer"
+import PaymentMethodsTemplate from "@modules/account/templates/payment-methods-template"
+
+export const metadata: Metadata = {
+    title: "Payment Methods",
+    description: "Manage your saved payment methods for refunds",
+}
+
+export default async function PaymentMethods() {
+    const customer = await retrieveCustomer()
+
+    if (!customer) {
+        notFound()
+    }
+
+    return (
+        <div className="w-full" data-testid="payment-methods-page-wrapper">
+            <PaymentMethodsTemplate customer={customer} />
+        </div>
+    )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@dashboard/profile/page.tsx

@@ -0,0 +1,43 @@
+import { Metadata } from "next"
+
+import ProfileForm from "@modules/account/components/profile-form"
+import ProfilePhone from "@modules/account//components/profile-phone"
+import ProfileBillingAddress from "@modules/account/components/profile-billing-address"
+import ProfileEmail from "@modules/account/components/profile-email"
+import ProfileName from "@modules/account/components/profile-name"
+import ProfilePassword from "@modules/account/components/profile-password"
+
+import { notFound } from "next/navigation"
+import { listRegions } from "@core/data/regions"
+import { retrieveCustomer } from "@core/data/customer"
+
+export const metadata: Metadata = {
+  title: "Profile",
+  description: "View and edit your Chocomelon profile.",
+}
+
+
+export default async function Profile() {
+  const customer = await retrieveCustomer()
+  const regions = await listRegions()
+
+  if (!customer || !regions) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="profile-page-wrapper">
+      <div className="mb-8 flex flex-col gap-y-4">
+        <h1 className="text-xl font-bold text-gray-900">Account Details</h1>
+      </div>
+      <div className="flex flex-col gap-y-8 w-full">
+        <ProfileForm customer={customer} />
+
+        {/* Preserving Billing Address as it's a required field in the system, though visually separated */}
+        <div className="border-t border-gray-100 pt-4 mt-2">
+          <ProfileBillingAddress customer={customer} regions={regions} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@login/default.tsx

@@ -0,0 +1,11 @@
+import { loadAccountData } from "@controllers/account/load-account-data"
+import { LoginPage } from "@controllers/account/login-page"
+
+export default async function DefaultLogin(props: {
+  params: Promise<{ countryCode: string }>
+}) {
+  const { countryCode } = await props.params
+  const data = await loadAccountData(countryCode)
+
+  return <LoginPage data={data} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/@login/page.tsx

@@ -0,0 +1,18 @@
+import { Metadata } from "next"
+
+import { loadAccountData } from "@controllers/account/load-account-data"
+import { LoginPage } from "@controllers/account/login-page"
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  description: "Sign in to your Chocomelon account.",
+}
+
+export default async function Login(props: {
+  params: Promise<{ countryCode: string }>
+}) {
+  const { countryCode } = await props.params
+  const data = await loadAccountData(countryCode)
+
+  return <LoginPage data={data} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/guest-orders/page.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Guest Orders",
+    description: "View your guest orders.",
+}
+
+import { listGuestOrders } from "@core/data/guest"
+import GuestOrdersTemplate from "@modules/account/templates/guest-orders-template"
+
+export default function GuestOrdersPage() {
+    return <GuestOrdersTemplate />
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/layout.tsx

@@ -0,0 +1,22 @@
+import { retrieveCustomer } from "@core/data/customer"
+import { Toaster } from "@medusajs/ui"
+import AccountLayout from "@modules/account/templates/account-layout"
+
+export default async function AccountPageLayout({
+  dashboard,
+  login,
+}: {
+  dashboard?: React.ReactNode
+  login?: React.ReactNode
+}) {
+  const customer = await retrieveCustomer().catch(() => null)
+
+  const isPendingDeletion = customer?.id === "pending_deletion"
+
+  return (
+    <AccountLayout customer={isPendingDeletion ? null : customer}>
+      {customer && !isPendingDeletion ? dashboard : login}
+      <Toaster />
+    </AccountLayout>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/account/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from "@modules/common/icons/spinner"
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center w-full h-full text-ui-fg-base">
+      <Spinner size={36} />
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/cart/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonCartPage from "@modules/skeletons/templates/skeleton-cart-page"
+
+export default function Loading() {
+  return <SkeletonCartPage />
+}

package/templates/storefront/src/app/[countryCode]/(main)/cart/not-found.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next"
+
+import InteractiveLink from "@modules/common/components/interactive-link"
+
+export const metadata: Metadata = {
+  title: "404",
+  description: "Something went wrong",
+}
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)]">
+      <h1 className="text-2xl-semi text-ui-fg-base">Page not found</h1>
+      <p className="text-small-regular text-ui-fg-base">
+        The cart you tried to access does not exist. Clear your cookies and try
+        again.
+      </p>
+      <InteractiveLink href="/">Go to frontpage</InteractiveLink>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/cart/page.tsx

@@ -0,0 +1,23 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { loadCartData } from "@controllers/cart/load-cart-data"
+import { CartPage } from "@controllers/cart/cart-page"
+
+type Props = {
+  params: Promise<{ countryCode: string }>
+}
+
+export const metadata: Metadata = {
+  title: "Bag",
+  description: "View your bag",
+}
+
+export default async function Cart(props: Props) {
+  const params = await props.params
+  const { countryCode } = params
+
+  const data = await loadCartData(countryCode).catch(() => notFound())
+
+  return <CartPage data={data} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/categories/[...category]/page.tsx

@@ -0,0 +1,11 @@
+import { getCategoryByHandle } from "@core/data/categories"
+import { redirect } from "next/navigation"
+
+export default async function CategoryPage(props: any) {
+  const params = await props.params
+  const category = await getCategoryByHandle(params.category)
+  if (category) {
+    redirect(`/${params.countryCode}/store?category=${category.id}`)
+  }
+  redirect(`/${params.countryCode}/store`)
+}

package/templates/storefront/src/app/[countryCode]/(main)/collections/[handle]/page.tsx

@@ -0,0 +1,11 @@
+import { getCollectionByHandle } from "@core/data/collections"
+import { redirect } from "next/navigation"
+
+export default async function CollectionPage(props: any) {
+  const params = await props.params
+  const collection = await getCollectionByHandle(params.handle)
+  if (collection) {
+    redirect(`/${params.countryCode}/store?collection=${collection.id}`)
+  }
+  redirect(`/${params.countryCode}/store`)
+}

package/templates/storefront/src/app/[countryCode]/(main)/contact/page.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next"
+import ContactTemplate from "@modules/contact/templates"
+
+type Props = {
+  params: Promise<{ countryCode: string }>
+}
+
+export const metadata: Metadata = {
+  title: "Contact Us",
+  description: "Get in touch with us",
+}
+
+export default async function ContactPage(props: Props) {
+  const params = await props.params
+  const countryCode = params.countryCode
+
+  const { getContactInfoFromConfig } = await import("@core/data/dynamic-config")
+  const contactInfo = await getContactInfoFromConfig()
+
+  return <ContactTemplate countryCode={countryCode} contactInfo={contactInfo as any} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/guest-orders/page.tsx

@@ -0,0 +1,12 @@
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Guest Orders",
+    description: "View your guest orders.",
+}
+
+import GuestOrdersTemplate from "@modules/account/templates/guest-orders-template"
+
+export default function GuestOrdersPage() {
+    return <GuestOrdersTemplate />
+}

package/templates/storefront/src/app/[countryCode]/(main)/help/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from "next"
+import HelpTemplate from "@modules/help/templates"
+
+type Props = {
+  params: Promise<{ countryCode: string }>
+}
+
+export const metadata: Metadata = {
+  title: "Help & FAQs",
+  description: "Get answers to your questions and contact our support team",
+}
+
+export default async function HelpPage(props: Props) {
+  const params = await props.params
+  const countryCode = params.countryCode
+
+  const { getContactInfoFromConfig, getFaqsFromConfig } = await import("@core/data/dynamic-config")
+  let contactInfo = null
+  let dynamicFaqs = null
+  try {
+      contactInfo = await getContactInfoFromConfig()
+      dynamicFaqs = await getFaqsFromConfig()
+  } catch (e) {
+      // fallback
+  }
+
+  return <HelpTemplate countryCode={countryCode} contactInfo={contactInfo as any} dynamicFaqs={dynamicFaqs} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/layout.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next"
+
+import { getBaseURL } from "@core/util/env"
+import { loadLayoutData } from "@controllers/layout/load-layout-data"
+import { MainLayout } from "@controllers/layout/main-layout"
+
+export const metadata: Metadata = {
+  metadataBase: new URL(getBaseURL()),
+  icons: {
+    icon: "/favicon.png",
+    apple: "/favicon.png",
+  },
+}
+
+export default async function PageLayout(props: {
+  children: React.ReactNode
+}) {
+  const layoutData = await loadLayoutData()
+
+  return <MainLayout data={layoutData}>{props.children}</MainLayout>
+}