fix(core): TRAC-277 translate Show more/less labels on product compare page (#3009)

Author: bc-yevhenii-buliuk

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

@@ -126,6 +126,8 @@ export default async function Compare(props: Props) {
         previousLabel={t('previous')}
         products={streamableProducts}
         ratingLabel={t('rating')}
+        showLessLabel={t('showLess')}
+        showMoreLabel={t('showMore')}
         title={t('title')}
         viewOptionsLabel={t('viewOptions')}
       />

core/messages/en.json

@@ -444,6 +444,8 @@
     "otherDetails": "Other details",
     "noOtherDetails": "There are no other details.",
     "viewOptions": "View options",
+    "showMore": "Show more",
+    "showLess": "Show less",
     "successMessage": "{cartItems, plural, =1 {1 item} other {# items}} added to <cartLink> your cart</cartLink>",
     "missingCart": "Cart not found. Please try again later.",
     "unknownError": "Unknown error. Please try again later."

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

@@ -33,6 +33,8 @@ export interface CompareCardProps {
   noOtherDetailsLabel?: string;
   viewOptionsLabel?: string;
   preorderLabel?: string;
+  showMoreLabel?: string;
+  showLessLabel?: string;
   addToCartAction?: CompareAddToCartAction;
   imageSizes?: string;
 }
@@ -66,6 +68,8 @@ export function CompareCard({
   noOtherDetailsLabel = 'There are no other details.',
   viewOptionsLabel = 'View options',
   preorderLabel = 'Preorder',
+  showMoreLabel = 'Show more',
+  showLessLabel = 'Show less',
   imageSizes,
 }: CompareCardProps) {
   return (
@@ -110,7 +114,7 @@ export function CompareCard({
           {descriptionLabel}
         </div>
         {product.description != null && product.description !== '' ? (
-          <Reveal>
+          <Reveal hideLabel={showLessLabel} showLabel={showMoreLabel}>
             <div className="prose prose-sm [&>div>*:first-child]:mt-0">{product.description}</div>
           </Reveal>
         ) : (
@@ -124,7 +128,7 @@ export function CompareCard({
           <div className="font-[family-name:var(--compare-card-font-family-secondary,var(--font-family-mono))] text-xs font-normal uppercase text-[var(--compare-card-label,hsl(var(--foreground)))]">
             {otherDetailsLabel}
           </div>
-          <Reveal>
+          <Reveal hideLabel={showLessLabel} showLabel={showMoreLabel}>
             <dl className="grid grid-cols-2 gap-1 text-xs font-normal text-[var(--compare-card-field,hsl(var(--foreground)))]">
               {product.customFields.map((field, index) => (
                 <Fragment key={index}>

core/vibes/soul/sections/compare-section/index.tsx

@@ -33,6 +33,8 @@ interface CompareSectionProps {
   noOtherDetailsLabel?: string;
   viewOptionsLabel?: string;
   preorderLabel?: string;
+  showMoreLabel?: string;
+  showLessLabel?: string;
   placeholderCount?: number;
   addToCartAction?: CompareAddToCartAction;
 }
@@ -72,6 +74,8 @@ export function CompareSection({
   noOtherDetailsLabel,
   viewOptionsLabel,
   preorderLabel,
+  showMoreLabel,
+  showLessLabel,
   placeholderCount,
 }: CompareSectionProps) {
   return (
@@ -129,6 +133,8 @@ export function CompareSection({
                         preorderLabel={preorderLabel}
                         product={product}
                         ratingLabel={ratingLabel}
+                        showLessLabel={showLessLabel}
+                        showMoreLabel={showMoreLabel}
                         viewOptionsLabel={viewOptionsLabel}
                       />
                     </CarouselItem>