From 6ae22d13ec7fa5d54742df2b3c40fe7b4d2ca4c8 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 4 Apr 2025 21:53:35 +0200
Subject: [PATCH] Feature/extend API keys for Ghostfolio data provider (#4501)

* Extend API keys for Ghostfolio data provider
---
 .../user-account-membership.html              |  5 ++++-
 .../src/app/pages/pricing/pricing-page.html   | 19 ++++++++++++++++++-
 .../membership-card.component.html            |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/app/components/user-account-membership/user-account-membership.html b/apps/client/src/app/components/user-account-membership/user-account-membership.html
index 64dd2ce8..dafbfa9c 100644
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.html
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.html
@@ -4,7 +4,10 @@
       <div class="align-items-center d-flex flex-column">
         <gf-membership-card
           [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
-          [hasPermissionToCreateApiKey]="hasPermissionToCreateApiKey"
+          [hasPermissionToCreateApiKey]="
+            hasPermissionToCreateApiKey &&
+            user?.settings?.isExperimentalFeatures
+          "
           [name]="user?.subscription?.type"
           (generateApiKeyClicked)="onGenerateApiKey()"
         />
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index 3124d99b..b165d5c2 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -240,7 +240,12 @@
                       <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
-                  <li class="align-items-center d-flex mb-1">
+                  <li
+                    class="align-items-center d-flex"
+                    [ngClass]="{
+                      'mb-1': !user?.settings?.isExperimentalFeatures
+                    }"
+                  >
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <span i18n>Professional Data Provider</span>
                     <span
@@ -251,6 +256,18 @@
                       <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
+                  @if (user?.settings?.isExperimentalFeatures) {
+                    <li class="align-items-center d-flex line-height-1 mb-1">
+                      <ion-icon
+                        class="hidden mr-1"
+                        name="checkmark-circle-outline"
+                      />
+                      <small class="text-muted"
+                        ><ng-container i18n>with API access for</ng-container>
+                        Open Source</small
+                      >
+                    </li>
+                  }
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <a i18n [routerLink]="routerLinkFeatures"
diff --git a/libs/ui/src/lib/membership-card/membership-card.component.html b/libs/ui/src/lib/membership-card/membership-card.component.html
index 37634b02..1c68f5e3 100644
--- a/libs/ui/src/lib/membership-card/membership-card.component.html
+++ b/libs/ui/src/lib/membership-card/membership-card.component.html
@@ -14,7 +14,7 @@
       />
     </div>
     @if (hasPermissionToCreateApiKey) {
-      <div class="d-none mt-5">
+      <div class="mt-5">
         <div class="heading text-muted" i18n>API Key</div>
         <div class="align-items-center d-flex">
           <div class="text-monospace value">* * * * * * * * *</div>