Skip to content

[Watch] Order list UI #12798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 21, 2024
Merged

[Watch] Order list UI #12798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
29facc0
[Watch] Adds empty OrderListView file
Ecarrion May 20, 2024
d40ce0d
Watch: Add add tab view interface
Ecarrion May 20, 2024
e07e7ab
[Watch] Add handling for changing the tab programatically
Ecarrion May 20, 2024
41ad56e
Main UI for navigation list card
Ecarrion May 20, 2024
4d99d5d
Watch: Show button to go back to orders
Ecarrion May 21, 2024
d0b427f
Watch: Move constants to private enum
Ecarrion May 21, 2024
73148dc
Watch: Make the my store tab the default one
Ecarrion May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions WooCommerce/Woo Watch App/MyStore/MyStoreView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,14 @@ struct MyStoreView: View {
// View Model to drive the view
@StateObject var viewModel: MyStoreViewModel

init(dependencies: WatchDependencies) {
// Used to changed the tab programmatically
@Binding var watchTab: WooWatchTab

init(dependencies: WatchDependencies, watchTab: Binding<WooWatchTab>) {
_viewModel = StateObject(wrappedValue: MyStoreViewModel(dependencies: dependencies))
self._watchTab = watchTab
}

var body: some View {
// This VStack is needed so the `onAppear` task is properly executed.
VStack {
Expand Down Expand Up @@ -89,7 +94,7 @@ struct MyStoreView: View {
HStack {

Button(action: {
print("Order button pressed")
self.watchTab = .ordersList
}) {
HStack {
Images.document
Expand Down Expand Up @@ -196,7 +201,3 @@ fileprivate extension MyStoreView {
static let zigzag = Image(systemName: "point.bottomleft.forward.to.point.topright.filled.scurvepath")
}
}

#Preview {
MyStoreView(dependencies: .fake())
}
95 changes: 95 additions & 0 deletions WooCommerce/Woo Watch App/Orders/OrdersListView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import SwiftUI

/// Entry point for the order list view
///
struct OrdersListView: View {

// Used to changed the tab programmatically
@Binding var watchTab: WooWatchTab

init(watchTab: Binding<WooWatchTab>) {
self._watchTab = watchTab
}

var body: some View {
NavigationSplitView() {
List() {
Section { // Temporary Views
OrderListCard()
OrderListCard()
OrderListCard()
OrderListCard()
OrderListCard()
OrderListCard()
OrderListCard()
OrderListCard()
}
}
.navigationTitle(Localization.title)
.listStyle(.plain)
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button {
self.watchTab = .myStore
} label: {
Images.myStore
}
}
}
} detail: {
Text("Order Detail")
}
}
}

private extension OrdersListView {
enum Localization {
static let title = AppLocalizedString(
"watch.orders.title",
value: "Orders",
comment: "Title on the watch orders list screen."
)
}

enum Images {
static let myStore = Image(systemName: "house")
}
}

struct OrderListCard: View {
var body: some View {
VStack(alignment: .leading) {

HStack {
Text("25 Feb")
Spacer()
Text("#1031")
}
.font(.footnote)
.foregroundStyle(.secondary)

Text("Jemima Kirk")
.font(.body)

Text("$149.50")
.font(.body)
.bold()

Text("Pending payment")
.font(.footnote)
.foregroundStyle(Colors.wooPurple20)
}
.listRowBackground(
LinearGradient(gradient: Gradient(colors: [Colors.wooBackgroundStart, Colors.wooBackgroundEnd]), startPoint: .top, endPoint: .bottom)
.cornerRadius(10)
)
}
}

private extension OrderListCard {
enum Colors {
static let wooPurple20 = Color(red: 190/255.0, green: 160/255.0, blue: 242/255.0)
static let wooBackgroundStart = Color(red: 69/255.0, green: 43/255.0, blue: 100/255.0)
static let wooBackgroundEnd = Color(red: 49/255.0, green: 31/255.0, blue: 71/255.0)
}
}
38 changes: 36 additions & 2 deletions WooCommerce/Woo Watch App/WooApp.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,48 @@ struct Woo_Watch_AppApp: App {

@StateObject var phoneDependencySynchronizer = PhoneDependenciesSynchronizer()

@State private var selectedTab = WooWatchTab.myStore

var body: some Scene {
WindowGroup {
if let dependencies = phoneDependencySynchronizer.dependencies {
MyStoreView(dependencies: dependencies)
.environment(\.dependencies, dependencies)
TabView(selection: $selectedTab) {
MyStoreView(dependencies: dependencies, watchTab: $selectedTab)
.tag(WooWatchTab.myStore)

OrdersListView(watchTab: $selectedTab)
.tag(WooWatchTab.ordersList)
}
.compatibleVerticalStyle()
.environment(\.dependencies, dependencies)
} else {
ConnectView()
}
}
}
}

enum WooWatchTab: Int {
case myStore
case ordersList
}

/// Backwards compatible vertical `tabViewStyle` modifier.
///
private struct VerticalPageModifier: ViewModifier {
func body(content: Content) -> some View {
if #available(watchOS 10.0, *) {
content
.tabViewStyle(.verticalPage)
} else {
content
.tabViewStyle(.carousel)
}
}
}

private extension View {
func compatibleVerticalStyle() -> some View {
self.modifier(VerticalPageModifier())
}
}
12 changes: 12 additions & 0 deletions WooCommerce/WooCommerce.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -913,6 +913,7 @@
26A000772BE9D9030071DB1E /* WooConstants.swift in Sources */ = {isa = PBXBuildFile; fileRef = B5D1AFBF20BC67C200DB0E8C /* WooConstants.swift */; };
26A0B2D32BF9A78C002E9620 /* StoreInfoFormatter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26A0B2D22BF9A78C002E9620 /* StoreInfoFormatter.swift */; };
26A0B2D42BF9A78C002E9620 /* StoreInfoFormatter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26A0B2D22BF9A78C002E9620 /* StoreInfoFormatter.swift */; };
26A0B2D72BFBA536002E9620 /* OrdersListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26A0B2D62BFBA536002E9620 /* OrdersListView.swift */; };
26A280D62B45F00F00ACEE87 /* OrderNotificationViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26A280D52B45F00F00ACEE87 /* OrderNotificationViewModelTests.swift */; };
26A280D72B46027A00ACEE87 /* OrderNotificationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26CA2BC52AAA1773003B16C2 /* OrderNotificationView.swift */; };
26A630ED253F3B5C00CBC3B1 /* RefundCreationUseCase.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26A630EC253F3B5C00CBC3B1 /* RefundCreationUseCase.swift */; };
Expand Down Expand Up @@ -3737,6 +3738,7 @@
269FFA452BF40768004E6B86 /* WooFoundationWatchOS.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = WooFoundationWatchOS.framework; sourceTree = BUILT_PRODUCTS_DIR; };
269FFA4A2BF544C9004E6B86 /* MyStoreViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MyStoreViewModel.swift; sourceTree = "<group>"; };
26A0B2D22BF9A78C002E9620 /* StoreInfoFormatter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoreInfoFormatter.swift; sourceTree = "<group>"; };
26A0B2D62BFBA536002E9620 /* OrdersListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrdersListView.swift; sourceTree = "<group>"; };
26A280D52B45F00F00ACEE87 /* OrderNotificationViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderNotificationViewModelTests.swift; sourceTree = "<group>"; };
26A630EC253F3B5C00CBC3B1 /* RefundCreationUseCase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RefundCreationUseCase.swift; sourceTree = "<group>"; };
26A630F2253F3CFE00CBC3B1 /* RefundCreationUseCaseTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RefundCreationUseCaseTests.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -7609,6 +7611,14 @@
path = MyStore;
sourceTree = "<group>";
};
26A0B2D52BFBA51D002E9620 /* Orders */ = {
isa = PBXGroup;
children = (
26A0B2D62BFBA536002E9620 /* OrdersListView.swift */,
);
path = Orders;
sourceTree = "<group>";
};
26A630F8253F62AD00CBC3B1 /* UseCases */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -7785,6 +7795,7 @@
26F81B172BE433A2009EC58E /* WooApp.swift */,
26B984D52BEECF260052658C /* ConnectView.swift */,
269FFA492BF544B6004E6B86 /* MyStore */,
26A0B2D52BFBA51D002E9620 /* Orders */,
26F81B1B2BE433A3009EC58E /* Assets.xcassets */,
26F81B1D2BE433A3009EC58E /* Preview Content */,
);
Expand Down Expand Up @@ -13587,6 +13598,7 @@
buildActionMask = 2147483647;
files = (
264E9E952BF400AD009C48FD /* StoreInfoDataService.swift in Sources */,
26A0B2D72BFBA536002E9620 /* OrdersListView.swift in Sources */,
26B984D42BEECC610052658C /* Environment+Dependencies.swift in Sources */,
26F81B1A2BE433A2009EC58E /* MyStoreView.swift in Sources */,
264E9E942BF1D1DF009C48FD /* AppLocalizedString.swift in Sources */,
Expand Down
Loading