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

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

* feat(promotions): PROMO-1574 resolve moreOffers label inline in productCard

Author: bc-vivekaggarwal

.changeset/promo-1574-promotion-callouts-homepage.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Show featured promotion callouts on the homepage product cards (featured and newest carousels), consistent with the existing PDP and PLP callouts.

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

@@ -56,7 +56,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 +74,7 @@ export default async function Home({ params }: Props) {
       showOutOfStockMessage ? defaultOutOfStockMessage : undefined,
       showBackorderMessage,
       taxDisplay,
-    ).map((p) => ({ ...p, promotions: undefined }));
+    );
   });
 
   const streamableShowNewsletterSignup = Streamable.from(async () => {

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

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx';
+import { useTranslations } from 'next-intl';
 import {
   Content as CalloutContent,
   Description as CalloutDescription,
@@ -40,7 +41,6 @@ export interface ProductCardProps {
   imageSizes?: string;
   compareLabel?: string;
   compareParamName?: string;
-  moreOffersLabel?: string;
   product: Product;
   showRating?: boolean;
 }
@@ -88,10 +88,11 @@ export function ProductCard({
   aspectRatio = '5:6',
   compareLabel,
   compareParamName,
-  moreOffersLabel = 'more offers',
   imagePriority = false,
   imageSizes = '(min-width: 80rem) 20vw, (min-width: 64rem) 25vw, (min-width: 42rem) 33vw, (min-width: 24rem) 50vw, 100vw',
 }: ProductCardProps) {
+  const t = useTranslations('Components.ProductCard');
+
   return (
     <article
       className={clsx(
@@ -196,7 +197,7 @@ export function ProductCard({
                       </CalloutTitle>
                       {promotions.length > 1 && (
                         <CalloutDescription className="text-xs text-yellow-900/70">
-                          +{promotions.length - 1} {moreOffersLabel}
+                          {t('moreOffers', { count: promotions.length - 1 })}
                         </CalloutDescription>
                       )}
                     </CalloutHeader>