Merge pull request #7545 from woocommerce/issue/7518-add-learn-more-action

[Mobile Payments] Add a “Learn more” action to the connecting dialog

Author: iamgabrielma

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalScanningForReader.swift

@@ -7,7 +7,7 @@ final class CardPresentModalScanningForReader: CardPresentPaymentsModalViewModel
     private let cancelAction: () -> Void
 
     let textMode: PaymentsModalTextMode = .reducedBottomInfo
-    let actionsMode: PaymentsModalActionsMode = .secondaryOnlyAction
+    let actionsMode: PaymentsModalActionsMode = .secondaryActionAndAuxiliaryButton
 
     let topTitle: String = Localization.title
 
@@ -21,6 +21,29 @@ final class CardPresentModalScanningForReader: CardPresentPaymentsModalViewModel
 
     let auxiliaryButtonTitle: String? = nil
 
+    let auxiliaryButtonimage: UIImage? = .infoOutlineImage
+
+    var auxiliaryAttributedButtonTitle: NSAttributedString? {
+        let result = NSMutableAttributedString(
+            string: .localizedStringWithFormat(
+                Localization.learnMoreText,
+                Localization.learnMoreLink
+            ),
+            attributes: [.foregroundColor: UIColor.text]
+        )
+        result.replaceFirstOccurrence(
+            of: Localization.learnMoreLink,
+            with: NSAttributedString(
+                string: Localization.learnMoreLink,
+                attributes: [
+                    .foregroundColor: UIColor.accent,
+                    .underlineStyle: NSUnderlineStyle.single.rawValue
+                ]
+            ))
+        result.addAttribute(.font, value: UIFont.footnote, range: NSRange(location: 0, length: result.length))
+        return result
+    }
+
     let bottomTitle: String? = Localization.instruction
 
     var bottomSubtitle: String?
@@ -43,10 +66,20 @@ final class CardPresentModalScanningForReader: CardPresentPaymentsModalViewModel
         viewController?.dismiss(animated: true, completion: nil)
     }
 
-    func didTapAuxiliaryButton(in viewController: UIViewController?) {}
+    func didTapAuxiliaryButton(in viewController: UIViewController?) {
+        ServiceLocator.analytics.track(.cardPresentOnboardingLearnMoreTapped)
+        guard let viewController = viewController else {
+            return
+        }
+        WebviewHelper.launch(Constants.learnMoreURL.asURL(), with: viewController)
+    }
 }
 
 private extension CardPresentModalScanningForReader {
+    enum Constants {
+        static let learnMoreURL = WooConstants.URLs.inPersonPaymentsLearnMoreWCPay
+    }
+
     enum Localization {
         static let title = NSLocalizedString(
             "Scanning for reader",
@@ -62,5 +95,23 @@ private extension CardPresentModalScanningForReader {
             "Cancel",
             comment: "Label for a cancel button"
         )
+
+        static let learnMoreLink = NSLocalizedString(
+            "Learn more",
+            comment: """
+                     A label prompting users to learn more about In-Person Payments.
+                     This is the link to the website, and forms part of a longer sentence which it should be considered a part of.
+                     """
+        )
+
+        static let learnMoreText = NSLocalizedString(
+            "%1$@ about In\u{2011}Person Payments",
+            comment: """
+                     A label prompting users to learn more about In-Person Payments.
+                     \u{2011} is a special character that acts as nonbreaking hyphen for "-" in the "In-Person" string.
+                     %1$@ is a placeholder that always replaced with \"Learn more\" string,
+                     which should be translated separately and considered part of this sentence.
+                     """
+        )
     }
 }

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentPaymentsModalViewModel.swift

@@ -27,6 +27,12 @@ protocol CardPresentPaymentsModalViewModel {
     /// Provides a title for an auxiliary button
     var auxiliaryButtonTitle: String? { get }
 
+    /// Provides a title as a NSAttributedString for an auxiliary button
+    var auxiliaryAttributedButtonTitle: NSAttributedString? { get }
+
+    /// Provides an image for the auxiliary button
+    var auxiliaryButtonimage: UIImage? { get }
+
     /// The title in the bottom section of the modal. Right below the image
     var bottomTitle: String? { get }
 
@@ -83,9 +89,25 @@ enum PaymentsModalActionsMode {
     /// One secondary action button
     case secondaryOnlyAction
 
+    /// One secondary action button and an auxiliary button
+    case secondaryActionAndAuxiliaryButton
+
     /// Two action buttons
     case twoAction
 
     /// Two action buttons and an auxiliary button
     case twoActionAndAuxiliary
+
+}
+
+extension CardPresentPaymentsModalViewModel {
+    /// Default implementation for NSAttributedString auxiliary button title.
+    /// If is not set directly by each Modal's ViewModel, it will default to nil
+    var auxiliaryAttributedButtonTitle: NSAttributedString? {
+        get { return nil }
+    }
+
+    var auxiliaryButtonimage: UIImage? {
+        get { return nil }
+    }
 }

WooCommerce/Classes/ViewRelated/CardPresentPayments/CardPresentPaymentsModalViewController.swift

@@ -158,9 +158,11 @@ private extension CardPresentPaymentsModalViewController {
     }
 
     func styleAuxiliaryButton() {
-        auxiliaryButton.applyLinkButtonStyle()
-        auxiliaryButton.titleLabel?.adjustsFontSizeToFitWidth = true
+        if viewModel.actionsMode != .secondaryActionAndAuxiliaryButton {
+            auxiliaryButton.applyLinkButtonStyle()
+        }
         auxiliaryButton.titleLabel?.minimumScaleFactor = 0.5
+        auxiliaryButton.titleLabel?.adjustsFontSizeToFitWidth = true
     }
 
     func initializeContent() {
@@ -277,14 +279,24 @@ private extension CardPresentPaymentsModalViewController {
     }
 
     func configureAuxiliaryButton() {
+
         guard shouldShowAuxiliaryButton() else {
             auxiliaryButton.isHidden = true
             return
         }
 
-        auxiliaryButton.setTitleWithoutAnimation(viewModel.auxiliaryButtonTitle, for: .normal)
         auxiliaryButton.isHidden = false
         auxiliaryButton.accessibilityIdentifier = Accessibility.auxiliaryButton
+        // Prevents UI flicker when loading different content
+        UIView.performWithoutAnimation {
+            auxiliaryButton.setTitle(viewModel.auxiliaryButtonTitle, for: .normal)
+            auxiliaryButton.setAttributedTitle(viewModel.auxiliaryAttributedButtonTitle, for: .normal)
+            auxiliaryButton.setImage(viewModel.auxiliaryButtonimage, for: .normal)
+            if viewModel.auxiliaryButtonimage != nil {
+                auxiliaryButton.distributeTitleAndImage(spacing: 8.0)
+            }
+            view.layoutIfNeeded()
+        }
     }
 
     func configureSpacer() {
@@ -338,12 +350,12 @@ private extension CardPresentPaymentsModalViewController {
     }
 
     func shouldShowBottomActionButton() -> Bool {
-        [.secondaryOnlyAction, .twoAction, .twoActionAndAuxiliary]
+        [.secondaryOnlyAction, .twoAction, .twoActionAndAuxiliary, .secondaryActionAndAuxiliaryButton]
             .contains(viewModel.actionsMode)
     }
 
     func shouldShowAuxiliaryButton() -> Bool {
-        viewModel.actionsMode == .twoActionAndAuxiliary
+        [.twoActionAndAuxiliary, .secondaryActionAndAuxiliaryButton].contains(viewModel.actionsMode)
     }
 }