-
Notifications
You must be signed in to change notification settings - Fork 120
[Scan to Pay] Show Scan to Pay screen from Payments Methods #9747
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
ae876fd
Show Scan to Pay screen from Payments Methods
toupper e6dccc8
Add unit test
toupper e4754a9
Revert schema change
toupper a31c8dd
Add Layout constants
toupper edb450b
Add a delay so dismiss animations don't clash.
toupper 5ae5989
Remove unnecessary import.
toupper File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
WooCommerce/Classes/ViewRelated/Orders/ScanToPay/ScanToPayView.swift
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import SwiftUI | ||
|
|
||
| struct ScanToPayView: View { | ||
| let viewModel: ScanToPayViewModel | ||
| let onSuccess: (() -> Void) | ||
|
|
||
| @Environment(\.dismiss) var dismiss | ||
|
|
||
| var body: some View { | ||
| ZStack { | ||
| Color.black.opacity(Layout.backgroundOpacity).edgesIgnoringSafeArea(.all) | ||
| VStack { | ||
| VStack(alignment: .center, spacing: Layout.scanToPayBoxSpacing) { | ||
| if let qrCodeImage = viewModel.generateQRCodeImage() { | ||
| Text(Localization.title) | ||
| .foregroundColor(.white) | ||
| Image(uiImage: qrCodeImage) | ||
| .interpolation(.none) | ||
| .resizable() | ||
| .frame(width: Layout.qrCodeWidth, height: Layout.qrCodeHeight) | ||
| DoneButton() { | ||
| dismiss() | ||
| DispatchQueue.main.asyncAfter(deadline: .now() + Constants.onSuccessCallDelayAfterDismiss) { | ||
| onSuccess() | ||
| } | ||
| } | ||
| .buttonStyle(PrimaryButtonStyle()) | ||
| } else { | ||
| Text(Localization.errorMessage) | ||
| .foregroundColor(.white) | ||
| .multilineTextAlignment(.center) | ||
| DoneButton() { | ||
| dismiss() | ||
| } | ||
| } | ||
| } | ||
| .padding(Layout.scanToPayBoxSpacing) | ||
| .frame(maxWidth: .infinity, alignment: .center) | ||
| .background(Color(.gray(.shade70))) | ||
| .cornerRadius(Layout.scanToPayBoxCornerRadius) | ||
|
|
||
| } | ||
| .padding(Layout.scanToPayBoxOutterPadding) | ||
| .frame(maxWidth: .infinity, alignment: .center) | ||
| } | ||
| } | ||
|
|
||
| private struct DoneButton: View { | ||
| let onButtonTapped: (() -> Void) | ||
| var body: some View { | ||
| Button(Localization.doneButtontitle) { | ||
| onButtonTapped() | ||
| } | ||
| .buttonStyle(PrimaryButtonStyle()) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| extension ScanToPayView { | ||
| enum Constants { | ||
| static let onSuccessCallDelayAfterDismiss: TimeInterval = 1 | ||
| } | ||
| enum Localization { | ||
| static let title = NSLocalizedString("Scan QR and follow instructions", comment: "Title text on the Scan to Pay screen") | ||
| static let doneButtontitle = NSLocalizedString("Done", comment: "Button title to close the Scan to Pay screen") | ||
| static let errorMessage = NSLocalizedString("Error generating QR Code. Please try again later", | ||
| comment: "Error message in the Scan to Pay screen when the code cannot be generated.") | ||
| } | ||
|
|
||
| enum Layout { | ||
| static let backgroundOpacity: CGFloat = 0.5 | ||
| static let scanToPayBoxSpacing: CGFloat = 20 | ||
| static let qrCodeWidth: CGFloat = 270 | ||
| static let qrCodeHeight: CGFloat = 300 | ||
| static let scanToPayBoxCornerRadius: CGFloat = 8 | ||
| static let scanToPayBoxOutterPadding: CGFloat = 50 | ||
| } | ||
| } |
28 changes: 28 additions & 0 deletions
28
WooCommerce/Classes/ViewRelated/Orders/ScanToPay/ScanToPayViewModel.swift
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import Foundation | ||
| import CoreImage.CIFilterBuiltins | ||
| import UIKit | ||
|
|
||
| struct ScanToPayViewModel { | ||
| private let paymentURL: URL? | ||
|
|
||
| init(paymentURL: URL?) { | ||
| self.paymentURL = paymentURL | ||
| } | ||
|
|
||
| func generateQRCodeImage() -> UIImage? { | ||
| guard let paymentURLString = paymentURL?.absoluteString else { | ||
| return nil | ||
| } | ||
|
|
||
| let context = CIContext() | ||
| let filter = CIFilter.qrCodeGenerator() | ||
| filter.message = Data(paymentURLString.utf8) | ||
|
|
||
| guard let outputImage = filter.outputImage, | ||
| let cgImage = context.createCGImage(outputImage, from: outputImage.extent) else { | ||
| return nil | ||
| } | ||
|
|
||
| return UIImage(cgImage: cgImage) | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
WooFoundation/WooFoundation/Utilities/FullScreenCoverClearBackgroundView.swift
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import SwiftUI | ||
|
|
||
| /// Use this view to clear the background of a view in SwiftUI after it's presented with `fullScreenCover` | ||
| /// | ||
| /// Use it as follows: | ||
| /// | ||
| ///``` | ||
| /// .fullScreenCover(isPresented: $showingFooView) { | ||
| /// FooView() | ||
| /// .background(FullScreenCoverClearBackgroundView()) | ||
| /// } | ||
| /// ``` | ||
| /// | ||
| public struct FullScreenCoverClearBackgroundView: UIViewRepresentable { | ||
| public init() {} | ||
|
|
||
| public func makeUIView(context: Context) -> UIView { | ||
| return InnerView() | ||
| } | ||
|
|
||
| public func updateUIView(_ uiView: UIView, context: Context) { | ||
| } | ||
|
|
||
| private class InnerView: UIView { | ||
| override func didMoveToWindow() { | ||
| super.didMoveToWindow() | ||
|
|
||
| superview?.superview?.backgroundColor = .clear | ||
| } | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not a blocker: Should we abstract and extract this method somewhere else? Let's say an extension of UIImage, or as an Utility method in WooFoundation, then change the signature to something like the following
generateQRCodeFromPaymentDetails(paymentURLString: URL, message: String) -> UIImage?This way the view model doesn't have to know about the QR generation implementation details, we just pass the URL, the message, and let the system return it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point, I also considered that and preferred leaving it in the view model. The rationale is that at the moment we only generate a QR code here, and the function is simple enough to keep it in the view model. Furthermore, generating an image that we're going to display in the view from model data matches the responsibility of a view model.
If more logic is added to the QR code generation, e.g., adding the woo logo to it, I will extract it to its own class/extension.