fix: wishlist and order template titles with special characters do no…

…t displayed correct (#1658) * special characters in the title like ä,ö,ü
intershop · May 15, 2024 · 42864a7 · 42864a7
1 parent 112f11e
commit 42864a7
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 18 deletions.
diff --git a/src/app/core/pipes/html-encode.pipe.ts b/src/app/core/pipes/html-encode.pipe.ts
@@ -8,6 +8,6 @@ import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({ name: 'ishHtmlEncode', pure: true })
 export class HtmlEncodePipe implements PipeTransform {
   transform(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return value?.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
 }
diff --git a/src/app/extensions/order-templates/models/order-template/order-template.mapper.ts b/src/app/extensions/order-templates/models/order-template/order-template.mapper.ts
@@ -1,5 +1,4 @@
-import { Injectable, SecurityContext, inject } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { Injectable } from '@angular/core';
 
 import { AttributeHelper } from 'ish-core/models/attribute/attribute.helper';
 import { Attribute } from 'ish-core/models/attribute/attribute.model';
@@ -9,8 +8,6 @@ import { OrderTemplate, OrderTemplateItem } from './order-template.model';
 
 @Injectable({ providedIn: 'root' })
 export class OrderTemplateMapper {
-  private sanitizer = inject(DomSanitizer);
-
   private static parseIdFromURI(uri: string): string {
     const match = /wishlists[^\/]*\/([^\?]*)/.exec(uri);
     if (match) {
@@ -43,7 +40,7 @@ export class OrderTemplateMapper {
 
       return {
         id: orderTemplateId,
-        title: this.sanitizer.sanitize(SecurityContext.HTML, orderTemplateData.title),
+        title: orderTemplateData.title,
         itemsCount: orderTemplateData.itemsCount || 0,
         creationDate: orderTemplateData.creationDate,
         items,
@@ -57,7 +54,7 @@ export class OrderTemplateMapper {
     if (orderTemplate && id) {
       return {
         id,
-        title: this.sanitizer.sanitize(SecurityContext.HTML, orderTemplate.title),
+        title: orderTemplate.title,
         creationDate: orderTemplate.creationDate,
       };
     }

diff --git a/src/app/extensions/order-templates/services/order-template/order-template.service.spec.ts b/src/app/extensions/order-templates/services/order-template/order-template.service.spec.ts
@@ -41,7 +41,7 @@ describe('Order Template Service', () => {
             "id": "1234",
             "items": [],
             "itemsCount": 0,
-            "title": null,
+            "title": undefined,
           },
         ]
       `);

diff --git a/...r-templates/shared/select-order-template-modal/select-order-template-modal.component.html b/...r-templates/shared/select-order-template-modal/select-order-template-modal.component.html
@@ -31,7 +31,7 @@ <h2 class="modal-title">{{ headerTranslationKey | translate }}</h2>
             | translate
               : {
                   '0': product.name,
-                  '1': selectedOrderTemplateTitle$ | async,
+                  '1': selectedOrderTemplateTitle$ | async | ishHtmlEncode,
                   '2': selectedOrderTemplateRoute$ | async
                 }
         "

diff --git a/src/app/extensions/wishlists/models/wishlist/wishlist.mapper.ts b/src/app/extensions/wishlists/models/wishlist/wishlist.mapper.ts
@@ -1,5 +1,4 @@
-import { Injectable, SecurityContext, inject } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { Injectable } from '@angular/core';
 
 import { AttributeHelper } from 'ish-core/models/attribute/attribute.helper';
 import { Attribute } from 'ish-core/models/attribute/attribute.model';
@@ -9,8 +8,6 @@ import { Wishlist, WishlistItem } from './wishlist.model';
 
 @Injectable({ providedIn: 'root' })
 export class WishlistMapper {
-  private sanitizer = inject(DomSanitizer);
-
   private static parseIdFromURI(uri: string): string {
     const match = /wishlists[^\/]*\/([^\?]*)/.exec(uri);
     if (match) {
@@ -43,7 +40,7 @@ export class WishlistMapper {
       }
       return {
         id: wishlistId,
-        title: this.sanitizer.sanitize(SecurityContext.HTML, wishlistData.title),
+        title: wishlistData.title,
         itemsCount: wishlistData.itemsCount || 0,
         preferred: wishlistData.preferred,
         public: wishlistData.public,
@@ -58,7 +55,7 @@ export class WishlistMapper {
     if (wishlist && id) {
       return {
         id,
-        title: this.sanitizer.sanitize(SecurityContext.HTML, wishlist.title),
+        title: wishlist.title,
         preferred: wishlist.preferred,
         public: wishlist.public,
       };

diff --git a/src/app/extensions/wishlists/services/wishlist/wishlist.service.spec.ts b/src/app/extensions/wishlists/services/wishlist/wishlist.service.spec.ts
@@ -51,7 +51,7 @@ describe('Wishlist Service', () => {
             "itemsCount": 0,
             "preferred": true,
             "public": undefined,
-            "title": null,
+            "title": undefined,
           },
         ]
       `);
@@ -75,7 +75,7 @@ describe('Wishlist Service', () => {
             "itemsCount": 0,
             "preferred": true,
             "public": undefined,
-            "title": null,
+            "title": undefined,
           },
         ]
       `);

diff --git a/...pp/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.html b/...pp/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.html
@@ -29,7 +29,11 @@ <h2 class="modal-title">{{ headerTranslationKey | translate }}</h2>
         [ishServerHtml]="
           successTranslationKey
             | translate
-              : { '0': product.name, '1': (selectedWishlistRoute$ | async), '2': (selectedWishlistTitle$ | async) }
+              : {
+                  '0': product.name,
+                  '1': (selectedWishlistRoute$ | async),
+                  '2': (selectedWishlistTitle$ | async | ishHtmlEncode)
+                }
         "
         [callbacks]="{ callbackHideDialogModal: callbackHideDialogModal }"
         data-testing-id="wishlist-success-link"