Skip to content

Commit b40ac0f

Browse files
staskusstaskus
authored
[Woo POS][Historical Orders] Order List & Details (Designer UI) (#16184)
2 parents 4053558 + 1718654 commit b40ac0f

File tree

17 files changed

+640
-415
lines changed

17 files changed

+640
-415
lines changed

‎Modules/Sources/Yosemite/Model/Copiable/Models+Copiable.generated.swift‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ extension Yosemite.POSOrder {
6666
formattedTotal: CopiableProp<String> = .copy,
6767
formattedSubtotal: CopiableProp<String> = .copy,
6868
customerEmail: NullableCopiableProp<String> = .copy,
69-
paymentMethodID: CopiableProp<String> = .copy,
7069
paymentMethodTitle: CopiableProp<String> = .copy,
7170
lineItems: CopiableProp<[POSOrderItem]> = .copy,
7271
refunds: CopiableProp<[POSOrderRefund]> = .copy,
@@ -82,7 +81,6 @@ extension Yosemite.POSOrder {
8281
let formattedTotal = formattedTotal ?? self.formattedTotal
8382
let formattedSubtotal = formattedSubtotal ?? self.formattedSubtotal
8483
let customerEmail = customerEmail ?? self.customerEmail
85-
let paymentMethodID = paymentMethodID ?? self.paymentMethodID
8684
let paymentMethodTitle = paymentMethodTitle ?? self.paymentMethodTitle
8785
let lineItems = lineItems ?? self.lineItems
8886
let refunds = refunds ?? self.refunds
@@ -99,7 +97,6 @@ extension Yosemite.POSOrder {
9997
formattedTotal: formattedTotal,
10098
formattedSubtotal: formattedSubtotal,
10199
customerEmail: customerEmail,
102-
paymentMethodID: paymentMethodID,
103100
paymentMethodTitle: paymentMethodTitle,
104101
lineItems: lineItems,
105102
refunds: refunds,

‎Modules/Sources/Yosemite/PointOfSale/OrderList/POSOrder.swift‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ public struct POSOrder: Equatable, Hashable, GeneratedCopiable {
1515
public let formattedTotal: String
1616
public let formattedSubtotal: String
1717
public let customerEmail: String?
18-
public let paymentMethodID: String
1918
public let paymentMethodTitle: String
2019
public let lineItems: [POSOrderItem]
2120
public let refunds: [POSOrderRefund]
@@ -31,7 +30,6 @@ public struct POSOrder: Equatable, Hashable, GeneratedCopiable {
3130
formattedTotal: String,
3231
formattedSubtotal: String,
3332
customerEmail: String? = nil,
34-
paymentMethodID: String,
3533
paymentMethodTitle: String,
3634
lineItems: [POSOrderItem] = [],
3735
refunds: [POSOrderRefund] = [],
@@ -46,7 +44,6 @@ public struct POSOrder: Equatable, Hashable, GeneratedCopiable {
4644
self.formattedTotal = formattedTotal
4745
self.formattedSubtotal = formattedSubtotal
4846
self.customerEmail = customerEmail
49-
self.paymentMethodID = paymentMethodID
5047
self.paymentMethodTitle = paymentMethodTitle
5148
self.lineItems = lineItems
5249
self.refunds = refunds

‎Modules/Sources/Yosemite/PointOfSale/OrderList/POSOrderMapper.swift‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ struct POSOrderMapper {
4141
formattedTotal: currencyFormatter.formatAmount(order.total, with: order.currency) ?? "",
4242
formattedSubtotal: order.subtotalValue(currencyFormatter: currencyFormatter),
4343
customerEmail: customerEmail,
44-
paymentMethodID: order.paymentMethodID,
4544
paymentMethodTitle: order.paymentMethodTitle,
4645
lineItems: posLineItems,
4746
refunds: posRefunds,

‎WooCommerce/Classes/POS/Presentation/Item Search/POSSearchTextFieldStyle.swift‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ struct POSSearchTextFieldModifier: ViewModifier {
66
private let focused: Bool
77
@Binding private var searchTerm: String
88
@ScaledMetric private var searchFieldHeight: CGFloat = 56.0
9+
@Environment(\.posSearchTextFieldUnfocusedBorderColor) private var unfocusedBorderColor
910

1011
init(focused: Bool, searchTerm: Binding<String>) {
1112
self.focused = focused
@@ -17,7 +18,7 @@ struct POSSearchTextFieldModifier: ViewModifier {
1718
.textFieldStyle(WooRoundedBorderTextFieldStyle(
1819
focused: focused,
1920
focusedBorderColor: .posPrimary,
20-
unfocusedBorderColor: .posSurfaceBright,
21+
unfocusedBorderColor: unfocusedBorderColor,
2122
backgroundColor: .posSurfaceBright,
2223
cornerRadius: POSCornerRadiusStyle.medium.value,
2324
insets: EdgeInsets(top: POSPadding.small, leading: POSPadding.medium, bottom: POSPadding.small, trailing: POSPadding.medium),

‎WooCommerce/Classes/POS/Presentation/Orders/POSOrderBadgeView.swift‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import SwiftUI
2+
import WooFoundation
3+
import struct Yosemite.POSOrder
4+
5+
struct POSOrderBadgeView: View {
6+
private let order: POSOrder
7+
8+
init(order: POSOrder) {
9+
self.order = order
10+
}
11+
12+
var body: some View {
13+
Text(order.status.localizedName)
14+
.font(.posCaptionRegular)
15+
.foregroundStyle(.black)
16+
.padding(.horizontal, POSPadding.small)
17+
.padding(.vertical, POSPadding.xSmall)
18+
.background(statusBackgroundColor)
19+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
20+
}
21+
22+
private var statusBackgroundColor: Color {
23+
switch order.status {
24+
case .completed:
25+
return Color(uiColor: .withColorStudio(.blue, shade: .shade5))
26+
case .failed:
27+
return Color(uiColor: .withColorStudio(.red, shade: .shade5))
28+
case .processing:
29+
return Color(uiColor: .withColorStudio(.green, shade: .shade5))
30+
case .onHold:
31+
return Color(uiColor: .withColorStudio(.orange, shade: .shade5))
32+
default:
33+
return Color(uiColor: .gray(.shade5))
34+
}
35+
}
36+
}

‎WooCommerce/Classes/POS/Presentation/Orders/POSOrderDetailsLoadingView.swift‎

Lines changed: 95 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,24 @@ import SwiftUI
22

33
struct POSOrderDetailsLoadingView: View {
44
var body: some View {
5-
VStack(spacing: 0) {
5+
VStack(spacing: POSSpacing.none) {
66
POSPageHeaderView(
7-
title: Localization.orderDetailsTitle,
7+
title: "",
88
backButtonConfiguration: nil,
9+
leadingContent: { shimmeringHeaderLeadingContent },
910
trailingContent: { shimmeringHeaderTrailingContent },
1011
bottomContent: { shimmeringHeaderBottomContent }
1112
)
13+
.dynamicTypeSize(...DynamicTypeSize.xxxLarge)
1214

1315
ScrollView {
1416
VStack(alignment: .leading, spacing: POSSpacing.medium) {
1517
shimmeringProductsSection
1618
shimmeringTotalsSection
1719
}
20+
.padding(.top, POSPadding.xSmall)
1821
.padding(.horizontal, POSPadding.medium)
22+
.padding(.bottom, POSPadding.medium)
1923
}
2024
}
2125
.background(Color.posSurface)
@@ -24,33 +28,49 @@ struct POSOrderDetailsLoadingView: View {
2428

2529
// MARK: - Shimmer Components
2630

31+
@ViewBuilder
32+
private var shimmeringHeaderLeadingContent: some View {
33+
HStack {
34+
Rectangle()
35+
.fill(Color.posOnSurfaceVariantLowest)
36+
.frame(width: Constants.longRowWidth, height: POSPadding.xxLarge)
37+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
38+
.shimmering()
39+
Spacer()
40+
}
41+
}
42+
2743
@ViewBuilder
2844
private var shimmeringHeaderTrailingContent: some View {
29-
GeometryReader { geometry in
30-
HStack {
31-
Spacer()
32-
Rectangle()
33-
.fill(Color.posOnSurfaceVariantLowest)
34-
.frame(width: geometry.size.width * 0.3, height: 16)
35-
.clipShape(RoundedRectangle(cornerRadius: 4))
36-
.shimmering()
37-
}
45+
HStack {
46+
Spacer()
47+
Rectangle()
48+
.fill(Color.posOnSurfaceVariantLowest)
49+
.frame(width: Constants.shortRowWidth, height: POSPadding.large)
50+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
51+
.shimmering()
3852
}
39-
.frame(height: 16)
4053
}
4154

4255
@ViewBuilder
4356
private var shimmeringHeaderBottomContent: some View {
44-
GeometryReader { geometry in
45-
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
46-
Rectangle()
47-
.fill(Color.posOnSurfaceVariantLowest)
48-
.frame(width: geometry.size.width * 0.5, height: 16)
49-
.clipShape(RoundedRectangle(cornerRadius: 4))
50-
.shimmering()
51-
}
57+
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
58+
Rectangle()
59+
.fill(Color.posOnSurfaceVariantLowest)
60+
.frame(width: Constants.longRowWidth, height: POSPadding.medium)
61+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
62+
.shimmering()
63+
64+
Spacer().frame(height: POSSpacing.xSmall)
65+
66+
Rectangle()
67+
.fill(Color.posOnSurfaceVariantLowest)
68+
.frame(width: Constants.shortRowWidth, height: POSPadding.medium)
69+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
70+
.shimmering()
5271
}
53-
.frame(height: 16)
72+
.padding(.top, POSPadding.medium)
73+
.multilineTextAlignment(.leading)
5474
}
5575

5676
@ViewBuilder
@@ -61,8 +81,12 @@ struct POSOrderDetailsLoadingView: View {
6181
.foregroundStyle(Color.posOnSurface)
6282

6383
VStack(spacing: POSSpacing.small) {
64-
ForEach(0..<2, id: \.self) { _ in
84+
ForEach(0..<2, id: \.self) { index in
6585
shimmeringProductRow
86+
87+
if index < 1 {
88+
divider
89+
}
6690
}
6791
}
6892
}
@@ -73,39 +97,35 @@ struct POSOrderDetailsLoadingView: View {
7397

7498
@ViewBuilder
7599
private var shimmeringProductRow: some View {
76-
GeometryReader { geometry in
77-
HStack(alignment: .top, spacing: POSSpacing.medium) {
100+
HStack(alignment: .center, spacing: POSSpacing.medium) {
101+
Rectangle()
102+
.fill(Color.posOnSurfaceVariantLowest)
103+
.frame(width: POSPadding.xxLarge, height: POSPadding.xxLarge)
104+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
105+
.shimmering()
106+
107+
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
78108
Rectangle()
79109
.fill(Color.posOnSurfaceVariantLowest)
80-
.frame(width: 40, height: 40)
110+
.frame(width: Constants.longRowWidth, height: POSPadding.medium)
81111
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
82112
.shimmering()
83113

84-
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
85-
Rectangle()
86-
.fill(Color.posOnSurfaceVariantLowest)
87-
.frame(width: geometry.size.width * 0.45, height: 20)
88-
.clipShape(RoundedRectangle(cornerRadius: 4))
89-
.shimmering()
90-
91-
Rectangle()
92-
.fill(Color.posOnSurfaceVariantLowest)
93-
.frame(width: geometry.size.width * 0.35, height: 16)
94-
.clipShape(RoundedRectangle(cornerRadius: 4))
95-
.shimmering()
96-
}
97-
98-
Spacer()
99-
100114
Rectangle()
101115
.fill(Color.posOnSurfaceVariantLowest)
102-
.frame(width: geometry.size.width * 0.2, height: 20)
103-
.clipShape(RoundedRectangle(cornerRadius: 4))
116+
.frame(width: Constants.shortRowWidth, height: POSPadding.medium)
117+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
104118
.shimmering()
105119
}
106-
.padding(.vertical, POSPadding.small)
120+
121+
Spacer()
122+
123+
Rectangle()
124+
.fill(Color.posOnSurfaceVariantLowest)
125+
.frame(width: Constants.shortRowWidth, height: POSPadding.medium)
126+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
127+
.shimmering()
107128
}
108-
.frame(height: 60)
109129
}
110130

111131
@ViewBuilder
@@ -120,10 +140,10 @@ struct POSOrderDetailsLoadingView: View {
120140
shimmeringTotalsRow
121141
shimmeringTotalsRow
122142

123-
Divider()
124-
.background(Color.posSurfaceDim)
125-
143+
divider
126144
shimmeringTotalsRow
145+
146+
divider
127147
shimmeringTotalsRow
128148
}
129149
}
@@ -134,34 +154,38 @@ struct POSOrderDetailsLoadingView: View {
134154

135155
@ViewBuilder
136156
private var shimmeringTotalsRow: some View {
137-
GeometryReader { geometry in
138-
HStack {
139-
Rectangle()
140-
.fill(Color.posOnSurfaceVariantLowest)
141-
.frame(width: geometry.size.width * 0.3, height: 20)
142-
.clipShape(RoundedRectangle(cornerRadius: 4))
143-
.shimmering()
144-
145-
Spacer()
146-
147-
Rectangle()
148-
.fill(Color.posOnSurfaceVariantLowest)
149-
.frame(width: geometry.size.width * 0.25, height: 20)
150-
.clipShape(RoundedRectangle(cornerRadius: 4))
151-
.shimmering()
152-
}
157+
HStack {
158+
Rectangle()
159+
.fill(Color.posOnSurfaceVariantLowest)
160+
.frame(width: Constants.mediumRowWidth, height: POSPadding.large)
161+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
162+
.shimmering()
163+
164+
Spacer()
165+
166+
Rectangle()
167+
.fill(Color.posOnSurfaceVariantLowest)
168+
.frame(width: Constants.shortRowWidth, height: POSPadding.large)
169+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
170+
.shimmering()
153171
}
154-
.frame(height: 20)
172+
}
173+
174+
@ViewBuilder
175+
private var divider: some View {
176+
Divider()
177+
.overlay(Color.posOutlineVariant.opacity(0.5))
178+
.padding(.vertical, POSSpacing.small)
155179
}
156180
}
157181

158-
private enum Localization {
159-
static let orderDetailsTitle = NSLocalizedString(
160-
"pos.orderDetailsLoadingView.title",
161-
value: "Order",
162-
comment: "Title for the order details screen when no specific order is selected"
163-
)
182+
private enum Constants {
183+
static let longRowWidth: CGFloat = 120
184+
static let mediumRowWidth: CGFloat = 100
185+
static let shortRowWidth: CGFloat = 80
186+
}
164187

188+
private enum Localization {
165189
static let productsTitle = NSLocalizedString(
166190
"pos.orderDetailsLoadingView.productsTitle",
167191
value: "Products",

0 commit comments

Comments
 (0)