From a377d1d46c55a0e9921e7869cb654cf087f9ee29 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 16 Jan 2023 09:33:12 +0000
Subject: [PATCH] revert: feat(sge): loader improved
---
.../Connection/ConnectionResult.tsx | 1 -
.../Connection/SGEConnect/SgeConnect.scss | 21 ++----
.../Connection/SGEConnect/SgeConnectView.tsx | 11 +--
.../Connection/SGEConnect/SgeInit.spec.tsx | 4 +-
.../Connection/SGEConnect/SgeInit.tsx | 4 +-
.../SgeConnectView.spec.tsx.snap | 2 -
src/components/Header/Header.tsx | 19 ++---
src/components/Header/header.scss | 8 +--
src/components/Home/ConsumptionView.spec.tsx | 25 -------
src/components/Home/ConsumptionView.tsx | 9 +--
.../Konnector/KonnectorModalFooter.tsx | 8 ++-
.../Konnector/KonnectorViewerCard.tsx | 18 -----
src/components/Routes/Routes.tsx | 2 +
src/models/sgeStore.model.ts | 1 -
src/store/global/global.reducer.ts | 1 -
src/styles/base/_layout.scss | 70 +++++++++++++++++++
tests/__mocks__/store.ts | 1 -
17 files changed, 106 insertions(+), 99 deletions(-)
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index 9b84097ba..60740d100 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 7a02ec9d4..cc76bd398 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 1f5cbf459..4097240cc 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 0438327f0..8755cca5b 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 6767e15cc..6cf6b71d6 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 b3f663e1a..f942fe396 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 49a4fc643..3a469698a 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 1a73a5fe5..58b400875 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 ad546465a..70fd20ef2 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 a511cd05e..c16b6ce74 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 81a92f638..e476536b4 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 0569d12be..5bc0ce566 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 2bcfc4fa8..28abfb028 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 9a28f5c6f..59b30d9f4 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 3c85abf91..848faf512 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 63369debd..977aa5666 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 1ea3561a1..a15e2e803 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 = {
--
GitLab