[MBL-1814] PLOT plan selector component

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

@@ -0,0 +1,134 @@
+import Library
+import UIKit
+
+protocol PledgePaymentPlansViewControllerDelegate: AnyObject {
+  func pledgePaymentPlansViewController(
+    _ viewController: PledgePaymentPlansViewController,
+    didSelectPaymentPlan paymentPlan: PledgePaymentPlansType
+  )
+}
+
+final class PledgePaymentPlansViewController: UIViewController {
+  // MARK: Properties
+
+  private lazy var rootStackView: UIStackView = { UIStackView(frame: .zero) }()
+
+  private lazy var separatorView: UIView = { UIView(frame: .zero) }()
+
+  private lazy var pledgeInFullOption = PledgePaymentPlanOptionView(frame: .zero)
+  private lazy var pledgeOverTimeOption = PledgePaymentPlanOptionView(frame: .zero)
+
+  internal weak var delegate: PledgePaymentPlansViewControllerDelegate?
+
+  private let viewModel: PledgePaymentPlansViewModelType = PledgePaymentPlansViewModel()
+
+  // MARK: Lifecycle
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+
+    self.configureSubviews()
+    self.setupConstraints()
+
+    self.viewModel.inputs.viewDidLoad()
+  }
+
+  private func configureSubviews() {
+    self.view.addSubview(self.rootStackView)
+
+    self.pledgeInFullOption.delegate = self
+    self.pledgeOverTimeOption.delegate = self
+
+    self.rootStackView.addArrangedSubviews([
+      self.pledgeInFullOption,
+      self.separatorView,
+      self.pledgeOverTimeOption
+    ])
+  }
+
+  private func setupConstraints() {
+    self.rootStackView.translatesAutoresizingMaskIntoConstraints = false
+
+    NSLayoutConstraint.activate([
+      self.rootStackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
+      self.rootStackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
+      self.rootStackView.topAnchor.constraint(equalTo: self.view.topAnchor),
+      self.rootStackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
+      self.separatorView.heightAnchor.constraint(equalToConstant: 0.5)
+    ])
+  }
+
+  // MARK: - Bind Styles
+
+  override func bindStyles() {
+    super.bindStyles()
+
+    applyRootStackViewStyle(self.rootStackView)
+
+    applyWhiteBackgroundStyle(self.view)
+
+    applySeparatorStyle(self.separatorView)
+  }
+
+  // MARK: - View model
+
+  override func bindViewModel() {
+    super.bindViewModel()
+
+    self.viewModel.outputs.reloadPaymentPlans
+      .observeForUI()
+      .observeValues { [weak self] data in
+        guard let self = self else { return }
+
+        self.pledgeInFullOption.configureWith(value: PledgePaymentPlanOptionData(
+          type: .pledgeInFull,
+          selectedType: data.selectedPlan
+        ))
+        self.pledgeOverTimeOption.configureWith(value: PledgePaymentPlanOptionData(
+          type: .pledgeOverTime,
+          selectedType: data.selectedPlan
+        ))
+      }
+
+    self.viewModel.outputs.notifyDelegatePaymentPlanSelected
+      .observeForUI()
+      .observeValues { [weak self] paymentPlan in
+        guard let self = self else { return }
+
+        self.delegate?.pledgePaymentPlansViewController(self, didSelectPaymentPlan: paymentPlan)
+      }
+  }
+
+  // MARK: - Configuration
+
+  func configure(with value: PledgePaymentPlansAndSelectionData) {
+    self.viewModel.inputs.configure(with: value)
+  }
+}
+
+// MARK: - UITableViewDelegate
+
+extension PledgePaymentPlansViewController: PledgePaymentPlanOptionViewDelegate {
+  func pledgePaymentPlanOptionView(
+    _: PledgePaymentPlanOptionView,
+    didSelectPlanType paymentPlanType: PledgePaymentPlansType
+  ) {
+    self.viewModel.inputs.didSelectPlanType(paymentPlanType)
+  }
+}
+
+// MARK: Styles
+
+private func applyRootStackViewStyle(_ stackView: UIStackView) {
+  stackView.axis = .vertical
+  stackView.spacing = 0
+}
+
+private func applyWhiteBackgroundStyle(_ view: UIView) {
+  view.backgroundColor = UIColor.ksr_white
+}
+
+private func applySeparatorStyle(_ view: UIView) {
+  view.backgroundColor = UIColor.ksr_support_300
+  view.accessibilityElementsHidden = true
+}

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

@@ -0,0 +1,56 @@
+@testable import Kickstarter_Framework
+@testable import Library
+import Prelude
+import SnapshotTesting
+import UIKit
+
+final class PledgePaymentPlansViewControllerTest: TestCase {
+  override func setUp() {
+    super.setUp()
+    AppEnvironment.pushEnvironment(mainBundle: Bundle.framework)
+    UIView.setAnimationsEnabled(false)
+  }
+
+  override func tearDown() {
+    AppEnvironment.popEnvironment()
+    UIView.setAnimationsEnabled(true)
+
+    super.tearDown()
+  }
+
+  func testView_PledgeInFullSelected() {
+    orthogonalCombos([Language.en], [Device.pad, Device.phone4_7inch]).forEach { language, device in
+      withEnvironment(language: language) {
+        let controller = PledgePaymentPlansViewController.instantiate()
+
+        let data = PledgePaymentPlansAndSelectionData(selectedPlan: .pledgeInFull)
+        controller.configure(with: data)
+
+        let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)
+        parent.view.frame.size.height = 400
+
+        self.scheduler.advance(by: .seconds(1))
+
+        assertSnapshot(matching: parent.view, as: .image, named: "lang_\(language)_device_\(device)")
+      }
+    }
+  }
+
+  func testView_PledgeOverTimeSelected() {
+    orthogonalCombos([Language.en], [Device.pad, Device.phone4_7inch]).forEach { language, device in
+      withEnvironment(language: language) {
+        let controller = PledgePaymentPlansViewController.instantiate()
+
+        let data = PledgePaymentPlansAndSelectionData(selectedPlan: .pledgeOverTime)
+        controller.configure(with: data)
+
+        let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)
+        parent.view.frame.size.height = 400
+
+        self.scheduler.advance(by: .seconds(1))
+
+        assertSnapshot(matching: parent.view, as: .image, named: "lang_\(language)_device_\(device)")
+      }
+    }
+  }
+}

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

@@ -0,0 +1,167 @@
+import Library
+import UIKit
+
+protocol PledgePaymentPlanOptionViewDelegate: AnyObject {
+  func pledgePaymentPlanOptionView(
+    _ optionView: PledgePaymentPlanOptionView,
+    didSelectPlanType paymentPlanType: PledgePaymentPlansType
+  )
+}
+
+final class PledgePaymentPlanOptionView: UIView {
+  // MARK: - Properties
+  private lazy var contentView: UIView = UIView(frame: .zero)
+  private lazy var optionDescriptorStackView: UIStackView = { UIStackView(frame: .zero) }()
+  private lazy var titleLabel = { UILabel(frame: .zero) }()
+  private lazy var subtitleLabel = { UILabel(frame: .zero) }()
+  private lazy var selectionIndicatorImageView: UIImageView = { UIImageView(frame: .zero) }()
+
+  private let viewModel: PledgePaymentPlansOptionViewModelType = PledgePaymentPlansOptionViewModel()
+
+  public weak var delegate: PledgePaymentPlanOptionViewDelegate?
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+
+    self.bindViewModel()
+    self.configureSubviews()
+    self.setupConstraints()
+    self.configureTapGesture()
+  }
+
+  @available(*, unavailable)
+  required init?(coder _: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  // MARK: - Configuration
+
+  private func configureSubviews() {
+
+    self.addSubview(self.contentView)
+
+    self.contentView.addSubview(self.selectionIndicatorImageView)
+    self.contentView.addSubview(self.optionDescriptorStackView)
+
+    self.optionDescriptorStackView.addArrangedSubviews([self.titleLabel, self.subtitleLabel])
+  }
+
+  private func setupConstraints() {
+    self.contentView.translatesAutoresizingMaskIntoConstraints = false
+    self.selectionIndicatorImageView.translatesAutoresizingMaskIntoConstraints = false
+    self.optionDescriptorStackView.translatesAutoresizingMaskIntoConstraints = false
+
+    self.titleLabel.setContentCompressionResistancePriority(.required, for: .vertical)
+    self.titleLabel.setContentHuggingPriority(.required, for: .vertical)
+
+    self.subtitleLabel.setContentCompressionResistancePriority(.required, for: .vertical)
+    self.subtitleLabel.setContentHuggingPriority(.required, for: .vertical)
+
+    NSLayoutConstraint.activate([
+      self.contentView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: Styles.grid(2)),
+      self.contentView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -Styles.grid(2)),
+      self.contentView.topAnchor.constraint(equalTo: self.topAnchor, constant: Styles.grid(2)),
+      self.contentView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -Styles.grid(2))
+    ])
+
+    NSLayoutConstraint.activate([
+      self.optionDescriptorStackView.leadingAnchor.constraint(equalTo: self.selectionIndicatorImageView.trailingAnchor, constant: Styles.grid(2)),
+      self.optionDescriptorStackView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor),
+      self.optionDescriptorStackView.topAnchor.constraint(equalTo: self.contentView.topAnchor),
+      self.optionDescriptorStackView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor)
+    ])
+
+    NSLayoutConstraint.activate([
+      self.selectionIndicatorImageView.topAnchor.constraint(equalTo: self.contentView.topAnchor),
+      self.selectionIndicatorImageView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor),
+      self.selectionIndicatorImageView.widthAnchor.constraint(equalToConstant: Styles.grid(4)),
+      self.selectionIndicatorImageView.heightAnchor.constraint(
+        equalTo: self.titleLabel.heightAnchor,
+        multiplier: 1.0
+      )
+    ])
+  }
+
+  private func configureTapGesture() {
+    self.addGestureRecognizer(UITapGestureRecognizer(
+      target: self,
+      action: #selector(self.onOptionTapped)
+    ))
+  }
+
+  // MARK: - Styles
+
+  override func bindStyles() {
+    super.bindStyles()
+
+    applyOptionDescriptorStackViewStyle(self.optionDescriptorStackView)
+    applyTitleLabelStyle(self.titleLabel)
+    applySubtitleLabelStyle(self.subtitleLabel)
+    applySelectionIndicatorImageViewStyle(self.selectionIndicatorImageView)
+  }
+
+  // MARK: - View model
+
+  override func bindViewModel() {
+    super.bindViewModel()
+
+    self.viewModel.outputs.selectionIndicatorImageName
+      .observeForUI()
+      .observeValues { [weak self] imageName in
+        self?.selectionIndicatorImageView.image = Library.image(named: imageName)
+      }
+
+    self.titleLabel.rac.text = self.viewModel.outputs.titleText
+
+    self.subtitleLabel.rac.text = self.viewModel.outputs.subtitleText
+    self.subtitleLabel.rac.hidden = self.viewModel.outputs.subtitleLabelHidden
+
+    self.viewModel.outputs.notifyDelegatePaymentPlanOptionSelected
+      .observeForUI()
+      .observeValues { [weak self] paymentPlan in
+        guard let self = self else { return }
+
+        self.delegate?.pledgePaymentPlanOptionView(self, didSelectPlanType: paymentPlan)
+      }
+  }
+
+  func configureWith(value: PledgePaymentPlanOptionData) {
+    self.viewModel.inputs.configureWith(data: value)
+  }
+
+  func refreshSelectedOption(_ selectedType: PledgePaymentPlansType) {
+    self.viewModel.inputs.refreshSelectedType(selectedType)
+  }
+
+  // MARK: - Actions
+
+  @objc private func onOptionTapped() {
+    self.viewModel.inputs.optionTapped()
+  }
+}
+
+// MARK: - Styles helper
+
+private func applyOptionDescriptorStackViewStyle(_ stackView: UIStackView) {
+  stackView.axis = .vertical
+  stackView.spacing = Styles.grid(1)
+}
+
+private func applyTitleLabelStyle(_ label: UILabel) {
+  label.accessibilityTraits = UIAccessibilityTraits.header
+  label.adjustsFontForContentSizeCategory = true
+  label.numberOfLines = 0
+  label.font = UIFont.ksr_subhead().bolded
+}
+
+private func applySubtitleLabelStyle(_ label: UILabel) {
+  label.accessibilityTraits = UIAccessibilityTraits.header
+  label.adjustsFontForContentSizeCategory = true
+  label.numberOfLines = 0
+  label.font = UIFont.ksr_caption1()
+  label.textColor = .ksr_support_400
+}
+
+private func applySelectionIndicatorImageViewStyle(_ imageView: UIImageView) {
+  imageView.contentMode = .center
+}