Fix brave/brave-ios#6164: Add link-receipt callout. (brave/brave-ios#…

…7101)

Sources/Brave/Frontend/Browser/BrowserViewController.swift

@@ -1193,6 +1193,7 @@ public class BrowserViewController: UIViewController {
       self.presentDefaultBrowserScreenCallout()
       self.presentBraveRewardsScreenCallout()
       self.presentCookieNotificationBlockingCalloutIfNeeded()
+      self.presentLinkReceiptCallout()
     }
 
     screenshotHelper.viewIsVisible = true

Sources/Brave/Frontend/Browser/BrowserViewController/BrowserViewController+Callout.swift

@@ -69,6 +69,27 @@ extension BrowserViewController {
     present(popup, animated: false)
   }
 
+  func presentLinkReceiptCallout() {
+    // Show this onboarding only if the VPN has been purchased
+    guard case .purchased = BraveVPN.vpnState else { return }
+
+    guard shouldShowCallout(calloutType: .linkReceipt) else {
+      return
+    }
+
+    if Preferences.Onboarding.basicOnboardingCompleted.value != OnboardingState.completed.rawValue {
+      return
+    }
+
+    var linkReceiptView = OnboardingLinkReceiptView()
+    linkReceiptView.linkReceiptAction = {
+      self.openURLInNewTab(BraveUX.braveVPNLinkReceiptProd, isPrivate: PrivateBrowsingManager.shared.isPrivateBrowsing, isPrivileged: false)
+    }
+    let popup = PopupViewController(rootView: linkReceiptView, isDismissable: true)
+    isOnboardingOrFullScreenCalloutPresented = true
+    present(popup, animated: false)
+  }
+
   func presentP3AScreenCallout() {
     // Check the blockCookieConsentNotices callout can be shown
     guard shouldShowCallout(calloutType: .p3a) else {

Sources/BraveShared/BraveStrings.swift

@@ -387,6 +387,27 @@ extension Strings {
         tableName: "BraveShared", bundle: .module,
         value: "See the Brave difference:\nNo ads. No trackers. Way faster page load.",
         comment: "Description for the Omnibox (URL Bar) pop-over that describes faster load times.")
+
+    public static let linkReceiptTitle =
+      NSLocalizedString(
+        "onboarding.linkReceiptTitle",
+        tableName: "BraveShared", bundle: .module,
+        value: "Extend your Brave Firewall + VPN protection",
+        comment: "Popup title to let users know they can use the vpn on all their devices")
+
+    public static let linkReceiptDescription =
+      NSLocalizedString(
+        "onboarding.linkReceiptDescription",
+        tableName: "BraveShared", bundle: .module,
+        value: "Your Brave VPN subscription can protect up to 5 devices, across Android, iOS, and desktop. Just link your App Store subscription to your Brave account.",
+        comment: "Popup description to let users know they can use the vpn on all their devices")
+
+    public static let linkReceiptButton =
+      NSLocalizedString(
+        "onboarding.linkReceiptButton",
+        tableName: "BraveShared", bundle: .module,
+        value: "Link your VPN subscription",
+        comment: "Button text to let users know they can use the vpn on all their devices")
   }
 }
 

Sources/Onboarding/Assets/Images.xcassets/VPN/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Onboarding/Assets/Images.xcassets/VPN/link_receipt_image.imageset/Contents.json

@@ -0,0 +1,54 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "link_receipt_image_2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "link_receipt_dark@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "link_receipt_image_3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "link_receipt_dark@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Onboarding/Callouts/OnboardingLinkReceiptView.swift

@@ -0,0 +1,73 @@
+// Copyright 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+import SwiftUI
+import Shared
+import BraveShared
+import DesignSystem
+import BraveUI
+
+public struct OnboardingLinkReceiptView: View {
+  @Environment(\.presentationMode) @Binding private var presentationMode
+
+  public var linkReceiptAction: (() -> Void)?
+
+  public init() {}
+
+  public var body: some View {
+    ScrollView {
+      VStack(spacing: 24) {
+        Image("link_receipt_image", bundle: .module)
+        Text(Strings.Onboarding.linkReceiptTitle)
+          .font(.title.weight(.medium))
+          .multilineTextAlignment(.center)
+        Text(Strings.Onboarding.linkReceiptDescription)
+          .font(.subheadline)
+          .multilineTextAlignment(.center)
+
+        Button(action: {
+          linkReceiptAction?()
+          presentationMode.dismiss()
+        }) {
+          Text(Strings.Onboarding.linkReceiptButton)
+        }
+        .buttonStyle(BraveFilledButtonStyle(size: .large))
+
+        HStack(spacing: 8) {
+          Text(Strings.VPN.poweredBy)
+            .font(.footnote)
+            .foregroundColor(Color(.bravePrimary))
+            .multilineTextAlignment(.center)
+          Image(sharedName: "vpn_brand")
+            .renderingMode(.template)
+            .foregroundColor(Color(.bravePrimary))
+        }
+      }
+      .padding(32)
+    }
+    .background(Color(.braveBackground))
+    .frame(height: 650)
+    .overlay {
+      Button {
+        presentationMode.dismiss()
+      } label: {
+        Image(braveSystemName: "brave.xmark")
+          .renderingMode(.template)
+          .foregroundColor(Color(.bravePrimary))
+      }
+      .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
+      .padding([.top, .trailing], 20)
+    }
+  }
+}
+
+#if DEBUG
+struct OnboardingLinkReceiptView_Previews: PreviewProvider {
+  static var previews: some View {
+    OnboardingLinkReceiptView()
+      .previewLayout(.sizeThatFits)
+  }
+}
+#endif

Sources/Onboarding/OnboardingPreferences.swift

@@ -31,6 +31,9 @@ extension Preferences {
       key: "onboarding.basic-onboarding-default-browser-selected",
       default: false)
 
+    /// Whether the link vpn receipt alert has been shown.
+    public static let linkReceiptShown = Option<Bool>(key: "onboarding.link-receipt", default: false)
+
     /// Whether this is a new user who installed the application after onboarding retention updates
     public static let isNewRetentionUser = Option<Bool?>(key: "general.new-retention", default: nil)
   }

Sources/Onboarding/ProductNotifications/Resources/FullScreenCalloutManager.swift

@@ -11,7 +11,7 @@ import Growth
 public struct FullScreenCalloutManager {
 
   public enum FullScreenCalloutType {
-    case bottomBar, p3a, vpn, rewards, defaultBrowser, blockCookieConsentNotices
+    case bottomBar, p3a, vpn, rewards, defaultBrowser, blockCookieConsentNotices, linkReceipt
 
     /// The number of days passed to show certain type of callout
     var period: Int {
@@ -22,6 +22,7 @@ public struct FullScreenCalloutManager {
       case .rewards: return 8
       case .defaultBrowser: return 10
       case .blockCookieConsentNotices: return 0
+      case .linkReceipt: return 0
       }
     }
 
@@ -40,6 +41,8 @@ public struct FullScreenCalloutManager {
         return Preferences.DefaultBrowserIntro.completed
       case .blockCookieConsentNotices:
         return Preferences.FullScreenCallout.blockCookieConsentNoticesCalloutCompleted
+      case .linkReceipt:
+        return Preferences.Onboarding.linkReceiptShown
       }
     }
   }