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.

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

[Woo POS][Design System] Updates from design review: skeleton item card view, cash view #15244

Merged
merged 4 commits into from
Feb 27, 2025
+90 −75
Merged

[Woo POS][Design System] Updates from design review: skeleton item card view, cash view #15244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e5a398
Update skeleton item card view to match the latest design.
jaclync Feb 24, 2025
43b7e7d
Update cash view background color to match the latest design.
jaclync Feb 24, 2025
1e15b50
Update cash view background color properly in `TotalsView` to extend …
jaclync Feb 24, 2025
01118d6
Remove any additional vertical padding in `TotalsView` for cash view,…
jaclync Feb 24, 2025
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
26 changes: 17 additions & 9 deletions WooCommerce/Classes/POS/Presentation/Item Selector/GhostItemCardView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,31 @@ import SwiftUI

struct GhostItemCardView: View {
@ScaledMetric private var scale: CGFloat = 1.0
@State private var viewWidth: CGFloat = 0.0

private var dimension: CGFloat {
min(Constants.productCardSize * scale, Constants.maximumProductCardSize)
}

var body: some View {
HStack(spacing: Constants.cardSpacing) {
Spacer()
.frame(width: dimension, height: dimension)
HStack(alignment: .center, spacing: Constants.cardSpacing) {
Rectangle()
.foregroundColor(.posOnSurfaceVariantLowest)
.frame(height: Layout.placeholderHeight * scale)
.cornerRadius(Layout.cornerRadius)
.padding(.horizontal, Constants.horizontalTextPadding)
Spacer()
.frame(width: dimension, height: dimension)
VStack(alignment: .leading) {
Rectangle()
.frame(width: viewWidth * 0.5, height: Layout.placeholderHeight * scale)
.cornerRadius(Layout.cornerRadius)
Rectangle()
.frame(width: viewWidth * 0.1, height: Layout.placeholderHeight * scale)
.cornerRadius(Layout.cornerRadius)
}
.padding(.horizontal, Constants.horizontalTextPadding)
Spacer()
}
.measureWidth { width in
viewWidth = width
}
.foregroundColor(.posOnSurfaceVariantLowest)
.shimmering()
.frame(maxWidth: .infinity, idealHeight: dimension)
.background(Color.posSurfaceBright)
Expand All @@ -30,7 +38,7 @@ private extension GhostItemCardView {
typealias Constants = PointOfSaleItemListCardConstants

enum Layout {
static let placeholderHeight: CGFloat = 36
static let placeholderHeight: CGFloat = 32
static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
}
}
Expand Down
133 changes: 70 additions & 63 deletions WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import WooFoundation
@available(iOS 17.0, *)
struct PointOfSaleCollectCashView: View {
@Environment(\.dynamicTypeSize) var dynamicTypeSize
@Environment(\.floatingControlAreaSize) private var floatingControlAreaSize: CGSize
@Environment(PointOfSaleAggregateModel.self) private var posModel
@FocusState private var isTextFieldFocused: Bool

Expand All @@ -31,80 +32,85 @@ struct PointOfSaleCollectCashView: View {
allowNegativeNumber: false)

var body: some View {
ScrollView {
VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) {
POSPageHeaderView(title: Localization.backNavigationTitle,
subtitle: formattedOrderTotal,
backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled,
action: {
Task { @MainActor in
await posModel.cancelCashPayment()
isTextFieldFocused = false
}
}))

GeometryReader { geometry in
ScrollView {
VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) {
Spacer()

VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.xSmall)) {
FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos)
.focused($isTextFieldFocused)
.dynamicTypeSize(...DynamicTypeSize.accessibility1)
.onSubmit {
Task { @MainActor in
await submitCashAmount()
POSPageHeaderView(title: Localization.backNavigationTitle,
subtitle: formattedOrderTotal,
backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled,
action: {
Task { @MainActor in
await posModel.cancelCashPayment()
isTextFieldFocused = false
}
}))

VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) {
Spacer()

VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.xSmall)) {
FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos)
.focused($isTextFieldFocused)
.dynamicTypeSize(...DynamicTypeSize.accessibility1)
.onSubmit {
Task { @MainActor in
await submitCashAmount()
}
}
.onChange(of: textFieldViewModel.amount) { newValue in
textFieldAmountInput = newValue
updateChangeDueMessage()
}
}
.onChange(of: textFieldViewModel.amount) { newValue in
textFieldAmountInput = newValue
updateChangeDueMessage()
}

if let changeDue = changeDueMessage {
Text(changeDue)
.font(.posBodySmallRegular())
.foregroundColor(.posOnSurfaceVariantLowest)
}
if let changeDue = changeDueMessage {
Text(changeDue)
.font(.posBodySmallRegular())
.foregroundColor(.posOnSurfaceVariantLowest)
}

if let errorMessage = errorMessage {
Text(errorMessage)
.font(.posBodySmallRegular())
.foregroundColor(.posError)
if let errorMessage = errorMessage {
Text(errorMessage)
.font(.posBodySmallRegular())
.foregroundColor(.posError)
}
}
}

Spacer()
Spacer()

Button(action: {
Task { @MainActor in
await submitCashAmount()
Button(action: {
Task { @MainActor in
await submitCashAmount()
}
}, label: {
Text(Localization.markPaymentCompletedButtonTitle)
})
.measureFrame {
buttonFrame = $0
}
}, label: {
Text(Localization.markPaymentCompletedButtonTitle)
})
.measureFrame {
buttonFrame = $0
.buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
.frame(maxWidth: .infinity)
.dynamicTypeSize(...DynamicTypeSize.accessibility1)
.disabled(isLoading)
}
.buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
.frame(maxWidth: .infinity)
.dynamicTypeSize(...DynamicTypeSize.accessibility1)
.disabled(isLoading)
.padding([.horizontal])
.padding(.bottom, max(keyboardFrame.height - geometry.safeAreaInsets.bottom,
floatingControlAreaSize.height) + Constants.bottomPadding
)
}
.padding([.horizontal])
.padding(.bottom, keyboardFrame.height)
}
.background(backgroundColor)
.animation(.easeInOut, value: errorMessage)
.animation(.easeInOut, value: changeDueMessage)
.onChange(of: textFieldAmountInput) { _ in
errorMessage = nil
}
.onReceive(Publishers.keyboardFrame) {
keyboardFrame = $0
shouldMinimizePadding = $0.intersects(buttonFrame)
.frame(minHeight: geometry.size.height)
.animation(.easeInOut, value: errorMessage)
.animation(.easeInOut, value: changeDueMessage)
.onChange(of: textFieldAmountInput) { _ in
errorMessage = nil
}
.onReceive(Publishers.keyboardFrame) {
keyboardFrame = $0
shouldMinimizePadding = $0.intersects(buttonFrame)
}
.animation(.default, value: shouldMinimizePadding)
}
.animation(.default, value: shouldMinimizePadding)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}

private func markComplete() async throws {
Expand Down Expand Up @@ -148,6 +154,7 @@ private extension PointOfSaleCollectCashView {
private extension PointOfSaleCollectCashView {
enum Constants {
static let minimumPadding: CGFloat = POSSpacing.xSmall
static let bottomPadding: CGFloat = POSPadding.medium
}

private func conditionalPadding(_ padding: CGFloat) -> CGFloat {
Expand All @@ -159,7 +166,7 @@ private extension PointOfSaleCollectCashView {
}

private var backgroundColor: Color {
.posSurface
.posSurfaceBright
}

enum Localization {
Expand Down
4 changes: 2 additions & 2 deletions WooCommerce/Classes/POS/Presentation/TotalsView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ struct TotalsView: View {
}
.transition(.opacity)
.accessibilityShowsLargeContentViewer()
.background(backgroundColor)
.background(backgroundColor.ignoresSafeArea(.all))
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
.minimumScaleFactor(isShowingTotalsFields ? 0.5 : 1)
.geometryGroup()
Expand Down Expand Up @@ -95,7 +95,7 @@ struct TotalsView: View {
case .card(.processingPayment):
.posPrimary
case .cash(.collectingCash):
.posSurface
.posSurfaceBright
default:
.clear
}
Expand Down
2 changes: 1 addition & 1 deletion WooCommerce/Classes/POS/ViewHelpers/TotalsViewHelper.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ final class TotalsViewHelper {

func shouldApplyPadding(paymentState: PointOfSalePaymentState) -> Bool {
switch paymentState {
case .card(.cardPaymentSuccessful), .cash(.paymentSuccess):
case .card(.cardPaymentSuccessful), .cash(.paymentSuccess), .cash(.collectingCash):
return false
default:
return true
Expand Down
Loading