[MBL-1899] Checkout screen PLOT Badge

Kickstarter-iOS/Features/PledgeOverTime/Controller/PledgePaymentPlansViewController.swift

@@ -85,16 +85,20 @@ final class PledgePaymentPlansViewController: UIViewController {
         guard let self = self else { return }
 
         self.pledgeInFullOption.configureWith(value: PledgePaymentPlanOptionData(
+          ineligible: data.ineligible,
           type: .pledgeInFull,
           selectedType: data.selectedPlan,
           paymentIncrements: data.paymentIncrements,
-          project: data.project
+          project: data.project,
+          thresholdAmount: data.thresholdAmount
         ))
         self.pledgeOverTimeOption.configureWith(value: PledgePaymentPlanOptionData(
+          ineligible: data.ineligible,
           type: .pledgeOverTime,
           selectedType: data.selectedPlan,
           paymentIncrements: data.paymentIncrements,
-          project: data.project
+          project: data.project,
+          thresholdAmount: data.thresholdAmount
         ))
       }
 

Kickstarter-iOS/Features/PledgeOverTime/Controller/PledgePaymentPlansViewControllerTest.swift

@@ -6,6 +6,7 @@ import SnapshotTesting
 import UIKit
 
 final class PledgePaymentPlansViewControllerTest: TestCase {
+  private let thresholdAmount = 125.0
   override func setUp() {
     super.setUp()
     AppEnvironment.pushEnvironment(mainBundle: Bundle.framework)
@@ -25,7 +26,11 @@ final class PledgePaymentPlansViewControllerTest: TestCase {
       withEnvironment(language: language) {
         let controller = PledgePaymentPlansViewController.instantiate()
 
-        let data = PledgePaymentPlansAndSelectionData(selectedPlan: .pledgeInFull, project: project)
+        let data = PledgePaymentPlansAndSelectionData(
+          selectedPlan: .pledgeInFull,
+          project: project,
+          thresholdAmount: thresholdAmount
+        )
         controller.configure(with: data)
 
         let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)
@@ -48,7 +53,9 @@ final class PledgePaymentPlansViewControllerTest: TestCase {
         let data = PledgePaymentPlansAndSelectionData(
           selectedPlan: .pledgeOverTime,
           increments: testIncrements,
-          project: project
+          ineligible: false,
+          project: project,
+          thresholdAmount: thresholdAmount
         )
         controller.configure(with: data)
 
@@ -60,7 +67,32 @@ final class PledgePaymentPlansViewControllerTest: TestCase {
         let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)
         parent.view.frame.size.height = 400
 
-        self.scheduler.advance(by: .seconds(3))
+        self.scheduler.advance(by: .seconds(1))
+
+        assertSnapshot(matching: parent.view, as: .image, named: "lang_\(language)_device_\(device)")
+      }
+    }
+  }
+
+  func testView_PledgeOverTimeIneligible() {
+    orthogonalCombos([Language.en], [Device.pad, Device.phone4_7inch]).forEach { language, device in
+      withEnvironment(language: language) {
+        let controller = PledgePaymentPlansViewController.instantiate()
+
+        let data = PledgePaymentPlansAndSelectionData(
+          selectedPlan: .pledgeInFull,
+          increments: testPledgePaymentIncrement(),
+          ineligible: true,
+          project: Project.template,
+          thresholdAmount: self.thresholdAmount
+        )
+
+        controller.configure(with: data)
+
+        let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)
+        parent.view.frame.size.height = 120
+
+        self.scheduler.advance(by: .seconds(1))
 
         assertSnapshot(matching: parent.view, as: .image, named: "lang_\(language)_device_\(device)")
       }

Kickstarter-iOS/Features/PledgeOverTime/Views/PledgePaymentPlanOptionView.swift

@@ -8,9 +8,14 @@ private enum Constants {
   public static let detailsStackViewSpacing = Styles.grid(6)
   public static let incrementStackViewSpacing = Styles.gridHalf(1)
   public static let optionDescriptorStackViewSpacing = Styles.grid(1)
+  public static let ineligibleBadgeTopButtonPadding = 6.0
+  public static let ineligibleBadgeLeadingTrailingPadding = 8.0
 
   /// Size
   public static let selectionIndicatorImageWith = Styles.grid(4)
+
+  /// Corner radius
+  public static let defaultCornerRadius = Styles.grid(1)
 }
 
 protocol PledgePaymentPlanOptionViewDelegate: AnyObject {
@@ -34,6 +39,8 @@ final class PledgePaymentPlanOptionView: UIView {
   private lazy var selectionIndicatorImageView: UIImageView = { UIImageView(frame: .zero) }()
   private lazy var termsOfUseButton: UIButton = { UIButton(frame: .zero) }()
   private lazy var paymentIncrementsStackView: UIStackView = { UIStackView(frame: .zero) }()
+  private lazy var ineligibleBadgeLabel: UILabel = { UILabel(frame: .zero) }()
+  private lazy var ineligibleBadgeView: UIView = { UIView(frame: .zero) }()
 
   private let viewModel: PledgePaymentPlansOptionViewModelType = PledgePaymentPlansOptionViewModel()
 
@@ -64,6 +71,7 @@ final class PledgePaymentPlanOptionView: UIView {
     self.optionDescriptorStackView.addArrangedSubviews(
       self.titleLabel,
       self.subtitleLabel,
+      self.ineligibleBadgeView,
       self.termsOfUseButton,
       self.paymentIncrementsStackView
     )
@@ -130,6 +138,30 @@ final class PledgePaymentPlanOptionView: UIView {
     ])
 
     self.termsOfUseButton.setContentHuggingPriority(.required, for: .horizontal)
+
+    self.ineligibleBadgeView.addSubview(self.ineligibleBadgeLabel)
+    self.ineligibleBadgeLabel.translatesAutoresizingMaskIntoConstraints = false
+    self.ineligibleBadgeLabel.setContentHuggingPriority(.required, for: .horizontal)
+    self.ineligibleBadgeView.setContentHuggingPriority(.required, for: .horizontal)
+
+    NSLayoutConstraint.activate([
+      self.ineligibleBadgeLabel.topAnchor.constraint(
+        equalTo: self.ineligibleBadgeView.topAnchor,
+        constant: Constants.ineligibleBadgeTopButtonPadding
+      ),
+      self.ineligibleBadgeLabel.bottomAnchor.constraint(
+        equalTo: self.ineligibleBadgeView.bottomAnchor,
+        constant: -Constants.ineligibleBadgeTopButtonPadding
+      ),
+      self.ineligibleBadgeLabel.leadingAnchor.constraint(
+        equalTo: self.ineligibleBadgeView.leadingAnchor,
+        constant: Constants.ineligibleBadgeLeadingTrailingPadding
+      ),
+      self.ineligibleBadgeLabel.trailingAnchor.constraint(
+        equalTo: self.ineligibleBadgeView.trailingAnchor,
+        constant: -Constants.ineligibleBadgeLeadingTrailingPadding
+      )
+    ])
   }
 
   private func configureTapGestureAndActions() {
@@ -158,6 +190,8 @@ final class PledgePaymentPlanOptionView: UIView {
     applySelectionIndicatorImageViewStyle(self.selectionIndicatorImageView)
     applyTermsOfUseStyle(self.termsOfUseButton)
     applyPaymentIncrementsStackViewStyle(self.paymentIncrementsStackView)
+    applyIneligibleBadgeViewStyle(self.ineligibleBadgeView)
+    applyIneligibleBadgeLabelStyle(self.ineligibleBadgeLabel)
   }
 
   // MARK: - View model
@@ -192,9 +226,21 @@ final class PledgePaymentPlanOptionView: UIView {
         self.delegate?.pledgePaymentPlansViewController(self, didTapTermsOfUseWith: helpType)
       }
 
+    self.ineligibleBadgeView.rac.hidden = self.viewModel.outputs.ineligibleBadgeHidden
+    self.ineligibleBadgeLabel.rac.text = self.viewModel.outputs.ineligibleBadgeText
+
     self.termsOfUseButton.rac.hidden = self.viewModel.outputs.termsOfUseButtonHidden
     self.paymentIncrementsStackView.rac.hidden = self.viewModel.outputs.paymentIncrementsHidden
 
+    self.viewModel.outputs.optionViewEnabled
+      .observeForUI()
+      .observeValues { [weak self] isOptionViewEnabled in
+        guard let self = self else { return }
+
+        self.isUserInteractionEnabled = isOptionViewEnabled
+        applyTextColorByState(self.titleLabel, isEnabled: isOptionViewEnabled)
+      }
+
     self.viewModel.outputs.paymentIncrements
       .observeForUI()
       .observeValues { [weak self] increments in
@@ -284,7 +330,6 @@ private func applyTitleLabelStyle(_ label: UILabel) {
   label.adjustsFontForContentSizeCategory = true
   label.numberOfLines = 0
   label.font = UIFont.ksr_subhead().bolded
-  label.textColor = .ksr_black
 }
 
 private func applySubtitleLabelStyle(_ label: UILabel) {
@@ -317,6 +362,7 @@ private func applyIncrementStackViewStyle(_ stackView: UIStackView) {
 
 private func applyIncrementDetailsStackViewStyle(_ stackview: UIStackView) {
   stackview.axis = .horizontal
+  stackview.distribution = .fill
   stackview.spacing = Constants.detailsStackViewSpacing
 }
 
@@ -334,3 +380,20 @@ private func applyIncrementDateLabelStyle(_ label: UILabel) {
   label.textAlignment = .left
   label.adjustsFontForContentSizeCategory = true
 }
+
+private func applyIneligibleBadgeViewStyle(_ view: UIView) {
+  view.backgroundColor = .ksr_support_100
+  view.rounded(with: Constants.defaultCornerRadius)
+}
+
+private func applyIneligibleBadgeLabelStyle(_ label: UILabel) {
+  label.font = UIFont.ksr_caption1().bolded
+  label.textColor = .ksr_support_500
+  label.textAlignment = .center
+  label.numberOfLines = 0
+  label.adjustsFontForContentSizeCategory = true
+}
+
+private func applyTextColorByState(_ label: UILabel, isEnabled: Bool) {
+  label.textColor = isEnabled ? .ksr_black : .ksr_support_300
+}

Kickstarter-iOS/Features/PledgePaymentMethods/Controller/PostCampaignPledgeRewardsSummaryTotalViewController.swift

@@ -3,6 +3,16 @@ import Library
 import Prelude
 import UIKit
 
+private enum Constants {
+  /// Spacing & Padding
+  public static let badgeTopButtonPadding = 6.0
+  public static let badgeLeadingTrailingPadding = 8.0
+  public static let defaultStackViewSpacing = Styles.grid(1)
+
+  /// Corner radius
+  public static let defaultCornerRadius = Styles.grid(1)
+}
+
 final class PostCampaignPledgeRewardsSummaryTotalViewController: UIViewController {
   // MARK: - Properties
 
@@ -17,6 +27,10 @@ final class PostCampaignPledgeRewardsSummaryTotalViewController: UIViewControlle
   private lazy var totalConversionLabel: UILabel = { UILabel(frame: .zero) }()
   private lazy var confirmationLabel: UILabel = { UILabel(frame: .zero) }()
   private lazy var totalStackView: UIStackView = { UIStackView(frame: .zero) }()
+  private lazy var pledgeOverTimeStackView: UIStackView = { UIStackView(frame: .zero) }()
+  private lazy var pledgeOverTimeBadgeView: UIView = { UIView(frame: .zero) }()
+  private lazy var pledgeOverTimeBadgeLabel: UILabel = { UILabel(frame: .zero) }()
+  private lazy var pledgeOverTimeChargesLabel: UILabel = { UILabel(frame: .zero) }()
   private let viewModel: PledgeSummaryViewModelType = PledgeSummaryViewModel()
 
   // MARK: - Lifecycle
@@ -25,6 +39,7 @@ final class PostCampaignPledgeRewardsSummaryTotalViewController: UIViewControlle
     super.viewDidLoad()
 
     self.configureSubviews()
+    self.setupConstraints()
     self.bindStyles()
 
     self.viewModel.inputs.viewDidLoad()
@@ -60,21 +75,66 @@ final class PostCampaignPledgeRewardsSummaryTotalViewController: UIViewControlle
       |> totalConversionLabelStyle
 
     applyConfirmationLabelStyle(self.confirmationLabel)
+
+    applyPledgeOverTimeStackViewStyle(self.pledgeOverTimeStackView)
+    applyPledgeOverTimeBadgeViewStyle(self.pledgeOverTimeBadgeView)
+    applyPledgeOverTimeBadgeLabelStyle(self.pledgeOverTimeBadgeLabel)
+    applyPledgeOverTimeChargesLabelStyle(self.pledgeOverTimeChargesLabel)
   }
 
+  // MARK: - Configuration
+
   private func configureSubviews() {
     _ = (self.rootStackView, self.view)
       |> ksr_addSubviewToParent()
       |> ksr_constrainViewToEdgesInParent()
 
-    _ = ([self.titleAndTotalStackView, self.confirmationLabel], self.rootStackView)
+    _ = (
+      [self.titleAndTotalStackView, self.pledgeOverTimeStackView, self.confirmationLabel],
+      self.rootStackView
+    )
       |> ksr_addArrangedSubviewsToStackView()
 
     _ = ([self.titleLabel, self.totalStackView], self.titleAndTotalStackView)
       |> ksr_addArrangedSubviewsToStackView()
 
     _ = ([self.amountLabel, self.totalConversionLabel], self.totalStackView)
       |> ksr_addArrangedSubviewsToStackView()
+
+    self.pledgeOverTimeBadgeView.addSubview(self.pledgeOverTimeBadgeLabel)
+    self.pledgeOverTimeStackView.addArrangedSubviews(
+      self.pledgeOverTimeBadgeView,
+      self.pledgeOverTimeChargesLabel
+    )
+
+    // TODO: add strings translations [MBL-1860](https://kickstarter.atlassian.net/browse/MBL-1860)
+    self.pledgeOverTimeBadgeLabel.text = "Pledge Over Time"
+  }
+
+  private func setupConstraints() {
+    self.pledgeOverTimeBadgeLabel.translatesAutoresizingMaskIntoConstraints = false
+    self.pledgeOverTimeBadgeLabel.setContentHuggingPriority(.required, for: .horizontal)
+    self.pledgeOverTimeBadgeView.setContentHuggingPriority(.required, for: .horizontal)
+    self.pledgeOverTimeChargesLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)
+
+    NSLayoutConstraint.activate([
+      self.pledgeOverTimeBadgeLabel.topAnchor.constraint(
+        equalTo: self.pledgeOverTimeBadgeView.topAnchor,
+        constant: Constants.badgeTopButtonPadding
+      ),
+      self.pledgeOverTimeBadgeLabel.bottomAnchor.constraint(
+        equalTo: self.pledgeOverTimeBadgeView.bottomAnchor,
+        constant: -Constants.badgeTopButtonPadding
+      ),
+      self.pledgeOverTimeBadgeLabel.leadingAnchor.constraint(
+        equalTo: self.pledgeOverTimeBadgeView.leadingAnchor,
+        constant: Constants.badgeLeadingTrailingPadding
+      ),
+      self.pledgeOverTimeBadgeLabel.trailingAnchor.constraint(
+        equalTo: self.pledgeOverTimeBadgeView.trailingAnchor,
+        constant: -Constants.badgeLeadingTrailingPadding
+      )
+    ])
   }
 
   // MARK: - View model
@@ -93,6 +153,9 @@ final class PostCampaignPledgeRewardsSummaryTotalViewController: UIViewControlle
 
     self.confirmationLabel.rac.hidden = self.viewModel.outputs.confirmationLabelHidden
     self.confirmationLabel.rac.attributedText = self.viewModel.outputs.confirmationLabelAttributedText
+
+    self.pledgeOverTimeStackView.rac.hidden = self.viewModel.outputs.pledgeOverTimeStackViewHidden
+    self.pledgeOverTimeChargesLabel.rac.text = self.viewModel.outputs.pledgeOverTimeChargesText
   }
 
   // MARK: - Configuration
@@ -166,3 +229,30 @@ private func applyConfirmationLabelStyle(_ label: UILabel) {
   label.numberOfLines = 0
   label.backgroundColor = UIColor.ksr_white
 }
+
+private func applyPledgeOverTimeStackViewStyle(_ stackView: UIStackView) {
+  stackView.axis = .horizontal
+  stackView.spacing = Constants.defaultStackViewSpacing
+  stackView.alignment = .center
+}
+
+private func applyPledgeOverTimeBadgeViewStyle(_ view: UIView) {
+  view.backgroundColor = .ksr_create_100
+  view.rounded(with: Constants.defaultCornerRadius)
+}
+
+private func applyPledgeOverTimeBadgeLabelStyle(_ label: UILabel) {
+  label.font = UIFont.ksr_caption1().bolded
+  label.textColor = .ksr_create_700
+  label.textAlignment = .center
+  label.numberOfLines = 1
+  label.adjustsFontForContentSizeCategory = true
+}
+
+private func applyPledgeOverTimeChargesLabelStyle(_ label: UILabel) {
+  label.font = UIFont.ksr_footnote()
+  label.textColor = .ksr_support_700
+  label.textAlignment = .right
+  label.numberOfLines = 0
+  label.adjustsFontForContentSizeCategory = true
+}

Kickstarter-iOS/Features/PledgeView/Controllers/NoShippingPledgeViewController.swift

@@ -295,6 +295,7 @@ final class NoShippingPledgeViewController: UIViewController,
       }
 
     self.viewModel.outputs.pledgeOverTimeConfigData
+      .skipNil()
       .observeForUI()
       .observeValues { [weak self] data in
         self?.paymentPlansViewController.configure(with: data)
@@ -730,10 +731,9 @@ private func applySectionStackViewStyle(_ stackView: UIStackView) {
 extension NoShippingPledgeViewController: PledgePaymentPlansViewControllerDelegate {
   func pledgePaymentPlansViewController(
     _: PledgePaymentPlansViewController,
-    didSelectPaymentPlan paymentPlan: Library.PledgePaymentPlansType
+    didSelectPaymentPlan paymentPlan: PledgePaymentPlansType
   ) {
-    // TODO: Implement the necessary functionality once the ticket [MBL-1853] is resolved
-    debugPrint("pledgePaymentPlansViewController:didSelectPaymentPlan: \(paymentPlan)")
+    self.viewModel.inputs.paymentPlanSelected(paymentPlan)
   }
 
   func pledgePaymentPlansViewController(