[🎨] NT-1103 Pledge screen redesign #837
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added `fragment_pledge_section_footer` to bottom of `fragment_pledge` - Removed `pledge_agreement` from `pledge_footer_pledge_total`
- `cards_recycler` orientation is now `VERTICAL` - Removed `stored_card_width`. All cards are now full width. ## `RewardCardItemDecaration` - Removed special logic for stored cards margins
* ## Deletions and renames - `FreezeLinearLayoutManager` is no longer needed to stop the list of cards from scrolling when one is selected - `RewardLoadingCardViewHolder` and its layout `item_reward_loading_card.xml` is no longer needed because the progress state while a pledge is being created/updated is moving to the footer pledge button - `item_reward_pledge_card_disabled.xml` is no longer needed because the pledge button lives in the footer - `item_reward_credit_card.xml` is now `item_reward_unselected_card.xml` - `item_reward_pledge_card.xml` is now `item_reward_selected_card.xml` - `item_reward_add_card.xml` is now `item_add_card.xml` - `RewardCardViewHolder` is now `RewardCardUnselectedViewHolder` - `RewardCardViewHolderViewModel` is now `RewardCardUnselectedViewHolderViewModel` - `RewardPledgeCardViewHolder` is now `RewardCardSelectedViewHolder` - `RewardPledgeCardViewHolderViewModel` is now `RewardCardSelectedViewHolderViewModel` ## Style updates and additions - `stored_card_radius` is now `grid_1` - Added `unselected_card_stroke_width` with value `2dp` - Added `circle_accent` to highlight which card is selected - Added `circle_grey_500_stroke` to highlight which card is unselected - `SelectButton` style is no longer used so it's been deleted - `PledgeStoredCard` - no longer uses `cardUseCompatPadding` since the cards have no elevation - `RewardCardDecoration` only sets `bottom` margin, the parent sets `start` and `end` margin ## Stored cards - The stored cards got a makeover! - `CardState` - There are now only 2 card states `SELECTED` AND `UNSELECTED` - `RewardCardSelectedViewHolder` - Removed delegate since there are no actions you can take on this view - `RewardCardUnselectedViewHolderViewModel` - Added outputs `isClickable`, `issuerImageAlpha`, `lastFourTextColor`, and `selectImageIsVisible` - Added tests for new outputs - `PledgeFragmentViewModel` - Renamed `showPledgeCard` to `showSelectedCard`
## `PledgeFragment` - Added click listener to whole accountability container - Using new accountability copy ## `PledgeFragmentViewModel` - Removed output `deliveryDividerIsGone` since the divider is no longer present - Renamed output `deliverySectionIsGone` to `rewardSummaryIsGone` - Updated tests ## XML - Removed `accountability` into its own layout `fragment_pledge_section_accountability` - Removed parent `LinearLayout` from `fragment_pledge_section_reward_summary` since there was only 1 child ## Resources - Added `ic_not_a_store.xml` icon - Added untranslated `Its_a_way_to_bring_creative_projects_to_life_Learn_more_about_accountability` string
- The new footer pledge button `pledge_footer_pledge_button` now accepts clicks (meaning you can actually pledge and update your payment method with it) - (The `Update Pledge` button will be removed in another PR to keep this one small) ## RewardCardUnselectedViewHolder - Renamed `Delegate.selectCardButtonClicked` to `cardSelected` that takes in the `StoredCard` along with its `position` - Added output `notifyDelegateCardSelected` that emits a `<Pair<StoredCard, Int>>` of the selected card and its position ## `PledgeFragmentViewModel` - Input `pledgeButtonClicked` no longer takes in the card ID `String` - When it emits a backing is created/updated - Input `selectCardButtonClicked` is now `cardSelected` that takes in a `StoredCard` and its position - Added helper `initialCardSelection` method to figure out what the initial selected card should be - The Tests™ - These small changes broke almost 20 tests 😢 - Added tests for asserting the correct card was selected - Created `TestData` data class to help set up situations like updating a pledge with or without shipping - Added helper methods `setUpBackedShippableRewardTestData` and `setUpBackedNoRewardTestData` and used them to clean up a few tests ## Deletions ## `BaseRewardCardViewHolderViewModel` - Removed `id` output since it's no longer used - `RewardLoadingCardViewHolderViewModel` - This ViewModel and its tests stopped being used in #822
Properly styling payment method loading state. - Added `loading_placeholder_body.xml` for `Body` copy placeholders - Added `loading_placeholder_caption_2.xml` for `Caption2` copy placeholders
* - Added `New_payment_method` string and set it as the text in `ic_add_card.xml` - Added `circle_accent_alpha_20.xml` `Drawable` - Added cute `ic_add_rounded.xml` `Drawable`
- Added template string `payment_method_last_four` - Used in `BackingFragment`, `RewardCardSelectedViewHolder`, and `RewardCardUnselectedViewHolder` - Updated `StoredCard.DATE_FORMAT` because I noticed a bug where the dates were displaying strangely
- Added `This_project_has_a_set_currency_that_cant_process_this_option` string and set it as the text for `card_not_allowed_warning`## `RewardCardUnselectedViewHolderViewModel` - Removed `projectCountry` output because it's no longer needed ## `PledgeFragmentViewModel` - Fixed bug where a card that is not allowed could be selected by default - Added test for when the first card is not allowed - Added test for when none of the cards are allowed
## `fragment_pledge_section_footer.xml` - Added `pledge_footer_continue_button` button - Added fake `pledge_footer_pledge_button_progress` button
* ## `PledgeFragmentViewModel` - Added output `pledgeProgressIsGone` that emits a `Boolean` determining if the pledge `ProgressBar` should be visible. - `pledgeProgressIsGone` has the same behavior as `updatePledgeProgressIsGone` because `updatePledgeProgressIsGone` will be removed when the `Update Pledge` button is removed - Disabling the `Pledge` button when a pledge is being created. - Tests ## `fragment_pledge_section_footer.xml` - Added fake `pledge_footer_pledge_button_progress` button that lives on top of `pledge_footer_pledge_button`
- Added new strings `Selected_card` and `Select this card` - Added content descriptions for select state icons in `item_reward_selected_card` and `item_reward_unselected_card`
* ## `PledgeFragmentViewModel` - Added output `pledgeButtonIsGone` that emits a `Boolean` determining if the `Pledge` button should be hidden (when the user is logged out) - Tests - Added tests for new `pledgeButtonIsGone` output - Alphabetized tested outputs~ ## `PledgeFragment` - Replaced `continue_to_tout` references with `pledge_footer_continue_button` ## `fragment_pledge.xml` - Removed `continue_to_tout` button
* ## `ToastExt` - 🆕 shiny helper function to show error `Toast`s ## `PledgeFragment` - Using shiny 🆕 aforementioned helper function to show pledge errors ## XML - Added `ic_icon_alert.xml` - Created a new layout for the error `Toast`s `toast_error.xml` - Added `Alert` a11y string
* ## `PledgeFragmentViewModel` - Removed input `updatePledgeButtonClicked` - Removed outputs `updatePledgeButtonIsEnabled`, `updatePledgeButtonIsGone`, and `updatePledgeProgressIsGone` - Tests - Replaced `updatePledgeButtonClicked` tests with `pledgeButtonClicked` - Replaced `updatePledgeButtonIsEnabled` tests with `pledgeButtonClicked` tests - Alphabetized tested outputs~ ## `PledgeFragment` - Removed `update_pledge_button` references ## `fragment_pledge.xml` - Removed `update_pledge_button_container`
* ## `PledgeFragmentViewModel` - Added output `pledgeButtonCTA` for the copy in the pledge footer button - Alphabetized~ - Tests - Added tests for `pledgeButtonCTA` - Alphabetized~
- `pledgeButtonIsEnabled` only emits when the pledge total is valid and a card has been selected - Tests - Made a helper method `apolloClientWithStoredCards` to clean up. ## bugs - Fixed bug where stored cards were fetched 5 times instead of 1 - Fixed bug where `pledgeButtonIsGone` was changing the wrong view
jgsamudio
approved these changes
Apr 16, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📲 What
Pledge screen redesign feature branch
🛠 How
[🦶🏾] NT-1104 Add Pledge screen footer (#817)⚠️ ] NT-1131 Pledge error Toasts (#832)
[⬇] NT-1120 Vertical payment methods in Pledge screen (#821)
[🔨] NT-1121 Stored cards redesign (#822)
[🛒] NT-1105 Kickstarter is not a store redesign (#823)
[💳] NT-1122 Initial card selection (#824)
[⏳] NT-1124 Loading state for payment methods (#825)
[➕] NT-1125 New card CTA (#828)
[💳] NT-1123 Last four digits copy (#826)
[💳] NT-1123 Card not allowed copy (#827)
[🎨] NT-1111 Adding 2 buttons in the new pledge footer (#830)
[🔌] NT-1129 Adding progress state for pledging (#831)
[🗣] NT-1126 Payment methods a11y (#829)
[👷🏾♀️] NT-1128 Moved continue button in Pledge screen to footer (#833)
[
[␡] NT-1127 Removing Update pledge button (#834)
[📝] NT-1130 Pledge button CTA (#835)
[✅] NT-1133 Enabling pledge button only when all fields are valid (#836)
👀 See
Story 📖
NT-1103