Skip to content

Commit cf6e4ff

Browse files
ctardactarda
committed
Re-style shipment tracking cell
Change button title style Update tests as well Update date formatter
1 parent ef091fb commit cf6e4ff

File tree

5 files changed

+124
-29
lines changed

5 files changed

+124
-29
lines changed

‎WooCommerce/Classes/Extensions/UIButton+Helpers.swift‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ extension UIButton {
1717
titleLabel?.applyHeadlineStyle()
1818
}
1919

20-
/// Applies the Primary Button Style: Clear BG / Bordered Outline
20+
/// Applies the Secondary Button Style: Clear BG / Bordered Outline
2121
///
2222
func applySecondaryButtonStyle() {
2323
backgroundColor = .clear
@@ -28,6 +28,17 @@ extension UIButton {
2828
layer.cornerRadius = Style.defaultCornerRadius
2929
titleLabel?.applyHeadlineStyle()
3030
}
31+
32+
/// Applies the Terciary Button Style: Clear BG / Top Outline
33+
///
34+
func applyTertiaryButtonStyle() {
35+
backgroundColor = .clear
36+
contentEdgeInsets = Style.noMargingEdgeInsets
37+
tintColor = StyleManager.wooCommerceBrandColor
38+
layer.borderColor = StyleManager.wooCommerceBrandColor.cgColor
39+
titleLabel?.applySubheadlineStyle()
40+
titleLabel?.textAlignment = .natural
41+
}
3142
}
3243

3344

@@ -39,5 +50,6 @@ private extension UIButton {
3950
static let defaultCornerRadius = CGFloat(8.0)
4051
static let defaultBorderWidth = CGFloat(1.0)
4152
static let defaultEdgeInsets = UIEdgeInsets(top: 12, left: 22, bottom: 12, right: 22)
53+
static let noMargingEdgeInsets = UIEdgeInsets(top: 12, left: 0, bottom: 12, right: 0)
4254
}
4355
}

‎WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTrackingTableViewCell.swift‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import UIKit
44
///
55
final class OrderTrackingTableViewCell: UITableViewCell {
66
@IBOutlet private var topLine: UILabel!
7+
@IBOutlet private var middleLine: UILabel!
78
@IBOutlet private var bottomLine: UILabel!
8-
9+
@IBOutlet private var topBorder: UIView!
910
@IBOutlet private var actionButton: UIButton!
1011

1112
var onActionTouchUp: (() -> Void)?
@@ -20,6 +21,16 @@ final class OrderTrackingTableViewCell: UITableViewCell {
2021
}
2122
}
2223

24+
var middleText: String? {
25+
get {
26+
return middleLine.text
27+
}
28+
set {
29+
middleLine.text = newValue
30+
configureMiddleLineForVoiceOver()
31+
}
32+
}
33+
2334
var bottomText: String? {
2435
get {
2536
return bottomLine.text
@@ -42,21 +53,31 @@ final class OrderTrackingTableViewCell: UITableViewCell {
4253

4354
override func awakeFromNib() {
4455
super.awakeFromNib()
56+
configureButtonSeparator()
4557
configureTopLine()
58+
configureMiddleLine()
4659
configureBottomLine()
4760
configureActionButton()
4861
}
4962

63+
private func configureButtonSeparator() {
64+
topBorder.backgroundColor = StyleManager.wooGreyBorder
65+
}
66+
5067
private func configureTopLine() {
51-
topLine.applyHeadlineStyle()
68+
topLine.applySubheadlineStyle()
69+
}
70+
71+
private func configureMiddleLine() {
72+
middleLine.applyHeadlineStyle()
5273
}
5374

5475
private func configureBottomLine() {
5576
bottomLine.applySubheadlineStyle()
5677
}
5778

5879
private func configureActionButton() {
59-
actionButton.applySecondaryButtonStyle()
80+
actionButton.applyTertiaryButtonStyle()
6081
configureActionButtonForVoiceOver()
6182
}
6283
}
@@ -78,12 +99,21 @@ private extension OrderTrackingTableViewCell {
7899
topText ?? "")
79100
}
80101

81-
func configureBottonLineForVoiceOver() {
82-
bottomLine.accessibilityLabel = String.localizedStringWithFormat(
102+
func configureMiddleLineForVoiceOver() {
103+
middleLine.accessibilityLabel = String.localizedStringWithFormat(
83104
NSLocalizedString("Tracking number %@",
84105
comment: "Accessibility label for Shipment tracking number "
85106
+ "in Order details screen. "
86107
+ "Reads like: Tracking Number 1AZ234567890"),
108+
middleText ?? "")
109+
}
110+
111+
func configureBottonLineForVoiceOver() {
112+
bottomLine.accessibilityLabel = String.localizedStringWithFormat(
113+
NSLocalizedString("Shipped %@",
114+
comment: "Accessibility label for Shipment date "
115+
+ "in Order details screen. "
116+
+ "Shipped: February 27, 2018."),
87117
bottomText ?? "")
88118
}
89119

@@ -103,6 +133,10 @@ extension OrderTrackingTableViewCell {
103133
return topLine
104134
}
105135

136+
func getMiddleLabel() -> UILabel {
137+
return middleLine
138+
}
139+
106140
func getBottomLabel() -> UILabel {
107141
return bottomLine
108142
}

‎WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTrackingTableViewCell.xib‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
1414
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
1515
<tableViewCell contentMode="scaleToFill" selectionStyle="none" indentationWidth="10" reuseIdentifier="OrderTrackingTableViewCell" rowHeight="188" id="KGk-i7-Jjw" customClass="OrderTrackingTableViewCell" customModule="WooCommerce" customModuleProvider="target">
16-
<rect key="frame" x="0.0" y="0.0" width="331" height="142"/>
16+
<rect key="frame" x="0.0" y="0.0" width="331" height="150"/>
1717
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
1818
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="KGk-i7-Jjw" id="H2p-sc-9uM">
19-
<rect key="frame" x="0.0" y="0.0" width="331" height="141.5"/>
19+
<rect key="frame" x="0.0" y="0.0" width="331" height="149.5"/>
2020
<autoresizingMask key="autoresizingMask"/>
2121
<subviews>
2222
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="nKR-kp-PKq">
23-
<rect key="frame" x="16" y="16" width="299" height="109.5"/>
23+
<rect key="frame" x="16" y="16" width="299" height="133.5"/>
2424
<subviews>
2525
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="4" translatesAutoresizingMaskIntoConstraints="NO" id="MBb-Vp-3eh">
26-
<rect key="frame" x="0.0" y="0.0" width="299" height="45"/>
26+
<rect key="frame" x="0.0" y="0.0" width="299" height="69.5"/>
2727
<subviews>
2828
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="kb4-pd-pEb">
2929
<rect key="frame" x="0.0" y="0.0" width="299" height="20.5"/>
@@ -37,20 +37,38 @@
3737
<nil key="textColor"/>
3838
<nil key="highlightedColor"/>
3939
</label>
40+
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QPn-Oj-khc">
41+
<rect key="frame" x="0.0" y="49" width="299" height="20.5"/>
42+
<fontDescription key="fontDescription" type="system" pointSize="17"/>
43+
<nil key="textColor"/>
44+
<nil key="highlightedColor"/>
45+
</label>
46+
</subviews>
47+
</stackView>
48+
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="SIM-Wl-ZSt">
49+
<rect key="frame" x="0.0" y="77.5" width="299" height="56"/>
50+
<subviews>
51+
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Mav-Sc-Nqa">
52+
<rect key="frame" x="0.0" y="0.0" width="299" height="1"/>
53+
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
54+
<constraints>
55+
<constraint firstAttribute="height" constant="1" id="Pfr-XS-Lqh"/>
56+
</constraints>
57+
</view>
58+
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="leading" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="q04-tu-Hwj">
59+
<rect key="frame" x="0.0" y="1" width="299" height="55"/>
60+
<state key="normal" title="Button"/>
61+
<connections>
62+
<action selector="actionButtonPressed:" destination="KGk-i7-Jjw" eventType="touchUpInside" id="vJf-Pe-OWy"/>
63+
</connections>
64+
</button>
4065
</subviews>
4166
</stackView>
42-
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="q04-tu-Hwj">
43-
<rect key="frame" x="0.0" y="53" width="299" height="56.5"/>
44-
<state key="normal" title="Button"/>
45-
<connections>
46-
<action selector="actionButtonPressed:" destination="KGk-i7-Jjw" eventType="touchUpInside" id="vJf-Pe-OWy"/>
47-
</connections>
48-
</button>
4967
</subviews>
5068
</stackView>
5169
</subviews>
5270
<constraints>
53-
<constraint firstAttribute="bottom" secondItem="nKR-kp-PKq" secondAttribute="bottom" constant="16" id="OVJ-2E-eJY"/>
71+
<constraint firstAttribute="bottom" secondItem="nKR-kp-PKq" secondAttribute="bottom" id="OVJ-2E-eJY"/>
5472
<constraint firstItem="nKR-kp-PKq" firstAttribute="leading" secondItem="H2p-sc-9uM" secondAttribute="leadingMargin" id="Tkb-Wi-nOp"/>
5573
<constraint firstItem="nKR-kp-PKq" firstAttribute="top" secondItem="H2p-sc-9uM" secondAttribute="top" constant="16" id="cF4-8H-16y"/>
5674
<constraint firstAttribute="trailingMargin" secondItem="nKR-kp-PKq" secondAttribute="trailing" id="fA5-E1-lrn"/>
@@ -59,7 +77,9 @@
5977
<viewLayoutGuide key="safeArea" id="njF-e1-oar"/>
6078
<connections>
6179
<outlet property="actionButton" destination="q04-tu-Hwj" id="yfI-P3-JyX"/>
62-
<outlet property="bottomLine" destination="5Tp-fv-Tte" id="0Kp-r9-HEk"/>
80+
<outlet property="bottomLine" destination="QPn-Oj-khc" id="TQ5-DT-vlI"/>
81+
<outlet property="middleLine" destination="5Tp-fv-Tte" id="0Kp-r9-HEk"/>
82+
<outlet property="topBorder" destination="Mav-Sc-Nqa" id="fen-Nr-OeV"/>
6383
<outlet property="topLine" destination="kb4-pd-pEb" id="eC2-Xc-JAH"/>
6484
</connections>
6585
<point key="canvasLocation" x="39.200000000000003" y="125.93703148425789"/>

‎WooCommerce/Classes/ViewRelated/Orders/OrderDetailsViewController.swift‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -492,7 +492,18 @@ private extension OrderDetailsViewController {
492492
}
493493

494494
cell.topText = tracking.trackingProvider
495-
cell.bottomText = tracking.trackingNumber
495+
cell.middleText = tracking.trackingNumber
496+
497+
if let dateShipped = tracking.dateShipped?.toString(dateStyle: .medium, timeStyle: .none) {
498+
cell.bottomText = String.localizedStringWithFormat(
499+
NSLocalizedString("Shipped %@",
500+
comment: "Date an item was shipped"),
501+
dateShipped)
502+
} else {
503+
cell.bottomText = NSLocalizedString("Not shipped yet",
504+
comment: "Order details > tracking. This is where the shipping date would normally display.")
505+
}
506+
496507
cell.actionButtonNormalText = viewModel.trackTitle
497508

498509
cell.onActionTouchUp = { [ weak self ] in

‎WooCommerce/WooCommerceTests/ViewRelated/OrderTrackingTableViewCellTests.swift‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ final class OrderTrackingTableViewCellTests: XCTestCase {
66
private var cell: OrderTrackingTableViewCell?
77

88
private struct MockData {
9+
static let localizedShipmentDate = Date(timeIntervalSince1970: 0).toString(dateStyle: .medium, timeStyle: .none)
910
static let tracking = ShipmentTracking(siteID: 0,
1011
orderID: 0,
1112
trackingID: "mock-tracking-id",
1213
trackingNumber: "XXX_YYY_ZZZ",
1314
trackingProvider: "HK POST",
1415
trackingURL: "http://automattic.com",
15-
dateShipped: nil)
16+
dateShipped: Date(timeIntervalSince1970: 0))
1617

1718
static let buttonTitle = "Track shipment"
1819
}
@@ -34,10 +35,16 @@ final class OrderTrackingTableViewCellTests: XCTestCase {
3435
XCTAssertEqual(cell?.getTopLabel().text, MockData.tracking.trackingProvider)
3536
}
3637

37-
func testBottomLineTextMatchesTrackingNumber() {
38+
func testMiddleLineTextMatchesTrackingNumber() {
3839
populateCell()
3940

40-
XCTAssertEqual(cell?.getBottomLabel().text, MockData.tracking.trackingNumber)
41+
XCTAssertEqual(cell?.getMiddleLabel().text, MockData.tracking.trackingNumber)
42+
}
43+
44+
func testBottomLineTextMatchesShipmentDate() {
45+
populateCell()
46+
47+
XCTAssertEqual(cell?.getBottomLabel().text, MockData.localizedShipmentDate)
4148
}
4249

4350
func testActionButtonExecutesCallback() {
@@ -52,16 +59,26 @@ final class OrderTrackingTableViewCellTests: XCTestCase {
5259
waitForExpectations(timeout: 1, handler: nil)
5360
}
5461

55-
func testTopLabelHasHeadlineStyle() {
62+
func testTopLabelHasSubheadlineStyle() {
5663
let mockLabel = UILabel()
57-
mockLabel.applyHeadlineStyle()
64+
mockLabel.applySubheadlineStyle()
5865

5966
let cellLabel = cell?.getTopLabel()
6067

6168
XCTAssertEqual(cellLabel?.font, mockLabel.font)
6269
XCTAssertEqual(cellLabel?.textColor, mockLabel.textColor)
6370
}
6471

72+
func testMiddleLabelHasHeadlineStyle() {
73+
let mockLabel = UILabel()
74+
mockLabel.applyHeadlineStyle()
75+
76+
let cellLabel = cell?.getMiddleLabel()
77+
78+
XCTAssertEqual(cellLabel?.font, mockLabel.font)
79+
XCTAssertEqual(cellLabel?.textColor, mockLabel.textColor)
80+
}
81+
6582
func testBottomLabelHasSubheadlineStyle() {
6683
let mockLabel = UILabel()
6784
mockLabel.applySubheadlineStyle()
@@ -74,7 +91,7 @@ final class OrderTrackingTableViewCellTests: XCTestCase {
7491

7592
func testActionButtonHasSecondaryButtonStyle() {
7693
let mockButton = UIButton()
77-
mockButton.applySecondaryButtonStyle()
94+
mockButton.applyTertiaryButtonStyle()
7895

7996
let cellButton = cell?.getActionButton()
8097

@@ -96,13 +113,13 @@ final class OrderTrackingTableViewCellTests: XCTestCase {
96113
XCTAssertEqual(cell?.getTopLabel().accessibilityLabel, expectedLabel)
97114
}
98115

99-
func testBottomLabelAccessibilityLabelMatchesExpectation() {
116+
func testMiddleLabelAccessibilityLabelMatchesExpectation() {
100117
populateCell()
101118

102119
let expectedLabel = String.localizedStringWithFormat("Tracking number %@",
103120
MockData.tracking.trackingNumber)
104121

105-
XCTAssertEqual(cell?.getBottomLabel().accessibilityLabel, expectedLabel)
122+
XCTAssertEqual(cell?.getMiddleLabel().accessibilityLabel, expectedLabel)
106123
}
107124

108125
func testButtonAccessibilityLabelMatchesExpectation() {
@@ -121,7 +138,8 @@ final class OrderTrackingTableViewCellTests: XCTestCase {
121138

122139
private func populateCell() {
123140
cell?.topText = MockData.tracking.trackingProvider
124-
cell?.bottomText = MockData.tracking.trackingNumber
141+
cell?.middleText = MockData.tracking.trackingNumber
142+
cell?.bottomText = MockData.localizedShipmentDate
125143
cell?.actionButtonNormalText = MockData.buttonTitle
126144
}
127145
}

0 commit comments

Comments
 (0)