Newer
Older
import { translate } from 'cozy-ui/react/I18n'
import { UserChallenge } from 'services/dataChallengeContracts'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { formatNumberValues } from 'utils/utils'
import { ScreenType } from 'enum/screen.enum'
import { AppContext } from 'components/Contexts/AppContextProvider'
interface ChallengeModalProps {
opened: boolean
challenge: UserChallenge
t: Function
handleCloseClick: () => void
badgeStatus: number | null
}
const ChallengeModal: React.FC<ChallengeModalProps> = ({
opened,
challenge,
t,
handleCloseClick,
badgeStatus,
}: ChallengeModalProps) => {
const [badgeIcon, setBadgeIcon] = useState<any | null>(null)
async function importRightBadge(id: string, badgeStatus: number) {
Romain CREY
committed
// 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)
}
const showTheRightBadge = (badgeStatus: number | null) => {
const result =
challenge &&
formatNumberValues(
Math.abs(challenge.maxEnergy - challenge.currentEnergy)
)
const challengeId = challenge.challengeType
? challenge.challengeType.id
: ''
const badge = challenge.badge ? challenge.badge : 0
importRightBadge(challengeId, badge)
if (badgeIcon) {
if (badgeStatus === 1) {
return (
<>
Romain CREY
committed
{challengeId !== 'CHA00000001' ? (
<>
<div>{t('CHALLENGE.RESULT_POSITIF')}</div>
<div className="cm-result-positif text-18-normal">{`${result} €`}</div>
</>
) : null}
Romain CREY
committed
<div
className={
challengeId !== 'CHA00000001'
? 'cm-win-badge-star'
: 'cm-win-badge-star --ecolyo-royal'
}
>
width={screenType === ScreenType.MOBILE ? 160 : 180}
<img
className="cm-win-star"
src={StarIcon}
width={screenType === ScreenType.MOBILE ? 300 : 400}
></img>
{challengeId === 'CHA00000001' ? (
<>
<div className="text-18-medium">
{t('CHALLENGE.WIN_TEXT_ECOLYO')}
</div>
<div className="cm-text-new-available text-18-bold">
{t('CHALLENGE.WIN_TEXT_ECOLYO_NEW_AVAILABLE')}
</div>
</>
) : (
<div className="text-18-bold">
{t('CHALLENGE.WIN_TEXT')}
<div>{`"${challenge &&
challenge.challengeType &&
challenge.challengeType.title}"`}</div>
</div>
)}
</div>
<StyledButtonValid onClick={handleCloseClick}>
{t('CHALLENGE.OK')}
</StyledButtonValid>
</>
)
} else {
return (
<>
</div>
<div className="cm-result text-18-bold">
<div>{t('CHALLENGE.DEFEAT_RESULT')}</div>
{t('CHALLENGE.DEFEAT_RESULT2')}
<span className="cm-result-negatif text-18-normal">{`${result} €`}</span>
<img
className="cm-badge"
src={badgeIcon}
width={screenType === ScreenType.MOBILE ? 160 : 180}
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<div className="cm-txt text-18-bold ">
{' '}
{t('CHALLENGE.CONSOLATION')}
{`"${challenge &&
challenge.challengeType &&
challenge.challengeType.title}"`}
{t('CHALLENGE.CONSOLATION2')}
</div>
<div className="cm-button-valid">
<StyledButtonValid onClick={handleCloseClick}>
{t('CHALLENGE.OK')}
</StyledButtonValid>
</div>
</>
)
}
}
}
return (
<Modal open={opened} handleCloseClick={handleCloseClick} border>
{!challenge ? (
<StyledSpinner />
) : (
<div className="cm-content">{showTheRightBadge(badgeStatus)}</div>
)}
</Modal>
)
}
export default translate()(ChallengeModal)