Merge pull request #8358 from woocommerce/issue/8355-update-tap-on-mobile-designs

[Mobile Payments] update tap on mobile designs

Author: joshheald

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -510,18 +510,6 @@ extension UIImage {
         return UIImage(named: "card-reader-scanning")!
     }
 
-    static var tempBuiltInReaderCheck: UIImage {
-        return UIImage(named: "temp-woo-tap-on-mobile-check")!
-    }
-
-    static var tempBuiltInReaderPrepare: UIImage {
-        return UIImage(named: "temp-woo-tap-on-mobile-prepare")!
-    }
-
-    static var tempBuiltInReaderPayment: UIImage {
-        return UIImage(named: "temp-woo-tap-on-mobile")!
-    }
-
     /// Found Card Reader
     ///
     static var cardReaderFound: UIImage {
@@ -1155,6 +1143,33 @@ extension UIImage {
     static var calendar: UIImage {
         return UIImage.gridicon(.calendar)
     }
+
+    // MARK: - Tap on Mobile flow images
+    /// Select reader type
+    ///
+    static var cardPaymentsSelectReaderType: UIImage {
+        return UIImage(named: "card-payments-select-reader-type")!
+    }
+
+    /// Preparing built-in card reader: intended for use before we're ready to take payment
+    ///
+    static var preparingBuiltInReader: UIImage {
+        return UIImage(named: "built-in-reader-preparing")!
+    }
+
+    /// Built-in reader Processing: intended for use when a payment is
+    /// underway with the iPhone's built in reader.
+    ///
+    static var builtInReaderProcessing: UIImage {
+        return UIImage(named: "built-in-reader-processing")!
+    }
+
+    /// Built-in reader Success: intended for use when a transaction is complete
+    /// with the built-in reader
+    ///
+    static var builtInReaderSuccess: UIImage {
+        return UIImage(named: "built-in-reader-payment-success")!
+    }
 }
 
 private extension UIImage {

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalBuiltInConnectingToReader.swift

@@ -3,24 +3,24 @@ import UIKit
 /// Modal presented when we are connecting to a reader
 ///
 final class CardPresentModalBuiltInConnectingToReader: CardPresentPaymentsModalViewModel {
-    let textMode: PaymentsModalTextMode = .reducedBottomInfo
+    let textMode: PaymentsModalTextMode = .fullInfo
     let actionsMode: PaymentsModalActionsMode = .none
 
     let topTitle: String = Localization.title
 
     var topSubtitle: String?
 
-    let image: UIImage = .tempBuiltInReaderCheck
+    let image: UIImage = .preparingBuiltInReader
 
     let primaryButtonTitle: String? = nil
 
     let secondaryButtonTitle: String? = nil
 
     let auxiliaryButtonTitle: String? = nil
 
-    let bottomTitle: String? = Localization.instruction
+    let bottomTitle: String? = nil
 
-    var bottomSubtitle: String?
+    var bottomSubtitle: String? = Localization.instruction
 
     var accessibilityLabel: String? {
         return topTitle + Localization.instruction

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalBuiltInFollowReaderInstructions.swift

@@ -22,7 +22,7 @@ final class CardPresentModalBuiltInFollowReaderInstructions: CardPresentPayments
         amount
     }
 
-    let image: UIImage = .cardPresentImage
+    let image: UIImage = .preparingBuiltInReader
 
     let primaryButtonTitle: String? = nil
 

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalBuiltInReaderCheckingDeviceSupport.swift

@@ -6,14 +6,14 @@ final class CardPresentModalBuiltInReaderCheckingDeviceSupport: CardPresentPayme
     /// Called when cancel button is tapped
     private let cancelAction: () -> Void
 
-    let textMode: PaymentsModalTextMode = .reducedBottomInfo
+    let textMode: PaymentsModalTextMode = .fullInfo
     let actionsMode: PaymentsModalActionsMode = .secondaryActionAndAuxiliaryButton
 
     let topTitle: String = Localization.title
 
     var topSubtitle: String?
 
-    let image: UIImage = .tempBuiltInReaderPrepare
+    let image: UIImage = .preparingBuiltInReader
 
     let primaryButtonTitle: String? = nil
 
@@ -44,15 +44,12 @@ final class CardPresentModalBuiltInReaderCheckingDeviceSupport: CardPresentPayme
         return result
     }
 
-    let bottomTitle: String? = Localization.instruction
+    let bottomTitle: String? = nil
 
-    var bottomSubtitle: String?
+    var bottomSubtitle: String? = Localization.instruction
 
     var accessibilityLabel: String? {
-        guard let bottomTitle = bottomTitle else {
-            return topTitle
-        }
-        return topTitle + bottomTitle
+        return topTitle + Localization.instruction
     }
 
     init(cancel: @escaping () -> Void) {

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalBuiltInReaderProcessing.swift

@@ -0,0 +1,70 @@
+import UIKit
+
+
+/// Modal presented while processing a payment
+final class CardPresentModalBuiltInReaderProcessing: CardPresentPaymentsModalViewModel {
+
+    /// Customer name
+    private let name: String
+
+    /// Charge amount
+    private let amount: String
+
+    let textMode: PaymentsModalTextMode = .reducedBottomInfo
+    let actionsMode: PaymentsModalActionsMode = .none
+
+    var topTitle: String {
+        name
+    }
+
+    var topSubtitle: String? {
+        amount
+    }
+
+    let image: UIImage = .builtInReaderProcessing
+
+    let primaryButtonTitle: String? = nil
+
+    let secondaryButtonTitle: String? = nil
+
+    let auxiliaryButtonTitle: String? = nil
+
+    let bottomTitle: String?
+
+    let bottomSubtitle: String? = nil
+
+    let accessibilityLabel: String?
+
+    init(name: String, amount: String) {
+        self.name = name
+        self.amount = amount
+        self.bottomTitle = Localization.processingPayment
+        self.accessibilityLabel = Localization.processingPaymentAccessibilityLabel
+    }
+
+    func didTapPrimaryButton(in viewController: UIViewController?) {
+        //
+    }
+
+    func didTapSecondaryButton(in viewController: UIViewController?) {
+        //
+    }
+
+    func didTapAuxiliaryButton(in viewController: UIViewController?) {
+        //
+    }
+}
+
+private extension CardPresentModalBuiltInReaderProcessing {
+    enum Localization {
+        static let processingPayment = NSLocalizedString(
+            "Processing payment...",
+            comment: "Indicates that a payment is being processed"
+        )
+
+        static let processingPaymentAccessibilityLabel = NSLocalizedString(
+            "Processing payment",
+            comment: "VoiceOver accessibility label. Indicates that a payment is being processed"
+        )
+    }
+}

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalBuiltInSuccess.swift

@@ -0,0 +1,88 @@
+import UIKit
+
+/// Modal presented when the payment has been collected successfully
+final class CardPresentModalBuiltInSuccess: CardPresentPaymentsModalViewModel {
+
+    /// Closure to execute when primary button is tapped
+    private let printReceiptAction: () -> Void
+
+
+    /// Closure to execute when secondary button is tapped
+    private let emailReceiptAction: () -> Void
+
+    /// Closure to execute when auxiliary button is tapped.
+    private let noReceiptAction: () -> Void
+
+    let textMode: PaymentsModalTextMode = .noBottomInfo
+    let actionsMode: PaymentsModalActionsMode = .twoActionAndAuxiliary
+
+    let topTitle: String = Localization.paymentSuccessful
+
+    var topSubtitle: String? = nil
+
+    let image: UIImage = .builtInReaderSuccess
+
+    let primaryButtonTitle: String? = Localization.printReceipt
+
+    let secondaryButtonTitle: String? = Localization.emailReceipt
+
+    let auxiliaryButtonTitle: String? = Localization.saveReceiptAndContinue
+
+    let bottomTitle: String? = nil
+
+    let bottomSubtitle: String? = nil
+
+    var accessibilityLabel: String? {
+        return topTitle
+    }
+
+    init(printReceipt: @escaping () -> Void,
+         emailReceipt: @escaping () -> Void,
+         noReceiptAction: @escaping () -> Void) {
+        self.printReceiptAction = printReceipt
+        self.emailReceiptAction = emailReceipt
+        self.noReceiptAction = noReceiptAction
+    }
+
+    func didTapPrimaryButton(in viewController: UIViewController?) {
+        viewController?.dismiss(animated: true, completion: { [weak self] in
+            self?.printReceiptAction()
+        })
+    }
+
+    func didTapSecondaryButton(in viewController: UIViewController?) {
+        viewController?.dismiss(animated: true, completion: { [weak self] in
+            self?.emailReceiptAction()
+        })
+    }
+
+    func didTapAuxiliaryButton(in viewController: UIViewController?) {
+        viewController?.dismiss(animated: true) { [weak self] in
+            self?.noReceiptAction()
+        }
+    }
+}
+
+private extension CardPresentModalBuiltInSuccess {
+    enum Localization {
+        static let paymentSuccessful = NSLocalizedString(
+            "Payment successful",
+            comment: "Label informing users that the payment succeeded. Presented to users when a payment is collected"
+        )
+
+        static let printReceipt = NSLocalizedString(
+            "Print receipt",
+            comment: "Button to print receipts. Presented to users after a payment has been successfully collected"
+        )
+
+        static let emailReceipt = NSLocalizedString(
+            "Email receipt",
+            comment: "Button to email receipts. Presented to users after a payment has been successfully collected"
+        )
+
+        static let saveReceiptAndContinue = NSLocalizedString(
+            "Save receipt and continue",
+            comment: "Button when the user does not want to print or email receipt. Presented to users after a payment has been successfully collected"
+        )
+    }
+}

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalBuiltInSuccessWithoutEmail.swift

@@ -0,0 +1,73 @@
+import UIKit
+
+/// Modal presented when the payment has been collected successfully
+final class CardPresentModalBuiltInSuccessWithoutEmail: CardPresentPaymentsModalViewModel {
+
+    /// Closure to execute when primary button is tapped
+    private let printReceiptAction: () -> Void
+
+    /// Closure to execute when secondary button is tapped
+    private let noReceiptAction: () -> Void
+
+    let textMode: PaymentsModalTextMode = .noBottomInfo
+    let actionsMode: PaymentsModalActionsMode = .twoAction
+
+    let topTitle: String = Localization.paymentSuccessful
+
+    var topSubtitle: String? = nil
+
+    let image: UIImage = .builtInReaderSuccess
+
+    let primaryButtonTitle: String? = Localization.printReceipt
+
+    let secondaryButtonTitle: String? = Localization.saveReceiptAndContinue
+
+    let auxiliaryButtonTitle: String? = nil
+
+    let bottomTitle: String? = nil
+
+    let bottomSubtitle: String? = nil
+
+    var accessibilityLabel: String? {
+        return Localization.paymentSuccessful
+    }
+
+    init(printReceipt: @escaping () -> Void,
+         noReceiptAction: @escaping () -> Void) {
+        self.printReceiptAction = printReceipt
+        self.noReceiptAction = noReceiptAction
+    }
+
+    func didTapPrimaryButton(in viewController: UIViewController?) {
+        viewController?.dismiss(animated: true, completion: { [weak self] in
+            self?.printReceiptAction()
+        })
+    }
+
+    func didTapSecondaryButton(in viewController: UIViewController?) {
+        viewController?.dismiss(animated: true) { [weak self] in
+            self?.noReceiptAction()
+        }
+    }
+
+    func didTapAuxiliaryButton(in viewController: UIViewController?) {}
+}
+
+private extension CardPresentModalBuiltInSuccessWithoutEmail {
+    enum Localization {
+        static let paymentSuccessful = NSLocalizedString(
+            "Payment successful",
+            comment: "Label informing users that the payment succeeded. Presented to users when a payment is collected"
+        )
+
+        static let printReceipt = NSLocalizedString(
+            "Print receipt",
+            comment: "Button to print receipts. Presented to users after a payment has been successfully collected"
+        )
+
+        static let saveReceiptAndContinue = NSLocalizedString(
+            "Save receipt and continue",
+            comment: "Button when the user does not want to print the receipt. Presented to users after a payment has been successfully collected"
+        )
+    }
+}

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalSelectSearchType.swift

@@ -10,7 +10,7 @@ final class CardPresentModalSelectSearchType: CardPresentPaymentsModalViewModel
 
     var topSubtitle: String? = nil
 
-    var image: UIImage = .paymentsLoading
+    var image: UIImage = .cardPaymentsSelectReaderType
 
     var primaryButtonTitle: String?
 
@@ -64,7 +64,7 @@ private extension CardPresentModalSelectSearchType {
             "reader type. Only shown when supported on their device.")
 
         static let description = NSLocalizedString(
-            "Your iPhone can be used as a card reader, or you can connect to an external reader via bluetooth.",
+            "Your iPhone can be used as a card reader, or you can connect to an external reader via Bluetooth.",
             comment: "The description on the alert shown when connecting a card reader, asking the user to choose a " +
             "reader type. Only shown when supported on their device.")