Skip to content
Snippets Groups Projects
ChallengeModal.tsx 5.31 KiB
Newer Older
  • Learn to ignore specific revisions
  • Yoan VALLET's avatar
    Yoan VALLET committed
    import React, { useState, useContext } from 'react'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    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'
    
    Romain CREY's avatar
    Romain CREY committed
    import StarIcon from 'assets/png/challenge/star.png'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
    import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
    import { formatNumberValues } from 'utils/utils'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import { ScreenType } from 'enum/screen.enum'
    import { AppContext } from 'components/Contexts/AppContextProvider'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    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)
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      const { screenType } = useContext(AppContext)
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
      async function importRightBadge(id: string, badgeStatus: number) {
    
        // 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`
              )
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        setBadgeIcon(importedBadge.default)
      }
    
      const showTheRightBadge = (badgeStatus: number | null) => {
    
    Romain CREY's avatar
    Romain CREY committed
        const result =
          challenge &&
          formatNumberValues(
            Math.abs(challenge.maxEnergy - challenge.currentEnergy)
          )
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        const challengeId = challenge.challengeType
          ? challenge.challengeType.id
          : ''
        const badge = challenge.badge ? challenge.badge : 0
        importRightBadge(challengeId, badge)
        if (badgeIcon) {
          if (badgeStatus === 1) {
            return (
              <>
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                <div className="cm-title win text-24-bold ">
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                  {' '}
                  {t('CHALLENGE.CONGRATULATION')}
                </div>
    
    Romain CREY's avatar
    Romain CREY committed
                <div className="cm-result text-18-bold">
    
                  {challengeId !== 'CHA00000001' ? (
                    <>
                      <div>{t('CHALLENGE.RESULT_POSITIF')}</div>
                      <div className="cm-result-positif text-18-normal">{`${result} €`}</div>
                    </>
                  ) : null}
    
    Romain CREY's avatar
    Romain CREY committed
                </div>
    
                <div
                  className={
                    challengeId !== 'CHA00000001'
                      ? 'cm-win-badge-star'
                      : 'cm-win-badge-star --ecolyo-royal'
                  }
                >
    
    Romain CREY's avatar
    Romain CREY committed
                  <img
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                    className="cm-win-badge"
    
    Romain CREY's avatar
    Romain CREY committed
                    src={badgeIcon}
    
    Romain CREY's avatar
    Romain CREY committed
                    width={screenType === ScreenType.MOBILE ? 160 : 180}
    
    Romain CREY's avatar
    Romain CREY committed
                  ></img>
    
    Romain CREY's avatar
    Romain CREY committed
                  <img
                    className="cm-win-star"
                    src={StarIcon}
                    width={screenType === ScreenType.MOBILE ? 300 : 400}
                  ></img>
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                </div>
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                <div className="cm-txt">
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                  {' '}
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                  {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>
                  )}
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                </div>
                <StyledButtonValid onClick={handleCloseClick}>
                  {t('CHALLENGE.OK')}
                </StyledButtonValid>
              </>
            )
          } else {
            return (
              <>
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                <div className="cm-title defeat text-24-bold ">
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                  {t('CHALLENGE.DEFEAT')}
    
    Romain CREY's avatar
    Romain CREY committed
                </div>
                <div className="cm-result text-18-bold">
                  <div>{t('CHALLENGE.DEFEAT_RESULT')}</div>
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                  <div>
    
    Romain CREY's avatar
    Romain CREY committed
                    {t('CHALLENGE.DEFEAT_RESULT2')}
                    <span className="cm-result-negatif text-18-normal">{`${result} €`}</span>
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                  </div>
                </div>
    
    Romain CREY's avatar
    Romain CREY committed
                <img
                  className="cm-badge"
                  src={badgeIcon}
    
    Romain CREY's avatar
    Romain CREY committed
                  width={screenType === ScreenType.MOBILE ? 160 : 180}
    
    Romain CREY's avatar
    Romain CREY committed
                ></img>
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
                <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)