diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx index 9b84097baf41dae29cf645dd15d3da9f65cec260..60740d100b40f11a1c9ea0ef2548fdf3b4922d45 100644 --- a/src/components/Connection/ConnectionResult.tsx +++ b/src/components/Connection/ConnectionResult.tsx @@ -132,7 +132,6 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({ dataConsent: true, pdlConfirm: true, shouldLaunchAccount: true, - openSGEForm: false, }) ) dispatch(setShouldRefreshConsent(true)) diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss index 7a02ec9d467ca437008c501eb6db0d8d3294b179..cc76bd39863df6426034ce80897757cbc033b146 100644 --- a/src/components/Connection/SGEConnect/SgeConnect.scss +++ b/src/components/Connection/SGEConnect/SgeConnect.scss @@ -3,26 +3,13 @@ @import 'src/styles/base/breakpoint'; .sge-view { + box-sizing: border-box; + min-height: inherit; + width: inherit; display: flex; + flex: 1; flex-direction: column; justify-content: space-between; - background: $dark-light-2; - transition: all 0.5s ease-in; - position: fixed; - z-index: 25; - top: 4rem; - width: 100%; - height: 92vh; - overflow-y: auto; - overscroll-behavior: contain; - @media (min-width: $width-large-phone) { - top: 8rem; - height: 85vh; - } - @media (min-width: $width-tablet) { - width: 85%; - } - .sge-container { padding: 1rem; diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx index 1f5cbf4592e9c7e4a2e8784ed913d357f6fd4d03..4097240cce25b7bd4b5893985a8af81018003a7e 100644 --- a/src/components/Connection/SGEConnect/SgeConnectView.tsx +++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx @@ -131,20 +131,11 @@ const SgeConnectView: React.FC = () => { return ( <> - <CozyBar - titleKey={'common.title_sge_connect'} - displayBackArrow={true} - backFunction={() => - dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false })) - } - /> + <CozyBar titleKey={'common.title_sge_connect'} displayBackArrow={true} /> <Header setHeaderHeight={defineHeaderHeight} desktopTitleKey={'common.title_sge_connect'} displayBackArrow={true} - backFunction={() => - dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false })) - } ></Header> <Content height={headerHeight}> <div className="sge-view"> diff --git a/src/components/Connection/SGEConnect/SgeInit.spec.tsx b/src/components/Connection/SGEConnect/SgeInit.spec.tsx index 0438327f0d93240f2ff0bee1ac8e7be70d105146..8755cca5bb3038b261b16375203bf7e596b27026 100644 --- a/src/components/Connection/SGEConnect/SgeInit.spec.tsx +++ b/src/components/Connection/SGEConnect/SgeInit.spec.tsx @@ -5,7 +5,6 @@ import { GlobalState } from 'models/global.model' import React from 'react' import { Provider } from 'react-redux' import configureStore from 'redux-mock-store' -import { UpdateSGEConnect } from 'store/global/global.actions' import { fluidStatusData, SgeStatusWithAccount, @@ -65,8 +64,7 @@ describe('SgeInit component', () => { </Provider> ) wrapper.find(Button).first().simulate('click') - const updateSGEConnectAction: UpdateSGEConnect = store.getActions()[0] - expect(updateSGEConnectAction.payload?.openSGEForm).toBeTruthy() + expect(mockHistoryPush).toHaveBeenCalled() }) it('should launch account and trigger creation process', async () => { const store = mockStore({ diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx index 6767e15ccf3caa149b1aec4709af8681aae99f01..6cf6b71d6aa9bd30671109c483c966268de70f5f 100644 --- a/src/components/Connection/SGEConnect/SgeInit.tsx +++ b/src/components/Connection/SGEConnect/SgeInit.tsx @@ -6,6 +6,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n' import { Account, FluidStatus } from 'models' import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' +import { useHistory } from 'react-router-dom' import { AppStore } from 'store' import { setShouldRefreshConsent, @@ -18,6 +19,7 @@ interface SgeInitProps { const SgeInit: React.FC<SgeInitProps> = ({ fluidStatus }: SgeInitProps) => { const { t } = useI18n() + const history = useHistory() const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug const account: Account | null = fluidStatus.connection.account const { sgeConnect } = useSelector((state: AppStore) => state.ecolyo.global) @@ -54,7 +56,7 @@ const SgeInit: React.FC<SgeInitProps> = ({ fluidStatus }: SgeInitProps) => { <Button aria-label={t(`auth.${konnectorSlug}.accessibility.connect`)} onClick={() => { - dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: true })) + history.push('/sge-connect') }} classes={{ root: 'btn-highlight', diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap index b3f663e1a20eac8ead33825146066f2ca829e2a6..f942fe39679b7581059f24af1d030026f0da57ff 100644 --- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap +++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap @@ -15,7 +15,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = ` > <SgeConnectView> <CozyBar - backFunction={[Function]} displayBackArrow={true} titleKey="common.title_sge_connect" > @@ -339,7 +338,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = ` </BarRight> </CozyBar> <Header - backFunction={[Function]} desktopTitleKey="common.title_sge_connect" displayBackArrow={true} setHeaderHeight={[Function]} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 49a4fc643c9eedaea8a402beccc410536e74e511..3a469698acd1c2763813fac605baae53afe10cfe 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,15 +1,16 @@ -import IconButton from '@material-ui/core/IconButton' -import BackArrowIcon from 'assets/icons/ico/back-arrow.svg' -import FeedbackIcon from 'assets/icons/ico/feedback.svg' -import { useI18n } from 'cozy-ui/transpiled/react/I18n' -import Icon from 'cozy-ui/transpiled/react/Icon' -import { ScreenType } from 'enum/screen.enum' import React, { useCallback, useEffect, useRef } from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { useHistory } from 'react-router-dom' +import './header.scss' +import { useI18n } from 'cozy-ui/transpiled/react/I18n' +import { useSelector, useDispatch } from 'react-redux' import { AppStore } from 'store' import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions' -import './header.scss' +import { useHistory } from 'react-router-dom' + +import { ScreenType } from 'enum/screen.enum' +import BackArrowIcon from 'assets/icons/ico/back-arrow.svg' +import FeedbackIcon from 'assets/icons/ico/feedback.svg' +import Icon from 'cozy-ui/transpiled/react/Icon' +import IconButton from '@material-ui/core/IconButton' interface HeaderProps { textKey?: string diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss index 1a73a5fe52558e97cdde7e43a0f59b8748042f00..58b400875df97adae6f402c919734b5db7e52a09 100644 --- a/src/components/Header/header.scss +++ b/src/components/Header/header.scss @@ -22,17 +22,17 @@ $dark-2 100% ); width: 100%; - display: flex; - justify-content: flex-end; .header-text { padding: 0 1rem 1rem 1rem; color: $grey-bright; } } .header-content { - width: 85%; + margin: 0 0 0 220px; + display: flex; + flex-direction: column; @media #{$tablet} { - width: 100%; + margin: 0; } @media #{$large-phone} { margin: 60px 0 0 0; diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx index ad546465a3ec149c2e0bce52ae1376807c510366..70fd20ef2754ecc0ba5ad327de48470c77503f11 100644 --- a/src/components/Home/ConsumptionView.spec.tsx +++ b/src/components/Home/ConsumptionView.spec.tsx @@ -346,29 +346,4 @@ describe('ConsumptionView component', () => { ) expect(wrapper.find('mock-releasenotes').exists()).toBeTruthy() }) - - it('should render SGE connect form', () => { - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - }, - global: { - fluidStatus: mockInitialEcolyoState.global.fluidStatus, - releaseNotes: mockInitialEcolyoState.global.releaseNotes, - sgeConnect: { - openSGEForm: true, - }, - openPartnersIssueModal: mockedPartnersIssueModal, - }, - }) - useDispatchSpy.mockReturnValue(jest.fn()) - mockUpdateProfile.mockResolvedValue(mockTestProfile1) - const wrapper = mount( - <Provider store={store}> - <ConsumptionView fluidType={FluidType.ELECTRICITY} /> - </Provider> - ) - expect(wrapper.find('mock-SgeConnectView').exists()).toBeTruthy() - }) }) diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx index a511cd05eb9250cacde7c58d5c1bd9ce427e418b..c16b6ce740a524f091fd55dd4262b36371344efb 100644 --- a/src/components/Home/ConsumptionView.tsx +++ b/src/components/Home/ConsumptionView.tsx @@ -1,6 +1,5 @@ import classNames from 'classnames' import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal' -import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView' import Content from 'components/Content/Content' import CustomPopupModal from 'components/CustomPopup/CustomPopupModal' import DateNavigator from 'components/DateNavigator/DateNavigator' @@ -21,7 +20,7 @@ import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import ProfileService from 'services/profile.service' import { AppStore } from 'store' -import { setCurrentTimeStep } from 'store/chart/chart.actions' +import { setCurrentTimeStep, setLoading } from 'store/chart/chart.actions' import { setCustomPopup, setPartnersIssue, @@ -52,7 +51,6 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({ releaseNotes, customPopupModal, openPartnersIssueModal, - sgeConnect, }, } = useSelector((state: AppStore) => state.ecolyo) @@ -156,6 +154,10 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({ } }, [dispatch, fluidType, currentTimeStep, fluidStatus]) + useEffect(() => { + dispatch(setLoading(true)) + }, [dispatch]) + useEffect(() => { let subscribed = true const expiredConsents: FluidType[] = [] @@ -238,7 +240,6 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({ </div> )} </Content> - {sgeConnect?.openSGEForm && <SgeConnectView />} {/* Partner issue modals for individual fluids */} {fluidStatus .filter(fluid => fluid.maintenance) diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx index 81a92f638ec1053567e2bb8e89ac47f0c5049c0d..e476536b4972a3c12b910fccd23ed7f62bfb0421 100644 --- a/src/components/Konnector/KonnectorModalFooter.tsx +++ b/src/components/Konnector/KonnectorModalFooter.tsx @@ -9,6 +9,7 @@ import { FluidType } from 'enum/fluid.enum' import { KonnectorError } from 'enum/konnectorError.enum' import { Account } from 'models' import React, { useCallback } from 'react' +import { useHistory } from 'react-router-dom' import AccountService from 'services/account.service' import './konnectorModal.scss' @@ -33,17 +34,20 @@ const KonnectorModalFooter: React.FC<KonnectorModalFooterProps> = ({ }: KonnectorModalFooterProps) => { const { t } = useI18n() const client = useClient() + const history = useHistory() const handleSGELoginRetry = useCallback(() => { handleCloseClick(state === SUCCESS_EVENT) - }, [handleCloseClick, state]) + history.push('/sge-connect') + }, [handleCloseClick, history, state]) const handleResetSGEAccount = useCallback(async () => { if (account) { const accountService = new AccountService(client) await accountService.deleteAccount(account) await handleAccountDeletion() + history.push('/sge-connect') } - }, [account, client, handleAccountDeletion]) + }, [account, client, handleAccountDeletion, history]) const errorButtons = () => { switch (error) { diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx index 0569d12be1539d66922f22a7ef69f0d007c27f78..5bc0ce5666a1486ee5688c10afd2556298e66ffc 100644 --- a/src/components/Konnector/KonnectorViewerCard.tsx +++ b/src/components/Konnector/KonnectorViewerCard.tsx @@ -24,7 +24,6 @@ import { setFluidStatus, toggleChallengeDuelNotification, updatedFluidConnection, - updateSgeStore, } from 'store/global/global.actions' import { getAddPicto, getParamPicto } from 'utils/picto' import './konnectorViewerCard.scss' @@ -425,21 +424,6 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({ deleteAccountForConsentRefresh() }, [account, client, handleAccountDeletion, shouldRefreshConsent]) - /** Closes SGE form if opened */ - const closeSGEForm = useCallback(() => { - if (sgeConnect.openSGEForm) { - dispatch( - updateSgeStore({ - ...sgeConnect, - openSGEForm: false, - // switch to false in case the form fails and the user have to give its consent again - dataConsent: false, - pdlConfirm: false, - }) - ) - } - }, [dispatch, sgeConnect]) - useEffect(() => { let subscribed = true async function getData() { @@ -455,7 +439,6 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({ const connectionFlow = new ConnectionFlow(client, trigger, konnector) await connectionFlow.launch() - closeSGEForm() connectionFlow.jobWatcher.on(ERROR_EVENT, () => { sendUsageEventError(fluidSlug, fluidStatus.lastDataDate === null) setKonnectorErrorDescription(connectionFlow.jobWatcher.on()._error) @@ -495,7 +478,6 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({ fluidSlug, sendUsageEventSuccess, shouldRefreshConsent, - closeSGEForm, ]) return ( diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx index 2bcfc4fa87e609f8707a3e2d1711757bac39f4e2..28abfb02836537154edfc4cae16917a580311987 100644 --- a/src/components/Routes/Routes.tsx +++ b/src/components/Routes/Routes.tsx @@ -1,5 +1,6 @@ import ActionView from 'components/Action/ActionView' import ChallengeView from 'components/Challenge/ChallengeView' +import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView' import DuelView from 'components/Duel/DuelView' import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView' import EcogestureSelection from 'components/EcogestureSelection/EcogestureSelection' @@ -58,6 +59,7 @@ const Routes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => { <ConsumptionView fluidType={FluidType.MULTIFLUID} /> </Route> + <Route path={`/sge-connect`} component={SgeConnectView} /> <Route path={`/challenges/duel`} component={DuelView} /> <Route path={`/challenges/quiz`} component={QuizView} /> <Route path={`/challenges/exploration`} component={ExplorationView} /> diff --git a/src/models/sgeStore.model.ts b/src/models/sgeStore.model.ts index 9a28f5c6f7dea6cf4a652367323d7bcc8d156466..59b30d9f42f3b5e912b4ad5b43838ce240e8f84e 100644 --- a/src/models/sgeStore.model.ts +++ b/src/models/sgeStore.model.ts @@ -9,5 +9,4 @@ export interface SgeStore { dataConsent: boolean pdlConfirm: boolean shouldLaunchAccount: boolean - openSGEForm: boolean } diff --git a/src/store/global/global.reducer.ts b/src/store/global/global.reducer.ts index 3c85abf91abe9478d68242e15d0d0a0a8e723244..848faf512645af8b0dc5798479555daf8672fd2a 100644 --- a/src/store/global/global.reducer.ts +++ b/src/store/global/global.reducer.ts @@ -131,7 +131,6 @@ const initialState: GlobalState = { dataConsent: false, pdlConfirm: false, shouldLaunchAccount: false, - openSGEForm: false, }, } diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss index 63369debd4a3f418c3b063be15c330ce58711b52..977aa5666dd3e1b703ae9ea0b95e787f1fdb0988 100644 --- a/src/styles/base/_layout.scss +++ b/src/styles/base/_layout.scss @@ -45,6 +45,76 @@ body { color: #32363f; } +.header { + display: flex; + align-items: center; + flex-direction: column; + overflow: hidden; + width: 100%; + z-index: $z-header; + position: fixed; + top: 48px; + left: 0; + @media #{$large-phone} { + top: 0; + } + .header-top { + background: radial-gradient( + circle, + rgba(52, 54, 65, 1) 0%, + rgba(27, 28, 34, 1) 100% + ); + width: 100%; + .header-text { + padding: 0 1rem 1rem 1rem; + color: $grey-bright; + } + } + .header-content { + margin: 0 0 0 220px; + display: flex; + flex-direction: column; + @media #{$tablet} { + margin: 0; + } + @media #{$large-phone} { + margin: 60px 0 0 0; + } + .header-content-top { + display: flex; + flex-direction: row; + &.header-content-top-right { + justify-content: flex-end; + } + .header-text { + padding: 2rem 1rem; + flex: 1; + } + .header-text-desktop { + display: flex; + flex: 1; + padding: 2rem 1.25rem; + color: $grey-bright; + } + .header-back-button { + padding: 0 0.75rem; + } + @media #{$large-phone} { + .header-text { + padding: 0 1rem 1rem 1rem; + color: $grey-bright; + } + .header-text-desktop { + display: none; + } + .header-feedbacks-button { + display: none; + } + } + } + } +} + .content-view-loading { height: 80vh; width: 100%; diff --git a/tests/__mocks__/store.ts b/tests/__mocks__/store.ts index 1ea3561a1304fcfb2ffe808370a0204707b4d4e2..a15e2e8033492356d231641805c5d913a0aa1fe2 100644 --- a/tests/__mocks__/store.ts +++ b/tests/__mocks__/store.ts @@ -135,7 +135,6 @@ export const mockInitialGlobalState: GlobalState = { pdlConfirm: false, zipCode: null, shouldLaunchAccount: false, - openSGEForm: false, }, } export const mockExpiredElec: FluidStatus = {