@pradip1995/storefront-controllers 1.0.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@pradip1995/storefront-controllers",
+  "version": "1.0.0",
+  "description": "Medusa storefront page controllers — data loading and composition",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SmartByteLabs/medusa-storefront-kit.git",
+    "directory": "packages/storefront-controllers"
+  },
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./account/login-page": "./src/account/login-page.tsx",
+    "./account/load-account-data": "./src/account/load-account-data.ts",
+    "./cart/cart-page": "./src/cart/cart-page.tsx",
+    "./cart/load-cart-data": "./src/cart/load-cart-data.ts",
+    "./checkout/checkout-page": "./src/checkout/checkout-page.tsx",
+    "./checkout/load-checkout-data": "./src/checkout/load-checkout-data.ts",
+    "./home/home-page": "./src/home/home-page.tsx",
+    "./home/load-home-data": "./src/home/load-home-data.ts",
+    "./layout/main-layout": "./src/layout/main-layout.tsx",
+    "./layout/load-layout-data": "./src/layout/load-layout-data.ts",
+    "./order/order-details-controller": "./src/order/order-details-controller.tsx",
+    "./order/load-order-data": "./src/order/load-order-data.ts",
+    "./product/product-page": "./src/product/product-page.tsx",
+    "./product/product-actions-wrapper": "./src/product/product-actions-wrapper.tsx"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=19",
+    "@pradip1995/commerce-core": "1.0.0",
+    "@pradip1995/storefront-registry": "1.0.0"
+  },
+  "devDependencies": {
+    "@medusajs/types": "latest",
+    "@types/react": "^19",
+    "eslint": "^8.57.0",
+    "next": "15.3.8",
+    "react": "19.0.3",
+    "typescript": "^5.7.2",
+    "@pradip1995/commerce-core": "1.0.0",
+    "@pradip1995/storefront-registry": "1.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
+    "typecheck:full": "tsc --noEmit",
+    "lint": "tsc --noEmit -p tsconfig.typecheck.json"
+  }
+}

package/src/account/load-account-data.ts

@@ -0,0 +1,5 @@
+import type { AccountPageData } from "@core/types/account"
+
+export async function loadAccountData(countryCode: string): Promise<AccountPageData> {
+  return { countryCode }
+}

package/src/account/login-page.tsx

@@ -0,0 +1,8 @@
+import { resolveComponent } from "@registry/resolve-component"
+import type { AccountPageData } from "@core/types/account"
+
+export async function LoginPage({ data }: { data: AccountPageData }) {
+  const LoginTemplate = (await resolveComponent("slots/account/LoginTemplate")).default
+
+  return <LoginTemplate countryCode={data.countryCode} />
+}

package/src/cart/cart-page.tsx

@@ -0,0 +1,13 @@
+import CartTemplate from "@modules/cart/templates"
+import type { CartPageData } from "@core/types/cart"
+
+export function CartPage({ data }: { data: CartPageData }) {
+  return (
+    <CartTemplate
+      cart={data.cart}
+      customer={data.customer}
+      countryCode={data.countryCode}
+      abandonedCarts={data.abandonedCarts}
+    />
+  )
+}

package/src/cart/load-cart-data.ts

@@ -0,0 +1,18 @@
+import { retrieveCart, getAbandonedCarts } from "@core/data/cart"
+import { retrieveCustomer } from "@core/data/customer"
+import type { CartPageData } from "@core/types/cart"
+
+export async function loadCartData(countryCode: string): Promise<CartPageData> {
+  const [cart, customer, abandonedCarts] = await Promise.all([
+    retrieveCart(),
+    retrieveCustomer(),
+    getAbandonedCarts(),
+  ])
+
+  return {
+    cart,
+    customer,
+    countryCode,
+    abandonedCarts,
+  }
+}

package/src/checkout/checkout-page.tsx

@@ -0,0 +1,39 @@
+import PaymentWrapper from "@modules/checkout/components/payment-wrapper"
+import CheckoutBeginTracker from "@modules/checkout/components/checkout-begin-tracker"
+import CheckoutForm from "@modules/checkout/templates/checkout-form"
+import CheckoutSummary from "@modules/checkout/templates/checkout-summary"
+import type { CheckoutPageData } from "./load-checkout-data"
+
+type CheckoutPageProps = {
+  data: CheckoutPageData
+}
+
+export function CheckoutPage({ data }: CheckoutPageProps) {
+  const { cart, customer } = data
+
+  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">
+      <CheckoutBeginTracker cart={cart} />
+      <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 items-start">
+        <div className="w-full min-[1024px]:sticky min-[1024px]:top-20">
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
+            .checkout-form-scroll::-webkit-scrollbar { display: none; }
+            .checkout-form-scroll { -ms-overflow-style: none; scrollbar-width: none; }
+          `,
+            }}
+          />
+          <div className="w-full min-[1024px]:max-h-[calc(100vh-140px)] min-[1024px]:overflow-y-auto min-[1024px]:pr-4 checkout-form-scroll">
+            <PaymentWrapper cart={cart}>
+              <CheckoutForm cart={cart} customer={customer} />
+            </PaymentWrapper>
+          </div>
+        </div>
+        <div className="w-full min-[1024px]:sticky min-[1024px]:top-20">
+          <CheckoutSummary cart={cart} customer={customer} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/checkout/load-checkout-data.ts

@@ -0,0 +1,21 @@
+import { retrieveCart } from "@core/data/cart"
+import { retrieveCustomer } from "@core/data/customer"
+import type { HttpTypes } from "@medusajs/types"
+
+export type CheckoutPageData = {
+  cart: HttpTypes.StoreCart
+  customer: HttpTypes.StoreCustomer | null
+}
+
+export async function loadCheckoutData(
+  cartIdFromUrl?: string
+): Promise<CheckoutPageData | null> {
+  const cart = await retrieveCart(cartIdFromUrl)
+  if (!cart) {
+    return null
+  }
+
+  const customer = await retrieveCustomer()
+
+  return { cart, customer }
+}

package/src/home/home-page.tsx

@@ -0,0 +1,95 @@
+import { storefrontConfig } from "@registry/storefront.config"
+import { resolveComponent } from "@registry/resolve-component"
+import type { HomePageData } from "@core/types/home"
+import type { HomeBlockType } from "@registry/storefront.config"
+import { colorClasses } from "@theme/tokens"
+
+function getBlockProps(
+  blockType: HomeBlockType,
+  data: HomePageData
+): Record<string, unknown> {
+  switch (blockType) {
+    case "hero":
+      return data.hero
+    case "shopByAge":
+      return data.shopByAge
+    case "shopByCategory":
+      return data.shopByCategory
+    case "whyChooseUs":
+      return data.whyChooseUs
+    case "newArrivals":
+      return data.newArrivals
+    case "lovedByMoms":
+      return data.lovedByMoms
+    case "testimonials":
+      return data.testimonials
+    case "features":
+      return data.features
+    default:
+      return {}
+  }
+}
+
+export async function HomePage({ data }: { data: HomePageData }) {
+  const blocks = storefrontConfig.blocks.home
+
+  const resolvedBlocks = await Promise.all(
+    blocks.map(async (block) => {
+      const mod = await resolveComponent(block.component)
+      return {
+        block,
+        Component: mod.default,
+      }
+    })
+  )
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "Chocomelon",
+    alternateName: "Chocomelon Kids Wear",
+    url: "https://chocomelon.in",
+    potentialAction: {
+      "@type": "SearchAction",
+      target: "https://chocomelon.in/store?search={search_term_string}",
+      "query-input": "required name=search_term_string",
+    },
+  }
+
+  const organizationJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: "Chocomelon",
+    url: "https://chocomelon.in",
+    logo: "https://chocomelon.in/Logo.png",
+    sameAs: [
+      "https://www.instagram.com/chocomelon_kids_wear/",
+      "https://www.facebook.com/chocomelon.kids.wear",
+    ],
+    contactPoint: {
+      "@type": "ContactPoint",
+      telephone: "+91 82382 57652",
+      contactType: "customer service",
+      areaServed: "IN",
+      availableLanguage: ["en", "gu", "hi"],
+    },
+  }
+
+  return (
+    <div className={`${colorClasses.pageBg} w-full`}>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(organizationJsonLd),
+        }}
+      />
+      {resolvedBlocks.map(({ block, Component }) => (
+        <Component key={block.blockType} {...getBlockProps(block.blockType, data)} />
+      ))}
+    </div>
+  )
+}

package/src/home/load-home-data.ts

@@ -0,0 +1,118 @@
+import { listCollections } from "@core/data/collections"
+import { listCategories } from "@core/data/categories"
+import { listProductsWithSort, getProductsByTag } from "@core/data/products"
+import { getRegion } from "@core/data/regions"
+import {
+  getTestimonialsFromConfig,
+  getHomeBannersFromConfig,
+  getAppBannersFromConfig,
+  getFeaturesFromConfig,
+} from "@core/data/dynamic-config"
+import { fetchRatings } from "@core/data/reviews"
+import type { HomePageData, BannerData } from "@core/types/home"
+
+const defaultBanner: BannerData = {
+  image: "/newbanner.png",
+  title: "Premium Kids Shop",
+  subtitle: "Little Trends, Quality Kids Wear",
+  description:
+    "Shop stylish kids wear for little ones and children of all years—from newborn up to 15 years. Crafted for play, absolute comfort, and everyday magic.",
+  buttonName: "Shop Kids Wear",
+  buttonLink: "/store",
+}
+
+function buildBannerData(
+  homeBanners: BannerData[] | null | undefined,
+  appBanners: BannerData[] | null | undefined
+): HomePageData["hero"] {
+  const homeBanner =
+    homeBanners && homeBanners.length > 0 ? homeBanners[0] : defaultBanner
+  const homeBannerImage = homeBanner.image || "/newbanner.png"
+  const firstAppBanner = appBanners && appBanners.length > 0 ? appBanners[0] : null
+
+  return {
+    homeBanner: { ...homeBanner, image: homeBannerImage },
+    appBanner: {
+      image: firstAppBanner?.image || "/appbanner.png",
+      title: firstAppBanner?.title || homeBanner.title,
+      subtitle: firstAppBanner?.subtitle || homeBanner.subtitle,
+      description: firstAppBanner?.description || homeBanner.description,
+      buttonName: firstAppBanner?.buttonName || homeBanner.buttonName,
+      buttonLink: firstAppBanner?.buttonLink || homeBanner.buttonLink,
+    },
+  }
+}
+
+export async function loadHomeData(countryCode: string): Promise<HomePageData | null> {
+  const region = await getRegion(countryCode)
+  if (!region) {
+    return null
+  }
+
+  const [
+    collectionsResult,
+    categoriesResult,
+    newArrivalsResult,
+    bestsellersResult,
+    testimonialsData,
+    allRatings,
+    homeBanners,
+    appBanners,
+    featuresConfig,
+  ] = await Promise.all([
+    listCollections({ fields: "id, handle, title, metadata" }).catch(() => ({
+      collections: [],
+    })),
+    listCategories({ limit: 50 }).catch(() => []),
+    listProductsWithSort({
+      page: 1,
+      queryParams: { limit: 8 },
+      sortBy: "created_at",
+      countryCode,
+    }).catch(() => ({ response: { products: [] } })),
+    getProductsByTag({
+      tagValue: "bestseller",
+      limit: 10,
+      countryCode,
+    }).catch(() => []),
+    getTestimonialsFromConfig().catch(() => null),
+    fetchRatings(),
+    getHomeBannersFromConfig().catch(() => null),
+    getAppBannersFromConfig().catch(() => null),
+    getFeaturesFromConfig().catch(() => null),
+  ])
+
+  const collections =
+    (collectionsResult as { collections?: unknown[] }).collections || []
+  const categories = categoriesResult || []
+  const newArrivals =
+    (newArrivalsResult as { response: { products: unknown[] } }).response.products || []
+  const bestsellers = bestsellersResult || []
+
+  return {
+    hero: buildBannerData(
+      homeBanners as BannerData[] | null,
+      appBanners as BannerData[] | null
+    ),
+    shopByAge: { collections: collections as HomePageData["shopByAge"]["collections"] },
+    shopByCategory: {
+      categories: categories as HomePageData["shopByCategory"]["categories"],
+    },
+    whyChooseUs: {
+      title: featuresConfig?.title || "Why Choose Chocomelon?",
+      features: featuresConfig?.features || [],
+    },
+    newArrivals: {
+      products: newArrivals as HomePageData["newArrivals"]["products"],
+      region,
+      ratings: allRatings,
+    },
+    lovedByMoms: {
+      products: bestsellers as HomePageData["lovedByMoms"]["products"],
+      region,
+      ratings: allRatings,
+    },
+    testimonials: { initialData: testimonialsData },
+    features: {},
+  }
+}

package/src/layout/load-layout-data.ts

@@ -0,0 +1,73 @@
+import { listCartOptions, retrieveCart } from "@core/data/cart"
+import { retrieveCustomer } from "@core/data/customer"
+import { listCategories } from "@core/data/categories"
+import { listRegions } from "@core/data/regions"
+import { getLocale } from "@core/data/locale-actions"
+import { getPromoBarConfig, getSocialLinksFromConfig } from "@core/data/dynamic-config"
+import type { MainLayoutData } from "@core/types/layout"
+
+export async function loadLayoutData(): Promise<MainLayoutData> {
+  const [
+    customer,
+    cart,
+    regions,
+    currentLocale,
+    promoBarConfig,
+    allCategories,
+    fetchedSocialLinks,
+  ] = await Promise.all([
+    retrieveCustomer(),
+    retrieveCart(),
+    listRegions(),
+    getLocale(),
+    getPromoBarConfig(),
+    listCategories({ limit: 20 }),
+    getSocialLinksFromConfig(),
+  ])
+
+  let shippingOptions: MainLayoutData["shippingOptions"] = []
+  if (cart) {
+    const { shipping_options } = await listCartOptions()
+    shippingOptions = shipping_options
+  }
+
+  const categories = allCategories.filter((c) => !c.parent_category_id).slice(0, 6)
+
+  const defaultSocialLinks = [
+    { name: "LinkedIn", url: "#", icon: "/LINK.svg" },
+    { name: "Facebook", url: "#", icon: "/FACE.svg" },
+    { name: "Instagram", url: "#", icon: "/INSTA.svg" },
+    { name: "YouTube", url: "#", icon: "/YOU.svg" },
+  ]
+
+  const getFallbackIcon = (name: string) => {
+    const n = name.toLowerCase()
+    if (n.includes("facebook")) return "/FACE.svg"
+    if (n.includes("linkedin")) return "/LINK.svg"
+    if (n.includes("instagram")) return "/INSTA.svg"
+    if (n.includes("youtube")) return "/YOU.svg"
+    return null
+  }
+
+  const socialLinks = (
+    fetchedSocialLinks && fetchedSocialLinks.length > 0
+      ? fetchedSocialLinks
+      : defaultSocialLinks
+  ).map((link) => ({
+    ...link,
+    icon: link.icon || getFallbackIcon(link.name),
+  }))
+
+  return {
+    customer,
+    cart,
+    shippingOptions,
+    nav: {
+      regions,
+      currentLocale: currentLocale || "in",
+      customer,
+    },
+    promoBar: promoBarConfig,
+    footer: { categories, socialLinks },
+  }
+}

package/src/layout/main-layout.tsx

@@ -0,0 +1,46 @@
+import { WishlistProvider } from "@core/context/wishlist-context"
+import { resolveComponent } from "@registry/resolve-component"
+import type { MainLayoutData } from "@core/types/layout"
+import { MainLayoutShell } from "@theme/layouts/MainLayoutShell"
+import CartMismatchBanner from "@modules/layout/components/cart-mismatch-banner"
+import FreeShippingPriceNudge from "@modules/shipping/components/free-shipping-price-nudge"
+import PushNotificationManager from "@modules/layout/components/push-notification-manager"
+import DeletionPendingModal from "@modules/account/components/deletion-pending-modal"
+import VerificationBanner from "@modules/layout/components/verification-banner"
+
+type MainLayoutProps = {
+  children: React.ReactNode
+  data: MainLayoutData
+}
+
+export async function MainLayout({ children, data }: MainLayoutProps) {
+  const [PromoBar, Nav, Footer] = await Promise.all([
+    resolveComponent("slots/layout/PromoBar").then((m) => m.default),
+    resolveComponent("slots/layout/Nav").then((m) => m.default),
+    resolveComponent("slots/layout/Footer").then((m) => m.default),
+  ])
+
+  const { customer, cart, shippingOptions } = data
+
+  return (
+    <WishlistProvider>
+      <PromoBar {...data.promoBar} />
+      <Nav {...data.nav} />
+      {customer && <VerificationBanner customer={customer} />}
+      {customer && cart && <CartMismatchBanner customer={customer} cart={cart} />}
+      {cart && (
+        <FreeShippingPriceNudge
+          variant="popup"
+          cart={cart}
+          shippingOptions={shippingOptions}
+        />
+      )}
+      <MainLayoutShell>{children}</MainLayoutShell>
+      <PushNotificationManager customerId={customer?.id} />
+      <Footer {...data.footer} />
+      {customer?.id === "pending_deletion" && (
+        <DeletionPendingModal isOpen={true} email={customer.email} />
+      )}
+    </WishlistProvider>
+  )
+}

package/src/order/load-order-data.ts

@@ -0,0 +1,8 @@
+import { retrieveOrder } from "@core/data/orders"
+import type { HttpTypes } from "@medusajs/types"
+
+export async function loadOrderData(
+  orderId: string
+): Promise<HttpTypes.StoreOrder | null> {
+  return retrieveOrder(orderId).catch(() => null)
+}

package/src/order/order-details-controller.tsx

@@ -0,0 +1,12 @@
+import { resolveComponent } from "@registry/resolve-component"
+import type { HttpTypes } from "@medusajs/types"
+
+type OrderDetailsControllerProps = {
+  order: HttpTypes.StoreOrder
+}
+
+export async function OrderDetailsController({ order }: OrderDetailsControllerProps) {
+  const OrderDetails = (await resolveComponent("slots/order/OrderDetails")).default
+
+  return <OrderDetails order={order} />
+}

package/src/product/product-actions-wrapper.tsx

@@ -0,0 +1,33 @@
+import { listProducts } from "@core/data/products"
+import { retrieveCart } from "@core/data/cart"
+import { HttpTypes } from "@medusajs/types"
+import { resolveComponent } from "@registry/resolve-component"
+import { storefrontConfig } from "@registry/storefront.config"
+
+/**
+ * Fetches real-time pricing for a product and renders the theme ProductActions slot.
+ */
+export default async function ProductActionsWrapper({
+  id,
+  region,
+}: {
+  id: string
+  region: HttpTypes.StoreRegion
+}) {
+  const [product, cart] = await Promise.all([
+    listProducts({
+      queryParams: { id: [id] },
+      regionId: region.id,
+    }).then(({ response }) => response.products[0]),
+    retrieveCart().catch(() => null),
+  ])
+
+  if (!product) {
+    return null
+  }
+
+  const mod = await resolveComponent(storefrontConfig.slots.product.ProductActions)
+  const ProductActions = mod.default
+
+  return <ProductActions product={product} region={region} cart={cart} />
+}

package/src/product/product-page.tsx

@@ -0,0 +1,98 @@
+import React, { Suspense } from "react"
+import { notFound } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import ImageGallery from "@modules/products/components/image-gallery"
+import RelatedProducts from "@modules/products/components/related-products"
+import SkeletonRelatedProducts from "@modules/skeletons/templates/skeleton-related-products"
+import Breadcrumb from "@modules/common/components/breadcrumb"
+import { ProductProvider } from "@modules/products/context/product-context"
+import ProductActionsWrapper from "@controllers/product/product-actions-wrapper"
+import { resolveComponent } from "@registry/resolve-component"
+import { storefrontConfig } from "@registry/storefront.config"
+
+type ProductPageProps = {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+  countryCode: string
+  images: HttpTypes.StoreProductImage[]
+}
+
+async function ProductActionsFallback({
+  product,
+  region,
+}: {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+}) {
+  const mod = await resolveComponent(storefrontConfig.slots.product.ProductActions)
+  const ProductActions = mod.default
+
+  return <ProductActions disabled product={product} region={region} />
+}
+
+export async function ProductPage({
+  product,
+  region,
+  countryCode,
+  images,
+}: ProductPageProps) {
+  if (!product?.id) {
+    return notFound()
+  }
+
+  const ProductInfo = (
+    await resolveComponent(storefrontConfig.slots.product.ProductInfo)
+  ).default
+
+  return (
+    <>
+      <div className="bg-page-bg min-h-screen">
+        <ProductProvider>
+          <div
+            className="mx-auto px-4 sm:px-6 py-6 lg:py-10"
+            style={{ maxWidth: "var(--container-max)" }}
+          >
+            <Breadcrumb product={product} />
+
+            <div
+              className="flex flex-col lg:flex-row gap-8 lg:gap-14 mt-6 lg:mt-8"
+              data-testid="product-container"
+            >
+              <div
+                id="product-gallery-container"
+                className="w-full lg:w-[55%] lg:sticky lg:top-28 lg:self-start"
+              >
+                <ImageGallery images={images} product={product} />
+              </div>
+
+              <div className="w-full lg:w-[45%] flex flex-col gap-6 lg:pt-2">
+                <ProductInfo product={product} region={region} />
+                <Suspense
+                  fallback={
+                    <ProductActionsFallback product={product} region={region} />
+                  }
+                >
+                  <ProductActionsWrapper id={product.id} region={region} />
+                </Suspense>
+              </div>
+            </div>
+          </div>
+        </ProductProvider>
+      </div>
+
+      <div
+        id="related-products"
+        className="mx-auto px-4 sm:px-6 py-12 lg:py-20 border-t border-[var(--color-header-border)]"
+        style={{ maxWidth: "var(--container-max)" }}
+        data-testid="related-products-container"
+      >
+        <h2 className="font-display text-2xl md:text-3xl text-heading text-center mb-10">
+          You may also like
+        </h2>
+        <Suspense fallback={<SkeletonRelatedProducts />}>
+          <RelatedProducts product={product} countryCode={countryCode} />
+        </Suspense>
+      </div>
+    </>
+  )
+}