Commit 63e9f04a authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

Merge branch 'feat/1.4.0' into 'dev'

feat(chore): 1.4.0

See merge request web-et-numerique/llle_project/ecolyo!421
parents 0d3a5d0a 0f4bbcac
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="13" cy="11" r="11" fill="#D24444"/>
<circle cx="13" cy="11" r="10.5" stroke="white"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.114 11.3118L9.03405 14.3917L9.98387 15.3416L13.0638 12.2616L16.3715 15.5692L17.3213 14.6194L14.0137 11.3118L17.3756 7.94982L16.4258 7L13.0638 10.362L9.92956 7.22768L8.97974 8.1775L12.114 11.3118Z" fill="white"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
<svg width="21" height="41" viewBox="0 0 21 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4.09723C0.637168 3.5251 1.31859 2.98987 2.04425 2.49156C2.78761 1.99325 3.58407 1.55953 4.43362 1.19041C5.30088 0.821293 6.23008 0.535225 7.22124 0.33221C8.23008 0.110737 9.30974 0 10.4602 0C12.0531 0 13.4956 0.230701 14.7876 0.692102C16.0797 1.13505 17.1858 1.781 18.1062 2.62998C19.0266 3.4605 19.7345 4.46635 20.2301 5.64754C20.7434 6.82872 21 8.14833 21 9.60635C21 11.009 20.8053 12.2271 20.4159 13.2606C20.0443 14.2757 19.5664 15.1616 18.9823 15.9183C18.4159 16.675 17.7876 17.3302 17.0973 17.8839C16.4071 18.4375 15.7522 18.9543 15.1327 19.4342C14.5133 19.914 13.9734 20.3939 13.5133 20.8737C13.0708 21.3351 12.7965 21.8519 12.6903 22.424L12.0266 26.3829H7.00885L6.50442 21.898C6.38053 21.0122 6.48673 20.2462 6.82301 19.6003C7.15929 18.9359 7.61062 18.336 8.17699 17.8008C8.74337 17.2471 9.37169 16.7211 10.062 16.2228C10.7699 15.7061 11.4248 15.1616 12.0266 14.5895C12.646 13.9989 13.1593 13.3437 13.5664 12.6239C13.9912 11.8857 14.2035 11.0182 14.2035 10.0216C14.2035 8.80351 13.7965 7.83457 12.9823 7.11479C12.1858 6.395 11.1239 6.03511 9.79646 6.03511C8.82301 6.03511 8 6.14585 7.32744 6.36732C6.67257 6.58879 6.10619 6.83795 5.62832 7.11479C5.15044 7.37317 4.74336 7.6131 4.40708 7.83457C4.07079 8.05604 3.75222 8.16678 3.45133 8.16678C2.77876 8.16678 2.27434 7.86226 1.93805 7.25321L0 4.09723ZM4.96461 36.5982C4.96461 35.9892 5.07079 35.4171 5.28318 34.8818C5.51327 34.3282 5.82302 33.8575 6.2124 33.47C6.60178 33.0639 7.05309 32.7502 7.56637 32.5287C8.09734 32.2888 8.67256 32.1688 9.29203 32.1688C9.8938 32.1688 10.4602 32.2888 10.9912 32.5287C11.5221 32.7502 11.9823 33.0639 12.3717 33.47C12.7611 33.8575 13.0619 34.3282 13.2743 34.8818C13.5044 35.4171 13.6195 35.9892 13.6195 36.5982C13.6195 37.2257 13.5044 37.8071 13.2743 38.3423C13.0619 38.8776 12.7611 39.3482 12.3717 39.7542C11.9823 40.1418 11.5221 40.4463 10.9912 40.6678C10.4602 40.8893 9.8938 41 9.29203 41C8.67256 41 8.09734 40.8893 7.56637 40.6678C7.05309 40.4463 6.60178 40.1418 6.2124 39.7542C5.82302 39.3482 5.51327 38.8776 5.28318 38.3423C5.07079 37.8071 4.96461 37.2257 4.96461 36.5982Z" fill="#E3B82A"/>
</svg>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5751 7.67132C10.1977 8.94632 8.31917 10.9853 7.24286 13.459C6.16654 15.9328 5.95521 18.6971 6.64295 21.3057C7.3307 23.9144 8.8774 26.2152 11.0334 27.8368C13.1895 29.4584 15.829 30.3062 18.5261 30.2433C21.2231 30.1805 23.8203 29.2106 25.8984 27.4904C27.9766 25.7701 29.4144 23.3997 29.9799 20.7619C30.5454 18.124 30.2055 15.3726 29.0151 12.9516C27.8247 10.5307 25.8533 8.58147 23.419 7.41861" stroke="#7B7B7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="17.2466" y="4.24658" width="2" height="13" rx="1" fill="#7B7B7B"/>
</svg>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5751 7.67132C10.1977 8.94632 8.31917 10.9853 7.24286 13.459C6.16654 15.9328 5.95521 18.6971 6.64295 21.3057C7.3307 23.9144 8.8774 26.2152 11.0334 27.8368C13.1895 29.4584 15.829 30.3062 18.5261 30.2433C21.2231 30.1805 23.8203 29.2106 25.8984 27.4904C27.9766 25.7701 29.4144 23.3997 29.9799 20.7619C30.5454 18.124 30.2055 15.3726 29.0151 12.9516C27.8247 10.5307 25.8533 8.58147 23.419 7.41861" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="17.2466" y="4.24658" width="2" height="13" rx="1" fill="white"/>
</svg>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.0001" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
<path d="M0.681885 15.5114L4.09098 18.2386L6.81825 13.4659L10.2273 20.9659L14.3182 9.375L17.7273 20.2841L21.1364 12.1023L24.3752 19.5181L27.2728 14.6693L29.3182 17.0455" stroke="#7B7B7B"/>
</svg>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14.9999" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
<path d="M10.2273 19.5908C12.0096 19.5908 13.4545 18.1459 13.4545 16.3635C13.4545 14.5811 12.0096 13.1362 10.2273 13.1362C8.4449 13.1362 7 14.5811 7 16.3635C7 18.1459 8.4449 19.5908 10.2273 19.5908Z" fill="#121212" stroke="#7B7B7B"/>
<path d="M17.0453 23.6816C18.0745 23.6816 18.9089 22.8472 18.9089 21.818C18.9089 20.7887 18.0745 19.9543 17.0453 19.9543C16.016 19.9543 15.1816 20.7887 15.1816 21.818C15.1816 22.8472 16.016 23.6816 17.0453 23.6816Z" fill="#121212" stroke="#7B7B7B"/>
<path d="M16.3635 16.8636C19.2756 16.8636 21.6363 14.5029 21.6363 11.5908C21.6363 8.6788 19.2756 6.31812 16.3635 6.31812C13.4515 6.31812 11.0908 8.6788 11.0908 11.5908C11.0908 14.5029 13.4515 16.8636 16.3635 16.8636Z" fill="#121212" stroke="#7B7B7B"/>
</svg>
<svg width="42" height="40" viewBox="0 0 42 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="28.9091" cy="26.9091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
<circle cx="28.9999" cy="26.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
<circle cx="25.1818" cy="28.0908" r="2.68182" fill="#121212" stroke="#7B7B7B"/>
<path d="M30.6363 34.0453C31.515 34.0453 32.2272 33.3331 32.2272 32.4544C32.2272 31.5758 31.515 30.8635 30.6363 30.8635C29.7577 30.8635 29.0454 31.5758 29.0454 32.4544C29.0454 33.3331 29.7577 34.0453 30.6363 34.0453Z" fill="#121212" stroke="#7B7B7B"/>
<path d="M30.0909 28.5907C32.4758 28.5907 34.4091 26.6574 34.4091 24.2725C34.4091 21.8877 32.4758 19.9543 30.0909 19.9543C27.706 19.9543 25.7727 21.8877 25.7727 24.2725C25.7727 26.6574 27.706 28.5907 30.0909 28.5907Z" fill="#121212" stroke="#7B7B7B"/>
<circle cx="12.9091" cy="26.9091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
<circle cx="12.9999" cy="26.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
<path d="M2.09082 30.5311C2.73743 28.7529 4.90358 25.1965 8.39528 25.1965C12.7599 25.1965 12.7599 30.5311 17.1245 30.5311C20.6162 30.5311 21.9741 26.6514 23.914 25.6815" stroke="#7B7B7B"/>
<circle cx="20.9999" cy="12.9999" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
<circle cx="20.9999" cy="12.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
<path d="M9.54541 13.4091L12.2727 15.5909L14.4545 11.7727L17.1818 17.7727L20.4545 8.5L23.1818 17.2273L25.909 10.6818L28.5 16.6145L30.8181 12.7354L32.4545 14.6364" stroke="#7B7B7B"/>
</svg>
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<circle cx="24.0383" cy="13.4612" r="10.9895" fill="#121212" stroke="#D87B39"/>
<path d="M13.0244 13.8541L15.6468 15.952L17.7447 12.2806L20.3671 18.0499L23.5139 9.13379L26.1363 17.5254L28.7587 11.2317L31.25 16.9361L33.479 13.2063L35.0524 15.0341" stroke="#D87B39"/>
</g>
<g clip-path="url(#clip1)">
<path d="M12.5003 46.5659C18.5696 46.5659 23.4898 41.6458 23.4898 35.5764C23.4898 29.5071 18.5696 24.5869 12.5003 24.5869C6.43091 24.5869 1.51074 29.5071 1.51074 35.5764C1.51074 41.6458 6.43091 46.5659 12.5003 46.5659Z" fill="#121212" stroke="#3A98EC"/>
<path d="M2.01074 38.9721C2.63248 37.2624 4.71532 33.8428 8.07273 33.8428C12.2695 33.8428 12.2695 38.9721 16.4662 38.9721C19.8237 38.9721 21.1293 35.2417 22.9945 34.3091" stroke="#3A98EC"/>
</g>
<g clip-path="url(#clip2)">
<path d="M37.5003 46.5659C43.5696 46.5659 48.4898 41.6458 48.4898 35.5764C48.4898 29.5071 43.5696 24.5869 37.5003 24.5869C31.4309 24.5869 26.5107 29.5071 26.5107 35.5764C26.5107 41.6458 31.4309 46.5659 37.5003 46.5659Z" fill="#121212" stroke="#45D1B8"/>
<path d="M33.8293 39.2231C35.2641 39.2231 36.4272 38.06 36.4272 36.6252C36.4272 35.1905 35.2641 34.0273 33.8293 34.0273C32.3946 34.0273 31.2314 35.1905 31.2314 36.6252C31.2314 38.06 32.3946 39.2231 33.8293 39.2231Z" fill="#121212" stroke="#45D1B8"/>
<path d="M39.0734 42.3704C39.9288 42.3704 40.6223 41.6769 40.6223 40.8214C40.6223 39.9659 39.9288 39.2725 39.0734 39.2725C38.2179 39.2725 37.5244 39.9659 37.5244 40.8214C37.5244 41.6769 38.2179 42.3704 39.0734 42.3704Z" fill="#121212" stroke="#45D1B8"/>
<path d="M38.5493 37.1259C40.853 37.1259 42.7206 35.2583 42.7206 32.9545C42.7206 30.6508 40.853 28.7832 38.5493 28.7832C36.2455 28.7832 34.3779 30.6508 34.3779 32.9545C34.3779 35.2583 36.2455 37.1259 38.5493 37.1259Z" fill="#121212" stroke="#45D1B8"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="23.0769" height="23.0769" fill="white" transform="translate(12.5 1.92285)"/>
</clipPath>
<clipPath id="clip1">
<rect width="23.0769" height="23.0769" fill="white" transform="translate(0.961914 24.0381)"/>
</clipPath>
<clipPath id="clip2">
<rect width="23.0769" height="23.0769" fill="white" transform="translate(25.9619 24.0381)"/>
</clipPath>
</defs>
</svg>
<svg width="42" height="41" viewBox="0 0 42 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="28.9091" cy="27.4091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
<g clip-path="url(#clip0)">
<circle cx="28.9999" cy="27.4999" r="11.4091" fill="#121212" stroke="#45D1B8"/>
<circle cx="25.1818" cy="28.591" r="2.68182" fill="#121212" stroke="#45D1B8"/>
<path d="M30.6363 34.5456C31.515 34.5456 32.2272 33.8333 32.2272 32.9547C32.2272 32.076 31.515 31.3638 30.6363 31.3638C29.7577 31.3638 29.0454 32.076 29.0454 32.9547C29.0454 33.8333 29.7577 34.5456 30.6363 34.5456Z" fill="#121212" stroke="#45D1B8"/>
<path d="M30.0909 29.091C32.4758 29.091 34.4091 27.1576 34.4091 24.7728C34.4091 22.3879 32.4758 20.4546 30.0909 20.4546C27.706 20.4546 25.7727 22.3879 25.7727 24.7728C25.7727 27.1576 27.706 29.091 30.0909 29.091Z" fill="#121212" stroke="#45D1B8"/>
</g>
<circle cx="12.9091" cy="27.4091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
<g clip-path="url(#clip1)">
<circle cx="12.9999" cy="27.4999" r="11.4091" fill="#121212" stroke="#3A98EC"/>
<path d="M2.09082 31.0308C2.73743 29.2527 4.90358 25.6963 8.39528 25.6963C12.7599 25.6963 12.7599 31.0308 17.1245 31.0308C20.6162 31.0308 21.9741 27.1512 23.914 26.1812" stroke="#3A98EC"/>
</g>
<circle cx="20.9999" cy="13.4999" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
<g clip-path="url(#clip2)">
<circle cx="20.9999" cy="13.4999" r="11.4091" fill="#121212" stroke="#D87B39"/>
<path d="M9.54541 13.9091L12.2727 16.0909L14.4545 12.2727L17.1818 18.2727L20.4545 9L23.1818 17.7273L25.909 11.1818L28.5 17.1145L30.8181 13.2354L32.4545 15.1364" stroke="#D87B39"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="24" fill="white" transform="translate(17 15.5)"/>
</clipPath>
<clipPath id="clip1">
<rect width="24" height="24" fill="white" transform="translate(1 15.5)"/>
</clipPath>
<clipPath id="clip2">
<rect width="24" height="24" fill="white" transform="translate(9 1.5)"/>
</clipPath>
</defs>
</svg>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14.9999" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
<path d="M1.36353 19.4138C2.17179 17.1911 4.87948 12.7456 9.2441 12.7456C14.6999 12.7456 14.6999 19.4138 20.1557 19.4138C24.5203 19.4138 26.2177 14.5642 28.6425 13.3518" stroke="#7B7B7B"/>
</svg>
......@@ -8,8 +8,8 @@ import Dialog from '@material-ui/core/Dialog'
const AnalysisErrorModal: React.FC = () => {
const { t } = useI18n()
const history = useHistory()
const goToOptions = () => {
history.push('/options')
const goToConsumption = () => {
history.push('/consumption')
}
const goBack = () => {
history.goBack()
......@@ -54,7 +54,7 @@ const AnalysisErrorModal: React.FC = () => {
aria-label={t(
'analysis_error_modal.accessibility.button_goto_konnector'
)}
onClick={goToOptions}
onClick={goToConsumption}
classes={{
root: 'btn-highlight',
label: 'text-16-bold',
......
......@@ -24,6 +24,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
jest.mock('components/Header/CozyBar', () => () => <div id="cozybar"></div>)
jest.mock('components/DateNavigator/DateNavigator', () => () => (
<div id="dateNavigator"></div>
))
jest.mock('components/Analysis/MonthlyAnalysis', () => () => (
<div id="monthlyanalysis"></div>
))
......
......@@ -26,6 +26,7 @@ interface BarProps {
height: number
isSwitching: boolean
isDuel?: boolean
isMultiMissingFluid?: boolean
}
const Bar = ({
......@@ -40,6 +41,7 @@ const Bar = ({
height,
isSwitching,
isDuel,
isMultiMissingFluid,
}: BarProps) => {
const dispatch = useDispatch()
const { selectedDate } = useSelector((state: AppStore) => state.ecolyo.chart)
......@@ -185,7 +187,76 @@ const Bar = ({
/>
</g>
) : null}
{height > 0 && dataload.value && dataload.value >= 0 ? (
{height > 0 &&
dataload.value &&
dataload.value >= 0 &&
isMultiMissingFluid ? (
<g transform={`translate(${xScaleValue}, ${yScaleValue})`}>
<defs>
<linearGradient
id="gradient"
className={barClass}
x1="0"
x2="0"
y1="0"
y2="1"
>
<stop id="stop-color-1" offset="0%" />
<stop id="stop-color-2" offset="100%" />
</linearGradient>
<pattern
id="diagonalHatch"
width="8"
height="8"
patternTransform="rotate(45 0 0)"
patternUnits="userSpaceOnUse"
>
<line
x1="0"
y1="0"
x2="0"
y2="8"
stroke="#71612E"
strokeWidth="3"
/>
</pattern>
<pattern
id="diagonalHatchSelected"
width="8"
height="8"
patternTransform="rotate(45 0 0)"
patternUnits="userSpaceOnUse"
>
<line
x1="0"
y1="0"
x2="0"
y2="8"
stroke="#E3B82A"
strokeWidth="3"
/>
</pattern>
</defs>
<path
d={topRoundedRect(
showCompare ? getBandWidth() : 0,
0,
getBandWidth(),
height - yScaleValue
)}
stroke="#e3b82a"
fill={
isSelectedDate
? 'url(#diagonalHatchSelected)'
: 'url(#diagonalHatch)'
}
// className={isDuel ? 'bar-duel' : barClass}
onClick={handleClick}
onAnimationEnd={onAnimationEnd}
/>
</g>
) : height > 0 && dataload.value && dataload.value >= 0 ? (
<g transform={`translate(${xScaleValue}, ${yScaleValue})`}>
<defs>
<linearGradient
......@@ -218,7 +289,6 @@ const Bar = ({
{showCompare &&
compareDataload &&
compareDataload.value &&
dataload.value >= 0 &&
compareDataload.value >= 0 ? (
<g transform={`translate(${xScaleValue}, ${yScaleCompareValue})`}>
<defs>
......
......@@ -97,6 +97,13 @@ const BarChart: React.FC<BarChartProps> = ({
yScale={yScale}
height={getContentHeight()}
isSwitching={isSwitching}
isMultiMissingFluid={
d.valueDetail
? d.valueDetail.includes(-1)
? true
: false
: false
}
/>
))}
</g>
......
......@@ -2,10 +2,12 @@ import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { updatedFluidConnection } from 'store/global/global.actions'
import { FluidStatus, FluidConnection } from 'models'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import ConnectionFormLogin from 'components/Connection/ConnectionFormLogin'
import ConnectionFormOauth from 'components/Connection/ConnectionFormOAuth'
import { FluidType } from 'enum/fluid.enum'
import './connectionForm.scss'
interface ConnectionFormProps {
fluidStatus: FluidStatus
}
......@@ -14,6 +16,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
fluidStatus,
}: ConnectionFormProps) => {
const dispatch = useDispatch()
const { t } = useI18n()
const handleSuccess = useCallback(async () => {
const updatedConnection: FluidConnection = {
......@@ -22,9 +25,19 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
}
dispatch(updatedFluidConnection(fluidStatus.fluidType, updatedConnection))
}, [dispatch, fluidStatus.fluidType, fluidStatus.connection])
return (
<>
<div className="konnector-form">
<p
className={`form-title ${FluidType[
fluidStatus.fluidType
].toLowerCase()}`}
>
{t(
`konnector_form.not_connected_${FluidType[
fluidStatus.fluidType
].toLowerCase()}`
)}
</p>
{!fluidStatus.connection.konnectorConfig.oauth ? (
<ConnectionFormLogin
fluidStatus={fluidStatus}
......@@ -36,7 +49,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
onSuccess={handleSuccess}
/>
)}
</>
</div>
)
}
......
......@@ -59,8 +59,10 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
const icon = getIcon(fluidStatus.fluidType)
const changeLogin = (value: string) => {
setError('')
setLogin(value)
if ((/[0-9]/.test(value) && value.length <= 7) || value === '') {
setError('')
setLogin(value)
}
}
const changePassword = (value: string) => {
......@@ -164,7 +166,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
setLogin(lastKnownCredentials)
setError(t('konnector_form.error_login_failed'))
}
}, [account, t])
}, [account, lastKnownCredentials, t])
return (
<form
......@@ -191,7 +193,6 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
changeLogin(e.target.value)
}
value={login}
pattern="[0-9]*"
inputMode="numeric"
></input>
</div>
......@@ -259,7 +260,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
aria-label={t('auth.accessibility.button_create_account')}
onClick={() => window.open(siteLink, '_blank')}
classes={{
root: 'btn-secondary-positive',
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
......
......@@ -104,6 +104,9 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
<p className="koauthform-info-provider text-16-normal">
{t('auth.' + `${konnectorSlug}` + '.connect.info')}
</p>
<p className="koauthform-info-provider text-16-italic info2">
{t('auth.' + `${konnectorSlug}` + '.connect.info2')}
</p>
<div className="koauthform-button">
<OAuthForm konnector={konnector} onSuccess={handleSuccess} />
</div>
......@@ -122,7 +125,7 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
aria-label={t('auth.accessibility.button_create_account')}
onClick={toggleInfoCreationEnedisAccount}
classes={{
root: 'btn-secondary-positive',
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
......
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useCallback } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
import { useDispatch } from 'react-redux'
......@@ -16,15 +16,20 @@ import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
import './connectionResult.scss'
import { UsageEventType } from 'enum/usageEvent.enum'
import UsageEventService from 'services/usageEvent.service'
import DateChartService from 'services/dateChart.service'
import { FluidType } from 'enum/fluid.enum'
import { DateTime } from 'luxon'
interface ConnectionResultProps {
fluidStatus: FluidStatus
handleAccountDeletion: Function
fluidType: FluidType
}
const ConnectionResult: React.FC<ConnectionResultProps> = ({
fluidStatus,
handleAccountDeletion,
fluidType,
}: ConnectionResultProps) => {
const { t } = useI18n()
const client = useClient()
......@@ -32,9 +37,12 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
const account: Account | null = fluidStatus.connection.account
const [updating, setUpdating] = useState<boolean>(false)
const [lastExecutionDate, setLastExecutionDate] = useState<string>('-')
const [lastExecutionDate, setLastExecutionDate] = useState<string | DateTime>(
'-'
)
const [konnectorError, setKonnectorError] = useState<string>('')
const [status, setStatus] = useState<string>('')
const [outDatedDataDays, setOutDatedDataDays] = useState<number | null>(null)
const updateKonnector = async () => {
setUpdating(true)
......@@ -58,7 +66,6 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
: 'error',
})
dispatch(updatedFluidConnection(fluidStatus.fluidType, updatedConnection))
setUpdating(false)
}
......@@ -74,17 +81,37 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
setUpdating(false)
}
}
const isOutdated = useCallback(() => {
const dateChartService = new DateChartService()
return dateChartService.isDataOutdated(fluidStatus.lastDataDate, fluidType)
}, [fluidStatus, fluidType])
const hasUpdatedToday = useCallback(() => {
const todayDate = DateTime.local()
.setZone('utc', {
keepLocalTime: true,
})
.minus({ days: 1 })
.toLocaleString()
if (lastExecutionDate === '-') {
return false
} else if (lastExecutionDate > todayDate) {
return false
} else {
return true
}
}, [lastExecutionDate])
useEffect(() => {
if (
fluidStatus.connection.triggerState &&
fluidStatus.connection.triggerState.last_success
) {
setLastExecutionDate(
new Date(
fluidStatus.connection.triggerState.last_success
).toLocaleString()
const result = DateTime.fromISO(
fluidStatus.connection.triggerState.last_success
)
setLastExecutionDate(result)
} else {
setLastExecutionDate('-')
}
......@@ -98,12 +125,60 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
getKonnectorUpdateError(fluidStatus.connection.triggerState.last_error)
)
}
}, [fluidStatus.connection.triggerState])
if (isOutdated()) {
setOutDatedDataDays(isOutdated())
}
}, [fluidStatus.connection.triggerState, isOutdated])
return (
<div className="connection-update-result">
<div className={status === 'errored' ? 'connection-update-errored' : ''}>
{status === 'errored' && (
<div
className={
status === 'errored' && !hasUpdatedToday()
? 'connection-update-errored'
: ''
}
>
{outDatedDataDays ? (
<div className="connection-caption text-16-normal">
<div className="text-16-normal">
{hasUpdatedToday() === true ? (
<>
<div className="connection-caption">
{t('konnector_form.label_updated_at')}
</div>
<div className="text-16-bold">
{lastExecutionDate.toLocaleString()}
</div>
<div>
{fluidStatus &&
fluidStatus.connection &&
fluidStatus.connection.konnector &&
t('konnector_form.issue') +
' ' +
fluidStatus.connection.konnector.name +
'.'}
</div>
</>
) : (
<div className="connection-caption-errored connection-update-errored warning-white text-16-normal">
<StyledIcon
icon={warningWhite}
size={36}
className="warning-icon"
role="img"
title="Attention"
ariaHidden={false}
/>
<div className="text-16-normal">
{t('konnector_form.resolve')}
</div>
</div>
)}
</div>
</div>
) : status === 'errored' ? (
<div className="connection-caption-errored warning-white text-16-normal">
<StyledIcon
icon={warningWhite}
......@@ -113,21 +188,25 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
title="Attention"
ariaHidden={false}
/>
<div className="text-16-normal">
{t(`konnector_form.${konnectorError}`)}
<div className="connection-caption">
{t('konnector_form.label_updated_at')}
</div>
<div className="text-16-bold">{lastExecutionDate}</div>
<div className="text-16-bold">
{lastExecutionDate.toLocaleString()}
</div>
</div>
</div>
)}
{status !== 'errored' && (
) : (
<div>
<div className="connection-caption text-16-normal">
{t('konnector_form.label_updated_at')}
</div>
<div className="text-16-bold">{lastExecutionDate}</div>
<div className="text-16-bold">
{lastExecutionDate.toLocaleString()}
</div>
</div>
)}
</div>
......
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
.konnector-form {
margin: 2rem 1.5rem 2rem 1.5rem;
padding-top: 1rem;
@media only screen and (min-width : #{$width-large-phone}) {
padding-top: 2rem;
margin: 4rem 1.5rem 2rem 1.5rem;
padding-bottom: 1rem;
}
.form-title {
font-size: 20px;
font-weight: bold;
text-align: center;
&.electricity {
color: $elec-color;
}
&.gas {