@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,193 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { listProducts } from "@core/data/products"
+import { getRegion, listRegions } from "@core/data/regions"
+import { ProductPage as ProductPageView } from "@controllers/product/product-page"
+import { HttpTypes } from "@medusajs/types"
+import { getImagesForVariant } from "@core/util/product"
+
+type Props = {
+  params: Promise<{ countryCode: string; handle: string }>
+  searchParams: Promise<{ v_id?: string }>
+}
+
+// During CI builds, skip static generation to avoid backend dependency
+export const dynamic = 'force-dynamic'
+export const dynamicParams = true
+export const revalidate = 0
+
+export async function generateStaticParams() {
+  try {
+    const countryCodes = await listRegions().then((regions) =>
+      regions?.map((r) => r.countries?.map((c) => c.iso_2)).flat()
+    )
+
+    if (!countryCodes) {
+      return []
+    }
+
+    const promises = countryCodes.map(async (country) => {
+      const { response } = await listProducts({
+        countryCode: country,
+        queryParams: { limit: 100, fields: "handle" },
+      })
+
+      return {
+        country,
+        products: response.products,
+      }
+    })
+
+    const countryProducts = await Promise.all(promises)
+
+    return countryProducts
+      .flatMap((countryData) =>
+        countryData.products.map((product) => ({
+          countryCode: countryData.country,
+          handle: product.handle,
+        }))
+      )
+      .filter((param) => param.handle)
+  } catch (error) {
+    return []
+  }
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  try {
+    const params = await props.params
+    const { handle } = params
+    const region = await getRegion(params.countryCode)
+
+    if (!region) {
+      // During build, if backend is unavailable, return default metadata
+      if (process.env.NODE_ENV === 'production' || process.env.CI) {
+        return {
+          title: 'Product | Chocomelon',
+          description: 'Product',
+        }
+      }
+      notFound()
+    }
+
+    const product = await listProducts({
+      countryCode: params.countryCode,
+      queryParams: { handle },
+    }).then(({ response }) => response.products[0])
+
+    if (!product) {
+      // During build, if backend is unavailable, return default metadata
+      if (process.env.NODE_ENV === 'production' || process.env.CI) {
+        return {
+          title: 'Product | Chocomelon',
+          description: 'Product',
+        }
+      }
+      notFound()
+    }
+
+    return {
+      title: `${product.title} | Chocomelon`,
+      description: `${product.title}`,
+      openGraph: {
+        title: `${product.title} | Chocomelon`,
+        description: `${product.title}`,
+        images: product.thumbnail ? [product.thumbnail] : [],
+      },
+    }
+  } catch (error: any) {
+    // During build, if backend is unavailable, return default metadata
+    if (process.env.NODE_ENV === 'production' || process.env.CI) {
+      return {
+        title: 'Product | Chocomelon',
+        description: 'Product',
+      }
+    }
+    notFound()
+  }
+}
+
+export default async function ProductPage(props: Props) {
+  const params = await props.params
+  const searchParams = await props.searchParams
+
+
+
+  const region = await getRegion(params.countryCode)
+
+  if (!region) {
+    notFound()
+  }
+
+  const selectedVariantId = searchParams.v_id
+
+
+
+  const pricedProduct = await listProducts({
+    countryCode: params.countryCode,
+    queryParams: { handle: params.handle },
+  }).then(({ response }) => {
+    const product = response.products[0]
+    return product
+  })
+
+  const images = getImagesForVariant(pricedProduct, selectedVariantId)
+
+  if (!pricedProduct) {
+    notFound()
+  }
+
+  // Detailed product information for single product page
+  const productDetails = {
+    id: pricedProduct.id,
+    title: pricedProduct.title,
+    handle: pricedProduct.handle,
+    description: pricedProduct.description,
+    status: pricedProduct.status,
+    thumbnail: pricedProduct.thumbnail,
+    images: pricedProduct.images?.map((img: any) => ({
+      id: img.id,
+      url: img.url,
+    })) || [],
+    imagesCount: images?.length || 0,
+    selectedVariantId: selectedVariantId,
+    variants: pricedProduct.variants?.map((v: any) => ({
+      id: v.id,
+      sku: v.sku,
+      title: v.title,
+      inventory_quantity: v.inventory_quantity,
+      calculated_price: v.calculated_price?.calculated_amount
+        ? `${(v.calculated_price.calculated_amount / 100).toFixed(2)} ${v.calculated_price.currency_code || ''}`
+        : 'N/A',
+      imagesCount: v.images?.length || 0,
+      options: v.options?.map((o: any) => ({
+        option_id: o.option_id,
+        value: o.value,
+      })) || [],
+    })) || [],
+    variantsCount: pricedProduct.variants?.length || 0,
+    tags: pricedProduct.tags?.map((t: any) => t.value) || [],
+    metadata: pricedProduct.metadata || {},
+    average_rating: (pricedProduct as any).average_rating,
+    total_rating_count: (pricedProduct as any).total_rating_count,
+    total_rating_sum: (pricedProduct as any).total_rating_sum,
+    created_at: pricedProduct.created_at,
+    updated_at: pricedProduct.updated_at,
+    region: {
+      id: region.id,
+      name: region.name,
+      currency_code: region.currency_code,
+    },
+  }
+
+
+
+  return (
+    <ProductPageView
+      product={pricedProduct}
+      region={region}
+      countryCode={params.countryCode}
+      images={images || []}
+    />
+  )
+}

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

@@ -0,0 +1,192 @@
+"use client"
+
+import { useState, useEffect, Suspense } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { completePasswordReset } from "@core/data/customer-registration"
+import ErrorMessage from "@modules/checkout/components/error-message"
+import Lock from "@modules/common/icons/lock"
+import Eye from "@modules/common/icons/eye"
+import EyeOff from "@modules/common/icons/eye-off"
+import Envelope from "@modules/common/icons/envelope"
+
+function ResetPasswordForm() {
+    const router = useRouter()
+    const searchParams = useSearchParams()
+
+    const [token, setToken] = useState<string | null>(null)
+    const [email, setEmail] = useState("")
+    const [password, setPassword] = useState("")
+    const [confirmPassword, setConfirmPassword] = useState("")
+    const [showPassword, setShowPassword] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const [success, setSuccess] = useState(false)
+
+    useEffect(() => {
+        const t = searchParams.get("token")
+        const e = searchParams.get("email")
+        if (t) setToken(t)
+        if (e) setEmail(e)
+    }, [searchParams])
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+
+        if (!token) {
+            setError("Invalid or missing reset token.")
+            return
+        }
+
+        if (password !== confirmPassword) {
+            setError("Passwords do not match.")
+            return
+        }
+
+        setIsSubmitting(true)
+        setError(null)
+
+        try {
+            const result = await completePasswordReset({
+                email,
+                password,
+                token
+            })
+
+            if (result.success) {
+                setSuccess(true)
+                setTimeout(() => {
+                    router.push("/account")
+                }, 3000)
+            } else {
+                setError(result.error || "Failed to reset password")
+            }
+        } catch (err: any) {
+            setError(err.message || "An error occurred")
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    if (success) {
+        return (
+            <div className="w-full max-w-md bg-surface rounded-2xl shadow-lg p-8 text-center">
+                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <svg className="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                </div>
+                <h1 className="text-2xl font-bold text-heading mb-2">Password Reset Successful</h1>
+                <p className="text-muted mb-6">Your password has been reset successfully. Redirecting you to login...</p>
+                <button
+                    onClick={() => router.push("/account")}
+                    className="w-full py-3 account-btn-primary font-bold rounded-full"
+                >
+                    Go to Login
+                </button>
+            </div>
+        )
+    }
+
+    if (!token) {
+        return (
+            <div className="w-full max-w-md bg-surface rounded-2xl shadow-lg p-8 text-center">
+                <h1 className="text-2xl font-bold text-heading mb-2">Invalid Link</h1>
+                <p className="text-muted mb-6">This password reset link is invalid or has expired.</p>
+                <button
+                    onClick={() => router.push("/account")}
+                    className="w-full py-3 account-btn-primary font-bold rounded-full"
+                >
+                    Return to Login
+                </button>
+            </div>
+        )
+    }
+
+    return (
+        <div className="w-full max-w-md bg-surface rounded-2xl shadow-lg p-8">
+            <h1 className="text-2xl font-bold text-heading mb-2 text-center">Reset Password</h1>
+            <p className="text-muted mb-8 text-center">Enter your email and a new password for your account.</p>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                    <div className="relative">
+                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                            <Envelope size="20" color="#9CA3AF" />
+                        </div>
+                        <input
+                            type="email"
+                            placeholder="Email"
+                            required
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            className="w-full pl-12 pr-4 py-3 text-sm account-input rounded-full"
+                        />
+                    </div>
+                </div>
+
+                <div>
+                    <div className="relative">
+                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                            <Lock size="20" color="#9CA3AF" />
+                        </div>
+                        <input
+                            type={showPassword ? "text" : "password"}
+                            placeholder="New Password"
+                            required
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            className="w-full pl-12 pr-12 py-3 text-sm account-input rounded-full"
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute inset-y-0 right-0 pr-4 flex items-center text-muted hover:text-heading"
+                        >
+                            {showPassword ? <EyeOff size="20" /> : <Eye size="20" />}
+                        </button>
+                    </div>
+                </div>
+
+                <div>
+                    <div className="relative">
+                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                            <Lock size="20" color="#9CA3AF" />
+                        </div>
+                        <input
+                            type={showPassword ? "text" : "password"}
+                            placeholder="Confirm New Password"
+                            required
+                            value={confirmPassword}
+                            onChange={(e) => setConfirmPassword(e.target.value)}
+                            className="w-full pl-12 pr-12 py-3 text-sm account-input rounded-full"
+                        />
+                    </div>
+                </div>
+
+                <ErrorMessage error={error} />
+
+                <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full py-3 account-btn-primary font-bold rounded-full"
+                >
+                    {isSubmitting ? "Resetting..." : "Reset Password"}
+                </button>
+            </form>
+        </div>
+    )
+}
+
+export default function ResetPasswordPage() {
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-page-bg px-4">
+            <Suspense fallback={
+                <div className="w-full max-w-md bg-surface rounded-2xl shadow-lg p-8 text-center">
+                    <p>Loading...</p>
+                </div>
+            }>
+                <ResetPasswordForm />
+            </Suspense>
+        </div>
+    )
+}

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

@@ -0,0 +1,72 @@
+import { Metadata } from "next"
+
+import { listCollections } from "@core/data/collections"
+import { getDynamicFilters } from "@core/data/products"
+import { listCategories } from "@core/data/categories"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import StoreTemplate from "@modules/store/templates"
+
+export const metadata: Metadata = {
+  title: "Shop All Products",
+  description: "Browse Chocomelon's complete collection of premium kids' fashion. Perfect styles for all ages, from age-specific groups to category favorites.",
+}
+
+type Params = {
+  searchParams: Promise<{
+    sortBy?: SortOptions
+    page?: string
+    collection?: string | string[]
+    category?: string | string[]
+    gender?: string | string[]
+    type?: string | string[]
+    material?: string | string[]
+    color?: string | string[]
+    min_price?: string
+    max_price?: string
+    q?: string
+  }>
+  params: Promise<{
+    countryCode: string
+  }>
+}
+
+export default async function StorePage(props: Params) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+  const { sortBy, page, collection, category, gender, type, material, color, min_price, max_price, q } = searchParams
+
+  const [{ collections }, categories, dynamicFilters] = await Promise.all([
+    listCollections(),
+    listCategories(),
+    getDynamicFilters(params.countryCode)
+  ])
+
+  // Filter for top-level categories or all for now
+  const categoryOptions = categories.map(c => ({
+    value: c.id,
+    label: c.name || ""
+  }))
+
+  return (
+    <StoreTemplate
+      sortBy={sortBy}
+      page={page}
+      countryCode={params.countryCode}
+      collections={collections}
+      collection={collection}
+      category={category}
+      categoryOptions={categoryOptions}
+      gender={gender}
+      type={type}
+      material={material}
+      color={color}
+      minPrice={min_price}
+      maxPrice={max_price}
+      genderOptions={dynamicFilters.genders}
+      typeOptions={dynamicFilters.productTypes}
+      materialOptions={dynamicFilters.materials}
+      colorOptions={dynamicFilters.colors}
+      q={q}
+    />
+  )
+}

package/templates/storefront/src/app/[countryCode]/(main)/terms-of-use/page.tsx

@@ -0,0 +1,179 @@
+import { Metadata } from "next"
+import { Heading, Text } from "@medusajs/ui"
+
+export const metadata: Metadata = {
+  title: "Terms of Use | Chocomelon",
+  description: "Read our terms and conditions for using the Chocomelon store.",
+}
+
+export default function TermsOfUsePage() {
+  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">
+        {/* Decorative elements */}
+        <div className="absolute top-0 left-0 w-96 h-96 bg-[#8B5AB1] opacity-10 rounded-full -ml-48 -mt-48 blur-3xl"></div>
+        <div className="absolute bottom-0 right-0 w-64 h-64 bg-blue-500 opacity-10 rounded-full -mr-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">
+            Terms of Use
+          </Heading>
+          <Text className="text-gray-300 text-base sm:text-xl max-w-2xl mx-auto leading-relaxed font-light">
+            Clear and simple terms for your peace of mind while shopping with Chocomelon.
+          </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 overflow-hidden">
+          <div className="p-5 sm:p-10 md:p-16 space-y-12 sm:space-y-16">
+            
+            <section className="relative">
+              <div className="flex flex-col md:flex-row gap-8 items-start">
+                <div className="flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-blue-50 text-[#04122C] rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm">
+                  01
+                </div>
+                <div>
+                  <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                    Agreement to Terms
+                  </Heading>
+                  <Text className="leading-relaxed text-gray-600 text-lg">
+                    By accessing or using the Chocomelon website, you agree to be bound by these Terms of Use and our Privacy Policy. If you do not agree with any part of these terms, you must not use our services.
+                  </Text>
+                </div>
+              </div>
+            </section>
+
+            <section className="relative">
+              <div className="flex flex-col md:flex-row gap-8 items-start">
+                <div className="flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-purple-50 text-[#8B5AB1] rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm">
+                  02
+                </div>
+                <div>
+                  <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                    Products and Pricing
+                  </Heading>
+                  <Text className="leading-relaxed text-gray-600 text-lg">
+                    We strive to provide accurate descriptions and pricing for all products. However, we do not warrant that product descriptions or other content are error-free. We reserve the right to correct any errors and to change or update information at any time without prior notice.
+                  </Text>
+                </div>
+              </div>
+            </section>
+
+            <section className="relative">
+              <div className="flex flex-col md:flex-row gap-8 items-start">
+                <div className="flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-pink-50 text-pink-500 rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm">
+                  03
+                </div>
+                <div>
+                  <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                    Orders and Payment
+                  </Heading>
+                  <Text className="leading-relaxed text-gray-600 text-lg mb-6">
+                    All orders placed through the website are subject to acceptance. We reserve the right to refuse or cancel any order for any reason.
+                  </Text>
+                  <div className="bg-gray-50 rounded-2xl p-6 border border-gray-100">
+                    <Text className="text-sm font-semibold text-[#04122C] uppercase tracking-wider mb-2">Secure Payments</Text>
+                    <Text className="text-gray-500">Payments must be made through our approved payment gateways at the time of purchase. We use industry-standard encryption to keep your data safe.</Text>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section className="relative">
+              <div className="flex flex-col md:flex-row gap-8 items-start">
+                <div className="flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-blue-50 text-[#04122C] rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm">
+                  04
+                </div>
+                <div>
+                  <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                    Shipping and Delivery
+                  </Heading>
+                  <Text className="leading-relaxed text-gray-600 text-lg">
+                    Delivery times are estimates and not guaranteed. Chocomelon is not responsible for delays caused by shipping carriers or customs. Risk of loss and title for items purchased pass to you upon delivery to the carrier.
+                  </Text>
+                </div>
+              </div>
+            </section>
+
+            <section className="relative">
+              <div className="flex flex-col md:flex-row gap-8 items-start">
+                <div className="flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-purple-50 text-[#8B5AB1] rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm">
+                  05
+                </div>
+                <div>
+                  <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                    Returns and Refunds
+                  </Heading>
+                  <Text className="leading-relaxed text-gray-600 text-lg">
+                    Our return and refund policy is governed by specific rules visible on our returns page. Generally, items must be in original condition with tags attached to be eligible for return.
+                  </Text>
+                </div>
+              </div>
+            </section>
+
+            <section className="relative">
+              <div className="flex flex-col md:flex-row gap-8 items-start">
+                <div className="flex-shrink-0 w-10 h-10 sm:w-14 sm:h-14 bg-yellow-50 text-yellow-600 rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl shadow-sm">
+                  06
+                </div>
+                <div>
+                  <Heading level="h2" className="text-2xl font-bold mb-4 text-[#04122C]">
+                    Intellectual Property
+                  </Heading>
+                  <Text className="leading-relaxed text-gray-600 text-lg">
+                    All content on this website, including text, graphics, logos, and images, is the property of Chocomelon and is protected by intellectual property laws. You may not use our content without explicit written permission.
+                  </Text>
+                </div>
+              </div>
+            </section>
+
+            <div className="pt-12 border-t border-gray-100">
+              <div className="bg-[#04122C] rounded-3xl p-6 sm:p-10 text-white relative overflow-hidden">
+                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl"></div>
+                <Heading level="h3" className="text-xl font-bold mb-4 relative z-10">
+                  Limitation of Liability
+                </Heading>
+                <Text className="text-gray-300 relative z-10 leading-relaxed">
+                  Chocomelon shall not be liable for any indirect, incidental, special, or consequential damages resulting from the use or inability to use our services or products. These terms shall be governed by and construed in accordance with the laws of India.
+                </Text>
+              </div>
+            </div>
+
+            <section className="bg-purple-50/30 p-6 sm:p-8 rounded-3xl border border-purple-100/50">
+              <Heading level="h2" className="text-xl font-bold mb-3 text-[#04122C]">
+                Questions about our Terms?
+              </Heading>
+              <Text className="text-gray-600 mb-4">
+                If you have any questions or need clarification on our Terms of Use, please reach out to our legal team.
+              </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-8 flex flex-col sm:flex-row justify-between items-center gap-4">
+              <p className="text-sm text-gray-400 font-medium">
+                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 uppercase tracking-widest flex items-center gap-1.5 transition-transform hover:scale-105">
+                  <div className="w-1.5 h-1.5 rounded-full bg-blue-400"></div>
+                  OFFICIAL
+                </div>
+                <div className="px-5 py-2 rounded-full bg-gradient-to-r from-green-600 to-emerald-400 text-white text-[10px] font-bold shadow-lg shadow-green-900/20 uppercase tracking-widest flex items-center gap-1.5 transition-transform hover:scale-105">
+                  <div className="w-1.5 h-1.5 rounded-full bg-green-300"></div>
+                  VERIFIED
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,19 @@
+import { Metadata } from "next"
+import WishlistTemplate from "@modules/wishlist/templates"
+
+type Props = {
+  params: Promise<{ countryCode: string }>
+}
+
+export const metadata: Metadata = {
+  title: "My Wishlist",
+  description: "View your wishlist items",
+}
+
+export default async function WishlistPage(props: Props) {
+  const params = await props.params
+  const countryCode = params.countryCode
+
+  return <WishlistTemplate countryCode={countryCode} />
+}
+