From 536ebde0493af94a0f691492af2ec83091597f24 Mon Sep 17 00:00:00 2001
From: Pham Hoang Hung <84316773+phhung-axonivy@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:41:19 +0700
Subject: [PATCH] MARP-1445 Rate this connector Fix remaining text also (#243)

---
 .../product-detail/product-detail.component.html |  4 ++--
 .../product-detail.component.spec.ts             | 16 ++++++++++++++--
 .../product-detail/product-detail.component.ts   |  9 +++++----
 .../product-detail/product-detail.service.ts     |  1 +
 .../src/app/shared/constants/common.constant.ts  | 11 +++++++----
 marketplace-ui/src/app/shared/mocks/mock-data.ts |  2 +-
 .../src/app/shared/mocks/mock-services.ts        |  6 +++---
 marketplace-ui/src/assets/i18n/de.yaml           |  6 ++++--
 marketplace-ui/src/assets/i18n/en.yaml           |  6 ++++--
 9 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
index 5ad9ff933..129825a0f 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -204,11 +204,11 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
             alt="Message Star" />
           <p class="rate-empty-text">
             <span [lang]="languageService.selectedLanguage()">
-              {{ 'common.feedback.noFeedbackMessage1' | translate }}
+              {{ productDetailService.noFeedbackLabel() | translate }}
             </span>
             <br />
             <span [lang]="languageService.selectedLanguage()">
-              {{ 'common.feedback.noFeedbackMessage2' | translate }}
+              {{ 'common.feedback.noFeedbackSecondLabel' | translate }}
             </span>
           </p>
           <button
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts
index 5e776c1fd..bb03425a9 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts
@@ -18,7 +18,7 @@ import { of } from 'rxjs';
 import { TypeOption } from '../../../shared/enums/type-option.enum';
 import {
   MOCK_PRODUCT_DETAIL,
-  MOCK_PRODUCT_DETAIL_BY_VERSION,
+  MOCK_CRON_JOB_PRODUCT_DETAIL,
   MOCK_PRODUCT_MODULE_CONTENT,
   MOCK_PRODUCTS
 } from '../../../shared/mocks/mock-data';
@@ -137,7 +137,7 @@ describe('ProductDetailComponent', () => {
       targetVersion
     );
     component.getProductById(productId, false).subscribe(productDetail => {
-      expect(productDetail).toEqual(MOCK_PRODUCT_DETAIL_BY_VERSION);
+      expect(productDetail).toEqual(MOCK_CRON_JOB_PRODUCT_DETAIL);
     });
   });
 
@@ -796,6 +796,18 @@ describe('ProductDetailComponent', () => {
 
   it('should generate right text for the rate connector', () => {
     const rateConnector = fixture.debugElement.query(By.css('.rate-connector-btn'));
+    console.log(rateConnector);
     expect(rateConnector.childNodes[0].nativeNode.textContent).toContain("common.feedback.rateFeedbackForConnectorBtnLabel");
+
+    const rateConnectorEmptyText = fixture.debugElement.query(By.css('.rate-empty-text'));
+    console.log(rateConnectorEmptyText);
+    expect(rateConnectorEmptyText.childNodes[0].nativeNode.textContent).toContain("common.feedback.noFeedbackForConnectorLabel");
+
+    component.route.snapshot.params['id'] = 'cronjob';
+    spyOn(component, 'getProductById').and.returnValue(of(MOCK_CRON_JOB_PRODUCT_DETAIL));
+    component.ngOnInit();
+    fixture.detectChanges();
+    expect(rateConnector.childNodes[0].nativeNode.textContent).toContain("common.feedback.rateFeedbackForUtilityBtnLabel");
+    expect(rateConnectorEmptyText.childNodes[0].nativeNode.textContent).toContain("common.feedback.noFeedbackForUtilityLabel");
   });
 });
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
index 4dcbf3c4d..6daf53420 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
@@ -22,7 +22,7 @@ import {
   DEFAULT_IMAGE_URL,
   DEFAULT_VENDOR_IMAGE,
   DEFAULT_VENDOR_IMAGE_BLACK,
-  PRODUCT_DETAIL_TABS, RATING_BUTTONS, SHOW_DEV_VERSION,
+  PRODUCT_DETAIL_TABS, RATING_LABELS_BY_TYPE, SHOW_DEV_VERSION,
   VERSION
 } from '../../../shared/constants/common.constant';
 import { ItemDropdown } from '../../../shared/models/item-dropdown.model';
@@ -161,9 +161,10 @@ export class ProductDetailComponent {
         this.updateProductDetailActionType(productDetail);
         this.logoUrl = productDetail.logoUrl;
         this.updateWebBrowserTitle();
-        const ratingBtn = RATING_BUTTONS.find(button => button.type === productDetail.type);
-        if (ratingBtn !== undefined) {
-          this.productDetailService.ratingBtnLabel.set(ratingBtn.btnLabel);
+        const ratingLabels = RATING_LABELS_BY_TYPE.find(button => button.type === productDetail.type);
+        if (ratingLabels !== undefined) {
+          this.productDetailService.ratingBtnLabel.set(ratingLabels.btnLabel);
+          this.productDetailService.noFeedbackLabel.set(ratingLabels.noFeedbackLabel);
         }
       });
 
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.service.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.service.ts
index df0dfa9f1..6862eb0d8 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.service.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.service.ts
@@ -17,6 +17,7 @@ export class ProductDetailService {
   httpClient = inject(HttpClient);
   loadingService = inject(LoadingService);
   ratingBtnLabel: WritableSignal<string> = signal('');
+  noFeedbackLabel: WritableSignal<string> = signal('');
 
   getExternalDocumentForProductByVersion(productId: string, version: string): Observable<ExternalDocument> {
     return this.httpClient.get<ExternalDocument>(
diff --git a/marketplace-ui/src/app/shared/constants/common.constant.ts b/marketplace-ui/src/app/shared/constants/common.constant.ts
index c0fb856c3..7631e713b 100644
--- a/marketplace-ui/src/app/shared/constants/common.constant.ts
+++ b/marketplace-ui/src/app/shared/constants/common.constant.ts
@@ -80,18 +80,21 @@ export const LANGUAGES = [
   }
 ];
 
-export const RATING_BUTTONS = [
+export const RATING_LABELS_BY_TYPE = [
   {
     type: 'connector',
-    btnLabel: 'common.feedback.rateFeedbackForConnectorBtnLabel'
+    btnLabel: 'common.feedback.rateFeedbackForConnectorBtnLabel',
+    noFeedbackLabel: 'common.feedback.noFeedbackForConnectorLabel'
   },
   {
     type: 'solution',
-    btnLabel: 'common.feedback.rateFeedbackForSolutionBtnLabel'
+    btnLabel: 'common.feedback.rateFeedbackForSolutionBtnLabel',
+    noFeedbackLabel: 'common.feedback.noFeedbackForSolutionLabel'
   },
   {
     type: 'util',
-    btnLabel: 'common.feedback.rateFeedbackForUtilityBtnLabel'
+    btnLabel: 'common.feedback.rateFeedbackForUtilityBtnLabel',
+    noFeedbackLabel: 'common.feedback.noFeedbackForUtilityLabel'
   }
 ];
 
diff --git a/marketplace-ui/src/app/shared/mocks/mock-data.ts b/marketplace-ui/src/app/shared/mocks/mock-data.ts
index a10525630..cf319dc7e 100644
--- a/marketplace-ui/src/app/shared/mocks/mock-data.ts
+++ b/marketplace-ui/src/app/shared/mocks/mock-data.ts
@@ -216,7 +216,7 @@ export const MOCK_PRODUCT_MODULE_CONTENT: ProductModuleContent = {
   productId: 'jira-connector'
 };
 
-export const MOCK_PRODUCT_DETAIL_BY_VERSION: ProductDetail = {
+export const MOCK_CRON_JOB_PRODUCT_DETAIL: ProductDetail = {
   id: 'cronjob',
   names: {
     de: 'Cron Job',
diff --git a/marketplace-ui/src/app/shared/mocks/mock-services.ts b/marketplace-ui/src/app/shared/mocks/mock-services.ts
index 1d19b8f48..126f6f11e 100644
--- a/marketplace-ui/src/app/shared/mocks/mock-services.ts
+++ b/marketplace-ui/src/app/shared/mocks/mock-services.ts
@@ -6,7 +6,7 @@ import {
   MOCK_PRODUCTS_FILTER_CONNECTOR,
   MOCK_PRODUCTS_NEXT_PAGE,
   MOCK_PRODUCT_DETAIL,
-  MOCK_PRODUCT_DETAIL_BY_VERSION
+  MOCK_CRON_JOB_PRODUCT_DETAIL
 } from './mock-data';
 import { ProductApiResponse } from '../models/apis/product-response.model';
 import { ProductDetail } from '../models/product-detail.model';
@@ -30,13 +30,13 @@ export class MockProductService {
     productId: string,
     version: string
   ): Observable<ProductDetail> {
-    return of(MOCK_PRODUCT_DETAIL_BY_VERSION);
+    return of(MOCK_CRON_JOB_PRODUCT_DETAIL);
   }
 
   getBestMatchProductDetailsWithVersion(
     productId: string,
     version: string
   ): Observable<ProductDetail> {
-    return of(MOCK_PRODUCT_DETAIL_BY_VERSION);
+    return of(MOCK_CRON_JOB_PRODUCT_DETAIL);
   }
 }
diff --git a/marketplace-ui/src/assets/i18n/de.yaml b/marketplace-ui/src/assets/i18n/de.yaml
index 09b595835..4722815bc 100644
--- a/marketplace-ui/src/assets/i18n/de.yaml
+++ b/marketplace-ui/src/assets/i18n/de.yaml
@@ -115,8 +115,10 @@ common:
     reviewLabel: Überprüfung
     detailedReviews: Ausführliche Bewertungen
     showMoreBtnLabel: Mehr anzeigen
-    noFeedbackMessage1: Deine Meinung ist gefragt.
-    noFeedbackMessage2: ''
+    noFeedbackForConnectorLabel: Zu diesem Konnektor gibt's noch kein Feedback.
+    noFeedbackForSolutionLabel: Zu dieser Lösung gibt's noch kein Feedback.
+    noFeedbackForUtilityLabel: Zu diesem Tool gibt's noch kein Feedback.
+    noFeedbackSecondLabel: Sag uns was Du denkst.
     rateFeedbackForConnectorBtnLabel: Bewerte diesen Konnektor
     rateFeedbackForSolutionBtnLabel: Bewerte diese Lösung
     rateFeedbackForUtilityBtnLabel: Bewerte dieses Tool
diff --git a/marketplace-ui/src/assets/i18n/en.yaml b/marketplace-ui/src/assets/i18n/en.yaml
index a4b9e928a..f31b6a195 100644
--- a/marketplace-ui/src/assets/i18n/en.yaml
+++ b/marketplace-ui/src/assets/i18n/en.yaml
@@ -119,8 +119,10 @@ common:
     reviewLabel: Review
     detailedReviews: Detailed reviews
     showMoreBtnLabel: Show more
-    noFeedbackMessage1: There is no feedback for this connector yet.
-    noFeedbackMessage2: Be the first to share your opinion.
+    noFeedbackForConnectorLabel: There is no feedback for this connector yet.
+    noFeedbackForSolutionLabel: There is no feedback for this solution yet.
+    noFeedbackForUtilityLabel: There is no feedback for this utility yet.
+    noFeedbackSecondLabel: Be the first to share your opinion.
     rateFeedbackForConnectorBtnLabel: Rate this connector
     rateFeedbackForSolutionBtnLabel: Rate this solution
     rateFeedbackForUtilityBtnLabel: Rate this utility