diff --git a/src/components/Season/SeasonCardUnlocked.tsx b/src/components/Season/SeasonCardUnlocked.tsx index 9545d8757b00b0a55d45c9a6462ad746ed900d74..49b4239e4236e6f7754e6eaad8f0479f87617ff3 100644 --- a/src/components/Season/SeasonCardUnlocked.tsx +++ b/src/components/Season/SeasonCardUnlocked.tsx @@ -1,11 +1,13 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { Client, useClient } from 'cozy-client' -import { useDispatch } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { updateUserSeasonList } from 'store/season/season.actions' import './seasonCardUnlocked.scss' import { UserSeason } from 'models' import SeasonService from 'services/season.service' import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid' +import SeasonNoFluidModal from './SeasonNoFluidModal' +import { EcolyoState } from 'store' interface SeasonCardUnlockedProps { userSeason: UserSeason @@ -15,22 +17,46 @@ const SeasonCardUnlocked: React.FC<SeasonCardUnlockedProps> = ({ }: SeasonCardUnlockedProps) => { const client: Client = useClient() const dispatch = useDispatch() + const [openNoFluidModal, setopenNoFluidModal] = useState(false) + const [workingKonnectors, setworkingKonnectors] = useState<number>(0) + const { fluidStatus } = useSelector((state: EcolyoState) => state.global) + + const toggleNoFluidModal = () => { + setopenNoFluidModal(prev => !prev) + } const launchSeason = useCallback(async () => { - const seasonService = new SeasonService(client) - const updatedSeason = await seasonService.startUserSeason(userSeason) - dispatch(updateUserSeasonList(updatedSeason)) - }, [client, dispatch, userSeason]) + if (workingKonnectors < 1) { + return toggleNoFluidModal() + } else { + const seasonService = new SeasonService(client) + const updatedSeason = await seasonService.startUserSeason(userSeason) + dispatch(updateUserSeasonList(updatedSeason)) + } + }, [client, dispatch, userSeason, workingKonnectors]) + + useEffect(() => { + fluidStatus.map(fluid => { + if (fluid.status === 'done') setworkingKonnectors(prev => prev + 1) + }) + }, [fluidStatus]) return ( - <div className="cardContent"> - <p className="title">Saison</p> - <span className="seasonTitle">{userSeason.title}</span> - <span>Icon</span> - <StyledButtonValid onClick={launchSeason}> - Lancer la saison - </StyledButtonValid> - </div> + <> + <div className="cardContent"> + <p className="title">Saison</p> + <span className="seasonTitle">{userSeason.title}</span> + <span>Icon</span> + <StyledButtonValid onClick={launchSeason}> + Lancer la saison + </StyledButtonValid> + </div> + + <SeasonNoFluidModal + open={openNoFluidModal} + handleCloseClick={toggleNoFluidModal} + ></SeasonNoFluidModal> + </> ) } diff --git a/src/components/Season/SeasonNoFluidModal.tsx b/src/components/Season/SeasonNoFluidModal.tsx new file mode 100644 index 0000000000000000000000000000000000000000..bb1b4c70c5efd050d16238ce6b86a42bed914f6a --- /dev/null +++ b/src/components/Season/SeasonNoFluidModal.tsx @@ -0,0 +1,39 @@ +import React from 'react' +import { useI18n } from 'cozy-ui/transpiled/react/I18n' +import Modal from 'components/CommonKit/Modal/Modal' +import StyledStopButton from 'components/CommonKit/Button/StyledStopButton' +import './seasonNoFluidModal.scss' + +interface SeasonNoFluidModalProps { + open: boolean + handleCloseClick: () => void +} + +const SeasonNoFluidModal: React.FC<SeasonNoFluidModalProps> = ({ + open, + handleCloseClick, +}: SeasonNoFluidModalProps) => { + const { t } = useI18n() + + return ( + <> + <Modal open={open} handleCloseClick={handleCloseClick}> + <div className="noFluidModal"> + <div className="no-fluid-title">{t('season.noFluidModal.title')}</div> + <div className="no-fluid-content"> + {t('season.noFluidModal.content')} + </div> + <StyledStopButton + color="secondary" + className="button-ok" + onClick={handleCloseClick} + > + {t('COMMON.MODAL_OK')} + </StyledStopButton> + </div> + </Modal> + </> + ) +} + +export default SeasonNoFluidModal diff --git a/src/components/Season/seasonCardUnlocked.scss b/src/components/Season/seasonCardUnlocked.scss index e4300007a6ea8c2a1a5e7df46294d2ee3c552521..9d233452340d1d36228752f8fc2a2e7c8214d146 100644 --- a/src/components/Season/seasonCardUnlocked.scss +++ b/src/components/Season/seasonCardUnlocked.scss @@ -1,2 +1,6 @@ @import '../../styles/base/typography'; +.modal-overlay { + width: 100%; + height: 100%; +} diff --git a/src/components/Season/seasonNoFluidModal.scss b/src/components/Season/seasonNoFluidModal.scss new file mode 100644 index 0000000000000000000000000000000000000000..af743b408c196aa0387865c9fa315226b15e8d96 --- /dev/null +++ b/src/components/Season/seasonNoFluidModal.scss @@ -0,0 +1,26 @@ +@import '../../styles/base/typography'; + +.noFluidModal { + padding: 1rem; + .no-fluid-title { + text-transform: uppercase; + font-size: 1.8rem; + color: white; + font-family: $text-font; + margin: 0.5rem auto; + text-align: center; + } + .no-fluid-content { + font-size: 1.1rem; + color: white; + font-family: $text-font; + text-align: center; + } + .button-ok { + display: block; + text-align: center; + margin: auto; + margin-top: 3.5rem; + margin-bottom: 0; + } +} diff --git a/src/locales/fr.json b/src/locales/fr.json index 55f5394971179da55a47d7264c6f785bacf36799..92b84b644f5bae26496384ae31543f901e637ab5 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -51,7 +51,6 @@ "FAVORITE_MODAL_TITLE": "Astuce", "FAVORITE_MODAL_INFORMATION": "Ajouter Ecolyo à vos favoris pour accéder facilement à votre espace dédié", "FAVORITE_MODAL_ADD_TO_FAVORITE": "Ajouter !" - }, "LOADING": { "INDEX": "Vérification des données", @@ -325,5 +324,11 @@ "reportDate": "Bilan du mois", "detail": "Détail du mois", "challenge": "Défis terminés en" + }, + "season": { + "noFluidModal": { + "title": "Oups !", + "content": "Connectez au moins 1 fluide pour pouvoir jouer" + } } }