From 297ad1dec5184875ca8d85760dbd2104d920a311 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 13:30:22 +0100 Subject: [PATCH 01/46] Define POSPadding struct --- .../Presentation/POSReceiptEligibilityBanner.swift | 4 ++-- .../POS/Presentation/PointOfSaleDashboardView.swift | 2 +- .../Reusable Views/Buttons/POSButtonStyle.swift | 4 ++-- .../Reusable Views/POSConnectivityView.swift | 4 ++-- .../Reusable Views/POSHeaderLayoutConstants.swift | 4 ++-- .../Presentation/Reusable Views/POSNoticeView.swift | 4 ++-- .../Reusable Views/POSSendReceiptView.swift | 2 +- WooCommerce/Classes/POS/Utils/POSFontStyle.swift | 11 +++++++++++ 8 files changed, 23 insertions(+), 12 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift index f6cea917eca..8d8de87ac48 100644 --- a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift +++ b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift @@ -31,8 +31,8 @@ private extension POSReceiptEligibilityBanner { static let elementSpacing: CGFloat = 8 static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value static let imagesize: CGFloat = 40 - static let imagePadding: CGFloat = 4 - static let bannerPadding: CGFloat = 16 + static let imagePadding: CGFloat = POSPadding.xSmall + static let bannerPadding: CGFloat = POSPadding.medium } enum Localization { diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift index 43ff6172b1c..4779acd2df3 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift @@ -167,7 +167,7 @@ private extension PointOfSaleDashboardView { // For the moment we're just considering landscape for the POS mode // https://github.com/woocommerce/woocommerce-ios/issues/13251 static let cartWidth: CGFloat = 0.35 - static let floatingControlBottomPadding: CGFloat = 16 + static let floatingControlBottomPadding: CGFloat = POSPadding.medium static let floatingControlHorizontalOffset: CGFloat = 16 static let floatingControlVerticalOffset: CGFloat = 0 static let exitPOSSheetMaxWidth: CGFloat = 900.0 diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift index 902f924717d..ce29f081f31 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift @@ -148,9 +148,9 @@ private extension POSButtonSize { var padding: (vertical: CGFloat, horizontal: CGFloat) { switch self { case .normal: - (vertical: 24, horizontal: 24) + (vertical: POSPadding.large, horizontal: POSPadding.large) case .extraSmall: - (vertical: 8, horizontal: 16) + (vertical: POSPadding.small, horizontal: POSPadding.medium) } } diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift index 9a258285e53..9da859e5f07 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift @@ -54,8 +54,8 @@ private extension POSConnectivityView { static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value static let height: CGFloat = 64 static let spacing: CGFloat = 16 - static let horizontalPadding: CGFloat = 24 - static let verticalPadding: CGFloat = 8 + static let horizontalPadding: CGFloat = POSPadding.large + static let verticalPadding: CGFloat = POSPadding.small static let connectivityAnimationDuration: CGFloat = 1.0 } diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSHeaderLayoutConstants.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSHeaderLayoutConstants.swift index 568609d73ab..62b0cbee0f7 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSHeaderLayoutConstants.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSHeaderLayoutConstants.swift @@ -1,6 +1,6 @@ import Foundation enum POSHeaderLayoutConstants { - static let sectionVerticalPadding: CGFloat = 24 - static let sectionHorizontalPadding: CGFloat = 16 + static let sectionVerticalPadding: CGFloat = POSPadding.large + static let sectionHorizontalPadding: CGFloat = POSPadding.medium } diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift index fbf5fde19cd..f8d339ea778 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift @@ -87,9 +87,9 @@ private enum Constants { static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value static let textSpacing: CGFloat = 4 static let titleSpacing: CGFloat = 8 - static let iconHorizontalPadding: CGFloat = 8 + static let iconHorizontalPadding: CGFloat = POSPadding.small static let dismissIconPadding: CGFloat = 6 - static let padding: CGFloat = 16 + static let padding: CGFloat = POSPadding.medium } private enum Localization { diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift index e0a8bb2c565..09a0bcf292b 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift @@ -100,7 +100,7 @@ struct POSSendReceiptView: View { private extension POSSendReceiptView { enum Constants { static let buttonSpacing: CGFloat = 12 - static let errorMessagePadding: CGFloat = 8 + static let errorMessagePadding: CGFloat = POSPadding.small } private func conditionalPadding(_ padding: CGFloat) -> CGFloat { diff --git a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift index 1a09cceb833..160d154fbcc 100644 --- a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift +++ b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift @@ -1,5 +1,16 @@ import SwiftUI +/// iOS padding style definitions for POS +/// 1qcjzXitBHU7xPnpCOWnNM-fi-21_7450 +struct POSPadding { + static let none: CGFloat = 0 + static let xSmall: CGFloat = 4 + static let small: CGFloat = 8 + static let medium: CGFloat = 16 + static let large: CGFloat = 24 + static let xLarge: CGFloat = 32 +} + /// iOS type style definitions for POS /// 1qcjzXitBHU7xPnpCOWnNM-fi-23_7310 enum POSFontStyle { From cc4a5338277268ed0ffd72ce4ccc5eec62ee9700 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 13:36:57 +0100 Subject: [PATCH 02/46] Define POSSpacing --- .../PointOfSaleReaderConnectionModalLayout.swift | 8 ++++---- .../UI States/PointOfSaleLoadingView.swift | 2 +- .../Presentation/POSReceiptEligibilityBanner.swift | 2 +- .../Reusable Views/Buttons/POSButtonStyle.swift | 8 ++++---- .../Reusable Views/POSConnectivityView.swift | 2 +- .../Presentation/Reusable Views/POSNoticeView.swift | 4 ++-- WooCommerce/Classes/POS/Utils/POSFontStyle.swift | 11 +++++++++++ 7 files changed, 24 insertions(+), 13 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift index cb2f6f1d333..8986e0c581c 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift @@ -1,9 +1,9 @@ import Foundation enum PointOfSaleReaderConnectionModalLayout { - static var contentButtonSpacing: CGFloat = 24 - static var imageTextSpacing: CGFloat = 24 - static var textSpacing: CGFloat = 16 - static var buttonSpacing: CGFloat = 24 static var contentPadding: CGFloat = 40 + static var contentButtonSpacing: CGFloat = POSSpacing.large + static var imageTextSpacing: CGFloat = POSSpacing.large + static var textSpacing: CGFloat = POSSpacing.medium + static var buttonSpacing: CGFloat = POSSpacing.large } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift index 7f31f9af20f..fe7572de53b 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift @@ -38,7 +38,7 @@ private extension PointOfSaleLoadingView { private extension PointOfSaleLoadingView { enum Layout { - static let textSpacing: CGFloat = 16 + static let textSpacing: CGFloat = POSSpacing.medium static let progressViewSpacing: CGFloat = 72 } } diff --git a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift index 8d8de87ac48..b54854e64fd 100644 --- a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift +++ b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift @@ -28,7 +28,7 @@ struct POSReceiptEligibilityBanner: View { private extension POSReceiptEligibilityBanner { enum Constants { - static let elementSpacing: CGFloat = 8 + static let elementSpacing: CGFloat = POSSpacing.small static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value static let imagesize: CGFloat = 40 static let imagePadding: CGFloat = POSPadding.xSmall diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift index ce29f081f31..1d9b1c00418 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift @@ -193,7 +193,7 @@ private extension POSButtonSize { struct POSButtonStyle_Previews: View { var body: some View { ScrollView { - VStack(alignment: .leading, spacing: 32) { + VStack(alignment: .leading, spacing: POSSpacing.xLarge) { previewSection(title: "Filled Buttons - Normal", variant: .filled, size: .normal) @@ -211,7 +211,7 @@ struct POSButtonStyle_Previews: View { loadingPreviewSection(title: "Loading Buttons - Extra Small", size: .extraSmall) // Example with long text - VStack(alignment: .leading, spacing: 16) { + VStack(alignment: .leading, spacing: POSSpacing.medium) { Text("Long Text Examples") .font(.headline) @@ -227,7 +227,7 @@ struct POSButtonStyle_Previews: View { } private func previewSection(title: String, variant: POSButtonVariant, size: POSButtonSize) -> some View { - VStack(alignment: .leading, spacing: 16) { + VStack(alignment: .leading, spacing: POSSpacing.medium) { Text(title) .font(.headline) @@ -251,7 +251,7 @@ struct POSButtonStyle_Previews: View { } private func loadingPreviewSection(title: String, size: POSButtonSize) -> some View { - VStack(alignment: .leading, spacing: 16) { + VStack(alignment: .leading, spacing: POSSpacing.medium) { Text(title) .font(.headline) diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift index 9da859e5f07..7ea2ad24b1b 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift @@ -53,7 +53,7 @@ private extension POSConnectivityView { enum Constants { static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value static let height: CGFloat = 64 - static let spacing: CGFloat = 16 + static let spacing: CGFloat = POSSpacing.medium static let horizontalPadding: CGFloat = POSPadding.large static let verticalPadding: CGFloat = POSPadding.small static let connectivityAnimationDuration: CGFloat = 1.0 diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift index f8d339ea778..bfefa7a173f 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift @@ -85,8 +85,8 @@ private enum Constants { static let titleFont: POSFontStyle = .posBodyLargeBold static let contentFont: POSFontStyle = .posBodySmallRegular() static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value - static let textSpacing: CGFloat = 4 - static let titleSpacing: CGFloat = 8 + static let textSpacing: CGFloat = POSSpacing.xSmall + static let titleSpacing: CGFloat = POSSpacing.small static let iconHorizontalPadding: CGFloat = POSPadding.small static let dismissIconPadding: CGFloat = 6 static let padding: CGFloat = POSPadding.medium diff --git a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift index 160d154fbcc..7d61d0c1e83 100644 --- a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift +++ b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift @@ -1,5 +1,16 @@ import SwiftUI +/// iOS spacing style definitions for POS +/// 1qcjzXitBHU7xPnpCOWnNM-fi-21_7403 +enum POSSpacing { + static let none: CGFloat = 0 + static let xSmall: CGFloat = 4 + static let small: CGFloat = 8 + static let medium: CGFloat = 16 + static let large: CGFloat = 24 + static let xLarge: CGFloat = 32 +} + /// iOS padding style definitions for POS /// 1qcjzXitBHU7xPnpCOWnNM-fi-21_7450 struct POSPadding { From 463464eed97dbb25327c2495ec77fb41206ff7d2 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 13:55:50 +0100 Subject: [PATCH 03/46] apply style to misc views --- ...esentPaymentFoundMultipleReadersView.swift | 19 ++++++++++++++----- .../PointOfSaleItemListErrorLayout.swift | 4 ++-- .../PointOfSaleUnsupportedWidthView.swift | 2 +- ...ymentDisplayReaderMessageMessageView.swift | 2 +- .../PointOfSaleCardPresentPaymentLayout.swift | 8 ++++---- ...ymentValidatingOrderErrorMessageView.swift | 2 +- .../PointOfSalePaymentSuccessView.swift | 4 ++-- ...eCardPresentPaymentCaptureFailedView.swift | 2 +- .../PointOfSaleItemListCardConstants.swift | 8 ++++---- ...PointOfSaleOrderSyncErrorMessageView.swift | 6 +++--- .../PointOfSaleCollectCashView.swift | 6 +++--- 11 files changed, 36 insertions(+), 27 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift index bbfc0c1f9bf..e79eff8cc3c 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift @@ -100,11 +100,20 @@ private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView { private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView { enum Layout { - static let padding: EdgeInsets = .init(top: 0, leading: 16, bottom: 0, trailing: 16) - static let headerPadding: EdgeInsets = .init(top: 20, leading: 4, bottom: 20, trailing: 4) - static let buttonPadding: EdgeInsets = .init(top: 16, leading: 0, bottom: 16, trailing: 0) - static let horizontalSpacing: CGFloat = 16 - static let rowVerticalPadding: CGFloat = 4 + static let padding: EdgeInsets = .init(top: POSPadding.none, + leading: POSPadding.medium, + bottom: POSPadding.none, + trailing: POSPadding.medium) + static let headerPadding: EdgeInsets = .init(top: 20, + leading: POSPadding.xSmall, + bottom: 20, + trailing: POSPadding.xSmall) + static let buttonPadding: EdgeInsets = .init(top: POSPadding.medium, + leading: POSPadding.none, + bottom: POSPadding.medium, + trailing: POSPadding.none) + static let horizontalSpacing: CGFloat = POSSpacing.medium + static let rowVerticalPadding: CGFloat = POSPadding.xSmall } } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorLayout.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorLayout.swift index 536cd5a2541..79959110f04 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorLayout.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorLayout.swift @@ -1,7 +1,7 @@ import Foundation enum PointOfSaleItemListErrorLayout { - static let headerSpacing: CGFloat = 16 + static let headerSpacing: CGFloat = POSSpacing.medium static let buttonWidth: CGFloat = 600 - static let verticalPadding: CGFloat = 16 + static let verticalPadding: CGFloat = POSPadding.medium } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleUnsupportedWidthView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleUnsupportedWidthView.swift index 9030cd0febb..ad89eb8658f 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleUnsupportedWidthView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleUnsupportedWidthView.swift @@ -26,7 +26,7 @@ struct PointOfSaleUnsupportedWidthView: View { .fixedSize(horizontal: false, vertical: true) .multilineTextAlignment(.center) } - .padding(.horizontal, 16) + .padding(.horizontal, POSPadding.medium) Spacer() } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift index d8d9cd49819..a393d823d35 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift @@ -34,7 +34,7 @@ struct PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView: View { private extension PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView { enum Layout { static let headerSpacing: CGFloat = 48 - static let textSpacing: CGFloat = 16 + static let textSpacing: CGFloat = POSSpacing.medium } } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift index f8041fa4a59..994f4bfc0ca 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift @@ -3,10 +3,10 @@ import Foundation enum PointOfSaleCardPresentPaymentLayout { static let headerSize: CGSize = .init(width: 156, height: 156) static let headerSpacing: CGFloat = 72 - static let imageAndTextSpacing: CGFloat = 24 - static let textAndButtonSpacing: CGFloat = 32 - static let textSpacing: CGFloat = 8 - static let buttonSpacing: CGFloat = 24 + static let imageAndTextSpacing: CGFloat = POSSpacing.large + static let textAndButtonSpacing: CGFloat = POSSpacing.xLarge + static let textSpacing: CGFloat = POSSpacing.small + static let buttonSpacing: CGFloat = POSSpacing.large static let errorIconSize: CGFloat = 64 static let largeErrorIconSize: CGFloat = 84 static let horizontalPadding: CGFloat = 40 diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift index 8ff8f4dc0e9..ab867c5b3df 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift @@ -8,7 +8,7 @@ struct PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView: View { @State private var width: CGFloat = 0 var body: some View { - VStack(alignment: .center, spacing: 0) { + VStack(alignment: .center, spacing: POSSpacing.none) { POSErrorExclamationMark() .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift index a59509e6a41..e1f8ae54e8a 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift @@ -64,7 +64,7 @@ struct PointOfSalePaymentSuccessView: View { PaymentsActionButtons(isShowingSendReceiptView: $isShowingSendReceiptView, isShowingReceiptNotEligibleBanner: $isShowingReceiptNotEligibleBanner) - .containerRelativeFrame(.horizontal, count: 2, span: 1, spacing: 0) + .containerRelativeFrame(.horizontal, count: 2, span: 1, spacing: POSSpacing.none) .frame(maxWidth: .infinity, alignment: .center) .offset(y: isViewLoaded ? 0 : -Constants.animationOffset) .opacity(isViewLoaded ? 1 : 0) @@ -113,7 +113,7 @@ private extension PointOfSalePaymentSuccessView { static let shadowRadius: CGFloat = 16 static let shadowSize: CGSize = .init(width: 0, height: 8) static let headerSpacing: CGFloat = 56 - static let textSpacing: CGFloat = 16 + static let textSpacing: CGFloat = POSSpacing.medium static let animationOffset: CGFloat = 100 } } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift index 3f6c14f59d9..b430e2d2621 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift @@ -4,7 +4,7 @@ struct PointOfSaleCardPresentPaymentCaptureFailedView: View { @Binding var isPresented: Bool var body: some View { - VStack(alignment: .center, spacing: 0) { + VStack(alignment: .center, spacing: POSSpacing.none) { POSErrorExclamationMark() .accessibilityAddTraits(.isHeader) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift index 47ebc97bdfd..079dce2edbf 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift @@ -4,14 +4,14 @@ import SwiftUI enum PointOfSaleItemListCardConstants { static let productCardSize: CGFloat = 112 static let maximumProductCardSize: CGFloat = PointOfSaleItemListCardConstants.productCardSize * 2 - static let cardSpacing: CGFloat = 0 static let textSpacing: CGFloat = 6 - static let horizontalTextPadding: CGFloat = 16 - static let verticalTextPadding: CGFloat = 8 + static let cardSpacing: CGFloat = POSSpacing.none + static let horizontalTextPadding: CGFloat = POSPadding.medium + static let verticalTextPadding: CGFloat = POSPadding.small static let itemTitleFont: POSFontStyle = .posBodyLargeBold static let itemDetailFont: POSFontStyle = .posBodyLargeRegular() static let accessoryButtonMaxWidth: CGFloat = 136 - static let accessoryButtonPadding: CGFloat = 16 + static let accessoryButtonPadding: CGFloat = POSPadding.medium static let backgroundColor: Color = .posSurfaceContainerLowest static let titleColor: Color = .posOnSurface static let detailColor: Color = .posOnSurfaceVariantHighest diff --git a/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift index 2cd3a52ba07..96c267447c0 100644 --- a/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift @@ -33,10 +33,10 @@ struct PointOfSaleOrderSyncErrorMessageView: View { private extension PointOfSaleOrderSyncErrorMessageView { enum Constants { - static let headerSpacing: CGFloat = 24 - static let textSpacing: CGFloat = 16 static let buttonSidePadding: CGFloat = 40 - static let buttonBottomPadding: CGFloat = 16 + static let headerSpacing: CGFloat = POSSpacing.large + static let textSpacing: CGFloat = POSSpacing.medium + static let buttonBottomPadding: CGFloat = POSPadding.medium } } diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift index 585869a8cf3..8d77484e874 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift @@ -132,9 +132,9 @@ private extension PointOfSaleCollectCashView { private extension PointOfSaleCollectCashView { enum Constants { static let buttonMinHeight: CGFloat = 32 - static let navigationButtonSpacing: CGFloat = 8 - static let navigationHeaderTopPadding: CGFloat = 8 - static let errorMessagePadding: CGFloat = 8 + static let navigationButtonSpacing: CGFloat = POSSpacing.small + static let navigationHeaderTopPadding: CGFloat = POSPadding.small + static let errorMessagePadding: CGFloat = POSPadding.small } private func conditionalPadding(_ padding: CGFloat) -> CGFloat { From ea67aec119192d3ae4bcc9b2e93ba1053be3e426 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 14:05:07 +0100 Subject: [PATCH 04/46] Add xxLarge case --- .../PointOfSaleReaderConnectionModalLayout.swift | 2 +- .../Reader Messages/PointOfSaleCardPresentPaymentLayout.swift | 2 +- .../PointOfSaleCardPresentPaymentCaptureFailedView.swift | 2 +- .../Order Messages/PointOfSaleOrderSyncErrorMessageView.swift | 2 +- .../Classes/POS/Presentation/POSReceiptEligibilityBanner.swift | 2 +- WooCommerce/Classes/POS/Utils/POSFontStyle.swift | 2 ++ 6 files changed, 7 insertions(+), 5 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift index 8986e0c581c..0501fe9db13 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift @@ -1,9 +1,9 @@ import Foundation enum PointOfSaleReaderConnectionModalLayout { - static var contentPadding: CGFloat = 40 static var contentButtonSpacing: CGFloat = POSSpacing.large static var imageTextSpacing: CGFloat = POSSpacing.large static var textSpacing: CGFloat = POSSpacing.medium static var buttonSpacing: CGFloat = POSSpacing.large + static var contentPadding: CGFloat = POSPadding.xxLarge } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift index 994f4bfc0ca..b2ebac017ae 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift @@ -9,6 +9,6 @@ enum PointOfSaleCardPresentPaymentLayout { static let buttonSpacing: CGFloat = POSSpacing.large static let errorIconSize: CGFloat = 64 static let largeErrorIconSize: CGFloat = 84 - static let horizontalPadding: CGFloat = 40 + static let horizontalPadding: CGFloat = POSPadding.xxLarge static let errorContentMaxWidth: CGFloat = 604 } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift index b430e2d2621..d1b7a7b8bf9 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift @@ -42,7 +42,7 @@ struct PointOfSaleCardPresentPaymentCaptureFailedView: View { private extension PointOfSaleCardPresentPaymentCaptureFailedView { enum Layout { static let maxWidth: CGFloat = 896 - static let contentPadding: CGFloat = 40 + static let contentPadding: CGFloat = POSPadding.xxLarge } enum Localization { diff --git a/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift index 96c267447c0..715ebe7af78 100644 --- a/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift @@ -33,9 +33,9 @@ struct PointOfSaleOrderSyncErrorMessageView: View { private extension PointOfSaleOrderSyncErrorMessageView { enum Constants { - static let buttonSidePadding: CGFloat = 40 static let headerSpacing: CGFloat = POSSpacing.large static let textSpacing: CGFloat = POSSpacing.medium + static let buttonSidePadding: CGFloat = POSPadding.xxLarge static let buttonBottomPadding: CGFloat = POSPadding.medium } } diff --git a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift index b54854e64fd..7ebc74937ad 100644 --- a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift +++ b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift @@ -30,7 +30,7 @@ private extension POSReceiptEligibilityBanner { enum Constants { static let elementSpacing: CGFloat = POSSpacing.small static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value - static let imagesize: CGFloat = 40 + static let imagesize: CGFloat = POSPadding.xxLarge static let imagePadding: CGFloat = POSPadding.xSmall static let bannerPadding: CGFloat = POSPadding.medium } diff --git a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift index 7d61d0c1e83..a097561a2d2 100644 --- a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift +++ b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift @@ -9,6 +9,7 @@ enum POSSpacing { static let medium: CGFloat = 16 static let large: CGFloat = 24 static let xLarge: CGFloat = 32 + static let xxLarge: CGFloat = 40 } /// iOS padding style definitions for POS @@ -20,6 +21,7 @@ struct POSPadding { static let medium: CGFloat = 16 static let large: CGFloat = 24 static let xLarge: CGFloat = 32 + static let xxLarge: CGFloat = 40 } /// iOS type style definitions for POS From 01ac008b41b5a252ce3b53e9eac2f2e85fc4aadb Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 14:09:26 +0100 Subject: [PATCH 05/46] Extract styles to their own files --- .../PointOfSaleExitPosAlertView.swift | 2 +- .../Classes/POS/Utils/POSFontStyle.swift | 24 ------------------- .../Classes/POS/Utils/POSPadding.swift | 13 ++++++++++ .../Classes/POS/Utils/POSSpacing.swift | 13 ++++++++++ .../WooCommerce.xcodeproj/project.pbxproj | 8 +++++++ 5 files changed, 35 insertions(+), 25 deletions(-) create mode 100644 WooCommerce/Classes/POS/Utils/POSPadding.swift create mode 100644 WooCommerce/Classes/POS/Utils/POSSpacing.swift diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift index 65ecf1af938..a1becfd974e 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift @@ -42,7 +42,7 @@ 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 padding: CGFloat = POSPadding.xxLarge } enum Localization { diff --git a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift index a097561a2d2..1a09cceb833 100644 --- a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift +++ b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift @@ -1,29 +1,5 @@ import SwiftUI -/// iOS spacing style definitions for POS -/// 1qcjzXitBHU7xPnpCOWnNM-fi-21_7403 -enum POSSpacing { - static let none: CGFloat = 0 - static let xSmall: CGFloat = 4 - static let small: CGFloat = 8 - static let medium: CGFloat = 16 - static let large: CGFloat = 24 - static let xLarge: CGFloat = 32 - static let xxLarge: CGFloat = 40 -} - -/// iOS padding style definitions for POS -/// 1qcjzXitBHU7xPnpCOWnNM-fi-21_7450 -struct POSPadding { - static let none: CGFloat = 0 - static let xSmall: CGFloat = 4 - static let small: CGFloat = 8 - static let medium: CGFloat = 16 - static let large: CGFloat = 24 - static let xLarge: CGFloat = 32 - static let xxLarge: CGFloat = 40 -} - /// iOS type style definitions for POS /// 1qcjzXitBHU7xPnpCOWnNM-fi-23_7310 enum POSFontStyle { diff --git a/WooCommerce/Classes/POS/Utils/POSPadding.swift b/WooCommerce/Classes/POS/Utils/POSPadding.swift new file mode 100644 index 00000000000..64b586d43c6 --- /dev/null +++ b/WooCommerce/Classes/POS/Utils/POSPadding.swift @@ -0,0 +1,13 @@ +import SwiftUI + +/// iOS padding style definitions for POS +/// 1qcjzXitBHU7xPnpCOWnNM-fi-21_7450 +struct POSPadding { + static let none: CGFloat = 0 + static let xSmall: CGFloat = 4 + static let small: CGFloat = 8 + static let medium: CGFloat = 16 + static let large: CGFloat = 24 + static let xLarge: CGFloat = 32 + static let xxLarge: CGFloat = 40 +} diff --git a/WooCommerce/Classes/POS/Utils/POSSpacing.swift b/WooCommerce/Classes/POS/Utils/POSSpacing.swift new file mode 100644 index 00000000000..9acd2efe0e1 --- /dev/null +++ b/WooCommerce/Classes/POS/Utils/POSSpacing.swift @@ -0,0 +1,13 @@ +import SwiftUI + +/// iOS spacing style definitions for POS +/// 1qcjzXitBHU7xPnpCOWnNM-fi-21_7403 +enum POSSpacing { + static let none: CGFloat = 0 + static let xSmall: CGFloat = 4 + static let small: CGFloat = 8 + static let medium: CGFloat = 16 + static let large: CGFloat = 24 + static let xLarge: CGFloat = 32 + static let xxLarge: CGFloat = 40 +} diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj index be52c617002..eaecabde9ac 100644 --- a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj +++ b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj @@ -1558,6 +1558,8 @@ 680BA59A2A4C377900F5559D /* UpgradeViewState.swift in Sources */ = {isa = PBXBuildFile; fileRef = 680BA5992A4C377900F5559D /* UpgradeViewState.swift */; }; 680E36B52BD8B9B900E8BCEA /* OrderSubscriptionTableViewCell.xib in Resources */ = {isa = PBXBuildFile; fileRef = 680E36B42BD8B9B900E8BCEA /* OrderSubscriptionTableViewCell.xib */; }; 680E36B72BD8C49F00E8BCEA /* OrderSubscriptionTableViewCellViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 680E36B62BD8C49F00E8BCEA /* OrderSubscriptionTableViewCellViewModel.swift */; }; + 681BB5FC2D676047008AF8BB /* POSSpacing.swift in Sources */ = {isa = PBXBuildFile; fileRef = 681BB5FB2D676043008AF8BB /* POSSpacing.swift */; }; + 681BB5FE2D676061008AF8BB /* POSPadding.swift in Sources */ = {isa = PBXBuildFile; fileRef = 681BB5FD2D676060008AF8BB /* POSPadding.swift */; }; 682210ED2909666600814E14 /* CustomerSearchUICommandTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 682210EC2909666600814E14 /* CustomerSearchUICommandTests.swift */; }; 6827140F28A3988300E6E3F6 /* DismissableNoticeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6827140E28A3988300E6E3F6 /* DismissableNoticeView.swift */; }; 6832C7CA26DA5C4500BA4088 /* LabeledTextViewTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6832C7C926DA5C4500BA4088 /* LabeledTextViewTableViewCell.swift */; }; @@ -4711,6 +4713,8 @@ 680BA5992A4C377900F5559D /* UpgradeViewState.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UpgradeViewState.swift; sourceTree = ""; }; 680E36B42BD8B9B900E8BCEA /* OrderSubscriptionTableViewCell.xib */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.xib; path = OrderSubscriptionTableViewCell.xib; sourceTree = ""; }; 680E36B62BD8C49F00E8BCEA /* OrderSubscriptionTableViewCellViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderSubscriptionTableViewCellViewModel.swift; sourceTree = ""; }; + 681BB5FB2D676043008AF8BB /* POSSpacing.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSSpacing.swift; sourceTree = ""; }; + 681BB5FD2D676060008AF8BB /* POSPadding.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSPadding.swift; sourceTree = ""; }; 682210EC2909666600814E14 /* CustomerSearchUICommandTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomerSearchUICommandTests.swift; sourceTree = ""; }; 6827140E28A3988300E6E3F6 /* DismissableNoticeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DismissableNoticeView.swift; sourceTree = ""; }; 6832C7C926DA5C4500BA4088 /* LabeledTextViewTableViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LabeledTextViewTableViewCell.swift; sourceTree = ""; }; @@ -7164,6 +7168,8 @@ 026826972BF59D9E0036F959 /* Utils */ = { isa = PBXGroup; children = ( + 681BB5FD2D676060008AF8BB /* POSPadding.swift */, + 681BB5FB2D676043008AF8BB /* POSSpacing.swift */, 68E4E8B42C0EF39D00CFA0C3 /* PreviewHelpers.swift */, DA4104392C247B6900E8456A /* PointOfSalePreviewOrderController.swift */, 01664F9D2C50E685007CB5DD /* POSFontStyle.swift */, @@ -15859,6 +15865,7 @@ CC770C8A27B1497700CE6ABC /* SearchHeader.swift in Sources */, 02BAB02724D13A6400F8B06E /* ProductVariationFormActionsFactory.swift in Sources */, 6837631C2C2E847D00AD51D0 /* CartViewHelper.swift in Sources */, + 681BB5FE2D676061008AF8BB /* POSPadding.swift in Sources */, 45CDAFAE2434CFCA00F83C22 /* ProductCatalogVisibilityViewController.swift in Sources */, D85B8333222FABD1002168F3 /* StatusListTableViewCell.swift in Sources */, DE2E8EB729547771002E4B14 /* ApplicationPasswordDisabledViewModel.swift in Sources */, @@ -15968,6 +15975,7 @@ 317F679826420E9D00BA2A7A /* CardReaderSettingsViewModelsOrderedList.swift in Sources */, DE279BA426E9C4DC002BA963 /* ShippingLabelPackagesForm.swift in Sources */, CE583A0421076C0100D73C1C /* NewNoteViewController.swift in Sources */, + 681BB5FC2D676047008AF8BB /* POSSpacing.swift in Sources */, 26AC0DD92941081500859074 /* AnalyticsHubCustomRangeData.swift in Sources */, 029106C22BE34A8600C2248B /* CollapsibleCustomerCard.swift in Sources */, CECC759723D607C900486676 /* OrderItemRefund+Woo.swift in Sources */, From b9c0b60d12a6e8c997c6276d84aa621b7b378b72 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 14:25:18 +0100 Subject: [PATCH 06/46] Vstack-Hstack updates --- ...fSaleCardPresentPaymentActivityIndicatingMessageView.swift | 2 +- ...PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift | 2 +- ...PointOfSaleCardPresentPaymentDisconnectedMessageView.swift | 2 +- .../PointOfSaleCardPresentPaymentErrorMessageView.swift | 2 +- ...SaleCardPresentPaymentIntentCreationErrorMessageView.swift | 2 +- ...OfSaleCardPresentPaymentNonRetryableErrorMessageView.swift | 2 +- .../Reader Messages/PointOfSalePaymentSuccessView.swift | 2 +- .../Classes/POS/Presentation/PointOfSaleCollectCashView.swift | 3 +-- .../POS/Presentation/PointOfSaleExitPosAlertView.swift | 2 +- .../POS/Presentation/Reusable Views/POSSendReceiptView.swift | 4 ++-- 10 files changed, 11 insertions(+), 12 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift index c2b9373c1a0..0410cfb76a7 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift @@ -34,7 +34,7 @@ struct PointOfSaleCardPresentPaymentActivityIndicatingMessageView: View { private extension PointOfSaleCardPresentPaymentActivityIndicatingMessageView { enum Constants { static let headerDimension: CGFloat = 160 - static let imageAndTextSpacing: CGFloat = 32 + static let imageAndTextSpacing: CGFloat = POSSpacing.xLarge } } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift index 401b000969c..9892c319b0d 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift @@ -12,7 +12,7 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View { } var body: some View { - VStack(alignment: .center, spacing: 0) { + VStack(alignment: .center, spacing: POSSpacing.none) { POSErrorXMark() .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift index 9f74295f1b2..4d2d0fec1c5 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift @@ -11,7 +11,7 @@ struct PointOfSaleCardPresentPaymentReaderDisconnectedMessageView: View { } var body: some View { - VStack(alignment: .center, spacing: 0) { + VStack(alignment: .center, spacing: POSSpacing.none) { Image(decorative: PointOfSaleAssets.readerDisconnected.imageName) Spacer() diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift index 997558e8db9..0f56fe9f2dc 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift @@ -7,7 +7,7 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View { @State private var width: CGFloat = 0 var body: some View { - VStack(alignment: .center, spacing: 0) { + VStack(alignment: .center, spacing: POSSpacing.none) { POSErrorXMark() .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift index 6c082592c8a..7d363dbfc55 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift @@ -7,7 +7,7 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View { @State private var width: CGFloat = 0 var body: some View { - VStack(alignment: .center, spacing: 0) { + VStack(alignment: .center, spacing: POSSpacing.none) { POSErrorXMark() .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift index 0bb6899dbfa..7c7338ad7c9 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift @@ -7,7 +7,7 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View { @State private var width: CGFloat = 0 var body: some View { - VStack(alignment: .center, spacing: 0) { + VStack(alignment: .center, spacing: POSSpacing.none) { POSErrorXMark() .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift index e1f8ae54e8a..9d52b64fb6b 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift @@ -23,7 +23,7 @@ struct PointOfSalePaymentSuccessView: View { successView Spacer() } - .padding([.leading, .trailing], dynamicTypeSize.isAccessibilitySize ? nil : 8) + .padding([.leading, .trailing], dynamicTypeSize.isAccessibilitySize ? nil : POSPadding.small) .background(Color.posSurfaceBright) } } diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift index 8d77484e874..5a4c75768ba 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift @@ -131,14 +131,13 @@ private extension PointOfSaleCollectCashView { @available(iOS 17.0, *) private extension PointOfSaleCollectCashView { enum Constants { - static let buttonMinHeight: CGFloat = 32 static let navigationButtonSpacing: CGFloat = POSSpacing.small static let navigationHeaderTopPadding: CGFloat = POSPadding.small static let errorMessagePadding: CGFloat = POSPadding.small } private func conditionalPadding(_ padding: CGFloat) -> CGFloat { - dynamicTypeSize.isAccessibilitySize ? 0 : padding + dynamicTypeSize.isAccessibilitySize ? POSPadding.none : padding } private var backgroundColor: Color { diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift index a1becfd974e..f23401bbe24 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift @@ -9,7 +9,7 @@ struct PointOfSaleExitPosAlertView: View { } var body: some View { - VStack(spacing: 0 ) { + VStack(spacing: POSSpacing.none) { HStack { Spacer() Button { diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift index 09a0bcf292b..983dde1a97e 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift @@ -17,7 +17,7 @@ struct POSSendReceiptView: View { } var body: some View { - VStack(alignment: .center, spacing: conditionalPadding(8)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.small)) { POSPageHeaderView(title: Localization.emailReceiptNavigationText, backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled, action: { @@ -27,7 +27,7 @@ struct POSSendReceiptView: View { } })) - VStack(alignment: .center, spacing: conditionalPadding(8)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.small)) { TextField("", text: $textFieldInput, prompt: Text(Localization.textfieldPlaceholder).foregroundColor(.posOnDisabledContainer)) From f14d59f46e3d0ffe46ecc95bb1eaaeee20f8a36f Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 14:51:20 +0100 Subject: [PATCH 07/46] Adjust FoundMultipleReadersView headerPadding We have no design for the multiple readers view, reduced the top-bottom padding a bit for consistency. --- ...tOfSaleCardPresentPaymentFoundMultipleReadersView.swift | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift index e79eff8cc3c..a249c8cdbe6 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift @@ -104,9 +104,9 @@ private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView { leading: POSPadding.medium, bottom: POSPadding.none, trailing: POSPadding.medium) - static let headerPadding: EdgeInsets = .init(top: 20, + static let headerPadding: EdgeInsets = .init(top: POSPadding.medium, leading: POSPadding.xSmall, - bottom: 20, + bottom: POSPadding.medium, trailing: POSPadding.xSmall) static let buttonPadding: EdgeInsets = .init(top: POSPadding.medium, leading: POSPadding.none, @@ -118,10 +118,9 @@ private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView { } #Preview { - @Namespace var namespace return PointOfSaleCardPresentPaymentFoundMultipleReadersView( viewModel: .init(readerIDs: ["Reader 1", "Reader 2"], selectionHandler: { _ in }), - animation: .init(namespace: namespace) + animation: .init(namespace: Namespace().wrappedValue) ) } From f875c8797e6182bb3f7ed74adc9de6500c4734d3 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 15:29:36 +0100 Subject: [PATCH 08/46] update PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView --- ...entPaymentDisplayReaderMessageMessageView.swift | 14 +++----------- ...leCardPresentPaymentProcessingMessageView.swift | 3 +-- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift index a393d823d35..6ff5ea947df 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift @@ -6,14 +6,14 @@ struct PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView: View { @Environment(\.dynamicTypeSize) private var dynamicTypeSize var body: some View { - VStack(alignment: .center, spacing: Layout.headerSpacing) { + VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.imageAndTextSpacing) { ProgressView() .progressViewStyle(CardWaveProgressViewStyle()) .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position) .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) - VStack(alignment: .center, spacing: Layout.textSpacing) { + VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.textSpacing) { Text(viewModel.title) .foregroundColor(.posOnPrimary) .font(.posBodyLargeRegular()) @@ -31,19 +31,11 @@ struct PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView: View { } } -private extension PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView { - enum Layout { - static let headerSpacing: CGFloat = 48 - static let textSpacing: CGFloat = POSSpacing.medium - } -} - #Preview { - @Namespace var namespace return PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView( viewModel: PointOfSaleCardPresentPaymentDisplayReaderMessageMessageViewModel( message: "Remove card"), - animation: .init(namespace: namespace) + animation: .init(namespace: Namespace().wrappedValue) ) .background(Color.posPrimary) } diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift index a3056944e7c..141456585b1 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift @@ -32,9 +32,8 @@ struct PointOfSaleCardPresentPaymentProcessingMessageView: View { } #Preview { - @Namespace var namespace return PointOfSaleCardPresentPaymentProcessingMessageView( viewModel: PointOfSaleCardPresentPaymentProcessingMessageViewModel(), - animation: .init(namespace: namespace) + animation: .init(namespace: Namespace().wrappedValue) ) } From 5510e49179e2d0b5f21adae6a347b5a4c9f721e2 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 15:35:29 +0100 Subject: [PATCH 09/46] Update PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView --- ...SaleCardPresentPaymentTapSwipeInsertCardMessageView.swift | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift index d7828b49a3a..eca924a69c6 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift @@ -33,16 +33,15 @@ struct PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView: View { private extension PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView { enum Constants { - static let imageAndTextSpacing: CGFloat = 36 + static let imageAndTextSpacing: CGFloat = POSSpacing.xLarge } } #Preview { - @Namespace var namespace return PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView( viewModel: PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageViewModel( inputMethods: [.tap, .insert] ), - animation: .init(namespace: namespace) + animation: .init(namespace: Namespace().wrappedValue) ) } From c39c730ac5833a3e496406f0189aa98c0901f9c2 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 15:39:50 +0100 Subject: [PATCH 10/46] update cash view conditional padding --- .../Classes/POS/Presentation/PointOfSaleCollectCashView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift index 5a4c75768ba..67a81256b69 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift @@ -38,7 +38,7 @@ struct PointOfSaleCollectCashView: View { })) VStack(alignment: .center, spacing: conditionalPadding(62)) { - VStack(alignment: .center, spacing: conditionalPadding(4)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xSmall)) { FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos) .focused($isTextFieldFocused) .dynamicTypeSize(...DynamicTypeSize.accessibility1) From d6dffb9a69162d3f7c5e6b175445267115e89e2e Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 15:40:54 +0100 Subject: [PATCH 11/46] clean up POSSendReceiptView --- .../Presentation/Reusable Views/POSSendReceiptView.swift | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift index 983dde1a97e..caaf4aa48ef 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift @@ -49,7 +49,7 @@ struct POSSendReceiptView: View { Text(errorMessage) .font(POSFontStyle.posBodySmallRegular()) .foregroundColor(.posError) - .padding(.bottom, Constants.errorMessagePadding) + .padding(.bottom, POSPadding.small) } Button(action: { @@ -98,11 +98,6 @@ struct POSSendReceiptView: View { @available(iOS 17.0, *) private extension POSSendReceiptView { - enum Constants { - static let buttonSpacing: CGFloat = 12 - static let errorMessagePadding: CGFloat = POSPadding.small - } - private func conditionalPadding(_ padding: CGFloat) -> CGFloat { if dynamicTypeSize.isAccessibilitySize { return 0 From 6f78e6df9e68990011c484bf16d81222376edc33 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 15:46:31 +0100 Subject: [PATCH 12/46] remove unused --- .../Reader Messages/PointOfSaleCardPresentPaymentLayout.swift | 1 - 1 file changed, 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift index b2ebac017ae..215f631e148 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift @@ -2,7 +2,6 @@ import Foundation enum PointOfSaleCardPresentPaymentLayout { static let headerSize: CGSize = .init(width: 156, height: 156) - static let headerSpacing: CGFloat = 72 static let imageAndTextSpacing: CGFloat = POSSpacing.large static let textAndButtonSpacing: CGFloat = POSSpacing.xLarge static let textSpacing: CGFloat = POSSpacing.small From a530615d6b2604fd7c0a3fdafffc6a4933bca209 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Thu, 20 Feb 2025 16:06:14 +0100 Subject: [PATCH 13/46] Update Vstack text spacing in item card as xSmall From 1qcjzXitBHU7xPnpCOWnNM/DS-POS?-fi-47-19437&t=B4lkvzVJVJrbmyw3-0 these use gap: spacing-xsmall --- .../POS/Presentation/Item Selector/ItemListErrorCardView.swift | 2 +- .../POS/Presentation/Item Selector/ParentProductCardView.swift | 2 +- .../Item Selector/PointOfSaleItemListCardConstants.swift | 1 - .../POS/Presentation/Item Selector/SimpleProductCardView.swift | 2 +- .../POS/Presentation/Item Selector/VariationCardView.swift | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift index 2fe3615428d..66497775941 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift @@ -12,7 +12,7 @@ struct ItemListErrorCardView: View { .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize), height: Constants.productCardSize * scale) - VStack(alignment: .leading, spacing: Constants.textSpacing) { + VStack(alignment: .leading, spacing: POSSpacing.xSmall) { Text(errorState.title) .lineLimit(2) .foregroundStyle(Color.posOnSurface) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift index f08e3684b60..0d52973d3cd 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift @@ -25,7 +25,7 @@ struct ParentProductCardView: View { scale: 1) .frame(width: dimension, height: dimension) - VStack(alignment: .leading, spacing: Constants.textSpacing) { + VStack(alignment: .leading, spacing: POSSpacing.xSmall) { Text(name) .lineLimit(2) .foregroundStyle(Constants.titleColor) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift index 079dce2edbf..d724520b7f0 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift @@ -4,7 +4,6 @@ import SwiftUI enum PointOfSaleItemListCardConstants { static let productCardSize: CGFloat = 112 static let maximumProductCardSize: CGFloat = PointOfSaleItemListCardConstants.productCardSize * 2 - static let textSpacing: CGFloat = 6 static let cardSpacing: CGFloat = POSSpacing.none static let horizontalTextPadding: CGFloat = POSPadding.medium static let verticalTextPadding: CGFloat = POSPadding.small diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift index fc215eae048..7a197cd581e 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift @@ -22,7 +22,7 @@ struct SimpleProductCardView: View { scale: 1) .frame(width: dimension, height: dimension) - VStack(alignment: .leading, spacing: Constants.textSpacing) { + VStack(alignment: .leading, spacing: POSSpacing.xSmall) { Text(product.name) .lineLimit(2) .foregroundStyle(Constants.titleColor) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift index a4459d8d226..917a2db574e 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift @@ -21,7 +21,7 @@ struct VariationCardView: View { scale: 1) .frame(width: dimension, height: dimension) - VStack(alignment: .leading, spacing: Constants.textSpacing) { + VStack(alignment: .leading, spacing: POSSpacing.xSmall) { Text(variation.name) .lineLimit(2) .foregroundStyle(Constants.titleColor) From 74acbf8a3a88dc364476d526b844af85240818d0 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:32:24 +0200 Subject: [PATCH 14/46] Use POS Design System Constants in CardReaderConnectionStatusView --- .../CardReaderConnectionStatusView.swift | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift index b51349b6148..188b4166fd3 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift @@ -115,16 +115,16 @@ private extension CardReaderConnectionStatusView { @available(iOS 17.0, *) private extension CardReaderConnectionStatusView { enum Constants { - static let buttonImageAndTextSpacing: CGFloat = 16 + static let buttonImageAndTextSpacing: CGFloat = POSSpacing.medium static let imageDimension: CGFloat = 14 static let progressIndicatorDimension: CGFloat = 10 static let progressIndicatorLineWidth: CGFloat = 2 static let font = POSFontStyle.posBodyMediumRegular() - static let horizontalPadding: CGFloat = 24 - static let disconnectedBorderAndContentSpacing: CGFloat = 16 + static let horizontalPadding: CGFloat = POSPadding.large + static let disconnectedBorderAndContentSpacing: CGFloat = POSSpacing.medium static let disconnectedBorderCornerRadius: CGFloat = POSCornerRadiusStyle.small.value static let disconnectedBorderWidth: CGFloat = 2 - static let disconnectedBorderInset: CGFloat = 8 + static let disconnectedBorderInset: CGFloat = POSSpacing.small } } From b98b108a8c7367e53cbe595f830e7a8028f372b3 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:32:36 +0200 Subject: [PATCH 15/46] Remove unused code in PointOfSaleLoadingView --- .../UI States/PointOfSaleLoadingView.swift | 7 ------- 1 file changed, 7 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift index fe7572de53b..1b60e219edc 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift @@ -36,13 +36,6 @@ private extension PointOfSaleLoadingView { } } -private extension PointOfSaleLoadingView { - enum Layout { - static let textSpacing: CGFloat = POSSpacing.medium - static let progressViewSpacing: CGFloat = 72 - } -} - #Preview { PointOfSaleLoadingView() } From 19c21ec19219d8c2a5d32166671910f244d9bd53 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:33:10 +0200 Subject: [PATCH 16/46] Comment out broken 50% button width set for payment failure buttons --- .../PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift | 2 +- .../PointOfSaleCardPresentPaymentErrorMessageView.swift | 2 +- ...OfSaleCardPresentPaymentIntentCreationErrorMessageView.swift | 2 +- ...ntOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift index 9892c319b0d..65e209154a1 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift @@ -48,7 +48,7 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View { } .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } - .frame(width: width * 0.5) + //.frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift index 0f56fe9f2dc..38d81390296 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift @@ -41,7 +41,7 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View { .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } } - .frame(width: width * 0.5) + //.frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift index 7d363dbfc55..32b4cb13cfd 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift @@ -41,7 +41,7 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View { .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } } - .frame(width: width * 0.5) + //.frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift index 7c7338ad7c9..a4781477373 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift @@ -36,7 +36,7 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View { Button(viewModel.tryAnotherPaymentMethodButtonViewModel.title, action: viewModel.tryAnotherPaymentMethodButtonViewModel.actionHandler) .buttonStyle(POSFilledButtonStyle(size: .normal)) - .frame(width: width * 0.5) + //.frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) From bcebcd6cd13c719e55681ef503d9b0cd2aea77e8 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:33:23 +0200 Subject: [PATCH 17/46] Use POS Design System Constants in Success View --- .../PointOfSalePaymentSuccessView.swift | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift index 9d52b64fb6b..f2137be732e 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift @@ -37,7 +37,7 @@ struct PointOfSalePaymentSuccessView: View { private var successView: some View { ZStack { - VStack(alignment: .center, spacing: Constants.headerSpacing) { + VStack(alignment: .center, spacing: POSSpacing.none) { Spacer() successIcon @@ -45,6 +45,8 @@ struct PointOfSalePaymentSuccessView: View { .scaleEffect(isViewLoaded ? 1 : 0) .opacity(isViewLoaded ? 1 : 0) + Spacer().frame(height: POSSpacing.xLarge) + VStack(alignment: .center, spacing: Constants.textSpacing) { Text(viewModel.title) .font(.posHeadingBold) @@ -62,6 +64,8 @@ struct PointOfSalePaymentSuccessView: View { } } + Spacer().frame(height: POSSpacing.xxLarge) + PaymentsActionButtons(isShowingSendReceiptView: $isShowingSendReceiptView, isShowingReceiptNotEligibleBanner: $isShowingReceiptNotEligibleBanner) .containerRelativeFrame(.horizontal, count: 2, span: 1, spacing: POSSpacing.none) @@ -112,8 +116,8 @@ private extension PointOfSalePaymentSuccessView { static let shadowOpacity: CGFloat = 0.16 static let shadowRadius: CGFloat = 16 static let shadowSize: CGSize = .init(width: 0, height: 8) - static let headerSpacing: CGFloat = 56 - static let textSpacing: CGFloat = POSSpacing.medium + static let headerSpacing: CGFloat = POSSpacing.xLarge + static let textSpacing: CGFloat = POSSpacing.small static let animationOffset: CGFloat = 100 } } From 06b846451d921675c4c1db8d2870762ae474979f Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:33:33 +0200 Subject: [PATCH 18/46] Use POS Design System Constants in CartView --- WooCommerce/Classes/POS/Presentation/CartView.swift | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift index 69a50eff80f..fa47c5fdddb 100644 --- a/WooCommerce/Classes/POS/Presentation/CartView.swift +++ b/WooCommerce/Classes/POS/Presentation/CartView.swift @@ -183,15 +183,13 @@ private extension CartView { static let primaryFont: POSFontStyle = .posHeadingBold static let secondaryFont: POSFontStyle = .posBodyLargeRegular() static let itemsFont: POSFontStyle = .posBodySmallRegular() - static let itemHorizontalPadding: CGFloat = 8 static let shoppingBagImageSize: CGFloat = 104 static let scrollViewCoordinateSpaceIdentifier: String = "CartScrollView" - static let emptyViewImageTextSpacing: CGFloat = 30 // This should be 40 by designs, but the overlay technique means we have to tweak it - static let cartHeaderSpacing: CGFloat = 8 - static let cartHeaderElementSpacing: CGFloat = 16 + static let emptyViewImageTextSpacing: CGFloat = POSSpacing.xLarge // This should be 40 by designs, but the overlay technique means we have to tweak it + static let cartHeaderElementSpacing: CGFloat = POSSpacing.medium static let cartAnimation: Animation = .spring(duration: 0.2) - static let checkoutButtonVerticalPadding: CGFloat = 16 - static let cartItemSpacing: CGFloat = 8 + static let checkoutButtonVerticalPadding: CGFloat = POSSpacing.medium + static let cartItemSpacing: CGFloat = POSSpacing.small } enum Localization { From 7eae77ae2161e5187229c94931d3813c2d3f2b28 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:33:41 +0200 Subject: [PATCH 19/46] Remove unused code in ChildItemList --- .../POS/Presentation/Item Selector/ChildItemList.swift | 4 ---- 1 file changed, 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift index da98911717c..8abfcde6906 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift @@ -107,10 +107,6 @@ private extension ChildItemList { comment: "Back button title in the child item list screen." ) } - - enum Constants { - static let itemListPadding: CGFloat = 16 - } } #if DEBUG From 8eb46dff9d4eb190df9bd5be8fb6424aecc03b85 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:33:48 +0200 Subject: [PATCH 20/46] Use POS Design System Constants in ItemList --- .../Classes/POS/Presentation/Item Selector/ItemList.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift index 9514bb5dfd5..6d3d960395e 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift @@ -72,8 +72,8 @@ struct ItemList: View { } private enum Constants { - static let itemListPadding: CGFloat = 16 - static let itemSpacing: CGFloat = 8 + static let itemListPadding: CGFloat = POSPadding.medium + static let itemSpacing: CGFloat = POSPadding.small } @available(iOS 17.0, *) From 866d77a25cd6589dbd6c76f5f05c8d08df9c6502 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:34:02 +0200 Subject: [PATCH 21/46] Use POS Design System Constants in ItemListView --- WooCommerce/Classes/POS/Presentation/ItemListView.swift | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/ItemListView.swift b/WooCommerce/Classes/POS/Presentation/ItemListView.swift index fd59c3eb694..020d2b485ca 100644 --- a/WooCommerce/Classes/POS/Presentation/ItemListView.swift +++ b/WooCommerce/Classes/POS/Presentation/ItemListView.swift @@ -145,9 +145,8 @@ private extension ItemListState { private extension ItemListView { enum Constants { static let infoIconInset: EdgeInsets = .init(top: 0, leading: 6, bottom: 0, trailing: 6) - static let itemListPadding: CGFloat = 16 - static let bannerCardPadding: CGFloat = 16 - static let bannerTextSpacing: CGFloat = 4 + static let bannerCardPadding: CGFloat = POSPadding.medium + static let bannerTextSpacing: CGFloat = POSSpacing.xSmall } enum BannerState { From a2e8fde9f318663fd9018b7288d950baf921c781 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:34:15 +0200 Subject: [PATCH 22/46] Use POS Design System Constants in ItemRowView --- WooCommerce/Classes/POS/Presentation/ItemRowView.swift | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift index ef4f10d6a18..aa6d288ff7e 100644 --- a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift +++ b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift @@ -73,10 +73,10 @@ private extension ItemRowView { enum Constants { static let productCardSize: CGFloat = 96 static let maximumProductCardSize: CGFloat = Self.productCardSize * 1.5 - static let horizontalPadding: CGFloat = 16 - static let horizontalElementSpacing: CGFloat = 16 - static let cardContentHorizontalPadding: CGFloat = 16 - static let itemTitleAndPriceSpacing: CGFloat = 4 + static let horizontalPadding: CGFloat = POSPadding.medium + static let horizontalElementSpacing: CGFloat = POSSpacing.medium + static let cardContentHorizontalPadding: CGFloat = POSPadding.medium + static let itemTitleAndPriceSpacing: CGFloat = POSSpacing.xSmall static let itemTitleFont: POSFontStyle = .posBodySmallBold static let itemSubtitleFont: POSFontStyle = .posBodySmallRegular() static let itemPriceFont: POSFontStyle = .posBodySmallRegular() From 430b2487f7e948227773c0b3ce838278c0e496db Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:34:21 +0200 Subject: [PATCH 23/46] Use POS Design System Constants in PaymentButtons --- WooCommerce/Classes/POS/Presentation/PaymentButtons.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift b/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift index f5998f17daa..156b880541f 100644 --- a/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift +++ b/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift @@ -70,7 +70,7 @@ private extension PaymentsActionButtons { @available(iOS 17.0, *) private extension PaymentsActionButtons { enum Constants { - static let buttonSpacing: CGFloat = 12 + static let buttonSpacing: CGFloat = POSSpacing.medium } enum Localization { From b88c096cfa5f0a70dd47b00f5e21a3952afff810 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:34:27 +0200 Subject: [PATCH 24/46] Use POS Design System Constants in OnboardingView --- .../PointOfSaleCardPresentPaymentOnboardingView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/Payments Onboarding/PointOfSaleCardPresentPaymentOnboardingView.swift b/WooCommerce/Classes/POS/Presentation/Payments Onboarding/PointOfSaleCardPresentPaymentOnboardingView.swift index 920f731a996..105e2c0afde 100644 --- a/WooCommerce/Classes/POS/Presentation/Payments Onboarding/PointOfSaleCardPresentPaymentOnboardingView.swift +++ b/WooCommerce/Classes/POS/Presentation/Payments Onboarding/PointOfSaleCardPresentPaymentOnboardingView.swift @@ -19,7 +19,7 @@ struct PointOfSaleCardPresentPaymentOnboardingView: View { private extension PointOfSaleCardPresentPaymentOnboardingView { enum Constants { - static let verticalSpacing: CGFloat = 20.0 + static let verticalSpacing: CGFloat = POSSpacing.large } enum Localization { From b8c7aa8a67fb29b8909c798d323c49bfb788fb99 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:35:12 +0200 Subject: [PATCH 25/46] Adjust Cash and Email views to use constants It doesn't fit designs 100% since it looks to use centering between keyboad and header logic. Cash and Email uses different text fields so it's hard to achieve same centering with same constants. Need to use different ones. --- .../POS/Presentation/PointOfSaleCollectCashView.swift | 6 +++--- .../Presentation/Reusable Views/POSSendReceiptView.swift | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift index 67a81256b69..55c29673149 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift @@ -26,7 +26,7 @@ struct PointOfSaleCollectCashView: View { var body: some View { ScrollView { - VStack(alignment: .center, spacing: conditionalPadding(13)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.large)) { POSPageHeaderView(title: Localization.backNavigationTitle, subtitle: formattedOrderTotal, backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled, @@ -37,7 +37,7 @@ struct PointOfSaleCollectCashView: View { } })) - VStack(alignment: .center, spacing: conditionalPadding(62)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xLarge * 2)) { VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xSmall)) { FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos) .focused($isTextFieldFocused) @@ -137,7 +137,7 @@ private extension PointOfSaleCollectCashView { } private func conditionalPadding(_ padding: CGFloat) -> CGFloat { - dynamicTypeSize.isAccessibilitySize ? POSPadding.none : padding + dynamicTypeSize.isAccessibilitySize ? POSPadding.small : padding } private var backgroundColor: Color { diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift index caaf4aa48ef..8a7d71e2b39 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift @@ -17,7 +17,7 @@ struct POSSendReceiptView: View { } var body: some View { - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.small)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xxLarge)) { POSPageHeaderView(title: Localization.emailReceiptNavigationText, backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled, action: { @@ -27,7 +27,7 @@ struct POSSendReceiptView: View { } })) - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.small)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xxLarge * 2)) { TextField("", text: $textFieldInput, prompt: Text(Localization.textfieldPlaceholder).foregroundColor(.posOnDisabledContainer)) @@ -100,7 +100,7 @@ struct POSSendReceiptView: View { private extension POSSendReceiptView { private func conditionalPadding(_ padding: CGFloat) -> CGFloat { if dynamicTypeSize.isAccessibilitySize { - return 0 + return POSPadding.small } else if dynamicTypeSize >= .xLarge { return padding * 0.8 } else { From add5302068958666ed09ee8c0e4d14833f5ee5bb Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:35:20 +0200 Subject: [PATCH 26/46] Use POS Design System Constants in Dashboard --- .../Classes/POS/Presentation/PointOfSaleDashboardView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift index 4779acd2df3..a0046b2adbf 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift @@ -168,7 +168,7 @@ private extension PointOfSaleDashboardView { // https://github.com/woocommerce/woocommerce-ios/issues/13251 static let cartWidth: CGFloat = 0.35 static let floatingControlBottomPadding: CGFloat = POSPadding.medium - static let floatingControlHorizontalOffset: CGFloat = 16 + static let floatingControlHorizontalOffset: CGFloat = POSPadding.medium static let floatingControlVerticalOffset: CGFloat = 0 static let exitPOSSheetMaxWidth: CGFloat = 900.0 static let supportTag = "origin:point-of-sale" From 3426cb6075948d8d306debe3b106e121bf320352 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:35:26 +0200 Subject: [PATCH 27/46] Use POS Design System Constants in Exit Alert --- .../POS/Presentation/PointOfSaleExitPosAlertView.swift | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift index f23401bbe24..55703fa2324 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift @@ -40,9 +40,9 @@ struct PointOfSaleExitPosAlertView: View { private extension PointOfSaleExitPosAlertView { enum Constants { - static let titleBottomPadding: CGFloat = 20.0 - static let bodyBottomPadding: CGFloat = 60.0 - static let padding: CGFloat = POSPadding.xxLarge + static let titleBottomPadding: CGFloat = POSSpacing.xLarge + static let bodyBottomPadding: CGFloat = POSSpacing.xLarge + static let padding: CGFloat = POSPadding.medium } enum Localization { From 9c6940467d3855cc30c97ec99070d5e76675b750 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:35:47 +0200 Subject: [PATCH 28/46] Remove unnecessary padding in POSNoticeView --- .../Classes/POS/Presentation/Reusable Views/POSNoticeView.swift | 2 -- 1 file changed, 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift index bfefa7a173f..a6e66b7d36c 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift @@ -58,7 +58,6 @@ struct POSNoticeView: View { .accessibilityLabel(Localization.dismissAccessibilityLabel) } ) - .padding(Constants.dismissIconPadding) Spacer() } } @@ -88,7 +87,6 @@ private enum Constants { static let textSpacing: CGFloat = POSSpacing.xSmall static let titleSpacing: CGFloat = POSSpacing.small static let iconHorizontalPadding: CGFloat = POSPadding.small - static let dismissIconPadding: CGFloat = 6 static let padding: CGFloat = POSPadding.medium } From ba3bda1adf2fba7cde09ae15ae77c5c984a92dec Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:35:58 +0200 Subject: [PATCH 29/46] Use POS Design System Constants in POSPageHeaderView --- .../POS/Presentation/Reusable Views/POSPageHeaderView.swift | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift index 6a8232962b0..5f6c0cedc54 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift @@ -95,9 +95,9 @@ struct POSPageHeaderView: View { private enum Constants { static let backButtonIcon = "chevron.backward" - static let backButtonHorizontalPadding: CGFloat = 12 - static let horizontalSpacing: CGFloat = 16 - static let titleSubtitleSpacing: CGFloat = 4 + static let backButtonHorizontalPadding: CGFloat = POSSpacing.xSmall + POSSpacing.small + static let horizontalSpacing: CGFloat = POSSpacing.medium + static let titleSubtitleSpacing: CGFloat = POSSpacing.xSmall } #Preview { From 23a31fe89c2342cb46250def870588f9ecfd622e Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:36:24 +0200 Subject: [PATCH 30/46] Use POS Design System Constants and update layout of SimpleProducts modal --- .../SimpleProductsOnlyInformation.swift | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift b/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift index 1d5926cc69b..779b24a7e09 100644 --- a/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift +++ b/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift @@ -12,6 +12,17 @@ struct SimpleProductsOnlyInformation: View { var body: some View { VStack(spacing: Constants.contentBlockSpacing) { + HStack { + Spacer() + Button { + isPresented = false + } label: { + Text(Image(systemName: "xmark")) + .font(.posButtonSymbolMedium) + } + .foregroundColor(Color.posOnSurfaceVariantLowest) + } + VStack(spacing: Constants.textSpacing) { Text(Localization.modalTitle) .font(.posHeadingBold) @@ -19,10 +30,11 @@ struct SimpleProductsOnlyInformation: View { Group { Text(issueMessage) Text(futureMessage) - .padding(.bottom, Constants.textToModalBottomPadding) } .font(.posBodyLargeRegular()) + Spacer().frame(height: POSSpacing.xLarge) + VStack(spacing: Constants.textSpacing) { Text(hintMessage) .font(.posBodySmallRegular()) @@ -47,7 +59,7 @@ struct SimpleProductsOnlyInformation: View { }) { Text(Localization.okButtonTitle) } - .buttonStyle(POSFilledButtonStyle(size: .normal)) + .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } .padding(Constants.modalContentPadding) .frame(width: Constants.modalFrameWidth) @@ -70,13 +82,12 @@ struct SimpleProductsOnlyInformation: View { private extension SimpleProductsOnlyInformation { enum Constants { static let modalFrameWidth: CGFloat = 896 - static let modalContentPadding: CGFloat = 40 - static let hintVerticalPadding: CGFloat = 24 - static let hintHorizontalPadding: CGFloat = 40 + static let modalContentPadding: CGFloat = POSSpacing.medium + static let hintVerticalPadding: CGFloat = POSSpacing.medium + static let hintHorizontalPadding: CGFloat = POSSpacing.medium static let hintBackgroundCornerRadius: CGFloat = POSCornerRadiusStyle.medium.value - static let contentBlockSpacing: CGFloat = 40 - static let textSpacing: CGFloat = 16 - static let textToModalBottomPadding: CGFloat = 8 + static let contentBlockSpacing: CGFloat = POSSpacing.xxLarge + static let textSpacing: CGFloat = POSSpacing.small } enum Localization { From c8ee88b85ef3e716e4d63b2bccd798db467ef637 Mon Sep 17 00:00:00 2001 From: Povilas Staskus <4062343+staskus@users.noreply.github.com> Date: Fri, 21 Feb 2025 00:36:35 +0200 Subject: [PATCH 31/46] Use POS Design System Constants in TotalsView --- .../Classes/POS/Presentation/TotalsView.swift | 59 ++++++++----------- 1 file changed, 23 insertions(+), 36 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/TotalsView.swift b/WooCommerce/Classes/POS/Presentation/TotalsView.swift index 5e4603f7816..c35c39781d8 100644 --- a/WooCommerce/Classes/POS/Presentation/TotalsView.swift +++ b/WooCommerce/Classes/POS/Presentation/TotalsView.swift @@ -273,13 +273,13 @@ private extension TotalsView { static let primary = PaymentViewLayout( backgroundColor: .clear, topPadding: nil, - bottomPadding: 8 + bottomPadding: POSPadding.small ) static let outlined = PaymentViewLayout( backgroundColor: Color(.quaternarySystemFill), - topPadding: 40, - bottomPadding: 40 + topPadding: POSPadding.xxLarge, + bottomPadding: POSPadding.xxLarge ) static let topAligned = PaymentViewLayout( @@ -325,9 +325,9 @@ private extension TotalsView { return .topAligned case .cardPaymentSuccessful: return PaymentViewLayout(backgroundColor: backgroundColor, - topPadding: 0, - bottomPadding: 0, - sidePadding: 0) + topPadding: POSPadding.none, + bottomPadding: POSPadding.none, + sidePadding: POSPadding.none) case .idle, .acceptingCard, .validatingOrder, @@ -344,14 +344,14 @@ private extension TotalsView { switch cashPaymentState { case .collectingCash: return PaymentViewLayout(backgroundColor: backgroundColor, - topPadding: 0, + topPadding: POSPadding.none, bottomPadding: nil, - sidePadding: 0) + sidePadding: POSPadding.none) case .paymentSuccess: return PaymentViewLayout(backgroundColor: backgroundColor, - topPadding: 0, - bottomPadding: 0, - sidePadding: 0) + topPadding: POSPadding.none, + bottomPadding: POSPadding.none, + sidePadding: POSPadding.none) } } } @@ -385,14 +385,18 @@ fileprivate extension View { private extension TotalsView { enum Constants { static let pricesIdealWidth: CGFloat = 382 - static let verticalSpacing: CGFloat = 56 - static let buttonHorizontalPadding: CGFloat = 48 - static let cashButtonBottomPadding: CGFloat = 16 - - static let totalsLineViewPadding: EdgeInsets = .init(top: 20, leading: 24, bottom: 20, trailing: 24) - static let subtotalsVerticalSpacing: CGFloat = 8 - static let totalVerticalSpacing: CGFloat = 16 - static let totalsHorizontalSpacing: CGFloat = 24 + static let buttonHorizontalPadding: CGFloat = POSPadding.medium + static let cashButtonBottomPadding: CGFloat = POSPadding.medium + + static let totalsLineViewPadding: EdgeInsets = .init( + top: POSPadding.medium, + leading: POSPadding.large, + bottom: POSPadding.medium, + trailing: POSPadding.large + ) + static let subtotalsVerticalSpacing: CGFloat = POSSpacing.small + static let totalVerticalSpacing: CGFloat = POSSpacing.medium + static let totalsHorizontalSpacing: CGFloat = POSSpacing.large static let subtotalTitleFont: POSFontStyle = .posBodyLargeRegular() static let subtotalAmountFont: POSFontStyle = .posBodyLargeRegular() static let totalTitleFont: POSFontStyle = .posHeadingBold @@ -431,23 +435,6 @@ private extension TotalsView { value: "Cash payment", comment: "Title for the cash payment button title") } - - private func dynamicVerticalSpacing(for size: DynamicTypeSize) -> CGFloat { - switch size { - case .accessibility1, - .accessibility2, - .accessibility3, - .accessibility4, - .accessibility5: - return 0 - case .xLarge, .xxLarge: - return Constants.verticalSpacing * 0.75 - case .xxxLarge: - return Constants.verticalSpacing * 0.5 - default: - return Constants.verticalSpacing - } - } } #if DEBUG From 1ee098238d52707659b2366b3fd2763443adc7d3 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 09:12:55 +0800 Subject: [PATCH 32/46] Uncomment a possibly unintended change to disable 0.5 width. --- .../PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift index 65e209154a1..9892c319b0d 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift @@ -48,7 +48,7 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View { } .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } - //.frame(width: width * 0.5) + .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) From c925a0aa2a9d79f6e5e5e1a3eb4abacbf7ba2a3c Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 09:18:54 +0800 Subject: [PATCH 33/46] Revert change to use padding value for image size. --- .../Classes/POS/Presentation/POSReceiptEligibilityBanner.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift index 7ebc74937ad..b54854e64fd 100644 --- a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift +++ b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift @@ -30,7 +30,7 @@ private extension POSReceiptEligibilityBanner { enum Constants { static let elementSpacing: CGFloat = POSSpacing.small static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value - static let imagesize: CGFloat = POSPadding.xxLarge + static let imagesize: CGFloat = 40 static let imagePadding: CGFloat = POSPadding.xSmall static let bannerPadding: CGFloat = POSPadding.medium } From 35e5064a5ab991dd2c5022ad49d70f53499d87a3 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 09:19:13 +0800 Subject: [PATCH 34/46] Uncomment 0.5 width diffs. --- .../PointOfSaleCardPresentPaymentErrorMessageView.swift | 2 +- ...OfSaleCardPresentPaymentIntentCreationErrorMessageView.swift | 2 +- ...ntOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift index 38d81390296..0f56fe9f2dc 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift @@ -41,7 +41,7 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View { .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } } - //.frame(width: width * 0.5) + .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift index 32b4cb13cfd..7d363dbfc55 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift @@ -41,7 +41,7 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View { .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } } - //.frame(width: width * 0.5) + .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift index a4781477373..7c7338ad7c9 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift @@ -36,7 +36,7 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View { Button(viewModel.tryAnotherPaymentMethodButtonViewModel.title, action: viewModel.tryAnotherPaymentMethodButtonViewModel.actionHandler) .buttonStyle(POSFilledButtonStyle(size: .normal)) - //.frame(width: width * 0.5) + .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) From b90281deef326c83fe423e5efce051eb417b525c Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 09:21:57 +0800 Subject: [PATCH 35/46] Nit: use spacing instead of padding. --- .../Classes/POS/Presentation/Item Selector/ItemList.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift index 6d3d960395e..3386738abcf 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift @@ -73,7 +73,7 @@ struct ItemList: View { private enum Constants { static let itemListPadding: CGFloat = POSPadding.medium - static let itemSpacing: CGFloat = POSPadding.small + static let itemSpacing: CGFloat = POSSpacing.small } @available(iOS 17.0, *) From 486c8f8c972083a95709730af4c7dd60ef9cd885 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 10:09:23 +0800 Subject: [PATCH 36/46] Use the same vertical spacing for VStack in exit POS view with other tweaks. --- .../Presentation/PointOfSaleExitPosAlertView.swift | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift index c583b4c47e2..cb51b22d577 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift @@ -4,30 +4,29 @@ import SwiftUI struct PointOfSaleExitPosAlertView: View { @Environment(\.dismiss) private var dismiss @Binding private var isPresented: Bool - @Environment(PointOfSaleAggregateModel.self) private var posModel init(isPresented: Binding) { self._isPresented = isPresented } var body: some View { - VStack(spacing: POSSpacing.none) { + VStack(spacing: Constants.verticalSpacing) { HStack { Spacer() Button { isPresented = false } label: { Text(Image(systemName: "xmark")) - .font(.posButtonSymbolSmall) + .font(.posButtonSymbolLarge) } .foregroundColor(Color.posOnSurfaceVariantLowest) } Text(Localization.exitTitle) .font(.posHeadingBold) - .padding(.bottom, Constants.titleBottomPadding) + .foregroundColor(Color.posOnSurface) Text(Localization.exitBody) .font(.posBodyLargeRegular()) - .padding(.bottom, Constants.bodyBottomPadding) + .foregroundColor(Color.posOnSurface) Button { ServiceLocator.analytics.track(.pointOfSaleExitConfirmed) dismiss() @@ -43,8 +42,7 @@ struct PointOfSaleExitPosAlertView: View { @available(iOS 17.0, *) private extension PointOfSaleExitPosAlertView { enum Constants { - static let titleBottomPadding: CGFloat = POSSpacing.xLarge - static let bodyBottomPadding: CGFloat = POSSpacing.xLarge + static let verticalSpacing: CGFloat = POSSpacing.xLarge static let padding: CGFloat = POSPadding.medium } From 09af52e5999a1b79ca0efbeb1a76fa9d14223dd0 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 10:16:34 +0800 Subject: [PATCH 37/46] Revert card text spacing to use a constant with `POSSpacing.xSmall`. --- .../POS/Presentation/Item Selector/ItemListErrorCardView.swift | 2 +- .../POS/Presentation/Item Selector/ParentProductCardView.swift | 2 +- .../Item Selector/PointOfSaleItemListCardConstants.swift | 1 + .../POS/Presentation/Item Selector/SimpleProductCardView.swift | 2 +- .../POS/Presentation/Item Selector/VariationCardView.swift | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift index 66497775941..2fe3615428d 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift @@ -12,7 +12,7 @@ struct ItemListErrorCardView: View { .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize), height: Constants.productCardSize * scale) - VStack(alignment: .leading, spacing: POSSpacing.xSmall) { + VStack(alignment: .leading, spacing: Constants.textSpacing) { Text(errorState.title) .lineLimit(2) .foregroundStyle(Color.posOnSurface) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift index 0d52973d3cd..f08e3684b60 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift @@ -25,7 +25,7 @@ struct ParentProductCardView: View { scale: 1) .frame(width: dimension, height: dimension) - VStack(alignment: .leading, spacing: POSSpacing.xSmall) { + VStack(alignment: .leading, spacing: Constants.textSpacing) { Text(name) .lineLimit(2) .foregroundStyle(Constants.titleColor) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift index d724520b7f0..0aa110b3a94 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift @@ -5,6 +5,7 @@ enum PointOfSaleItemListCardConstants { static let productCardSize: CGFloat = 112 static let maximumProductCardSize: CGFloat = PointOfSaleItemListCardConstants.productCardSize * 2 static let cardSpacing: CGFloat = POSSpacing.none + static let textSpacing: CGFloat = POSSpacing.xSmall static let horizontalTextPadding: CGFloat = POSPadding.medium static let verticalTextPadding: CGFloat = POSPadding.small static let itemTitleFont: POSFontStyle = .posBodyLargeBold diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift index 7a197cd581e..fc215eae048 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift @@ -22,7 +22,7 @@ struct SimpleProductCardView: View { scale: 1) .frame(width: dimension, height: dimension) - VStack(alignment: .leading, spacing: POSSpacing.xSmall) { + VStack(alignment: .leading, spacing: Constants.textSpacing) { Text(product.name) .lineLimit(2) .foregroundStyle(Constants.titleColor) diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift index 917a2db574e..a4459d8d226 100644 --- a/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift +++ b/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift @@ -21,7 +21,7 @@ struct VariationCardView: View { scale: 1) .frame(width: dimension, height: dimension) - VStack(alignment: .leading, spacing: POSSpacing.xSmall) { + VStack(alignment: .leading, spacing: Constants.textSpacing) { Text(variation.name) .lineLimit(2) .foregroundStyle(Constants.titleColor) From 08bc001603216cf5465f8134a57f2c11e248ae46 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 12:16:26 +0800 Subject: [PATCH 38/46] Use padding for cart checkout button vertical padding, update empty cart font to match design. --- WooCommerce/Classes/POS/Presentation/CartView.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift index fa47c5fdddb..f4b6b43204b 100644 --- a/WooCommerce/Classes/POS/Presentation/CartView.swift +++ b/WooCommerce/Classes/POS/Presentation/CartView.swift @@ -181,14 +181,14 @@ private extension CartView { private extension CartView { enum Constants { static let primaryFont: POSFontStyle = .posHeadingBold - static let secondaryFont: POSFontStyle = .posBodyLargeRegular() + static let secondaryFont: POSFontStyle = .posBodyMediumRegular() static let itemsFont: POSFontStyle = .posBodySmallRegular() static let shoppingBagImageSize: CGFloat = 104 static let scrollViewCoordinateSpaceIdentifier: String = "CartScrollView" static let emptyViewImageTextSpacing: CGFloat = POSSpacing.xLarge // This should be 40 by designs, but the overlay technique means we have to tweak it static let cartHeaderElementSpacing: CGFloat = POSSpacing.medium static let cartAnimation: Animation = .spring(duration: 0.2) - static let checkoutButtonVerticalPadding: CGFloat = POSSpacing.medium + static let checkoutButtonVerticalPadding: CGFloat = POSPadding.medium static let cartItemSpacing: CGFloat = POSSpacing.small } From 1d49a03beeb04152adc3d31fb38e101b70f0b6c7 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 12:25:14 +0800 Subject: [PATCH 39/46] Revert custom dismiss icon padding in notice view. --- .../Classes/POS/Presentation/Reusable Views/POSNoticeView.swift | 2 ++ 1 file changed, 2 insertions(+) diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift index a6e66b7d36c..bfefa7a173f 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSNoticeView.swift @@ -58,6 +58,7 @@ struct POSNoticeView: View { .accessibilityLabel(Localization.dismissAccessibilityLabel) } ) + .padding(Constants.dismissIconPadding) Spacer() } } @@ -87,6 +88,7 @@ private enum Constants { static let textSpacing: CGFloat = POSSpacing.xSmall static let titleSpacing: CGFloat = POSSpacing.small static let iconHorizontalPadding: CGFloat = POSPadding.small + static let dismissIconPadding: CGFloat = 6 static let padding: CGFloat = POSPadding.medium } From 3977af4dd13be2d9b012895f01cf88fe48927fd3 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 12:37:49 +0800 Subject: [PATCH 40/46] Revert back button horizontal padding to a custom value with a comment about how it is calculated. --- .../POS/Presentation/Reusable Views/POSPageHeaderView.swift | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift index 5f6c0cedc54..402fb9aef8d 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift @@ -95,7 +95,8 @@ struct POSPageHeaderView: View { private enum Constants { static let backButtonIcon = "chevron.backward" - static let backButtonHorizontalPadding: CGFloat = POSSpacing.xSmall + POSSpacing.small + /// Icon container is 48x48, chevron icon width is 24px. Therefore, adding a horizontal padding (48-24)/2 = 12. + static let backButtonHorizontalPadding: CGFloat = 12 static let horizontalSpacing: CGFloat = POSSpacing.medium static let titleSubtitleSpacing: CGFloat = POSSpacing.xSmall } From 0569c5f64ea6ac558af2a0add4585444cec868c9 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 12:56:49 +0800 Subject: [PATCH 41/46] Tweak spacing/padding and font/color in `SimpleProductsOnlyInformation`. --- .../SimpleProductsOnlyInformation.swift | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift b/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift index 3b4636e328a..0aaca41c938 100644 --- a/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift +++ b/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift @@ -4,7 +4,6 @@ import SwiftUI struct SimpleProductsOnlyInformation: View { @Binding var isPresented: Bool let deepLinkNavigator: DeepLinkNavigator? - @Environment(PointOfSaleAggregateModel.self) private var posModel init(isPresented: Binding, deepLinkNavigator: DeepLinkNavigator? = AppDelegate.shared.tabBarController) { @@ -20,8 +19,9 @@ struct SimpleProductsOnlyInformation: View { isPresented = false } label: { Text(Image(systemName: "xmark")) - .font(.posButtonSymbolMedium) + .font(.posButtonSymbolLarge) } + .padding(Constants.dismissIconPadding) .foregroundColor(Color.posOnSurfaceVariantLowest) } @@ -34,26 +34,27 @@ struct SimpleProductsOnlyInformation: View { Text(futureMessage) } .font(.posBodyLargeRegular()) + } + .foregroundStyle(Color.posOnSurface) + .multilineTextAlignment(.center) - Spacer().frame(height: POSSpacing.xLarge) + VStack(spacing: Constants.textSpacing) { + Text(hintMessage) + .font(.posBodySmallRegular()) + .foregroundStyle(Color.posOnSurface) - VStack(spacing: Constants.textSpacing) { - Text(hintMessage) + Button { + deepLinkNavigator?.navigate(to: OrdersDestination.createOrder) + } label: { + Label(Localization.modalAction, systemImage: "plus") .font(.posBodySmallRegular()) - - Button { - deepLinkNavigator?.navigate(to: OrdersDestination.createOrder) - } label: { - Label(Localization.modalAction, systemImage: "plus") - .font(.posBodySmallRegular()) - } } - .frame(maxWidth: .infinity) - .padding(.vertical, Constants.hintVerticalPadding) - .padding(.horizontal, Constants.hintHorizontalPadding) - .background(Color(.posSurfaceDim)) - .clipShape(RoundedRectangle(cornerRadius: Constants.hintBackgroundCornerRadius)) } + .frame(maxWidth: .infinity) + .padding(.vertical, Constants.hintVerticalPadding) + .padding(.horizontal, Constants.hintHorizontalPadding) + .background(Color(.posSurfaceDim)) + .clipShape(RoundedRectangle(cornerRadius: Constants.hintBackgroundCornerRadius)) .multilineTextAlignment(.center) Button(action: { @@ -91,6 +92,7 @@ private extension SimpleProductsOnlyInformation { static let hintBackgroundCornerRadius: CGFloat = POSCornerRadiusStyle.medium.value static let contentBlockSpacing: CGFloat = POSSpacing.xxLarge static let textSpacing: CGFloat = POSSpacing.small + static let dismissIconPadding: EdgeInsets = .init(top: 8, leading: 8, bottom: 8, trailing: 8) } enum Localization { From 4b9250e4ebebca5614ba18e3f3197e1d357ad2ed Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 13:07:25 +0800 Subject: [PATCH 42/46] Remove unused code in success view. --- .../Reader Messages/PointOfSalePaymentSuccessView.swift | 2 -- 1 file changed, 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift index f2137be732e..5ca3d568be8 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift @@ -3,7 +3,6 @@ import SwiftUI @available(iOS 17.0, *) struct PointOfSalePaymentSuccessView: View { let viewModel: PointOfSalePaymentSuccessViewModel - @Environment(\.colorScheme) var colorScheme @Environment(\.dynamicTypeSize) var dynamicTypeSize @State private var isShowingSendReceiptView: Bool = false @@ -116,7 +115,6 @@ private extension PointOfSalePaymentSuccessView { static let shadowOpacity: CGFloat = 0.16 static let shadowRadius: CGFloat = 16 static let shadowSize: CGSize = .init(width: 0, height: 8) - static let headerSpacing: CGFloat = POSSpacing.xLarge static let textSpacing: CGFloat = POSSpacing.small static let animationOffset: CGFloat = 100 } From 4d063ed7389252ceaa1ec1340157b63078b7f967 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 13:16:12 +0800 Subject: [PATCH 43/46] Tweak spacing in totals view to be closer to design which is using spacing not in the design system. --- WooCommerce/Classes/POS/Presentation/TotalsView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/TotalsView.swift b/WooCommerce/Classes/POS/Presentation/TotalsView.swift index c35c39781d8..458e868b75d 100644 --- a/WooCommerce/Classes/POS/Presentation/TotalsView.swift +++ b/WooCommerce/Classes/POS/Presentation/TotalsView.swift @@ -394,7 +394,7 @@ private extension TotalsView { bottom: POSPadding.medium, trailing: POSPadding.large ) - static let subtotalsVerticalSpacing: CGFloat = POSSpacing.small + static let subtotalsVerticalSpacing: CGFloat = POSSpacing.medium static let totalVerticalSpacing: CGFloat = POSSpacing.medium static let totalsHorizontalSpacing: CGFloat = POSSpacing.large static let subtotalTitleFont: POSFontStyle = .posBodyLargeRegular() From 44028279d7a67397228b3399ce7f4a43ed33af9d Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 13:24:53 +0800 Subject: [PATCH 44/46] Tweak design in cash view. --- .../POS/Presentation/PointOfSaleCollectCashView.swift | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift index 5d19b05e641..05d01cab2cd 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift @@ -32,7 +32,7 @@ struct PointOfSaleCollectCashView: View { var body: some View { ScrollView { - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.large)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.medium)) { POSPageHeaderView(title: Localization.backNavigationTitle, subtitle: formattedOrderTotal, backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled, @@ -43,7 +43,9 @@ struct PointOfSaleCollectCashView: View { } })) - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xLarge * 2)) { + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.medium)) { + Spacer() + VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xSmall)) { FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos) .focused($isTextFieldFocused) @@ -68,10 +70,11 @@ struct PointOfSaleCollectCashView: View { Text(errorMessage) .font(.posBodySmallRegular()) .foregroundColor(.posError) - .padding(.bottom, Constants.errorMessagePadding) } } + Spacer() + Button(action: { Task { @MainActor in await submitCashAmount() @@ -144,7 +147,6 @@ private extension PointOfSaleCollectCashView { @available(iOS 17.0, *) private extension PointOfSaleCollectCashView { enum Constants { - static let errorMessagePadding: CGFloat = POSPadding.small static let minimumPadding: CGFloat = POSPadding.xSmall } From 485324d402c40c07aa16b0112371aceb4d04b19d Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 13:31:48 +0800 Subject: [PATCH 45/46] Tweak design in receipt view to be consistent with cash view. --- .../PointOfSaleCollectCashView.swift | 8 +-- .../Reusable Views/POSSendReceiptView.swift | 53 ++++++++++--------- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift index 05d01cab2cd..939018a3a00 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift @@ -32,7 +32,7 @@ struct PointOfSaleCollectCashView: View { var body: some View { ScrollView { - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.medium)) { + VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) { POSPageHeaderView(title: Localization.backNavigationTitle, subtitle: formattedOrderTotal, backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled, @@ -43,10 +43,10 @@ struct PointOfSaleCollectCashView: View { } })) - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.medium)) { + VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) { Spacer() - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xSmall)) { + VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.xSmall)) { FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos) .focused($isTextFieldFocused) .dynamicTypeSize(...DynamicTypeSize.accessibility1) @@ -147,7 +147,7 @@ private extension PointOfSaleCollectCashView { @available(iOS 17.0, *) private extension PointOfSaleCollectCashView { enum Constants { - static let minimumPadding: CGFloat = POSPadding.xSmall + static let minimumPadding: CGFloat = POSSpacing.xSmall } private func conditionalPadding(_ padding: CGFloat) -> CGFloat { diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift index 8135c7dc2d1..63ecc1ac9f6 100644 --- a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift +++ b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift @@ -24,7 +24,7 @@ struct POSSendReceiptView: View { var body: some View { ScrollView { - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xxLarge)) { + VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) { POSPageHeaderView(title: Localization.emailReceiptNavigationText, backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled, action: { @@ -34,31 +34,35 @@ struct POSSendReceiptView: View { } })) - VStack(alignment: .center, spacing: conditionalPadding(POSPadding.xxLarge * 2)) { - TextField("", - text: $textFieldInput, - prompt: Text(Localization.textfieldPlaceholder).foregroundColor(.posOnDisabledContainer)) - .foregroundStyle(Color.posOnSurface) - .dynamicTypeSize(...DynamicTypeSize.accessibility1) - .keyboardType(.emailAddress) - .textInputAutocapitalization(.never) - .autocorrectionDisabled() - .multilineTextAlignment(.center) - .font(POSFontStyle.posHeadingRegular) - .focused() - .focused($isTextFieldFocused) - .padding() - .onSubmit { - sendReceipt() - } + VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.medium)) { + Spacer() - if let errorMessage = errorMessage { - Text(errorMessage) - .font(POSFontStyle.posBodySmallRegular()) - .foregroundColor(.posError) - .padding(.bottom, Constants.errorMessagePadding) + VStack(alignment: .center, spacing: POSSpacing.xSmall) { + TextField("", + text: $textFieldInput, + prompt: Text(Localization.textfieldPlaceholder).foregroundColor(.posOnDisabledContainer)) + .foregroundStyle(Color.posOnSurface) + .dynamicTypeSize(...DynamicTypeSize.accessibility1) + .keyboardType(.emailAddress) + .textInputAutocapitalization(.never) + .autocorrectionDisabled() + .multilineTextAlignment(.center) + .font(POSFontStyle.posHeadingRegular) + .focused() + .focused($isTextFieldFocused) + .onSubmit { + sendReceipt() + } + + if let errorMessage { + Text(errorMessage) + .font(POSFontStyle.posBodySmallRegular()) + .foregroundColor(.posError) + } } + Spacer() + Button(action: { sendReceipt() }, label: { @@ -114,8 +118,7 @@ struct POSSendReceiptView: View { @available(iOS 17.0, *) private extension POSSendReceiptView { enum Constants { - static let errorMessagePadding: CGFloat = POSPadding.small - static let minimumPadding: CGFloat = POSPadding.xSmall + static let minimumPadding: CGFloat = POSSpacing.xSmall } private func conditionalPadding(_ padding: CGFloat) -> CGFloat { From 795a764ea1f76513d7698b185f32960a54775c69 Mon Sep 17 00:00:00 2001 From: Jaclyn Chen Date: Fri, 21 Feb 2025 13:44:03 +0800 Subject: [PATCH 46/46] Disable the 0.5x width button modifier until the parent container width is fixed later. --- .../PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift | 1 - .../PointOfSaleCardPresentPaymentErrorMessageView.swift | 1 - ...tOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift | 1 - ...intOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift | 1 - 4 files changed, 4 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift index 9892c319b0d..6fcdb61f136 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift @@ -48,7 +48,6 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View { } .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } - .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift index 0f56fe9f2dc..0db19f697a5 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift @@ -41,7 +41,6 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View { .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } } - .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift index 7d363dbfc55..a6e80ef9f7c 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift @@ -41,7 +41,6 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View { .buttonStyle(POSOutlinedButtonStyle(size: .normal)) } } - .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth) diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift index 7c7338ad7c9..d4b48a962e6 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift @@ -36,7 +36,6 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View { Button(viewModel.tryAnotherPaymentMethodButtonViewModel.title, action: viewModel.tryAnotherPaymentMethodButtonViewModel.actionHandler) .buttonStyle(POSFilledButtonStyle(size: .normal)) - .frame(width: width * 0.5) } .multilineTextAlignment(.center) .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)