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

src/app/subscription/__tests__/subscription-screen.helpers.test.ts

@@ -6,6 +6,7 @@ import {
   findSelectedSubscriptionPlan,
   getDefaultPayChannelForCountryCode,
   getDefaultSubscriptionPlanId,
+  getFirstRechargeOfferView,
   toCoinsOfferPlanViews,
   toVipOfferPlanViews,
 } from "../subscription-screen.helpers";
@@ -103,6 +104,56 @@ describe("subscription screen helpers", () => {
     ]);
   });
 
+  it("maps first recharge offer fields to plan views", () => {
+    const vipViews = toVipOfferPlanViews([
+      makePlan({
+        planId: "vip_monthly",
+        amountCents: 995,
+        originalAmountCents: 1990,
+        isFirstRechargeOffer: true,
+        firstRechargeDiscountPercent: 50,
+        promotionType: "first_recharge_half_price",
+      }),
+    ]);
+    const coinViews = toCoinsOfferPlanViews([
+      makePlan({
+        planId: "coin_1000",
+        orderType: "coins_1000",
+        vipDays: null,
+        dolAmount: 1000,
+        amountCents: 495,
+        originalAmountCents: 990,
+        isFirstRechargeOffer: true,
+        firstRechargeDiscountPercent: 50,
+        promotionType: "first_recharge_half_price",
+      }),
+    ]);
+
+    expect(vipViews[0]).toMatchObject({
+      price: "9.95",
+      originalPrice: "19.9",
+      isFirstRechargeOffer: true,
+      firstRechargeDiscountPercent: 50,
+    });
+    expect(coinViews[0]).toMatchObject({
+      price: "4.95",
+      originalPrice: "9.9",
+      isFirstRechargeOffer: true,
+      firstRechargeDiscountPercent: 50,
+    });
+    expect(
+      getFirstRechargeOfferView({
+        isFirstRecharge: true,
+        discountPercent: 50,
+        vipPlans: vipViews,
+        coinPlans: coinViews,
+      }),
+    ).toMatchObject({
+      badgeText: "50% OFF",
+      title: "New User First Recharge",
+    });
+  });
+
   it("selects the first VIP plan by default when VIP can be purchased", () => {
     expect(
       getDefaultSubscriptionPlanId({