feat(subscription): support voice package mode

src/app/subscription/components/subscription-banner.tsx

@@ -11,15 +11,19 @@ import styles from "./subscription-banner.module.css";
 
 export interface SubscriptionBannerProps {
   className?: string;
+  title?: string;
 }
 
-export function SubscriptionBanner({ className }: SubscriptionBannerProps) {
+export function SubscriptionBanner({
+  className,
+  title = "Subscribe to become the VIP Member",
+}: SubscriptionBannerProps) {
   return (
     <div
       className={[styles.banner, className].filter(Boolean).join(" ")}
       role="note"
     >
-      <p className={styles.text}>Subscribe to become the VIP Member</p>
+      <p className={styles.text}>{title}</p>
       <span className={styles.pointer} aria-hidden="true" />
     </div>
   );

src/app/subscription/components/subscription-checkout-button.tsx

@@ -64,7 +64,9 @@ export function SubscriptionCheckoutButton({
       ? "Processing payment..."
       : payment.isCreatingOrder
         ? "Creating order..."
-        : "Confirm the agreement and Activate";
+        : payment.agreed
+          ? "Pay and Activiate"
+          : "Confirm the agreement and Activate";
 
   const handleClick = () => {
     if (disabled || isLoading) return;

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

@@ -55,6 +55,10 @@
   margin-top: var(--spacing-lg);
 }
 
+.benefitsPlaceholder {
+  min-height: 160px;
+}
+
 .ctaSlot {
   margin-top: var(--spacing-xl);
 }