Merge pull request #7613 from woocommerce/issue/7591-toggle-cod-IPP-row-ui

[Mobile Payments] UI for Enable Pay in Person toggle switch in IPP settings

Author: joshheald

WooCommerce/Classes/Authentication/AuthenticationManager.swift

@@ -52,7 +52,7 @@ class AuthenticationManager: Authentication {
                                                                 wpcomScheme: ApiCredentials.dotcomAuthScheme,
                                                                 wpcomTermsOfServiceURL: WooConstants.URLs.termsOfService.rawValue,
                                                                 wpcomAPIBaseURL: Settings.wordpressApiBaseURL,
-                                                                whatIsWPComURL: WooConstants.URLs.whatIsWPComURL.rawValue,
+                                                                whatIsWPComURL: WooConstants.URLs.whatIsWPCom.rawValue,
                                                                 googleLoginClientId: ApiCredentials.googleClientId,
                                                                 googleLoginServerClientId: ApiCredentials.googleServerId,
                                                                 googleLoginScheme: ApiCredentials.googleAuthScheme,

WooCommerce/Classes/Authentication/Navigation Exceptions/NotWPAccountViewModel.swift

@@ -73,7 +73,7 @@ private extension NotWPAccountViewModel {
             return
         }
         ServiceLocator.analytics.track(.whatIsWPComOnInvalidEmailScreenTapped)
-        WebviewHelper.launch(WooConstants.URLs.whatIsWPComURL.asURL(), with: viewController)
+        WebviewHelper.launch(WooConstants.URLs.whatIsWPCom.asURL(), with: viewController)
     }
 
     func needHelpFindingEmailButtonTapped() {

WooCommerce/Classes/System/WooConstants.swift

@@ -55,7 +55,7 @@ extension WooConstants {
         ///
         /// Displayed by the Authenticator in the Continue with WordPress.com flow.
         ///
-        case whatIsWPComURL = "https://woocommerce.com/document/what-is-a-wordpress-com-account/"
+        case whatIsWPCom = "https://woocommerce.com/document/what-is-a-wordpress-com-account/"
 
         /// Terms of Service Website. Displayed by the Authenticator (when / if needed).
         ///
@@ -186,11 +186,11 @@ extension WooConstants {
 #endif
         /// URL for the Enable Cash on Delivery (or Pay in Person) onboarding step's learn more link using the Stripe plugin
         /// 
-        case stripeCashOnDeliveryLearnMoreUrl = "https://woocommerce.com/document/stripe/accept-in-person-payments-with-stripe/#section-8"
+        case stripeCashOnDeliveryLearnMore = "https://woocommerce.com/document/stripe/accept-in-person-payments-with-stripe/#section-8"
 
         /// URL for the Enable Cash on Delivery (or Pay in Person) onboarding step's learn more link using the WCPay plugin
         ///
-        case wcPayCashOnDeliveryLearnMoreUrl =
+        case wcPayCashOnDeliveryLearnMore =
                 "https://woocommerce.com/document/payments/getting-started-with-in-person-payments-with-woocommerce-payments/#add-cod-payment-method"
 
         /// Returns the URL version of the receiver

WooCommerce/Classes/ViewRelated/Dashboard/Settings/CardReadersV2/CardReaderSettingsSearchingViewController.swift

@@ -150,7 +150,7 @@ struct CardReaderSettingsSearchingView: View {
             InPersonPaymentsLearnMore()
                 .customOpenURL(action: { url in
                     switch url {
-                    case InPersonPaymentsLearnMore.learnMoreURL:
+                    case LearnMoreViewModel.learnMoreURL:
                         if let url = learnMoreUrl {
                             showURL?(url)
                         }

WooCommerce/Classes/ViewRelated/Dashboard/Settings/In-Person Payments/CardPresentPaymentsPlugin+CashOnDelivery.swift

@@ -0,0 +1,13 @@
+import Foundation
+import Yosemite
+
+extension CardPresentPaymentsPlugin {
+    var cashOnDeliveryLearnMoreURL: URL {
+        switch self {
+        case .wcPay:
+            return WooConstants.URLs.wcPayCashOnDeliveryLearnMore.asURL()
+        case .stripe:
+            return WooConstants.URLs.stripeCashOnDeliveryLearnMore.asURL()
+        }
+    }
+}

WooCommerce/Classes/ViewRelated/Dashboard/Settings/In-Person Payments/InPersonPaymentsCashOnDeliveryPaymentGatewayHelpers.swift

@@ -0,0 +1,38 @@
+import Foundation
+import Yosemite
+
+extension PaymentGateway {
+    /// Creates a PaymentGateway with default settings suitable for enabling Pay in Person on a store.
+    /// This provides customer-facing strings to update the store's gateway.
+    /// The gateway is enabled.
+    static func defaultPayInPersonGateway(siteID: Int64) -> PaymentGateway {
+        PaymentGateway(siteID: siteID,
+                       gatewayID: Constants.cashOnDeliveryGatewayID,
+                       title: Localization.cashOnDeliveryCheckoutTitle,
+                       description: Localization.cashOnDeliveryCheckoutDescription,
+                       enabled: true,
+                       features: [.products],
+                       instructions: Localization.cashOnDeliveryCheckoutInstructions)
+    }
+
+    enum Constants {
+        static let cashOnDeliveryGatewayID = "cod"
+    }
+
+    private enum Localization {
+        static let cashOnDeliveryCheckoutTitle = NSLocalizedString(
+            "Pay in Person",
+            comment: "Customer-facing title for the payment option added to the store checkout when the merchant enables " +
+            "Pay in Person")
+
+        static let cashOnDeliveryCheckoutDescription = NSLocalizedString(
+            "Pay by card or another accepted payment method",
+            comment: "Customer-facing description showing more details about the Pay in Person option which is added to " +
+            "the store checkout when the merchant enables Pay in Person")
+
+        static let cashOnDeliveryCheckoutInstructions = NSLocalizedString(
+            "Pay by card or another accepted payment method",
+            comment: "Customer-facing instructions shown on Order Thank-you pages and confirmation emails, showing more " +
+            "details about the Pay in Person option added to the store checkout when the merchant enables Pay in Person")
+    }
+}

WooCommerce/Classes/ViewRelated/Dashboard/Settings/In-Person Payments/InPersonPaymentsLearnMore.swift

@@ -1,22 +1,12 @@
 import SwiftUI
 
 struct InPersonPaymentsLearnMore: View {
-    static let learnMoreURL = URL(string: "woocommerce://in-person-payments/learn-more")!
     @Environment(\.customOpenURL) var customOpenURL
 
-    let url: URL
-    let linkText: String
-    let formatText: String
-    let analyticReason: String?
+    private let viewModel: LearnMoreViewModel
 
-    init(url: URL = learnMoreURL,
-         linkText: String = Localization.learnMoreLink,
-         formatText: String = Localization.learnMoreText,
-         analyticReason: String? = nil) {
-        self.url = url
-        self.linkText = linkText
-        self.formatText = formatText
-        self.analyticReason = analyticReason
+    init(viewModel: LearnMoreViewModel = LearnMoreViewModel()) {
+        self.viewModel = viewModel
     }
 
     private let cardPresentConfiguration = CardPresentConfigurationLoader().configuration
@@ -27,38 +17,18 @@ struct InPersonPaymentsLearnMore: View {
                 .resizable()
                 .foregroundColor(Color(.neutral(.shade60)))
                 .frame(width: iconSize, height: iconSize)
-            AttributedText(learnMoreAttributedString)
+            AttributedText(viewModel.learnMoreAttributedString)
         }
             .padding(.vertical, Constants.verticalPadding)
             .onTapGesture {
-                ServiceLocator.analytics.track(
-                    event: WooAnalyticsEvent.InPersonPayments.cardPresentOnboardingLearnMoreTapped(
-                        reason: analyticReason ?? "",
-                        countryCode: cardPresentConfiguration.countryCode))
-                customOpenURL?(url)
+                viewModel.learnMoreTapped()
+                customOpenURL?(viewModel.url)
             }
     }
 
     var iconSize: CGFloat {
         UIFontMetrics(forTextStyle: .subheadline).scaledValue(for: 20)
     }
-
-    private var learnMoreAttributedString: NSAttributedString {
-        let result = NSMutableAttributedString(
-            string: .localizedStringWithFormat(formatText, linkText),
-            attributes: [.foregroundColor: UIColor.textSubtle]
-        )
-        result.replaceFirstOccurrence(
-            of: linkText,
-            with: NSAttributedString(
-                string: linkText,
-                attributes: [.foregroundColor: UIColor.textLink]
-            ))
-
-        // https://github.com/gonzalezreal/AttributedText/issues/11
-        result.addAttribute(.font, value: UIFont.footnote, range: NSRange(location: 0, length: result.length))
-        return result
-    }
 }
 
 private enum Constants {
@@ -76,14 +46,6 @@ private enum Localization {
         comment: "Generic error message when In-Person Payments is unavailable"
     )
 
-    static let learnMoreLink = NSLocalizedString(
-        "Learn more",
-        comment: """
-                 A label prompting users to learn more about card readers.
-                 This part 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 accepting payments with your mobile device and ordering card readers",
         comment: """

WooCommerce/Classes/ViewRelated/Dashboard/Settings/In-Person Payments/InPersonPaymentsMenuViewController.swift

@@ -12,6 +12,15 @@ final class InPersonPaymentsMenuViewController: UIViewController {
     private let featureFlagService: FeatureFlagService
     private let cardPresentPaymentsOnboardingUseCase: CardPresentPaymentsOnboardingUseCase
     private var cancellables: Set<AnyCancellable> = []
+    private lazy var learnMoreViewModel: LearnMoreViewModel = {
+        LearnMoreViewModel(url: WooConstants.URLs.wcPayCashOnDeliveryLearnMore.asURL(),
+                           linkText: Localization.toggleEnableCashOnDeliveryLearnMoreLink,
+                           formatText: Localization.toggleEnableCashOnDeliveryLearnMoreFormat,
+                           tappedAnalyticEvent: WooAnalyticsEvent.InPersonPayments.cardPresentOnboardingLearnMoreTapped(
+                            reason: "reason",
+                            countryCode: configurationLoader.configuration.countryCode))
+    }()
+    private let inPersonPaymentsMenuViewModel: InPersonPaymentsMenuViewModel
 
     /// No Manuals to be shown in a country where IPP is not supported
     /// 
@@ -44,6 +53,7 @@ final class InPersonPaymentsMenuViewController: UIViewController {
         self.featureFlagService = featureFlagService
         self.cardPresentPaymentsOnboardingUseCase = CardPresentPaymentsOnboardingUseCase()
         configurationLoader = CardPresentConfigurationLoader()
+        self.inPersonPaymentsMenuViewModel = InPersonPaymentsMenuViewModel()
 
         super.init(nibName: nil, bundle: nil)
     }
@@ -58,6 +68,7 @@ final class InPersonPaymentsMenuViewController: UIViewController {
         configureSections()
         configureTableView()
         registerTableViewCells()
+        configureTableReload()
         runCardPresentPaymentsOnboarding()
     }
 }
@@ -77,7 +88,7 @@ private extension InPersonPaymentsMenuViewController {
     }
 
     func refreshAfterNewOnboardingState(_ state: CardPresentPaymentOnboardingState) {
-        self.pluginState = nil
+        pluginState = nil
 
         guard state != .loading else {
             self.activityIndicator?.startAnimating()
@@ -86,22 +97,24 @@ private extension InPersonPaymentsMenuViewController {
 
         switch state {
         case let .completed(newPluginState):
-            self.pluginState = newPluginState
-            self.dismissCardPresentPaymentsOnboardingNoticeIfPresent()
-            self.dismissOnboardingIfPresented()
+            pluginState = newPluginState
+            dismissCardPresentPaymentsOnboardingNoticeIfPresent()
+            dismissOnboardingIfPresented()
         case let .selectPlugin(pluginSelectionWasCleared):
             // If it was cleared it means that we triggered it manually (e.g by tapping in this view on the plugin selection row)
             // No need to show the onboarding notice
             if !pluginSelectionWasCleared {
-                self.showCardPresentPaymentsOnboardingNotice()
+                showCardPresentPaymentsOnboardingNotice()
             }
         default:
-            self.showCardPresentPaymentsOnboardingNotice()
+            showCardPresentPaymentsOnboardingNotice()
         }
 
-        self.activityIndicator?.stopAnimating()
-        self.configureSections()
-        self.tableView.reloadData()
+        updateViewModelSelectedPlugin(state: state)
+
+        activityIndicator?.stopAnimating()
+        configureSections()
+        tableView.reloadData()
     }
 
     func showCardPresentPaymentsOnboardingNotice() {
@@ -119,6 +132,17 @@ private extension InPersonPaymentsMenuViewController {
         permanentNoticePresenter.dismiss()
     }
 
+    func updateViewModelSelectedPlugin(state: CardPresentPaymentOnboardingState) {
+        switch state {
+        case let .completed(pluginState):
+            inPersonPaymentsMenuViewModel.selectedPlugin = pluginState.preferred
+        case let .codPaymentGatewayNotSetUp(plugin):
+            inPersonPaymentsMenuViewModel.selectedPlugin = plugin
+        default:
+            inPersonPaymentsMenuViewModel.selectedPlugin = nil
+        }
+    }
+
     func showOnboarding() {
         // Instead of using `CardPresentPaymentsOnboardingPresenter` we create the view directly because we already have the onboarding state in the use case.
         // That way we avoid triggering the onboarding check again that comes with the presenter.
@@ -147,7 +171,7 @@ private extension InPersonPaymentsMenuViewController {
     }
 
     var actionsSection: Section? {
-        return Section(header: Localization.paymentActionsSectionTitle, rows: [.collectPayment])
+        return Section(header: Localization.paymentActionsSectionTitle, rows: [.collectPayment, .toggleEnableCashOnDelivery])
     }
 
     var cardReadersSection: Section? {
@@ -211,6 +235,8 @@ private extension InPersonPaymentsMenuViewController {
             configureCardReaderManuals(cell: cell)
         case let cell as LeftImageTableViewCell where row == .collectPayment:
             configureCollectPayment(cell: cell)
+        case let cell as LeftImageTitleSubtitleToggleTableViewCell where row == .toggleEnableCashOnDelivery:
+            configureToggleEnableCashOnDelivery(cell: cell)
         default:
             fatalError()
         }
@@ -259,11 +285,32 @@ private extension InPersonPaymentsMenuViewController {
         updateEnabledState(in: cell)
     }
 
+    func configureToggleEnableCashOnDelivery(cell: LeftImageTitleSubtitleToggleTableViewCell) {
+        cell.leftImageView?.tintColor = .text
+        cell.accessoryType = .none
+        cell.selectionStyle = .none
+        cell.configure(image: .creditCardIcon,
+                       text: Localization.toggleEnableCashOnDelivery,
+                       subtitle: learnMoreViewModel.learnMoreAttributedString,
+                       switchState: inPersonPaymentsMenuViewModel.cashOnDeliveryEnabledState,
+                       switchAction: inPersonPaymentsMenuViewModel.updateCashOnDeliverySetting(enabled:),
+                       subtitleTapAction: { [weak self] in
+            guard let self = self else { return }
+            self.inPersonPaymentsMenuViewModel.learnMoreTapped(from: self)
+        })
+    }
+
     func updateEnabledState(in cell: UITableViewCell, shouldBeEnabled: Bool = true) {
         let alpha = shouldBeEnabled ? 1 : 0.3
         cell.imageView?.alpha = alpha
         cell.textLabel?.alpha = alpha
     }
+
+    func configureTableReload() {
+        inPersonPaymentsMenuViewModel.$cashOnDeliveryEnabledState.sink { [weak self] _ in
+            self?.tableView.reloadData()
+        }.store(in: &cancellables)
+    }
 }
 
 // MARK: - Convenience methods
@@ -375,6 +422,17 @@ extension InPersonPaymentsMenuViewController: UITableViewDelegate {
             managePaymentGatewaysWasPressed()
         case .collectPayment:
             collectPaymentWasPressed()
+        case .toggleEnableCashOnDelivery:
+            break
+        }
+    }
+
+    func tableView(_ tableView: UITableView, willSelectRowAt indexPath: IndexPath) -> IndexPath? {
+        switch rowAtIndexPath(indexPath) {
+        case .toggleEnableCashOnDelivery:
+            return nil
+        default:
+            return indexPath
         }
     }
 }
@@ -410,6 +468,22 @@ private extension InPersonPaymentsMenuViewController {
             comment: "Navigates to Payment Gateway management screen"
         )
 
+        static let toggleEnableCashOnDelivery = NSLocalizedString(
+            "Enable Pay in Person",
+            comment: "Title for a switch on the In-Person Payments menu to enable Cash on Delivery"
+        )
+
+        static let toggleEnableCashOnDeliveryLearnMoreFormat = NSLocalizedString(
+            "Pay in Person lets you accept card or cash payments on collection or delivery. %1$@",
+            comment: "A label prompting users to learn more about adding Pay in Person to their checkout. " +
+            "%1$@ is a placeholder that always replaced with \"Learn more\" string, " +
+            "which should be translated separately and considered part of this sentence.")
+
+        static let toggleEnableCashOnDeliveryLearnMoreLink = NSLocalizedString(
+            "Learn more",
+            comment: "The \"Learn more\" string replaces the placeholder in a label prompting users to learn " +
+            "more about adding Pay in Person to their checkout. ")
+
         static let cardReaderManuals = NSLocalizedString(
             "Card Reader Manuals",
             comment: "Navigates to Card Reader Manuals screen"
@@ -443,11 +517,14 @@ private enum Row: CaseIterable {
     case cardReaderManuals
     case managePaymentGateways
     case collectPayment
+    case toggleEnableCashOnDelivery
 
     var type: UITableViewCell.Type {
         switch self {
         case .managePaymentGateways:
             return LeftImageTitleSubtitleTableViewCell.self
+        case .toggleEnableCashOnDelivery:
+            return LeftImageTitleSubtitleToggleTableViewCell.self
         default:
             return LeftImageTableViewCell.self
         }