- PIAX Select a VPN Plan redesign

PIALibrary/Resources/UI/iOS/UI.xcassets/PIAX/Global/plan-selected.imageset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "group3.pdf"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

PIALibrary/Resources/UI/iOS/UI.xcassets/PIAX/Global/plan-unselected.imageset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "oval3.pdf"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

PIALibrary/Resources/UI/iOS/en.lproj/Welcome.strings

@@ -23,7 +23,7 @@
 "purchase.title" = "Select a VPN plan";
 "purchase.subtitle" = "7-day money back guarantee";
 "purchase.email.placeholder" = "Email address";
-"purchase.submit" = "BUY NOW";
+"purchase.submit" = "Continue";
 "purchase.login.footer" = "Already have an account?";
 "purchase.login.button" = "Sign in";
 "purchase.error.title" = "Purchase";

PIALibrary/Sources/UI/iOS/PurchasePlanCell.swift

@@ -12,30 +12,28 @@ class PurchasePlanCell: UICollectionViewCell, Restylable {
     
     // XXX
     private static let textPlaceholder = "                    "
-
     private static let pricePlaceholder = "             "
+    private static let bestValueContainerHeight: CGFloat = 20.0
+    private static let priceBottomConstant: CGFloat = 26.0
 
     @IBOutlet private weak var viewContainer: UIView!
-
-    @IBOutlet private weak var viewHeader: UIView!
-
     @IBOutlet private weak var viewBestValue: UIView!
-    
     @IBOutlet private weak var labelBestValue: UILabel!
-    
     @IBOutlet private weak var labelPlan: UILabel!
-
-    @IBOutlet private weak var viewSpacer: UIView!
-
     @IBOutlet private weak var labelPrice: UILabel!
-
     @IBOutlet private weak var labelDetail: UILabel!
+
+    @IBOutlet private weak var unselectedPlanImageView: UIImageView!
+    @IBOutlet private weak var selectedPlanImageView: UIImageView!
+
+    @IBOutlet private weak var bestValueHeightConstraint: NSLayoutConstraint!
+    @IBOutlet weak var priceBottomConstraint: NSLayoutConstraint!
     
     override func awakeFromNib() {
         super.awakeFromNib()
-        
         isSelected = false
-        labelBestValue.text = L10n.Welcome.Plan.bestValue
+        labelBestValue.text = L10n.Welcome.Plan.bestValue.uppercased()
+        selectedPlanImageView.alpha = 0
     }
     
     func fill(plan: PurchasePlan) {
@@ -60,6 +58,15 @@ class PurchasePlanCell: UICollectionViewCell, Restylable {
             labelDetail.text = plan.detail
             labelPrice.text = L10n.Welcome.Plan.priceFormat(plan.monthlyPriceString)
             viewBestValue.isHidden = !plan.bestValue
+            if viewBestValue.isHidden {
+                bestValueHeightConstraint.constant = 0
+                priceBottomConstraint.constant = 0
+            } else {
+                bestValueHeightConstraint.constant = PurchasePlanCell.bestValueContainerHeight
+                priceBottomConstraint.constant = PurchasePlanCell.priceBottomConstant
+            }
+            
+            self.layoutSubviews()
 
             accessibilityLabel = "\(plan.title), \(plan.accessibleMonthlyPriceString) \(L10n.Welcome.Plan.Accessibility.perMonth)"
         }
@@ -72,13 +79,13 @@ class PurchasePlanCell: UICollectionViewCell, Restylable {
 //            Theme.current.applyTitle(labelPrice, appearance:(isSelected ? .emphasis : .dark))
 
             if isSelected {
-                Theme.current.applySolidSelection(viewHeader)
-                Theme.current.applyTitle(labelPlan, appearance: .light)
-                viewSpacer.isHidden = true
+                UIView.animate(withDuration: 0.2, animations: {
+                    self.selectedPlanImageView.alpha = 1
+                })
             } else {
-                viewHeader.backgroundColor = .clear
-                Theme.current.applyTitle(labelPlan, appearance: .dark)
-                viewSpacer.isHidden = false
+                UIView.animate(withDuration: 0.2, animations: {
+                    self.selectedPlanImageView.alpha = 0
+                })
             }
         }
     }
@@ -86,11 +93,11 @@ class PurchasePlanCell: UICollectionViewCell, Restylable {
     // MARK: Restylable
 
     func viewShouldRestyle() {
-        Theme.current.applyCorner(viewBestValue, factor: 0.5)
+        Theme.current.applyCorner(viewBestValue, factor: 1.0)
         Theme.current.applyWarningBackground(viewBestValue)
-        Theme.current.applyTag(labelBestValue, appearance: .light)
-        Theme.current.applyDivider(viewSpacer)
+        Theme.current.applyBlackLabelInBox(labelBestValue)
+        Theme.current.applySubtitle(labelPlan)
         Theme.current.applyTitle(labelPrice, appearance: .dark)
-        Theme.current.applySmallInfo(labelDetail, appearance: .dark)
+        Theme.current.applySubtitle(labelDetail)
     }
 }

PIALibrary/Sources/UI/iOS/SwiftGen+SeguesStoryboards.swift

@@ -20,6 +20,7 @@ internal enum StoryboardSegue {
     case unwindInternetUnreachableSegueIdentifier = "UnwindInternetUnreachableSegueIdentifier"
   }
   internal enum Welcome: String, SegueType {
+    case purchaseVPNPlanSegue = "PurchaseVPNPlanSegue"
     case redeemGiftCardSegue = "RedeemGiftCardSegue"
     case signupQRCameraScannerSegue = "SignupQRCameraScannerSegue"
     case signupViaPurchaseSegue = "SignupViaPurchaseSegue"

PIALibrary/Sources/UI/iOS/SwiftGen+Strings.swift

@@ -203,7 +203,7 @@ internal enum L10n {
       }
     }
     internal enum Purchase {
-      /// BUY NOW
+      /// Continue
       internal static let submit = L10n.tr("Welcome", "purchase.submit")
       /// 7-day money back guarantee
       internal static let subtitle = L10n.tr("Welcome", "purchase.subtitle")

PIALibrary/Sources/UI/iOS/Theme+LightPalette.swift

@@ -24,7 +24,7 @@ extension Theme.Palette {
         palette.lineColor = .piaGreenDark20
         palette.subtitleColor = .piaGrey8
         palette.emphasis = Macros.color(hex: 0x29cc41, alpha: 0xff)
-        palette.accent1 = Macros.color(hex: 0xf7941d, alpha: 0xff)
+        palette.accent1 = UIColor.piaOrange
         palette.accent2 = Macros.color(hex: 0xe60924, alpha: 0xff)
         palette.setDarkText(Macros.color(hex: 0x001b31, alpha: 0xff), alphas: [0.87, 0.67, 0.37])
         palette.setLightText(.white, alphas: [0.87, 0.67, 0.37])

PIALibrary/Sources/UI/iOS/Theme.swift

@@ -101,7 +101,7 @@ public class Theme {
             lineColor = .piaGreenDark20
 //            primary = .black
             emphasis = .green
-            accent1 = .orange
+            accent1 = .piaOrange
             accent2 = .red
 
             darkText = .black
@@ -472,6 +472,12 @@ public class Theme {
         label.textColor = palette.textColor(forRelevance: 1, appearance: appearance)
     }
     
+    /// :nodoc:
+    public func applyBlackLabelInBox(_ label: UILabel) {
+        label.font = typeface.regularFont(size: 12.0)
+        label.textColor = .black
+    }
+    
     /// :nodoc:
     public func applyList(_ label: UILabel, appearance: Appearance) {
         applyList(label, appearance: appearance, relevance: 2)

PIALibrary/Sources/UI/iOS/ViewControllers/GetStartedViewController.swift

@@ -49,14 +49,20 @@ public class GetStartedViewController: AutolayoutViewController, ConfigurationAc
     }
     
     public override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
+        
+        guard let vc = segue.destination as? PIAWelcomeViewController else {
+            return
+        }
+        
         switch segue.identifier  {
         case StoryboardSegue.Welcome.redeemGiftCardSegue.rawValue:
-            if let vc = segue.destination as? PIAWelcomeViewController {
                 vc.preset.pages = .redeem
-            }
+        case StoryboardSegue.Welcome.purchaseVPNPlanSegue.rawValue:
+                vc.preset.pages = .purchase
         default:
             break
         }
+        
     }
 
     /// :nodoc:

PIALibrary/Sources/UI/iOS/ViewControllers/PurchaseViewController.swift

@@ -19,22 +19,15 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
     @IBOutlet private weak var scrollView: UIScrollView!
 
     @IBOutlet private weak var labelTitle: UILabel!
-    
-    @IBOutlet private weak var textEmail: BorderedTextField!
+    @IBOutlet private weak var labelSubtitle: UILabel!
+
+    //@IBOutlet private weak var textEmail: BorderedTextField!
     
     @IBOutlet private weak var collectionPlans: UICollectionView!
     
     @IBOutlet private weak var textAgreement: UITextView!
     
-    @IBOutlet private weak var buttonPurchase: ActivityButton!
-    
-    @IBOutlet private weak var viewFooter: UIView!
-    
-    @IBOutlet private weak var viewLogin: UIView!
-    
-    @IBOutlet private weak var labelLogin1: UILabel!
-    
-    @IBOutlet private weak var labelLogin2: UILabel!
+    @IBOutlet private weak var buttonPurchase: PIAButton!
     
     var preset: Preset?
     
@@ -62,10 +55,10 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
         }
 
         collectionPlans.isUserInteractionEnabled = false
-        viewFooter.isHidden = omitsSiblingLink
 
         labelTitle.text = L10n.Welcome.Purchase.title
-        textEmail.placeholder = L10n.Welcome.Purchase.Email.placeholder
+        labelSubtitle.text = L10n.Welcome.Purchase.subtitle
+        //textEmail.placeholder = L10n.Welcome.Purchase.Email.placeholder
         textAgreement.attributedText = Theme.current.agreementText(
             withMessage: L10n.Welcome.Agreement.message,
             tos: L10n.Welcome.Agreement.Message.tos,
@@ -73,15 +66,12 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
             privacy: L10n.Welcome.Agreement.Message.privacy,
             privacyUrl: Client.configuration.privacyUrl
         )
-        buttonPurchase.title = L10n.Welcome.Purchase.submit
-        labelLogin1.text = L10n.Welcome.Purchase.Login.footer
-        labelLogin2.text = L10n.Welcome.Purchase.Login.button
-
-        viewLogin.accessibilityLabel = "\(labelLogin1.text!) \(labelLogin2.text!)"
-        textEmail.text = preset.purchaseEmail
+        //textEmail.text = preset.purchaseEmail
         
         let nc = NotificationCenter.default
         nc.addObserver(self, selector: #selector(productsDidFetch(notification:)), name: .__InAppDidFetchProducts, object: nil)
+        
+        stylePurchaseButton()
     }
     
     override func viewWillAppear(_ animated: Bool) {
@@ -142,15 +132,12 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
     }
     
     @IBAction private func signUp(_ sender: Any?) {
-        guard !buttonPurchase.isRunningActivity else {
-            return
-        }
-    
         guard let planIndex = selectedPlanIndex else {
             return
         }
         let errorTitle = L10n.Welcome.Purchase.Error.title
         let errorMessage = L10n.Welcome.Purchase.Error.validation
+        /*
         guard let email = textEmail.text?.trimmed(), Validator.validate(email: email) else {
             signupEmail = nil
             let alert = Macros.alert(errorTitle, errorMessage)
@@ -158,7 +145,8 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
             present(alert, animated: true, completion: nil)
             return
         }
-
+        */
+        
         let plan = allPlans[planIndex]
         guard !plan.isDummy else {
             let alert = Macros.alert(
@@ -181,8 +169,8 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
                 self?.present(alert, animated: true, completion: nil)
                 return
             }
-            self?.startPurchaseProcessWithEmail(email,
-                                                andPlan: plan)
+            //self?.startPurchaseProcessWithEmail(email,
+            //                                    andPlan: plan)
         })
         
     }
@@ -190,7 +178,7 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
     private func startPurchaseProcessWithEmail(_ email: String,
                                                andPlan plan: PurchasePlan) {
         
-        textEmail.text = email
+        //textEmail.text = email
         log.debug("Will purchase plan: \(plan.product)")
         
         disableInteractions(fully: true)
@@ -223,13 +211,6 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
 
     }
     
-    @IBAction private func logIn(_ sender: Any?) {
-        guard let pageController = parent as? WelcomePageViewController else {
-            fatalError("Not running in WelcomePageViewController")
-        }
-        pageController.show(page: .login)
-    }
-    
     override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
         if (segue.identifier == StoryboardSegue.Welcome.signupViaPurchaseSegue.rawValue) {
             let nav = segue.destination as! UINavigationController
@@ -253,13 +234,11 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
         if fully {
             parent?.view.isUserInteractionEnabled = false
         }
-        buttonPurchase.startActivity()
     }
     
     private func enableInteractions() {
         collectionPlans.isUserInteractionEnabled = true
         parent?.view.isUserInteractionEnabled = true
-        buttonPurchase.stopActivity()
     }
 
     // MARK: Notifications
@@ -275,15 +254,22 @@ class PurchaseViewController: AutolayoutViewController, WelcomeChild {
     
     override func viewShouldRestyle() {
         super.viewShouldRestyle()
-
-        Theme.current.applySolidLightBackground(collectionPlans)
+        Theme.current.applyLightBackground(view)
+        Theme.current.applyLightBackground(scrollView)
+        Theme.current.applyLightBackground(collectionPlans)
         Theme.current.applyTitle(labelTitle, appearance: .dark)
-        Theme.current.applyInput(textEmail)
+        Theme.current.applySubtitle(labelSubtitle)
+        //Theme.current.applyInput(textEmail)
         Theme.current.applyLinkAttributes(textAgreement)
-        Theme.current.applyActionButton(buttonPurchase)
-        Theme.current.applyBody1(labelLogin1, appearance: .dark)
-        Theme.current.applyTextButton(labelLogin2)
     }
+    
+    private func stylePurchaseButton() {
+        buttonPurchase.setRounded()
+        buttonPurchase.style(style: TextStyle.Buttons.piaGreenButton)
+        buttonPurchase.setTitle(L10n.Welcome.Purchase.submit.uppercased(),
+                              for: [])
+    }
+
 }
 
 extension PurchaseViewController: UICollectionViewDataSource, UICollectionViewDelegate {
@@ -306,9 +292,10 @@ extension PurchaseViewController: UICollectionViewDataSource, UICollectionViewDe
 
 extension PurchaseViewController: UICollectionViewDelegateFlowLayout {
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
-        let itemWidth = (collectionView.bounds.size.width - 10.0) / 2.0
-
-        return CGSize(width: itemWidth, height: collectionView.bounds.size.height)
+        let itemWidth = collectionView.bounds.size.width
+        let itemHeight = (collectionView.bounds.size.height - 13) / 2.0
+        return CGSize(width: itemWidth,
+                      height: itemHeight)
     }
 }
 
@@ -320,9 +307,9 @@ extension PurchaseViewController: UITextViewDelegate {
 
 extension PurchaseViewController: UITextFieldDelegate {
     func textFieldShouldReturn(_ textField: UITextField) -> Bool {
-        if (textField == textEmail) {
-            signUp(nil)
-        }
+        //if (textField == textEmail) {
+        //    signUp(nil)
+        //}
         return true
     }
 }