medusa-ui-home 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-home",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Homepage sections.",
   "type": "module",
   "license": "MIT",

package/src/home/catalog/components/hero-banner.tsx

@@ -2,21 +2,23 @@ import Image from "next/image"
 import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
 import type { HomepageBanner } from "medusa-storefront-data/dynamic-config"
 
+export type CatalogHeroCopy = {
+  badge?: string
+  desktopHeadingLine1?: string
+  desktopHeadingHighlight?: string
+  description?: string
+  primaryCtaLabel?: string
+  primaryCtaHref?: string
+  secondaryCtaLabel?: string
+  secondaryCtaHref?: string
+  mobilePrimaryCtaLabel?: string
+  mobileSecondaryCtaLabel?: string
+}
+
 type CatalogHeroBannerProps = {
   homeBanners?: HomepageBanner[] | null
   appBanners?: HomepageBanner[] | null
-  copy?: {
-    badge?: string
-    desktopHeadingLine1?: string
-    desktopHeadingHighlight?: string
-    description?: string
-    primaryCtaLabel?: string
-    primaryCtaHref?: string
-    secondaryCtaLabel?: string
-    secondaryCtaHref?: string
-    mobilePrimaryCtaLabel?: string
-    mobileSecondaryCtaLabel?: string
-  }
+  copy?: CatalogHeroCopy
 }
 
 export default function CatalogHeroBanner({
@@ -24,23 +26,15 @@ export default function CatalogHeroBanner({
   appBanners,
   copy,
 }: CatalogHeroBannerProps) {
-  const fallbackBanner: HomepageBanner = {
-    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.",
-    buttonName: "Shop Kids Wear",
-    buttonLink: "/store",
-  }
+  const homeBanner = homeBanners?.[0]
+  const firstAppBanner = appBanners?.[0]
 
-  const homeBanner =
-    homeBanners && homeBanners.length > 0 ? homeBanners[0] : fallbackBanner
-  const firstAppBanner = appBanners && appBanners.length > 0 ? appBanners[0] : null
+  if (!homeBanner?.image) {
+    return null
+  }
 
-  const homeBannerImage = homeBanner.image || fallbackBanner.image
   const appBanner = {
-    image: firstAppBanner?.image || "/appbanner.png",
+    image: firstAppBanner?.image || homeBanner.image,
     title: firstAppBanner?.title || homeBanner.title,
     subtitle: firstAppBanner?.subtitle || homeBanner.subtitle,
     description: firstAppBanner?.description || homeBanner.description,
@@ -48,35 +42,35 @@ export default function CatalogHeroBanner({
     buttonLink: firstAppBanner?.buttonLink || homeBanner.buttonLink,
   }
 
-  const heroBadge = copy?.badge ?? "BEST QUALITY"
-  const desktopHeadingLine1 = copy?.desktopHeadingLine1 ?? "Electronics &"
+  const headlineFromCms = Boolean(homeBanner.subtitle?.trim())
+  const heroBadge = homeBanner.title ?? copy?.badge ?? "BEST QUALITY"
+  const desktopHeadingLine1 =
+    homeBanner.subtitle ?? copy?.desktopHeadingLine1 ?? "Electronics &"
   const desktopHeadingHighlight = copy?.desktopHeadingHighlight ?? "Essentials"
   const heroDescription =
+    homeBanner.description ??
     copy?.description ??
     "Discover dependable tools, components, devices, and everyday warehouse-ready stock built for fast-moving stores with large inventories."
-  const primaryCtaLabel = copy?.primaryCtaLabel ?? "Add to Cart"
-  const primaryCtaHref = copy?.primaryCtaHref ?? homeBanner.buttonLink ?? "/store"
+  const primaryCtaLabel = homeBanner.buttonName ?? copy?.primaryCtaLabel ?? "Add to Cart"
+  const primaryCtaHref = homeBanner.buttonLink ?? copy?.primaryCtaHref ?? "/store"
   const secondaryCtaLabel = copy?.secondaryCtaLabel ?? "Explore categories"
   const secondaryCtaHref = copy?.secondaryCtaHref ?? "/categories"
-  const mobilePrimaryCtaLabel = copy?.mobilePrimaryCtaLabel ?? "Shop now"
+  const mobilePrimaryCtaLabel =
+    homeBanner.buttonName ?? copy?.mobilePrimaryCtaLabel ?? "Shop now"
   const mobileSecondaryCtaLabel = copy?.mobileSecondaryCtaLabel ?? secondaryCtaLabel
 
   return (
     <div className="relative w-full overflow-x-hidden">
       <div className="relative hidden sm:block">
-        {homeBannerImage ? (
-          <Image
-            src={homeBannerImage}
-            alt={homeBanner.title || "Home Banner"}
-            width={1920}
-            height={800}
-            sizes="100vw"
-            className="h-[420px] w-full object-cover md:h-[520px] lg:h-[580px] xl:h-[620px]"
-            priority
-          />
-        ) : (
-          <div className="h-[420px] w-full bg-white md:h-[520px] lg:h-[580px] xl:h-[620px]" />
-        )}
+        <Image
+          src={homeBanner.image}
+          alt={homeBanner.title || "Home Banner"}
+          width={1920}
+          height={800}
+          sizes="100vw"
+          className="h-[420px] w-full object-cover md:h-[520px] lg:h-[580px] xl:h-[620px]"
+          priority
+        />
 
         <div className="absolute inset-y-0 left-0 w-[82%] bg-[linear-gradient(90deg,rgba(255,255,255,0.97)_0%,rgba(255,255,255,0.92)_52%,rgba(255,255,255,0.18)_82%,transparent_100%)] md:w-[72%] lg:w-[64%] xl:w-[60%]" />
 
@@ -89,9 +83,16 @@ export default function CatalogHeroBanner({
                 </div>
 
                 <h1 className="max-w-[13ch] text-[clamp(1.8rem,4vw,3.75rem)] font-bold leading-[1.04] text-[#04122C]">
-                  {desktopHeadingLine1}
-                  <br />
-                  Hardware <span className="text-[#2A8BFF]">{desktopHeadingHighlight}</span>
+                  {headlineFromCms ? (
+                    desktopHeadingLine1
+                  ) : (
+                    <>
+                      {desktopHeadingLine1}
+                      <br />
+                      Hardware{" "}
+                      <span className="text-[#2A8BFF]">{desktopHeadingHighlight}</span>
+                    </>
+                  )}
                 </h1>
 
                 <p className="max-w-[44ch] text-[12px] font-medium leading-relaxed text-[#4B5B76] md:text-sm lg:text-base">
@@ -155,9 +156,16 @@ export default function CatalogHeroBanner({
                 </div>
 
                 <h1 className="max-w-[12ch] text-[clamp(1.9rem,8vw,2.5rem)] font-bold leading-[1.06] text-[#04122C]">
-                  {desktopHeadingLine1}
-                  <br />
-                  Hardware <span className="text-[#2A8BFF]">{desktopHeadingHighlight}</span>
+                  {headlineFromCms ? (
+                    desktopHeadingLine1
+                  ) : (
+                    <>
+                      {desktopHeadingLine1}
+                      <br />
+                      Hardware{" "}
+                      <span className="text-[#2A8BFF]">{desktopHeadingHighlight}</span>
+                    </>
+                  )}
                 </h1>
 
                 <p className="text-[12px] font-medium leading-relaxed text-[#4B5B76] line-clamp-4">

package/src/home/catalog/page.tsx

@@ -1,5 +1,4 @@
 import dynamic from "next/dynamic"
-import type { HomepageBanner } from "medusa-storefront-data/dynamic-config"
 import {
   getRegion,
   listCategories,
@@ -7,13 +6,12 @@ import {
   listProductsWithSort,
   getProductsByTag,
   loadStorefrontPageInput,
-  getHomeBannersFromPageInput,
-  getAppBannersFromPageInput,
   getTestimonialsFromPageInput,
 } from "medusa-storefront-data"
+import { loadHeroSectionData } from "medusa-storefront-data/home/sections/hero"
 import { fetchRatings } from "medusa-reviews-logic/server"
 import { HomePageJsonLd } from "../components/home-page-json-ld"
-import CatalogHeroBanner from "./components/hero-banner"
+import CatalogHeroBanner, { type CatalogHeroCopy } from "./components/hero-banner"
 import TrustStrip from "./components/trust-strip"
 import ShopByCategory from "./components/shop-by-category"
 import ShopByAge from "./components/shop-by-age"
@@ -23,11 +21,6 @@ const WhyChooseUs = dynamic(() => import("./components/why-choose-us"))
 const LovedByMoms = dynamic(() => import("./components/loved-by-moms"))
 const Testimonials = dynamic(() => import("./components/testimonials"))
 
-export type CatalogHomeFallbackBanners = {
-  home: HomepageBanner
-  app: HomepageBanner
-}
-
 export type CatalogHomeJsonLd = {
   website: Record<string, unknown>
   organization: Record<string, unknown>
@@ -35,27 +28,13 @@ export type CatalogHomeJsonLd = {
 
 export type CatalogHomePageProps = {
   params: Promise<{ countryCode: string }>
-  /** Used when CMS has no banner images. */
-  fallbackBanners: CatalogHomeFallbackBanners
-  heroCopy?: {
-    badge?: string
-    desktopHeadingLine1?: string
-    desktopHeadingHighlight?: string
-    description?: string
-    primaryCtaLabel?: string
-    primaryCtaHref?: string
-    secondaryCtaLabel?: string
-    secondaryCtaHref?: string
-    mobilePrimaryCtaLabel?: string
-    mobileSecondaryCtaLabel?: string
-  }
+  heroCopy?: CatalogHeroCopy
   jsonLd: CatalogHomeJsonLd
   className?: string
 }
 
 export default async function CatalogHomePage({
   params,
-  fallbackBanners,
   heroCopy,
   jsonLd,
   className = "bg-white w-full",
@@ -69,17 +48,6 @@ export default async function CatalogHomePage({
 
   const pageInput = await loadStorefrontPageInput()
 
-  const hero = (() => {
-    const home = getHomeBannersFromPageInput(pageInput) ?? []
-    const app = getAppBannersFromPageInput(pageInput) ?? []
-    const hasHomeImage = home.length > 0 && Boolean(home[0]?.image)
-    const hasAppImage = app.length > 0 && Boolean(app[0]?.image)
-    return {
-      homeBanners: hasHomeImage ? home : [fallbackBanners.home],
-      appBanners: hasAppImage ? app : [fallbackBanners.app],
-    }
-  })()
-
   const [
     categories,
     newArrivalsResult,
@@ -87,6 +55,7 @@ export default async function CatalogHomePage({
     testimonialsBlock,
     allRatings,
     collectionsResult,
+    hero,
   ] = await Promise.all([
     listCategories({ limit: 50 }).catch(() => []),
     listProductsWithSort({
@@ -106,6 +75,7 @@ export default async function CatalogHomePage({
       collections: [],
       count: 0,
     })),
+    loadHeroSectionData(countryCode, { pageInput }),
   ])
 
   const newArrivals =