@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/app/api/meta/event/route.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from "next/server"
+
+export async function POST(req: NextRequest) {
+    try {
+        const body = await req.json()
+        const pixelId = process.env.META_PIXEL_ID || process.env.FB_PIXEL_ID
+        const accessToken = process.env.META_ACCESS_TOKEN || process.env.FB_ACCESS_TOKEN
+
+        if (!pixelId || !accessToken) {
+            return NextResponse.json({ success: false, error: "Configuration missing" }, { status: 500 })
+        }
+
+        const {
+            event_name = body.event || "Lead",
+            action_source = "website",
+            event_source_url,
+            event_id, // For Deduplication
+            custom_data = {},
+            user_data = {},
+        } = body
+
+        // Prepare payload for Meta CAPI
+        const payload = {
+            data: [
+                {
+                    event_name,
+                    event_time: Math.floor(Date.now() / 1000),
+                    action_source,
+                    event_id, // Included for Deduplication
+                    event_source_url: event_source_url || req.headers.get("referer") || "",
+                    user_data: {
+                        // @ts-ignore
+                        client_ip_address: req.ip || req.headers.get("x-forwarded-for")?.split(",")[0] || "",
+                        client_user_agent: req.headers.get("user-agent") || "",
+                        ...user_data,
+                    },
+                    custom_data,
+                },
+            ],
+        }
+
+        const response = await fetch(
+            `https://graph.facebook.com/v21.0/${pixelId}/events?access_token=${accessToken}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(payload),
+            }
+        )
+
+        const result = await response.json()
+
+        if (response.ok) {
+            return NextResponse.json({ success: true, data: result })
+        } else {
+            return NextResponse.json({ success: false, error: result }, { status: response.status })
+        }
+    } catch (error: any) {
+        return NextResponse.json({ success: false, error: error.message }, { status: 500 })
+    }
+}

package/templates/storefront/src/app/auth/customer/google/callback/page.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import { useEffect, useRef, useState, Suspense } from "react"
+import { useSearchParams, useRouter } from "next/navigation"
+import { handleGoogleCallback, handleGoogleAuthCallback } from "@core/data/customer"
+
+const decodeToken = (token: string) => {
+  try {
+    const payload = token.split('.')[1]
+    const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'))
+    return JSON.parse(decoded)
+  } catch {
+    return null
+  }
+}
+
+function GoogleCallbackContent() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string>()
+  const handledRef = useRef(false)
+
+  useEffect(() => {
+    if (handledRef.current) {
+      return
+    }
+    handledRef.current = true
+
+    const handleCallback = async () => {
+      try {
+        const params: Record<string, string> = {}
+        searchParams.forEach((value, key) => (params[key] = value))
+
+        if (!params.code || !params.state) {
+          throw new Error("Missing authentication parameters.")
+        }
+
+        // Use server-side action instead of direct backend call
+        const authResult = await handleGoogleAuthCallback(params)
+
+        if (authResult.error) {
+          throw new Error(authResult.error)
+        }
+
+        const token = authResult.token
+        if (!token || typeof token !== "string") throw new Error("No token received.")
+
+        const decoded = decodeToken(token)
+        const name = decoded?.user_metadata?.name as string | undefined
+        const nameParts = name?.split(" ") || []
+
+        // Check if actor_id exists in token
+        const hasActorId = decoded && decoded.actor_id
+
+        const callbackResult = await handleGoogleCallback(
+          token,
+          decoded?.user_metadata?.email || decoded?.email,
+          nameParts[0] || undefined,
+          nameParts.slice(1).join(" ") || undefined
+        )
+
+        if (callbackResult.error) throw new Error(callbackResult.error)
+
+        // Get saved country code from localStorage, fallback to pathname or 'us'
+        const savedCountryCode = localStorage.getItem("googleLoginCountryCode")
+        const countryCode = savedCountryCode || window.location.pathname.split('/')[1] || 'us'
+        if (savedCountryCode) {
+          localStorage.removeItem("googleLoginCountryCode")
+        }
+
+        // Check if it's a "keep-me-here" context (Wishlist or Review Popups)
+        const redirectUrl = localStorage.getItem("loginRedirectUrl")
+        const hasKeepContext = redirectUrl?.includes("login_context=keep")
+
+        if (redirectUrl && hasKeepContext) {
+          localStorage.removeItem("loginRedirectUrl")
+          window.location.href = redirectUrl
+        } else {
+          // DEFAULT: Always Home Page
+          window.location.href = `/${countryCode}`
+          if (redirectUrl) {
+            localStorage.removeItem("loginRedirectUrl")
+          }
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Authentication failed.")
+        setLoading(false)
+      }
+    }
+
+    handleCallback()
+  }, [searchParams, router])
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-500 mb-4">{error}</p>
+          <button onClick={() => router.push("/account")} className="px-4 py-2 account-btn-primary rounded-lg">
+            Go to Login
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <p>Processing Google authentication...</p>
+    </div>
+  )
+}
+
+export default function GoogleCallbackPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen flex items-center justify-center">
+        <p>Loading...</p>
+      </div>
+    }>
+      <GoogleCallbackContent />
+    </Suspense>
+  )
+}
+

package/templates/storefront/src/app/layout.tsx

@@ -0,0 +1,104 @@
+import { getBaseURL } from "@core/util/env"
+import { Metadata } from "next"
+import Script from "next/script"
+import "@theme/tokens/theme.css"
+import "styles/globals.css"
+import CookieConsent from "@modules/layout/components/cookie-consent"
+
+export const metadata: Metadata = {
+  metadataBase: new URL(getBaseURL()),
+  title: {
+    template: "%s | Chocomelon",
+    default: "Chocomelon | Premium Kids Wear & Fashion Shop",
+  },
+  description: "Experience the magic of childhood with Chocomelon. Premium quality kids wear, playful styles for your little ones, and curated fashion for children of all ages/years. Shop the best kids' clothes today.",
+  openGraph: {
+    title: "Chocomelon | Premium Kids Wear Shop",
+    description: "Discover the best in kids wear. Quality materials, little styles, and playful designs for children of all years and ages.",
+    url: "https://chocomelon.in",
+    siteName: "Chocomelon",
+    images: [
+      {
+        url: "/appbanner.png",
+        width: 1200,
+        height: 630,
+        alt: "Chocomelon - Premium Kids Wear",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Chocomelon | Premium Kids Wear & Shop",
+    description: "Premium kids wear for all years and ages. Shop our curated collection for your little ones today.",
+    images: ["/appbanner.png"],
+  },
+  icons: {
+    icon: "/favicon.png",
+    apple: "/favicon.png",
+  },
+  alternates: {
+    canonical: "https://chocomelon.in",
+  },
+}
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en" data-mode="light" suppressHydrationWarning>
+      <head>
+        <Script
+          id="gtm-consent-default"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              if(!localStorage.getItem('cookie_consent')){
+                gtag('consent', 'default', {
+                  'ad_storage': 'denied',
+                  'analytics_storage': 'denied',
+                  'ad_user_data': 'denied',
+                  'ad_personalization': 'denied'
+                });
+              } else {
+                const consent = localStorage.getItem('cookie_consent');
+                gtag('consent', 'default', {
+                  'ad_storage': consent === 'granted' ? 'granted' : 'denied',
+                  'analytics_storage': consent === 'granted' ? 'granted' : 'denied',
+                  'ad_user_data': consent === 'granted' ? 'granted' : 'denied',
+                  'ad_personalization': consent === 'granted' ? 'granted' : 'denied'
+                });
+              }
+            `,
+          }}
+        />
+        <Script
+          id="gtm-script"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','GTM-MDPRFG8W');
+            `,
+          }}
+        />
+      </head>
+      <body className="bg-page-bg font-sans antialiased">
+        <noscript>
+          <iframe
+            src="https://www.googletagmanager.com/ns.html?id=GTM-MDPRFG8W"
+            height="0"
+            width="0"
+            style={{ display: "none", visibility: "hidden" }}
+          ></iframe>
+        </noscript>
+        <main className="relative">{props.children}</main>
+        <CookieConsent />
+      </body>
+    </html>
+  )
+}

package/templates/storefront/src/app/not-found.tsx

@@ -0,0 +1,30 @@
+import { ArrowUpRightMini } from "@medusajs/icons"
+import { Text } from "@medusajs/ui"
+import { Metadata } from "next"
+import Link from "next/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>
+      <Link
+        className="flex gap-x-1 items-center group"
+        href="/"
+      >
+        <Text className="text-ui-fg-interactive">Go to frontpage</Text>
+        <ArrowUpRightMini
+          className="group-hover:rotate-45 ease-in-out duration-150"
+          color="var(--fg-interactive)"
+        />
+      </Link>
+    </div>
+  )
+}

package/templates/storefront/src/app/robots.ts

@@ -0,0 +1,15 @@
+import { MetadataRoute } from 'next'
+import { getBaseURL } from '@core/util/env'
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = getBaseURL()
+
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/checkout', '/account'],
+    },
+    sitemap: `${baseUrl}/sitemap.xml`,
+  }
+}

package/templates/storefront/src/app/sitemap.ts

@@ -0,0 +1,65 @@
+import { MetadataRoute } from 'next'
+import { listProducts } from '@core/data/products'
+import { listCategories } from '@core/data/categories'
+import { listCollections } from '@core/data/collections'
+import { getBaseURL } from '@core/util/env'
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = getBaseURL()
+
+  // Static routes
+  const routes = [
+    '',
+    '/store',
+    '/cart',
+    '/account',
+    '/help',
+    '/contact',
+    '/privacy-policy',
+    '/terms-of-use',
+  ].map((route) => ({
+    url: `${baseUrl}${route}`,
+    lastModified: new Date(),
+    changeFrequency: 'daily' as const,
+    priority: route === '' ? 1 : 0.8,
+  }))
+
+  try {
+    // Dynamic routes - Categories
+    const categories = await listCategories()
+    const categoryRoutes = categories.map((c) => ({
+      url: `${baseUrl}/categories/${c.handle}`,
+      lastModified: new Date(c.updated_at || new Date()),
+      changeFrequency: 'weekly' as const,
+      priority: 0.7,
+    }))
+
+    // Dynamic routes - Collections 
+    const { collections } = await listCollections()
+    const collectionRoutes = collections.map((c) => ({
+      url: `${baseUrl}/collections/${c.handle}`,
+      lastModified: new Date(c.updated_at || new Date()),
+      changeFrequency: 'weekly' as const,
+      priority: 0.7,
+    }))
+
+    // Dynamic routes - Products
+    // Fetching up to 100 products for sitemap
+    const { response: { products } } = await listProducts({
+      countryCode: 'in', // Default country code
+      queryParams: { limit: 100 }
+    })
+    
+    const productRoutes = products.map((p) => ({
+      url: `${baseUrl}/products/${p.handle}`,
+      lastModified: new Date(p.updated_at || new Date()),
+      changeFrequency: 'daily' as const,
+      priority: 0.9,
+    }))
+
+    return [...routes, ...categoryRoutes, ...collectionRoutes, ...productRoutes]
+  } catch (error) {
+    console.error('Error generating sitemap:', error)
+    return routes
+  }
+}

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

@@ -0,0 +1,160 @@
+"use client"
+
+import React, { useState } from "react"
+import { Button, Heading, Text, Input } from "@medusajs/ui"
+import Modal from "@modules/common/components/modal"
+import Spinner from "@modules/common/icons/spinner"
+import {
+    requestAccountDeletion,
+    confirmAccountDeletion,
+} from "@core/data/customer-registration"
+import { signout } from "@core/data/customer"
+import { useParams } from "next/navigation"
+
+const AccountDeletion = ({ customerEmail, hideHeader = false }: { customerEmail: string, hideHeader?: boolean }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false)
+    const [step, setStep] = useState<"initial" | "otp" | "success">("initial")
+    const [otp, setOtp] = useState("")
+    const [token, setToken] = useState("")
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const params = useParams()
+
+    const handleOpenModal = () => {
+        setStep("initial")
+        setError(null)
+        setOtp("")
+        setIsModalOpen(true)
+    }
+
+    const handleRequestDeletion = async () => {
+        setIsLoading(true)
+        setError(null)
+        const result = await requestAccountDeletion(customerEmail)
+        if (result.success && result.token) {
+            setToken(result.token)
+            setStep("otp")
+        } else {
+            setError(result.error || "Failed to initiate deletion request")
+        }
+        setIsLoading(false)
+    }
+
+    const handleConfirmDeletion = async () => {
+        setIsLoading(true)
+        setError(null)
+        const result = await confirmAccountDeletion(token, otp)
+        if (result.success) {
+            setStep("success")
+            // Log out user after successful confirmation
+            setTimeout(async () => {
+                setIsModalOpen(false)
+                const countryCode = (params.countryCode as string) || "in"
+                await signout(countryCode)
+            }, 3000)
+        } else {
+            setError(result.error || "Invalid OTP")
+        }
+        setIsLoading(false)
+    }
+
+    return (
+        <div className={hideHeader ? "" : "mt-8 border-t border-gray-100 pt-8"}>
+            {!hideHeader && (
+                <div className="flex flex-col gap-y-2 mb-4">
+                    <Heading level="h2" className="text-lg font-bold text-heading">Delete account</Heading>
+                    <Text className="text-gray-500">Once you delete your account, you will lose all your data. This action is not immediate and can be cancelled within a grace period.</Text>
+                </div>
+            )}
+
+            {hideHeader ? (
+                <button
+                    type="button"
+                    onClick={handleOpenModal}
+                    className="w-full h-11 bg-red-600 text-inverse rounded-[30px] font-bold text-sm shadow-lg shadow-red-200 hover:bg-red-700 transition-all"
+                >
+                    Delete Account
+                </button>
+            ) : (
+                <Button
+                    variant="danger"
+                    onClick={handleOpenModal}
+                    className="w-fit"
+                >
+                    Delete Account
+                </Button>
+            )}
+
+            <Modal isOpen={isModalOpen} close={() => setIsModalOpen(false)} size="small">
+                <Modal.Body>
+                    <div className="flex flex-col gap-y-6 py-4 text-center">
+                        {step === "initial" ? (
+                            <>
+                                <Heading level="h2" className="text-xl font-bold">Delete Account?</Heading>
+                                <Text className="text-gray-500">Are you sure you want to delete your account? A verification code will be sent to your email.</Text>
+                                {error && <Text className="text-red-500 text-sm">{error}</Text>}
+                                <div className="flex justify-center gap-x-4 mt-4">
+                                    <Button variant="secondary" onClick={() => setIsModalOpen(false)}>Cancel</Button>
+                                    <Button variant="danger" onClick={handleRequestDeletion} disabled={isLoading}>
+                                        {isLoading ? <Spinner /> : "Yes, Send Code"}
+                                    </Button>
+                                </div>
+                            </>
+                        ) : step === "otp" ? (
+                            <>
+                                <Heading level="h2" className="text-xl font-bold">Verify Deletion</Heading>
+                                <Text className="text-gray-500">Enter the 6-digit code sent to {customerEmail}</Text>
+                                <div className="relative flex justify-center gap-x-2 mt-6">
+                                    {[0, 1, 2, 3, 4, 5].map((index) => (
+                                        <div
+                                            key={index}
+                                            className={`w-10 h-12 flex items-center justify-center border-2 rounded-lg text-xl font-bold transition-all duration-200 ${otp.length === index
+                                                    ? "border-brand-accent ring-2 ring-brand-accent/10 bg-white"
+                                                    : otp.length > index
+                                                        ? "border-gray-400 bg-white"
+                                                        : "border-gray-200 bg-gray-50/50"
+                                                }`}
+                                        >
+                                            {otp[index] || ""}
+                                        </div>
+                                    ))}
+                                    <input
+                                        type="text"
+                                        maxLength={6}
+                                        className="absolute inset-0 opacity-0 cursor-pointer"
+                                        value={otp}
+                                        onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                                        autoFocus
+                                    />
+                                </div>
+                                {error && <Text className="text-red-500 text-sm mt-2">{error}</Text>}
+                                <Button
+                                    variant="danger"
+                                    className="mt-6 w-full"
+                                    onClick={handleConfirmDeletion}
+                                    disabled={isLoading || otp.length !== 6}
+                                >
+                                    {isLoading ? <Spinner /> : "Confirm Deletion"}
+                                </Button>
+                            </>
+                        ) : (
+                            <div className="flex flex-col items-center text-center py-8">
+                                <div className="w-20 h-20 bg-green-50 rounded-full flex items-center justify-center mb-6 shadow-sm border border-green-100 animate-in zoom-in duration-300">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                                        <polyline points="20 6 9 17 4 12"></polyline>
+                                    </svg>
+                                </div>
+                                <Heading level="h2" className="text-2xl font-bold text-heading mb-2">Deletion Scheduled</Heading>
+                                <Text className="text-gray-600 max-w-[280px] mx-auto">
+                                    Your account is scheduled for deletion. You will be logged out shortly.
+                                </Text>
+                            </div>
+                        )}
+                    </div>
+                </Modal.Body>
+            </Modal>
+        </div>
+    )
+}
+
+export default AccountDeletion