From 03c9e73a372f0357757a1835a933bedceaa7749a Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 11 Mar 2026 02:58:43 +0300
Subject: [PATCH] feat: display promo group and active discount banners on gift
 page

Add promo group banner (green) and active discount banner (orange) to
gift subscription page. PeriodCard now shows original price strikethrough
and discount percentage badge from server-calculated values.
---
 src/api/gift.ts                |  3 +++
 src/pages/GiftSubscription.tsx | 49 ++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/src/api/gift.ts b/src/api/gift.ts
index 72c7d89..3a607d9 100644
--- a/src/api/gift.ts
+++ b/src/api/gift.ts
@@ -40,6 +40,9 @@ export interface GiftConfig {
   payment_methods: GiftPaymentMethod[];
   balance_kopeks: number;
   currency_symbol: string;
+  promo_group_name: string | null;
+  active_discount_percent: number | null;
+  active_discount_expires_at: string | null;
 }
 
 export interface GiftPurchaseRequest {
diff --git a/src/pages/GiftSubscription.tsx b/src/pages/GiftSubscription.tsx
index 54bbc4e..6ae22f2 100644
--- a/src/pages/GiftSubscription.tsx
+++ b/src/pages/GiftSubscription.tsx
@@ -695,6 +695,55 @@ function BuyTabContent({
         </div>
       )}
 
+      {/* Promo group banner */}
+      {config.promo_group_name && (
+        <div className="flex items-center gap-3 rounded-xl border border-success-500/30 bg-success-500/10 p-3">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-success-500/20">
+            <svg
+              className="h-4 w-4 text-success-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+            </svg>
+          </div>
+          <div>
+            <div className="text-sm font-medium text-success-400">
+              {t('subscription.promoGroup.yourGroup', { name: config.promo_group_name })}
+            </div>
+            <div className="text-xs text-dark-400">
+              {t('subscription.promoGroup.personalDiscountsApplied')}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Active discount banner */}
+      {config.active_discount_percent != null && config.active_discount_percent > 0 && (
+        <div className="flex items-center gap-3 rounded-xl border border-orange-500/30 bg-orange-500/10 p-3">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-500/20">
+            <svg
+              className="h-4 w-4 text-orange-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+            </svg>
+          </div>
+          <div className="text-sm font-medium text-orange-400">
+            {t('promo.discountApplied')} -{config.active_discount_percent}%
+          </div>
+        </div>
+      )}
+
       {/* Period selection */}
       {periodsForDisplay.length > 0 && (
         <div>