Skip to content

Commit 199cb52

Browse files
jaclyncjaclync
authored
Merge pull request #8239 from woocommerce/feat/8180-store-creation-picker-uiux-updates
Store creation M2: store picker UI/UX updates
2 parents 10a8271 + 0e31a4c commit 199cb52

File tree

12 files changed

+92
-120
lines changed

12 files changed

+92
-120
lines changed

‎WooCommerce/Classes/Authentication/Epilogue/AccountHeaderView.swift‎

Lines changed: 23 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import UIKit
33

44

55

6-
/// AccountHeaderView: Displays an Account's Details: [Gravatar + Name + Username]
6+
/// AccountHeaderView: Displays an Account's Details: [Gravatar + Email]
77
///
8-
class AccountHeaderView: UIView {
8+
final class AccountHeaderView: UIView {
99

1010
/// Account's Gravatar.
1111
///
@@ -15,33 +15,25 @@ class AccountHeaderView: UIView {
1515
}
1616
}
1717

18-
/// Account's Full Name.
18+
/// Account's email.
1919
///
20-
@IBOutlet private var fullnameLabel: UILabel! {
20+
@IBOutlet private var emailLabel: UILabel! {
2121
didSet {
22-
fullnameLabel.textColor = .systemColor(.label)
23-
fullnameLabel.accessibilityIdentifier = "full-name-label"
22+
emailLabel.textColor = .systemColor(.secondaryLabel)
23+
emailLabel.font = .body
24+
emailLabel.accessibilityIdentifier = "email-label"
2425
}
2526
}
2627

27-
/// Account's Username.
28+
/// Action Button
2829
///
29-
@IBOutlet private var usernameLabel: UILabel! {
30-
didSet {
31-
usernameLabel.textColor = .systemColor(.secondaryLabel)
32-
usernameLabel.accessibilityIdentifier = "username-label"
33-
}
34-
}
35-
36-
/// Help Button
37-
///
38-
@IBOutlet private weak var helpButton: UIButton!
30+
@IBOutlet private weak var actionButton: UIButton!
3931

4032
@IBOutlet private var containerView: UIView!
4133

42-
/// Closure to be executed whenever the help button is pressed
34+
/// Closure to be executed whenever the action button is pressed
4335
///
44-
var onHelpRequested: (() -> Void)?
36+
var onActionButtonTapped: ((UIView) -> Void)?
4537

4638
// MARK: - Overridden Methods
4739

@@ -57,35 +49,24 @@ class AccountHeaderView: UIView {
5749
//
5850
extension AccountHeaderView {
5951

60-
/// Account's Username.
61-
///
62-
var username: String? {
63-
set {
64-
usernameLabel.text = newValue
65-
}
66-
get {
67-
return usernameLabel.text
68-
}
69-
}
70-
7152
/// Account's Full Name
7253
///
73-
var fullname: String? {
54+
var email: String? {
7455
set {
75-
fullnameLabel.text = newValue
56+
emailLabel.text = newValue
7657
}
7758
get {
78-
return fullnameLabel.text
59+
return emailLabel.text
7960
}
8061
}
8162

82-
var isHelpButtonEnabled: Bool {
63+
var isActionButtonEnabled: Bool {
8364
set {
84-
helpButton.isHidden = !newValue
85-
helpButton.isEnabled = newValue
65+
actionButton.isHidden = !newValue
66+
actionButton.isEnabled = newValue
8667
}
8768
get {
88-
return helpButton.isHidden
69+
return actionButton.isHidden
8970
}
9071
}
9172

@@ -108,27 +89,11 @@ private extension AccountHeaderView {
10889
}
10990

11091
func setupHelpButton() {
111-
helpButton.setTitle(Strings.helpButtonTitle, for: .normal)
112-
helpButton.setTitleColor(.accent, for: .normal)
113-
helpButton.on(.touchUpInside) { [weak self] control in
114-
ServiceLocator.analytics.track(.sitePickerHelpButtonTapped)
115-
self?.handleHelpButtonTapped(control)
92+
actionButton.setImage(.ellipsisImage, for: .normal)
93+
actionButton.tintColor = .accent
94+
actionButton.setTitle(nil, for: .normal)
95+
actionButton.on(.touchUpInside) { [weak self] control in
96+
self?.onActionButtonTapped?(control)
11697
}
11798
}
118-
119-
/// Handle the help button being tapped
120-
///
121-
func handleHelpButtonTapped(_ sender: AnyObject) {
122-
onHelpRequested?()
123-
}
124-
}
125-
126-
127-
// MARK: - Constants!
128-
//
129-
private extension AccountHeaderView {
130-
131-
enum Strings {
132-
static let helpButtonTitle = NSLocalizedString("Help", comment: "Help button on store picker screen.")
133-
}
13499
}

‎WooCommerce/Classes/Authentication/Epilogue/AccountHeaderView.xib‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21225" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
2+
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
33
<device id="retina4_7" orientation="portrait" appearance="light"/>
44
<dependencies>
55
<deployment identifier="iOS"/>
6-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21207"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
77
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
88
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
99
</dependencies>
@@ -27,18 +27,12 @@
2727
<constraint firstAttribute="width" constant="60" id="cwR-2d-T4e"/>
2828
</constraints>
2929
</imageView>
30-
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" verticalHuggingPriority="750" text="Full Name" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xHF-gJ-reo">
31-
<rect key="frame" x="124" y="66" width="79" height="20.5"/>
30+
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" verticalHuggingPriority="750" text="Email" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xHF-gJ-reo">
31+
<rect key="frame" x="142" y="66" width="43" height="59"/>
3232
<fontDescription key="fontDescription" style="UICTFontTextStyleHeadline"/>
3333
<nil key="textColor"/>
3434
<nil key="highlightedColor"/>
3535
</label>
36-
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" text="@username" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="LiJ-G2-nZS">
37-
<rect key="frame" x="123" y="92.5" width="81.5" height="32.5"/>
38-
<fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
39-
<color key="textColor" systemColor="scrollViewTexturedBackgroundColor"/>
40-
<nil key="highlightedColor"/>
41-
</label>
4236
</subviews>
4337
</stackView>
4438
</subviews>
@@ -73,18 +67,12 @@
7367
<nil key="simulatedBottomBarMetrics"/>
7468
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
7569
<connections>
70+
<outlet property="actionButton" destination="VVa-5o-MfJ" id="jqF-NU-aZe"/>
7671
<outlet property="containerView" destination="Iu9-0K-UMw" id="2vR-o9-OI1"/>
77-
<outlet property="fullnameLabel" destination="xHF-gJ-reo" id="ba9-Sw-RJO"/>
72+
<outlet property="emailLabel" destination="xHF-gJ-reo" id="ba9-Sw-RJO"/>
7873
<outlet property="gravatarImageView" destination="vOQ-CP-fZ1" id="K0E-fC-gY9"/>
79-
<outlet property="helpButton" destination="VVa-5o-MfJ" id="jqF-NU-aZe"/>
80-
<outlet property="usernameLabel" destination="LiJ-G2-nZS" id="SiG-bv-eTM"/>
8174
</connections>
8275
<point key="canvasLocation" x="-7.2000000000000002" y="-309.44527736131937"/>
8376
</view>
8477
</objects>
85-
<resources>
86-
<systemColor name="scrollViewTexturedBackgroundColor">
87-
<color red="0.43529411764705878" green="0.44313725490196082" blue="0.47450980392156861" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
88-
</systemColor>
89-
</resources>
9078
</document>

‎WooCommerce/Classes/Authentication/Epilogue/EmptyStoresTableViewCell.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ private extension EmptyStoresTableViewCell {
7373
comment: "Link on the store picker for users who signed in with Apple to close their WordPress.com account."
7474
)
7575
static let legend =
76-
NSLocalizedString("Create your first store",
76+
NSLocalizedString("Add your first store",
7777
comment: "Displayed during the Login flow, whenever the user has no woo stores associated.")
7878
static let subtitle = NSLocalizedString("Quickly get up and selling with a beautiful online store.",
7979
comment: "Subtitle displayed during the Login flow, whenever the user has no woo stores associated.")

‎WooCommerce/Classes/Authentication/Epilogue/EmptyStoresTableViewCell.xib‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,30 @@
1717
<autoresizingMask key="autoresizingMask"/>
1818
<subviews>
1919
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="pky-np-rBc">
20-
<rect key="frame" x="0.0" y="0.0" width="375" height="222"/>
20+
<rect key="frame" x="16" y="0.0" width="343" height="222"/>
2121
<subviews>
2222
<imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="woo-no-store" translatesAutoresizingMaskIntoConstraints="NO" id="uuh-xp-DA5">
23-
<rect key="frame" x="0.0" y="0.0" width="375" height="138.5"/>
23+
<rect key="frame" x="0.0" y="0.0" width="343" height="138.5"/>
2424
</imageView>
2525
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="JZd-ud-Vc8">
26-
<rect key="frame" x="0.0" y="138.5" width="375" height="49"/>
26+
<rect key="frame" x="0.0" y="138.5" width="343" height="49"/>
2727
<subviews>
2828
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Label" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="bPV-bJ-GBz">
29-
<rect key="frame" x="0.0" y="0.0" width="375" height="20.5"/>
29+
<rect key="frame" x="0.0" y="0.0" width="343" height="20.5"/>
3030
<fontDescription key="fontDescription" type="system" pointSize="17"/>
3131
<nil key="textColor"/>
3232
<nil key="highlightedColor"/>
3333
</label>
3434
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="252" verticalCompressionResistancePriority="751" text="Label" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Oil-C8-RKM">
35-
<rect key="frame" x="0.0" y="28.5" width="375" height="20.5"/>
35+
<rect key="frame" x="0.0" y="28.5" width="343" height="20.5"/>
3636
<fontDescription key="fontDescription" type="system" pointSize="17"/>
3737
<nil key="textColor"/>
3838
<nil key="highlightedColor"/>
3939
</label>
4040
</subviews>
4141
</stackView>
4242
<button opaque="NO" contentMode="scaleToFill" verticalCompressionResistancePriority="751" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="XF9-r3-Vq9" userLabel="Remove Apple ID Access Button">
43-
<rect key="frame" x="0.0" y="187.5" width="375" height="34.5"/>
43+
<rect key="frame" x="0.0" y="187.5" width="343" height="34.5"/>
4444
<state key="normal" title="Button"/>
4545
<buttonConfiguration key="configuration" style="plain" title="Button"/>
4646
</button>
@@ -50,9 +50,9 @@
5050
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
5151
<constraints>
5252
<constraint firstAttribute="bottom" secondItem="pky-np-rBc" secondAttribute="bottom" constant="20" id="3Fb-5z-arL"/>
53-
<constraint firstItem="pky-np-rBc" firstAttribute="leading" secondItem="gcY-Gg-DvR" secondAttribute="leading" id="CRY-WF-Utt"/>
53+
<constraint firstItem="pky-np-rBc" firstAttribute="leading" secondItem="gcY-Gg-DvR" secondAttribute="leading" constant="16" id="CRY-WF-Utt"/>
5454
<constraint firstItem="pky-np-rBc" firstAttribute="top" secondItem="gcY-Gg-DvR" secondAttribute="top" id="Gpz-kR-gFd"/>
55-
<constraint firstAttribute="trailing" secondItem="pky-np-rBc" secondAttribute="trailing" id="VqG-p3-pkv"/>
55+
<constraint firstAttribute="trailing" secondItem="pky-np-rBc" secondAttribute="trailing" constant="16" id="VqG-p3-pkv"/>
5656
</constraints>
5757
</tableViewCellContentView>
5858
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>

‎WooCommerce/Classes/Authentication/Epilogue/StorePickerCoordinator.swift‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,6 @@ private extension StorePickerCoordinator {
121121

122122
func showStorePicker() {
123123
showStorePicker(presentationStyle: selectedConfiguration.presentationStyle)
124-
switch selectedConfiguration {
125-
case .storeCreationFromLogin:
126-
createStore()
127-
default:
128-
break
129-
}
130124
}
131125

132126
func showStorePicker(presentationStyle: PresentationStyle) {

‎WooCommerce/Classes/Authentication/Epilogue/StorePickerViewController.swift‎

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -252,15 +252,20 @@ private extension StorePickerViewController {
252252
return
253253
}
254254

255-
accountHeaderView.username = "@" + defaultAccount.username
256-
accountHeaderView.fullname = defaultAccount.displayName
255+
accountHeaderView.email = defaultAccount.email
257256
accountHeaderView.downloadGravatar(with: defaultAccount.email)
258-
accountHeaderView.isHelpButtonEnabled = configuration == .login || configuration == .standard
259-
accountHeaderView.onHelpRequested = { [weak self] in
260-
guard let self = self else {
261-
return
257+
let showsActionButton: Bool = {
258+
switch configuration {
259+
case .login, .standard, .storeCreationFromLogin:
260+
return true
261+
case .switchingStores, .listStores:
262+
return false
262263
}
263-
self.presentHelp()
264+
}()
265+
accountHeaderView.isActionButtonEnabled = showsActionButton
266+
accountHeaderView.onActionButtonTapped = { [weak self] sourceView in
267+
guard let self else { return }
268+
self.presentActionMenu(from: sourceView)
264269
}
265270
}
266271

@@ -310,6 +315,31 @@ private extension StorePickerViewController {
310315
return WordPressAuthenticator.shared.unifiedStyle?.viewControllerBackgroundColor ?? .listBackground
311316
}
312317

318+
func presentActionMenu(from sourceView: UIView) {
319+
let actionSheet = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
320+
actionSheet.view.tintColor = .text
321+
let logOutAction = UIAlertAction(title: Localization.ActionMenu.logOut, style: .default) { [weak self] _ in
322+
self?.restartAuthentication()
323+
}
324+
let helpAction = UIAlertAction(title: Localization.ActionMenu.help, style: .default) { [weak self] _ in
325+
guard let self else { return }
326+
ServiceLocator.analytics.track(.sitePickerHelpButtonTapped)
327+
self.presentHelp()
328+
}
329+
let cancelAction = UIAlertAction(title: Localization.cancel, style: .cancel)
330+
331+
actionSheet.addAction(logOutAction)
332+
actionSheet.addAction(helpAction)
333+
actionSheet.addAction(cancelAction)
334+
335+
if let popoverController = actionSheet.popoverPresentationController {
336+
popoverController.sourceView = sourceView
337+
popoverController.sourceRect = sourceView.bounds
338+
}
339+
340+
present(actionSheet, animated: true)
341+
}
342+
313343
func presentHelp() {
314344
ServiceLocator.authenticationManager.presentSupport(from: self, screen: .storePicker)
315345
}
@@ -422,6 +452,7 @@ private extension StorePickerViewController {
422452
case .empty:
423453
updateActionButtonAndTableState(animating: false, enabled: false)
424454
addStoreButton.isHidden = false
455+
secondaryActionButton.isHidden = true
425456
case .available(let sites):
426457
addStoreButton.isHidden = true
427458
if sites.allSatisfy({ $0.isWooCommerceActive == false }) {
@@ -824,6 +855,12 @@ private extension StorePickerViewController {
824855
comment: "Button to dismiss the action sheet on the store picker")
825856
static let addStoreButton = NSLocalizedString("Add a Store",
826857
comment: "Button title on the store picker for store creation")
858+
enum ActionMenu {
859+
static let logOut = NSLocalizedString("Log out",
860+
comment: "Button to log out from the current account from the store picker")
861+
static let help = NSLocalizedString("Help",
862+
comment: "Button to get help from the store picker")
863+
}
827864
}
828865
}
829866

‎WooCommerce/Classes/Authentication/Navigation Exceptions/ULAccountMismatchViewController.swift‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@ final class ULAccountMismatchViewController: UIViewController {
1212
/// and support for user actions
1313
private let viewModel: ULAccountMismatchViewModel
1414

15-
/// Header View: Displays all of the Account Details
16-
///
17-
private let accountHeaderView: AccountHeaderView = {
18-
return AccountHeaderView.instantiateFromNib()
19-
}()
20-
2115
private var subscriptions: Set<AnyCancellable> = []
2216

2317
@IBOutlet private weak var gravatarImageView: CircularImageView!

0 commit comments

Comments
 (0)