[IP-225] Update onboarding

Client/Frontend/Browser/BrowserViewController.swift

@@ -2254,13 +2254,15 @@ extension BrowserViewController: IntroViewControllerDelegate {
             self.launchFxAFromDeeplinkURL(url)
             return true
         }
-        
+
         if force || profile.prefs.intForKey(PrefsKeys.IntroSeen) == nil {
-            /* Cliqz: Change to CliqzIntroViewController
+		#if PAID
+			let introViewController = LumenIntroViewController()
+		#else
+            /* Cliqz: Change to CliqzIntroViewController */
             let introViewController = IntroViewController()
-            */
-            let introViewController = CliqzIntroViewController()
-
+		#endif
+
             introViewController.delegate = self
             // On iPad we present it modally in a controller
             if topTabsVisible {
@@ -2276,7 +2278,6 @@ extension BrowserViewController: IntroViewControllerDelegate {
 
             return true
         }
-        #endif
         return false
     }
 

Cliqz/Intro/LumenIntroViewController.swift

@@ -35,25 +35,38 @@ class LumenIntroViewController: UIViewController {
         if isIphoneX { return 25 }
         return self.view.frame.width <= 320 ? 10 : 20
     }
-    
+
     var isIphoneX: Bool {
          return UIDevice.current.isiPhoneXDevice()
     }
 
     private let backgroundView = LoginGradientView()
 
-    lazy fileprivate var startBrowsingButton: UIButton = {
+    lazy fileprivate var nextButton: UIButton = {
         let button = UIButton()
-        button.backgroundColor = AuthenticationUX.blue
-        button.layer.cornerRadius = 15.0
-        button.setTitle(CliqzStrings.LumenOnboarding().getStartedButtonText, for: UIControlState())
+        button.backgroundColor = UIColor.lumenBrightBlue
+        button.layer.cornerRadius = 18.0
+        button.setTitle(CliqzStrings.LumenOnboarding().getNextButtonText, for: UIControlState())
         button.setTitleColor(.white, for: UIControlState())
-        button.addTarget(self, action: #selector(startBrowsing), for: UIControlEvents.touchUpInside)
+		button.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .regular)
+        button.addTarget(self, action: #selector(moveNext), for: UIControlEvents.touchUpInside)
         button.accessibilityIdentifier = "IntroViewController.startBrowsingButton"
         button.isHidden = true
         return button
     }()
-
+
+	lazy fileprivate var skipIntroButton: UIButton = {
+		let button = UIButton()
+		button.backgroundColor = UIColor.clear
+		button.setTitle(CliqzStrings.LumenOnboarding().getSkipIntroButtonText, for: UIControlState())
+		button.setTitleColor(UIColor.lumenBrightBlue, for: UIControlState())
+		button.titleLabel?.font = UIFont.systemFont(ofSize: 16)
+		button.addTarget(self, action: #selector(startBrowsing), for: UIControlEvents.touchUpInside)
+		button.accessibilityIdentifier = "IntroViewController.skipIntroButton"
+		button.isHidden = true
+		return button
+	}()
+
     lazy var pageControl: UIPageControl = {
         let pc = UIPageControl()
         pc.pageIndicatorTintColor = UIColor.cliqzBlueOneSecondary.withAlphaComponent(0.3)
@@ -76,20 +89,20 @@ class LumenIntroViewController: UIViewController {
         return sc
     }()
 
-    lazy var optInView: OptInView = {
-        let optInView = OptInView()
-        optInView.setCustomIcons(normalIcon: "blank-lumen-toggle", selectedIcon: "selected-lumen-toggle")
-        optInView.clipsToBounds = false
-        optInView.textLabel.numberOfLines = 0
-        optInView.textLabel.adjustsFontSizeToFitWidth = true
-        optInView.textLabel.minimumScaleFactor = 0.2
-        optInView.textLabel.textAlignment = .left
-        optInView.textLabel.textColor = UIColor.white
-        optInView.textLabel.text = CliqzStrings.LumenOnboarding().telemetryText
-        optInView.toggle.isSelected = true
-        return optInView
-    }()
-    
+//    lazy var optInView: OptInView = {
+//        let optInView = OptInView()
+//        optInView.setCustomIcons(normalIcon: "blank-lumen-toggle", selectedIcon: "selected-lumen-toggle")
+//        optInView.clipsToBounds = false
+//        optInView.textLabel.numberOfLines = 0
+//        optInView.textLabel.adjustsFontSizeToFitWidth = true
+//        optInView.textLabel.minimumScaleFactor = 0.2
+//        optInView.textLabel.textAlignment = .left
+//        optInView.textLabel.textColor = UIColor.white
+//        optInView.textLabel.text = CliqzStrings.LumenOnboarding().telemetryText
+//        optInView.toggle.isSelected = true
+//        return optInView
+//    }()
+	
     lazy fileprivate var imageViewContainer: UIStackView = {
         let sv = UIStackView()
         sv.axis = .horizontal
@@ -106,35 +119,42 @@ class LumenIntroViewController: UIViewController {
         view.addSubview(backgroundView)
         view.addSubview(scrollView)
         view.addSubview(pageControl)
-        view.addSubview(startBrowsingButton)
-        view.addSubview(optInView)
+        view.addSubview(nextButton)
+		view.addSubview(skipIntroButton)
+
+//        view.addSubview(optInView)
         scrollView.addSubview(imageViewContainer)
 
-        optInView.delegate = self
-        optInView.snp.makeConstraints { make in
-            make.trailing.leading.equalToSuperview()
-            make.height.equalTo(44)
-            make.bottom.equalToSuperview().inset(bottomOffset)
-        }
-        
+//        optInView.delegate = self
+//        optInView.snp.makeConstraints { make in
+//            make.trailing.leading.equalToSuperview()
+//            make.height.equalTo(44)
+//            make.bottom.equalToSuperview().inset(bottomOffset)
+//        }
+		
         // Setup constraints
         imageViewContainer.snp.makeConstraints { make in
             make.top.equalTo(self.view).offset(topOffset)
             make.height.equalTo(LumenIntroUX.imageHeight)
         }
-        startBrowsingButton.snp.makeConstraints { make in
+        nextButton.snp.makeConstraints { make in
             make.leading.trailing.equalToSuperview().inset(30)
-            make.bottom.equalTo(optInView.snp.top).offset(-verticalPadding)
-            make.height.equalTo(30)
+            make.bottom.equalToSuperview().inset(bottomOffset)
+            make.height.equalTo(33)
         }
+		skipIntroButton.snp.makeConstraints { make in
+			make.leading.trailing.equalToSuperview().inset(30)
+			make.bottom.equalTo(nextButton.snp.top).offset(-10)
+			make.height.equalTo(30)
+		}
         scrollView.snp.makeConstraints { make in
             make.left.right.top.equalTo(self.view)
-            make.bottom.equalTo(startBrowsingButton.snp.top)
+            make.bottom.equalTo(skipIntroButton.snp.top)
         }
 
         pageControl.snp.makeConstraints { make in
             make.centerX.equalTo(self.scrollView)
-            make.bottom.equalTo(self.startBrowsingButton.snp.top).offset(-10)
+            make.bottom.equalTo(self.skipIntroButton.snp.top).offset(-10)
         }
 
         createSlides()
@@ -178,7 +198,8 @@ class LumenIntroViewController: UIViewController {
         }
         imageViewContainer.layoutSubviews()
         scrollView.contentSize = imageContainerSize()
-        startBrowsingButton.isHidden = false
+        nextButton.isHidden = false
+		skipIntroButton.isHidden = false
     }
 
     func addIntro(card: LumenIntroCard) -> LumenCardView? {
@@ -198,7 +219,7 @@ class LumenIntroViewController: UIViewController {
         self.view.addSubview(cardView)
         cardView.snp.makeConstraints { make in
             make.top.equalTo(self.imageViewContainer.snp.bottom).offset(-10)
-            make.bottom.equalTo(self.startBrowsingButton.snp.top)
+            make.bottom.equalTo(self.nextButton.snp.top)
             make.left.right.equalTo(self.view).inset(10)
         }
         return cardView
@@ -208,21 +229,28 @@ class LumenIntroViewController: UIViewController {
         // Start the necessary stuff for antitracking
         delegate?.introViewControllerDidFinish(self, requestToLogin: false)
     }
-
+
+	@objc func moveNext() {
+		self.pageControl.currentPage = self.pageControl.currentPage + 1
+		self.pageControl.updateCurrentPageDisplay()
+		self.changePage()
+	}
+
     func login() {
         delegate?.introViewControllerDidFinish(self, requestToLogin: true)
     }
 
     @objc func changePage() {
         let swipeCoordinate = CGFloat(pageControl.currentPage) * scrollView.frame.size.width
         scrollView.setContentOffset(CGPoint(x: swipeCoordinate, y: 0), animated: true)
+		updateButtonsStates()
     }
 
     fileprivate func setActive(_ introView: UIView, forPage page: Int) {
         guard introView.alpha != 1 else {
             return
         }
-        
+
         UIView.animate(withDuration: IntroUX.FadeDuration, animations: {
             self.cardViews.forEach { $0.alpha = 0.0 }
             introView.alpha = 1.0
@@ -231,7 +259,16 @@ class LumenIntroViewController: UIViewController {
             self.pageControl.currentPage = page
         }, completion: nil)
     }
-
+
+	fileprivate func updateButtonsStates() {
+		if (self.pageControl.currentPage == self.cards.count - 1) {
+			self.skipIntroButton.isHidden = true
+			self.nextButton.setTitle(CliqzStrings.LumenOnboarding().getLetsGoButtonText, for: .normal)
+		} else {
+			self.skipIntroButton.isHidden = false
+			self.nextButton.setTitle(CliqzStrings.LumenOnboarding().getNextButtonText, for: .normal)
+		}
+	}
     func imageContainerSize() -> CGSize {
         return CGSize(width: self.view.frame.width * CGFloat(cards.count), height: LumenIntroUX.imageHeight)
     }
@@ -286,11 +323,10 @@ extension LumenIntroViewController {
     }
 
     fileprivate func setupDynamicFonts() {
-
-        startBrowsingButton.titleLabel?.font = UIFont.systemFont(ofSize: 14.0, weight: .light)
+        nextButton.titleLabel?.font = UIFont.systemFont(ofSize: 16.0, weight: .regular)
         cardViews.forEach { cardView in
             cardView.titleLabel.font = UIFont.systemFont(ofSize: 20.0, weight: .regular)
-            cardView.textLabel.font = UIFont.systemFont(ofSize: 16.0, weight: .light)
+            cardView.textLabel.font = UIFont.systemFont(ofSize: 16.0, weight: .regular)
         }
     }
 }
@@ -316,7 +352,7 @@ extension LumenIntroViewController: UIScrollViewDelegate {
         if let cardView = cardViews[safe: page] {
             setActive(cardView, forPage: page)
         }
-        startBrowsingButton.isHidden = false
+		self.updateButtonsStates()
     }
 
     func scrollViewDidScroll(_ scrollView: UIScrollView) {
@@ -403,12 +439,13 @@ struct LumenIntroCard: Codable, Equatable {
 
 
         let onboardingStrings = CliqzStrings.LumenOnboarding()
-
-        let welcome = LumenIntroCard(title: onboardingStrings.introTitle, text: onboardingStrings.introText, imageName: "lumen-Logo")
-        let adblock = LumenIntroCard(title: onboardingStrings.adblockerTitle, text: onboardingStrings.adblockerText, imageName: "lumen-Adblock")
+		let langCode = Locale.current.languageCode ?? "en"
+		let dashboardImageName = "lumen-Dashboard_\(langCode)"
+        let welcome = LumenIntroCard(title: onboardingStrings.introTitle, text: onboardingStrings.introText, imageName: dashboardImageName)
+//        let adblock = LumenIntroCard(title: onboardingStrings.adblockerTitle, text: onboardingStrings.adblockerText, imageName: "lumen-Adblock")
         let vpn = LumenIntroCard(title: onboardingStrings.vpnTitle, text: onboardingStrings.vpnText, imageName: "lumen-VPN")
-        let dashboard = LumenIntroCard(title: onboardingStrings.dashboardTitle, text: onboardingStrings.dashboardText, imageName: "lumen-Dashboard")
-        return [welcome, adblock, vpn, dashboard]
+//        let dashboard = LumenIntroCard(title: onboardingStrings.dashboardTitle, text: onboardingStrings.dashboardText, imageName: "lumen-Dashboard")
+        return [welcome, vpn]
     }
 
 

Cliqz/Resources/CliqzStrings.swift

@@ -100,10 +100,10 @@ extension CliqzStrings {
     public struct LumenOnboarding {
 
         public var introTitle: String {
-            return NSLocalizedString("LUMEN", tableName: "Lumen", comment: "[Onboarding] Intro Title")
+            return NSLocalizedString("Ultimate Protection Online", tableName: "Lumen", comment: "[Onboarding] Intro Title")
         }
         public var introText: String {
-            return NSLocalizedString("See the Web in a whole new light!", tableName: "Lumen", comment: "[Onboarding] Intro text")
+            return NSLocalizedString("Blocks ads and trackers. Saves data volume and time.", tableName: "Lumen", comment: "[Onboarding] Intro text")
         }
 
 
@@ -115,11 +115,11 @@ extension CliqzStrings {
         }
 
         public var vpnTitle: String {
-            return NSLocalizedString("Be always carefree on the Web", tableName: "Lumen", comment: "[Onboarding] VPN title")
+            return NSLocalizedString("Safe and Sound on the Go", tableName: "Lumen", comment: "[Onboarding] VPN title")
         }
 
         public var vpnText: String {
-            return NSLocalizedString("Additional protection whenever and wherever you need it.", tableName: "Lumen", comment: "[Onboarding] VPN text")
+            return NSLocalizedString("Integrated VPN protects you on public Wi-Fi.", tableName: "Lumen", comment: "[Onboarding] VPN text")
         }
 
 
@@ -130,10 +130,18 @@ extension CliqzStrings {
             return NSLocalizedString("Lumen brings to light what happens in the shadows and protects you.", tableName: "Lumen", comment: "[Onboarding] Dashboard text")
         }
 
-        public var getStartedButtonText: String {
-            return NSLocalizedString("GET STARTED", tableName: "Lumen", comment: "[Onboarding] Get Started button text")
+        public var getNextButtonText: String {
+            return NSLocalizedString("NEXT", tableName: "Lumen", comment: "[Onboarding] Get Started button text")
         }
-
+
+		public var getLetsGoButtonText: String {
+			return NSLocalizedString("LET'S GO", tableName: "Lumen", comment: "[Onboarding] Get Started button text")
+		}
+
+		public var getSkipIntroButtonText: String {
+			return NSLocalizedString("SKIP", tableName: "Lumen", comment: "[Onboarding] Get Started button text")
+		}
+
         public var telemetryText: String {
             return NSLocalizedString("I agree to share strictly anonymous analytics data to improve Lumen's performance.", tableName: "Lumen", comment: "[Onboarding] Telemetry")
         }

Cliqz/Resources/Paid.xcassets/Intro/lumen-Dashboard_en.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "Dashboard.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "Dashboard@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "Dashboard@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}