feat(subscription): add hover information on the status icon (#1130)

#1123
eclipse-tractusx · Oct 8, 2024 · bb8e63f · bb8e63f
1 parent 5958ffe
commit bb8e63f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {