diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index b13e06a2f97ab742d2f4a2f98f9aa557967c032b..6197d6774d9d17c93736019c1ac1cc7250ad79a1 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -5,7 +5,7 @@ import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
-import { ChallengeType } from 'services/dataChallengeContracts'
+import { ChallengeType, UserChallenge } from 'services/dataChallengeContracts'
import { Redirect } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
@@ -30,12 +30,10 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
const t = props.t
const client = props.client
const challengeManager = new ChallengeManager(client)
-
const { refreshCurrentChallenge, screenType } = useContext(AppContext)
- const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
- const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [redirect, setRedirect] = useState(false)
const [challenge, setChallenge] = useState<ChallengeType | null>(null)
+ const [userChallenge, setUserChallenge] = useState<UserChallenge | null>(null)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
@@ -49,30 +47,30 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
[0, 1, 2],
challenge.availableEcogestures
)
+ const chal = await challengeManager.getCurrentChallenge()
+ await setUserChallenge(chal)
await refreshCurrentChallenge()
}
}
- const handleStartClick = () => {
- startChallenge()
+ async function handleStartClick() {
+ await startChallenge()
setRedirect(true)
}
const renderRedirect = () => {
if (redirect) {
- return <Redirect to="/comsumption" />
+ return (
+ <Redirect
+ to={{
+ pathname: '/challenges/ongoing',
+ state: { challenge: userChallenge },
+ }}
+ />
+ )
}
}
- const handleClick = (index: number) => {
- setChallengeEcogesture(index)
- setOpenEcogestureModal(true)
- }
-
- const handleCloseClick = () => {
- setOpenEcogestureModal(false)
- }
-
useEffect(() => {
if (props.location.state) {
setChallenge(props && props.location.state.challenge)
@@ -98,7 +96,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
<>
<div className="cp-root --available">
<div className="cp-content">
- <div className="cp-info">
+ <div className="cp-info --available">
<div className="cp-title text-22-bold">{challenge.title}</div>
<StyledIconButton
className="cp-icon"
@@ -128,30 +126,8 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
</div>
</div>
</div>
-
- <div className="cp-bottom">
- <div className="cp-eg-content">
- {t('CHALLENGE.LINKED_ECOGESTURES')}
- <div className="cp-ecogestures">
- {challenge.availableEcogestures.map((eg, index) => (
- <EcogestureCard
- key={index}
- ecogesture={eg}
- handleClick={() => handleClick(index)}
- challengeEcogesture={index + 1}
- />
- ))}
- </div>
- </div>{' '}
- </div>
</div>
</div>
- <EcogestureModal
- opened={openEcogestureModal}
- ecogesture={challenge.availableEcogestures[challengeEcogesture]}
- handleCloseClick={handleCloseClick}
- border={true}
- />
</>
)}
</Content>
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 86a27cf2b1d95d3c68efb65f16872ff134a788ea..5f4af50a6a4572bc934d78b52180d8feca867680 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -7,6 +7,7 @@ import { UserChallenge, TypeChallenge } from 'services/dataChallengeContracts'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import DefaultChallengeIcon from 'assets/icons/badges/default.svg'
+import StarIcon from 'assets/icons/visu/challenge/star.svg'
import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
import { Client, withClient } from 'cozy-client'
@@ -14,6 +15,7 @@ import { Redirect } from 'react-router-dom'
import { formatNumberValues } from 'utils/utils'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { ScreenType } from 'enum/screen.enum'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface FinishedChallengeDetailsViewProps {
location: any
@@ -108,11 +110,20 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
</div>
)
) : null}
- <StyledIconButton
- className="cp-icon"
- icon={badgeIcon ? badgeIcon : DefaultChallengeIcon}
- size={screenType === ScreenType.MOBILE ? 200 : 350}
- />
+ <div className="cp-win-badge-star">
+ <StyledIcon
+ className="cp-win-badge"
+ icon={badgeIcon ? badgeIcon : DefaultChallengeIcon}
+ size={screenType === ScreenType.MOBILE ? 150 : 200}
+ />
+ {challenge.badge === 1 ? (
+ <StyledIcon
+ className="cp-win-star"
+ icon={StarIcon}
+ size={screenType === ScreenType.MOBILE ? 220 : 300}
+ />
+ ) : null}
+ </div>
<div className="cp-description text-16-bold">
{challenge.challengeType &&
challenge.challengeType.description}
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
index 6ff2e9785573ebbefefd3a71b72275e198c60775..67cd375c8283d8a80bf6682181949f3de134d710 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
@@ -135,6 +135,16 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
{t('CHALLENGE.LINKED_ECOGESTURES')}
</span>
<div className="cp-ecogestures">
+ {challenge.selectedEcogestures.map((eg, index) => (
+ <EcogestureCard
+ key={index}
+ ecogesture={eg}
+ handleClick={() => handleClick(index)}
+ challengeEcogesture={index + 1}
+ />
+ ))}
+ </div>
+ {/* <div className="cp-ecogestures">
<EcogestureCard
ecogesture={challenge.selectedEcogestures[0]}
handleClick={() => handleClick(0)}
@@ -145,7 +155,7 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
handleClick={() => handleClick(1)}
challengeEcogesture={2}
/>
- </div>
+ </div> */}
</div>
</div>
</div>
diff --git a/src/services/challengeDataMapperService.ts b/src/services/challengeDataMapperService.ts
index 5f096db44806f211d1f2790927b5d6ccc86e02b2..198957092047d279716b35bd75c3cc5b7ecea59b 100644
--- a/src/services/challengeDataMapperService.ts
+++ b/src/services/challengeDataMapperService.ts
@@ -103,7 +103,6 @@ export default class ChallengeDataMapper {
},
},
}
-
return mappedUserChallenge
}
@@ -144,7 +143,6 @@ export default class ChallengeDataMapper {
userChallengeEntity.badge,
userChallengeEntity._id
)
-
return mappedUserChallenge
}
@@ -168,14 +166,17 @@ export default class ChallengeDataMapper {
completeAvailableEcogestures.push(unfilteredEcogestures[0])
}
}
+ // --> fluid dependancy for challenge
- let filteredAvailableEcogestures = completeAvailableEcogestures.filter(
- eg =>
- fluidTypes &&
- (fluidTypes.includes(eg.fluidTypes[0]) ||
- fluidTypes.includes(eg.fluidTypes[1]) ||
- fluidTypes.includes(eg.fluidTypes[2]))
- )
+ // let filteredAvailableEcogestures = completeAvailableEcogestures.filter(
+ // eg =>
+ // fluidTypes &&
+ // (fluidTypes.includes(eg.fluidTypes[0]) ||
+ // fluidTypes.includes(eg.fluidTypes[1]) ||
+ // fluidTypes.includes(eg.fluidTypes[2]))
+ // )
+
+ let filteredAvailableEcogestures = completeAvailableEcogestures
const fluidFilteredEcogestures = [...new Set(filteredAvailableEcogestures)]
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 2534c69565cfc8827ffa40603d2c6404724ac5ac..3a8b44a639a7a5bc82449da64793a8d8cfde5a02 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -28,9 +28,10 @@ body {
}
[role='banner'] .coz-bar-container {
- padding: 0 3.25em 0 0;
+ padding: 0;
background-color: white;
@media #{$large-phone} {
+ padding: 0 3.25em 0 0;
background-color: unset;
}
}
@@ -122,7 +123,7 @@ body {
}
}
-[role='main']{
+[role='main'] {
/* width */
&::-webkit-scrollbar {
width: 10px;
@@ -135,4 +136,4 @@ body {
&::-webkit-scrollbar-thumb {
background: #6f7074;
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index 6386fdc5ce07874b61497168aae552054c9f7feb..0a28156379a343695d3e11c4c6d0d52496a1c112 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -368,13 +368,14 @@
align-items: center;
flex-direction: column;
color: $text-bright;
- height: 84vh;
+ min-height: 84vh;
justify-content: space-between;
&.--locked {
@extend .cp-content;
justify-content: center;
}
+
.cp-info {
display: flex;
flex-direction: column;
@@ -382,15 +383,32 @@
justify-content: space-between;
background-color: $dark-light-2;
width: 100%;
- height: 60%;
- padding-top: 2rem;
+ padding-top: 1rem;
padding-bottom: 0.5rem;
+ &.--available {
+ @extend .cp-info;
+ height: 74vh;
+ }
.cp-icon {
margin-bottom: 1rem;
}
.cp-icon-available {
margin: 2rem;
}
+ .cp-win-badge-star {
+ display: grid;
+ align-items: center;
+ justify-items: center;
+ .cp-win-badge {
+ grid-column: 1;
+ grid-row: 1;
+ z-index: 1;
+ }
+ .cp-win-star {
+ grid-column: 1;
+ grid-row: 1;
+ }
+ }
.cp-date {
color: $text-dark;
text-align: center;