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

Author: bc-vivekaggarwal

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

@@ -96,7 +96,6 @@ export default async function Brand(props: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Faceted');
-  const tProductCard = await getTranslations('Components.ProductCard');
 
   const brandId = Number(slug);
 
@@ -224,7 +223,6 @@ 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,7 +103,6 @@ export default async function Category(props: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Faceted');
-  const tProductCard = await getTranslations('Components.ProductCard');
 
   const categoryId = Number(slug);
 
@@ -270,7 +269,6 @@ 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,7 +75,6 @@ export default async function Search(props: Props) {
   setRequestLocale(locale);
 
   const t = await getTranslations('Faceted');
-  const tProductCard = await getTranslations('Components.ProductCard');
 
   const { settings } = await getSearchPageData();
 
@@ -256,7 +255,6 @@ 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,11 +32,8 @@ 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();
@@ -97,7 +94,6 @@ 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')}
       />
@@ -107,7 +103,6 @@ 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,7 +86,6 @@ 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);
@@ -624,7 +623,6 @@ 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/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?: (count: number) => string;
   product: Product;
   showRating?: boolean;
 }
@@ -88,10 +88,11 @@ export function ProductCard({
   aspectRatio = '5:6',
   compareLabel,
   compareParamName,
-  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) {
+  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">
-                          {moreOffersLabel(promotions.length - 1)}
+                          {t('moreOffers', { count: promotions.length - 1 })}
                         </CalloutDescription>
                       )}
                     </CalloutHeader>

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

@@ -21,7 +21,6 @@ export interface FeaturedProductCarouselProps {
   previousLabel?: string;
   nextLabel?: string;
   hideOverflow?: boolean;
-  moreOffersLabel?: (count: number) => string;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -50,7 +49,6 @@ export function FeaturedProductCarousel({
   previousLabel,
   nextLabel,
   hideOverflow = false,
-  moreOffersLabel,
 }: FeaturedProductCarouselProps) {
   return (
     <SectionLayout containerSize="2xl">
@@ -76,7 +74,6 @@ 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,7 +17,6 @@ export interface FeaturedProductsListProps {
   emptyStateTitle?: Streamable<string>;
   emptyStateSubtitle?: Streamable<string>;
   placeholderCount?: number;
-  moreOffersLabel?: (count: number) => string;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -42,7 +41,6 @@ export function FeaturedProductList({
   emptyStateTitle,
   emptyStateSubtitle,
   placeholderCount,
-  moreOffersLabel,
 }: FeaturedProductsListProps) {
   return (
     <StickySidebarLayout
@@ -70,7 +68,6 @@ export function FeaturedProductList({
         <ProductList
           emptyStateSubtitle={emptyStateSubtitle}
           emptyStateTitle={emptyStateTitle}
-          moreOffersLabel={moreOffersLabel}
           placeholderCount={placeholderCount}
           products={products}
           showCompare={false}

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

@@ -32,7 +32,6 @@ export interface ProductCarouselProps {
   showButtons?: boolean;
   showScrollbar?: boolean;
   hideOverflow?: boolean;
-  moreOffersLabel?: (count: number) => string;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -65,7 +64,6 @@ export function ProductCarousel({
   showButtons = true,
   showScrollbar = true,
   hideOverflow = true,
-  moreOffersLabel,
 }: ProductCarouselProps) {
   return (
     <Stream
@@ -104,7 +102,6 @@ export function ProductCarousel({
                     aspectRatio={aspectRatio}
                     colorScheme={colorScheme}
                     imageSizes="(min-width: 42rem) 25vw, (min-width: 32rem) 33vw, (min-width: 28rem) 50vw, 100vw"
-                    moreOffersLabel={moreOffersLabel}
                     product={{ id, ...product }}
                   />
                 </CarouselItem>

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

@@ -26,7 +26,6 @@ interface ProductListProps {
   removeLabel?: Streamable<string>;
   maxItems?: number;
   maxCompareLimitMessage?: Streamable<string>;
-  moreOffersLabel?: (count: number) => string;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -62,7 +61,6 @@ export function ProductList({
   removeLabel: streamableRemoveLabel,
   maxItems,
   maxCompareLimitMessage: streamableMaxCompareLimitMessage,
-  moreOffersLabel,
 }: ProductListProps) {
   return (
     <Stream
@@ -110,7 +108,6 @@ export function ProductList({
                     compareParamName={compareParamName}
                     imageSizes="(min-width: 80rem) 20vw, (min-width: 64rem) 25vw, (min-width: 42rem) 33vw, (min-width: 24rem) 50vw, 100vw"
                     key={product.id}
-                    moreOffersLabel={moreOffersLabel}
                     product={product}
                     showCompare={showCompare}
                     showRating={showRating}