Skip to content

Commit 35ff421

Browse files
Merge pull request #19881 from wordpress-mobile/task/19453-new-users-phase
Jetpack Focus: Implement design for the new users overlay
2 parents 23b3818 + 483007d commit 35ff421

20 files changed

+350
-36
lines changed

WordPress/Classes/ViewRelated/Jetpack/Branding/Coordinator/JetpackFeaturesRemovalCoordinator.swift

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Foundation
33
/// A class containing convenience methods for the the Jetpack features removal experience
44
class JetpackFeaturesRemovalCoordinator: NSObject {
55

6-
/// Enum descibing the current phase of the Jetpack features removal
6+
/// Enum describing the current phase of the Jetpack features removal
77
enum GeneralPhase: String {
88
case normal
99
case one
@@ -26,7 +26,7 @@ class JetpackFeaturesRemovalCoordinator: NSObject {
2626
}
2727
}
2828

29-
/// Enum descibing the current phase of the site creation flow removal
29+
/// Enum describing the current phase of the site creation flow removal
3030
enum SiteCreationPhase: String {
3131
case normal
3232
case one

WordPress/Classes/ViewRelated/Jetpack/Branding/Fullscreen Overlay/JetpackFullscreenOverlayGeneralViewModel.swift

Lines changed: 59 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,9 @@ struct JetpackFullscreenOverlayGeneralViewModel: JetpackFullscreenOverlayViewMod
3636
case (.four, .appOpen):
3737
return true
3838

39-
// New Users Phase: Show feature-collection overlays. Do not show on app-open. Features are removed by this point so they are irrelevant.
40-
case (.newUsers, .appOpen):
41-
return false
39+
// New Users Phase: Show feature-collection overlays. Features are removed by this point so they are irrelevant.
4240
case (.newUsers, _):
43-
return false // TODO: Change this to true when other new users phase tasks are ready
41+
return true
4442

4543
default:
4644
return false
@@ -79,6 +77,10 @@ struct JetpackFullscreenOverlayGeneralViewModel: JetpackFullscreenOverlayViewMod
7977
case (.four, _):
8078
return Strings.PhaseFour.generalTitle
8179

80+
// New Users
81+
case (.newUsers, _):
82+
return Strings.NewUsers.generalTitle
83+
8284
default:
8385
return ""
8486
}
@@ -105,41 +107,49 @@ struct JetpackFullscreenOverlayGeneralViewModel: JetpackFullscreenOverlayViewMod
105107
// Phase Four
106108
case (.four, _):
107109
return .init(string: Strings.PhaseFour.subtitle)
110+
111+
// New Users
112+
case (.newUsers, _):
113+
return .init(string: Strings.NewUsers.subtitle)
108114
default:
109115
return .init(string: "")
110116
}
111117
}
112118

113119
var animationLtr: String {
114-
switch source {
115-
case .stats:
120+
switch (source, phase) {
121+
case (.stats, _):
116122
return Constants.statsLogoAnimationLtr
117-
case .notifications:
123+
case (.notifications, _):
118124
return Constants.notificationsLogoAnimationLtr
119-
case .reader:
125+
case (.reader, _):
120126
return Constants.readerLogoAnimationLtr
121-
case .card:
127+
case (_, .newUsers):
128+
return Constants.wpJetpackLogoAnimationLtr
129+
case (.card, _):
122130
fallthrough
123-
case .login:
131+
case (.login, _):
124132
fallthrough
125-
case .appOpen:
133+
case (.appOpen, _):
126134
return Constants.allFeaturesLogosAnimationLtr
127135
}
128136
}
129137

130138
var animationRtl: String {
131-
switch source {
132-
case .stats:
139+
switch (source, phase) {
140+
case (.stats, _):
133141
return Constants.statsLogoAnimationRtl
134-
case .notifications:
142+
case (.notifications, _):
135143
return Constants.notificationsLogoAnimationRtl
136-
case .reader:
144+
case (.reader, _):
137145
return Constants.readerLogoAnimationRtl
138-
case .card:
146+
case (_, .newUsers):
147+
return Constants.wpJetpackLogoAnimationRtl
148+
case (.card, _):
139149
fallthrough
140-
case .login:
150+
case (.login, _):
141151
fallthrough
142-
case .appOpen:
152+
case (.appOpen, _):
143153
return Constants.allFeaturesLogosAnimationRtl
144154
}
145155
}
@@ -185,6 +195,8 @@ struct JetpackFullscreenOverlayGeneralViewModel: JetpackFullscreenOverlayViewMod
185195
case .three:
186196
fallthrough
187197
case .four:
198+
fallthrough
199+
case .newUsers:
188200
return Strings.General.latePhasesSwitchButtonTitle
189201
default:
190202
return ""
@@ -199,12 +211,10 @@ struct JetpackFullscreenOverlayGeneralViewModel: JetpackFullscreenOverlayViewMod
199211
return Strings.General.notificationsContinueButtonTitle
200212
case (.reader, _):
201213
return Strings.General.readerContinueButtonTitle
202-
case (_, .three):
203-
return Strings.PhaseThree.generalContinueButtonTitle
204214
case (_, .four):
205215
return Strings.PhaseFour.generalContinueButtonTitle
206216
default:
207-
return nil
217+
return Strings.General.continueButtonTitle
208218
}
209219
}
210220

@@ -226,6 +236,19 @@ struct JetpackFullscreenOverlayGeneralViewModel: JetpackFullscreenOverlayViewMod
226236
var onWillDismiss: JetpackOverlayDismissCallback?
227237

228238
var onDidDismiss: JetpackOverlayDismissCallback?
239+
240+
var secondaryView: UIView? {
241+
switch phase {
242+
case .newUsers:
243+
return JetpackNewUsersOverlaySecondaryView()
244+
default:
245+
return nil
246+
}
247+
}
248+
249+
var isCompact: Bool {
250+
return phase == .newUsers
251+
}
229252
}
230253

231254
// MARK: Helpers
@@ -267,6 +290,8 @@ private extension JetpackFullscreenOverlayGeneralViewModel {
267290
static let notificationsLogoAnimationRtl = "JetpackNotificationsLogoAnimation_rtl"
268291
static let allFeaturesLogosAnimationLtr = "JetpackAllFeaturesLogosAnimation_ltr"
269292
static let allFeaturesLogosAnimationRtl = "JetpackAllFeaturesLogosAnimation_rtl"
293+
static let wpJetpackLogoAnimationLtr = "JetpackWordPressLogoAnimation_ltr"
294+
static let wpJetpackLogoAnimationRtl = "JetpackWordPressLogoAnimation_rtl"
270295
}
271296

272297
enum Strings {
@@ -287,6 +312,9 @@ private extension JetpackFullscreenOverlayGeneralViewModel {
287312
static let notificationsContinueButtonTitle = NSLocalizedString("jetpack.fullscreen.overlay.notifications.continue.title",
288313
value: "Continue to Notifications",
289314
comment: "Title of a button that dismisses an overlay and displays the Notifications screen.")
315+
static let continueButtonTitle = NSLocalizedString("jetpack.fullscreen.overlay.phaseThree.general.continue.title",
316+
value: "Continue without Jetpack",
317+
comment: "Title of a button that dismisses an overlay that showcases the Jetpack app.")
290318
}
291319

292320
enum PhaseOne {
@@ -344,10 +372,6 @@ private extension JetpackFullscreenOverlayGeneralViewModel {
344372
static let generalTitle = NSLocalizedString("jetpack.fullscreen.overlay.phaseThree.general.title",
345373
value: "Jetpack features are moving soon.",
346374
comment: "Title of a screen that showcases the Jetpack app.")
347-
348-
static let generalContinueButtonTitle = NSLocalizedString("jetpack.fullscreen.overlay.phaseThree.general.continue.title",
349-
value: "Continue without Jetpack",
350-
comment: "Title of a button that dismisses an overlay that showcases the Jetpack app.")
351375
}
352376

353377
enum PhaseFour {
@@ -363,5 +387,15 @@ private extension JetpackFullscreenOverlayGeneralViewModel {
363387
value: "Do this later",
364388
comment: "Title of a button that dismisses an overlay that prompts the user to switch the Jetpack app.")
365389
}
390+
391+
enum NewUsers {
392+
static let generalTitle = NSLocalizedString("jetpack.fullscreen.overlay.newUsers.title",
393+
value: "Give WordPress a boost with Jetpack",
394+
comment: "Title of a screen that prompts the user to switch the Jetpack app.")
395+
396+
static let subtitle = NSLocalizedString("jetpack.fullscreen.overlay.newUsers.subtitle",
397+
value: "Jetpack lets you do more with your WordPress site. Switching is free and only takes a minute.",
398+
comment: "Title of a screen that prompts the user to switch the Jetpack app.")
399+
}
366400
}
367401
}

WordPress/Classes/ViewRelated/Jetpack/Branding/Fullscreen Overlay/JetpackFullscreenOverlaySiteCreationViewModel.swift

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,14 @@ struct JetpackFullscreenOverlaySiteCreationViewModel: JetpackFullscreenOverlayVi
7474
var onWillDismiss: JetpackOverlayDismissCallback?
7575

7676
var onDidDismiss: JetpackOverlayDismissCallback?
77+
78+
var secondaryView: UIView? {
79+
return nil
80+
}
81+
82+
var isCompact: Bool {
83+
return false
84+
}
7785
}
7886

7987
private extension JetpackFullscreenOverlaySiteCreationViewModel {

WordPress/Classes/ViewRelated/Jetpack/Branding/Fullscreen Overlay/JetpackFullscreenOverlayViewController.swift

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ class JetpackFullscreenOverlayViewController: UIViewController {
5050
@IBOutlet weak var subtitleLabel: UILabel!
5151
@IBOutlet weak var footnoteLabel: UILabel!
5252
@IBOutlet weak var learnMoreButton: UIButton!
53+
@IBOutlet weak var learnMoreSuperView: UIView!
5354
@IBOutlet weak var switchButton: UIButton!
5455
@IBOutlet weak var continueButton: UIButton!
5556
@IBOutlet weak var buttonsSuperViewBottomConstraint: NSLayoutConstraint!
@@ -71,6 +72,7 @@ class JetpackFullscreenOverlayViewController: UIViewController {
7172
super.viewDidLoad()
7273

7374
self.isModalInPresentation = true
75+
addSecondaryViewIfAvailable()
7476
configureNavigationBar()
7577
applyStyles()
7678
setupConstraints()
@@ -84,6 +86,14 @@ class JetpackFullscreenOverlayViewController: UIViewController {
8486

8587
// MARK: Helpers
8688

89+
private func addSecondaryViewIfAvailable() {
90+
guard let secondaryView = viewModel.secondaryView,
91+
let index = contentStackView.arrangedSubviews.firstIndex(of: learnMoreSuperView) else {
92+
return
93+
}
94+
contentStackView.insertArrangedSubview(secondaryView, at: index)
95+
}
96+
8797
private func configureNavigationBar() {
8898
addCloseButtonIfNeeded()
8999

@@ -107,6 +117,7 @@ class JetpackFullscreenOverlayViewController: UIViewController {
107117
}
108118

109119
private func applyStyles() {
120+
contentStackView.spacing = viewModel.isCompact ? Metrics.compactStackViewSpacing : Metrics.normalStackViewSpacing
110121
switchButton.layer.cornerRadius = Metrics.switchButtonCornerRadius
111122
}
112123

@@ -258,6 +269,8 @@ private extension JetpackFullscreenOverlayViewController {
258269
}
259270

260271
enum Metrics {
272+
static let normalStackViewSpacing: CGFloat = 20
273+
static let compactStackViewSpacing: CGFloat = 10
261274
static let closeButtonRadius: CGFloat = 30
262275
static let mainButtonsContentInsets = NSDirectionalEdgeInsets(top: 0, leading: 24, bottom: 0, trailing: 24)
263276
static let mainButtonsContentEdgeInsets = UIEdgeInsets(top: 0, left: 24, bottom: 0, right: 24)

WordPress/Classes/ViewRelated/Jetpack/Branding/Fullscreen Overlay/JetpackFullscreenOverlayViewController.xib

Lines changed: 10 additions & 9 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="System colors in document resources" minToolsVersion="11.0"/>
99
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -17,6 +17,7 @@
1717
<outlet property="continueButton" destination="hPW-8A-Di4" id="fym-yu-QBz"/>
1818
<outlet property="footnoteLabel" destination="1l4-qY-6ZA" id="Szg-6d-q2E"/>
1919
<outlet property="learnMoreButton" destination="n55-iX-u43" id="xmI-UK-MhK"/>
20+
<outlet property="learnMoreSuperView" destination="0z9-x4-AgY" id="iAg-eE-Znk"/>
2021
<outlet property="subtitleLabel" destination="n6H-KY-dMw" id="mA3-01-Yg4"/>
2122
<outlet property="switchButton" destination="VGE-FS-gsd" id="FEz-5f-kSS"/>
2223
<outlet property="titleLabel" destination="EqD-nO-Q6T" id="J4a-QK-Do3"/>
@@ -35,7 +36,7 @@
3536
<rect key="frame" x="0.0" y="0.0" width="375" height="456"/>
3637
<subviews>
3738
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="TTg-Z6-h4X" userLabel="Content Stack View">
38-
<rect key="frame" x="29" y="86.5" width="317" height="283"/>
39+
<rect key="frame" x="29" y="86.666666666666657" width="317" height="282.66666666666674"/>
3940
<subviews>
4041
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="bUe-f2-zzc" userLabel="Icon Super View">
4142
<rect key="frame" x="0.0" y="0.0" width="317" height="75"/>
@@ -58,28 +59,28 @@
5859
</constraints>
5960
</view>
6061
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" minimumScaleFactor="0.59999999999999998" translatesAutoresizingMaskIntoConstraints="NO" id="EqD-nO-Q6T">
61-
<rect key="frame" x="0.0" y="95" width="317" height="20.5"/>
62+
<rect key="frame" x="0.0" y="94.999999999999986" width="317" height="20.333333333333329"/>
6263
<fontDescription key="fontDescription" type="system" pointSize="17"/>
6364
<nil key="textColor"/>
6465
<nil key="highlightedColor"/>
6566
</label>
6667
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Subtitle Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" minimumScaleFactor="0.59999999999999998" translatesAutoresizingMaskIntoConstraints="NO" id="n6H-KY-dMw">
67-
<rect key="frame" x="0.0" y="135.5" width="317" height="20.5"/>
68+
<rect key="frame" x="0.0" y="135.33333333333331" width="317" height="20.333333333333343"/>
6869
<fontDescription key="fontDescription" type="system" pointSize="17"/>
6970
<nil key="textColor"/>
7071
<nil key="highlightedColor"/>
7172
</label>
7273
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Footnote Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="2" baselineAdjustment="alignBaselines" minimumScaleFactor="0.59999999999999998" translatesAutoresizingMaskIntoConstraints="NO" id="1l4-qY-6ZA">
73-
<rect key="frame" x="0.0" y="176" width="317" height="20.5"/>
74+
<rect key="frame" x="0.0" y="175.66666666666663" width="317" height="20.333333333333343"/>
7475
<fontDescription key="fontDescription" type="system" pointSize="17"/>
7576
<nil key="textColor"/>
7677
<nil key="highlightedColor"/>
7778
</label>
7879
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="0z9-x4-AgY" userLabel="Learn More Super View">
79-
<rect key="frame" x="0.0" y="216.5" width="317" height="66.5"/>
80+
<rect key="frame" x="0.0" y="216" width="317" height="66.666666666666686"/>
8081
<subviews>
8182
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="leading" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="n55-iX-u43">
82-
<rect key="frame" x="0.0" y="0.0" width="128" height="66.5"/>
83+
<rect key="frame" x="0.0" y="0.0" width="128" height="66.666666666666671"/>
8384
<inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
8485
<state key="normal" title="Learn More Button"/>
8586
<connections>
@@ -117,7 +118,7 @@
117118
</constraints>
118119
</scrollView>
119120
<stackView opaque="NO" contentMode="scaleToFill" placeholderIntrinsicWidth="354" placeholderIntrinsicHeight="166" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="vcE-wc-fHe">
120-
<rect key="frame" x="10.5" y="471" width="354" height="166"/>
121+
<rect key="frame" x="10.666666666666657" y="471" width="354" height="166"/>
121122
<subviews>
122123
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="VGE-FS-gsd">
123124
<rect key="frame" x="0.0" y="0.0" width="354" height="50"/>

WordPress/Classes/ViewRelated/Jetpack/Branding/Fullscreen Overlay/JetpackFullscreenOverlayViewModel.swift

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ protocol JetpackFullscreenOverlayViewModel {
1717
var onWillDismiss: JetpackOverlayDismissCallback? { get }
1818
var onDidDismiss: JetpackOverlayDismissCallback? { get }
1919

20+
/// An optional view.
21+
/// If provided, the view will be added to the overlay before the learn more button
22+
var secondaryView: UIView? { get }
23+
24+
/// If `true`, the overlay uses tighter spacings between subviews.
25+
/// Useful for packed overlays.
26+
var isCompact: Bool { get }
27+
2028
func trackOverlayDisplayed()
2129
func trackLearnMoreTapped()
2230
func trackSwitchButtonTapped()

0 commit comments

Comments
 (0)