💲[Native Checkout] RewardCardContainerView snapshots and view model bindings #779

justinswart · 2019-08-01T22:23:46Z

📲 What

Adds the view model outputs for binding the reward card UI elements.
Incorporates the state type introduced in Feature native checkout reward pledge states #764 and adds functions to determine the state of discrete UI elements.

🤔 Why

Rewards can be in many different states based on:

whether or not the project is live.
if the user has backed the project.
if their payment method has errored.
the availability of the reward.
the position of the 43rd moon of Saturn.

🛠 How

I found that it was easier to determine that all the states had been covered by recording snapshot tests with all of the combinations, I will add view model tests in a subsequent PR and link it back here.

👀 See

Examples of just some of the states (see 45 recorded snapshots for all of them):

Live, Non-backed, available, timebased	Live, backed	Live, backed, errored	Live, no longer available	Live, backed different reward

♿️ Accessibility

Tap targets use minimum of 44x44 pts dimensions
Works with VoiceOver
Supports Dynamic Type

✅ Acceptance criteria

Given that there are just so many combinations of states (approx 45 if I have it correct), I think looking through the snapshots, the naming of the snapshot tests, carefully inspecting the properties set on the templates and confirming that the state in the snapshot makes sense, it should be fairly sufficient as AC. Of course run it on device and look out for strangeness but I'm not sure what else to suggest for full QA test coverage other than going through each of the combinations.

⏰ TODO

Merge in correct styles once that sweep is completed.
Add VM tests (separate PR).

…tViewController (#647) * Rename CheckoutViewController to DeprecatedCheckoutViewController * Rename CheckoutViewModel to DeprecatedCheckoutViewModel * Remove CheckoutViewModelTests

…ag is enabled (#646) * Feature-flagging old rewards treatment & tests * Adding another test * Fix issue causing test failure * PR comments and adding other features to the “Feature” enum * Renaming and clearer logic/func naming * Line break

…VC/VM (#653) * Rename RewardPledgeViewController.swift to DeprecatedRewardPledgeViewController.swift * Rename RewardPledgeViewModel.swift to DeprecatedRewardPledgeViewModel.swift * Rename RewardPledgeViewController to DeprecatedRewardPledgeViewController * Rename RewardPledgeViewModel to DeprecatedRewardPledgeViewModel * Update Snapshot tests

* Prepare PledgeViewModel * Prepare PledgeViewController * Prepare PledgeDataSource

* Add stepper image resources * Add convenience function to add subview constrained to edges * Prepare pledge amount cell * Implement amount input field * Pass correct amount and currency values * Disable selection * Explicitly declare types in styles * Add localized strings * Add iOS 10 support * Style with explicit types * Use localized string * Re-record screenshot tests for the deprecated controller * Explicitly set accessibility elements * Extract ascender constrain to private function * Add background color * Prevent spacer from collapsing bellow its minimum width * Fix inputStackViewStyle * Register cells and footers using their classes for type safety * Remove unnecessary traitCollectionDidChange handler * Make style private * Refactor auto layout helpers

* Back this project buttons setup * Adding feature flag behaviour * Tests * Swiftlint * Default off * Revert test changes * Cleanup * PR comments and dynamic type support for button * Updating screenshots to account for accurate button font size * Wrapping button text and storing reference to shape layer * Concat constraints * Renaming button * Cleanup

…feature-native-checkout

* Fix tests * Extract shared styles * Add shipping location cell * Expose only certain elements to VoiceOver * Add header trait * Add new line for better readability * Update tests * Add arranged subviews to stack view using a functional helper * Fix font size * Use point free expression * Fix tests * Fix style test

* wip description cell * wip description cell, new strings * wip description cell, refactor * wip- estimated deloivery date from reward * wip- datasource test * new snapshots * stackview refactor * stackview func name change * func name change * corrected datasource test * refactor * pr feedback * pr feedback * swiftlint fix * datasource test fix * datasource test fix * description string * fixing lib/framework tests * new snapshots for deprecated rewards * using new string * wip- vm test name change * pr feedback * pr feedback * strings * snapshot tests * change padding * datasource change * updated strings to correct deprecated pledge view * new snapshots * font change, remove unnecessary constraint and view color, alphabetizing * blended layers and usimng helper function to add arranged subviews to stack view * 💲[Native Checkout] Reverts strings & snapshots (#671) * Revert strings * Update comment * reverted strings

* New files * removing scroll view stuff for now * Tests * Cleaning up insets * More cleanup * Swiftlint * Adding “deprecated” to more file names * Removing duplicated file * Increasing hit area of close button * PR comments * PR comments

* PledgeContinueCell * Common green button styling * Tests * Adding a test, cleaning up * Swiftlint * Fixing merge conflicts * PR feedback

* wip description cell * wip description cell, new strings * wip description cell, refactor * wip- estimated deloivery date from reward * wip- datasource test * new snapshots * stackview refactor * stackview func name change * func name change * corrected datasource test * refactor * setup delegate * pr feedback * pr feedback * swiftlint fix * datasource test fix * datasource test fix * pledgevm * description string * fixing lib/framework tests * new snapshots for deprecated rewards * using new string * wip- presenting trust and safety now * wip- vm tests * wip- refactor * wip * button * learn more higlight color change * snapshot tests * pr edit * pr edits * snapshot tests and strings * Replace label and button with UITextView for tappable links * pr feedback * font size removed

* New files * removing scroll view stuff for now * Tests * Cleaning up insets * More cleanup * Swiftlint * Adding “deprecated” to more file names * Removing duplicated file * Increasing hit area of close button * Hidden scroll view * Hidden scroll view working * Refactoring & cleanup * Use collection view’s content size * PR updates from comments * Fix autolayout warnings on device rotation * Cleanup * More cleanup * More PR feedback

…feature-native-checkout

…zeCategory.isAccessibilityCategory

* Sheet overlay container VC and animator * Renaming, fixing rotation issues * Revert testing code * Cleanup and fixing a snapshot * Using keypath lenses * Updating the comment * PR comments * Renaming * Cleanup * View helpers * Style naming * Fix build * Remove iOS 11 Availability Checks From Native Checkout (#679) * Remove iOS 11 availability references * Fix merge conflict issues * Renaming suggestions * Swiftlint

…feature-native-checkout # Conflicts: # Kickstarter-iOS/DataSources/ProjectPamphletContentDataSource.swift # Kickstarter-iOS/DataSources/ProjectPamphletContentDataSourceTests.swift # Kickstarter-iOS/Views/Controllers/ProjectPamphletViewController.swift # Library/ViewModels/DiscoveryFiltersViewModel.swift # Library/ViewModels/LiveStreamContainerPageViewModel.swift # Library/ViewModels/ProjectPamphletViewModel.swift

…667) * Fix tests * Extract shared styles * Add shipping location cell * Expose only certain elements to VoiceOver * Add header trait * Add new line for better readability * Add the ability to format currency strings * Add currency formatter playground * Add currency formatter tests * Fix typo * Remove duplicate type conformance * Set label background color for better performance * Move attributed currency string to shared functions * Disable Swiftlint's line length in tests * Add convenience function to calculate superscript offset between two UIFonts * Refactor attributed currency formatter to a NSNumberFormatter subclass * Expose attributed formatter through Format enum * Use the new attributed currency formatter * Move attributes to checkout styles * Pass shipping information to data source from view model * Change font size on the input view to match shipping location * Fix playground * Fix Swiftlint issue * Use typealias for string attributes * Remove dangling playground reference * Localize string * Remove obsolete imports

* Navigate to PledgeVC when reward is selected * One more test * Renaming * Updates based on feedback

* Remove SwiftFormat's hoisting rule * Update SwiftFormat rules * Format all Swift files added or updated by feature branch * Fix line length violations * Re-enable explicit self reference rule * Format code with explicit self reference ON * Update .init spacing * Format decimals * Format and operator * Format comments * Order SwiftFormat rules alphabetically * Format selectors * Format ChangeEmailViewController * Order excluded swiftformat files alphabeticallyr * Rename UIView+AutoLayout * Fix formatter causing build errors * Disable rules on new line * Reformat indentation * Rename ksr_swiftformat to format

# Conflicts: # KsApi/models/Config.swift # bin/format.sh

* Add ios_native_checkout_pledge_view feature flag * Fix tests * Fix back button * Revert "Fix back button" This reverts commit b2cb23b. * Add test for featureNativeCheckoutPledgeViewEnabled() * Only add close button when modal * Set navigationItem in presenting VC

…eward-cell-state-bindings

* Update button styles first pass * Move color mixing to extension file * Update Colors.json * Updated remaining button styles * Record new snapshots * Rename playground buttons * Move button up slightly on empty state VC * Update empty state snapshots

…eward-cell-state-bindings # Conflicts: # Kickstarter-iOS/Views/RewardCardContainerView.swift # Library/Styles/ButtonStyles.swift # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_de_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_de_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_de_device_phone5_8inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_en_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_en_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_en_device_phone5_8inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_es_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_es_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_es_device_phone5_8inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_fr_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_fr_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_fr_device_phone5_8inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_ja_device_pad@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_ja_device_phone4_7inch@2x.png # Screenshots/_64/Kickstarter_Framework_iOSTests.RewardsCollectionViewControllerTests/testRewards_NonBacker_LiveProject_lang_ja_device_phone5_8inch@2x.png

💲[Native Checkout] Feature

…bindings

justinswart · 2019-08-02T22:49:21Z

Reward States

…bindings

ifbarrera

Looking good!! Couple comments/questions.

ifbarrera · 2019-08-06T21:03:20Z

Kickstarter-iOS/Views/Controllers/BetaToolsViewController.swift

@@ -132,7 +132,7 @@ internal final class BetaToolsViewController: UITableViewController {
    self.navigationController?.dismiss(animated: true)
  }

-  // MARK: Private Helper Functions
+  // MARK: - Private Helper Functions


Shouldn't this just be Functions 😁

ifbarrera · 2019-08-06T21:03:40Z

Kickstarter-iOS/Views/Controllers/FeatureFlagToolsViewController.swift

@@ -56,8 +56,7 @@ final class FeatureFlagToolsViewController: UITableViewController {
  private func updateConfig(with features: Features) {
    guard let config = AppEnvironment.current.config else { return }

-    let updatedConfig = config
-      |> \.features .~ features
+    let updatedConfig = config |> \.features .~ features


ifbarrera · 2019-08-06T21:09:25Z

Kickstarter-iOS/Views/RewardCardContainerViewTests.swift

+    }
+  }
+
+  func testLive_NonBackedProject() {


One thing to note is that there are actually two different kinds of "live, non-backed project" states - one when the user is logged in, and one when the user is logged out. The difference between these two from the data perspective is the value of project.personalization.isBacking and project.personalization.backing. If the user is logged out, both of these will be nil. If the user is logged in project.personalization.isBacking will be false, and project.personalization.backing will be nil.

It might be worthwhile to add a test for the logged-out state.

Ah thanks will do.

ifbarrera · 2019-08-06T21:22:25Z

Library/ViewModels/RewardCardContainerViewModel.swift

+}
+
+private func rewardIsAvailable(project _: Project, reward: Reward) -> Bool {
+  let limited = !(reward.remaining == nil && reward.endsAt == nil)


How about:

let isLimited = reward.remaining != nil || reward.endsAt != nil

ifbarrera · 2019-08-06T21:26:21Z

Library/ViewModels/RewardCardViewModel.swift

+  if let endsAt = reward.endsAt, project.state == .live, endsAt > 0,
+    endsAt >= AppEnvironment.current.dateType.init().timeIntervalSince1970 {
+    let (time, unit) = Format.duration(
+      secondsInUTC: min(endsAt, project.dates.deadline),


Why would an endsAt timestamp ever be greater than the project deadline? 🤔

This is just how the code was before... didn't really want to change logic in case it was there for some historical reason.

ifbarrera · 2019-08-06T21:27:49Z

Library/ViewModels/RewardCardViewModel.swift

+}
+
+private func stateIconImageColor(project: Project, reward: Reward) -> UIColor? {
+  if userIsBacking(reward: reward, inProject: project) {


Can we do a guard instead?

guard userIsBacking(reward: reward, inProject: project) else { return nil }

ifbarrera · 2019-08-06T21:28:06Z

Library/ViewModels/RewardCardViewModel.swift

+}
+
+private func stateIconImageName(project: Project, reward: Reward) -> String? {
+  if userIsBacking(reward: reward, inProject: project) {


Same here, a guard is a little cleaner.

* Add RewardCardContainerViewModelTests * Add RewardCardViewModelTests * Fix test * Remove shippingAmount from noReward test * Add logged out non-backer test

ifbarrera

Lgtm! Very thorough, nice work ⭐️

dusi and others added 30 commits March 29, 2019 15:38

💲[Native Checkout] Rename CheckoutViewController to DeprecatedCheckou…

94ca65c

…tViewController (#647) * Rename CheckoutViewController to DeprecatedCheckoutViewController * Rename CheckoutViewModel to DeprecatedCheckoutViewModel * Remove CheckoutViewModelTests

💲 [Native Checkout] Plumbing (#654)

96dbb61

* Prepare PledgeViewModel * Prepare PledgeViewController * Prepare PledgeDataSource

Merge branch 'master' of https://github.com/kickstarter/ios-oss into …

9eade4c

…feature-native-checkout

Set stepper images using a lens (#661)

c080e45

💲[Native Checkout] Pledge Continue Button - UI Only (#670)

1f23126

* PledgeContinueCell * Common green button styling * Tests * Adding a test, cleaning up * Swiftlint * Fixing merge conflicts * PR feedback

Merge branch 'master' into feature-native-checkout

9c4dc94

Merge branch 'master' of https://github.com/kickstarter/ios-oss into …

40c00e5

…feature-native-checkout

Use HTML string with anchor tags (#673)

a44c37b

Merge branch 'master' into feature-native-checkout

6ccdfb6

Add missing imports, update to use traitCollection.preferredContentSi…

a52c4e5

…zeCategory.isAccessibilityCategory

Fix imports in tests

5778e71

Clean up issues with live stream deprecation

a48b021

Merge branch 'master' into feature-native-checkout

e4abb8e

💲[Native Checkout] Reward Selection (no animation) (#683)

7324bf0

* Navigate to PledgeVC when reward is selected * One more test * Renaming * Updates based on feedback

Merge branch 'master' into feature-native-checkout

e42a163

Merge branch 'master' into feature-native-checkout

7fd1363

Merge branch 'master' into feature-native-checkout

353e2c8

# Conflicts: # KsApi/models/Config.swift # bin/format.sh

justinswart added 7 commits August 2, 2019 12:42

Merge branch 'master' into feature-native-checkout

4985ecc

Merge branch 'feature-native-checkout' into feature-native-checkout-r…

a575cc5

…eward-cell-state-bindings

Remove type after merge

bb2bc4c

SwiftFormat

5413203

justinswart requested review from ifbarrera and cdolm92 August 2, 2019 22:42

justinswart assigned cdolm92 Aug 2, 2019

justinswart marked this pull request as ready for review August 2, 2019 22:42

justinswart added needs review and removed blocked a PR that is blocked for external reasons labels Aug 2, 2019

justinswart added 2 commits August 2, 2019 15:44

Merge pull request #652 from kickstarter/feature-native-checkout

65939a3

💲[Native Checkout] Feature

Merge branch 'master' into feature-native-checkout-reward-cell-state-…

5d035a4

…bindings

justinswart changed the base branch from feature-native-checkout to master August 2, 2019 22:46

justinswart force-pushed the master branch from a5ab6da to 1cec6e0 Compare August 5, 2019 15:16

justinswart added 3 commits August 6, 2019 10:19

Merge branch 'master' into feature-native-checkout-reward-cell-state-…

f750ebf

…bindings

Repair merge

52ac96c

Revert unrelated code-changes from merging

50d6e1d

ifbarrera reviewed Aug 6, 2019

View reviewed changes

justinswart added 4 commits August 6, 2019 15:10

Tidy up logic with guards and ternary operators

1c065fb

Add logged out non-backer test

6c94205

💲[Native Checkout] RewardCardView states VM tests (#780)

380cc93

* Add RewardCardContainerViewModelTests * Add RewardCardViewModelTests * Fix test * Remove shippingAmount from noReward test * Add logged out non-backer test

Add tests for NonLive, Backed and NonLive, NonBacked

54ac574

ifbarrera approved these changes Aug 7, 2019

View reviewed changes

justinswart merged commit a6c9a21 into master Aug 7, 2019

justinswart deleted the feature-native-checkout-reward-cell-state-bindings branch August 7, 2019 16:58

justinswart mentioned this pull request Aug 8, 2019

💲[Native Checkout] Pledge button cell reuse bugfix #789

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

💲[Native Checkout] RewardCardContainerView snapshots and view model bindings #779

💲[Native Checkout] RewardCardContainerView snapshots and view model bindings #779

justinswart commented Aug 1, 2019 •

edited

Loading

justinswart commented Aug 2, 2019

ifbarrera left a comment

ifbarrera Aug 6, 2019

justinswart Aug 6, 2019

ifbarrera Aug 6, 2019

ifbarrera Aug 6, 2019

justinswart Aug 6, 2019

ifbarrera Aug 6, 2019

ifbarrera Aug 6, 2019

justinswart Aug 6, 2019

ifbarrera Aug 6, 2019

ifbarrera Aug 6, 2019

ifbarrera left a comment

💲[Native Checkout] RewardCardContainerView snapshots and view model bindings #779

💲[Native Checkout] RewardCardContainerView snapshots and view model bindings #779

Conversation

justinswart commented Aug 1, 2019 • edited Loading

📲 What

🤔 Why

🛠 How

👀 See

♿️ Accessibility

✅ Acceptance criteria

⏰ TODO

justinswart commented Aug 2, 2019

ifbarrera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ifbarrera left a comment

Choose a reason for hiding this comment

justinswart commented Aug 1, 2019 •

edited

Loading