ChallengeCardDone.tsx

import { Button } from '@material-ui/core'
import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { UserChallengeSuccess, UserChallengeUpdateFlag } from 'enums'
import { UserChallenge } from 'models'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import {
  formatNumberValues,
  getChallengeTitleWithLineReturn,
  importIconById,
} from 'utils/utils'
import './challengeCardDone.scss'

const ChallengeCardDone = ({
  userChallenge,
}: {
  userChallenge: UserChallenge
}) => {
  const { t } = useI18n()
  const navigate = useNavigate()
  const client = useClient()
  const dispatch = useAppDispatch()
  const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
  const [resultIcon, setResultIcon] = useState<string>(defaultIcon)

  const isSuccess = userChallenge.success === UserChallengeSuccess.WIN

  const goDuel = () => {
    navigate('/challenges/duel?id=' + userChallenge.id)
  }

  const handleChallengeReset = async () => {
    const challengeService = new ChallengeService(client)
    const updatedChallenge = await challengeService.updateUserChallenge(
      userChallenge,
      UserChallengeUpdateFlag.DUEL_RESET
    )
    dispatch(updateUserChallengeList(updatedChallenge))
  }

  useEffect(() => {
    async function handleEcogestureIcon() {
      const icon = await importIconById(
        userChallenge.id + '-' + Number(isSuccess),
        'duelResult'
      )
      setResultIcon(icon || defaultIcon)
    }
    handleEcogestureIcon()
  }, [isSuccess, userChallenge])

  return (
    <div className="cardContent cardDone">
      <div className="challengeName text-22-bold">
        {getChallengeTitleWithLineReturn(userChallenge.id)}
      </div>
      <div className="iconResult">
        <StyledIcon className="imgResult" icon={resultIcon} size={180} />
      </div>
      <div className="statsResult">
        <div
          className={classNames('labelResult', {
            win: userChallenge.success === UserChallengeSuccess.WIN,
            lost: userChallenge.success === UserChallengeSuccess.LOST,
          })}
        >
          {isSuccess
            ? t('challenge.card_done.win')
            : t('challenge.card_done.lost')}
        </div>
        <span className="text-18">
          {isSuccess
            ? t('challenge.card_done.saving')
            : t('challenge.card_done.depense')}{' '}
          <span className="text-18-bold">
            {formatNumberValues(
              Math.abs(
                userChallenge.duel.threshold -
                  userChallenge.duel.userConsumption
              )
            ) + ' '}
            €
          </span>
          <br />
          {t('challenge.card_done.final_defi')}
        </span>
      </div>
      <div className="buttons">
        <Button onClick={goDuel} className="btnSecondary">
          {t('challenge.card_done.final_defi_view')}
        </Button>
        <Button
          onClick={handleChallengeReset}
          className={
            userChallenge.success === UserChallengeSuccess.WIN
              ? 'btnSecondary'
              : 'btnPrimaryNegative'
          }
          disabled={currentChallenge !== null}
        >
          {t('challenge.card_done.reset_defi')}
        </Button>
      </div>
    </div>
  )
}

export default ChallengeCardDone