feat(promotions): PROMO-1574 add featured promotions callout on homepage

Author: bc-vivekaggarwal

.changeset/promo-1507-promotion-callout.md

@@ -2,7 +2,8 @@
 "@bigcommerce/catalyst-core": minor
 ---
 
-Wire promotion callouts into PDP and PLP pages using live data from the Storefront GraphQL API (`featuredPromotions` on the `Product` type).
+Wire promotion callouts into PDP, PLP, and homepage pages using live data from the Storefront GraphQL API (`featuredPromotions` on the `Product` type).
 
 - **PDP**: stacked callout boxes render inline below the price, one per active promotion.
 - **PLP (category, brand, search)**: each product card shows its first promotion inline below the price; if there are multiple, a "+N more" label appears within the same callout.
+- **Homepage**: featured and newest product cards display their promotion callouts, consistent with PDP/PLP.

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -96,6 +96,7 @@ export default async function Brand(props: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Faceted');
+  const tProductCard = await getTranslations('Components.ProductCard');
 
   const brandId = Number(slug);
 
@@ -223,6 +224,7 @@ export default async function Brand(props: Props) {
       filtersPanelTitle={t('FacetedSearch.filters')}
       maxCompareLimitMessage={t('Compare.maxCompareLimit')}
       maxItems={MAX_COMPARE_LIMIT}
+      moreOffersLabel={(count) => tProductCard('moreOffers', { count })}
       paginationInfo={streamablePagination}
       products={streamableProducts}
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -103,6 +103,7 @@ export default async function Category(props: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Faceted');
+  const tProductCard = await getTranslations('Components.ProductCard');
 
   const categoryId = Number(slug);
 
@@ -269,6 +270,7 @@ export default async function Category(props: Props) {
         filtersPanelTitle={t('FacetedSearch.filters')}
         maxCompareLimitMessage={t('Compare.maxCompareLimit')}
         maxItems={MAX_COMPARE_LIMIT}
+        moreOffersLabel={(count) => tProductCard('moreOffers', { count })}
         paginationInfo={streamablePagination}
         products={streamableProducts}
         rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}

core/app/[locale]/(default)/(faceted)/search/page.tsx

@@ -75,6 +75,7 @@ export default async function Search(props: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Faceted');
+  const tProductCard = await getTranslations('Components.ProductCard');
 
   const { settings } = await getSearchPageData();
 
@@ -255,6 +256,7 @@ export default async function Search(props: Props) {
       filtersPanelTitle={t('FacetedSearch.filters')}
       maxCompareLimitMessage={t('Compare.maxCompareLimit')}
       maxItems={MAX_COMPARE_LIMIT}
+      moreOffersLabel={(count) => tProductCard('moreOffers', { count })}
       paginationInfo={streamablePagination}
       products={streamableProducts}
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}

core/app/[locale]/(default)/page.tsx

@@ -32,8 +32,11 @@ export default async function Home({ params }: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Home');
+  const tProductCard = await getTranslations('Components.ProductCard');
   const format = await getFormatter();
 
+  const moreOffersLabel = (count: number) => tProductCard('moreOffers', { count });
+
   const streamablePageData = Streamable.from(async () => {
     const customerAccessToken = await getSessionCustomerAccessToken();
     const currencyCode = await getPreferredCurrencyCode();
@@ -56,7 +59,7 @@ export default async function Home({ params }: Props) {
       showOutOfStockMessage ? defaultOutOfStockMessage : undefined,
       showBackorderMessage,
       taxDisplay,
-    ).map((p) => ({ ...p, promotions: undefined }));
+    );
   });
 
   const streamableNewestProducts = Streamable.from(async () => {
@@ -74,7 +77,7 @@ export default async function Home({ params }: Props) {
       showOutOfStockMessage ? defaultOutOfStockMessage : undefined,
       showBackorderMessage,
       taxDisplay,
-    ).map((p) => ({ ...p, promotions: undefined }));
+    );
   });
 
   const streamableShowNewsletterSignup = Streamable.from(async () => {
@@ -94,6 +97,7 @@ export default async function Home({ params }: Props) {
         description={t('FeaturedProducts.description')}
         emptyStateSubtitle={t('FeaturedProducts.emptyStateSubtitle')}
         emptyStateTitle={t('FeaturedProducts.emptyStateTitle')}
+        moreOffersLabel={moreOffersLabel}
         products={streamableFeaturedProducts}
         title={t('FeaturedProducts.title')}
       />
@@ -103,6 +107,7 @@ export default async function Home({ params }: Props) {
         description={t('NewestProducts.description')}
         emptyStateSubtitle={t('NewestProducts.emptyStateSubtitle')}
         emptyStateTitle={t('NewestProducts.emptyStateTitle')}
+        moreOffersLabel={moreOffersLabel}
         nextLabel={t('NewestProducts.nextProducts')}
         previousLabel={t('NewestProducts.previousProducts')}
         products={streamableNewestProducts}

core/app/[locale]/(default)/product/[slug]/page.tsx

@@ -86,6 +86,7 @@ export default async function Product({ params, searchParams }: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Product');
+  const tProductCard = await getTranslations('Components.ProductCard');
   const format = await getFormatter();
 
   const productId = Number(slug);
@@ -623,6 +624,7 @@ export default async function Product({ params, searchParams }: Props) {
         cta={{ label: t('RelatedProducts.cta'), href: '/shop-all' }}
         emptyStateSubtitle={t('RelatedProducts.browseCatalog')}
         emptyStateTitle={t('RelatedProducts.noRelatedProducts')}
+        moreOffersLabel={(count) => tProductCard('moreOffers', { count })}
         nextLabel={t('RelatedProducts.nextProducts')}
         previousLabel={t('RelatedProducts.previousProducts')}
         products={streameableRelatedProducts}

core/messages/en.json

@@ -568,6 +568,9 @@
     "search": "Search"
   },
   "Components": {
+    "ProductCard": {
+      "moreOffers": "+{count, plural, =1 {# more offer} other {# more offers}}"
+    },
     "Header": {
       "home": "Home",
       "toggleNavigation": "Toggle navigation",

core/vibes/soul/primitives/product-card/index.tsx

@@ -40,7 +40,7 @@ export interface ProductCardProps {
   imageSizes?: string;
   compareLabel?: string;
   compareParamName?: string;
-  moreOffersLabel?: string;
+  moreOffersLabel?: (count: number) => string;
   product: Product;
   showRating?: boolean;
 }
@@ -88,7 +88,7 @@ export function ProductCard({
   aspectRatio = '5:6',
   compareLabel,
   compareParamName,
-  moreOffersLabel = 'more offers',
+  moreOffersLabel = (count) => `+${count} more ${count === 1 ? 'offer' : 'offers'}`,
   imagePriority = false,
   imageSizes = '(min-width: 80rem) 20vw, (min-width: 64rem) 25vw, (min-width: 42rem) 33vw, (min-width: 24rem) 50vw, 100vw',
 }: ProductCardProps) {
@@ -196,7 +196,7 @@ export function ProductCard({
                       </CalloutTitle>
                       {promotions.length > 1 && (
                         <CalloutDescription className="text-xs text-yellow-900/70">
-                          +{promotions.length - 1} {moreOffersLabel}
+                          {moreOffersLabel(promotions.length - 1)}
                         </CalloutDescription>
                       )}
                     </CalloutHeader>

core/vibes/soul/sections/featured-product-carousel/index.tsx

@@ -21,6 +21,7 @@ export interface FeaturedProductCarouselProps {
   previousLabel?: string;
   nextLabel?: string;
   hideOverflow?: boolean;
+  moreOffersLabel?: (count: number) => string;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -49,6 +50,7 @@ export function FeaturedProductCarousel({
   previousLabel,
   nextLabel,
   hideOverflow = false,
+  moreOffersLabel,
 }: FeaturedProductCarouselProps) {
   return (
     <SectionLayout containerSize="2xl">
@@ -74,6 +76,7 @@ export function FeaturedProductCarousel({
           emptyStateSubtitle={emptyStateSubtitle}
           emptyStateTitle={emptyStateTitle}
           hideOverflow={hideOverflow}
+          moreOffersLabel={moreOffersLabel}
           nextLabel={nextLabel}
           placeholderCount={placeholderCount}
           previousLabel={previousLabel}

core/vibes/soul/sections/featured-product-list/index.tsx

@@ -17,6 +17,7 @@ export interface FeaturedProductsListProps {
   emptyStateTitle?: Streamable<string>;
   emptyStateSubtitle?: Streamable<string>;
   placeholderCount?: number;
+  moreOffersLabel?: (count: number) => string;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -41,6 +42,7 @@ export function FeaturedProductList({
   emptyStateTitle,
   emptyStateSubtitle,
   placeholderCount,
+  moreOffersLabel,
 }: FeaturedProductsListProps) {
   return (
     <StickySidebarLayout
@@ -68,6 +70,7 @@ export function FeaturedProductList({
         <ProductList
           emptyStateSubtitle={emptyStateSubtitle}
           emptyStateTitle={emptyStateTitle}
+          moreOffersLabel={moreOffersLabel}
           placeholderCount={placeholderCount}
           products={products}
           showCompare={false}