Skip to content
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.

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

[Woo POS] M2: Exit POS modal presentation #13530

Merged
merged 11 commits into from
Aug 9, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ struct POSFloatingControlView: View {
HStack {
Menu {
Button {
presentationMode.wrappedValue.dismiss()
viewModel.showExitPOSModal = true
} label: {
HStack(spacing: Constants.buttonImageAndTextSpacing) {
Image(PointOfSaleAssets.exit.imageName)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import SwiftUI

struct PointOfSaleDashboardView: View {
@Environment(\.presentationMode) var presentationMode

@ObservedObject private var viewModel: PointOfSaleDashboardViewModel
@ObservedObject private var totalsViewModel: TotalsViewModel
@ObservedObject private var cartViewModel: CartViewModel
Expand Down Expand Up @@ -59,6 +57,10 @@ struct PointOfSaleDashboardView: View {
}
}
})
.posModal(isPresented: $viewModel.showExitPOSModal, fixedWidth: false, fixedHeight: false, content: {
PointOfSaleExitPosAlertView(viewModel: viewModel)
.frame(maxWidth: Constants.exitPOSSheetMaxWidth)
})
.task {
await viewModel.itemListViewModel.populatePointOfSaleItems()
}
Expand Down Expand Up @@ -107,6 +109,7 @@ private extension PointOfSaleDashboardView {
static let buttonImageAndTextSpacing: CGFloat = 12
static let floatingControlHorizontalOffset: CGFloat = 24
static let floatingControlVerticalOffset: CGFloat = 0
static let exitPOSSheetMaxWidth: CGFloat = 900.0
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import SwiftUI

struct PointOfSaleExitPosAlertView: View {
@Environment(\.dismiss) private var dismiss
@ObservedObject private var viewModel: PointOfSaleDashboardViewModel

init(viewModel: PointOfSaleDashboardViewModel) {
self.viewModel = viewModel
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if this just had the isPresented binding, not the whole view model

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in 358d15c

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, good point, tnx!


var body: some View {
VStack(spacing: 0 ) {
HStack {
Spacer()
Button {
viewModel.showExitPOSModal = false
} label: {
Image(systemName: "xmark")
.resizable()
.scaledToFit()
.frame(width: Constants.closeIconSize, height: Constants.closeIconSize)
.foregroundColor(Color.posTertiaryTexti3)
}
.frame(width: Constants.closeButtonSize, height: Constants.closeButtonSize)
}
Text(Localization.exitTitle)
.font(.posModalTitle)
.padding(.bottom, Constants.titleBottomPadding)
Text(Localization.exitBody)
.font(.posModalBody)
.padding(.bottom, Constants.bodyBottomPadding)
Button {
dismiss()
} label: {
Text(Localization.exitButton)
}
.buttonStyle(POSPrimaryButtonStyle())
}
.padding(Constants.padding)
}
}

private extension PointOfSaleExitPosAlertView {
enum Constants {
static let titleBottomPadding: CGFloat = 20.0
static let bodyBottomPadding: CGFloat = 60.0
static let padding: CGFloat = 40.0
static let closeIconSize: CGFloat = 30.0
static let closeButtonSize: CGFloat = 40.0
}

enum Localization {
static let exitTitle = NSLocalizedString(
"pos.exitPOSModal.exitTitle",
value: "Exit Point of Sale mode?",
comment: "Title of the exit Point of Sale modal alert"
)
static let exitBody = NSLocalizedString(
"pos.exitPOSModal.exitBody",
value: "Any orders in progress will be lost.",
comment: "Body text of the exit Point of Sale modal alert"
)
static let exitButton = NSLocalizedString(
"pos.exitPOSModal.exitButtom",
value: "Exit",
comment: "Button text of the exit Point of Sale modal alert"
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import SwiftUI
struct POSModalViewModifier<ModalContent: View>: ViewModifier {
@Binding var isPresented: Bool
let modalContent: () -> ModalContent
let fixedWidth: Bool
let fixedHeight: Bool
Comment on lines +6 to +7
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added this properties to allow more flexible usage/layout of the POS modals


@Environment(\.sizeCategory) var sizeCategory

Expand All @@ -18,8 +20,8 @@ struct POSModalViewModifier<ModalContent: View>: ViewModifier {

modalContent()
.frame(
width: min(frameWidth, windowBounds.width),
height: min(frameHeight, windowBounds.height))
width: fixedWidth ? min(frameWidth, windowBounds.width) : nil,
height: fixedHeight ? min(frameHeight, windowBounds.height) : nil)
.background(Color(.systemBackground))
.cornerRadius(16)
.shadow(radius: 10)
Expand Down Expand Up @@ -82,8 +84,14 @@ struct POSModalViewModifier<ModalContent: View>: ViewModifier {
}

extension View {
func posModal<ModalContent: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> ModalContent) -> some View {
func posModal<ModalContent: View>(isPresented: Binding<Bool>,
fixedWidth: Bool = true,
fixedHeight: Bool = true,
@ViewBuilder content: @escaping () -> ModalContent) -> some View {
self.modifier(
POSModalViewModifier(isPresented: isPresented, modalContent: content))
POSModalViewModifier(isPresented: isPresented,
modalContent: content,
fixedWidth: fixedWidth,
fixedHeight: fixedHeight))
}
}
2 changes: 2 additions & 0 deletions WooCommerce/Classes/POS/Utils/Font+WooCommercePOS.swift
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ import SwiftUI
extension Font {
static let posBody: Font = Font.system(size: UIFontMetrics.default.scaledValue(for: 24))
static let posTitle: Font = Font.largeTitle
static let posModalBody: Font = Font.system(size: UIFontMetrics.default.scaledValue(for: 24))
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are the same as posBody and posTitle TfaZ4LUkEwEGrxfnEFzvJj-fi-3385_18076

We have a task to clearly define all the fonts from specification and maybe we should do it sooner rather than later. For this PR I suggest using the existing font definitions.

static let posModalTitle: Font = Font.system(size: UIFontMetrics.default.scaledValue(for: 36), weight: .bold)
}
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ final class PointOfSaleDashboardViewModel: ObservableObject {
/// This boolean is used to determine if the whole totals/payments view is occupying the full screen (cart is not showed)
@Published var isTotalsViewFullScreen: Bool = false
@Published var isInitialLoading: Bool = false
@Published var showExitPOSModal: Bool = false

private var cancellables: Set<AnyCancellable> = []

Expand Down
4 changes: 4 additions & 0 deletions WooCommerce/WooCommerce.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -2381,6 +2381,7 @@
D8EE9698264D3CCB0033B2F9 /* LegacyReceiptViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = D8EE9697264D3CCB0033B2F9 /* LegacyReceiptViewModel.swift */; };
D8F01DD325DEDC1C00CE70BE /* StripeCardReaderIntegrationTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = D8F01DD225DEDC1C00CE70BE /* StripeCardReaderIntegrationTests.swift */; };
D8F82AC522AF903700B67E4B /* IconsTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = D8F82AC422AF903700B67E4B /* IconsTests.swift */; };
DA013F512C65125100D9A391 /* PointOfSaleExitPosAlertView.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA013F502C65125100D9A391 /* PointOfSaleExitPosAlertView.swift */; };
DA0DBE2F2C4FC61D00DF14C0 /* POSFloatingControlView.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA0DBE2E2C4FC61D00DF14C0 /* POSFloatingControlView.swift */; };
DA1D68C22C36F0980097859A /* PointOfSaleAssets.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA1D68C12C36F0980097859A /* PointOfSaleAssets.swift */; };
DA41043A2C247B6900E8456A /* POSOrderPreviewService.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA4104392C247B6900E8456A /* POSOrderPreviewService.swift */; };
Expand Down Expand Up @@ -5363,6 +5364,7 @@
D8F3A97E258865BD0085859B /* PasswordScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PasswordScreen.swift; sourceTree = "<group>"; };
D8F82AC422AF903700B67E4B /* IconsTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = IconsTests.swift; path = WooCommerceTests/Extensions/IconsTests.swift; sourceTree = SOURCE_ROOT; };
D8FBFF1622D4CC2F006E3336 /* docs */ = {isa = PBXFileReference; lastKnownFileType = folder; name = docs; path = ../docs; sourceTree = "<group>"; };
DA013F502C65125100D9A391 /* PointOfSaleExitPosAlertView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PointOfSaleExitPosAlertView.swift; sourceTree = "<group>"; };
DA0DBE2E2C4FC61D00DF14C0 /* POSFloatingControlView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSFloatingControlView.swift; sourceTree = "<group>"; };
DA1AE99A10B90748C7676E95 /* Pods-StoreWidgetsExtension.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StoreWidgetsExtension.debug.xcconfig"; path = "../Pods/Target Support Files/Pods-StoreWidgetsExtension/Pods-StoreWidgetsExtension.debug.xcconfig"; sourceTree = "<group>"; };
DA1D68C12C36F0980097859A /* PointOfSaleAssets.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = PointOfSaleAssets.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -6623,6 +6625,7 @@
026826B02BF59E170036F959 /* CardReaderConnection */,
026826A72BF59DF70036F959 /* PointOfSaleEntryPointView.swift */,
026826A52BF59DF60036F959 /* PointOfSaleDashboardView.swift */,
DA013F502C65125100D9A391 /* PointOfSaleExitPosAlertView.swift */,
DA0DBE2E2C4FC61D00DF14C0 /* POSFloatingControlView.swift */,
68C53CBD2C1FE59B00C6D80B /* ItemListView.swift */,
026826A32BF59DF60036F959 /* CartView.swift */,
Expand Down Expand Up @@ -15160,6 +15163,7 @@
B56DB3CA2049BFAA00D4AA8E /* AppDelegate.swift in Sources */,
451750B224470CD5004FDA65 /* EnhancedTextView.swift in Sources */,
02279586237A50C900787C63 /* AztecUnorderedListFormatBarCommand.swift in Sources */,
DA013F512C65125100D9A391 /* PointOfSaleExitPosAlertView.swift in Sources */,
B945F8862B0CE51A00B8281C /* AddCustomAmountPercentageViewModel.swift in Sources */,
E1E125B226EB8EE80068A9B0 /* UpdateProgressImage.swift in Sources */,
01D082402C5B9EAB007FE81F /* POSBackgroundAppearanceKey.swift in Sources */,
Expand Down