diff --git a/src/assets/icons/tabbar/grand-lyon.svg b/src/assets/icons/tabbar/grand-lyon.svg new file mode 100644 index 0000000000000000000000000000000000000000..2e4c7c0794ba24b5782d7681d93f73630abb5464 --- /dev/null +++ b/src/assets/icons/tabbar/grand-lyon.svg @@ -0,0 +1,22 @@ +<svg width="101" height="23" viewBox="0 0 101 23" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M7.81215 12.9224C7.39405 13.427 6.88879 13.833 6.32645 14.1163C5.76411 14.3995 5.15621 14.5542 4.53892 14.5711C3.92164 14.588 3.30761 14.4667 2.7334 14.2146C2.15919 13.9625 1.63653 13.5846 1.19656 13.1034C0.0191753 11.7958 0 10.5266 0 7.28739C0 4.04822 0.0230104 2.77683 1.19656 1.46924C1.62081 1.00088 2.12406 0.630018 2.6775 0.377874C3.23094 0.125731 3.82371 -0.0027462 4.4219 -0.000207232C6.68846 -0.000207232 8.42769 1.65026 8.8323 4.18665H7.85434C7.47083 2.21461 6.1688 0.966645 4.42765 0.966645C3.97438 0.962018 3.5248 1.05754 3.10507 1.24766C2.68534 1.43777 2.30384 1.71868 1.98276 2.07405C1.05274 3.10905 0.981792 4.20794 0.981792 7.28739C0.981792 10.3668 1.05466 11.4742 1.97893 12.4986C2.29994 12.8541 2.68143 13.135 3.10117 13.3252C3.52092 13.5153 3.97053 13.6107 4.42382 13.606C4.93588 13.6092 5.44221 13.4864 5.90641 13.2463C6.3706 13.0062 6.78111 12.6548 7.10841 12.2175C7.66642 11.4529 7.88502 10.6075 7.88502 9.38081V8.09239H4.4219V7.12554H8.86298V9.46813C8.86298 10.9589 8.57343 12.0237 7.81215 12.9309" fill="white"/> +<path d="M17.0893 1.08766H13.2829V6.88451H17.0893C18.7384 6.88451 19.9349 5.95812 19.9349 3.98609C19.9349 2.01405 18.7384 1.08766 17.0893 1.08766ZM19.9157 14.4532L16.8342 7.85136H13.2829V14.4532H12.3049V0.127197H17.2158C19.3251 0.127197 20.9129 1.47525 20.9129 3.97118C20.9129 6.10081 19.7527 7.49358 17.9406 7.83645L21.0567 14.4596L19.9157 14.4532Z" fill="white"/> +<path d="M27.6724 1.56896L24.9725 10.0023H30.3724L27.6724 1.56896ZM31.8048 14.4511L30.6811 10.9691H24.6638L23.5401 14.4511H22.4893L27.2371 0.127197H28.1077L32.8556 14.4596L31.8048 14.4511Z" fill="white"/> +<path d="M43.5439 14.4508L36.0961 1.99248V14.4508H35.1182V0.118408H36.0961L43.5439 12.5384V0.118408H44.5238V14.4508H43.5439Z" fill="white"/> +<path d="M55.3753 2.19294C54.6332 1.34109 53.6361 1.08766 52.6025 1.08766H49.4846V13.4842H52.6006C53.6342 13.4842 54.6313 13.2223 55.3734 12.3768C56.405 11.2098 56.3322 8.6734 56.3322 7.0847C56.3322 5.49599 56.4031 3.3621 55.3734 2.18655L55.3753 2.19294ZM56.0618 13.1371C55.2948 13.989 54.1788 14.4447 52.8365 14.4447H48.5066V0.127197H52.8384C54.1807 0.127197 55.3024 0.591457 56.0637 1.43692C57.3696 2.88507 57.314 5.15951 57.314 7.09321C57.314 9.02692 57.3696 11.6932 56.0637 13.1435L56.0618 13.1371Z" fill="white"/> +<path d="M60.3035 14.4508V0.118408H62.8231V11.9549H68.6775V14.4508H60.3035Z" fill="white"/> +<path d="M74.202 8.57304V14.4508H71.7015V8.57304L67.8223 0.118408H70.5586L72.969 5.89822L75.3449 0.118408H78.0793L74.202 8.57304Z" fill="white"/> +<path d="M85.3987 3.26031C85.1955 3.01071 84.9458 2.81309 84.6671 2.68109C84.3883 2.54909 84.0871 2.48586 83.7841 2.49577C83.4787 2.48591 83.1749 2.54907 82.8934 2.68098C82.6118 2.81288 82.3591 3.01046 82.1523 3.26031C81.6633 3.86299 81.5368 4.53809 81.5368 7.28531C81.5368 10.0325 81.6633 10.7055 82.1523 11.3103C82.3592 11.56 82.6119 11.7575 82.8934 11.8894C83.175 12.0213 83.4787 12.0846 83.7841 12.0748C84.087 12.0846 84.3882 12.0213 84.667 11.8893C84.9457 11.7573 85.1954 11.5598 85.3987 11.3103C85.8877 10.7055 86.0335 10.0325 86.0335 7.28531C86.0335 4.53809 85.8896 3.86299 85.3987 3.26031ZM87.2722 13.0034C86.3373 14.0107 85.0858 14.5741 83.7832 14.5741C82.4805 14.5741 81.2291 14.0107 80.2942 13.0034C78.9902 11.5552 79.0247 9.76207 79.0247 7.28744C79.0247 4.81281 78.9902 3.02818 80.2942 1.57151C81.2291 0.564137 82.4805 0.000732422 83.7832 0.000732422C85.0858 0.000732422 86.3373 0.564137 87.2722 1.57151C88.5781 3.01966 88.5589 4.81068 88.5589 7.28744C88.5589 9.7642 88.5704 11.5552 87.2722 13.0034Z" fill="white"/> +<path d="M98.7506 14.4508L93.6403 5.65545V14.4508H91.1226V0.118408H93.37L98.4803 8.89461V0.118408H101V14.4508H98.7506Z" fill="white"/> +<path d="M85.6326 18.9751H85.6442C85.7043 18.8383 85.7987 18.7238 85.9161 18.6452C86.0334 18.5666 86.1687 18.5274 86.3057 18.5321C86.7659 18.5321 87.2338 18.7451 87.2338 20.14C87.2338 20.9365 87.2108 21.8543 86.275 21.8543C86.1485 21.8567 86.0236 21.8223 85.9126 21.7547C85.8017 21.6871 85.7085 21.5886 85.6422 21.4689H85.625V23.0001H85.1628V18.596H85.6307L85.6326 18.9751ZM86.7448 20.14C86.7448 19.6587 86.7448 18.9559 86.1581 18.9559C85.5713 18.9559 85.6346 19.8418 85.6346 20.3295C85.6346 20.7555 85.6576 21.4306 86.1753 21.4306C86.6931 21.4306 86.7448 20.9982 86.7448 20.1464V20.14Z" fill="white"/> +<path d="M53.4347 21.3281H53.4232C53.3722 21.4924 53.2736 21.6332 53.1427 21.7284C53.0119 21.8236 52.8562 21.8679 52.7003 21.8541C52.0905 21.8541 51.9141 21.4176 51.9141 20.8042C51.9141 19.8352 52.7693 19.7927 53.4232 19.8097C53.4347 19.3838 53.4405 18.9238 52.9381 18.9238C52.872 18.9179 52.8057 18.9292 52.7443 18.9568C52.6829 18.9844 52.6282 19.0275 52.5844 19.0827C52.5407 19.1379 52.5091 19.2037 52.4923 19.2748C52.4755 19.3459 52.4738 19.4204 52.4874 19.4924H51.9889C52.0119 18.7768 52.3532 18.5298 52.963 18.5298C53.7032 18.5298 53.8968 18.9557 53.8968 19.4924V21.03C53.8988 21.2846 53.918 21.5388 53.9544 21.7902H53.4424L53.4347 21.3281ZM52.382 20.8404C52.382 21.1492 52.5181 21.4282 52.8307 21.4282C53.1432 21.4282 53.4692 21.2323 53.4232 20.1994C52.9802 20.2079 52.382 20.1653 52.382 20.8426V20.8404Z" fill="white"/> +<path d="M61.8415 21.7905V19.5756C61.8415 19.2519 61.761 18.9559 61.3851 18.9559C61.3079 18.9573 61.2318 18.977 61.1621 19.0137C61.0923 19.0505 61.0304 19.1034 60.9805 19.1689C60.9083 19.312 60.8706 19.4734 60.8712 19.6374V21.7883H60.4072V19.2605C60.4072 19.0475 60.3957 18.8175 60.3784 18.596H60.8731V18.9943H60.8847C60.9435 18.8418 61.0451 18.7145 61.1743 18.6312C61.3035 18.548 61.4534 18.5132 61.6018 18.5321C61.7378 18.5209 61.8738 18.5537 61.9933 18.6267C62.1128 18.6996 62.2106 18.8096 62.2749 18.9431C62.3386 18.8061 62.4379 18.6936 62.5601 18.6203C62.6822 18.547 62.8214 18.5162 62.9595 18.5321C63.2624 18.5321 63.7457 18.6088 63.7457 19.3606V21.7905H63.2778V19.5756C63.2778 19.2519 63.1992 18.9559 62.8214 18.9559C62.7583 18.9448 62.6937 18.9498 62.6326 18.9705C62.5715 18.9911 62.5154 19.0269 62.4686 19.0752C62.3557 19.2349 62.2991 19.4347 62.3094 19.6374V21.7883L61.8415 21.7905Z" fill="white"/> +<path d="M67.1493 20.3593C67.1493 21.2516 67.366 21.4241 67.7245 21.4241C68.0429 21.4241 68.2097 21.1387 68.225 20.8172H68.737C68.737 21.5263 68.3382 21.8479 67.7341 21.8479C67.1301 21.8479 66.6411 21.6349 66.6411 20.2336C66.6411 19.2966 66.737 18.5299 67.7341 18.5299C68.5548 18.5299 68.76 19.0304 68.76 20.0867V20.3593H67.1493ZM68.271 19.9674C68.271 19.0368 68.0371 18.9239 67.6958 18.9239C67.4005 18.9239 67.155 19.0815 67.1493 19.9674H68.271ZM68.3861 17.2202L67.6402 18.1125H67.2567L67.7648 17.2202H68.3861Z" fill="white"/> +<path d="M71.9317 18.5959V17.9826L72.3996 17.7483V18.6001H73.0266V18.992H72.3996V20.947C72.3996 21.16 72.3996 21.4091 72.8272 21.4091C72.8617 21.4091 72.9346 21.3963 73.0381 21.3836V21.7818C72.8847 21.7946 72.7294 21.8329 72.576 21.8329C72.1311 21.8329 71.9317 21.62 71.9317 21.2643V18.9877H71.46V18.5959H71.9317Z" fill="white"/> +<path d="M76.5166 19.0814H76.5338C76.7256 18.5937 76.9672 18.5383 77.4217 18.5383V19.0771L77.297 19.058C77.2558 19.0502 77.2142 19.0459 77.1724 19.0452C76.6546 19.0452 76.5223 19.4818 76.5223 19.9119V21.7988H76.0544V18.6043H76.5223L76.5166 19.0814Z" fill="white"/> +<path d="M80.0793 20.2401C80.0793 19.303 80.1752 18.5364 81.1724 18.5364C82.1695 18.5364 82.2654 19.3094 82.2654 20.2401C82.2654 21.652 81.7802 21.8543 81.1724 21.8543C80.5645 21.8543 80.0793 21.652 80.0793 20.2401ZM81.7764 20.0271C81.7764 19.154 81.531 18.9623 81.1724 18.9623C80.8138 18.9623 80.5683 19.1518 80.5683 20.0271C80.5683 21.0642 80.6891 21.4391 81.1724 21.4391C81.6556 21.4391 81.7783 21.0557 81.7783 20.0186L81.7764 20.0271Z" fill="white"/> +<path d="M90.0909 20.2401C90.0909 19.303 90.1868 18.5364 91.184 18.5364C92.1811 18.5364 92.2789 19.3094 92.2789 20.2401C92.2789 21.652 91.7938 21.8543 91.184 21.8543C90.5742 21.8543 90.0909 21.652 90.0909 20.2401ZM91.788 20.0271C91.788 19.154 91.5426 18.9623 91.184 18.9623C90.8254 18.9623 90.5799 19.1518 90.5799 20.0271C90.5799 21.0642 90.6988 21.4391 91.184 21.4391C91.6691 21.4391 91.7899 21.0557 91.7899 20.0186L91.788 20.0271Z" fill="white"/> +<path d="M95.7747 21.7905H95.3068V17.2224H95.7727L95.7747 21.7905Z" fill="white"/> +<path d="M99.2224 20.3591C99.2224 21.2515 99.4391 21.424 99.7977 21.424C100.116 21.424 100.283 21.1386 100.298 20.817H100.81C100.81 21.5262 100.411 21.8477 99.8072 21.8477C99.2032 21.8477 98.7142 21.6348 98.7142 20.2335C98.7142 19.2965 98.8101 18.5298 99.8072 18.5298C100.628 18.5298 100.833 19.0302 100.833 20.0865V20.3591H99.2224ZM100.344 19.9673C100.344 19.0366 100.11 18.9238 99.7689 18.9238C99.4736 18.9238 99.2281 19.0814 99.2224 19.9673H100.344Z" fill="white"/> +<path d="M49.2296 21.7905H48.7617V17.2224H49.2296V21.7905Z" fill="white"/> +</svg> diff --git a/src/assets/png/badges/CHA00000003-0.png b/src/assets/png/badges/CHA00000003-0.png new file mode 100644 index 0000000000000000000000000000000000000000..bad09c3516c15277abd6b9adc44b4653ec40abb2 Binary files /dev/null and b/src/assets/png/badges/CHA00000003-0.png differ diff --git a/src/assets/png/badges/CHA00000003-1.png b/src/assets/png/badges/CHA00000003-1.png new file mode 100644 index 0000000000000000000000000000000000000000..e16bba433ca3ece0ba70d5f0435443e57bcba00b Binary files /dev/null and b/src/assets/png/badges/CHA00000003-1.png differ diff --git a/src/components/CommonKit/Button/StyledButton.tsx b/src/components/CommonKit/Button/StyledButton.tsx index 645119f8931c0d59e320aa137be9de04eff400d3..f5c2c0e7bb6e2f0816440f98e9508d63854c2396 100644 --- a/src/components/CommonKit/Button/StyledButton.tsx +++ b/src/components/CommonKit/Button/StyledButton.tsx @@ -46,6 +46,10 @@ const PrimaryButton = withStyles({ color: '#000000', fontWeight: 'bold', }, + disabled: { + background: 'var(--multiColorRadialGradient) !important', + opacity: '0.6', + }, })(BaseButton) const SecondaryButton = withStyles({ diff --git a/src/components/CommonKit/Button/StyledOauthButton.tsx b/src/components/CommonKit/Button/StyledOauthButton.tsx index 9e3e6ebec877d7a900ecaf5aa700404893b6f067..b4b23ea1f97bb6dd60fa6644b1a8cdd0cc2c4b9f 100644 --- a/src/components/CommonKit/Button/StyledOauthButton.tsx +++ b/src/components/CommonKit/Button/StyledOauthButton.tsx @@ -42,6 +42,10 @@ const PrimaryButton = withStyles({ root: { background: 'var(--multiColorRadialGradient)', }, + disabled: { + background: 'var(--multiColorRadialGradient) !important', + opacity: '0.6', + }, label: { color: '#000000', fontWeight: 'bold', diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx index 92a2ae276ae3767009249713f57780cf75ec2c98..8be12a7ec3835b5dfed627bff6ad3143bb26e2b8 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 2fcdca083b5a1e64801d7ea11476771b3050c898..36ee470b0237383ca94810b6ee5b4227c7bf15ca 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 ff67a7123da8c8b3d31e1909f4e8784fbc667969..9dd90d335fda5b9adbf18bf4369d962595f0e860 100644 --- a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx +++ b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx @@ -35,12 +35,42 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({ const startingDate = DateTime.fromISO(challenge.startingDate.toString()) const listOfChallengeDays = [] let i = 0 - while (challenge.challengeType.duration.days > 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 { + return [] + } + } + + const getListOfWeeks = () => { + if (challenge && challenge.challengeType) { + 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, + letter: '', + date: startingDate.plus({ days: i }).toFormat('dd/MM'), }) - i++ + i += 7 } return listOfChallengeDays } else { @@ -58,36 +88,75 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({ return 0 } } else { - return 0 + if (challenge) { + return -Interval.fromDateTimes(DateTime.local(), viewingDate()).count( + 'days' + ) + } else { + return 0 + } } } + const generateTimelinePart = ( + index: number, + dayCount: number, + className: string + ) => { + return ( + <div + className={`${className} ${ + (index === 0 && dayCount > 0) || + (index === getListOfWeeks().length - 1 && dayCount < 0) + ? 'none' + : index * 7 < getListOfPastDays() + dayCount + ? 'past' + : 'futur' + }`} + ></div> + ) + } + + const monthChallenge = () => { + return getListOfWeeks().map((day, index) => ( + <div key={index} className="day-solo"> + <div className="day-line-label"> + {generateTimelinePart(index, 3, 'date-dash')} + {generateTimelinePart(index, 2, 'date-dash')} + {generateTimelinePart(index, 1, 'date-dash')} + {generateTimelinePart(index, 0, 'date-label')} + {generateTimelinePart(index, -1, 'date-dash')} + {generateTimelinePart(index, -2, 'date-dash')} + {generateTimelinePart(index, -3, 'date-dash')} + </div> + <div className="day-letter">{day.letter}</div> + <div className="day-date">{day.date}</div> + </div> + )) + } + + const weekChallenge = () => { + return getListOfDays().map((day, index) => ( + <div key={index} className="day-solo"> + <div className="day-line-label"> + {generateTimelinePart(index, 0, 'date-dash')} + {generateTimelinePart(index, 0, 'date-label')} + {generateTimelinePart(index + 1, 0, 'date-dash')} + </div> + <div className="day-letter">{day.letter}</div> + <div className="day-date">{day.date}</div> + </div> + )) + } + return ( <React.Fragment> <div className="list-of-days-duration"> - {getListOfDays().map((day, index) => ( - <div key={index} className="day-solo"> - <div className="day-line-label"> - <div - className={`date-dash ${ - index < getListOfPastDays() ? 'past' : 'futur' - }`} - ></div> - <div - className={`date-label ${ - index < getListOfPastDays() ? 'past' : 'futur' - }`} - ></div> - <div - className={`date-dash ${ - index + 1 < getListOfPastDays() ? 'past' : 'futur' - }`} - ></div> - </div> - <div className="day-letter">{day.letter}</div> - <div className="day-date">{day.date}</div> - </div> - ))} + {challenge && + challenge.challengeType && + challenge.challengeType.duration.days === 7 + ? weekChallenge() + : monthChallenge()} </div> </React.Fragment> ) diff --git a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx index 6dfd81a72fa0729e4c3c77006c97c16e62958882..c533747de344be36a566cd18369ac85e98fc9061 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 0a7180cc816246e789496e5f9c388114cf5da156..46c71e6a2a1b9d196c22ba3ec965492e0fbc1269 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 34bf9aae71eff40588526c2d70045939c801ebeb..b1456acf4026379b6d6a5219d18a65ece2cdee6d 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/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx index 3b20f0257caa7a2e1603d396dd92f1dcc296f0e0..b39110eb0058c4893d012df4b00c8a9c69ada456 100644 --- a/src/components/ContentComponents/Navbar/Navbar.tsx +++ b/src/components/ContentComponents/Navbar/Navbar.tsx @@ -11,6 +11,7 @@ import ChallengeIconOffNotif from 'assets/icons/tabbar/defi/off-notif.svg' import ParameterIconOff from 'assets/icons/tabbar/parametre/off.svg' import ConsoIconOn from 'assets/icons/tabbar/conso/on.svg' import ParameterIconOn from 'assets/icons/tabbar/parametre/on.svg' +import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg' interface NavbarProps { t: Function @@ -65,6 +66,7 @@ export const Navbar = ({ t }: NavbarProps) => { </li> </ul> </nav> + <Icon className="logo-grand-lyon" icon={logoGrandLyon} size={100} /> </aside> ) } diff --git a/src/db/challengeTypeData.json b/src/db/challengeTypeData.json index 7ab6a42b4ffd0e61aebefeb5fcdc7b213a649d9c..028b6669bd4a9523990f224d345dcd5be39eb5f1 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 a727191ac90413326db0ff9b0ced3287f3224c57..cf8a61c9a801c2b0af7692425a3e78107ca999ae 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 c00456c30c927c433fa51d272d639818d8454b8e..6da8ff4b80846bb72f731101bafd4d876e1f866d 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 d602b791d94b350f581610598a4abb8b3fbf00d8..b369e632c4f9e0242d4bf5ce046e3cd7157cfa7e 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; @@ -289,8 +296,11 @@ display: flex; flex-direction: row; justify-content: center; - margin-top: 1rem; + margin-top: 3rem; width: 100%; + @media #{$large-phone} { + margin-top: 1rem; + } .day-solo { display: flex; flex-direction: column; @@ -312,6 +322,9 @@ .futur { background-color: $grey-dark; } + .none { + opacity: 0; + } .date-label { width: 0.625rem; height: 0.625rem; @@ -343,6 +356,7 @@ display: flex; flex-direction: row; align-items: center; + justify-content: center; width: 100%; .pile-section { display: grid; @@ -469,7 +483,10 @@ max-width: 53rem; &.--ongoing { @extend .cp-valid; - width: 60%; + width: 25%; + @media #{$large-phone} { + width: 60%; + } } .cp-left-button { margin-right: 0.25rem; diff --git a/src/styles/components/_ecogesture.scss b/src/styles/components/_ecogesture.scss index b5900788c3578ae130b1d2bff715184dc220bc91..b36fb496e6ded9b15d7bedc4089839f310b02f61 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,6 @@ .ec-content-icon{ min-height: 50px; } - .ec-content-challenge-text { - display: flex; - flex: 1; - align-items: center; - } .ec-content-short-name { display: flex; flex: 1; diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss index ec1db7f555bc615166b4b8f493e8de82ff453579..04897ec9c046c220a3dac164df434f6d4a41e47e 100644 --- a/src/styles/components/_nav.scss +++ b/src/styles/components/_nav.scss @@ -17,6 +17,14 @@ @media #{$tablet} { background-color: $primary-color; } + .logo-grand-lyon { + position: absolute; + top: 50%; + left: 100px; + @media #{$tablet} { + display: none; + } + } } .c-nav-link { padding: 0 1rem; diff --git a/src/styles/components/_oauth.scss b/src/styles/components/_oauth.scss index 6e85346fac53804cb39dc80a2fa13607d6b555e0..d46e73bb562f171241e78735cf6c708483c654bb 100644 --- a/src/styles/components/_oauth.scss +++ b/src/styles/components/_oauth.scss @@ -5,13 +5,12 @@ display: flex; justify-content: center; align-items: center; - .oauthform-button-content-icon{ - margin: 0 1.375rem; - } + width: 100%; .oauthform-button-text{ display: flex; flex-direction: column; align-items: flex-start; text-align: left; + margin-left: 1.25rem; } } \ No newline at end of file