From bb8e63f7fd8f8f2f36b58cf6c2430dd585b84eae Mon Sep 17 00:00:00 2001
From: Manojava Koushik <111366021+manojava-gk@users.noreply.github.com>
Date: Tue, 8 Oct 2024 15:16:34 +0530
Subject: [PATCH] feat(subscription):  add hover information on the status icon
 (#1130)

https://github.com/eclipse-tractusx/portal-frontend/issues/1123
---
 CHANGELOG.md                                  |  2 +
 src/assets/locales/de/main.json               |  3 ++
 src/assets/locales/en/main.json               |  3 ++
 .../Subscription/SubscriptionElements.tsx     | 42 +++++++++++++++----
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65235eec9..f8b93bd96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@
   - updated technical user details with user type and service endpoint fields. Also, updated copy icon color for better view and made copy icon available only when value is available [#1137](https://github.com/eclipse-tractusx/portal-frontend/pull/1137)
 - **Company Subscriptions**
   - update API query parameters and fix tab UI scroll [#1131](https://github.com/eclipse-tractusx/portal-frontend/pull/1131)
+- **App & Service Subscription Management**
+  - updated search place holder text - showing only available offer names at the top - and implemented hover information on the status icon of service subscription [#1130](https://github.com/eclipse-tractusx/portal-frontend/pull/1130)
 - **Customer Data**
   - re-enabled CSV upload [#1144](https://github.com/eclipse-tractusx/portal-frontend/pull/1144)
   - reverted manual intervention with ready state api [#1144](https://github.com/eclipse-tractusx/portal-frontend/pull/1144)
diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
index 9517608c6..699e2ef69 100644
--- a/src/assets/locales/de/main.json
+++ b/src/assets/locales/de/main.json
@@ -1488,6 +1488,9 @@
       "pleaseEnterValidURL": "Please enter a valid URL",
       "error": "Error",
       "success": "Success",
+      "pending": "Das Abonnement steht noch aus",
+      "active": "Das Abonnement ist aktiv",
+      "process": "Das Abonnement ist in Bearbeitung",
       "tabs": {
         "request": "Request",
         "active": "Active",
diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
index 06080b3b2..627f5539b 100644
--- a/src/assets/locales/en/main.json
+++ b/src/assets/locales/en/main.json
@@ -1456,6 +1456,9 @@
       "pleaseEnterValidURL": "Please enter a valid URL",
       "error": "Error",
       "success": "Success",
+      "pending": "Subscription is Pending",
+      "active": "Subscription is Active",
+      "process": "Subscription is in Progress",
       "tabs": {
         "request": "Request",
         "active": "Active",
diff --git a/src/components/shared/templates/Subscription/SubscriptionElements.tsx b/src/components/shared/templates/Subscription/SubscriptionElements.tsx
index fbea6df5e..380f4f69c 100644
--- a/src/components/shared/templates/Subscription/SubscriptionElements.tsx
+++ b/src/components/shared/templates/Subscription/SubscriptionElements.tsx
@@ -178,7 +178,15 @@ export default function SubscriptionElements({
     subscription: CompanySubscriptionData
   ) => {
     if (subscription.offerSubscriptionStatus === SubscriptionStatus.ACTIVE) {
-      return <AddTaskIcon className="statusIcon active" />
+      return (
+        <Tooltips
+          color="dark"
+          tooltipPlacement="top-start"
+          tooltipText={t('content.appSubscription.active')}
+        >
+          <AddTaskIcon className="statusIcon active" />
+        </Tooltips>
+      )
     } else if (
       subscription.offerSubscriptionStatus === SubscriptionStatus.PENDING
     ) {
@@ -211,7 +219,13 @@ export default function SubscriptionElements({
                     })
               }}
             />
-            <HistoryIcon className="statusIcon pending" />
+            <Tooltips
+              color="dark"
+              tooltipPlacement="top-start"
+              tooltipText={t('content.appSubscription.pending')}
+            >
+              <HistoryIcon className="statusIcon pending" />
+            </Tooltips>
           </>
         )
       } else if (
@@ -226,16 +240,28 @@ export default function SubscriptionElements({
               variant="filled"
               onClick={() => handleActivate(subscription.subscriptionId)}
             />
-            <HistoryIcon className="statusIcon pending" />
+            <Tooltips
+              color="dark"
+              tooltipPlacement="top-start"
+              tooltipText={t('content.appSubscription.pending')}
+            >
+              <HistoryIcon className="statusIcon pending" />
+            </Tooltips>
           </>
         )
       } else {
         return (
-          <img
-            src={`${getAssetBase()}/images/icons/process.svg`}
-            className="statusIcon"
-            alt="subscription process"
-          />
+          <Tooltips
+            color="dark"
+            tooltipPlacement="top-start"
+            tooltipText={t('content.appSubscription.process')}
+          >
+            <img
+              src={`${getAssetBase()}/images/icons/process.svg`}
+              className="statusIcon"
+              alt="subscription process"
+            />
+          </Tooltips>
         )
       }
     } else {