diff --git a/manifest.webapp b/manifest.webapp
index 4ef7753ca52d7e481970b7e1980bade81cf1b785..29c5693f5ef27dda667ca917bc74f836504a54d4 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -236,6 +236,14 @@
"type": "org.ecolyo.backoffice",
"verbs": ["ALL"]
},
+ "backoffice-custom-popup-rec": {
+ "type": "org.ecolyo.backoffice.custom.popup.rec",
+ "verbs": ["ALL"]
+ },
+ "backoffice-custom-popup": {
+ "type": "org.ecolyo.backoffice.custom.popup",
+ "verbs": ["ALL"]
+ },
"backoffice-partners-info-rec": {
"type": "org.ecolyo.backoffice.partners.info.rec",
"verbs": ["ALL"]
diff --git a/src/assets/icons/ico/chevron-down.svg b/src/assets/icons/ico/chevron-down.svg
index 24377e7c56e222361a98518bf03d9ba0692acc82..12b11fa40f039ed7614740e37500334be4e3e628 100644
--- a/src/assets/icons/ico/chevron-down.svg
+++ b/src/assets/icons/ico/chevron-down.svg
@@ -1,3 +1,3 @@
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.5 0L7 5L11.5 0L14 0L7 8L0 0L2.5 0Z" fill="white"/>
+<path d="M2.5 0L7 5L11.5 0L14 0L7 8L0 0L2.5 0Z" fill="currentColor"/>
</svg>
diff --git a/src/assets/icons/ico/chevron-up.svg b/src/assets/icons/ico/chevron-up.svg
index 1bcc77f4b6b3753ab28665c4266651cc7def33d3..281bb1a04c300c79582e62f85763eae90b16c50a 100644
--- a/src/assets/icons/ico/chevron-up.svg
+++ b/src/assets/icons/ico/chevron-up.svg
@@ -1,3 +1,3 @@
<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.5 8.87979L7 3.89345L2.5 8.87979L9.53674e-07 8.87979L7 0.901652L14 8.87979L11.5 8.87979Z" fill="white"/>
+<path d="M11.5 8.87979L7 3.89345L2.5 8.87979L9.53674e-07 8.87979L7 0.901652L14 8.87979L11.5 8.87979Z" fill="currentColor"/>
</svg>
diff --git a/src/assets/icons/ico/speaker.svg b/src/assets/icons/ico/speaker.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f9bdb824845c1b4d4089db53c4992e272c2614d2
--- /dev/null
+++ b/src/assets/icons/ico/speaker.svg
@@ -0,0 +1,60 @@
+<svg width="101" height="100" viewBox="0 0 101 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.0755 77.0337L56.5751 80.331L66.2921 67.8887L65.3579 66.2706L61.7573 64.3939L51.0755 77.0337Z" fill="#1A1A1A"/>
+<path d="M56.5756 80.3307L66.4066 67.463L69.3233 71.892L60.1456 84.0229L56.5756 80.3307Z" fill="#454545"/>
+<path d="M56.1192 82.0323L51.0756 77.0333L56.5752 80.3307L60.1452 84.0229L56.1192 82.0323Z" fill="black"/>
+<path d="M59.934 71.1999L64.0822 65.9283L64.5076 66.0423L63.3117 70.5053C63.2099 70.8851 62.8686 71.1515 62.4754 71.158L59.934 71.1999Z" fill="#976D1B"/>
+<path d="M72.301 72.6903C69.0043 69.6792 62.326 63.6344 61.9857 63.5432L65.6168 63.6043L76.8745 67.5326L72.301 72.6903Z" fill="#454545"/>
+<path d="M74.9144 69.7431C74.9144 69.7431 62.326 63.6344 61.9857 63.5432L65.6168 63.6043L76.8745 67.5326L74.9144 69.7431Z" fill="#1A1A1A"/>
+<path d="M69.3228 71.8923L72.3006 72.6902L63.2615 63.8851L60.7091 63.2012L60.4811 64.052L64.8185 66.582L66.0232 68.0023L67.9021 73.7914L69.3228 71.8923Z" fill="#1A1A1A"/>
+<path d="M57.7233 69.2404L59.9337 71.2005L64.0819 65.9288L61.3321 64.2801L57.7233 69.2404Z" fill="#E3B82A"/>
+<path d="M72.167 72.6663L63.8336 64.333L60.5006 63.667V64.0003L63.8339 66.0003L72.167 72.6663Z" fill="black"/>
+<path d="M68.4998 72.9999L69.1665 71.9993L66.1665 67.9999L68.4998 72.9999Z" fill="black"/>
+<path d="M63.8173 49.9C59.5995 65.641 46.6575 75.8499 34.9105 72.7023C23.1636 69.5547 17.0599 54.2425 21.2777 38.5015C25.4955 22.7606 38.4375 12.5516 50.1845 15.6992C61.9315 18.8468 68.0351 34.159 63.8173 49.9Z" fill="#454545"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7084 59.259L54.2531 53.2646L58.9294 60.9262C52.9472 70.0504 43.6024 75.0324 34.9116 72.7037C28.7054 71.0407 24.0743 65.9822 21.7084 59.259Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2387 47.1544L48.6391 50.3928L48.8612 52.7329L21.7397 55.4955L21.2387 47.1544Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.4195 15.1413L60.7566 47.7126L60.2087 54.8607L29.2964 23.4115C34.1397 18.0462 40.2986 14.9336 46.4195 15.1413Z" fill="#313131"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.8063 34.9979L60.7574 47.7132L58.2146 40.1919L50.0264 15.6604C50.0792 15.674 50.132 15.6879 50.1847 15.702C58.0875 17.8196 63.4361 25.4426 64.8063 34.9979Z" fill="#313131"/>
+<path d="M86.3184 45.8989L71.7715 40.6333C75.8732 45.7446 75.9107 50.7092 75.4168 52.5526C74.2737 59.5413 68.2549 63.3998 65.3883 64.4555L72.0807 66.7046L79.9353 69.7211L82.148 68.8044C91.447 64.9518 93.6628 52.7817 86.3184 45.8989Z" fill="#E3B82A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.9415 62.7789L74.1628 57.2321L73.5531 57.5841C71.2217 61.4396 67.472 63.6882 65.3882 64.4557L72.0805 66.7048L79.9351 69.7213L82.1479 68.8046C85.2099 67.536 87.5039 65.3655 88.9415 62.7789Z" fill="#976D1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M87.5244 47.1748L72.7404 41.9434C73.3513 42.8453 73.8429 43.7344 74.2351 44.594L74.6878 45.0623L89.5605 50.4667C89.055 49.3084 88.3785 48.1994 87.5244 47.1748Z" fill="#FFD752"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.0479 51.7581L74.9399 46.412C75.0091 46.6276 75.0722 46.8402 75.1296 47.0496L90.2768 52.5537C90.2087 52.2869 90.1324 52.0216 90.0479 51.7581Z" fill="#FFD752"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.8446 67.9677L69.0581 62.418C67.6815 63.4251 66.3553 64.1005 65.388 64.4567L72.0804 66.7058L79.935 69.7223L82.1477 68.8056C82.7426 68.5591 83.3084 68.2787 83.8446 67.9677Z" fill="#5B450C"/>
+<path opacity="0.5" d="M90.0872 60.0817C93.0713 50.3207 81.369 44.1074 71.7715 40.6333C75.8732 45.7446 75.9107 50.7092 75.4168 52.5526C74.2737 59.5413 68.2549 63.3998 65.3883 64.4555L72.0807 66.7046L79.9353 69.7211L82.148 68.8044C86.227 67.1145 88.9431 63.8242 90.0872 60.0817Z" fill="url(#paint0_linear_118_40903)"/>
+<path d="M72.6224 40.8608C70.5436 39.5439 65.365 36.6365 64.6844 36.4542L62.8525 50.0974L56.6526 63.0262L65.3885 64.4551L65.6081 64.3848C75.5738 61.1976 79.2152 48.9855 72.6224 40.8608Z" fill="#7A7A7A"/>
+<path d="M72.6224 40.8609C70.5436 39.544 65.3651 36.6366 64.6844 36.4542L64.5399 38.6952L75.1137 45.1759L74.3369 43.495C73.895 42.5391 73.3176 41.6519 72.6224 40.8609Z" fill="#9F9F9F"/>
+<path d="M75.8731 50.8505C73.7943 49.5336 61.8094 44.8025 61.1288 44.6201L59.7833 54.7462L56.6528 63.0261L65.3887 64.455L66.7836 63.8951C72.1407 61.7449 75.7112 56.6208 75.8731 50.8505Z" fill="#444549"/>
+<path d="M56.6529 63.0251L65.3888 64.454L65.8391 64.3017C69.414 63.0928 72.3918 60.5635 74.1632 57.2313L59.7834 54.7451L56.6529 63.0251Z" fill="#1A1A1A"/>
+<path opacity="0.5" d="M63.8173 49.9C59.5995 65.641 46.6575 75.8499 34.9105 72.7023C23.1636 69.5547 17.0599 54.2425 21.2777 38.5015C25.4955 22.7606 38.4375 12.5516 50.1845 15.6992C61.9315 18.8468 68.0351 34.159 63.8173 49.9Z" fill="url(#paint1_linear_118_40903)"/>
+<path d="M55.7186 61.4086L45.5479 50.0205L48.2835 39.811L62.6412 37.275L63.9315 49.4752L55.7186 61.4086Z" fill="#7A7A7A"/>
+<path d="M56.3719 60.6718L46.2011 49.2838L46.6876 45.7666L60.976 53.6986L56.3719 60.6718Z" fill="#444549"/>
+<path d="M62.2604 47.2037L47.4855 42.7888L47.9415 41.0872L63.2639 38.3538L62.2604 47.2037Z" fill="#9F9F9F"/>
+<path d="M63.6277 42.0985L47.485 42.7884L49.1032 41.8541L64.0002 39.0067L63.6277 42.0985Z" fill="#BEBEBE"/>
+<path d="M51.1688 46.055C50.4134 48.8743 48.0869 50.7005 45.9725 50.1339C43.858 49.5674 42.7563 46.8226 43.5117 44.0033C44.2671 41.184 46.5936 39.3579 48.7081 39.9244C50.8225 40.491 51.9243 43.2358 51.1688 46.055Z" fill="#444549"/>
+<path d="M50.318 45.8271C49.5626 48.6463 47.4266 50.5236 45.5471 50.0199C43.6675 49.5163 42.7563 46.8226 43.5117 44.0033C44.2671 41.184 46.4032 39.3068 48.2827 39.8104C50.1622 40.3141 51.0735 43.0078 50.318 45.8271Z" fill="#BEBEBE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.2166 41.7522C49.8616 41.3288 49.4198 41.027 48.9055 40.8892C47.026 40.3856 44.8899 42.2628 44.1345 45.0821C43.7335 46.5787 43.8022 48.0399 44.236 49.1569C43.2936 48.0328 42.963 46.0512 43.5117 44.0033C44.2671 41.184 46.4032 39.3068 48.2827 39.8104C49.1645 40.0467 49.8331 40.765 50.2166 41.7522Z" fill="#B0B0B0"/>
+<path d="M48.4621 47.2646C47.8259 48.2163 46.8549 48.6834 46.2932 48.308C45.7316 47.9325 45.792 46.8567 46.4282 45.905C47.0644 44.9534 48.0354 44.4862 48.597 44.8617C49.1586 45.2371 49.0982 46.313 48.4621 47.2646Z" fill="#DDDDDD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.5509 66.3097C55.2926 62.5694 59.2889 56.5907 61.265 49.2161C63.241 41.8415 62.7694 34.6656 60.5331 29.0555C58.297 23.4458 54.3851 19.5604 49.5006 18.2516C44.6161 16.9428 39.2856 18.3517 34.5442 22.0918C29.8025 25.8322 25.8061 31.8109 23.8301 39.1855C21.8541 46.56 22.3257 53.7359 24.5619 59.346C26.798 64.9557 30.71 68.8412 35.5945 70.1499C40.4789 71.4587 45.8095 70.0498 50.5509 66.3097ZM34.9105 72.7023C46.6575 75.8499 59.5995 65.641 63.8173 49.9C68.0351 34.159 61.9315 18.8468 50.1845 15.6992C38.4375 12.5516 25.4955 22.7606 21.2777 38.5015C17.0599 54.2425 23.1636 69.5547 34.9105 72.7023Z" fill="#BEBEBE"/>
+<path d="M23.2458 54.9487C24.0786 58.9145 25.6708 62.347 27.8293 64.9754C30.4393 68.1536 33.7649 70.0305 37.3779 70.5046C41.0047 70.9805 44.9457 70.0442 48.7109 67.6248C51.808 65.6347 54.6387 62.7309 56.9278 59.1429C57.1327 58.8217 57.4563 58.5927 57.8294 58.5158C58.9697 58.2806 59.8494 59.4678 59.2269 60.4516C56.744 64.3754 53.6269 67.6069 50.1394 69.8478C45.9294 72.553 41.3687 73.6933 37.0341 73.1245C32.6994 72.5557 28.7855 70.3034 25.7872 66.6523C23.2961 63.6189 21.5301 59.7332 20.6303 55.3494C20.4014 54.234 21.599 53.4389 22.5814 54.0147C22.9256 54.2165 23.1638 54.5582 23.2458 54.9487Z" fill="#A4A4A4"/>
+<path d="M61.9541 46.1162C62.9239 40.6462 62.6035 35.1934 61.0613 30.5094C59.2285 24.9433 55.8534 20.9768 51.7647 19.0753C47.7079 17.1885 42.938 17.3261 38.2498 19.7062C34.2199 21.7521 30.5103 25.3364 27.6978 30.0176C27.5036 30.3408 27.1908 30.5768 26.8244 30.6658C25.6873 30.942 24.7662 29.7751 25.3652 28.7699C28.4021 23.674 32.4818 19.6711 37.0536 17.35C42.375 14.6485 47.9998 14.4101 52.879 16.6793C57.7582 18.9485 61.5585 23.5704 63.5711 29.683C65.335 35.04 65.6203 41.2213 64.4159 47.3248C64.2241 48.2968 62.9655 48.4827 62.4551 47.6336L62.1315 47.0951C61.955 46.8016 61.8943 46.4534 61.9541 46.1162Z" fill="#DDDDDD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.4814 21.1955C58.0013 20.8953 58.6625 20.9887 59.0523 21.4452C60.9792 23.7023 62.519 26.4894 63.5707 29.6835C63.6197 29.8323 63.6676 29.9817 63.7143 30.1318C63.8906 30.6981 63.6388 31.3048 63.1252 31.6014C62.3736 32.0353 61.4162 31.627 61.1544 30.7996C61.1237 30.7027 61.0926 30.6061 61.0609 30.5099C60.1256 27.6695 58.7887 25.2457 57.1603 23.3003C56.6103 22.6432 56.7393 21.6239 57.4814 21.1955Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8881 63.57C56.1633 64.0468 56.1101 64.6472 55.7404 65.0551C54.0298 66.9427 52.1464 68.5593 50.1404 69.8483C46.4965 72.1898 42.5898 73.3589 38.7944 73.2621C38.0827 73.2439 37.5594 72.6169 37.6097 71.9068C37.6623 71.1623 38.323 70.6159 39.0693 70.6241C42.2114 70.6586 45.5247 69.6733 48.7119 67.6253C50.4795 66.4895 52.1602 65.0562 53.7031 63.3678C54.3196 62.6932 55.4311 62.7785 55.8881 63.57Z" fill="#808080"/>
+<path opacity="0.35" d="M61.3542 69.3014L59.9112 66.1791L61.3198 64.2969L64.5071 66.0428L63.26 70.6967C63.2069 70.8951 62.9576 70.9597 62.8148 70.812L61.3542 69.3014Z" fill="#5B450C"/>
+<path d="M59.0524 72.7881L57.7233 69.2404L59.9337 71.2005L62.714 71.0336L63.5648 71.2615L60.8374 74.6342L59.0524 72.7881Z" fill="black"/>
+<line x1="4.37175" y1="30.3351" x2="16.8351" y2="34.1283" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="13.9135" y1="22.9173" x2="19.4173" y2="26.5866" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="9.10617" y1="41.6363" x2="15.4697" y2="40.7272" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="60.681" y1="16.219" x2="61.0524" y2="14.4857" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="64.293" y1="21.2222" x2="70.0555" y2="14.207" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="24.2179" y1="71.8974" x2="23.064" y2="72.282" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="28.5583" y1="73.9936" x2="25.1603" y2="81.2751" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_118_40903" x1="88.4454" y1="46.4689" x2="67.0899" y2="64.9114" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD752"/>
+<stop offset="0.714248" stop-color="#5B450C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_118_40903" x1="38.2734" y1="12.5077" x2="45.9403" y2="77.4815" gradientUnits="userSpaceOnUse">
+<stop stop-color="#25262B"/>
+<stop offset="1" stop-color="#60626C"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index fb9eea498122754f72d2df482be6a41e06e0fc77..a080095b356ddd774283a9eb1347a0bed831e873 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -7,7 +7,6 @@ import { profileData } from '../../../tests/__mocks__/profile.mock'
import AnalysisConsumption from 'components/Analysis/AnalysisConsumption'
import { act } from 'react-dom/test-utils'
import Button from '@material-ui/core/Button'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import {
mockMonthlyForecastJanuaryTestProfile1,
@@ -16,6 +15,7 @@ import {
import { FluidType } from 'enum/fluid.enum'
import { PerformanceIndicator } from 'models'
import { DateTime } from 'luxon'
+import { Accordion } from '@material-ui/core'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -108,7 +108,7 @@ describe('AnalysisConsumption component', () => {
await new Promise(resolve => setTimeout(resolve))
wrapper.update()
})
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
+ expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
@@ -171,11 +171,11 @@ describe('AnalysisConsumption component', () => {
await new Promise(resolve => setTimeout(resolve))
wrapper.update()
})
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
+ expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
- it('should be rendered correctly without fluid and when click on ideal home button', async () => {
+ it('should be rendered correctly without fluid', async () => {
const store = mockStore({
ecolyo: {
profile: modifiedProfile,
@@ -198,49 +198,12 @@ describe('AnalysisConsumption component', () => {
await new Promise(resolve => setTimeout(resolve))
wrapper.update()
})
- wrapper.find('.link-ideal').first().simulate('click')
expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
+ wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
+ ).toBe(FluidType.MULTIFLUID)
})
- it('should be rendered correctly without fluid and when click on average home button', async () => {
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- wrapper.find('.link-average').first().simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
- })
-
- it('should be rendered correctly with all fluids connected for ideal', async () => {
+ it('should be rendered correctly with all fluids connected', async () => {
const updateGlobalState = { ...globalStateData }
updateGlobalState.fluidTypes = [
FluidType.ELECTRICITY,
@@ -273,103 +236,12 @@ describe('AnalysisConsumption component', () => {
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
- wrapper.find('.link-ideal').first().simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
- })
-
- it('should be rendered correctly with all fluids connected for average', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper.find('.link-average').first().simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
- })
-
- it('should be rendered correctly with 2 fluids connected for ideal', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper.find('.link-ideal').first().simulate('click')
expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
+ wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
+ ).toBe(FluidType.MULTIFLUID)
})
- it('should be rendered correctly with 2 fluids connected for average', async () => {
+ it('should be rendered correctly with 2 fluids connected', async () => {
const updateGlobalState = { ...globalStateData }
updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
const store = mockStore({
@@ -399,14 +271,9 @@ describe('AnalysisConsumption component', () => {
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
- wrapper.find('.link-average').first().simulate('click')
expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
+ wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
+ ).toBe(FluidType.MULTIFLUID)
})
it('should redirect to profileType form when click on mui button', async () => {
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index 622af99b6b4ea4746430fad728a6080ea1fe4b9a..653cfa3bd617e5671dbec863f0890d98e2dfc927 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -11,15 +11,20 @@ import './analysisConsumption.scss'
import Button from '@material-ui/core/Button'
import AnalysisConsumptionRow from 'components/Analysis/AnalysisConsumptionRow'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import ProfileTypeService from 'services/profileType.service'
import { Client, useClient } from 'cozy-client'
import { DateTime } from 'luxon'
import ProfileTypeEntityService from 'services/profileTypeEntity.service'
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+} from '@material-ui/core'
import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
+import chevronDown from 'assets/icons/ico/chevron-down.svg'
interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator
@@ -42,9 +47,24 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
const [homePriceConsumption, setHomePriceConsumption] = useState<number>(0)
const [forecast, setForecast] = useState<MonthlyForecast | null>(null)
- const [toggleHome, setToggleHome] = useState<string>('average')
const [isLoading, setisLoading] = useState<boolean>(true)
+ const [activeAverageHome, setActiveAverageHome] = useState<boolean>(false)
+ const toggleAccordion = () => {
+ setActiveAverageHome(prev => !prev)
+ if (!activeAverageHome) {
+ setTimeout(() => {
+ const content = document.querySelector('.consumption-electricity')
+ if (content) {
+ content.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ })
+ }
+ }, 300)
+ }
+ }
+
// Disconnected + empty fluids to show in AnalysisConsumptionRow
const disconnectedFluidTypes: FluidType[] = [
FluidType.ELECTRICITY,
@@ -75,12 +95,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
},
[fluidTypes]
)
- const toggleAverage = () => {
- setToggleHome('average')
- }
- const toggleIdeal = () => {
- setToggleHome('ideal')
- }
const goToForm = () => {
history.push('/profileType')
@@ -181,9 +195,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
<>
<div className="consumption-title text-20-bold">
<div className="user-title">{t('analysis.user_consumption')}</div>
- <div className={`${toggleHome}-title`}>
- {t(`analysis.comparison`)}
- </div>
+ <div className={`average-title`}>{t(`analysis.comparison`)}</div>
</div>
<div className="consumption-price">
{fluidTypes.length > 0 ? (
@@ -193,7 +205,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={true}
noData={false}
/>
@@ -204,7 +215,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={false}
noData={false}
/>
@@ -220,7 +230,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
forecast={forecast}
- toggleHome={toggleHome}
connected={true}
noData={false}
/>
@@ -235,7 +244,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={false}
noData={false}
/>
@@ -248,34 +256,48 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={false}
noData={true}
/>
))}
- <StyledCard
- onClick={toggleAverage}
- className={`link-average ${
- toggleHome === 'average' && 'active'
- } grid-align`}
+ <Accordion
+ expanded={activeAverageHome}
+ onChange={toggleAccordion}
+ classes={{
+ root: 'expansion-panel-root',
+ }}
>
- <span className="check-icon"></span>
- <span className="link-label text-16-normal">
- {t('analysis.average_home')}
- </span>
- </StyledCard>
- <StyledCard
- onClick={toggleIdeal}
- className={`link-ideal ${
- toggleHome === 'ideal' && 'active'
- } grid-align`}
- >
- <span className="check-icon"></span>
- <span className="link-label text-16-normal">
- {t('analysis.ideal_home')}
- </span>
- </StyledCard>
+ <AccordionSummary
+ aria-label={t(
+ 'profile_type.accessibility.button_toggle_average_home'
+ )}
+ expandIcon={
+ <Icon
+ icon={chevronDown}
+ size={16}
+ className="accordion-icon"
+ />
+ }
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
+ >
+ <div className="accordion-title accordion-title">
+ {t('analysis.average_home')}
+ </div>
+ </AccordionSummary>
+ <AccordionDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ <span className="accordion-desc text-16-normal">
+ {t('analysis.average_home_description')}
+ </span>
+ </AccordionDetails>
+ </Accordion>
</>
)}
</div>
diff --git a/src/components/Analysis/AnalysisConsumptionRow.spec.tsx b/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
index 866717ba5f698741665112769fdf6a01f0506f24..2deb45ac4ad4b3d3cee5ee7c0c71f6ebc5e3767d 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
@@ -20,7 +20,6 @@ describe('AnalysisConsumptionRow component', () => {
const homePriceConsumption = 18
const performanceValue: number | null = 25
const forecast: MonthlyForecast = mockMonthlyForecastJanuaryTestProfile1
- const toggleHome = 'average'
const connected = true
const noData = false
@@ -33,7 +32,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={mockPerformanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
@@ -55,7 +53,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={mockPerformanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={mockConnected}
noData={noData}
/>
@@ -75,7 +72,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={performanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
@@ -91,31 +87,6 @@ describe('AnalysisConsumptionRow component', () => {
expect(wrapper.find('.not-connected').exists()).toBeFalsy()
})
- it('should be rendered correctly for singleFluid connected for ideal', async () => {
- const mockToggleHome = 'ideal'
- const wrapper = mount(
- <AnalysisConsumptionRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={forecast}
- toggleHome={mockToggleHome}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe(
- '25 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.price').last().text()).toBe(
- '3906 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
-
it('should be rendered correctly for singleFluid not connected', async () => {
const mockConnected = false
const wrapper = mount(
@@ -125,7 +96,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={performanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={mockConnected}
noData={noData}
/>
@@ -148,7 +118,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={mockPerformanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
@@ -183,7 +152,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={performanceValue}
forecast={mockforecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
diff --git a/src/components/Analysis/AnalysisConsumptionRow.tsx b/src/components/Analysis/AnalysisConsumptionRow.tsx
index e3830ee19ffd749cd38e36aa9123d00774f2a706..c4a3fbeb8ed1f7b4984448c3d98638767ecc13b0 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.tsx
@@ -16,7 +16,6 @@ interface AnalysisConsumptionRowProps {
homePriceConsumption: number
performanceValue: number | null
forecast: MonthlyForecast | null
- toggleHome: string
connected: boolean
noData: boolean
}
@@ -27,21 +26,15 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
homePriceConsumption,
performanceValue,
forecast,
- toggleHome,
connected,
noData,
}: AnalysisConsumptionRowProps) => {
const { t } = useI18n()
const converterService: ConverterService = new ConverterService()
- const idealCoefficient = 0.1
const maxPriceConsumption: number = Math.max(
userPriceConsumption,
homePriceConsumption
)
- const forecastPriceConsumption: number =
- toggleHome === 'ideal'
- ? homePriceConsumption - homePriceConsumption * idealCoefficient
- : homePriceConsumption
const fluidLoad: number =
forecast && fluid !== FluidType.MULTIFLUID
? forecast.fluidForecast[fluid].load
@@ -73,24 +66,19 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
const formatFluidConsumptionForForecast = (_fluid: FluidType) => {
if (_fluid === FluidType.MULTIFLUID) {
- return `${formatNumberValues(forecastPriceConsumption).toString()} €`
+ return `${formatNumberValues(homePriceConsumption).toString()} €`
} else {
- let _fluidLoad: number = fluidLoad
- if (toggleHome === 'ideal') {
- _fluidLoad = fluidLoad - fluidLoad * idealCoefficient
- }
// keeps unit in kWh for electricity and gas
if (_fluid === FluidType.ELECTRICITY || _fluid === FluidType.GAS) {
- return `${Math.round(_fluidLoad)} ${t(
+ return `${Math.round(fluidLoad)} ${t(
`FLUID.${FluidType[_fluid]}.UNIT`
)}`
}
- return (performanceValue && performanceValue >= 1000) ||
- _fluidLoad >= 1000
- ? formatNumberValues(_fluidLoad / 1000).toString() +
+ return (performanceValue && performanceValue >= 1000) || fluidLoad >= 1000
+ ? formatNumberValues(fluidLoad / 1000).toString() +
' ' +
t(`FLUID.${FluidType[_fluid]}.MEGAUNIT`)
- : Math.round(_fluidLoad) + ' ' + t(`FLUID.${FluidType[_fluid]}.UNIT`)
+ : Math.round(fluidLoad) + ' ' + t(`FLUID.${FluidType[_fluid]}.UNIT`)
}
}
@@ -108,14 +96,11 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
const getWidthForForecast = (_fluid: FluidType) => {
if (_fluid === FluidType.MULTIFLUID) {
- return `${(forecastPriceConsumption / maxPriceConsumption) * 100}%`
+ return `${(homePriceConsumption / maxPriceConsumption) * 100}%`
} else {
- let fluidValue: number = forecast
+ const fluidValue: number = forecast
? forecast.fluidForecast[_fluid].value
: 0
- if (toggleHome === 'ideal') {
- fluidValue = fluidValue - fluidValue * idealCoefficient
- }
return `${(fluidValue / maxPriceConsumption) * 100}%`
}
}
@@ -154,7 +139,7 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
size={22}
/>
</div>
- <div className={`${toggleHome}-graph`}>
+ <div className="average-graph">
<div className="container-graph">
{connected && (
<div
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
index ffd6593c0d8b512ce5929b90c9a2db1d7dd0f613..b0861c5208727edb719805ea27b5cc5af37f395d 100644
--- a/src/components/Analysis/analysisConsumption.scss
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -7,104 +7,31 @@
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
+ gap: 2rem;
.user-title,
- .average-title,
- .ideal-title {
+ .average-title {
flex-basis: 50%;
}
.user-title {
text-align: right;
- padding-right: 5%;
color: $multi-color;
}
- .average-title,
- .ideal-title {
- padding-left: 5%;
- }
.average-title {
color: $blue-grey;
}
- .ideal-title {
- color: $green-light;
- }
}
- .link-average,
- .link-ideal {
- .check-icon {
- display: inline-block;
- background: $dark-light-2;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- vertical-align: middle;
- margin-right: 1rem;
- position: relative;
- &::before,
- &:after {
- content: '';
- display: none;
- background-color: $blue-grey;
- position: absolute;
- border-radius: 0.5rem;
- }
- &::before {
- top: 11px;
- left: 3px;
- width: 7px;
- height: 3px;
- transform: rotate(46deg);
- }
- &::after {
- top: 9px;
- left: 6px;
- width: 13px;
- height: 3px;
- transform: rotate(-45deg);
- }
- }
- .link-label {
- display: inline-block;
- vertical-align: middle;
- font-weight: bold;
- line-height: 100%;
- }
- &.active {
- .link-label {
- color: $dark-light-2;
- }
- .check-icon {
- &::before,
- &:after {
- display: inline-block;
- }
- }
- }
+ div.expansion-panel-root {
+ border: solid 2px $blue-grey;
+ color: $blue-grey;
}
- .link-average {
- margin-top: 2rem;
- &.active {
- background: $blue-grey;
- .link-label {
- color: $dark-light-2;
- }
- }
- .check-icon {
- &::before,
- &:after {
- background-color: $blue-grey;
- }
- }
+ .accordion-title {
+ font-weight: bold;
}
- .link-ideal {
- &.active {
- background: $green-light;
- }
- .check-icon {
- &::before,
- &:after {
- background-color: $green-light;
- }
- }
+ .accordion-desc {
+ color: $grey-bright;
+ }
+ div.expansion-panel-summary {
+ padding: 0px 16px;
}
.loader-container {
min-height: 350px;
@@ -113,6 +40,9 @@
align-items: center;
margin: auto;
}
+ .accordion-icon {
+ color: $blue-grey;
+ }
}
.no-profile {
display: flex;
diff --git a/src/components/Analysis/analysisConsumptionRow.scss b/src/components/Analysis/analysisConsumptionRow.scss
index 2079dd10bcb6a4e410822290a0603ced17ab7d36..5d0171f1f6468965c2e8394e11f0548bbcc808a1 100644
--- a/src/components/Analysis/analysisConsumptionRow.scss
+++ b/src/components/Analysis/analysisConsumptionRow.scss
@@ -33,26 +33,13 @@
background-color: $blue-grey;
}
}
- .ideal-graph {
- color: $green-light;
- .price {
- text-align: right;
- &.not-connected {
- opacity: 0.55;
- }
- }
- .graph {
- background-color: $green-light;
- }
- }
}
.consumption-sep {
border-top: 1px solid $grey-dark;
margin: 1rem 0;
}
.user-graph,
-.average-graph,
-.ideal-graph {
+.average-graph {
display: flex;
justify-content: space-between;
flex-basis: 45%;
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index 16d49aef6359d3918a097e20758d85aa67ff936c..54f3d7438599531f9a22b568f24d9fb5830d0a02 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -10,6 +10,7 @@
display: flex;
flex-direction: column;
align-items: center;
+ flex: 1;
padding: 0 2rem;
margin: 1rem auto;
}
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 349a2f9924fec3dec8d2777bf8b563341a0e70ce..c47420eacd7e593f218a26ec238f703776ae266f 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -1100,7 +1100,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -1126,7 +1126,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -1193,7 +1193,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -1207,8 +1207,8 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
className="profile-navigation-button disabled"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={true}
@@ -1233,13 +1233,13 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1255,7 +1255,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -1265,7 +1265,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1282,7 +1282,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -1300,7 +1300,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/Content/content.scss b/src/components/Content/content.scss
index 5d6b401d1ff8e6d82702c0ee5c0e0b0477e5b565..4d5c7ecbcaad555335d7451b8c774cd05203b4f4 100644
--- a/src/components/Content/content.scss
+++ b/src/components/Content/content.scss
@@ -6,6 +6,9 @@
height: inherit;
margin-top: 116px;
background-color: $default-background;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
@media #{$large-phone} {
margin-top: 0;
height: 100%;
diff --git a/src/components/CustomPopup/CustomPopupModal.test.tsx b/src/components/CustomPopup/CustomPopupModal.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8af7b85987f82d3ba36082e4eb9e7ebb0396929d
--- /dev/null
+++ b/src/components/CustomPopup/CustomPopupModal.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import CustomPopupModal from './CustomPopupModal'
+import {
+ mockCustomPopup,
+ mockCustomPopupOff,
+} from '../../../tests/__mocks__/customPopup.mock'
+import { Button } from '@material-ui/core'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+const mockHandleClose = jest.fn()
+
+describe('CustomPopupModal component', () => {
+ const wrapper = mount(
+ <CustomPopupModal
+ customPopup={mockCustomPopup}
+ handleCloseClick={mockHandleClose}
+ />
+ )
+ it('should render correctly', () => {
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
+
+ it('should close modal', () => {
+ wrapper.find(Button).simulate('click')
+ expect(mockHandleClose).toHaveBeenCalled()
+ })
+
+ it('should not be rendered', () => {
+ const wrapper = mount(
+ <CustomPopupModal
+ customPopup={mockCustomPopupOff}
+ handleCloseClick={mockHandleClose}
+ />
+ )
+ expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
+ })
+})
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f1504a4e65b7c48595e438774933b1f69b730e17
--- /dev/null
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -0,0 +1,71 @@
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
+import Speaker from 'assets/icons/ico/speaker.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { CustomPopup } from 'models/customPopup.model'
+import React from 'react'
+import './customPopupModal.scss'
+
+interface CustomPopupModalProps {
+ customPopup: CustomPopup
+ handleCloseClick: () => void
+}
+
+const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
+ customPopup,
+ handleCloseClick,
+}) => {
+ const { t } = useI18n()
+ return (
+ <Dialog
+ open={customPopup.popupEnabled}
+ disableEscapeKeyDown
+ onClose={(event, reason): void => {
+ event && reason !== 'backdropClick' && handleCloseClick()
+ }}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id="accessibility-title">{customPopup.title}</div>
+ <div id="accessibility-content">{customPopup.description}</div>
+ <IconButton
+ aria-label={t('feedback.accessibility.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
+ <div className="customPopupModal">
+ <StyledIcon icon={Speaker} size={100} className={'warn-icon'} />
+
+ <div className="customPopup-title text-20-bold">
+ {customPopup.title}
+ </div>
+
+ <div className="customPopup-content text-16-normal">
+ {customPopup.description}
+ </div>
+
+ <Button
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-highlight ',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('consumption.partners_issue_modal.ok')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default CustomPopupModal
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..0871899eda032786ddedcbd4f5f8d8d843608212
--- /dev/null
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap
@@ -0,0 +1,1018 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomPopupModal component should render correctly 1`] = `
+<CustomPopupModal
+ customPopup={
+ Object {
+ "description": "Interesting description",
+ "popupEnabled": true,
+ "title": "Bold title",
+ }
+ }
+ handleCloseClick={[MockFunction]}
+>
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ disableEscapeKeyDown={true}
+ onClose={[Function]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ disableEscapeKeyDown={true}
+ onClose={[Function]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={true}
+ onClose={[Function]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <div
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ Bold title
+ </div>
+ <div
+ id="accessibility-content"
+ >
+ Interesting description
+ </div>
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="customPopupModal"
+ >
+ <svg
+ aria-hidden="true"
+ class="warn-icon styles__icon___23x3R"
+ height="100"
+ width="100"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="customPopup-title text-20-bold"
+ >
+ Bold title
+ </div>
+ <div
+ class="customPopup-content text-16-normal"
+ >
+ Interesting description
+ </div>
+ <button
+ class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ consumption.partners_issue_modal.ok
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ Bold title
+ </div>
+ <div
+ id="accessibility-content"
+ >
+ Interesting description
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="feedback.accessibility.button_close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="feedback.accessibility.button_close"
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="feedback.accessibility.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="feedback.accessibility.button_close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="feedback.accessibility.button_close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiIconButton-label"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
+ center={true}
+ >
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
+ <div
+ className="customPopupModal"
+ >
+ <StyledIcon
+ className="warn-icon"
+ icon="test-file-stub"
+ size={100}
+ >
+ <Icon
+ aria-hidden={true}
+ className="warn-icon"
+ icon="test-file-stub"
+ size={100}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="warn-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <svg
+ aria-hidden={true}
+ className="warn-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="customPopup-title text-20-bold"
+ >
+ Bold title
+ </div>
+ <div
+ className="customPopup-content text-16-normal"
+ >
+ Interesting description
+ </div>
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight ",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-highlight ",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btn-highlight MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-highlight MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <button
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ consumption.partners_issue_modal.ok
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+</CustomPopupModal>
+`;
diff --git a/src/components/CustomPopup/customPopupModal.scss b/src/components/CustomPopup/customPopupModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2646579c3519bf12eeb3e39d0816467cf14a2a3d
--- /dev/null
+++ b/src/components/CustomPopup/customPopupModal.scss
@@ -0,0 +1,29 @@
+@import '../../styles/base/typo-variables';
+@import '../../styles/base/color';
+
+.customPopupModal {
+ padding: 1rem;
+ max-width: 20rem;
+ .warn-icon {
+ margin: 1rem auto;
+ display: block;
+ }
+ .customPopup-title {
+ text-align: center;
+ color: $gold-shadow;
+ margin: 1rem auto;
+ }
+ .customPopup-content {
+ text-align: center;
+ color: $grey-bright;
+ }
+
+ button.btn-highlight {
+ padding: 0.65rem;
+ }
+}
+
+#accessibility-title,
+#accessibility-content {
+ display: none;
+}
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index e4159159d59f8551d5711d9a52186e5022644fa8..a08a4156645b4c4ccfa291c711dcb5b4602a0e3b 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -317,7 +317,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -343,7 +343,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -410,7 +410,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -424,8 +424,8 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={false}
@@ -450,13 +450,13 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -472,7 +472,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
component="button"
disabled={false}
focusRipple={true}
@@ -482,7 +482,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
classes={
Object {
"disabled": "Mui-disabled",
@@ -499,7 +499,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -517,7 +517,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index e68886b80ccfeafb97303f9ec5c9d7c37560d210..93eafddb3cce92ff89963b43662aca1aa14e3555 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -92,7 +92,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -118,7 +118,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -185,7 +185,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -199,8 +199,8 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
className="profile-navigation-button disabled"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={true}
@@ -225,13 +225,13 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -247,7 +247,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -257,7 +257,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -274,7 +274,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -292,7 +292,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index 3caf0d88608e85810999a00c625118971598c111..70dd31dc953e82bf248058ae95601460c421e3ee 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -103,7 +103,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
className="profile-navigation-button"
classes={
Object {
- "label": "text-16-normal",
+ "label": "text-16-bold",
"root": "btn-profile-back",
}
}
@@ -129,7 +129,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
@@ -196,7 +196,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
< profile_type.form.button_previous
</span>
@@ -210,8 +210,8 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
className="profile-navigation-button disabled"
classes={
Object {
- "label": "text-16-normal",
- "root": "btn-profile-next rounded",
+ "label": "text-16-bold",
+ "root": "btn-profile-next",
}
}
disabled={true}
@@ -236,13 +236,13 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label text-16-bold",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root btn-profile-next",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -258,7 +258,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -268,7 +268,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -285,7 +285,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -303,7 +303,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label text-16-bold"
>
profile_type.form.button_next >
</span>
diff --git a/src/components/FormGlobal/FormNavigation.tsx b/src/components/FormGlobal/FormNavigation.tsx
index 62dc25ad9e7f7473ffaeb76e84817d1a3aed42de..085b6984ec69c9908f6f82ca76bc0da2a67e35a6 100644
--- a/src/components/FormGlobal/FormNavigation.tsx
+++ b/src/components/FormGlobal/FormNavigation.tsx
@@ -47,7 +47,7 @@ const FormNavigation: React.FC<FormNavigationProps> = ({
disabled={step === ProfileTypeStepForm.HOUSING_TYPE}
classes={{
root: 'btn-profile-back',
- label: 'text-16-normal',
+ label: 'text-16-bold',
}}
>
{`< ${t('profile_type.form.button_previous')}`}
@@ -65,8 +65,8 @@ const FormNavigation: React.FC<FormNavigationProps> = ({
})}
disabled={disableNextButton}
classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-normal',
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
}}
>
{step === ProfileTypeStepForm.UPDATE_DATE ||
diff --git a/src/components/FormGlobal/formNavigation.scss b/src/components/FormGlobal/formNavigation.scss
index 4ed172750c30ded9c551d1966535cc19ea7894c2..d3eca1a9e80d90ee26fc517a3c3951038981a41c 100644
--- a/src/components/FormGlobal/formNavigation.scss
+++ b/src/components/FormGlobal/formNavigation.scss
@@ -4,30 +4,23 @@
.profile-navigation {
border-top: 1px solid $grey-dark;
background: $dark-2;
- position: fixed;
- bottom: 0;
- height: 6.5rem;
- width: 100%;
display: flex;
justify-content: center;
- align-items: flex-start;
- padding: 0 0 env(safe-area-inset-bottom) 0;
- left: 0;
+ align-items: center;
+ gap: 1.5rem;
+ padding: 1rem;
+
@media (min-width: $width-tablet) {
background: $dark-light-2;
height: 3rem;
}
- .rounded {
- border-radius: 22px;
- margin-left: 1rem;
- margin-right: 1rem;
- }
+
.disabled {
opacity: 0.5;
}
button.profile-navigation-button {
max-width: 12.5rem;
- margin: 0.375rem 1rem;
+ margin: 0;
padding: 0.5rem 1rem;
}
}
diff --git a/src/components/GCU/GCULink.tsx b/src/components/GCU/GCULink.tsx
index 2ae3e642845ab2ab2f853c9477519c31f3f7e9d8..d3bdd037f4985be8786cc229f8117744d67e7288 100644
--- a/src/components/GCU/GCULink.tsx
+++ b/src/components/GCU/GCULink.tsx
@@ -11,15 +11,12 @@ const GCULink: React.FC = () => {
return (
<div className="gcu-link-root">
<div className="gcu-link-content">
- <div className="gcu-link-header text-16-normal-uppercase">
- {t('gcu_option.title')}
- </div>
<Link
className="gcu-link-card-link"
component={RouterLink}
to="options/gcu"
>
- <div className="card">
+ <div className="card optionCard">
<div className="gcu-link-card">
<div className="gcu-link-card-content">
<StyledIcon
@@ -28,7 +25,7 @@ const GCULink: React.FC = () => {
size={42}
/>
<div className="gcu-link-card-content-title">
- {t('gcu_option.read_gcu')}
+ {t('gcu_option.title')}
</div>
</div>
</div>
diff --git a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
index 0723f105cc5aaf29e6d48b123cabc995fb9f0483..da5e1b8ff218650aaa87b7e74b76df94ceeaf5cc 100644
--- a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`LegalNoticeLink component should be rendered correctly 1`] = `
to="options/legalnotice"
>
<div
- className="card"
+ className="card optionCard"
onClick={[Function]}
>
<div
diff --git a/src/components/GCU/gcuLink.scss b/src/components/GCU/gcuLink.scss
index b7545dd98ecfd6a257b712c512e5ec91e04f5ac4..42e9c1500da97f3a40f4cfe27d61c6d834fe42c4 100644
--- a/src/components/GCU/gcuLink.scss
+++ b/src/components/GCU/gcuLink.scss
@@ -7,8 +7,7 @@
align-items: center;
justify-content: center;
color: $white;
- padding: 1rem 1.5rem 0;
- margin-top: 1rem;
+ padding: 0 1.5rem 0;
.gcu-link-header {
margin-bottom: 1.25rem;
}
@@ -39,6 +38,9 @@
}
}
}
+.optionCard {
+ padding: 0.938rem 1rem;
+}
.gcu-link-card-link {
color: black;
}
diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx
index 99ff6a0d2275bab61c87ec15a963e64c3b249ff6..839e1eb6652327f4501e7b3d9144414752d0315f 100644
--- a/src/components/Home/ConsumptionView.spec.tsx
+++ b/src/components/Home/ConsumptionView.spec.tsx
@@ -14,6 +14,10 @@ import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import ConsumptionView from './ConsumptionView'
import { FluidStatus } from 'models'
import { mockTestProfile1 } from '../../../tests/__mocks__/profileType.mock'
+import {
+ mockCustomPopup,
+ mockCustomPopupOff,
+} from '../../../tests/__mocks__/customPopup.mock'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -49,6 +53,7 @@ jest.mock(
'components/PartnersIssue/PartnersIssueModal',
() => 'mock-partnersissuemodal'
)
+jest.mock('components/CustomPopup/CustomPopupModal', () => 'mock-custompopup')
jest.mock(
'components/Connection/ExpiredConsentModal',
() => 'mock-expiredconsentmodal'
@@ -76,7 +81,6 @@ describe('ConsumptionView component', () => {
loading: false,
fluidStatus: mockFluidStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: false,
})
const wrapper = mount(
<Provider store={store}>
@@ -100,7 +104,6 @@ describe('ConsumptionView component', () => {
loading: true,
fluidStatus: mockFluidStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: false,
})
const wrapper = mount(
<Provider store={store}>
@@ -119,7 +122,6 @@ describe('ConsumptionView component', () => {
loading: true,
fluidStatus: mockInitialEcolyoState.global.fluidStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: false,
})
mount(
<Provider store={store}>
@@ -136,7 +138,6 @@ describe('ConsumptionView component', () => {
loading: true,
fluidStatus: mockInitialEcolyoState.global.fluidStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: false,
})
const wrapper = mount(
<Provider store={store}>
@@ -150,13 +151,11 @@ describe('ConsumptionView component', () => {
const updatedStatus: FluidStatus[] =
mockInitialEcolyoState.global.fluidStatus
updatedStatus[1].status = FluidState.DONE
-
useSelectorSpy.mockReturnValue({
currentTimeStep: TimeStep.WEEK,
loading: true,
fluidStatus: updatedStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: false,
})
const wrapper = mount(
<Provider store={store}>
@@ -175,7 +174,6 @@ describe('ConsumptionView component', () => {
loading: true,
fluidStatus: updatedStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: false,
})
const wrapper = mount(
<Provider store={store}>
@@ -185,7 +183,7 @@ describe('ConsumptionView component', () => {
expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy()
expect(wrapper.find('mock-consumptiondetails').exists()).toBeTruthy()
})
- it('should show partner issue Modal', async () => {
+ it('should render partner issue Modal', async () => {
const updatedStatus: FluidStatus[] =
mockInitialEcolyoState.global.fluidStatus
updatedStatus[0] = mockExpiredElec
@@ -194,7 +192,6 @@ describe('ConsumptionView component', () => {
loading: true,
fluidStatus: updatedStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: true,
})
useDispatchSpy.mockReturnValue(jest.fn())
mockUpdateProfile.mockResolvedValue(mockTestProfile1)
@@ -205,6 +202,25 @@ describe('ConsumptionView component', () => {
)
expect(wrapper.find('mock-partnersissuemodal').exists()).toBeTruthy()
})
+ it('should render customPopup Modal', async () => {
+ const updatedStatus: FluidStatus[] =
+ mockInitialEcolyoState.global.fluidStatus
+ updatedStatus[0] = mockExpiredElec
+ useSelectorSpy.mockReturnValue({
+ currentTimeStep: TimeStep.WEEK,
+ loading: true,
+ fluidStatus: updatedStatus,
+ releaseNotes: mockInitialEcolyoState.global.releaseNotes,
+ })
+ useDispatchSpy.mockReturnValue(jest.fn())
+ mockUpdateProfile.mockResolvedValue(mockTestProfile1)
+ const wrapper = mount(
+ <Provider store={store}>
+ <ConsumptionView fluidType={FluidType.ELECTRICITY} />
+ </Provider>
+ )
+ expect(wrapper.find('mock-custompopup').exists()).toBeTruthy()
+ })
it('should show expired modal when a fluid oauth is expired', () => {
const updatedStatus: FluidStatus[] =
mockInitialEcolyoState.global.fluidStatus
@@ -214,7 +230,6 @@ describe('ConsumptionView component', () => {
loading: true,
fluidStatus: updatedStatus,
releaseNotes: mockInitialEcolyoState.global.releaseNotes,
- openPartnersIssueModal: false,
})
useDispatchSpy.mockReturnValue(jest.fn())
const wrapper = mount(
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index f5a76f6c10db82b91a59591b26b3389dee8a5b8d..fc398862ab245bea80a494caa8d70fb49140a8ff 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -17,14 +17,23 @@ import FluidButtons from 'components/Home/FluidButtons'
import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
import classNames from 'classnames'
-import { getKonnectorUpdateError, isKonnectorActive } from 'utils/utils'
+import {
+ getKonnectorUpdateError,
+ getTodayDate,
+ isKonnectorActive,
+} from 'utils/utils'
import ReleaseNotesModal from './releaseNotesModal'
-import { setPartnersIssue, showReleaseNotes } from 'store/global/global.actions'
+import {
+ setCustomPopup,
+ setPartnersIssue,
+ showReleaseNotes,
+} from 'store/global/global.actions'
import PartnersIssueModal from 'components/PartnersIssue/PartnersIssueModal'
import ProfileService from 'services/profile.service'
import { useClient } from 'cozy-client'
import { DateTime } from 'luxon'
import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal'
+import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
interface ConsumptionViewProps {
fluidType: FluidType
@@ -38,9 +47,12 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
const { currentTimeStep, loading } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
- const { fluidStatus, releaseNotes, openPartnersIssueModal } = useSelector(
- (state: AppStore) => state.ecolyo.global
- )
+ const {
+ fluidStatus,
+ releaseNotes,
+ customPopupModal,
+ openPartnersIssueModal,
+ } = useSelector((state: AppStore) => state.ecolyo.global)
const [isFluidKonnected, setIsFluidKonnected] = useState<boolean>(false)
const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>(
@@ -78,17 +90,28 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
const handleCloseModal = useCallback(async () => {
const profileService = new ProfileService(client)
const updatedProfile = await profileService.updateProfile({
- partnersIssueDate: DateTime.local()
- .setZone('utc', {
- keepLocalTime: true,
- })
- .startOf('day'),
+ partnersIssueDate: getTodayDate(),
})
if (updatedProfile) {
dispatch(setPartnersIssue(false))
}
}, [client, dispatch])
+ const handleCloseCustomPopupModal = async () => {
+ const profileService = new ProfileService(client)
+ const updatedProfile = await profileService.updateProfile({
+ customPopupDate: getTodayDate(),
+ })
+ if (updatedProfile) {
+ dispatch(
+ setCustomPopup({
+ ...customPopupModal,
+ popupEnabled: false,
+ })
+ )
+ }
+ }
+
useEffect(() => {
setIsFluidKonnected(isKonnectorActive(fluidStatus, fluidType))
if (
@@ -193,6 +216,10 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidStatus={fluidStatus}
handleCloseClick={handleCloseModal}
/>
+ <CustomPopupModal
+ customPopup={customPopupModal}
+ handleCloseClick={handleCloseCustomPopupModal}
+ />
{consentExpiredFluids.length &&
consentExpiredFluids.map(fluid => {
return (
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 73b94b5049e94a4a388e09643b18dffdeac96ce1..73473e27e531c9bf0d63721fd4469fb31b939878 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -501,7 +501,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus.fluidType
].toLowerCase()}`
)}
- expandIcon={<Icon icon={chevronDown} size={16} />}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
diff --git a/src/components/LegalNotice/LegalNoticeLink.tsx b/src/components/LegalNotice/LegalNoticeLink.tsx
index 06e3ad554cbe966ffe9837e4eb6b7a66c8f6b6c6..d787f0f87ab10fab63b2e1b38e30c566121578c4 100644
--- a/src/components/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.tsx
@@ -29,7 +29,7 @@ const LegalNoticeLink: React.FC = () => {
component={RouterLink}
to="options/legalnotice"
>
- <div className="card" onClick={emitNavEvent}>
+ <div className="card optionCard" onClick={emitNavEvent}>
<div className="legal-notice-card">
<div className="legal-notice-card-content">
<StyledIcon
diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index 06fbb1b9c3ac92f421eb1a7a724c649795acdefe..7a39bbb71ebbb419d51b357898ae570d3e1624a9 100644
--- a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -7,11 +7,6 @@ exports[`GCULink component should be rendered correctly 1`] = `
<div
className="gcu-link-content"
>
- <div
- className="gcu-link-header text-16-normal-uppercase"
- >
- gcu_option.title
- </div>
<WithStyles(ForwardRef(Link))
className="gcu-link-card-link"
component={
@@ -31,7 +26,7 @@ exports[`GCULink component should be rendered correctly 1`] = `
to="options/gcu"
>
<div
- className="card"
+ className="card optionCard"
>
<div
className="gcu-link-card"
@@ -47,7 +42,7 @@ exports[`GCULink component should be rendered correctly 1`] = `
<div
className="gcu-link-card-content-title"
>
- gcu_option.read_gcu
+ gcu_option.title
</div>
</div>
</div>
diff --git a/src/components/LegalNotice/legalNoticeLink.scss b/src/components/LegalNotice/legalNoticeLink.scss
index 402a22fc23d7dd52321ea2a21ae2de308b2350a2..21067f1035d1ed0140d7af4c033553c179127b45 100644
--- a/src/components/LegalNotice/legalNoticeLink.scss
+++ b/src/components/LegalNotice/legalNoticeLink.scss
@@ -9,9 +9,10 @@
justify-content: center;
color: $white;
padding: 1rem 1.5rem 0;
- margin-top: 1rem;
+ margin-top: 2rem;
.legal-notice-header {
margin-bottom: 1.25rem;
+ color: $grey-bright;
}
.legal-notice-content {
max-width: 45.75rem;
diff --git a/src/components/Options/HelpLink.scss b/src/components/Options/HelpLink.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7046efa09ce216c0661785197782cec52cdf6ea4
--- /dev/null
+++ b/src/components/Options/HelpLink.scss
@@ -0,0 +1,51 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.help-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem;
+ .help-content {
+ margin-bottom: -1rem;
+ width: 45.75rem;
+ a {
+ color: $white;
+ text-decoration: none;
+ }
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .help-header {
+ margin-top: 1.5rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
+ }
+ }
+}
+
+.help-card-link {
+ color: $white;
+}
+.help-card {
+ display: flex;
+ flex-direction: row;
+ margin: -0.75rem 0;
+ width: 100%;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .help-card-content {
+ display: flex;
+ flex-direction: row;
+ .help-card-content-icon {
+ margin: 0.5rem 0;
+ }
+ .help-card-content-title {
+ margin: 0 1rem;
+ align-self: center;
+ text-decoration: none;
+ }
+ }
+}
diff --git a/src/components/Options/HelpLink.tsx b/src/components/Options/HelpLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..495bea2f8af87ee3fc63b73b312427403673d465
--- /dev/null
+++ b/src/components/Options/HelpLink.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import './HelpLink.scss'
+import Link from '@material-ui/core/Link'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import QuestionMarkIcon from 'assets/icons/ico/question-mark.svg'
+
+const HelpLink: React.FC = () => {
+ const { t } = useI18n()
+ return (
+ <div className="help-root">
+ <div className="help-content">
+ <div className="help-header text-16-normal-uppercase">
+ {t('help.title_help')}
+ </div>
+ <Link className="help-card-link">
+ <div className="card optionCard">
+ <div className="help-card">
+ <div className="help-card-content">
+ <StyledIcon
+ className="help-card-content-icon"
+ icon={QuestionMarkIcon}
+ size={42}
+ />
+ <div className="help-card-content-title">
+ {t('help.read_help')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default HelpLink
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 6d757880660925c68a700276234f36339ca771eb..a8e7ea2486a7bfd401247703c0a73e75700265a9 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -4,7 +4,7 @@ import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import ExportOptions from 'components/Options/exportOptions'
import ReportOptions from 'components/Options/ReportOptions'
-import FAQLink from 'components/FAQ/FAQLink'
+import HelpLink from './HelpLink'
import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
import GCULink from 'components/GCU/GCULink'
import Version from 'components/Version/Version'
@@ -29,7 +29,7 @@ const OptionsView: React.FC = () => {
<ProfileTypeOptions />
<ExportOptions />
<ReportOptions />
- <FAQLink />
+ <HelpLink />
<LegalNoticeLink />
<GCULink />
<MatomoOptOut />
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 3959c2c124e6b67b3760b2b0611c10df36346dbe..c22a535b6a7b3c25419a46f28ef8f9a4fd0f7f3f 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -63,7 +63,9 @@ const ProfileTypeOptions: React.FC = () => {
aria-label={t(
'profile_type.accessibility.button_toggle_detail_profile'
)}
- expandIcon={<Icon icon={chevronDown} size={16} />}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
@@ -239,7 +241,7 @@ const ProfileTypeOptions: React.FC = () => {
)}
{profile.isProfileTypeCompleted === false && (
<StyledCard onClick={goToForm} className="profile-link">
- <StyledIcon className="profile-icon" icon={profileIcon} size={50} />
+ <StyledIcon className="profile-icon" icon={profileIcon} size={42} />
<span className="link-label text-16-normal">
{t('profile_type.read_profile')}
</span>
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index 0a5778ad3741afaf1cd7afc9c7aff452e0e1e061..04a5d172ef22a84b3bdf3855b2fa9874cb736d49 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -166,7 +166,7 @@ const ReportOptions: React.FC = () => {
<div className="alert-input-subtext">
{t('profile.report.input_label_subtext_alert')}
{Math.round(maxDayData.value)}
- {' L)'}
+ {' L'}
</div>
)}
</div>
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 8889596f229dbeef4341f3f654f6cb9502b91401..1fcb358c2fd2fdfedf95ab7a6e2f06504c83460f 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
<ProfileTypeOptions />
<ExportOptions />
<ReportOptions />
- <FAQLink />
+ <HelpLink />
<LegalNoticeLink />
<GCULink />
<MatomoOptOut />
diff --git a/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap b/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
index eef4c6b133b447691229c8fad44c5d2d4d95784a..aa4c3579151d165dc4d3cd7204c80e86598c680c 100644
--- a/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
@@ -82,6 +82,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
}
expandIcon={
<Icon
+ className="accordion-icon"
icon="test-file-stub"
size={16}
spin={false}
@@ -104,6 +105,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
}
expandIcon={
<Icon
+ className="accordion-icon"
icon="test-file-stub"
size={16}
spin={false}
@@ -270,18 +272,19 @@ exports[`exportOptions component should be rendered correctly 1`] = `
className="MuiIconButton-label"
>
<Icon
+ className="accordion-icon"
icon="test-file-stub"
size={16}
spin={false}
>
<Component
- className="styles__icon___23x3R"
+ className="accordion-icon styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
>
<svg
- className="styles__icon___23x3R"
+ className="accordion-icon styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
diff --git a/src/components/Options/exportOptions.scss b/src/components/Options/exportOptions.scss
index cd552f4159660e8524de2ed84e6783c5495ca25f..9c291d0a334df0e1ac6df0087ff47f4cc97a6109 100644
--- a/src/components/Options/exportOptions.scss
+++ b/src/components/Options/exportOptions.scss
@@ -16,8 +16,11 @@ div.expansion-panel-root.Mui-expanded:last-child {
@media #{$large-phone} {
width: 100%;
}
+ .MuiAccordionSummary-content {
+ margin: 0;
+ }
.accordion-title {
- padding-left: 0.7rem;
+ padding-left: 1rem;
}
.expansion-panel-details {
flex-direction: column;
@@ -57,4 +60,7 @@ div.expansion-panel-root.Mui-expanded:last-child {
left: 4px;
}
}
+ div.expansion-panel-summary {
+ padding: 0 1.2rem;
+ }
}
diff --git a/src/components/Options/exportOptions.tsx b/src/components/Options/exportOptions.tsx
index 77daa36271557f62eb7f4532564a9d835f338f94..1c4936eb676f26b07f42f8b7ca41ff6b78dcd65b 100644
--- a/src/components/Options/exportOptions.tsx
+++ b/src/components/Options/exportOptions.tsx
@@ -125,7 +125,9 @@ const ExportOptions: React.FC = () => {
>
<AccordionSummary
aria-label={t('profile_type.accessibility.button_toggle_export')}
- expandIcon={<Icon icon={chevronDown} size={16} />}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
diff --git a/src/components/Options/matomoOptOut.scss b/src/components/Options/matomoOptOut.scss
index 184e9e44e3ae351ae99a80537907fc0d187336bc..830a9fb804007b926142b5da14febf8facf8cca5 100644
--- a/src/components/Options/matomoOptOut.scss
+++ b/src/components/Options/matomoOptOut.scss
@@ -8,7 +8,7 @@
align-items: center;
justify-content: center;
padding: 0 1.5rem;
- margin: 1rem 0;
+ margin: 2rem 0;
.matomo-opt-out {
margin: 0 auto;
diff --git a/src/components/Options/profileTypeOptions.scss b/src/components/Options/profileTypeOptions.scss
index d0cb8f934d1926cedafc918bd49ed13937a87532..9781a99617dfbd29a014ce4f7bd323dcf6b1789e 100644
--- a/src/components/Options/profileTypeOptions.scss
+++ b/src/components/Options/profileTypeOptions.scss
@@ -2,7 +2,7 @@
@import 'src/styles/base/breakpoint';
.profile-type-root {
- margin-top: 1.75rem;
+ margin-top: 2rem;
padding: 0 1.5rem;
.profile-type-content {
margin: 0 auto;
@@ -10,6 +10,10 @@
@media (min-width: $width-large-phone) {
width: 45.75rem;
}
+ .MuiButtonBase-root {
+ height: 4rem;
+ margin: 0 -6px 0 0;
+ }
}
.value {
color: $white;
@@ -50,7 +54,7 @@
width: 100%;
}
.profile-title {
- padding-left: 0.5rem;
+ padding-left: 1rem;
}
button.profile-link {
@@ -70,4 +74,10 @@
}
}
}
+ div.expansion-panel-summary {
+ padding: 0 1.2rem;
+ }
+ .MuiCardContent-root {
+ padding: 0 1rem !important;
+ }
}
diff --git a/src/components/PartnersIssue/PartnersIssueModal.spec.tsx b/src/components/PartnersIssue/PartnersIssueModal.spec.tsx
index ec3e9bd9884670f2df2830a6d0289208e6d35cbd..8d04d89bd6f5524332a6623d6d7c1f0ae6e9e02a 100644
--- a/src/components/PartnersIssue/PartnersIssueModal.spec.tsx
+++ b/src/components/PartnersIssue/PartnersIssueModal.spec.tsx
@@ -20,10 +20,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
const mockStore = configureStore([])
const mockHandleClose = jest.fn()
describe('PartnersIssueModal component', () => {
+ const store = mockStore({
+ ecolyo: mockInitialEcolyoState,
+ })
it('should render correctly', () => {
- const store = mockStore({
- ecolyo: mockInitialEcolyoState,
- })
const wrapper = mount(
<Provider store={store}>
<PartnersIssueModal
@@ -35,10 +35,7 @@ describe('PartnersIssueModal component', () => {
)
expect(toJson(wrapper)).toMatchSnapshot()
})
- it('should close modal correctly', () => {
- const store = mockStore({
- ecolyo: mockInitialEcolyoState,
- })
+ it('should close modal', () => {
const wrapper = mount(
<Provider store={store}>
<PartnersIssueModal
@@ -51,4 +48,17 @@ describe('PartnersIssueModal component', () => {
wrapper.find(Button).simulate('click')
expect(mockHandleClose).toHaveBeenCalled()
})
+
+ it('should not be rendered', () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <PartnersIssueModal
+ open={false}
+ handleCloseClick={mockHandleClose}
+ fluidStatus={mockInitialEcolyoState.global.fluidStatus}
+ />
+ </Provider>
+ )
+ expect(wrapper.find('div.partnersIssueModal').exists()).toBeFalsy()
+ })
})
diff --git a/src/components/PartnersIssue/PartnersIssueModal.tsx b/src/components/PartnersIssue/PartnersIssueModal.tsx
index e29c89b237f9032dea5b87be941e523c11cf53f2..d79afb180370335afd8d90884454f3377203edd9 100644
--- a/src/components/PartnersIssue/PartnersIssueModal.tsx
+++ b/src/components/PartnersIssue/PartnersIssueModal.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from 'react'
-import './partnersIssueModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidState } from 'enum/fluid.enum'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
import { FluidStatus } from 'models'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from 'assets/icons/ico/close.svg'
+import React, { useEffect, useState } from 'react'
+import './partnersIssueModal.scss'
interface PartnersIssueModalProps {
open: boolean
@@ -43,6 +43,7 @@ const PartnersIssueModal: React.FC<PartnersIssueModalProps> = ({
root: 'modal-root',
paper: 'modal-paper',
}}
+ style={{ zIndex: 1500 }}
>
<div id={'accessibility-title'}>
{t('feedback.accessibility.window_title')}
diff --git a/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap b/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap
index 34b0a12811a6dd85b4f9704552f139c334371c06..78f3938af3847753a705996f3986ebf8e17bc63c 100644
--- a/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap
+++ b/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap
@@ -95,6 +95,11 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
disableEscapeKeyDown={true}
onClose={[Function]}
open={true}
+ style={
+ Object {
+ "zIndex": 1500,
+ }
+ }
>
<ForwardRef(Dialog)
aria-labelledby="accessibility-title"
@@ -120,6 +125,11 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
disableEscapeKeyDown={true}
onClose={[Function]}
open={true}
+ style={
+ Object {
+ "zIndex": 1500,
+ }
+ }
>
<ForwardRef(Modal)
BackdropComponent={
@@ -450,6 +460,11 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
disableEscapeKeyDown={true}
onClose={[Function]}
open={true}
+ style={
+ Object {
+ "zIndex": 1500,
+ }
+ }
>
<ForwardRef(Portal)
disablePortal={false}
@@ -462,7 +477,7 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
<div
class="MuiDialog-root modal-root"
role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ style="position: fixed; z-index: 1500; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
<div
aria-hidden="true"
@@ -577,7 +592,7 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
"position": "fixed",
"right": 0,
"top": 0,
- "zIndex": 1300,
+ "zIndex": 1500,
}
}
>
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index e24cda70ddb652d8d0f1e2b7c8419963468707f6..f6729209fca0abd76af27a1ae605fc828411bf62 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -5,11 +5,7 @@
.profile-form-container {
color: $white;
margin: 1rem 1rem 3.5rem;
- width: 100%;
max-width: 53rem;
- @media (min-width: $width-tablet) {
- margin: 1rem 1rem 0;
- }
.text,
.number {
font-size: 1.25rem;
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index 2723a89e3945cc5f2635e16e5a98ec3422ca0d39..188ab4423bbac201cf5203883e34fc1492598800 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -1,9 +1,10 @@
.profile-type-container {
position: relative;
- height: 100%;
min-height: inherit;
display: flex;
- justify-content: center;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-between;
label,
input {
cursor: pointer;
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index b15bc34157d07f919829e5f6c4529df0fc5cee88..3ea8034eead93d39dd94aff726fd9149ab4e0f6b 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -14,6 +14,7 @@ import {
updateTermValidation,
showReleaseNotes,
setPartnersIssue,
+ setCustomPopup,
} from 'store/global/global.actions'
import {
ProfileActionTypes,
@@ -60,6 +61,8 @@ import { InitSteps, InitStepsErrors } from 'models/initialisationSteps.model'
import log from 'utils/logger'
import SplashScreen from './SplashScreen'
import SplashScreenError from './SplashScreenError'
+import CustomPupopService from 'services/customPopup.service'
+import { getTodayDate } from 'utils/utils'
interface SplashRootProps {
fadeTimer?: number
@@ -111,6 +114,7 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
setinitStepErrors
)
const partnersInfoService = new PartnersInfoService(client)
+ const customPopupService = new CustomPupopService(client)
const ms = new MigrationService(client, setinitStepErrors)
try {
const migrationsResult: ReleaseNotes = await ms.runMigrations(
@@ -255,18 +259,18 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
})
}
+ const today = getTodayDate().toISO()
+
+ // Check customPopup from backoffice
+ const customModalInfo = await customPopupService.getCustomPopup()
+ if (customModalInfo && today !== profile?.customPopupDate.toISO()) {
+ dispatch(setCustomPopup(customModalInfo))
+ }
+
// Check partnersInfo from backoffice
const partnersInfo: PartnersInfo | undefined =
await partnersInfoService.getPartnersInfo()
- // Get last partnersIssueDate
- const today = DateTime.local()
- .setZone('utc', {
- keepLocalTime: true,
- })
- .startOf('day')
- .toISO()
-
// If notification is activated and konnector is connected, set FluidStatus to PARTNER_ISSUE
if (partnersInfo && partnersInfo.notification_activated) {
const fluidService = new FluidService(client)
diff --git a/src/locales/fr.json b/src/locales/fr.json
index d12000478ec823eb95a12a3ab1736ea1755ad54e..13670e21d13d83b86833cdaed908c6748c797fdf 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -80,7 +80,7 @@
"challenge": "Défis terminés en",
"user_consumption": "Votre conso",
"average_home": "Conso moyenne d'un profil similaire",
- "ideal_home": "Conso idéale pour votre profil",
+ "average_home_description": "Le comparatif ici présenté est calculé sur la base d'un profil similaire au vôtre. Il s'agit d'un calcul et non d'une comparaison avec les autres utilisateurs de l'application. Sont pris en compte l'ensemble des informations entrées dans votre profil\u00a0: mode de chauffage, âge du logement et éventuels travaux de rénovation, etc. Ce modèle a été créé avec l'Agence Locale de l'Energie sur la base de chiffres issues du Schéma Directeur des Energies de la Métropole de Lyon et de Chiffres-clé publiés par l'ADEME (l'Agence de l'Environnement et de la Maîtrise de l'Energie).",
"approximative_description": "Pour comparer votre consommation avec un foyer similaire ou avec une conso idéale, veuillez détailler votre profil",
"not_connected": "Non connecté",
"no_data_2": "Données non disponibles",
@@ -281,7 +281,8 @@
"title": "Un problème dans la récupération de vos données",
"text_1": "Ces partenaires nous indiquent qu’ils subissent en ce moment un soucis technique\u00a0:",
"text_2": "La visualisation de vos consommations peut s’en trouver affectée.",
- "button_validate": "J'ai compris"
+ "button_validate": "J'ai compris",
+ "ok": "Ok"
}
},
"consumption_details": {
@@ -573,6 +574,10 @@
"button_toggle_detail": "Afficher ou masquer le détail de la question"
}
},
+ "help": {
+ "title_help": "Besoin d'aide ?",
+ "read_help": "Accéder au Service d'Assistance Utilisateur"
+ },
"feedback": {
"title": "Partagez-nous vos retours",
"type": "Motif du retour :",
@@ -810,7 +815,7 @@
},
"legal": {
"read_legal": "Lire les mentions légales",
- "title_legal": "Mentions légales",
+ "title_legal": "Mentions légales & CGU",
"version": "V3.0 du 27.06.2022",
"site": "Site du service Ecolyo : <a href=\"https://ecolyo.com/\"> https://ecolyo.com/</a>",
"adress": "Métropole de Lyon - 20, rue du Lac – CS 33569 - 69505 Lyon cedex 03",
@@ -964,11 +969,11 @@
"profile": {
"report": {
"title_alert": "Alerte fuite d'eau",
- "title_bilan": "Bilan et conseils",
+ "title_bilan": "Notification par mail",
"switch_label_bilan": "Je reçois la lettre mensuelle contenant un bilan et des conseils sur ma consommation.",
"switch_label_alert": "Être prévenu d’un dépassement anormal de ma consommation d’eau",
"input_label_alert": "Si ma consommation d’eau quotidienne dépasse :",
- "input_label_subtext_alert": "(Votre consommation quotidienne maximum sur les 6 derniers mois\u00a0: ",
+ "input_label_subtext_alert": "Votre consommation quotidienne maximum sur les 6 derniers mois\u00a0: ",
"activate": "Activer",
"deactivate": "Désactiver"
},
@@ -1153,6 +1158,7 @@
"button_update_profile": "Ouvrir la page de mise à jour du profil",
"button_toggle_detail_profile": "Afficher ou masquer le détail du profil",
"button_toggle_export": "Afficher ou masquer l'export des données'",
+ "button_toggle_average_home": "Afficher ou masquer les informations sur le comparatif'",
"button_validate": "Valider"
}
},
diff --git a/src/models/customPopup.model.ts b/src/models/customPopup.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2d9784562a9fd1764a50290693e0ce2026bbe51d
--- /dev/null
+++ b/src/models/customPopup.model.ts
@@ -0,0 +1,5 @@
+export interface CustomPopup {
+ popupEnabled: boolean
+ description: string
+ title: string
+}
diff --git a/src/models/global.model.ts b/src/models/global.model.ts
index 71d5bb8dd1935886b3083824457374b47ffbaa61..4fef5e1e9e6743aa2650c297b0da25ce1d6e47ca 100644
--- a/src/models/global.model.ts
+++ b/src/models/global.model.ts
@@ -1,6 +1,7 @@
import { FluidType } from 'enum/fluid.enum'
import { ScreenType } from 'enum/screen.enum'
import { TermsStatus } from 'models'
+import { CustomPopup } from './customPopup.model'
import { FluidStatus } from './fluid.model'
import { ReleaseNotes } from './releaseNotes.model'
import { SgeStore } from './sgeStore.model'
@@ -15,6 +16,7 @@ export interface GlobalState {
termsStatus: TermsStatus
fluidStatus: FluidStatus[]
fluidTypes: FluidType[]
+ customPopupModal: CustomPopup
openPartnersIssueModal: boolean
shouldRefreshConsent: boolean
sgeConnect: SgeStore
diff --git a/src/models/profile.model.ts b/src/models/profile.model.ts
index 0a4b3e71219df3f233a5c2e7402a63e7e9f94d7f..8478e1b66d91beaa0375949e09b4deb3e277445a 100644
--- a/src/models/profile.model.ts
+++ b/src/models/profile.model.ts
@@ -25,6 +25,7 @@ export interface ProfileEntity {
partnersIssueDate: string
haveSeenEcogestureModal: boolean
activateHalfHourDate: string
+ customPopupDate: string
_id?: string
_rev?: string
}
@@ -36,9 +37,11 @@ export interface Profile
| 'monthlyAnalysisDate'
| 'partnersIssueDate'
| 'activateHalfHourDate'
+ | 'customPopupDate'
> {
lastConnectionDate: DateTime
monthlyAnalysisDate: DateTime
partnersIssueDate: DateTime
+ customPopupDate: DateTime
activateHalfHourDate: DateTime
}
diff --git a/src/services/consumptionFormatter.service.spec.ts b/src/services/consumptionFormatter.service.spec.ts
index 293661219a71c39b02c1b53d47e5f37392e2cc40..fd43404f4dee9a2ca8057d7a413ccb71854b1509 100644
--- a/src/services/consumptionFormatter.service.spec.ts
+++ b/src/services/consumptionFormatter.service.spec.ts
@@ -309,7 +309,7 @@ describe('ConsumptionFormatter service', () => {
)
expect(result).toEqual(expectedResult)
})
- it('sould return EMPTY state because data.date < firstFluidDataDate for day timestep', () => {
+ it('sould return VALID state because data.date < firstFluidDataDate for day timestep', () => {
fluidStatus[FluidType.ELECTRICITY].firstDataDate = DateTime.fromISO(
'2020-10-20T00:00:00.000Z',
{
@@ -318,7 +318,7 @@ describe('ConsumptionFormatter service', () => {
)
const expectedResult: Dataload = {
...mockData,
- state: DataloadState.EMPTY,
+ state: DataloadState.VALID,
}
const result: Dataload = consumptionFormatterService.defineDataloadState(
mockData,
@@ -328,7 +328,7 @@ describe('ConsumptionFormatter service', () => {
)
expect(result).toEqual(expectedResult)
})
- it('sould return EMPTY state because data.date < start of month of firstFluidDataDate for month timestep', () => {
+ it('sould return VALID state because data.date < start of month of firstFluidDataDate for month timestep', () => {
fluidStatus[FluidType.ELECTRICITY].firstDataDate = DateTime.fromISO(
'2020-11-01T00:00:00.000Z',
{
@@ -337,7 +337,7 @@ describe('ConsumptionFormatter service', () => {
)
const expectedResult: Dataload = {
...mockData,
- state: DataloadState.EMPTY,
+ state: DataloadState.VALID,
}
const result: Dataload = consumptionFormatterService.defineDataloadState(
mockData,
@@ -347,7 +347,7 @@ describe('ConsumptionFormatter service', () => {
)
expect(result).toEqual(expectedResult)
})
- it('sould return EMPTY state because data.date < start of year firstFluidDataDate for year timestep', () => {
+ it('sould return VALID state because data.date < start of year firstFluidDataDate for year timestep', () => {
fluidStatus[FluidType.ELECTRICITY].firstDataDate = DateTime.fromISO(
'2021-10-20T00:00:00.000Z',
{
@@ -356,7 +356,7 @@ describe('ConsumptionFormatter service', () => {
)
const expectedResult: Dataload = {
...mockData,
- state: DataloadState.EMPTY,
+ state: DataloadState.VALID,
}
const result: Dataload = consumptionFormatterService.defineDataloadState(
mockData,
diff --git a/src/services/consumptionFormatter.service.ts b/src/services/consumptionFormatter.service.ts
index 4b438dd72b8a187dadc68963a735baa9b71aef2d..efb73dd9869e60e75a3578bbc3e709cbf18aca5c 100644
--- a/src/services/consumptionFormatter.service.ts
+++ b/src/services/consumptionFormatter.service.ts
@@ -5,6 +5,7 @@ import { DateTime, Interval } from 'luxon'
import { Dataload, FluidStatus, TimePeriod } from 'models'
import DateChartService from 'services/dateChart.service'
import { compareDates } from 'utils/date'
+import log from 'utils/logger'
import ConfigService from './fluidConfig.service'
export default class ConsumptionFormatterService {
@@ -63,6 +64,11 @@ export default class ConsumptionFormatterService {
if (!fluidStatus) {
return data
}
+
+ if (data.value !== -1) {
+ return { ...data, state: DataloadState.VALID }
+ }
+
// Define state in function of first and last fluid data date
if (
fluidStatus.firstDataDate &&
diff --git a/src/services/customPopup.service.test.ts b/src/services/customPopup.service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c15f8f3b4fa180a4638254b571bf2ca4b7c0ad4
--- /dev/null
+++ b/src/services/customPopup.service.test.ts
@@ -0,0 +1,31 @@
+import mockClient from '../../tests/__mocks__/client'
+import { mockCustomPopup } from '../../tests/__mocks__/customPopup.mock'
+import CustomPupopService from './customPopup.service'
+
+jest.mock('services/environment.service', () => {
+ return jest.fn(() => {
+ return {
+ isProduction: () => true,
+ }
+ })
+})
+
+describe('PartnersInfo service', () => {
+ const customPupopService = new CustomPupopService(mockClient)
+
+ it('should return customPopup data', async () => {
+ mockClient.getStackClient().fetchJSON.mockResolvedValueOnce(mockCustomPopup)
+ const result = await customPupopService.getCustomPopup()
+ expect(result).toBe(mockCustomPopup)
+ })
+
+ it('should return an error', async () => {
+ mockClient.getStackClient().fetchJSON.mockRejectedValue(new Error())
+ try {
+ await customPupopService.getCustomPopup()
+ expect(true).toBe(false)
+ } catch (error) {
+ expect(error).toEqual(new Error('Error while getting customPopup'))
+ }
+ })
+})
diff --git a/src/services/customPopup.service.ts b/src/services/customPopup.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef6fcb4976db6bd7ffbb353983360278e27e1fd1
--- /dev/null
+++ b/src/services/customPopup.service.ts
@@ -0,0 +1,31 @@
+import { Client } from 'cozy-client'
+import { CustomPopup } from 'models/customPopup.model'
+import EnvironmentService from './environment.service'
+
+export default class CustomPupopService {
+ private readonly _client: Client
+ constructor(_client: Client) {
+ this._client = _client
+ }
+
+ /*
+ * Get information from backoffice about the status of custom popup
+ * On success, respond the customPopup
+ * Else, throw an error
+ */
+ public async getCustomPopup(): Promise<CustomPopup | undefined> {
+ const env = new EnvironmentService()
+ const remoteUrl = env.isProduction()
+ ? `/remote/org.ecolyo.backoffice.custom.popup`
+ : `/remote/org.ecolyo.backoffice.custom.popup.rec`
+ try {
+ const result = await this._client
+ .getStackClient()
+ .fetchJSON('GET', remoteUrl)
+ return result as CustomPopup
+ } catch (error) {
+ console.error(`getCustomPopup: Failed to get custom popup:${error}`)
+ throw new Error('Error while getting customPopup')
+ }
+ }
+}
diff --git a/src/services/fluid.service.ts b/src/services/fluid.service.ts
index 69800a4d508587701fbd9927f6843ff5a6dfcd72..36d865381cf38a3d9897295b67b38217c476c85a 100644
--- a/src/services/fluid.service.ts
+++ b/src/services/fluid.service.ts
@@ -108,7 +108,6 @@ export default class FluidService {
konnectorService.getKonnector(
fluidConfig[FluidType.ELECTRICITY].konnectorConfig.slug
),
-
konnectorService.getKonnector(
fluidConfig[FluidType.WATER].konnectorConfig.slug
),
diff --git a/src/services/partnersInfo.service.spec.ts b/src/services/partnersInfo.service.spec.ts
index 07f198a26194f7349aac3c43233fe84a3febb10f..ace20739b7a76826075f81dd905a56f96504bcac 100644
--- a/src/services/partnersInfo.service.spec.ts
+++ b/src/services/partnersInfo.service.spec.ts
@@ -10,20 +10,33 @@ jest.mock('services/environment.service', () => {
})
})
+/* eslint-disable camelcase */
+const mockPartnersInfo: PartnersInfo = {
+ egl_failure: true,
+ enedis_failure: true,
+ grdf_failure: true,
+ notification_activated: true,
+}
+
describe('PartnersInfo service', () => {
const partnersInfoService = new PartnersInfoService(mockClient)
- it('should return partnersInfo', async () => {
+ it('should return partnersInfoData', async () => {
+ mockClient
+ .getStackClient()
+ .fetchJSON.mockResolvedValueOnce(mockPartnersInfo)
const result: PartnersInfo | undefined =
await partnersInfoService.getPartnersInfo()
- expect(result).toEqual(undefined)
+ expect(result).toEqual(mockPartnersInfo)
})
+
it('should return an error', async () => {
- mockClient.query.mockRejectedValue(new Error())
+ mockClient.getStackClient().fetchJSON.mockRejectedValue(new Error())
try {
await partnersInfoService.getPartnersInfo()
+ expect(true).toBe(false)
} catch (error) {
- expect(error).rejects.toThrow(new Error())
+ expect(error).toEqual(new Error('Error while getting partnersInfo'))
}
})
})
diff --git a/src/services/partnersInfo.service.ts b/src/services/partnersInfo.service.ts
index 52d4642637e56e75a579b4408eec0ee94aaebf19..da6a98738a286409c2b8429548be8c74e2e23605 100644
--- a/src/services/partnersInfo.service.ts
+++ b/src/services/partnersInfo.service.ts
@@ -25,6 +25,7 @@ export default class PartnersInfoService {
return result as PartnersInfo
} catch (error) {
console.error(`getPartnersInfo: Failed to get partners info:${error}`)
+ throw new Error('Error while getting partnersInfo')
}
}
}
diff --git a/src/services/profile.service.spec.ts b/src/services/profile.service.spec.ts
index 5cb4f6d59de94024c224a8e096a3f6b67afb4501..e5b97cc26c71c7ea3c098b85ec0ab83e8d596838 100644
--- a/src/services/profile.service.spec.ts
+++ b/src/services/profile.service.spec.ts
@@ -63,6 +63,7 @@ describe('UserProfile service', () => {
...profileData,
monthlyAnalysisDate: '2020-11-03T00:00:00.000Z',
partnersIssueDate: '2020-11-03T00:00:00.000Z',
+ customPopupDate: '2020-11-03T00:00:00.000Z',
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const mockQueryResult: QueryResult<any[]> = {
@@ -92,6 +93,9 @@ describe('UserProfile service', () => {
partnersIssueDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
zone: 'utc',
}),
+ customPopupDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
+ zone: 'utc',
+ }),
haveSeenLastAnalysis: false,
}
const result = await profileService.updateProfile({
diff --git a/src/services/profile.service.ts b/src/services/profile.service.ts
index cee6ea3843d0e000a08e6d42315e1bd4f8c524df..5bd07d1d7969ed05694177b5fe06fa3da8778366 100644
--- a/src/services/profile.service.ts
+++ b/src/services/profile.service.ts
@@ -9,6 +9,13 @@ export default class ProfileService {
constructor(_client: Client) {
this._client = _client
}
+
+ private getDate(date: string): DateTime {
+ return DateTime.fromISO(date, {
+ zone: 'utc',
+ })
+ }
+
/**
* Retrieve Profile from the ProfileEntity
* @param {ProfileEntity} profileEntity
@@ -19,22 +26,12 @@ export default class ProfileService {
...profileEntity,
monthlyAnalysisDate:
typeof profileEntity.monthlyAnalysisDate === 'string'
- ? DateTime.fromISO(profileEntity.monthlyAnalysisDate, {
- zone: 'utc',
- })
+ ? this.getDate(profileEntity.monthlyAnalysisDate)
: profileEntity.monthlyAnalysisDate,
- lastConnectionDate: DateTime.fromISO(profileEntity.lastConnectionDate, {
- zone: 'utc',
- }),
- partnersIssueDate: DateTime.fromISO(profileEntity.partnersIssueDate, {
- zone: 'utc',
- }),
- activateHalfHourDate: DateTime.fromISO(
- profileEntity.activateHalfHourDate,
- {
- zone: 'utc',
- }
- ),
+ lastConnectionDate: this.getDate(profileEntity.lastConnectionDate),
+ partnersIssueDate: this.getDate(profileEntity.partnersIssueDate),
+ activateHalfHourDate: this.getDate(profileEntity.activateHalfHourDate),
+ customPopupDate: this.getDate(profileEntity.customPopupDate),
}
return profile
}
diff --git a/src/store/global/global.action.spec.ts b/src/store/global/global.action.spec.ts
index 1695a6e0ca852ac3840304c2144e4bcc20d8373f..a06bc8a6698db1b24ef6e3958f8d64e02aaccd9b 100644
--- a/src/store/global/global.action.spec.ts
+++ b/src/store/global/global.action.spec.ts
@@ -1,4 +1,5 @@
import { ScreenType } from 'enum/screen.enum'
+import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
import { mockInitialGlobalState } from '../../../tests/__mocks__/store'
import {
CHANGE_SCREEN_TYPE,
@@ -13,6 +14,8 @@ import {
toggleChallengeDuelNotification,
toggleAnalysisNotification,
setFluidStatus,
+ SET_CUSTOM_POPUP,
+ setCustomPopup,
} from './global.actions'
describe('global actions', () => {
@@ -75,4 +78,13 @@ describe('global actions', () => {
}
expect(setFluidStatus(fluidStatus)).toEqual(expectedAction)
})
+
+ it('should set customPopup', () => {
+ const payload = mockCustomPopup
+ const expectedAction = {
+ type: SET_CUSTOM_POPUP,
+ payload,
+ }
+ expect(setCustomPopup(payload)).toEqual(expectedAction)
+ })
})
diff --git a/src/store/global/global.actions.ts b/src/store/global/global.actions.ts
index 838a477930a5ea6ad08b7b29749b96cb9a46e87b..4e78d9a100e925d61b929d49f3c9495c4609afaa 100644
--- a/src/store/global/global.actions.ts
+++ b/src/store/global/global.actions.ts
@@ -1,6 +1,7 @@
import { FluidType } from 'enum/fluid.enum'
import { ScreenType } from 'enum/screen.enum'
import { FluidConnection, FluidStatus, TermsStatus } from 'models'
+import { CustomPopup } from 'models/customPopup.model'
import { Notes } from 'models/releaseNotes.model'
import { SgeStore } from 'models/sgeStore.model'
@@ -17,6 +18,7 @@ export const SET_FLUID_STATUS = 'SET_FLUID_STATUS'
export const UPDATE_FLUID_CONNECTION = 'UPDATE_FLUID_CONNECTION'
export const UPDATE_TERMS_VALIDATION = 'UPDATE_TERMS_VALIDATION'
export const SET_PARTNERS_ISSUE = 'SET_PARTNERS_ISSUE'
+export const SET_CUSTOM_POPUP = 'SET_CUSTOM_POPUP'
export const SET_SHOULD_REFRESH_CONSENT = 'SET_SHOULD_REFRESH_CONSENT'
export const UPDATE_SGE_CONNECT = 'UPDATE_SGE_CONNECT'
interface ChangeScreenType {
@@ -69,6 +71,11 @@ interface SetPartnersIssue {
payload?: boolean
}
+interface SetCustomPopup {
+ type: typeof SET_CUSTOM_POPUP
+ payload: CustomPopup
+}
+
interface SetShouldRefreshConsent {
type: typeof SET_SHOULD_REFRESH_CONSENT
payload?: boolean
@@ -89,6 +96,7 @@ export type GlobalActionTypes =
| UpdateTermValidation
| ShowReleaseNotes
| SetPartnersIssue
+ | SetCustomPopup
| SetShouldRefreshConsent
| UpdateSGEConnect
@@ -176,6 +184,16 @@ export function setPartnersIssue(
payload: openPartnersIssueModal,
}
}
+
+export function setCustomPopup(
+ customPopupModal: CustomPopup
+): GlobalActionTypes {
+ return {
+ type: SET_CUSTOM_POPUP,
+ payload: customPopupModal,
+ }
+}
+
export function setShouldRefreshConsent(
shouldRefreshConsent: boolean
): GlobalActionTypes {
diff --git a/src/store/global/global.reducer.spec.ts b/src/store/global/global.reducer.spec.ts
index 03b3919361f0927ecb5b6d82bcdd148bed325d98..3a6399f2e2b10b22aeec1b7a9fed02a9155e19cc 100644
--- a/src/store/global/global.reducer.spec.ts
+++ b/src/store/global/global.reducer.spec.ts
@@ -6,6 +6,7 @@ import {
TOGGLE_CHALLENGE_DUEL_NOTIFICATION,
TOGGLE_ANALYSIS_NOTIFICATION,
SET_FLUID_STATUS,
+ SET_CUSTOM_POPUP,
} from './global.actions'
import { ScreenType } from 'enum/screen.enum'
import { FluidStatus } from 'models'
@@ -15,6 +16,7 @@ import { konnectorsData } from '../../../tests/__mocks__/konnectorsData.mock'
import { accountsData } from '../../../tests/__mocks__/accountsData.mock'
import { triggersData } from '../../../tests/__mocks__/triggersData.mock'
import { mockInitialGlobalState } from '../../../tests/__mocks__/store'
+import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
const mockDataDates: (DateTime | null)[] = [
DateTime.local().setZone('utc', {
@@ -208,4 +210,17 @@ describe('global reducer', () => {
})
expect(result).toEqual(mockInitialGlobalState)
})
+
+ it('should handle SET_CUSTOM_POPUP with payload', () => {
+ const result = {
+ ...mockInitialGlobalState,
+ customPopupModal: mockCustomPopup,
+ }
+ expect(
+ globalReducer(mockInitialGlobalState, {
+ type: SET_CUSTOM_POPUP,
+ payload: mockCustomPopup,
+ }).customPopupModal
+ ).toBe(result.customPopupModal)
+ })
})
diff --git a/src/store/global/global.reducer.ts b/src/store/global/global.reducer.ts
index 8f897c2380eede3d1c162ed551cdc301f1bfb854..561a14768071fc8273d0aac898a10fc17a868add 100644
--- a/src/store/global/global.reducer.ts
+++ b/src/store/global/global.reducer.ts
@@ -13,6 +13,7 @@ import {
SET_PARTNERS_ISSUE,
SET_SHOULD_REFRESH_CONSENT,
UPDATE_SGE_CONNECT,
+ SET_CUSTOM_POPUP,
} from 'store/global/global.actions'
import { FluidStatus, GlobalState } from 'models'
import { ScreenType } from 'enum/screen.enum'
@@ -104,6 +105,11 @@ const initialState: GlobalState = {
},
],
fluidTypes: [],
+ customPopupModal: {
+ popupEnabled: false,
+ title: '',
+ description: '',
+ },
openPartnersIssueModal: false,
shouldRefreshConsent: false,
sgeConnect: {
@@ -206,6 +212,11 @@ export const globalReducer: Reducer<GlobalState> = (
openPartnersIssueModal: action.payload,
}
: state
+ case SET_CUSTOM_POPUP:
+ return {
+ ...state,
+ customPopupModal: action.payload,
+ }
case SET_SHOULD_REFRESH_CONSENT:
return action.payload != undefined
? {
diff --git a/src/store/profile/profile.reducer.ts b/src/store/profile/profile.reducer.ts
index 29f92540519b2612bae94dde63e2d4f5e6411e05..d0c26e31f1d335be1e9326fb50fefe6c16593a2b 100644
--- a/src/store/profile/profile.reducer.ts
+++ b/src/store/profile/profile.reducer.ts
@@ -16,6 +16,7 @@ const initialState: Profile = {
isFirstConnection: false,
partnersIssueDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
lastConnectionDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
+ customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
haveSeenLastAnalysis: true,
sendAnalysisNotification: true,
sendConsumptionAlert: false,
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 974a18400b5e12532a1365533cb38ce87e3d198b..2ee92640a5609bd65b3d529211c06e7ef607e34d 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -79,12 +79,16 @@ button {
}
}
&.btn-profile-next {
- @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
+ @include button(
+ $gold-shadow,
+ #000000,
+ 1px solid $gold-shadow,
+ $multi-color-radial-gradient
+ ) {
background-color: darken($gold-shadow, 12%);
}
}
&.btn-profile-back {
- @include button(none, $soft-grey, none, none) {
- }
+ @include button(none, $grey-bright, 1px solid $grey-bright, none);
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 19cdba9061ca1592c29f01985bb9e3d5538dd69e..8a59dff68acd362e56d2e14aed640426395ff42c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -63,6 +63,6 @@
background-color: $default-background;
}
-// .app-content {
-// background-color: $default-background;
-// }
+.accordion-icon {
+ color: $white;
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index fe01a13177d5fd7037a3e6b45ec37eaccb634cdc..f26e1776661809f1d0811bcd5ed9d199ae1a0aa9 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -237,3 +237,14 @@ export const getChallengeTitleWithLineReturn = (userChallengeId: string) => {
}
}
}
+
+/**
+ * Returns today's date, example: 2022-09-28T00:00:00.000Z
+ * @returns DateTime
+ */
+export const getTodayDate = () =>
+ DateTime.local()
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .startOf('day')
diff --git a/tests/__mocks__/client.ts b/tests/__mocks__/client.ts
index 3118714bde4d0e47cbbd4358e1feb0094b10d814..f2b7101ee47a8d7a424ac76549ec3a75e3f2b27c 100644
--- a/tests/__mocks__/client.ts
+++ b/tests/__mocks__/client.ts
@@ -1,6 +1,6 @@
import { Client } from 'cozy-client'
-const mockClient = ({
+const mockClient = {
query: jest.fn(),
create: jest.fn(),
save: jest.fn().mockReturnValue({
@@ -20,6 +20,6 @@ const mockClient = ({
options: {
uri: 'http://cozy.tools:8080', // NOSONAR
},
-} as unknown) as jest.Mocked<Client>
+} as unknown as jest.Mocked<Client>
export default mockClient
diff --git a/tests/__mocks__/customPopup.mock.ts b/tests/__mocks__/customPopup.mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c72db4dce6cfbf34bf24c8aeadb9f72ece020c13
--- /dev/null
+++ b/tests/__mocks__/customPopup.mock.ts
@@ -0,0 +1,13 @@
+import { CustomPopup } from 'models/customPopup.model'
+
+export const mockCustomPopup: CustomPopup = {
+ popupEnabled: true,
+ title: 'Bold title',
+ description: 'Interesting description',
+}
+
+export const mockCustomPopupOff: CustomPopup = {
+ popupEnabled: false,
+ title: '',
+ description: '',
+}
diff --git a/tests/__mocks__/profile.mock.ts b/tests/__mocks__/profile.mock.ts
index f235a0c213b5d3552e433a20347b92d7b6358152..27df89d8f7ed281b3d3ec8b029e5626f4e41af79 100644
--- a/tests/__mocks__/profile.mock.ts
+++ b/tests/__mocks__/profile.mock.ts
@@ -34,4 +34,7 @@ export const profileData: Profile = {
activateHalfHourDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
zone: 'utc',
}),
+ customPopupDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
+ zone: 'utc',
+ }),
}
diff --git a/tests/__mocks__/store.ts b/tests/__mocks__/store.ts
index 305a23ab8216bba6fd846de2e22422e48bf342d3..57c37166b8bdb94ce7f8191986f15d4677a46ea4 100644
--- a/tests/__mocks__/store.ts
+++ b/tests/__mocks__/store.ts
@@ -38,6 +38,11 @@ export const mockInitialGlobalState: GlobalState = {
accepted: false,
versionType: 'init',
},
+ customPopupModal: {
+ popupEnabled: false,
+ title: '',
+ description: '',
+ },
openPartnersIssueModal: false,
releaseNotes: { show: false, notes: [{ description: '', title: '' }] },
fluidStatus: [
@@ -173,6 +178,7 @@ export const mockInitialProfileState: Profile = {
},
haveSeenEcogestureModal: false,
activateHalfHourDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
+ customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
}
export const mockInitialProfileTypeState: ProfileType = {
diff --git a/yarn.lock b/yarn.lock
index 6ed912bdbfe9a4840753f23ddd77e35b95be2533..f5105684842ae72c8f01beba05583edb395723ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3012,6 +3012,14 @@
"@typescript-eslint/typescript-estree" "5.37.0"
debug "^4.3.4"
+"@typescript-eslint/scope-manager@5.30.0":
+ version "5.30.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.0.tgz#bf585ee801ab4ad84db2f840174e171a6bb002c7"
+ integrity sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==
+ dependencies:
+ "@typescript-eslint/types" "5.30.0"
+ "@typescript-eslint/visitor-keys" "5.30.0"
+
"@typescript-eslint/scope-manager@5.30.5":
version "5.30.5"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz#7f90b9d6800552c856a5f3644f5e55dd1469d964"
@@ -3061,6 +3069,11 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.5.tgz#36a0c05a72af3623cdf9ee8b81ea743b7de75a98"
integrity sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==
+"@typescript-eslint/types@5.30.5":
+ version "5.30.5"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.5.tgz#36a0c05a72af3623cdf9ee8b81ea743b7de75a98"
+ integrity sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==
+
"@typescript-eslint/types@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.0.tgz#cde7b94d1c09a4f074f46db99e7bd929fb0a5559"
@@ -3071,6 +3084,19 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.37.0.tgz#09e4870a5f3af7af3f84e08d792644a87d232261"
integrity sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==
+"@typescript-eslint/typescript-estree@5.30.0":
+ version "5.30.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.0.tgz#4565ee8a6d2ac368996e20b2344ea0eab1a8f0bb"
+ integrity sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==
+ dependencies:
+ "@typescript-eslint/types" "5.30.0"
+ "@typescript-eslint/visitor-keys" "5.30.0"
+ debug "^4.3.4"
+ globby "^11.1.0"
+ is-glob "^4.0.3"
+ semver "^7.3.7"
+ tsutils "^3.21.0"
+
"@typescript-eslint/typescript-estree@5.30.5":
version "5.30.5"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz#c520e4eba20551c4ec76af8d344a42eb6c9767bb"
@@ -3110,6 +3136,18 @@
semver "^7.3.7"
tsutils "^3.21.0"
+"@typescript-eslint/utils@5.30.5":
+ version "5.30.5"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.5.tgz#3999cbd06baad31b9e60d084f20714d1b2776765"
+ integrity sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==
+ dependencies:
+ "@types/json-schema" "^7.0.9"
+ "@typescript-eslint/scope-manager" "5.30.5"
+ "@typescript-eslint/types" "5.30.5"
+ "@typescript-eslint/typescript-estree" "5.30.5"
+ eslint-scope "^5.1.1"
+ eslint-utils "^3.0.0"
+
"@typescript-eslint/utils@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.0.tgz#104c864ecc1448417606359275368bf3872bbabb"