ET-4076 Upsell screen tweaks

Modules/InboxIAP/Sources/L10n.swift

@@ -21,7 +21,9 @@ import Foundation
 enum L10n {
     static let autoRenewalNotice = LocalizedStringResource("Auto-renews at the same price and terms unless canceled", bundle: .module, comment: "Notice at the bottom")
     static let bestValue = LocalizedStringResource("Best value", bundle: .module, comment: "Badge next to the plan name in the upsell screen")
-    static let chooseYourPlan = LocalizedStringResource("Choose your plan", bundle: .module, comment: "Displayed above the plans")
+    static let chooseYourPlan = LocalizedStringResource("Choose your plan", bundle: .module, comment: "Displayed above the plans in the upsell modal")
+    static let chooseSubscription = LocalizedStringResource("Choose subscription", bundle: .module, comment: "Displayed above the plans in the upsell modal")
+    static let continueWithFreePlan = LocalizedStringResource("Continue with Free Plan", bundle: .module, comment: "The option to exit the upsell modal")
     static let perMonth = LocalizedStringResource("/month", bundle: .module, comment: "Displayed next to the monthly price")
     static let showLess = LocalizedStringResource("Show less", bundle: .module, comment: "Button to collapse a list")
     static let showMore = LocalizedStringResource("Show more", bundle: .module, comment: "Button to expand a list")

Modules/InboxIAP/Sources/Resources/Localizable.xcstrings

@@ -1974,8 +1974,11 @@
         }
       }
     },
+    "Choose subscription" : {
+      "comment" : "Displayed above the plans in the upsell modal"
+    },
     "Choose your plan" : {
-      "comment" : "Displayed above the plans",
+      "comment" : "Displayed above the plans in the upsell modal",
       "localizations" : {
         "be" : {
           "stringUnit" : {
@@ -2147,6 +2150,9 @@
         }
       }
     },
+    "Continue with Free Plan" : {
+      "comment" : "The option to exit the upsell modal"
+    },
     "Create all you need to stay organized. Get this and more with %@." : {
       "comment" : "Subtitle of the upsell page",
       "localizations" : {

Modules/InboxIAP/Sources/UpsellScreen/Onboarding/PlanTiles/PlanTile.swift

@@ -154,7 +154,7 @@ struct PlanTile: View {
 
     private var getPlanButton: some View {
         ZStack {
-            Button(L10n.getPlan(named: model.planName).string) {
+            Button(model.getPlanButtonTitle.string) {
                 Task {
                     await model.performWhileDisabled {
                         await onGetPlanTapped(model.storeKitProductID)

Modules/InboxIAP/Sources/UpsellScreen/Onboarding/PlanTiles/PlanTileModel.swift

@@ -58,8 +58,12 @@ final class PlanTileModel: Identifiable {
         planTileData.entitlements.count > visibleEntitlementsWhenCollapsed
     }
 
+    var getPlanButtonTitle: LocalizedStringResource {
+        isFree ? L10n.continueWithFreePlan : L10n.getPlan(named: planTileData.planName)
+    }
+
     var getPlanButtonFlavor: BigButtonStyle.Flavor {
-        planTileData.storeKitProductID == nil ? .weak : .regular
+        isFree ? .weak : .regular
     }
 
     var billingNotice: LocalizedStringResource? {
@@ -85,6 +89,10 @@ final class PlanTileModel: Identifiable {
         return formatter
     }()
 
+    private var isFree: Bool {
+        planTileData.storeKitProductID == nil
+    }
+
     init(planTileData: PlanTileData) {
         self.planTileData = planTileData
     }

Modules/InboxIAP/Sources/UpsellScreen/Regular/SubscriptionPeriodRadioGroup/SubscriptionPeriodRadioButton.swift

@@ -87,9 +87,10 @@ struct SubscriptionPeriodRadioButton: View {
         Text((-value).formatted(.percent))
             .font(.caption)
             .fontWeight(.bold)
+            .foregroundStyle(Color.white)
             .padding(.horizontal, DS.Spacing.standard)
             .padding(.vertical, DS.Spacing.small)
-            .background(Color.white.opacity(0.2))
+            .background(Color.white.opacity(0.1))
             .clipShape(RoundedRectangle(cornerRadius: DS.Radius.medium))
     }
 
@@ -100,7 +101,7 @@ struct SubscriptionPeriodRadioButton: View {
             .foregroundColor(.white)
             + Text(" \(L10n.perMonth)")
             .font(.caption)
-            .foregroundColor(DS.Color.Text.norm)
+            .foregroundColor(Color.white.opacity(0.7))
     }
 
     private var selectionIndicator: some View {
@@ -131,5 +132,4 @@ struct SubscriptionPeriodRadioButton: View {
 
     SubscriptionPeriodRadioGroup(planInstances: DisplayablePlanInstance.previews, selectedInstanceID: $selectedInstanceID)
         .background(DS.Color.Brand.norm)
-        .preferredColorScheme(.dark)
 }

Modules/InboxIAP/Sources/UpsellScreen/Regular/UpsellScreen.swift

@@ -35,6 +35,7 @@ public struct UpsellScreen: View {
     public var body: some View {
         sizeClassDependentBody
             .background(LinearGradient.screenBackground)
+            .foregroundStyle(Color.white)
             .mask {
                 VStack(spacing: .zero) {
                     LinearGradient.fading
@@ -49,6 +50,7 @@ public struct UpsellScreen: View {
             .ignoresSafeArea(edges: [.bottom])
             .interactiveDismissDisabled()
             .preferredColorScheme(.dark)
+            .colorScheme(.light)
     }
 
     @ViewBuilder
@@ -126,7 +128,6 @@ public struct UpsellScreen: View {
         }
         .coordinateSpace(name: coordinateSpaceName)
         .padding(.horizontal, DS.Spacing.extraLarge)
-        .foregroundStyle(Color.white)
     }
 
     private var logo: some View {
@@ -176,7 +177,7 @@ public struct UpsellScreen: View {
     }
 
     private var chooseYourPlanPrompt: some View {
-        Text(L10n.chooseYourPlan)
+        Text(L10n.chooseSubscription)
             .font(.footnote)
             .fontWeight(.semibold)
             .fixedSize(horizontal: false, vertical: true)
@@ -202,12 +203,12 @@ public struct UpsellScreen: View {
             }
         }
         .buttonStyle(BigButtonStyle(flavor: .inverted))
-        .colorScheme(.light)
     }
 
     private var autoRenewalNotice: some View {
         Text(L10n.autoRenewalNotice)
             .font(.caption)
+            .foregroundStyle(Color.white.opacity(0.9))
     }
 }