Login Epilogue: Mark I

WooCommerce/Classes/Authentication/AuthenticationManager.swift

@@ -136,7 +136,8 @@ extension AuthenticationManager: WordPressAuthenticatorDelegate {
     /// Presents the Login Epilogue, in the specified NavigationController.
     ///
     func presentLoginEpilogue(in navigationController: UINavigationController, for credentials: WordPressCredentials, onDismiss: @escaping () -> Void) {
-        // TODO: Wire Store Picker
+        let pickerViewController = StorePickerViewController()
+        navigationController.pushViewController(pickerViewController, animated: true)
     }
 
     /// Presents the Signup Epilogue, in the specified NavigationController.
@@ -145,11 +146,10 @@ extension AuthenticationManager: WordPressAuthenticatorDelegate {
         // NO-OP: The current WC version does not support Signup.
     }
 
-    /// Indicates if the Login Epilogue should be presented. This is false only when we're doing a Jetpack Connect, and the new
-    /// WordPress.com account has no sites. Capicci?
+    /// Indicates if the Login Epilogue should be presented.
     ///
     func shouldPresentLoginEpilogue(isJetpackLogin: Bool) -> Bool {
-        return false
+        return true
     }
 
     /// Indicates if the Signup Epilogue should be displayed.

WooCommerce/Classes/Authentication/Epilogue/AccountHeaderView.swift

@@ -0,0 +1,63 @@
+import Foundation
+import UIKit
+
+
+
+/// AccountHeaderView: Displays an Account's Details: [Gravatar + Name + Username]
+///
+class AccountHeaderView: UIView {
+
+    /// Account's Gravatar.
+    ///
+    @IBOutlet private var gravatarImageView: UIImageView! {
+        didSet {
+            gravatarImageView.image = .gravatarPlaceholderImage
+        }
+    }
+
+    /// Account's Full Name.
+    ///
+    @IBOutlet private var fullnameLabel: UILabel!
+
+    /// Account's Username.
+    ///
+    @IBOutlet private var usernameLabel: UILabel! {
+        didSet {
+            usernameLabel.textColor = StyleManager.wooGreyTextMin
+        }
+    }
+}
+
+
+// MARK: - Public Methods
+//
+extension AccountHeaderView {
+
+    /// Account's Username.
+    ///
+    var username: String? {
+        set {
+            usernameLabel.text =  newValue
+        }
+        get {
+            return usernameLabel.text
+        }
+    }
+
+    /// Account's Full Name
+    ///
+    var fullname: String? {
+        set {
+            fullnameLabel.text =  newValue
+        }
+        get {
+            return fullnameLabel.text
+        }
+    }
+
+    /// Downloads (and displays) the Gravatar associated with the specified Email.
+    ///
+    func downloadGravatar(with email: String) {
+        gravatarImageView.downloadGravatarWithEmail(email)
+    }
+}

WooCommerce/Classes/Authentication/Epilogue/AccountHeaderView.xib

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view contentMode="scaleToFill" id="wsJ-iY-FyE" customClass="AccountHeaderView" customModule="WooCommerce" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="375" height="174"/>
+            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+            <subviews>
+                <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" verticalCompressionResistancePriority="1000" translatesAutoresizingMaskIntoConstraints="NO" id="vOQ-CP-fZ1" customClass="CircularImageView" customModule="WooCommerce" customModuleProvider="target">
+                    <rect key="frame" x="157.5" y="29" width="60" height="60"/>
+                    <constraints>
+                        <constraint firstAttribute="height" constant="60" id="IcJ-wJ-Tra"/>
+                        <constraint firstAttribute="width" constant="60" id="cwR-2d-T4e"/>
+                    </constraints>
+                </imageView>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="252" verticalHuggingPriority="252" horizontalCompressionResistancePriority="1000" verticalCompressionResistancePriority="1000" text="Full Name" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xHF-gJ-reo">
+                    <rect key="frame" x="10" y="97" width="355" height="20.5"/>
+                    <fontDescription key="fontDescription" style="UICTFontTextStyleHeadline"/>
+                    <nil key="textColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="252" verticalHuggingPriority="253" verticalCompressionResistancePriority="1000" text="@username" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="LiJ-G2-nZS">
+                    <rect key="frame" x="10" y="125.5" width="355" height="18"/>
+                    <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
+                    <color key="textColor" cocoaTouchSystemColor="scrollViewTexturedBackgroundColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <constraints>
+                <constraint firstItem="LiJ-G2-nZS" firstAttribute="leading" secondItem="DAy-rN-ump" secondAttribute="leading" constant="10" id="4a0-8q-Z34"/>
+                <constraint firstItem="xHF-gJ-reo" firstAttribute="top" secondItem="vOQ-CP-fZ1" secondAttribute="bottom" constant="8" id="BTx-oz-REg"/>
+                <constraint firstItem="DAy-rN-ump" firstAttribute="trailing" secondItem="xHF-gJ-reo" secondAttribute="trailing" constant="10" id="JKO-gN-oNe"/>
+                <constraint firstItem="vOQ-CP-fZ1" firstAttribute="centerX" secondItem="wsJ-iY-FyE" secondAttribute="centerX" id="NgM-Yn-gMx"/>
+                <constraint firstItem="DAy-rN-ump" firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="LiJ-G2-nZS" secondAttribute="bottom" constant="29" id="Ved-ir-LoS"/>
+                <constraint firstItem="xHF-gJ-reo" firstAttribute="leading" secondItem="DAy-rN-ump" secondAttribute="leading" constant="10" id="bvI-bc-8La"/>
+                <constraint firstItem="LiJ-G2-nZS" firstAttribute="top" secondItem="xHF-gJ-reo" secondAttribute="bottom" constant="8" id="gOl-k9-naS"/>
+                <constraint firstItem="DAy-rN-ump" firstAttribute="trailing" secondItem="LiJ-G2-nZS" secondAttribute="trailing" constant="10" id="je2-Uv-FAR"/>
+                <constraint firstItem="vOQ-CP-fZ1" firstAttribute="top" secondItem="DAy-rN-ump" secondAttribute="top" constant="29" id="yHD-B7-H48"/>
+            </constraints>
+            <nil key="simulatedTopBarMetrics"/>
+            <nil key="simulatedBottomBarMetrics"/>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <viewLayoutGuide key="safeArea" id="DAy-rN-ump"/>
+            <connections>
+                <outlet property="fullnameLabel" destination="xHF-gJ-reo" id="ba9-Sw-RJO"/>
+                <outlet property="gravatarImageView" destination="vOQ-CP-fZ1" id="K0E-fC-gY9"/>
+                <outlet property="usernameLabel" destination="LiJ-G2-nZS" id="SiG-bv-eTM"/>
+            </connections>
+            <point key="canvasLocation" x="-6.5" y="-323"/>
+        </view>
+    </objects>
+</document>

WooCommerce/Classes/Authentication/Epilogue/EmptyStoresTableViewCell.swift

@@ -0,0 +1,23 @@
+import Foundation
+import UIKit
+
+
+/// EmptyStores: Displayed whenever there are no available WooCommerce Stores associated with the active account.
+///
+class EmptyStoresTableViewCell: UITableViewCell {
+
+    /// UITableView's Reuse Identifier.
+    ///
+    static let reuseIdentifier = EmptyStoresTableViewCell.classNameWithoutNamespaces
+
+    /// LegendLabel: To be displayed below the ImageView.
+    ///
+    @IBOutlet private var legendLabel: UILabel! {
+        didSet {
+            legendLabel.textColor = StyleManager.wooGreyTextMin
+            legendLabel.font = .subheadline
+            legendLabel.text = NSLocalizedString("Unable to find WooCommerce stores connected to this account",
+                                                 comment: "Displayed during the Login flow, whenever the user has no woo stores associated.")
+        }
+    }
+}

WooCommerce/Classes/Authentication/Epilogue/EmptyStoresTableViewCell.xib

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+        <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="none" indentationWidth="10" rowHeight="242" id="qMv-Pb-lgn" customClass="EmptyStoresTableViewCell" customModule="WooCommerce" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="375" height="242"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="qMv-Pb-lgn" id="gcY-Gg-DvR">
+                <rect key="frame" x="0.0" y="0.0" width="375" height="241.5"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="woo-no-store" translatesAutoresizingMaskIntoConstraints="NO" id="uuh-xp-DA5">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="180"/>
+                    </imageView>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="bPV-bJ-GBz">
+                        <rect key="frame" x="26" y="200.5" width="323" height="20.5"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                </subviews>
+                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                <constraints>
+                    <constraint firstItem="bPV-bJ-GBz" firstAttribute="leading" secondItem="gcY-Gg-DvR" secondAttribute="leadingMargin" constant="10" id="02T-fd-amz"/>
+                    <constraint firstAttribute="trailingMargin" secondItem="bPV-bJ-GBz" secondAttribute="trailing" constant="10" id="4v0-dU-uL0"/>
+                    <constraint firstItem="uuh-xp-DA5" firstAttribute="top" secondItem="gcY-Gg-DvR" secondAttribute="top" id="AXH-sZ-i9m"/>
+                    <constraint firstItem="uuh-xp-DA5" firstAttribute="leading" secondItem="gcY-Gg-DvR" secondAttribute="leading" id="QK4-JX-5Z1"/>
+                    <constraint firstItem="bPV-bJ-GBz" firstAttribute="top" relation="greaterThanOrEqual" secondItem="uuh-xp-DA5" secondAttribute="bottom" constant="10" id="YHi-MJ-ZFK"/>
+                    <constraint firstAttribute="bottomMargin" secondItem="bPV-bJ-GBz" secondAttribute="bottom" constant="10" id="Zyf-Uq-D8M"/>
+                    <constraint firstAttribute="trailing" secondItem="uuh-xp-DA5" secondAttribute="trailing" id="egs-Ij-2lL"/>
+                </constraints>
+            </tableViewCellContentView>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <connections>
+                <outlet property="legendLabel" destination="bPV-bJ-GBz" id="sQX-ir-ghQ"/>
+            </connections>
+            <point key="canvasLocation" x="-162.5" y="-12"/>
+        </tableViewCell>
+    </objects>
+    <resources>
+        <image name="woo-no-store" width="320" height="180"/>
+    </resources>
+</document>

WooCommerce/Classes/Authentication/Epilogue/StorePickerViewController.swift

@@ -0,0 +1,156 @@
+import Foundation
+import UIKit
+import WordPressAuthenticator
+import WordPressUI
+
+
+/// Allows the user to pick which WordPress.com (OR) Jetpack-Connected-Store we should set up as the Main Store.
+///
+class StorePickerViewController: UIViewController {
+
+    /// No Results Placeholder Image
+    ///
+    @IBOutlet private var noResultsImageView: UIImageView!
+
+    /// No Results Placeholder Text
+    ///
+    @IBOutlet private var noResultsLabel: UILabel! {
+        didSet {
+            noResultsLabel.font = StyleManager.subheadlineFont
+            noResultsLabel.textColor = StyleManager.wooGreyTextMin
+        }
+    }
+
+    /// Header View: Displays all of the Account Details
+    ///
+    private let accountHeaderView: AccountHeaderView = {
+        return AccountHeaderView.instantiateFromNib()
+    }()
+
+    /// Main tableView
+    ///
+    @IBOutlet private var tableView: UITableView! {
+        didSet {
+            tableView.tableHeaderView = accountHeaderView
+        }
+    }
+
+    /// White-Background View, to be placed surrounding the bottom area.
+    ///
+    @IBOutlet private var actionBackgroundView: UIView! {
+        didSet {
+            actionBackgroundView.layer.masksToBounds = false
+            actionBackgroundView.layer.shadowOpacity = StorePickerConstants.backgroundShadowOpacity
+        }
+    }
+
+    /// Default Action Button.
+    ///
+    @IBOutlet private var actionButton: UIButton! {
+        didSet {
+            actionButton.backgroundColor = .clear
+        }
+    }
+
+    /// Closure to be executed upon dismissal.
+    ///
+    var onDismiss: (() -> Void)?
+
+
+
+    // MARK: - Overridden Methods
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        setup(mainView: view)
+        registerTableViewCells()
+        displayAccountDetails(in: accountHeaderView)
+    }
+
+    override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+        navigationController?.setNavigationBarHidden(true, animated: animated)
+    }
+
+    override func viewWillDisappear(_ animated: Bool) {
+        super.viewWillDisappear(animated)
+        onDismiss?()
+    }
+}
+
+
+// MARK: - Initialization Methods
+//
+private extension StorePickerViewController {
+
+    func setup(mainView: UIView) {
+        mainView.backgroundColor = StyleManager.tableViewBackgroundColor
+    }
+
+    func registerTableViewCells() {
+        let cells = [
+            EmptyStoresTableViewCell.reuseIdentifier: EmptyStoresTableViewCell.loadNib()
+        ]
+
+        for (reuseIdentifier, nib) in cells {
+            tableView.register(nib, forCellReuseIdentifier: reuseIdentifier)
+        }
+    }
+
+    func displayAccountDetails(in headerView: AccountHeaderView) {
+        guard let defaultAccount = StoresManager.shared.sessionManager.defaultAccount else {
+            return
+        }
+
+        headerView.username = "@" + defaultAccount.username
+        headerView.fullname = defaultAccount.displayName
+        headerView.downloadGravatar(with: defaultAccount.email)
+    }
+}
+
+
+// MARK: - Action Handlers
+//
+extension StorePickerViewController {
+
+    /// Proceeds with the Login Flow.
+    ///
+    @IBAction func continueWasPressed() {
+        dismiss(animated: true, completion: nil)
+    }
+}
+
+
+// MARK: - Action Handlers
+//
+extension StorePickerViewController: UITableViewDataSource {
+
+    func numberOfSections(in tableView: UITableView) -> Int {
+        return 1
+    }
+
+    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+        return 1
+    }
+
+    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+        return tableView.dequeueReusableCell(withIdentifier: EmptyStoresTableViewCell.reuseIdentifier, for: indexPath)
+    }
+}
+
+
+// MARK: - StorePickerConstants: Contains all of the constants required by the Picker.
+//
+private enum StorePickerConstants {
+    static let backgroundShadowOpacity = Float(0.2)
+}
+
+
+// MARK: - Represents the StorePickerViewController's Internal State.
+//
+private enum StorePickerState {
+    case empty
+    case single
+    case multiple
+}