From d7171b922126bbdc5b7da8c2cde28e3b8df68a93 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 12 Jan 2025 11:35:17 +0100
Subject: [PATCH] Feature/extend promotion system by label (#4181)

* Extend promotion system by label
---
 apps/client/src/app/pages/pricing/pricing-page.component.ts | 4 ++++
 apps/client/src/app/pages/pricing/pricing-page.html         | 5 +++++
 apps/client/src/app/pages/pricing/pricing-page.scss         | 6 ++++++
 .../src/lib/interfaces/subscription-offer.interface.ts      | 1 +
 4 files changed, 16 insertions(+)

diff --git a/apps/client/src/app/pages/pricing/pricing-page.component.ts b/apps/client/src/app/pages/pricing/pricing-page.component.ts
index d7b904b4e..62e2bec0b 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.component.ts
@@ -34,6 +34,7 @@ export class PricingPageComponent implements OnDestroy, OnInit {
     'DATA_IMPORT_AND_EXPORT_TOOLTIP_PREMIUM'
   );
   public isLoggedIn: boolean;
+  public label: string;
   public price: number;
   public priceId: string;
   public professionalDataProviderTooltipPremium = translate(
@@ -59,6 +60,7 @@ export class PricingPageComponent implements OnDestroy, OnInit {
 
     this.coupon = subscriptionOffers?.default?.coupon;
     this.durationExtension = subscriptionOffers?.default?.durationExtension;
+    this.label = subscriptionOffers?.default?.label;
     this.price = subscriptionOffers?.default?.price;
 
     this.userService.stateChanged
@@ -80,6 +82,8 @@ export class PricingPageComponent implements OnDestroy, OnInit {
             subscriptionOffers?.[
               this.user?.subscription?.offer
             ]?.durationExtension;
+          this.label =
+            subscriptionOffers?.[this.user?.subscription?.offer]?.label;
           this.price =
             subscriptionOffers?.[this.user?.subscription?.offer]?.price;
           this.priceId =
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index 605ad5d2e..3124d99b1 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -179,6 +179,11 @@
             [ngClass]="{ active: user?.subscription?.type === 'Premium' }"
           >
             <mat-card-content class="d-flex flex-column h-100">
+              @if (label) {
+                <div class="badge-container position-absolute text-right">
+                  <span class="badge badge-warning m-1">{{ label }}</span>
+                </div>
+              }
               <div class="flex-grow-1">
                 <div class="align-items-center d-flex mb-2">
                   <h4 class="align-items-center d-flex flex-grow-1 m-0">
diff --git a/apps/client/src/app/pages/pricing/pricing-page.scss b/apps/client/src/app/pages/pricing/pricing-page.scss
index ad8e97b19..c92ca364f 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.scss
+++ b/apps/client/src/app/pages/pricing/pricing-page.scss
@@ -23,6 +23,12 @@
     ion-icon[name='checkmark-circle-outline'] {
       color: rgba(var(--palette-primary-500), 1);
     }
+
+    .badge-container {
+      left: 0;
+      right: 0;
+      top: 0;
+    }
   }
 }
 
diff --git a/libs/common/src/lib/interfaces/subscription-offer.interface.ts b/libs/common/src/lib/interfaces/subscription-offer.interface.ts
index 8db91da6e..9ffe96a58 100644
--- a/libs/common/src/lib/interfaces/subscription-offer.interface.ts
+++ b/libs/common/src/lib/interfaces/subscription-offer.interface.ts
@@ -4,6 +4,7 @@ export interface SubscriptionOffer {
   coupon?: number;
   couponId?: string;
   durationExtension?: StringValue;
+  label?: string;
   price: number;
   priceId: string;
 }