Skip to content

Commit

Permalink
(PC-33066) feat(Achievements): hide locked badge title (#7275)
Browse files Browse the repository at this point in the history 
* Achievement name is Badge non délboqué when not completed

* Refacto

* Use badge name from useAchievements

* Add test for remainingAchievementsText

* Refacto

* Refacto tests

* Refacto

* Add tests for sorting

* Refacto

* Refacto

* Remove achievement name in modal when achievement is not completed

* Update snapshot

* Remove description and update snapshot

* Update snapshot
  • Loading branch information
@mleduc-pass
mleduc-pass authored Nov 26, 2024
1 parent 7144094 commit b8f07a6
Show file tree
Hide file tree
Showing 6 changed files with 286 additions and 242 deletions.
43 changes: 17 additions & 26 deletions __snapshots__/features/profile/pages/Achievements/Achievements.native.test.tsx.native-snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,6 @@ exports[`<Achievements/> should match snapshot 1`] = `
data={
[
{
"description": "Réserve ta première place de cinéma",
"id": "FIRST_MOVIE_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -405,7 +404,6 @@ exports[`<Achievements/> should match snapshot 1`] = `
"name": "Cinéphile en herbe",
},
{
"description": "Tu as réservé ton premier livre",
"id": "FIRST_BOOK_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -427,7 +425,6 @@ exports[`<Achievements/> should match snapshot 1`] = `
"name": "Rat de bibliothèque",
},
{
"description": "Tu as réservé ton premier atelier ou cours artistique",
"id": "FIRST_ART_LESSON_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -449,8 +446,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
"name": "Se mettre à la pratique",
},
{
"description": "Réserve du matériel créatif",
"id": "FIRST_INSTRUMENT_BOOKING",
"id": "FIRST_RECORDED_MUSIC_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
"attrs": [
Expand All @@ -468,11 +464,10 @@ exports[`<Achievements/> should match snapshot 1`] = `
"withComponent": [Function],
},
"isCompleted": false,
"name": "Artiste en devenir",
"name": "Badge non débloqué",
},
{
"description": "Réserve ta première visite",
"id": "FIRST_MUSEUM_BOOKING",
"id": "FIRST_SHOW_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
"attrs": [
Expand All @@ -490,11 +485,10 @@ exports[`<Achievements/> should match snapshot 1`] = `
"withComponent": [Function],
},
"isCompleted": false,
"name": "Explorateur culturel",
"name": "Badge non débloqué",
},
{
"description": "Abonne-toi à un média",
"id": "FIRST_NEWS_BOOKING",
"id": "FIRST_MUSEUM_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
"attrs": [
Expand All @@ -512,10 +506,9 @@ exports[`<Achievements/> should match snapshot 1`] = `
"withComponent": [Function],
},
"isCompleted": false,
"name": "Futur Hugo Décrypte",
"name": "Badge non débloqué",
},
{
"description": "Réserve ton premier concert ou festival",
"id": "FIRST_LIVE_MUSIC_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -534,11 +527,10 @@ exports[`<Achievements/> should match snapshot 1`] = `
"withComponent": [Function],
},
"isCompleted": false,
"name": "Premier Beat",
"name": "Badge non débloqué",
},
{
"description": "Réserve ton premier CD ou vinyle",
"id": "FIRST_RECORDED_MUSIC_BOOKING",
"id": "FIRST_NEWS_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
"attrs": [
Expand All @@ -556,11 +548,10 @@ exports[`<Achievements/> should match snapshot 1`] = `
"withComponent": [Function],
},
"isCompleted": false,
"name": "Premier tour de platine",
"name": "Badge non débloqué",
},
{
"description": "Réserve ton premier spectacle",
"id": "FIRST_SHOW_BOOKING",
"id": "FIRST_INSTRUMENT_BOOKING",
"illustration": {
"$$typeof": Symbol(react.forward_ref),
"attrs": [
Expand All @@ -578,7 +569,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
"withComponent": [Function],
},
"isCompleted": false,
"name": "Rideau rouge levé",
"name": "Badge non débloqué",
},
{
"description": "",
Expand Down Expand Up @@ -1112,7 +1103,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
]
}
>
Artiste en devenir
Badge non débloqué
</Text>
</View>
</View>
Expand Down Expand Up @@ -1248,7 +1239,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
]
}
>
Explorateur culturel
Badge non débloqué
</Text>
</View>
</View>
Expand Down Expand Up @@ -1365,7 +1356,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
]
}
>
Futur Hugo Décrypte
Badge non débloqué
</Text>
</View>
</View>
Expand Down Expand Up @@ -1501,7 +1492,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
]
}
>
Premier Beat
Badge non débloqué
</Text>
</View>
</View>
Expand Down Expand Up @@ -1618,7 +1609,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
]
}
>
Premier tour de platine
Badge non débloqué
</Text>
</View>
</View>
Expand Down Expand Up @@ -1754,7 +1745,7 @@ exports[`<Achievements/> should match snapshot 1`] = `
]
}
>
Rideau rouge levé
Badge non débloqué
</Text>
</View>
</View>
Expand Down
7 changes: 3 additions & 4 deletions src/features/profile/components/Achievements/Badge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { FC } from 'react'
import styled, { useTheme } from 'styled-components/native'

import { AchievementDetailsModal } from 'features/profile/components/Modals/AchievementDetailsModal'
import { useAchievementDetails } from 'features/profile/components/Modals/useAchievementDetails'
import { AchievementId } from 'features/profile/pages/Achievements/AchievementData'
import { useModal } from 'ui/components/modals/useModal'
import { TouchableOpacity } from 'ui/components/TouchableOpacity'
Expand All @@ -12,11 +11,11 @@ import { Spacer, TypoDS, getSpacing } from 'ui/theme'
type BadgeProps = {
id: AchievementId
Illustration: React.FC<AccessibleIcon>
name: string
isCompleted?: boolean
}

export const Badge: FC<BadgeProps> = ({ Illustration, id, isCompleted }) => {
const achievement = useAchievementDetails(id)
export const Badge: FC<BadgeProps> = ({ Illustration, id, name, isCompleted }) => {
const { visible, showModal, hideModal } = useModal(false)
const theme = useTheme()

Expand All @@ -29,7 +28,7 @@ export const Badge: FC<BadgeProps> = ({ Illustration, id, isCompleted }) => {
</IllustrationContainer>
<Spacer.Column numberOfSpaces={2} />
<TypoBadgeName numberOfLines={2} isCompleted={!!isCompleted}>
{achievement?.name}
{name}
</TypoBadgeName>
</BadgeContainer>
</StyledTouchableOpacity>
Expand Down
8 changes: 6 additions & 2 deletions src/features/profile/components/Modals/AchievementDetailsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,12 @@ export const AchievementDetailsModal = ({ visible, hideModal, id }: Props) => {
)}
</BodyWrapper>
<Spacer.Column numberOfSpaces={4} />
<TypoDS.Title3>{achievement.name}</TypoDS.Title3>
<Spacer.Column numberOfSpaces={4} />
{achievement.completed ? (
<React.Fragment>
<TypoDS.Title3>{achievement.name}</TypoDS.Title3>
<Spacer.Column numberOfSpaces={4} />
</React.Fragment>
) : null}
<StyledDescrption>
{achievement.completed ? achievement.descriptionUnlocked : achievement.descriptionLocked}
</StyledDescrption>
Expand Down
35 changes: 11 additions & 24 deletions src/features/profile/pages/Achievements/Achievements.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const emptyBadge = {

export const Achievements = () => {
const { uniqueColors } = useTheme()
const { badges } = useAchievements({
const categories = useAchievements({
achievements: mockAchievements,
completedAchievements: mockCompletedAchievements,
})
Expand All @@ -38,46 +38,32 @@ export const Achievements = () => {
<SecondaryPageWithBlurHeader title="">
<ViewGap gap={4}>
<TypoDS.Title2 {...getHeadingAttrs(1)}>Mes Succès</TypoDS.Title2>
{badges.map((badge) => {
const remainingAchievementsText = `${badge.remainingAchievements} badge${badge.remainingAchievements > 1 ? 's' : ''} restant`

const completedAchievements = badge.achievements.filter((item) => item.isCompleted)
const incompleteAchievements = badge.achievements.filter((item) => !item.isCompleted)

const sortedCompletedAchievements = [...completedAchievements].sort((a, b) =>
a.name.localeCompare(b.name)
)

const sortedIncompleteAchievements = [...incompleteAchievements].sort((a, b) =>
a.name.localeCompare(b.name)
)

let sortedAchievements = [...sortedCompletedAchievements, ...sortedIncompleteAchievements]
const oddAchievements = sortedAchievements.length % 2 !== 0
if (oddAchievements) sortedAchievements = [...sortedAchievements, emptyBadge]
{categories.map((category) => {
const isOddBadges = category.badges.length % 2 !== 0
const badges = isOddBadges ? [...category.badges, emptyBadge] : category.badges

return (
<ViewGap gap={4} key={badge.category}>
<ViewGap gap={4} key={category.id}>
<AchievementsGroupeHeader>
<View>
<TypoDS.Title4 {...getHeadingAttrs(2)}>
{achievementCategoryDisplayNames[badge.category]}
{achievementCategoryDisplayNames[category.id]}
</TypoDS.Title4>
<StyledBody>{remainingAchievementsText}</StyledBody>
<StyledBody>{category.remainingAchievementsText}</StyledBody>
</View>
<CompletionContainer>
<ProgressBarContainer>
<ProgressBar
progress={badge.progress}
progress={category.progress}
colors={[uniqueColors.brand]}
height={2.5}
/>
</ProgressBarContainer>
<TypoDS.BodyS>{badge.progressText}</TypoDS.BodyS>
<TypoDS.BodyS>{category.progressText}</TypoDS.BodyS>
</CompletionContainer>
</AchievementsGroupeHeader>
<FlatList
data={sortedAchievements}
data={badges}
numColumns={2}
keyExtractor={(item) => item.id}
contentContainerStyle={{
Expand All @@ -92,6 +78,7 @@ export const Achievements = () => {
item.illustration ? (
<Badge
id={item.id}
name={item.name}
Illustration={item.illustration}
isCompleted={item.isCompleted}
/>
Expand Down
Loading

0 comments on commit b8f07a6

Please sign in to comment.