fix: add cx-read-more component (for product reviews)

projects/assets/src/translations/en/common.json

@@ -33,7 +33,9 @@
     "zoomOut": "Zoom out",
     "selected": "Selected",
     "expand": "Expand",
-    "collapse": "Collapse"
+    "collapse": "Collapse",
+    "readMore": "Read More",
+    "readLess": "Read Less"
   },
   "pageMetaResolver": {
     "category": {

projects/assets/src/translations/en/product.json

@@ -60,6 +60,7 @@
     "overallRating": "Overall Rating",
     "reviewTitle": "Review Title",
     "writeYourComments": "Write your comments",
+    "commentPlaceholder": "What did you like? \nWhat could be improved? \nHow long have you used it?",
     "rating": "Rating",
     "ratingRequired": "Product rating, required",
     "addRate": "Add rate: {{count}} star",
@@ -70,7 +71,8 @@
     "less": "Show Less Reviews",
     "thankYouForReview": "Thank you for the review! Note that reviews may require review before appearing here.",
     "postReviewFail": "Something went wrong while posting your review. Please try again later.",
-    "ratedOutOf": "Rated: {{rating}} out of 5"
+    "ratedOutOf": "Rated: {{rating}} out of 5",
+    "charactersLeft": "characters left: {{count}}"
   },
   "productCarousel": {
     "carouselLabel": "Carousel, {{title}}"

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -628,6 +628,18 @@ export interface FeatureTogglesInterface {
    */
   a11yNgSelectLayering?: boolean;
 
+  /**
+   * Introduces read more directive for presenting elements with long text.
+   * Affects: ProductReviewsComponent
+   */
+  readMoreDirective?: boolean;
+
+  /**
+   * Introduces characters left for product review form elements.
+   * Affects: ProductReviewsComponent
+   */
+  productReviewCharactersLeft?: boolean;
+
   /**
    * The optional `aria-controls` attribute will override on the NgSelect implementation.
    * The updated library employs the `aria-controls` attribute to indicate the relationship between the button and the dropdown.
@@ -831,6 +843,8 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yWideScreenImprovements: false,
   a11yOptimizedMenuSpacing: false,
   a11yNgSelectLayering: false,
+  readMoreDirective: false,
+  productReviewCharactersLeft: false,
   a11yNgSelectAriaControls: false,
   enableSecurePasswordValidation: true,
   enableCarouselCategoryProducts: true,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -389,6 +389,8 @@ if (environment.cpq) {
         a11yWrapReviewOrderInSection: true,
         a11yOptimizedMenuSpacing: true,
         a11yNgSelectLayering: true,
+        readMoreDirective: true,
+        productReviewCharactersLeft: true,
         a11yNgSelectAriaControls: true,
         enableCarouselCategoryProducts: true,
         enableSecurePasswordValidation: true,

projects/storefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html

@@ -35,7 +35,14 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
             {{ review.alias ? review.alias : review.principal?.name }}
           </div>
           <div class="date">{{ review.date | cxDate }}</div>
-          <div class="text">{{ review.comment }}</div>
+          <div *cxFeature="'!readMoreDirective'" class="text">
+            {{ review.comment }}
+          </div>
+          <cx-read-more
+            *cxFeature="'readMoreDirective'"
+            class="text"
+            [text]="review.comment!"
+          ></cx-read-more>
         </div>
         <div *ngIf="reviews.length > initialMaxListItems">
           <button
@@ -87,6 +94,20 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
             <cx-form-required-asterisks />
           </span>
           <input
+            *cxFeature="'!productReviewCharactersLeft'"
+            required="true"
+            #titleInput
+            type="text"
+            class="form-control"
+            formControlName="title"
+            [attr.aria-invalid]="
+              reviewForm.get('title')?.touched &&
+              reviewForm.get('title')?.invalid
+            "
+            [attr.aria-errormessage]="'titleError'"
+          />
+          <input
+            *cxFeature="'productReviewCharactersLeft'"
             required="true"
             #titleInput
             type="text"
@@ -97,6 +118,7 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
               reviewForm.get('title')?.invalid
             "
             [attr.aria-errormessage]="'titleError'"
+            [maxLength]="maxLengthReviewTitle"
           />
 
           <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
@@ -113,6 +135,21 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
             *cxFeature="'!formErrorsDescriptiveMessages'"
             [control]="reviewForm.get('title')"
           ></cx-form-errors>
+
+          <p
+            *cxFeature="'productReviewCharactersLeft'"
+            class="cx-customer-ticket-input-hint text-right"
+          >
+            {{
+              'productReview.charactersLeft'
+                | cxTranslate
+                  : {
+                      count:
+                        maxLengthReviewTitle -
+                        (reviewForm.get('title')?.value?.length || 0),
+                    }
+            }}
+          </p>
         </label>
       </div>
       <div class="form-group">
@@ -122,6 +159,7 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
             <cx-form-required-asterisks />
           </span>
           <textarea
+            *cxFeature="'!productReviewCharactersLeft'"
             required="true"
             class="form-control"
             rows="3"
@@ -132,6 +170,20 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
             "
             [attr.aria-errormessage]="'commentError'"
           ></textarea>
+          <textarea
+            *cxFeature="'productReviewCharactersLeft'"
+            required="true"
+            class="form-control"
+            rows="3"
+            [placeholder]="'productReview.commentPlaceholder' | cxTranslate"
+            formControlName="comment"
+            [attr.aria-invalid]="
+              reviewForm.get('comment')?.touched &&
+              reviewForm.get('comment')?.invalid
+            "
+            [attr.aria-errormessage]="'commentError'"
+            [maxLength]="maxLengthReviewComment"
+          ></textarea>
 
           <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
           <cx-form-errors
@@ -147,6 +199,21 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
             *cxFeature="'!formErrorsDescriptiveMessages'"
             [control]="reviewForm.get('comment')"
           ></cx-form-errors>
+
+          <p
+            *cxFeature="'productReviewCharactersLeft'"
+            class="cx-customer-ticket-input-hint text-right"
+          >
+            {{
+              'productReview.charactersLeft'
+                | cxTranslate
+                  : {
+                      count:
+                        maxLengthReviewComment -
+                        (reviewForm.get('comment')?.value?.length || 0),
+                    }
+            }}
+          </p>
         </label>
       </div>
       <div class="form-group">
@@ -195,13 +262,49 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
             >{{ 'productReview.reviewerName' | cxTranslate }}
           </span>
           <input
+            *cxFeature="'!productReviewCharactersLeft'"
             type="text"
             class="form-control"
             formControlName="reviewerName"
           />
+          <input
+            *cxFeature="'productReviewCharactersLeft'"
+            type="text"
+            class="form-control"
+            formControlName="reviewerName"
+            [maxLength]="maxLengthReviewerName"
+          />
+          <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+          <cx-form-errors
+            *cxFeature="'formErrorsDescriptiveMessages'"
+            id="titleError"
+            [translationParams]="{
+              label: 'productReview.reviewerName' | cxTranslate,
+            }"
+            [control]="reviewForm.get('reviewerName')"
+          ></cx-form-errors>
+
+          <cx-form-errors
+            *cxFeature="'!formErrorsDescriptiveMessages'"
+            [control]="reviewForm.get('reviewerName')"
+          ></cx-form-errors>
+          <p
+            *cxFeature="'productReviewCharactersLeft'"
+            class="cx-customer-ticket-input-hint text-right"
+          >
+            {{
+              'productReview.charactersLeft'
+                | cxTranslate
+                  : {
+                      count:
+                        maxLengthReviewerName -
+                        (reviewForm.get('reviewerName')?.value?.length ?? 0),
+                    }
+            }}
+          </p>
         </label>
       </div>
-      <div class="form-group row">
+      <div class="form-group row justify-content-md-end">
         <div class="col-12 col-md-4">
           <button
             type="button"

projects/storefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.ts

@@ -9,6 +9,8 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  inject,
+  Input,
   ViewChild,
 } from '@angular/core';
 import {
@@ -17,6 +19,7 @@ import {
   Validators,
 } from '@angular/forms';
 import {
+  FeatureConfigService,
   isNotNullable,
   Product,
   ProductReviewService,
@@ -43,12 +46,16 @@ export class ProductReviewsComponent {
   @ViewChild('writeReviewButton', { static: false })
   writeReviewButton: ElementRef;
 
+  @Input() maxLengthReviewTitle = 255;
+  @Input() maxLengthReviewComment = 2200;
+  @Input() maxLengthReviewerName = 64;
   isWritingReview = false;
 
   // TODO: configurable
   initialMaxListItems = 5;
   maxListItems: number;
   reviewForm: UntypedFormGroup;
+  private featureConfigService = inject(FeatureConfigService);
 
   product$: Observable<Product | null> =
     this.currentProductService.getProduct();
@@ -128,11 +135,31 @@ export class ProductReviewsComponent {
   }
 
   private resetReviewForm(): void {
+    const isProductReviewCharactersLeftEnabled =
+      this.featureConfigService.isEnabled('productReviewCharactersLeft');
     this.reviewForm = this.fb.group({
-      title: ['', Validators.required],
-      comment: ['', Validators.required],
+      title: [
+        '',
+        !isProductReviewCharactersLeftEnabled
+          ? Validators.required
+          : [
+              Validators.required,
+              Validators.maxLength(this.maxLengthReviewTitle),
+            ],
+      ],
+      comment: [
+        '',
+        !isProductReviewCharactersLeftEnabled
+          ? Validators.required
+          : [
+              Validators.required,
+              Validators.maxLength(this.maxLengthReviewComment),
+            ],
+      ],
       rating: [null, Validators.required],
-      reviewerName: '',
+      reviewerName: !isProductReviewCharactersLeftEnabled
+        ? ''
+        : ['', Validators.maxLength(this.maxLengthReviewerName)],
     });
   }
 }

projects/storefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.module.ts

@@ -18,6 +18,7 @@ import {
   FormErrorsModule,
   FormRequiredAsterisksComponent,
   FormRequiredLegendComponent,
+  ReadMoreComponent,
   StarRatingModule,
 } from '../../../../shared/index';
 import { ProductReviewsComponent } from './product-reviews.component';
@@ -33,6 +34,7 @@ import { ProductReviewsComponent } from './product-reviews.component';
     FeaturesConfigModule,
     FormRequiredAsterisksComponent,
     FormRequiredLegendComponent,
+    ReadMoreComponent,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{

projects/storefrontlib/shared/components/index.ts

@@ -23,3 +23,4 @@ export * from './ng-select-a11y/index';
 export * from './assistive-technology-message/index';
 export * from './captcha/index';
 export * from './chat-messaging/index';
+export * from './read-more';

projects/storefrontlib/shared/components/read-more/index.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './read-more.component';

projects/storefrontlib/shared/components/read-more/read-more.component.html

@@ -0,0 +1,14 @@
+<ng-container *ngIf="isCollapsed">
+  {{ text.slice(0, maxLength) }}
+</ng-container>
+<ng-container *ngIf="!isCollapsed">
+  {{ text }}
+</ng-container>
+
+<button
+  class="btn-link"
+  *ngIf="showReadMore"
+  (click)="isCollapsed = !isCollapsed"
+>
+  {{ (isCollapsed ? readMoreI18nKey! : readLessI18nKey!) | cxTranslate }}
+</button>