From 6e6a031c1dbd081e4669c55f704483516812695c Mon Sep 17 00:00:00 2001
From: Romain CREY <ext.sopra.rcrey@grandlyon.com>
Date: Tue, 2 Jun 2020 14:42:50 +0200
Subject: [PATCH] feat: 4 weeks challenge + fix level + fix badge error + fully
locked challenge
---
.../FinishedChallengeDetailsViewContainer.tsx | 37 ++++++++++------
.../LockedChallengeDetailsViewContainer.tsx | 4 +-
.../Challenge/FollowChallengeTimeline.tsx | 43 ++++++++++++++++---
.../ChallengeList/ChallengeListItem.tsx | 13 ++++--
.../ChallengeList/ChallengesList.tsx | 16 ++++---
.../ChallengeModal/ChallengeModal.tsx | 29 ++++++++++---
src/db/challengeTypeData.json | 14 +++---
src/locales/en.json | 1 +
src/services/challengeDataManagerService.ts | 18 +++++---
src/styles/components/_challenges.scss | 11 ++++-
src/styles/components/_ecogesture.scss | 12 +++---
11 files changed, 141 insertions(+), 57 deletions(-)
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 92a2ae276..8be12a7ec 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -37,10 +37,15 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
const { screenType } = useContext(AppContext)
async function importRightBadge(id: string, badgeStatus: number) {
- // Les svg doivent être au format idchallenge-badgestate.svg
- const importedBadge = await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
- )
+ // Les png doivent être au format idchallenge-badgestate.png
+ const importedBadge =
+ id === 'CHA00000001'
+ ? await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
+ )
+ : await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
+ )
setBadgeIcon(importedBadge.default)
}
@@ -111,20 +116,26 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
</div>
)
) : null}
- <div className="cp-win-badge-star">
- <img
- className="cp-win-badge"
- src={badgeIcon}
- width={screenType === ScreenType.MOBILE ? 200 : 300}
- ></img>
- {challenge.badge === BadgeState.SUCCESS ? (
+ {challenge.badge === BadgeState.SUCCESS ? (
+ <div className="cp-win-badge-star">
+ <img
+ className="cp-win-badge"
+ src={badgeIcon}
+ width={screenType === ScreenType.MOBILE ? 200 : 300}
+ ></img>
<img
className="cp-win-star"
src={StarIcon}
width={screenType === ScreenType.MOBILE ? 380 : 480}
></img>
- ) : null}
- </div>
+ </div>
+ ) : (
+ <img
+ className="cp-win-badge"
+ src={badgeIcon}
+ width={screenType === ScreenType.MOBILE ? 200 : 300}
+ ></img>
+ )}
<div className="cp-description text-16-bold">
{challenge.challengeType &&
challenge.challengeType.description}
diff --git a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
index 2fcdca083..36ee470b0 100644
--- a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
@@ -65,7 +65,9 @@ const LockedChallengeDetailsViewContainer: React.FC<LockedChallengeDetailsViewPr
width={screenType === ScreenType.MOBILE ? 180 : 220}
></img>
<div className="cp-description text-16-bold">
- {t('CHALLENGE.LOCKED')}
+ {challenge.level < 900
+ ? t('CHALLENGE.LOCKED')
+ : t('CHALLENGE.FULLY_LOCKED')}
</div>
</div>
<div className="cp-valid-locked">
diff --git a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx
index ff67a7123..306b1763f 100644
--- a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx
+++ b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx
@@ -35,12 +35,24 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
const startingDate = DateTime.fromISO(challenge.startingDate.toString())
const listOfChallengeDays = []
let i = 0
- while (challenge.challengeType.duration.days > i) {
- listOfChallengeDays.push({
- letter: startingDate.plus({ days: i }).weekdayShort[0].toUpperCase(),
- date: startingDate.plus({ days: i }).day,
- })
- i++
+ if (challenge.challengeType.duration.days === 7) {
+ while (challenge.challengeType.duration.days > i) {
+ listOfChallengeDays.push({
+ letter: startingDate
+ .plus({ days: i })
+ .weekdayShort[0].toUpperCase(),
+ date: startingDate.plus({ days: i }).day,
+ })
+ i++
+ }
+ } else {
+ while (challenge.challengeType.duration.days >= i) {
+ listOfChallengeDays.push({
+ letter: '',
+ date: startingDate.plus({ days: i }).toFormat('dd/MM'),
+ })
+ i += 7
+ }
}
return listOfChallengeDays
} else {
@@ -50,10 +62,27 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
const getListOfPastDays = () => {
if (Interval.fromDateTimes(viewingDate(), DateTime.local()).isValid) {
- if (challenge && challenge.challengeType) {
+ if (
+ challenge &&
+ challenge.challengeType &&
+ challenge.challengeType.duration.days === 7
+ ) {
return Interval.fromDateTimes(viewingDate(), DateTime.local()).count(
'days'
)
+ } else if (
+ challenge &&
+ challenge.challengeType &&
+ challenge.challengeType.duration.days === 28
+ ) {
+ console.log(
+ Interval.fromDateTimes(viewingDate(), DateTime.local()).count('days')
+ )
+ return (
+ Interval.fromDateTimes(viewingDate(), DateTime.local()).count(
+ 'days'
+ ) / 7
+ )
} else {
return 0
}
diff --git a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
index 6dfd81a72..c533747de 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
@@ -33,10 +33,15 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
const [badgeIcon, setBadgeIcon] = useState<any | null>(null)
async function importRightBadge(id: string, badgeStatus: number) {
- // Les svg doivent être au format idchallenge-badgestate.svg
- const importedBadge = await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
- )
+ // Les png doivent être au format idchallenge-badgestate.png
+ const importedBadge =
+ id === 'CHA00000001'
+ ? await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
+ )
+ : await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
+ )
setBadgeIcon(importedBadge.default)
}
diff --git a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
index 0a7180cc8..46c71e6a2 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
@@ -36,6 +36,7 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
const [openChallengeModal, setOpenChallengeModal] = useState(false)
const [scroll, setScroll] = useState(0)
const [paddingBottom, setPaddingBottom] = useState(0)
+ const [userLevel, setUserLevel] = useState<null | number>(null)
const handleCloseClick = () => {
setOngoingChallenge(null)
@@ -87,8 +88,8 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
fluidTypes
)
const dataAllUC = await challengeManager.getAllUserChallenges()
-
- if (subscribed && dataAllCT && dataAllUC) {
+ const levelOfUser = await challengeManager.getUserLevel()
+ if (subscribed && dataAllCT && dataAllUC && levelOfUser) {
const ongoingChallengeTmp = dataAllUC.filter(
challenge => challenge.state === ChallengeState.ONGOING
)[0]
@@ -96,7 +97,7 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
setChallengesType(dataAllCT)
setUserChallenges(dataAllUC)
setOngoingChallenge(ongoingChallengeTmp)
-
+ setUserLevel(levelOfUser)
if (
await challengeManager.isChallengeOver(
ongoingChallengeTmp,
@@ -122,10 +123,12 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
fluidTypes
)
const dataAllUC = await challengeManager.getAllUserChallenges()
- if (subscribed && dataAllCT && dataAllUC) {
+ const levelOfUser = await challengeManager.getUserLevel()
+ if (subscribed && dataAllCT && dataAllUC && levelOfUser) {
setChallengesType(dataAllCT)
setUserChallenges(dataAllUC)
setRightChallengeInTheMiddle(dataAllCT, dataAllUC)
+ setUserLevel(levelOfUser)
}
}
loadNewChallengesType()
@@ -154,7 +157,10 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
style={{ paddingBottom: paddingBottom }}
>
{challengesType.map((challenge, index) =>
- index === challengesType.length - 1 && !ongoingChallenge ? (
+ index === challengesType.length - 1 &&
+ !ongoingChallenge &&
+ userLevel ===
+ challengesType[challengesType.length - 1].level ? (
<ChallengeListItem
key={index}
challenge={challenge}
diff --git a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
index 34bf9aae7..b1456acf4 100644
--- a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
+++ b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
@@ -29,10 +29,15 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
const { screenType } = useContext(AppContext)
async function importRightBadge(id: string, badgeStatus: number) {
- // Les svg doivent être au format idchallenge-badgestate.svg
- const importedBadge = await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
- )
+ // Les png doivent être au format idchallenge-badgestate.png
+ const importedBadge =
+ id === 'CHA00000001'
+ ? await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
+ )
+ : await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
+ )
setBadgeIcon(importedBadge.default)
}
@@ -56,10 +61,20 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
{t('CHALLENGE.CONGRATULATION')}
</div>
<div className="cm-result text-18-bold">
- <div>{t('CHALLENGE.RESULT_POSITIF')}</div>
- <div className="cm-result-positif text-18-normal">{`${result} €`}</div>
+ {challengeId !== 'CHA00000001' ? (
+ <>
+ <div>{t('CHALLENGE.RESULT_POSITIF')}</div>
+ <div className="cm-result-positif text-18-normal">{`${result} €`}</div>
+ </>
+ ) : null}
</div>
- <div className="cm-win-badge-star">
+ <div
+ className={
+ challengeId !== 'CHA00000001'
+ ? 'cm-win-badge-star'
+ : 'cm-win-badge-star --ecolyo-royal'
+ }
+ >
<img
className="cm-win-badge"
src={badgeIcon}
diff --git a/src/db/challengeTypeData.json b/src/db/challengeTypeData.json
index 7ab6a42b4..028b6669b 100644
--- a/src/db/challengeTypeData.json
+++ b/src/db/challengeTypeData.json
@@ -48,10 +48,10 @@
{
"_id": "CHA00000003",
"type": 0,
- "title": "Winter is leaving",
- "description": "Et si dans les 7 prochains jours vous réussissiez à consommer moins que dans les 7 derniers",
+ "title": "Méga Coques en stock",
+ "description": "Et si dans les 4 prochaines semaines vous réussissiez à consommer moins que dans les 4 dernières",
"level": 3,
- "duration": { "days": 7 },
+ "duration": { "days": 28 },
"fluidTypes": [0, 1, 2],
"relationships": {
"availableEcogestures": {
@@ -77,9 +77,9 @@
{
"_id": "CHA00000004",
"type": 0,
- "title": "Mega Coques en stock",
+ "title": "Winter is leaving",
"description": "Et si dans les 7 prochains jours vous réussissiez à consommer moins que dans les 7 derniers",
- "level": 4,
+ "level": 901,
"duration": { "days": 7 },
"fluidTypes": [0, 1, 2],
"relationships": {
@@ -106,9 +106,9 @@
{
"_id": "CHA00000005",
"type": 0,
- "title": "Giga Coques en stock",
+ "title": "Méga Winter is leaving",
"description": "Et si dans les 7 prochains jours vous réussissiez à consommer moins que dans les 7 derniers",
- "level": 5,
+ "level": 902,
"duration": { "days": 7 },
"fluidTypes": [0, 1, 2],
"relationships": {
diff --git a/src/locales/en.json b/src/locales/en.json
index a727191ac..cf8a61c9a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -140,6 +140,7 @@
"ONGOING_CHALLENGE": "En cours",
"ENDINGDATE_UNDEFINED": "Date non connue",
"LOCKED": "Vous devez finir le défi précédent pour accéder à celui-ci",
+ "FULLY_LOCKED": "Ce défi sera disponible dans une prochaine mise à jour",
"START": "Allons-y !",
"NOT_NOW": "Pas maintenant !",
"STOP": "Arrêter le défi",
diff --git a/src/services/challengeDataManagerService.ts b/src/services/challengeDataManagerService.ts
index c00456c30..6da8ff4b8 100644
--- a/src/services/challengeDataManagerService.ts
+++ b/src/services/challengeDataManagerService.ts
@@ -202,16 +202,14 @@ export default class ChallengeManager implements IChallengeManager {
return 0
}
- public async updateUserLevel(level?: number) {
+ public async updateUserLevel(level: number) {
await this._client
.query(this._client.find(USERPROFILE_DOCTYPE).limitBy(1))
.then(async ({ data }) => {
const doc = data[0]
- let actualLevel = 0
- if (level) {
+ let actualLevel = doc.level
+ if (level > actualLevel) {
actualLevel = level
- } else {
- actualLevel = doc.level
}
await this._client.save({
...doc,
@@ -445,6 +443,16 @@ export default class ChallengeManager implements IChallengeManager {
return challengeTypes
}
+ public async getUserLevel() {
+ let userLevel
+ await this._client
+ .query(this._client.find(USERPROFILE_DOCTYPE).limitBy(1))
+ .then(async ({ data }) => {
+ userLevel = data[0].level
+ })
+ return userLevel
+ }
+
public async startChallenge(
challenge: ChallengeType,
fluidTypes: FluidType[],
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index d602b791d..93e20d628 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -238,8 +238,15 @@
position: absolute;
top: 15px;
@media #{$large-phone} {
- top: 65px;
- }
+ top: 65px;
+ }
+ &.--ecolyo-royal {
+ @extend .cp-content;
+ top: -38px;
+ @media #{$large-phone} {
+ top: 12px;
+ }
+ }
.cm-win-badge {
grid-column: 1;
grid-row: 1;
diff --git a/src/styles/components/_ecogesture.scss b/src/styles/components/_ecogesture.scss
index b5900788c..99d303bdb 100644
--- a/src/styles/components/_ecogesture.scss
+++ b/src/styles/components/_ecogesture.scss
@@ -54,7 +54,7 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: flex-end;
+ justify-content: space-around;
&.ec-content-unlocked {
padding: 0.4rem 0;
}
@@ -64,11 +64,11 @@
.ec-content-icon{
min-height: 50px;
}
- .ec-content-challenge-text {
- display: flex;
- flex: 1;
- align-items: center;
- }
+ // .ec-content-challenge-text {
+ // display: flex;
+ // flex: 1;
+ // align-items: center;
+ // }
.ec-content-short-name {
display: flex;
flex: 1;
--
GitLab