diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 0850fd8433fbfb87f2a491e02a44446cfbb480cf..83af4d4fce731892e76f5ecc5e75005e85326481 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -1,27 +1,37 @@
-import React, { useCallback, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import CozyBar from 'components/Header/CozyBar'
import Content from 'components/Content/Content'
+import FormNavigation from 'components/FormGlobal/FormNavigation'
+import FormProgress from 'components/FormGlobal/FormProgress'
+import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { SgeStep } from 'enum/sgeStep.enum'
-import StepIdentityAndPdl from './StepIdentityAndPdl'
-import StepAddress from './StepAddress'
-import StepConsent from './StepConsent'
-import './SgeConnect.scss'
-import FormNavigation from 'components/FormGlobal/FormNavigation'
import { SgeStore } from 'models/sgeStore.model'
+import React, { useCallback, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { AppStore } from 'store'
import { updateSgeStore } from 'store/global/global.actions'
-import FormProgress from 'components/FormGlobal/FormProgress'
+import './SgeConnect.scss'
+import StepAddress from './StepAddress'
+import StepConsent from './StepConsent'
+import StepIdentityAndPdl from './StepIdentityAndPdl'
+
+export type SGEKeysForm =
+ | 'firstName'
+ | 'lastName'
+ | 'pdl'
+ | 'address'
+ | 'zipCode'
+ | 'city'
+ | 'dataConsent'
+ | 'pdlConfirm'
const SgeConnectView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const { sgeConnect } = useSelector((state: AppStore) => state.ecolyo.global)
const dispatch = useDispatch()
- const [currentStep, setcurrentStep] = useState<SgeStep>(
+ const [currentStep, setCurrentStep] = useState<SgeStep>(
sgeConnect.currentStep
)
- const [currentSgeState, setcurrentSgeState] = useState<SgeStore>(sgeConnect)
+ const [currentSgeState, setCurrentSgeState] = useState<SgeStore>(sgeConnect)
const defineHeaderHeight = useCallback((height: number) => {
setHeaderHeight(height)
}, [])
@@ -61,41 +71,46 @@ const SgeConnectView: React.FC = () => {
const handleNext = useCallback(() => {
if (currentStep < SgeStep.Consent && isNextValid()) {
- setcurrentStep(prev => prev + 1)
+ setCurrentStep(prev => prev + 1)
dispatch(updateSgeStore(currentSgeState))
}
if (currentStep === SgeStep.Consent && isNextValid()) {
const updatedState = {
...currentSgeState,
+ city: currentSgeState.city.trim(),
shouldLaunchAccount: true,
// switch to false in case the form fails and the user have to give its consent again
dataConsent: false,
pdlConfirm: false,
}
- setcurrentSgeState(updatedState)
+ setCurrentSgeState(updatedState)
dispatch(updateSgeStore(updatedState))
}
}, [currentSgeState, currentStep, dispatch, isNextValid])
const handlePrev = useCallback(() => {
if (currentStep !== SgeStep.IdentityAndPDL) {
- setcurrentStep(prev => prev - 1)
+ setCurrentStep(prev => prev - 1)
}
dispatch(updateSgeStore(currentSgeState))
}, [currentSgeState, currentStep, dispatch])
const onChange = useCallback(
- (objkey: string, value: string | boolean | number, maxLength?: number) => {
+ (
+ key: SGEKeysForm,
+ value: string | boolean | number,
+ maxLength?: number
+ ) => {
if (
- !maxLength || // optionnal ?
+ !maxLength ||
value === '' ||
(/[0-9]/.test(value.toString()) && value.toString().length <= maxLength)
) {
const updatedState = {
...currentSgeState,
- [objkey]: value,
+ [key]: value,
}
- setcurrentSgeState(updatedState)
+ setCurrentSgeState(updatedState)
}
},
[currentSgeState]
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index c5265592c3f82126e1332df5d3d8c2f3aab6a94a..0b7ab8f4b7e289d1e38905d82592fe346feec912 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models/sgeStore.model'
+import React from 'react'
+import { SGEKeysForm } from './SgeConnectView'
interface StepAddressProps {
sgeState: SgeStore
- onChange: (key: string, value: string, maxLength?: number) => void
+ onChange: (key: SGEKeysForm, value: string, maxLength?: number) => void
}
const StepAddress: React.FC<StepAddressProps> = ({
@@ -25,9 +26,7 @@ const StepAddress: React.FC<StepAddressProps> = ({
id="address"
name="address"
value={sgeState.address}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('address', e.target.value)
- }
+ onChange={e => onChange('address', e.target.value.trim())}
/>
<label htmlFor="zipCode" className="text-16-normal">
{t('auth.enedissgegrandlyon.zipCode')}
@@ -38,9 +37,7 @@ const StepAddress: React.FC<StepAddressProps> = ({
id="zipCode"
name="zipCode"
value={sgeState.zipCode !== null ? sgeState.zipCode : undefined}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('zipCode', e.target.value, 5)
- }
+ onChange={e => onChange('zipCode', e.target.value, 5)}
/>
<label htmlFor="city" className="text-16-normal">
@@ -51,9 +48,7 @@ const StepAddress: React.FC<StepAddressProps> = ({
id="city"
name="city"
value={sgeState.city}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('city', e.target.value)
- }
+ onChange={e => onChange('city', e.target.value)}
/>
</div>
)
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index 53c09677e9f12f52c421d59aa9793266103416dc..f3e6bbac2049c0683ad1d1515c860b2f6a262b63 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { decoreText } from 'utils/decoreText'
import classNames from 'classnames'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models/sgeStore.model'
+import React from 'react'
+import { decoreText } from 'utils/decoreText'
+import { SGEKeysForm } from './SgeConnectView'
interface StepConsentProps {
sgeState: SgeStore
- onChange: (key: string, value: boolean, maxLength?: number) => void
+ onChange: (key: SGEKeysForm, value: boolean) => void
}
const StepConsent: React.FC<StepConsentProps> = ({
sgeState,
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index e545c2b98c080839c01abc5537c179fb8a6c9776..06606e1f75c35dd68cf9c0f0609592566a5ae398 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -1,11 +1,16 @@
-import React, { useCallback, useState } from 'react'
+import SgeModalHint from 'components/Connection/SGEConnect/SgeModalHint'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models/sgeStore.model'
-import SgeModalHint from 'components/Connection/SGEConnect/SgeModalHint'
+import React, { useCallback, useState } from 'react'
+import { SGEKeysForm } from './SgeConnectView'
interface StepIdentityAndPdlProps {
sgeState: SgeStore
- onChange: (key: string, value: string | number, maxLength?: number) => void
+ onChange: (
+ key: SGEKeysForm,
+ value: string | number,
+ maxLength?: number
+ ) => void
}
const StepIdentityAndPdl: React.FC<StepIdentityAndPdlProps> = ({
@@ -13,9 +18,9 @@ const StepIdentityAndPdl: React.FC<StepIdentityAndPdlProps> = ({
onChange,
}: StepIdentityAndPdlProps) => {
const { t } = useI18n()
- const [openHintModal, setopenHintModal] = useState<boolean>(false)
+ const [openHintModal, setOpenHintModal] = useState<boolean>(false)
const toggleModal = useCallback(() => {
- setopenHintModal(prev => !prev)
+ setOpenHintModal(prev => !prev)
}, [])
return (
@@ -31,9 +36,7 @@ const StepIdentityAndPdl: React.FC<StepIdentityAndPdlProps> = ({
id="firstName"
name="firstName"
value={sgeState.firstName}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('firstName', e.target.value)
- }
+ onChange={e => onChange('firstName', e.target.value)}
required
/>
<label htmlFor="lastName" className="text-16-normal">
@@ -44,9 +47,7 @@ const StepIdentityAndPdl: React.FC<StepIdentityAndPdlProps> = ({
id="lastName"
name="lastName"
value={sgeState.lastName}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('lastName', e.target.value)
- }
+ onChange={e => onChange('lastName', e.target.value)}
required
/>
<div className="title text-22-bold">
@@ -61,9 +62,7 @@ const StepIdentityAndPdl: React.FC<StepIdentityAndPdlProps> = ({
type="number"
min={0}
value={sgeState.pdl ? sgeState.pdl : undefined}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('pdl', e.target.value, 14)
- }
+ onChange={e => onChange('pdl', e.target.value, 14)}
inputMode="numeric"
required
/>