diff --git a/package.json b/package.json
index 4484c8f6ccec779e13fb4e00d22afeaa15d38af1..185c02638ea36c04302c32e9e579fc16d2f4f5ce 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"build": "yarn run build:css && yarn run build:browser",
"release": "standard-version --no-verify",
"winstack": "start powershell -command docker run --rm -it -p 8080:8080 -p 5984:5984 -p 8025:8025 -v $PWD/build:/data/cozy-app/ecolyo -v $PWD/data/konnectors_sources/:/data/cozy_konnectors/ -v $PWD/data:/usr/local/couchdb/data -v $PWD/docker/disableCSP.yaml:/etc/cozy/cozy.yaml registry.forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/cozy-env",
- "linuxstack": "docker run --rm -it -p 8080:8080 -p 5984:5984 -p 8025:8025 -v $(pwd)/build:/data/cozy-app/ecolyo -v ~/cozy/data/db/konnectors_sources/:/data/cozy_konnectors/ -v ~/cozy/data/db:/usr/local/couchdb/data -v ~/cozy/data/storage:/data/cozy-storage -v $(pwd)/docker/disableCSP.yaml:/etc/cozy/cozy.yaml registry.forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/cozy-env",
+ "linuxstack": "docker run --rm -it -p 8080:8080 -p 5984:5984 -p 8025:8025 -v $(pwd)/build:/data/cozy-app/ecolyo -v ~/cozy/data/db/konnectors_sources/:/data/cozy_konnectors/ -v ~/cozy/data/db:/usr/local/couchdb/data -v ~/cozy/data/storage:/data/cozy-storage -v $(pwd)/docker/disableCSP.yaml:/etc/cozy/cozy.yaml 5fdc0725024f",
"load-data": "cd test && importData.bat"
},
"repository": {
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
index ae0432779c7c0f019e123de0f2564be1bdd8db89..8a8fa49da4ac2e5d5f30897ef9cbb3313f9ba1e2 100644
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ b/src/components/CommonKit/Modal/Modal.tsx
@@ -7,6 +7,7 @@ interface ModalProps {
border?: boolean
handleCloseClick: () => void
children: ReactNode
+ yellowBorder?: string
}
const Modal: React.FC<ModalProps> = ({
@@ -14,10 +15,15 @@ const Modal: React.FC<ModalProps> = ({
border,
handleCloseClick,
children,
+ yellowBorder,
}: ModalProps) => {
return (
<div className={`modal-overlay ${open ? 'modal-opened' : ''}`}>
- <div className={`modal-box ${border ? 'modal-box-bordered' : ''}`}>
+ <div
+ className={`modal-box ${
+ border ? 'modal-box-bordered' : ''
+ }${yellowBorder}`}
+ >
<StyledIconButton
className="modal-close-button"
icon={CloseIcon}
diff --git a/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx b/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
index db0cab397cd8cd0a6a02942097f9948cf4c8abe7..1c742ebe59155530163b1fff4cebe848432e1262 100644
--- a/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
+++ b/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
@@ -24,6 +24,7 @@ const IndicatorContainerSwitcher: React.FC<IndicatorContainerSwitcherProps> = ({
const appContext = useContext(AppContext)
const allConfiguredFluidTypes = appContext.fluidTypes
const fluidConfig = new FluidConfigService().getFluidConfig()
+
return (
<div>
{fluidConfig.map((fluid, index) => {
@@ -37,7 +38,10 @@ const IndicatorContainerSwitcher: React.FC<IndicatorContainerSwitcherProps> = ({
timeStep
)}
/>
- ) : (
+ ) : null
+ })}
+ {fluidConfig.map((fluid, index) => {
+ return allConfiguredFluidTypes.includes(fluid.fluidTypeId) ? null : (
<KonnectorViewer key={index} fluidConfig={fluid} />
)
})}
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index 6197d6774d9d17c93736019c1ac1cc7250ad79a1..4167ee49f1cb88cf9bdb4897a842b51d3ea96e41 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -10,8 +10,6 @@ import { Redirect } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import AvailableChallengeIcon from 'assets/icons/badges/available-big.svg'
-import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
-import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
import ChallengeManager from 'services/challengeDataManagerService'
import { Client, withClient } from 'cozy-client'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
diff --git a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
index faf1c232e716552d6db757bb2ae9a73c575346d1..7638dde51c84f966405a193ddf609fac5c78c705 100644
--- a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
@@ -10,13 +10,13 @@ import { AppContext } from 'components/Contexts/AppContextProvider'
import MultliFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer'
import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer'
import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
+import WelcomeModalContainer from '../WelcomeModalContainer/WelcomeModalContainer'
const HomeViewContainer: React.FC = () => {
const [timeStep, setTimeStep] = useState<TimeStep>(20)
const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
const { fluidTypes } = useContext(AppContext)
const [headerHeight, setHeaderHeight] = useState<number>(0)
-
const [isChartLoading, setChartLoading] = useState<boolean>(true)
const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
@@ -44,6 +44,7 @@ const HomeViewContainer: React.FC = () => {
return (
<React.Fragment>
+ <WelcomeModalContainer />
<CozyBar />
{fluidTypes && fluidTypes.length > 0 ? (
<>
diff --git a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx b/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dae75ee79225167822c7389288722a7974ad71a1
--- /dev/null
+++ b/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+import Modal from 'components/CommonKit/Modal/Modal'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
+import { translate } from 'cozy-ui/react/I18n'
+import { withClient, Client } from 'cozy-client'
+import { USERPROFILE_DOCTYPE } from 'doctypes'
+import useInstanceSettings from 'components/Hooks/userInstanceSettings'
+
+interface WelcomeModalContainerProps {
+ t: Function
+ client: Client
+}
+
+const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
+ t,
+ client,
+}: WelcomeModalContainerProps) => {
+ const [modalOpen, setModalOpen] = useState<boolean>(true)
+
+ const { data: instanceSettings } = useInstanceSettings(client)
+
+ async function updateWelcomeModalState() {
+ await client
+ .query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
+ .then(async ({ data }) => {
+ const doc = data[0]
+ await client.save({
+ ...doc,
+ haveSeenWelcomeModal: true,
+ })
+ })
+ }
+
+ const handleCloseClick = () => {
+ setModalOpen(false)
+ updateWelcomeModalState()
+ }
+
+ useEffect(() => {
+ async function getWelcomeModalState() {
+ await client
+ .query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
+ .then(async ({ data }) => {
+ const welcomeModalState = data[0].haveSeenWelcomeModal
+ setModalOpen(!welcomeModalState)
+ })
+ }
+ getWelcomeModalState()
+ }, [])
+
+ return (
+ <React.Fragment>
+ <Modal
+ open={modalOpen}
+ handleCloseClick={handleCloseClick}
+ yellowBorder="yellow-border"
+ >
+ <div className="wm-header text-24-bold">
+ {t('COMMON.WELCOME_MODAL_TITLE')}
+ </div>
+ <div className="wm-name text-24-bold">
+ {instanceSettings.public_name} !
+ </div>
+ <div className="wm-perso text-18-bold">
+ {t('COMMON.WELCOME_MODAL_PERSO')}
+ </div>
+ <div className="wm-connect text-18-bold">
+ {t('COMMON.WELCOME_MODAL_CONNECT')}
+ </div>
+ <StyledButton className="button-ok" onClick={handleCloseClick}>
+ {t('COMMON.WELCOME_MODAL_OK')}
+ </StyledButton>
+ </Modal>
+ </React.Fragment>
+ )
+}
+
+export default translate()(withClient(WelcomeModalContainer))
diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerList.tsx b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerList.tsx
index 749f19b188e747a7869f954ac3f18c93834858d9..d6b486250c6bb554542fefabb2ae47f4cc339a03 100644
--- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerList.tsx
+++ b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerList.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useContext } from 'react'
import KonnectorViewer from 'components/ContentComponents/KonnectorViewer/KonnectorViewer'
import IFluidConfig from 'services/IFluidConfig'
+import { AppContext } from 'components/Contexts/AppContextProvider'
export interface KonnectorViewerListProps {
isParam: boolean
@@ -11,10 +12,16 @@ const KonnectorViewerList: React.FC<KonnectorViewerListProps> = ({
isParam = false,
fluidConfigs,
}: KonnectorViewerListProps) => {
+ const { fluidTypes } = useContext(AppContext)
return (
<div>
{fluidConfigs.map((item: IFluidConfig, index: number) => {
- return (
+ return fluidTypes.includes(item.fluidTypeId) ? (
+ <KonnectorViewer isParam={isParam} key={index} fluidConfig={item} />
+ ) : null
+ })}
+ {fluidConfigs.map((item: IFluidConfig, index: number) => {
+ return fluidTypes.includes(item.fluidTypeId) ? null : (
<KonnectorViewer isParam={isParam} key={index} fluidConfig={item} />
)
})}
diff --git a/src/db/userProfileData.json b/src/db/userProfileData.json
index 0f70e192add0bb98384bbc7886b428eb2e06f2c1..c6c09dabefa0f1c01399fb3da6cfffae6d935b62 100644
--- a/src/db/userProfileData.json
+++ b/src/db/userProfileData.json
@@ -2,6 +2,7 @@
{
"level": 1,
"challengeTypeHash": "",
- "ecogestureHash": ""
+ "ecogestureHash": "",
+ "haveSeenWelcomeModal": false
}
]
diff --git a/src/locales/en.json b/src/locales/en.json
index 85fbb46a6ec07c9d11717813ec1fd8332709014b..8f90c311f7835ae7b2c01ee6d62cab01b35852ab 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -34,7 +34,11 @@
"APP_NEW_CHALLENGE_TITLE": "Nouveau défi",
"APP_LOCKED_CHALLENGE_TITLE": "Défi à débloquer",
"APP_ONGOING_CHALLENGE_TITLE": "Défi en cours",
- "APP_FINISHED_CHALLENGE_TITLE": "Défi terminé"
+ "APP_FINISHED_CHALLENGE_TITLE": "Défi terminé",
+ "WELCOME_MODAL_TITLE": "Félicitations",
+ "WELCOME_MODAL_PERSO": "Votre espace personnel a bien été créé.",
+ "WELCOME_MODAL_CONNECT": "Vous pouvez maintenant connecter vos compteurs d’énergie à Ecolyo en toute sécurité.",
+ "WELCOME_MODAL_OK": "Ok"
},
"LOADING": {
"INDEX": "Vérification des données",
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index bb06be05a3e2f0b3875808a3aa1c978bdf0719ac..3fd5c7ad2066febce2af07814c9633e94a268fc9 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -33,6 +33,7 @@ $red-no-data: #d24444;
/** YELLOW **/
$gold: #b2901b;
+$gold-40: rgba(227, 184, 42, 0.4);
$gold-light: #deaf0e;
$gold-shadow: #e3b82a;
diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss
index 49cae038dd39a9ad0f76c4fed1563dc9d0bf0d7e..72ec865ef3aefd4bbac2aeb1a4c037f50511375a 100644
--- a/src/styles/components/_modal.scss
+++ b/src/styles/components/_modal.scss
@@ -36,7 +36,10 @@
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
&.modal-box-bordered {
- border: 1px solid $blue-40
+ border: 1px solid $blue-40;
+ }
+ &.yellow-border {
+ border: 1px solid $gold-40;
}
.modal-close-button {
position: absolute;
@@ -50,5 +53,33 @@
align-items: center;
color: $text-white;
}
+ .wm-header {
+ background: $multi-color-radial-gradient;
+ background-clip: 'text';
+ -webkit-background-clip: text;
+ color: transparent;
+ margin-top: 2rem;
+ }
+ .wm-name {
+ background: $multi-color-radial-gradient;
+ background-clip: 'text';
+ -webkit-background-clip: text;
+ color: transparent;
+ margin-bottom: 1.25rem;
+ }
+ .button-ok {
+ width: 90%;
+ margin-bottom: 2rem;
+ }
+ .wm-perso {
+ text-align: center;
+ width: 60%;
+ margin: 1rem;
+ }
+ .wm-connect {
+ text-align: center;
+ width: 88%;
+ margin: 1rem;
+ }
}
}