Skip to content

Commit d4ec68e

Browse files
EcarrionEcarrion
committed
Organize view into smaller sunviews to better readability
1 parent e12c4cc commit d4ec68e

File tree

1 file changed

+131
-85
lines changed

1 file changed

+131
-85
lines changed

‎WooCommerce/Classes/ViewRelated/Orders/Simple Payments/SimplePaymentsSummary.swift‎

Lines changed: 131 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -8,108 +8,154 @@ struct SimplePaymentsSummary: View {
88
ScrollView {
99
VStack(spacing: Layout.noSpacing) {
1010

11-
Group {
12-
13-
Divider()
14-
15-
AdaptiveStack(horizontalAlignment: .leading, spacing: Layout.horizontalStackSpacing) {
16-
Image(uiImage: .priceImage)
17-
.padding()
18-
.foregroundColor(Color(.systemGray))
19-
.background(Color(.listBackground))
20-
21-
Text(Localization.customAmount)
22-
.headlineStyle()
23-
24-
// Temporary data
25-
Text("$40.00")
26-
.headlineStyle()
27-
.frame(maxWidth: .infinity, alignment: .trailing)
28-
}
29-
.bodyStyle()
30-
.padding()
31-
.background(Color(.listForeground))
32-
33-
Divider()
34-
Spacer(minLength: Layout.spacerHeight)
35-
}
11+
CustomAmountSection()
3612

37-
Group {
38-
Divider()
39-
TitleAndTextFieldRow(title: Localization.email, placeholder: Localization.emailPlaceHolder, text: .constant(""))
40-
.background(Color(.listForeground))
41-
Divider()
42-
Spacer(minLength: Layout.spacerHeight)
43-
}
13+
Spacer(minLength: Layout.spacerHeight)
4414

45-
Group {
46-
Divider()
47-
VStack(alignment: .leading, spacing: Layout.verticalSummarySpacing) {
15+
EmailSection()
4816

49-
Text(Localization.payment)
50-
.headlineStyle()
51-
.padding([.horizontal, .top])
17+
Spacer(minLength: Layout.spacerHeight)
5218

53-
// Temporary data
54-
TitleAndValueRow(title: Localization.subtotal, value: .content("$40.0"), selectable: false) {}
19+
PaymentsSection()
5520

56-
// Temporary data
57-
TitleAndToggleRow(title: Localization.chargeTaxes, isOn: .constant(false))
58-
.padding([.leading, .trailing])
21+
Spacer(minLength: Layout.spacerHeight)
5922

60-
// Temporary data
61-
TitleAndValueRow(title: Localization.total, value: .content("$40.0"), bold: true, selectable: false) {}
62-
}
63-
.background(Color(.listForeground))
23+
NoteSection()
24+
}
25+
}
6426

65-
Divider()
66-
Spacer(minLength: Layout.spacerHeight)
67-
}
27+
TakePaymentSection()
28+
}
29+
.background(Color(.listBackground))
30+
}
31+
}
6832

69-
Group {
70-
Divider()
71-
72-
VStack(alignment: .leading, spacing: Layout.verticalNoteSpacing) {
73-
Text(Localization.orderNote)
74-
.headlineStyle()
75-
76-
Button(action: {
77-
print("Tapped add note")
78-
}, label: {
79-
HStack() {
80-
Image(uiImage: .plusImage)
81-
82-
Text(Localization.addNote)
83-
.frame(maxWidth: .infinity, alignment: .leading)
84-
}
85-
.foregroundColor(Color(.accent))
86-
.bodyStyle()
87-
})
88-
.frame(maxWidth: .infinity)
89-
}
90-
.padding()
91-
.background(Color(.listForeground))
92-
93-
Divider()
94-
}
33+
/// Represents the Custom amount section
34+
///
35+
private struct CustomAmountSection: View {
36+
var body: some View {
37+
Group {
38+
Divider()
9539

96-
}
40+
AdaptiveStack(horizontalAlignment: .leading, spacing: SimplePaymentsSummary.Layout.horizontalStackSpacing) {
41+
Image(uiImage: .priceImage)
42+
.padding()
43+
.foregroundColor(Color(.systemGray))
44+
.background(Color(.listBackground))
45+
46+
Text(SimplePaymentsSummary.Localization.customAmount)
47+
.headlineStyle()
48+
49+
// Temporary data
50+
Text("$40.00")
51+
.headlineStyle()
52+
.frame(maxWidth: .infinity, alignment: .trailing)
9753
}
54+
.bodyStyle()
55+
.padding()
56+
.background(Color(.listForeground))
57+
58+
Divider()
59+
}
60+
}
61+
}
62+
63+
/// Represents the email section
64+
///
65+
private struct EmailSection: View {
66+
var body: some View {
67+
Group {
68+
Divider()
69+
70+
TitleAndTextFieldRow(title: SimplePaymentsSummary.Localization.email,
71+
placeholder: SimplePaymentsSummary.Localization.emailPlaceHolder,
72+
text: .constant(""))
73+
.background(Color(.listForeground))
74+
75+
Divider()
76+
}
77+
}
78+
}
79+
80+
/// Represents the Payments Section
81+
///
82+
private struct PaymentsSection: View {
83+
var body: some View {
84+
Group {
85+
Divider()
86+
87+
VStack(alignment: .leading, spacing: SimplePaymentsSummary.Layout.verticalSummarySpacing) {
9888

99-
VStack {
100-
Divider()
89+
Text(SimplePaymentsSummary.Localization.payment)
90+
.headlineStyle()
91+
.padding([.horizontal, .top])
10192

10293
// Temporary data
103-
Button(Localization.takePayment(total: "$40.0"), action: {
104-
print("Take payment pressed")
105-
})
106-
.buttonStyle(PrimaryButtonStyle())
107-
.padding()
94+
TitleAndValueRow(title: SimplePaymentsSummary.Localization.subtotal, value: .content("$40.0"), selectable: false) {}
95+
96+
// Temporary data
97+
TitleAndToggleRow(title: SimplePaymentsSummary.Localization.chargeTaxes, isOn: .constant(false))
98+
.padding([.leading, .trailing])
10899

100+
// Temporary data
101+
TitleAndValueRow(title: SimplePaymentsSummary.Localization.total, value: .content("$40.0"), bold: true, selectable: false) {}
109102
}
110103
.background(Color(.listForeground))
104+
105+
Divider()
111106
}
112-
.background(Color(.listBackground))
107+
}
108+
}
109+
110+
/// Represents the Order note section
111+
///
112+
private struct NoteSection: View {
113+
var body: some View {
114+
Group {
115+
Divider()
116+
117+
VStack(alignment: .leading, spacing: SimplePaymentsSummary.Layout.verticalNoteSpacing) {
118+
Text(SimplePaymentsSummary.Localization.orderNote)
119+
.headlineStyle()
120+
121+
Button(action: {
122+
print("Tapped add note")
123+
}, label: {
124+
HStack() {
125+
Image(uiImage: .plusImage)
126+
127+
Text(SimplePaymentsSummary.Localization.addNote)
128+
.frame(maxWidth: .infinity, alignment: .leading)
129+
}
130+
.foregroundColor(Color(.accent))
131+
.bodyStyle()
132+
})
133+
.frame(maxWidth: .infinity)
134+
}
135+
.padding()
136+
.background(Color(.listForeground))
137+
138+
Divider()
139+
}
140+
}
141+
}
142+
143+
/// Represents the bottom take payment button
144+
///
145+
private struct TakePaymentSection: View {
146+
var body: some View {
147+
VStack {
148+
Divider()
149+
150+
// Temporary data
151+
Button(SimplePaymentsSummary.Localization.takePayment(total: "$40.0"), action: {
152+
print("Take payment pressed")
153+
})
154+
.buttonStyle(PrimaryButtonStyle())
155+
.padding()
156+
157+
}
158+
.background(Color(.listForeground))
113159
}
114160
}
115161

0 commit comments

Comments
 (0)