Skip to content
Snippets Groups Projects
ActionModal.tsx 2.73 KiB
Newer Older
  • Learn to ignore specific revisions
  • Bastien DUMONT's avatar
    Bastien DUMONT committed
    import Button from '@material-ui/core/Button'
    import Dialog from '@material-ui/core/Dialog'
    import chronoMini from 'assets/icons/visu/action/chrono-mini.svg'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import { useClient } from 'cozy-client'
    import { useI18n } from 'cozy-ui/transpiled/react/I18n'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import Icon from 'cozy-ui/transpiled/react/Icon'
    
    import { UserChallengeUpdateFlag } from 'enums'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import { Ecogesture, UserChallenge } from 'models'
    
    import React, { useCallback } from 'react'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import ChallengeService from 'services/challenge.service'
    
    import { updateUserChallengeList } from 'store/challenge/challenge.slice'
    
    import { useAppDispatch } from 'store/hooks'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import './actionModal.scss'
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
    interface ActionModalProps {
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      open: boolean
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
      action: Ecogesture
      handleCloseClick: () => void
      userChallenge: UserChallenge
    }
    
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    const ActionModal = ({
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      open,
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
      action,
      handleCloseClick,
      userChallenge,
    }: ActionModalProps) => {
      const client = useClient()
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
      const { t } = useI18n()
    
      const dispatch = useAppDispatch()
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
      const launchAction = useCallback(async () => {
        const challengeService = new ChallengeService(client)
    
        const updatedChallenge: UserChallenge =
          await challengeService.updateUserChallenge(
            userChallenge,
            UserChallengeUpdateFlag.ACTION_START,
            undefined,
            undefined,
            action
          )
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
        dispatch(updateUserChallengeList(updatedChallenge))
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      }, [action, client, dispatch, userChallenge])
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
    
      return (
    
    Yoan VALLET's avatar
    Yoan VALLET committed
        <Dialog
          open={open}
          onClose={handleCloseClick}
    
          aria-labelledby="accessibility-title"
    
    Yoan VALLET's avatar
    Yoan VALLET committed
          classes={{
            root: 'modal-root',
            paper: 'modal-paper',
          }}
        >
    
          <div id="accessibility-title">
    
            {t('action_modal.accessibility.window_title')}
          </div>
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
          <div className="action-modal">
    
    Yoan VALLET's avatar
    Yoan VALLET committed
            <Icon icon={chronoMini} size={75} />
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
            <div className="action-title text-16-normal">
              {t('action.duration', {
    
                smartCount: action.actionDuration,
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
              })}
            </div>
            <div className="action-text text-16-normal">{action.longName}</div>
            <div className="buttons">
              <Button
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                aria-label={t('action_modal.accessibility.button_accept')}
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
                classes={{
                  root: 'btn-secondary-negative',
                  label: 'text-16-normal',
                }}
                onClick={launchAction}
              >
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                {t('action_modal.accept')}
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
              </Button>
              <Button
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                aria-label={t('action_modal.accessibility.button_refuse')}
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
                classes={{
                  root: 'btn-secondary-negative',
                  label: 'text-16-normal',
                }}
                onClick={handleCloseClick}
              >
    
    Yoan VALLET's avatar
    Yoan VALLET committed
                {t('action_modal.refuse')}
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
              </Button>
            </div>
          </div>
    
    Yoan VALLET's avatar
    Yoan VALLET committed
        </Dialog>
    
    Guilhem CARRON's avatar
    Guilhem CARRON committed
      )
    }
    
    export default ActionModal