feat/CXSPA-7587:add help icon on shell bar link to help portal(#19019) (

#19019) Add an icon button "sys-help" on the shellbar which helps customers easy access to ASM help portal. When customer clicks on this icon button, the browser will open up a new tab with the URL: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/d1ca9a1517f847a5b57b4e08400807c1/2367ff04ccb649ac82a3795ecf72a804.html?locale=en-US.
SAP · Jul 17, 2024 · 378db08 · 378db08
1 parent 28dce71
commit 378db08
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 2 deletions.
diff --git a/feature-libs/asm/assets/translations/en/asm.json b/feature-libs/asm/assets/translations/en/asm.json
@@ -4,6 +4,7 @@
     "mainTitle": "Assisted Service Mode",
     "logout": "Sign Out",
     "hideUi": "Close ASM",
+    "helpPortalUrl": "Help",
     "customers": "Customers",
     "asmCustomer360Button": "Customer 360 View",
     "createCustomerSuccessfullyAlert": "The customer account has been created and the customer session has started.",

diff --git a/feature-libs/asm/components/asm-main-ui/asm-main-ui.component.html b/feature-libs/asm/components/asm-main-ui/asm-main-ui.component.html
@@ -13,6 +13,18 @@
     </div>
   </div>
   <div class="asm-bar-actions">
+    <div class="cx-asm-help-portal">
+      <a
+        href="https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/d1ca9a1517f847a5b57b4e08400807c1/2367ff04ccb649ac82a3795ecf72a804.html?locale=en-US"
+        target="_blank"
+        rel="noopener noreferrer"
+        role="button"
+      >
+        <cx-icon [type]="iconTypes.HELP"></cx-icon>
+        <span>{{ 'asm.helpPortalUrl' | cxTranslate }}</span></a
+      >
+    </div>
+
     <div
       class="cx-asm-customer-list"
       *ngIf="customerSupportAgentLoggedIn$ | async"

diff --git a/feature-libs/asm/styles/components/_asm-main-ui.component.scss b/feature-libs/asm/styles/components/_asm-main-ui.component.scss
@@ -127,6 +127,7 @@
         .cx-asm-customer-list-link {
           color: #0064d9;
           text-decoration: none;
+          padding-inline-end: 1.4rem;
         }
         .cx-asm-customer-list-link:hover {
           text-decoration: underline;
@@ -196,3 +197,10 @@
     }
   }
 }
+
+.cx-asm-help-portal {
+  padding-inline-end: 1.5rem;
+  .fa-circle-question {
+    padding-inline-end: 0.3rem;
+  }
+}
diff --git a/feature-libs/asm/styles/components/_asm-session-timer.component.scss b/feature-libs/asm/styles/components/_asm-session-timer.component.scss
@@ -3,7 +3,7 @@
   align-items: center;
   height: 16px;
 
-  margin: 0 15px;
+  margin: 0 15px 0 0;
 
   .label {
     margin: 0 6px;

diff --git a/feature-libs/asm/styles/components/_asm-toggle-ui.component.scss b/feature-libs/asm/styles/components/_asm-toggle-ui.component.scss
@@ -4,7 +4,7 @@
   align-items: center;
 
   height: 16px;
-  margin: 0 15px;
+  margin: 0 1.2rem 0 0;
 
   .toggleUi {
     display: inherit;

diff --git a/projects/storefrontlib/cms-components/misc/icon/fontawesome-icon.config.ts b/projects/storefrontlib/cms-components/misc/icon/fontawesome-icon.config.ts
@@ -73,6 +73,7 @@ export const fontawesomeIconConfig: IconConfig = {
       ARROW_UP: 'fas  fa-arrow-up',
       C360_INVOICE: 'fas fa-file-invoice',
       C360_CIRCLE_USER: 'fas fa-circle-user',
+      HELP: 'far fa-circle-question',
     },
     resources: [
       {

diff --git a/projects/storefrontlib/cms-components/misc/icon/icon.model.ts b/projects/storefrontlib/cms-components/misc/icon/icon.model.ts
@@ -72,6 +72,7 @@ export enum ICON_TYPE {
   ARROW_UP = 'ARROW_UP',
   C360_CIRCLE_USER = 'C360_CIRCLE_USER',
   C360_INVOICE = 'C360_INVOICE',
+  HELP = 'HELP',
 }
 
 @Injectable({