@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,20 @@
+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 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)/order/[id]/confirmed/loading.tsx

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

package/templates/storefront/src/app/[countryCode]/(main)/order/[id]/confirmed/page.tsx

@@ -0,0 +1,23 @@
+import { retrieveOrder } from "@core/data/orders"
+import OrderCompletedTemplate from "@modules/order/templates/order-completed-template"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: Promise<{ id: string }>
+}
+export const metadata: Metadata = {
+  title: "Order Confirmed",
+  description: "You purchase was successful",
+}
+
+export default async function OrderConfirmedPage(props: Props) {
+  const params = await props.params
+  const order = await retrieveOrder(params.id).catch(() => null)
+
+  if (!order) {
+    return notFound()
+  }
+
+  return <OrderCompletedTemplate order={order} />
+}

package/templates/storefront/src/app/[countryCode]/(main)/order/[id]/transfer/[token]/accept/page.tsx

@@ -0,0 +1,41 @@
+import { acceptTransferRequest } from "@core/data/orders"
+import { Heading, Text } from "@medusajs/ui"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  const { success, error } = await acceptTransferRequest(id, token)
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-2/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        {success && (
+          <>
+            <Heading level="h1" className="text-xl text-zinc-900">
+              Order transfered!
+            </Heading>
+            <Text className="text-zinc-600">
+              Order {id} has been successfully transfered to the new owner.
+            </Text>
+          </>
+        )}
+        {!success && (
+          <>
+            <Text className="text-zinc-600">
+              There was an error accepting the transfer. Please try again.
+            </Text>
+            {error && (
+              <Text className="text-red-500">Error message: {error}</Text>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/order/[id]/transfer/[token]/decline/page.tsx

@@ -0,0 +1,41 @@
+import { declineTransferRequest } from "@core/data/orders"
+import { Heading, Text } from "@medusajs/ui"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  const { success, error } = await declineTransferRequest(id, token)
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-2/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        {success && (
+          <>
+            <Heading level="h1" className="text-xl text-zinc-900">
+              Order transfer declined!
+            </Heading>
+            <Text className="text-zinc-600">
+              Transfer of order {id} has been successfully declined.
+            </Text>
+          </>
+        )}
+        {!success && (
+          <>
+            <Text className="text-zinc-600">
+              There was an error declining the transfer. Please try again.
+            </Text>
+            {error && (
+              <Text className="text-red-500">Error message: {error}</Text>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/order/[id]/transfer/[token]/page.tsx

@@ -0,0 +1,38 @@
+import { Heading, Text } from "@medusajs/ui"
+import TransferActions from "@modules/order/components/transfer-actions"
+import TransferImage from "@modules/order/components/transfer-image"
+
+export default async function TransferPage({
+  params,
+}: {
+  params: { id: string; token: string }
+}) {
+  const { id, token } = params
+
+  return (
+    <div className="flex flex-col gap-y-4 items-start w-2/5 mx-auto mt-10 mb-20">
+      <TransferImage />
+      <div className="flex flex-col gap-y-6">
+        <Heading level="h1" className="text-xl text-zinc-900">
+          Transfer request for order {id}
+        </Heading>
+        <Text className="text-zinc-600">
+          You&#39;ve received a request to transfer ownership of your order ({id}).
+          If you agree to this request, you can approve the transfer by clicking
+          the button below.
+        </Text>
+        <div className="w-full h-px bg-zinc-200" />
+        <Text className="text-zinc-600">
+          If you accept, the new owner will take over all responsibilities and
+          permissions associated with this order.
+        </Text>
+        <Text className="text-zinc-600">
+          If you do not recognize this request or wish to retain ownership, no
+          further action is required.
+        </Text>
+        <div className="w-full h-px bg-zinc-200" />
+        <TransferActions id={id} token={token} />
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/order/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-page-bg min-h-screen">
+            <ExchangeRequestTemplate
+                order={order as any}
+                returnReasons={return_reasons || []}
+            />
+        </div>
+    )
+}

package/templates/storefront/src/app/[countryCode]/(main)/order/return/[id]/page.tsx

@@ -0,0 +1,61 @@
+
+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 GuestReturnRequestPage(props: Props) {
+    const params = await props.params;
+
+    // retrieveOrder already handles guest tokens
+    const order = await retrieveOrder(params.id).catch(() => null)
+
+    if (!order) {
+        notFound()
+    }
+
+    // Check eligibility
+    if (!hasReturnableItems(order)) {
+        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={`/orders/${order.id}`} className="text-blue-600 hover:underline text-lg font-medium">Back to Order Details</a>
+            </div>
+        )
+    }
+
+    // Get cart ID for shipping options
+    const cartId = (order as any).cart_id
+
+    // 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 (
+        <div className="bg-page-bg min-h-screen">
+            <ReturnRequestTemplate
+                order={order}
+                shippingOptions={shippingOptions}
+                returnReasons={returnReasons}
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,33 @@
+import { retrieveOrder } from "@core/data/orders"
+import OrderDetailsTemplate from "@modules/order/templates/order-details-template"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+    params: Promise<{ id: string }>
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+    const params = await props.params
+    const order = await retrieveOrder(params.id).catch(() => null)
+
+    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 retrieveOrder(params.id).catch(() => null)
+
+    if (!order) {
+        notFound()
+    }
+
+    return <OrderDetailsTemplate order={order} />
+}

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

@@ -0,0 +1,24 @@
+import { Metadata } from "next"
+
+import { loadHomeData } from "@controllers/home/load-home-data"
+import { HomePage } from "@controllers/home/home-page"
+
+export const metadata: Metadata = {
+  title: "Premium Kids Fashion Store",
+  description:
+    "Explore Chocomelon's premium collection of kids' fashion. From playful styles to quality comfort, shop our curated range for ages 0 to 12. Quality materials, stunning designs.",
+}
+
+export default async function Home(props: {
+  params: Promise<{ countryCode: string }>
+}) {
+  const params = await props.params
+  const { countryCode } = params
+
+  const data = await loadHomeData(countryCode)
+  if (!data) {
+    return null
+  }
+
+  return <HomePage data={data} />
+}

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

@@ -0,0 +1,173 @@
+import { Metadata } from "next"
+import { Heading, Text } from "@medusajs/ui"
+
+export const metadata: Metadata = {
+  title: "Privacy Policy | Chocomelon",
+  description: "Our commitment to protecting your privacy and personal information.",
+}
+
+export default function PrivacyPolicyPage() {
+  return (
+    <div className="min-h-screen bg-[#FFFAFE] pb-16 sm:pb-24">
+      {/* Header Section */}
+      <div className="bg-[#04122C] text-white py-16 sm:py-24 mb-12 relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-64 h-64 bg-[#8B5AB1] opacity-20 rounded-full -mr-32 -mt-32 blur-3xl"></div>
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-pink-500 opacity-10 rounded-full -ml-32 -mb-32 blur-3xl"></div>
+        
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
+          <Heading level="h1" className="text-3xl sm:text-5xl font-extrabold mb-4 tracking-tight">
+            Privacy Policy
+          </Heading>
+          <Text className="text-gray-300 text-base sm:text-xl max-w-2xl mx-auto leading-relaxed font-light">
+            Your privacy is our top priority. Learn how Chocomelon protects and handles your personal information.
+          </Text>
+        </div>
+      </div>
+
+      {/* Content Section */}
+      <div className="max-w-4xl mx-auto px-3 sm:px-6 lg:px-8">
+        <div className="bg-[#FFFAFE] rounded-3xl shadow-xl shadow-gray-200/50 border border-gray-100 p-5 sm:p-10 md:p-16 space-y-10 sm:space-y-12">
+          
+          <section>
+            <div className="inline-flex items-center justify-center w-12 h-12 bg-blue-50 text-[#04122C] rounded-2xl mb-6 font-bold text-xl">
+              1
+            </div>
+            <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+              Introduction
+            </Heading>
+            <Text className="leading-relaxed text-gray-600 text-lg">
+              Welcome to Chocomelon. We value your privacy and are committed to protecting your personal data. This Privacy Policy explains how we collect, use, and safeguard your information when you visit our website and make purchases.
+            </Text>
+          </section>
+
+          <section>
+            <div className="inline-flex items-center justify-center w-12 h-12 bg-purple-50 text-[#8B5AB1] rounded-2xl mb-6 font-bold text-xl">
+              2
+            </div>
+            <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+              Information We Collect
+            </Heading>
+            <Text className="leading-relaxed text-gray-600 text-lg mb-6">
+              To provide the best shopping experience, we collect information that you provide directly to us:
+            </Text>
+            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {[
+                "Name and contact information",
+                "Secure billing and payment data",
+                "Order history and preferences",
+                "Customer support interactions"
+              ].map((item, i) => (
+                <li key={i} className="flex items-center gap-3 p-4 bg-gray-50 rounded-xl text-gray-700">
+                  <div className="w-2 h-2 rounded-full bg-[#8B5AB1]"></div>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          <section>
+            <div className="inline-flex items-center justify-center w-12 h-12 bg-pink-50 text-pink-500 rounded-2xl mb-6 font-bold text-xl">
+              3
+            </div>
+            <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+              How We Use Your Information
+            </Heading>
+            <Text className="leading-relaxed text-gray-600 text-lg mb-6">
+              Your data allows us to serve you better. We use it to:
+            </Text>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {[
+                { title: "Order Fulfillment", desc: "Process and deliver your favorite products." },
+                { title: "Personalization", desc: "Show you items you'll actually love." },
+                { title: "Communication", desc: "Keep you updated on orders and deals." },
+                { title: "Improvement", desc: "Enhance our website and services." }
+              ].map((item, i) => (
+                <div key={i} className="group p-5 border border-gray-100 rounded-2xl hover:border-purple-200 hover:bg-purple-50/30 transition-all">
+                  <h4 className="font-bold text-[#04122C] mb-1">{item.title}</h4>
+                  <p className="text-sm text-gray-500">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section>
+            <div className="inline-flex items-center justify-center w-12 h-12 bg-blue-50 text-[#04122C] rounded-2xl mb-6 font-bold text-xl">
+              4
+            </div>
+            <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+              Data Sharing and Security
+            </Heading>
+            <Text className="leading-relaxed text-gray-600 text-lg mb-6">
+              We never sell your data. We only share it with trusted partners necessary for our operations:
+            </Text>
+            <div className="flex flex-wrap gap-2 mb-6">
+              {["Payment Processors", "Shipping Partners", "Cloud Storage"].map((tag, i) => (
+                <span key={i} className="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium">
+                  {tag}
+                </span>
+              ))}
+            </div>
+            <Text className="leading-relaxed text-gray-600 text-lg italic bg-blue-50/50 p-6 rounded-2xl border-l-4 border-[#04122C]">
+              "We implement industry-standard security measures to protect your data from unauthorized access or disclosure."
+            </Text>
+          </section>
+
+          <section className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div>
+              <div className="inline-flex items-center justify-center w-12 h-12 bg-yellow-50 text-yellow-600 rounded-2xl mb-6 font-bold text-xl">
+                5
+              </div>
+              <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                Cookies
+              </Heading>
+              <Text className="leading-relaxed text-gray-600">
+                Our website uses cookies to enhance your browsing experience, remember your cart items, and analyze website traffic.
+              </Text>
+            </div>
+            <div>
+              <div className="inline-flex items-center justify-center w-12 h-12 bg-green-50 text-green-600 rounded-2xl mb-6 font-bold text-xl">
+                6
+              </div>
+              <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                Your Rights
+              </Heading>
+              <Text className="leading-relaxed text-gray-600">
+                You have the right to access, correct, or delete your personal information at any time.
+              </Text>
+            </div>
+          </section>
+
+          <section className="bg-blue-50/30 p-6 sm:p-8 rounded-3xl border border-blue-100/50">
+            <Heading level="h2" className="text-xl font-bold mb-3 text-[#04122C]">
+              Contact Us
+            </Heading>
+            <Text className="text-gray-600 mb-4">
+              If you have any privacy-related questions or concerns, please don't hesitate to reach out.
+            </Text>
+            <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-[#8B5AB1] font-semibold">
+              <span className="text-gray-400 font-normal">Email:</span>
+              <a href="mailto:chocomelonllp@gmail.com" className="hover:underline break-all sm:break-normal">chocomelonllp@gmail.com</a>
+            </div>
+          </section>
+
+          <section className="pt-12 border-t border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-4">
+            <p className="text-sm text-gray-400">
+              Last Updated: March 19, 2026
+            </p>
+            <div className="flex gap-3">
+              <div className="px-5 py-2 rounded-full bg-gradient-to-r from-[#04122C] to-blue-900 text-white text-[10px] font-bold shadow-lg shadow-blue-900/20 flex items-center gap-1.5 uppercase tracking-wider transition-transform hover:scale-105">
+                <div className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></div>
+                CP
+              </div>
+              <div className="px-5 py-2 rounded-full bg-gradient-to-r from-[#8B5AB1] to-purple-400 text-white text-[10px] font-bold shadow-lg shadow-purple-900/20 flex items-center gap-1.5 uppercase tracking-wider transition-transform hover:scale-105">
+                <div className="w-1.5 h-1.5 rounded-full bg-pink-300 animate-pulse"></div>
+                SEC
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
+