feat(payment): implement first recharge offer functionality and UI updates

src/app/subscription/components/subscription-coins-offer-section.module.css

@@ -45,7 +45,7 @@
 
 .row {
   display: grid;
-  grid-template-columns: 48px minmax(0, 1fr) auto;
+  grid-template-columns: 48px minmax(0, 1fr) auto auto;
   align-items: center;
   width: 100%;
   min-height: 48px;
@@ -102,6 +102,28 @@
   line-height: 1.2;
 }
 
+.offerBadge {
+  justify-self: end;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 1;
+  white-space: nowrap;
+  box-shadow: 0 7px 16px rgba(255, 95, 174, 0.24);
+}
+
+.priceGroup {
+  display: inline-flex;
+  min-width: 54px;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  line-height: 1;
+}
+
 .price {
   font-size: 16px;
   font-weight: 800;
@@ -109,6 +131,16 @@
   white-space: nowrap;
 }
 
+.originalPrice {
+  margin-top: 3px;
+  color: #9c8b91;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  text-decoration: line-through;
+  white-space: nowrap;
+}
+
 @media (max-width: 360px) {
   .title {
     font-size: 20px;
@@ -120,11 +152,17 @@
   }
 
   .row {
-    grid-template-columns: 46px minmax(0, 1fr) auto;
+    grid-template-columns: 46px minmax(0, 1fr) auto auto;
   }
 
   .coins,
   .price {
     font-size: 14px;
   }
+
+  .offerBadge {
+    padding-right: 6px;
+    padding-left: 6px;
+    font-size: 10px;
+  }
 }

src/app/subscription/components/subscription-coins-offer-section.tsx

@@ -9,6 +9,10 @@ export interface CoinsOfferPlanView {
   coins: number;
   price: string;
   currency: string;
+  originalPrice?: string;
+  isFirstRechargeOffer?: boolean;
+  firstRechargeDiscountPercent?: number | null;
+  promotionType?: string | null;
 }
 
 export interface SubscriptionCoinsOfferSectionProps {
@@ -45,9 +49,22 @@ export function SubscriptionCoinsOfferSection({
                 <FaCoins size={18} />
               </span>
               <span className={styles.coins}>{plan.coins} Coins</span>
-              <span className={styles.price}>
-                {plan.currency}
-                {plan.price}
+              {plan.isFirstRechargeOffer ? (
+                <span className={styles.offerBadge}>
+                  {plan.firstRechargeDiscountPercent ?? 50}% OFF
+                </span>
+              ) : null}
+              <span className={styles.priceGroup}>
+                <span className={styles.price}>
+                  {plan.currency}
+                  {plan.price}
+                </span>
+                {plan.originalPrice ? (
+                  <span className={styles.originalPrice}>
+                    {plan.currency}
+                    {plan.originalPrice}
+                  </span>
+                ) : null}
               </span>
             </button>
           );

src/app/subscription/components/subscription-screen.module.css

@@ -18,6 +18,52 @@
   display: inline-flex;
 }
 
+.firstRechargeBanner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 14px;
+  padding: 12px 14px;
+  border: 1px solid rgba(255, 95, 174, 0.28);
+  border-radius: 22px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 239, 248, 0.94) 100%),
+    #ffffff;
+  box-shadow: 0 14px 32px rgba(255, 95, 174, 0.16);
+}
+
+.firstRechargeBadge {
+  flex: 0 0 auto;
+  padding: 8px 10px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1;
+  box-shadow: 0 10px 22px rgba(255, 95, 174, 0.25);
+}
+
+.firstRechargeCopy {
+  min-width: 0;
+}
+
+.firstRechargeTitle {
+  margin: 0;
+  color: #181014;
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1.15;
+}
+
+.firstRechargeSubtitle {
+  margin: 4px 0 0;
+  color: #75656d;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
 .offerStack {
   display: flex;
   flex-direction: column;

src/app/subscription/components/subscription-vip-offer-section.module.css

@@ -63,9 +63,10 @@
 }
 
 .planCard {
+  position: relative;
   display: flex;
   min-width: 0;
-  min-height: 118px;
+  min-height: 128px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -101,7 +102,25 @@
   transform: translateY(-3px);
 }
 
+.offerBadge {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  max-width: calc(100% - 12px);
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 1;
+  white-space: nowrap;
+  box-shadow: 0 7px 16px rgba(255, 95, 174, 0.28);
+  transform: translateX(-50%);
+}
+
 .planTitle {
+  margin-top: 12px;
   font-size: 19px;
   font-weight: 800;
   line-height: 1.15;

src/app/subscription/components/subscription-vip-offer-section.tsx

@@ -8,6 +8,9 @@ export interface VipOfferPlanView {
   price: string;
   currency: string;
   originalPrice: string;
+  isFirstRechargeOffer?: boolean;
+  firstRechargeDiscountPercent?: number | null;
+  promotionType?: string | null;
 }
 
 export interface SubscriptionVipOfferSectionProps {
@@ -48,12 +51,19 @@ export function SubscriptionVipOfferSection({
               aria-label={`${plan.title}, ${plan.price} ${plan.currency}`}
               onClick={() => onSelectPlan(plan.id)}
             >
+              {plan.isFirstRechargeOffer ? (
+                <span className={styles.offerBadge}>
+                  First recharge {plan.firstRechargeDiscountPercent ?? 50}% OFF
+                </span>
+              ) : null}
               <span className={styles.planTitle}>{plan.title}</span>
               <span className={styles.priceLine}>
                 <span className={styles.price}>{plan.price}</span>
                 <span className={styles.currency}>{plan.currency}</span>
               </span>
-              <span className={styles.originalPrice}>{plan.originalPrice}</span>
+              <span className={styles.originalPrice}>
+                {plan.originalPrice || "\u00a0"}
+              </span>
             </button>
           );
         })}