{
  "name": "deals-page",
  "title": "DealsPage",
  "description": "Promotions landing page with deal banners and on-sale products.",
  "type": "component",
  "registryDependencies": [
    "deal-banner",
    "product-grid",
    "sale-badge",
    "product-card",
    "cn"
  ],
  "files": [
    {
      "path": "deals-page.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, Deal, ProductDealInfo } from \"@cimplify/sdk\";\nimport { useDeals, useProductsOnSale } from \"@cimplify/sdk/react\";\nimport { DealBanner } from \"@cimplify/sdk/react\";\nimport { ProductGrid } from \"./product-grid\";\nimport { SaleBadge } from \"./sale-badge\";\nimport { ProductCard } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DealsPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  bannerSection?: string;\n  productsSection?: string;\n  productsTitle?: string;\n  empty?: string;\n  loading?: string;\n}\n\nexport interface DealsPageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched deals for SSR. */\n  deals?: Deal[];\n  /** Pre-fetched products on sale for SSR. */\n  productsOnSale?: ProductDealInfo[];\n  /** Pre-fetched product objects for rendering. */\n  products?: Product[];\n  /** Location ID for location-specific deals. */\n  locationId?: string;\n  /** Custom image renderer. */\n  renderImage?: (props: { src: string; alt: string; className?: string }) => React.ReactNode;\n  /** Grid column config. */\n  columns?: { sm?: number; md?: number; lg?: number; xl?: number };\n  className?: string;\n  classNames?: DealsPageClassNames;\n}\n\n/**\n * DealsPage — promotions landing page with deal banners and on-sale products.\n *\n * SSR-friendly: pass `deals` and `productsOnSale` props for server rendering.\n */\nexport function DealsPage({\n  title = \"Deals & Offers\",\n  deals: dealsProp,\n  productsOnSale: productsOnSaleProp,\n  products: productsProp,\n  locationId,\n  renderImage,\n  columns,\n  className,\n  classNames,\n}: DealsPageProps): React.ReactElement {\n  const { deals: fetchedDeals, isLoading: dealsLoading } = useDeals({\n    locationId,\n    enabled: dealsProp === undefined,\n  });\n  const { products: fetchedOnSale, isLoading: productsLoading } = useProductsOnSale({\n    enabled: productsOnSaleProp === undefined,\n  });\n\n  const deals = dealsProp ?? fetchedDeals;\n  const onSale = productsOnSaleProp ?? fetchedOnSale;\n  const isLoading = dealsLoading || productsLoading;\n\n  const isEmpty = deals.length === 0 && onSale.length === 0;\n\n  if (isLoading && isEmpty) {\n    return (\n      <div\n        data-cimplify-deals-page\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  return (\n    <div data-cimplify-deals-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-deals-header className={classNames?.header}>\n        <h1 data-cimplify-deals-title className={classNames?.title}>\n          {title}\n        </h1>\n      </div>\n\n      {/* Deal banners */}\n      {deals.length > 0 && (\n        <div data-cimplify-deals-banner-section className={classNames?.bannerSection}>\n          <DealBanner deals={deals} />\n        </div>\n      )}\n\n      {/* Products on sale */}\n      {(onSale.length > 0 || (productsProp && productsProp.length > 0)) && (\n        <div data-cimplify-deals-products className={classNames?.productsSection}>\n          <h2 data-cimplify-deals-products-title className={classNames?.productsTitle}>\n            On Sale Now\n          </h2>\n          {productsProp ? (\n            <ProductGrid\n              products={productsProp}\n              renderImage={renderImage}\n              columns={columns}\n            />\n          ) : (\n            <div data-cimplify-deals-sale-list>\n              {onSale.map((dealInfo: ProductDealInfo) => (\n                <div key={`${dealInfo.product_id}-${dealInfo.deal_id}`} data-cimplify-deals-sale-item>\n                  <SaleBadge\n                    product={{ id: dealInfo.product_id, name: dealInfo.deal_name } as Product}\n                    dealInfo={dealInfo}\n                    showOriginalPrice\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Empty state */}\n      {isEmpty && (\n        <div data-cimplify-deals-empty className={classNames?.empty}>\n          <p>No deals available right now. Check back soon!</p>\n        </div>\n      )}\n    </div>\n  );\n}\n"
    }
  ]
}