diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentSuccessMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentSuccessMessageView.swift index f22613f901c..0af318967f4 100644 --- a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentSuccessMessageView.swift +++ b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentSuccessMessageView.swift @@ -3,9 +3,12 @@ import SwiftUI struct PointOfSaleCardPresentPaymentSuccessMessageView: View { let viewModel: PointOfSaleCardPresentPaymentSuccessMessageViewModel let animation: POSCardPresentPaymentInLineMessageAnimation + @Environment(\.colorScheme) var colorScheme var body: some View { VStack(alignment: .center, spacing: Constants.headerSpacing) { + successIcon + .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position) VStack(alignment: .center, spacing: Constants.textSpacing) { Text(viewModel.title) .font(.posTitleEmphasized) @@ -23,10 +26,39 @@ struct PointOfSaleCardPresentPaymentSuccessMessageView: View { } .multilineTextAlignment(.center) } + + private var successIcon: some View { + ZStack { + Circle() + .frame(width: Constants.imageSize.width, height: Constants.imageSize.height) + .shadow(color: Color(.wooCommerceEmerald(.shade80)).opacity(Constants.shadowOpacity), + radius: Constants.shadowRadius, x: Constants.shadowSize.width, y: Constants.shadowSize.height) + .foregroundColor(circleBackgroundColor) + Image(PointOfSaleAssets.successCheck.imageName) + .renderingMode(.template) + .foregroundColor(checkmarkColor) + .frame(width: 52) + .accessibilityHidden(true) + } + } + + private var circleBackgroundColor: Color { + Color(red: 8/255, green: 251/255, blue: 135/255) + } + + private var checkmarkColor: Color { + Color.posSecondaryBackground + } } private extension PointOfSaleCardPresentPaymentSuccessMessageView { enum Constants { + static let imageName: String = "checkmark" + static let imageSize: CGSize = .init(width: 165, height: 165) + static let checkmarkSize: CGFloat = 56 + 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 = 16 } diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift index ff87608f244..5730d884213 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleAssets.swift @@ -10,6 +10,7 @@ enum PointOfSaleAssets: CaseIterable { case readerConnectionLowBattery case readerConnectionSuccess case shoppingBags + case successCheck var imageName: String { switch self { @@ -31,6 +32,8 @@ enum PointOfSaleAssets: CaseIterable { "pos-reader-connection-complete" case .shoppingBags: "shopping-bags" + case .successCheck: + "pos-success-check" } } } diff --git a/WooCommerce/Classes/POS/Presentation/TotalsView.swift b/WooCommerce/Classes/POS/Presentation/TotalsView.swift index 069057e8121..874a0a8d26b 100644 --- a/WooCommerce/Classes/POS/Presentation/TotalsView.swift +++ b/WooCommerce/Classes/POS/Presentation/TotalsView.swift @@ -76,7 +76,7 @@ struct TotalsView: View { private var backgroundColor: Color { switch viewModel.paymentState { case .cardPaymentSuccessful: - colorScheme == .light ? Color(.wooCommerceEmerald(.shade20)) : Color(red: 0/255, green: 81/255, blue: 57/255) + .posSecondaryBackground case .processingPayment: colorScheme == .light ? Color(.wooCommercePurple(.shade70)) : Color(.wooCommercePurple(.shade10)) default: @@ -195,9 +195,6 @@ private extension TotalsView { viewModel.startNewOrder() }, label: { HStack(spacing: Constants.newOrderButtonSpacing) { - Image(systemName: Constants.newOrderImageName) - .font(.body.bold()) - .aspectRatio(contentMode: .fit) Text(Localization.newOrder) .font(Constants.newOrderButtonFont) } @@ -322,12 +319,11 @@ private extension TotalsView { static let subtotalsShimmeringHeight: CGFloat = 36 static let totalShimmeringHeight: CGFloat = 40 - static let paymentsButtonSpacing: CGFloat = 52 + static let paymentsButtonSpacing: CGFloat = 80 static let paymentsButtonButtonSpacingAnimationDelay: CGFloat = 0.3 static let newOrderButtonSpacing: CGFloat = 12 - static let newOrderButtonPadding: CGFloat = 22 + static let newOrderButtonPadding: CGFloat = 32 static let newOrderButtonFont: POSFontStyle = .posBodyEmphasized - static let newOrderImageName: String = "arrow.uturn.backward" /// Used for synchronizing animations of shimmeringLine and textField static let matchedGeometrySubtotalId: String = "pos_totals_view_subtotal_matched_geometry_id" diff --git a/WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift b/WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift index f8a1e063bcb..ecc85fb0f0c 100644 --- a/WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift +++ b/WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift @@ -719,7 +719,8 @@ extension HubMenuViewModel { comment: "Title of the POS menu in the hub menu") static let posDescription = NSLocalizedString( - "Use the app as a cash register", + "hubMenu.pointOfSale.description", + value: "Accept payments at your physical store", comment: "Description of the POS menu in the hub menu") static let woocommerceAdmin = NSLocalizedString( diff --git a/WooCommerce/Resources/Images.xcassets/POS/pos-success-check.imageset/Contents.json b/WooCommerce/Resources/Images.xcassets/POS/pos-success-check.imageset/Contents.json new file mode 100644 index 00000000000..7a90e687c75 --- /dev/null +++ b/WooCommerce/Resources/Images.xcassets/POS/pos-success-check.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "pos-success-check.pdf", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/WooCommerce/Resources/Images.xcassets/POS/pos-success-check.imageset/pos-success-check.pdf b/WooCommerce/Resources/Images.xcassets/POS/pos-success-check.imageset/pos-success-check.pdf new file mode 100644 index 00000000000..893abe54bbf Binary files /dev/null and b/WooCommerce/Resources/Images.xcassets/POS/pos-success-check.imageset/pos-success-check.pdf differ