Get iOS VPN widget ready to ship (#2830)

Co-authored-by: Sam Symons <[email protected]>

Author: graeme

Core/PixelEvent.swift

@@ -385,6 +385,11 @@ extension Pixel {
         case networkProtectionFailureRecoveryCompletedHealthy
         case networkProtectionFailureRecoveryCompletedUnhealthy
 
+        case networkProtectionWidgetConnectAttempt
+        case networkProtectionWidgetConnectSuccess
+        case networkProtectionWidgetDisconnectAttempt
+        case networkProtectionWidgetDisconnectSuccess
+
         // MARK: remote messaging pixels
 
         case remoteMessageShown
@@ -1370,7 +1375,12 @@ extension Pixel.Event {
         case .networkProtectionFailureRecoveryFailed: return "m_netp_ev_failure_recovery_failed"
         case .networkProtectionFailureRecoveryCompletedHealthy: return "m_netp_ev_failure_recovery_completed_server_healthy"
         case .networkProtectionFailureRecoveryCompletedUnhealthy: return "m_netp_ev_failure_recovery_completed_server_unhealthy"
-            
+
+        case .networkProtectionWidgetConnectAttempt: return "m_netp_widget_connect_attempt"
+        case .networkProtectionWidgetConnectSuccess: return "m_netp_widget_connect_success"
+        case .networkProtectionWidgetDisconnectAttempt: return "m_netp_widget_disconnect_attempt"
+        case .networkProtectionWidgetDisconnectSuccess: return "m_netp_widget_disconnect_success"
+
             // MARK: Secure Vault
         case .secureVaultL1KeyMigration: return "m_secure-vault_keystore_event_l1-key-migration"
         case .secureVaultL2KeyMigration: return "m_secure-vault_keystore_event_l2-key-migration"

Core/UserDefaults+NetworkProtection.swift

@@ -33,7 +33,7 @@ public extension UserDefaults {
 
 public enum NetworkProtectionUserDefaultKeys {
 
-    public static let lastSelectedServer = "com.duckduckgo.network-protection.last-selected-server"
+    public static let lastSelectedServerCity = "com.duckduckgo.network-protection.last-selected-server-city"
 
 }
 

DuckDuckGo/AppDelegate.swift

@@ -870,10 +870,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
 #if NETWORK_PROTECTION
             if shortcutItem.type == ShortcutKey.openVPNSettings {
-                let visibility = DefaultNetworkProtectionVisibility()
-                if visibility.shouldShowVPNShortcut() {
-                    presentNetworkProtectionStatusSettingsModal()
-                }
+                presentNetworkProtectionStatusSettingsModal()
             }
 #endif
 
@@ -982,13 +979,7 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
 
 #if NETWORK_PROTECTION
             if NetworkProtectionNotificationIdentifier(rawValue: identifier) != nil {
-                Task {
-                    let accountManager = AccountManager()
-                    if case .success(let hasEntitlements) = await accountManager.hasEntitlement(for: .networkProtection),
-                        hasEntitlements {
-                        presentNetworkProtectionStatusSettingsModal()
-                    }
-                }
+                presentNetworkProtectionStatusSettingsModal()
             }
 
             if vpnFeatureVisibility.shouldKeepVPNAccessViaWaitlist(), identifier == VPNWaitlist.notificationIdentifier {
@@ -1009,9 +1000,17 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
     }
 
     func presentNetworkProtectionStatusSettingsModal() {
-        if #available(iOS 15, *) {
-            let networkProtectionRoot = NetworkProtectionRootViewController()
-            presentSettings(with: networkProtectionRoot)
+        Task {
+            let accountManager = AccountManager()
+            if case .success(let hasEntitlements) = await accountManager.hasEntitlement(for: .networkProtection),
+               hasEntitlements {
+                if #available(iOS 15, *) {
+                    let networkProtectionRoot = NetworkProtectionRootViewController()
+                    presentSettings(with: networkProtectionRoot)
+                }
+            } else {
+                (window?.rootViewController as? MainViewController)?.segueToPrivacyPro()
+            }
         }
     }
 #endif
@@ -1039,7 +1038,7 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
             rootViewController.segueToSettings()
             let navigationController = rootViewController.presentedViewController as? UINavigationController
             navigationController?.popToRootViewController(animated: false)
-            navigationController?.pushViewController(viewController, animated: true)
+            navigationController?.pushViewController(viewController, animated: false)
         }
     }
 }

DuckDuckGo/HomeMessage.xcassets/WidgetEducation/WidgetEducationHomeScreen.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "iphone.png",
+      "filename" : "instructions@2x.png",
       "idiom" : "universal"
     }
   ],

DuckDuckGo/HomeMessage.xcassets/WidgetEducation/WidgetEducationHomeScreen.imageset/[email protected]

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "vpn-darkmode_2x.png",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

DuckDuckGo/HomeMessage.xcassets/WidgetEducation/WidgetEducationVPNWidgetExample.imageset/Contents.json

@@ -256,14 +256,21 @@ extension MainViewController {
 
         Pixel.fire(pixel: .settingsPresented,
                    withAdditionalParameters: PixelExperiment.parameters)
-        let settingsController = SettingsHostingController(viewModel: settingsViewModel, viewProvider: legacyViewProvider)
-        
-        // We are still presenting legacy views, so use a Navcontroller
-        let navController = UINavigationController(rootViewController: settingsController)
-        settingsController.modalPresentationStyle = UIModalPresentationStyle.automatic
-        
-        present(navController, animated: true) {
-            completion?(settingsViewModel)
+
+        if let navigationController = self.presentedViewController as? UINavigationController,
+           let settingsHostingController = navigationController.viewControllers.first as? SettingsHostingController {
+            navigationController.popToRootViewController(animated: false)
+            completion?(settingsHostingController.viewModel)
+        } else {
+            let settingsController = SettingsHostingController(viewModel: settingsViewModel, viewProvider: legacyViewProvider)
+
+            // We are still presenting legacy views, so use a Navcontroller
+            let navController = UINavigationController(rootViewController: settingsController)
+            settingsController.modalPresentationStyle = UIModalPresentationStyle.automatic
+
+            present(navController, animated: true) {
+                completion?(settingsViewModel)
+            }
         }
     }
 

DuckDuckGo/HomeMessage.xcassets/WidgetEducation/WidgetEducationVPNWidgetExample.imageset/vpn-darkmode_2x.png

@@ -29,6 +29,15 @@ struct NetworkProtectionVPNSettingsView: View {
     var body: some View {
         VStack {
             List {
+                // Widget only available for iOS 17 and up
+                if #available(iOS 17.0, *) {
+                    NavigationLink {
+                        WidgetEducationView.vpn
+                    } label: {
+                        Text(UserText.vpnSettingsAddWidget).daxBodyRegular()
+                    }
+                }
+
                 switch viewModel.viewKind {
                 case .loading: EmptyView()
                 case .unauthorized: notificationsUnauthorizedView
@@ -127,4 +136,18 @@ struct NetworkProtectionVPNSettingsView: View {
 
 }
 
+private extension WidgetEducationView {
+    static var vpn: Self {
+        WidgetEducationView(
+            navBarTitle: UserText.vpnSettingsAddWidget,
+            thirdParagraphText: UserText.addVPNWidgetSettingsThirdParagraph,
+            widgetExampleImageConfig: .init(
+                image: Image("WidgetEducationVPNWidgetExample"),
+                maxWidth: 164,
+                horizontalOffset: -7
+            )
+        )
+    }
+}
+
 #endif

DuckDuckGo/HomeMessage.xcassets/WidgetEducation/WidgetEducationVPNWidgetExample.imageset/[email protected]

@@ -82,7 +82,7 @@ struct SettingsRootView: View {
                 })
 
         .onReceive(viewModel.$deepLinkTarget.removeDuplicates(), perform: { link in
-            guard let link, link != self.deepLinkTarget else {
+            guard let link else {
                 return
             }
 

DuckDuckGo/MainViewController+Segues.swift

@@ -338,7 +338,7 @@ public struct UserText {
     public static let addWidget = NSLocalizedString("addWidget.button", value: "Add Widget", comment: "")
     public static let addWidgetTitle = NSLocalizedString("addWidget.title", value: "One tap to your favorite sites.", comment: "")
     public static let addWidgetDescription = NSLocalizedString("addWidget.description", value: "Get quick access to private search and the sites you love.", comment: "")
-    public static let addWidgetSettingsFirstParagraph = NSLocalizedString("addWidget.settings.firstParagraph", value: "Long-press on the home screen to enter jiggle mode.", comment: "")
+    public static let addWidgetSettingsFirstParagraph = NSLocalizedString("addWidget.settings.firstParagraph", value: "Long-press on the Home Screen to enter jiggle mode.", comment: "")
     public static let addWidgetSettingsSecondParagraph = NSLocalizedString("addWidget.settings.secondParagraph.%@", value: "Tap the plus %@ button.", comment: "Replacement string is a plus button icon.")
     public static let addWidgetSettingsThirdParagraph = NSLocalizedString("addWidget.settings.title", value: "Find and select DuckDuckGo. Then choose a widget.", comment: "")
 
@@ -572,6 +572,11 @@ public struct UserText {
     static let vpnAccessRevokedAlertActionSubscribe = NSLocalizedString("vpn.access-revoked.alert.action.subscribe", value: "Subscribe", comment: "Primary action for the alert when the subscription expires")
     static let vpnAccessRevokedAlertActionCancel = NSLocalizedString("vpn.access-revoked.alert.action.cancel", value: "Dismiss", comment: "Cancel action for the alert when the subscription expires")
 
+    // MARK: VPN Widget
+
+    public static let vpnSettingsAddWidget = NSLocalizedString("vpn.settings.add.widget", value: "Add VPN Widget to Home Screen", comment: "VPN settings screen cell text for adding the VPN widget to the home screen")
+    public static let addVPNWidgetSettingsThirdParagraph = NSLocalizedString("vpn.addWidget.settings.title", value: "Find and select DuckDuckGo. Then swipe to VPN and select Add Widget.", comment: "Title for the VPN widget onboarding screen")
+
     // MARK: Notifications
 
     public static let macWaitlistAvailableNotificationTitle = NSLocalizedString("mac-waitlist.available.notification.title", value: "DuckDuckGo for Mac is ready!", comment: "Title for the macOS waitlist notification")

DuckDuckGo/NetworkProtectionVPNSettingsView.swift

@@ -17,22 +17,24 @@
 //  limitations under the License.
 //
 
-#if ALPHA
-
 import AppIntents
 import NetworkExtension
 import WidgetKit
+import Core
 
 @available(iOS 17.0, *)
 struct DisableVPNIntent: AppIntent {
 
     static let title: LocalizedStringResource = "Disable VPN"
     static let description: LocalizedStringResource = "Disables the DuckDuckGo VPN"
     static let openAppWhenRun: Bool = false
+    static let isDiscoverable: Bool = false
 
     @MainActor
     func perform() async throws -> some IntentResult {
         do {
+            DailyPixel.fire(pixel: .networkProtectionWidgetDisconnectAttempt)
+
             let managers = try await NETunnelProviderManager.loadAllFromPreferences()
             guard let manager = managers.first else {
                 return .result()
@@ -49,6 +51,7 @@ struct DisableVPNIntent: AppIntent {
                 try? await Task.sleep(interval: .seconds(0.5))
 
                 if manager.connection.status == .disconnected {
+                    DailyPixel.fire(pixel: .networkProtectionWidgetDisconnectSuccess)
                     return .result()
                 }
 
@@ -69,10 +72,13 @@ struct EnableVPNIntent: AppIntent {
     static let title: LocalizedStringResource = "Enable VPN"
     static let description: LocalizedStringResource = "Enables the DuckDuckGo VPN"
     static let openAppWhenRun: Bool = false
+    static let isDiscoverable: Bool = false
 
     @MainActor
     func perform() async throws -> some IntentResult {
         do {
+            DailyPixel.fire(pixel: .networkProtectionWidgetConnectAttempt)
+
             let managers = try await NETunnelProviderManager.loadAllFromPreferences()
             guard let manager = managers.first else {
                 return .result()
@@ -89,6 +95,7 @@ struct EnableVPNIntent: AppIntent {
                 try? await Task.sleep(interval: .seconds(0.5))
 
                 if manager.connection.status == .connected {
+                    DailyPixel.fire(pixel: .networkProtectionWidgetConnectSuccess)
                     return .result()
                 }
 
@@ -102,5 +109,3 @@ struct EnableVPNIntent: AppIntent {
     }
 
 }
-
-#endif

DuckDuckGo/SettingsRootView.swift

@@ -27,8 +27,33 @@ extension Font {
     }
 }
 
+struct WidgetEducationImageConfig {
+    let image: Image
+    let maxWidth: CGFloat
+    let horizontalOffset: CGFloat
+
+    init(image: Image, maxWidth: CGFloat, horizontalOffset: CGFloat = 0) {
+        self.image = image
+        self.maxWidth = maxWidth
+        self.horizontalOffset = horizontalOffset
+    }
+}
+
 struct WidgetEducationView: View {
-    
+    typealias ImageConfig = WidgetEducationImageConfig
+
+    let navBarTitle: String
+    let thirdParagraphText: String
+    let widgetExampleImageConfig: ImageConfig
+
+    init(navBarTitle: String = UserText.settingsAddWidget,
+         thirdParagraphText: String = UserText.addWidgetSettingsThirdParagraph,
+         widgetExampleImageConfig: ImageConfig = .init(image: .widgetExample, maxWidth: Const.Size.imageWidth)) {
+        self.navBarTitle = navBarTitle
+        self.thirdParagraphText = thirdParagraphText
+        self.widgetExampleImageConfig = widgetExampleImageConfig
+    }
+
     var body: some View {
         ZStack {
             Color.background
@@ -39,15 +64,15 @@ struct WidgetEducationView: View {
                                       text: Text(UserText.addWidgetSettingsFirstParagraph))
                     NumberedParagraph(number: 2,
                                       text: secondParagraphText,
-                                      image: Image.homeScreen)
+                                      imageConfig: ImageConfig(image: Image.homeScreen, maxWidth: Const.Size.imageWidth))
                     NumberedParagraph(number: 3,
-                                      text: Text(UserText.addWidgetSettingsThirdParagraph),
-                                      image: Image.widgetExample)
+                                      text: Text(thirdParagraphText),
+                                      imageConfig: widgetExampleImageConfig)
                 }
                 .padding(.horizontal)
                 .padding(.top, Const.Padding.top)
             }
-        }.navigationBarTitle(UserText.settingsAddWidget, displayMode: .inline)
+        }.navigationBarTitle(navBarTitle, displayMode: .inline)
             .onForwardNavigationAppear {
                 Pixel.fire(pixel: .settingsNextStepsAddWidget,
                            withAdditionalParameters: PixelExperiment.parameters)
@@ -63,8 +88,8 @@ struct WidgetEducationView: View {
 private struct NumberedParagraph: View {
     var number: Int
     var text: Text
-    var image: Image?
-    
+    var imageConfig: WidgetEducationImageConfig?
+
     var body: some View {
         HStack(alignment: .firstTextBaseline, spacing: Const.Spacing.numberAndText) {
             NumberedCircle(number: number)
@@ -73,10 +98,14 @@ private struct NumberedParagraph: View {
                     .font(Font(uiFont: Const.Font.text))
                     .lineSpacing(Const.Spacing.line)
                     .foregroundColor(Color.font)
-                image?
-                    .resizable()
-                    .scaledToFit()
-                    .frame(maxWidth: Const.Size.imageWidth)
+                if let imageConfig {
+                    imageConfig
+                        .image
+                        .resizable()
+                        .scaledToFit()
+                        .frame(maxWidth: imageConfig.maxWidth)
+                        .offset(x: imageConfig.horizontalOffset)
+                }
             }
         }
     }
@@ -101,7 +130,7 @@ private struct NumberedCircle: View {
 private extension Color {
     static let background = Color(designSystemColor: .background)
     static let font = Color("WidgetEducationFontColor")
-    static let circle = Color(UIColor.cornflowerBlue)
+    static let circle = Color(designSystemColor: .accent)
     static let numbers = Color.white
 }