feat: badge in progress content component #5618
Conversation
christian14b
commented
Oct 25, 2024
christian14b
commented
christian14b
requested review from
emuvente,
dyersituations and
roger-in-kiva
src/composables/useBadgeModal.js
Outdated
| @@ -30,6 +30,12 @@ export const ID_US_ECONOMIC_EQUALITY = 'us-economic-equality'; | |||
| export const ID_CLIMATE_ACTION = 'climate-action'; | |||
| export const ID_REFUGEE_EQUALITY = 'refugee-equality'; | |||
| export const ID_BASIC_NEEDS = 'basic-needs'; | |||
| // TODO: Use the LoanChannelQueryMap to get the correct filters | |||
There was a problem hiding this comment.
Is a ticket logged for this?
There was a problem hiding this comment.
Added this as a note because I wasn't sure if we have already handled this (the query params needed to redirect users to lend/filter), but I'll create a follow-up ticket if it's not
There was a problem hiding this comment.
The query map will work if our achievements directly match existing channels in that map file. Do our achievements as defined match existing channels?
There was a problem hiding this comment.
Most of them, the problem is the OR conditions in the Badge breakdowns spreadsheet I think... Seems like only Climate actions and Basic needs will need to be handled differently
There was a problem hiding this comment.
Well, I don't think we will need the query map to replace this, we need specifics query params for Climate actions and Basic needs
| class="tw-pt-1 tw-pb-1.5 tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-left tw-gap-3" | ||
| > | ||
| <BadgeContainer :status="BADGE_IN_PROGRESS" :shape="getBadgeShape()" class="tw-z-1"> | ||
| <img |
There was a problem hiding this comment.
The dashed border is showing up inside the badge icon. It should show around the outside. Is this because of the maxheight override? Also, it would be helpful to add BadgeModal stories to cover the 5 different badge use cases, to ensure the badge icon looks correctly for each.
Related, this version of the BadgeModal requires there to be modal content to be complete compared to the mocks (modal without title, back button, etc.). Is that something you see as a follow-up ticket?
There was a problem hiding this comment.
My bad, badge image is old, new one looks good
And yeah, I think the other elements should be handled while integrating this in BadgeModal, I'll create a separate ticket to integrate them
There was a problem hiding this comment.
Sounds good regarding the follow-up ticket. Please include a link to the mocks and bullets for the specific requirements in the mocks that are still needed.
| }; | ||
|
|
||
| const badgeName = computed(() => props.badge?.fields?.challengeName ?? ''); | ||
| const badgeImage = computed(() => props.badge?.fields?.badgeImage?.fields?.file?.url ?? ''); |
There was a problem hiding this comment.
This will need to change once we update to use all badge icons, this needs to be the badge of the current level. I'm creating utils to get the correct tier. Please add a TODO here to use the icon of the correct in-progress badge level.
