feat(payment): support user-bound seven-discount offers

src/app/subscription/subscription-screen.tsx

@@ -45,6 +45,8 @@ export interface SubscriptionScreenProps {
   initialPayChannel?: PayChannel | null;
   analyticsContext?: PaymentAnalyticsContext;
   sourceCharacterSlug?: string;
+  initialPlanId?: string | null;
+  commercialOfferId?: string | null;
 }
 
 export function SubscriptionScreen({
@@ -54,6 +56,8 @@ export function SubscriptionScreen({
   initialPayChannel = null,
   analyticsContext: providedAnalyticsContext,
   sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
+  initialPlanId = null,
+  commercialOfferId = null,
 }: SubscriptionScreenProps) {
   const userState = useUserState();
   const hasHydrated = useHasHydrated();
@@ -77,6 +81,8 @@ export function SubscriptionScreen({
     returnTo,
     sourceCharacterSlug,
     initialPayChannel: paymentMethodConfig.initialPayChannel,
+    initialPlanId,
+    commercialOfferId,
   });
   const canSubscribeVip = subscriptionType === "vip";
   const analyticsContext =
@@ -214,6 +220,22 @@ export function SubscriptionScreen({
           </section>
         ) : null}
 
+        {payment.commercialOffer && !firstRechargeOffer ? (
+          <section
+            className={styles.firstRechargeBanner}
+            aria-label="Elio private offer"
+          >
+            <span className={styles.firstRechargeBadge}>Private offer</span>
+            <div className={styles.firstRechargeCopy}>
+              <h2 className={styles.firstRechargeTitle}>Elio got this price for you</h2>
+              <p className={styles.firstRechargeSubtitle}>
+                {payment.commercialOffer.message ||
+                  `Your ${payment.commercialOffer.discountPercent}% discount is already applied below.`}
+              </p>
+            </div>
+          </section>
+        ) : null}
+
         <div className={styles.offerStack}>
           {canSubscribeVip ? (
             <SubscriptionVipOfferSection