MBL-2069 Add images on rewards UI #2224

ycheng-kickstarter · 2025-02-12T17:26:19Z

📲 What

We're adding images on rewards!

🤔 Why

Because it's about damn time.

🛠 How

- Images on 3 different surfaces
Used Coil for image loading and caching. Rewards carousel, add ons, and manage pledge were all separate surfaces using different technologies (xml vs compose, vertical vs horizontal scrollview) that each needed to be dealt with differently. See the associated files with each screen to make your code review easier:

Rewards screen	Add ons screen	Manage your pledge screen

---	---	---
KSRewardCard, RewardCarouselScreen	AddOnsContainer, AddOnsScreen	AddOnsViewHolder, AddOnsViewHolderViewModel, RewardAndAddOnsAdapter, BackingFragmentViewModel, item_add_on

- API
Most of the API integration was done in #2219 but for the manage pledge screen I missed some graphql changes for the backing fragment, so added that to this PR. We can't simply add a field for image on the main Reward fragment because we want to fetch a bare minimum Reward object when querying Projects to prevent transactionTooLarge exception: #2173

- Image crop
Images provided by server were not cropped! Image views had to be set to aspect ratio of 3:2 on client.

👀 See

Before 🐛	After 🦋

📋 QA

On a project without images (dance category is a good one), go through the rewards and add ons flow to verify cards are unchanged
On a project with images, go through the rewards and add ons flow to view images
On a project you've backed, go through the Manage Your Pledge flow to view images
Verify grey placeholder is displayed while images are loading
Verify images have 3:2 aspect ratio
Go to Manage Your Pledge -> Choose another reward, and confirm that the "Your selection" tag is placed over the image:

Story 📖

https://kickstarter.atlassian.net/browse/MBL-2069

ycheng-kickstarter · 2025-02-12T20:28:25Z

app/src/main/java/com/kickstarter/ui/activities/compose/projectpage/AddOnsContainer.kt

+            }
+            Column(
+                modifier = Modifier.padding(dimensions.paddingMediumLarge)
+            ) {


Please ignore everything after this line. Only relevant changes in this file are up to here. The diff just did a terrible job of detecting actual differences.

ycheng-kickstarter · 2025-02-12T20:29:54Z

app/src/main/java/com/kickstarter/ui/compose/KSRewardCard.kt

@@ -44,6 +50,7 @@ fun KSRewardCardPreview() {
            conversion = "about $400",
            title = "Deck of cards",
            backerCountBadgeText = "23 backers",
+            image = Photo.builder().altText("").full("https://i.kickstarter.com/Superbacker_Lock-up-0e9d240.png").build(),


Was trying to get an image to show in the compose preview but it didn't work. If anyone has ideas lmk

For preview to render needs to be a local resource I'm afraid, you can:

try to add the file path to a local resource (local to the internal builds if wanna to a real image).

or whichever library we are using for the image add a placeholder for the empty use case, chances are it will render on the preview

Thanks, empty placeholder renders if I pass in an empty string url

ycheng-kickstarter · 2025-02-12T20:30:25Z

app/src/main/java/com/kickstarter/ui/compose/KSRewardCard.kt

        shape = RoundedCornerShape(dimensions.radiusMediumSmall),
    ) {
        Column(
            modifier = Modifier.background(colors.kds_white)
        ) {
-            if (yourSelectionIsVisible) {


Moved the Your Selection tag to its own composable.

ycheng-kickstarter · 2025-02-12T20:32:28Z

app/src/main/java/com/kickstarter/ui/compose/designsystem/KSDimensions.kt

@@ -60,6 +60,9 @@ data class KSDimensions(
    val storedCardImageWidth: Dp = Dp.Unspecified,
    val alertIconSize: Dp = Dp.Unspecified,
    val plotChargeItemWidth: Dp = Dp.Unspecified,
+    val cardWidth: Dp = Dp.Unspecified,
+    val cardImageHeight: Dp = Dp.Unspecified,
+    val cardImageAspectRatio: Float = Float.NaN,


For the rewards carousel where we use a fixed card width, use the cardWidth and cardImageHeight dimens. For the add ons screen and manage pledge screen, the card width is match_parent, so use cardImageAspectRatio dimen instead.

ycheng-kickstarter · 2025-02-12T20:46:20Z

app/src/main/java/com/kickstarter/viewmodels/BackingFragmentViewModel.kt

@@ -545,6 +545,7 @@ interface BackingFragmentViewModel {

        private fun joinProjectDataAndReward(projectData: ProjectData): Pair<ProjectData, Reward> {
            val reward = projectData.backing()?.reward()
+                ?: projectData.project().backing()?.reward()


‼️‼️‼️‼️

Please sanity check me, as I'm not as familiar with how projectData gets passed around. I feel confident that this logic won't break anything because if L548 is null it'll just move on to the next line. But still, please confirm I have the right understanding!

For this screen, projectData.backing() = null (so L547 will not be used). Instead, the backing exists on the projectData.project(). And I want to get the reward off the backing because that's where the rewardImage field lies, so that's what L548 does.

What I don't want to do is L549, where I try to find the reward off the project using the backedReward extension function, because the reward off the project specifically does NOT contain the rewardImage field:

fun Backing.backedReward(project: Project): Reward? { val rewards = project.rewards() ?: return null for (reward in rewards) { if (isBacked(reward)) { return reward } } return null }

I added tests to BackingFragmentViewModelTest to test L548 and L549 when the backing has a reward on it vs when the backing only has a rewardId on it.

Fyi, take a look here for how ProjectData goes to BackingFragment ->
1-

android-oss/app/src/main/java/com/kickstarter/ui/activities/ProjectPageActivity.kt

Line 1039 in ea6ccdd

backingFragment.configureWith(projectData)

2 -

android-oss/app/src/main/java/com/kickstarter/ui/activities/ProjectPageActivity.kt

Line 1245 in ea6ccdd

private fun updateFragments(projectData: ProjectData) {

3 ->

android-oss/app/src/main/java/com/kickstarter/ui/activities/ProjectPageActivity.kt

Line 247 in ea6ccdd

this.viewModel.outputs.projectData()

ycheng-kickstarter · 2025-02-12T20:51:53Z

app/src/main/res/layout/item_add_on.xml

+                  app:layout_constraintDimensionRatio="@string/reward_card_image_aspect_ratio"
+                  app:layout_constraintStart_toStartOf="parent"
+                  app:layout_constraintEnd_toEndOf="parent"
+                  app:layout_constraintTop_toTopOf="parent" />


Can ignore the changes in this file after this line!

…ewardId

codecov-commenter · 2025-02-12T22:19:49Z

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

Attention: Patch coverage is 0% with 115 lines in your changes missing coverage. Please review.

Project coverage is 67.93%. Comparing base (ea6ccdd) to head (4ac556b).

Files with missing lines	Patch %	Lines
.../activities/compose/projectpage/AddOnsContainer.kt	0.00%	111 Missing ⚠️
...arter/services/transformers/GraphQLTransformers.kt	0.00%	4 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@             Coverage Diff              @@
##             master    #2224      +/-   ##
============================================
- Coverage     67.97%   67.93%   -0.05%     
  Complexity     2197     2197              
============================================
  Files           356      356              
  Lines         23966    23983      +17     
  Branches       3521     3524       +3     
============================================
  Hits          16292    16292              
- Misses         5829     5846      +17     
  Partials       1845     1845

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Arkariang

🎆 🥳 🎈 Finally!! getting Images on rewards!

ycheng-kickstarter · 2025-02-13T15:28:08Z

Fixed an issue with center crop. See before and after:

leighdouglas

this looks so good! great job 🎉

ycheng-kickstarter added 4 commits February 12, 2025 12:21

Add images to rewards screen, add ons screen, and manage pledge screen

4c7e4a2

Fix merge conflicts

1352942

Set aspect ratio and use placeholders

ce82f27

Merge branch 'master' into MBL-2069-images-on-rewards-ui

279a5d4

ycheng-kickstarter commented Feb 12, 2025

View reviewed changes

ycheng-kickstarter added 2 commits February 12, 2025 16:39

Test for BackingFragmentViewModel when backing has reward vs just a r…

777dfe1

…ewardId

Merge branch 'master' into MBL-2069-images-on-rewards-ui

d8bdf39

ycheng-kickstarter marked this pull request as ready for review February 12, 2025 23:23

ycheng-kickstarter added 2 commits February 12, 2025 18:23

Merge branch 'master' into MBL-2069-images-on-rewards-ui

e79d9e7

Coil interprets empty url with a placeholder in compose preview

990aab3

Arkariang previously approved these changes Feb 13, 2025

View reviewed changes

Center crop

4ac556b

ycheng-kickstarter dismissed Arkariang’s stale review via 4ac556b February 13, 2025 15:26

ycheng-kickstarter requested review from leighdouglas, jlplks, tonyteate and Arkariang February 13, 2025 16:26

leighdouglas approved these changes Feb 13, 2025

View reviewed changes

ycheng-kickstarter merged commit fca318a into master Feb 13, 2025
3 checks passed

ycheng-kickstarter deleted the MBL-2069-images-on-rewards-ui branch February 13, 2025 17:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MBL-2069 Add images on rewards UI #2224

MBL-2069 Add images on rewards UI #2224

ycheng-kickstarter commented Feb 12, 2025 •

edited

Loading

ycheng-kickstarter Feb 12, 2025 •

edited

Loading

ycheng-kickstarter Feb 12, 2025 •

edited

Loading

Arkariang Feb 12, 2025

ycheng-kickstarter Feb 12, 2025

ycheng-kickstarter Feb 12, 2025

ycheng-kickstarter Feb 12, 2025

ycheng-kickstarter Feb 12, 2025 •

edited

Loading

Arkariang Feb 13, 2025

ycheng-kickstarter Feb 12, 2025

codecov-commenter commented Feb 12, 2025 •

edited

Loading

Arkariang left a comment

ycheng-kickstarter commented Feb 13, 2025 •

edited

Loading

leighdouglas left a comment

MBL-2069 Add images on rewards UI #2224

MBL-2069 Add images on rewards UI #2224

Conversation

ycheng-kickstarter commented Feb 12, 2025 • edited Loading

📲 What

🤔 Why

🛠 How

👀 See

📋 QA

Story 📖

ycheng-kickstarter Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

ycheng-kickstarter Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Arkariang Feb 12, 2025

Choose a reason for hiding this comment

ycheng-kickstarter Feb 12, 2025

Choose a reason for hiding this comment

ycheng-kickstarter Feb 12, 2025

Choose a reason for hiding this comment

ycheng-kickstarter Feb 12, 2025

Choose a reason for hiding this comment

ycheng-kickstarter Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Arkariang Feb 13, 2025

Choose a reason for hiding this comment

ycheng-kickstarter Feb 12, 2025

Choose a reason for hiding this comment

codecov-commenter commented Feb 12, 2025 • edited Loading

Codecov Report

Arkariang left a comment

Choose a reason for hiding this comment

ycheng-kickstarter commented Feb 13, 2025 • edited Loading

leighdouglas left a comment

Choose a reason for hiding this comment

ycheng-kickstarter commented Feb 12, 2025 •

edited

Loading

ycheng-kickstarter Feb 12, 2025 •

edited

Loading

ycheng-kickstarter Feb 12, 2025 •

edited

Loading

ycheng-kickstarter Feb 12, 2025 •

edited

Loading

codecov-commenter commented Feb 12, 2025 •

edited

Loading

ycheng-kickstarter commented Feb 13, 2025 •

edited

Loading