diff --git a/src/assets/icons/ico/coin.svg b/src/assets/icons/ico/coin.svg
index ae0c05e86ecc4f13dc0666194c3718ce991585c8..a1fb241f3d3eaa4968918eaa596e095edcab0d2f 100644
--- a/src/assets/icons/ico/coin.svg
+++ b/src/assets/icons/ico/coin.svg
@@ -1,50 +1,6 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.6948 1.16223C20.6205 1.1616 20.5463 1.16097 20.4799 1.15867L17.6179 1.02004L17.6002 1.36141C17.4978 1.38325 17.3971 1.41297 17.2852 1.42862L15.6657 34.2815C15.7702 34.3086 15.8703 34.3531 15.967 34.3819L15.951 34.7311L18.813 34.8698L18.8113 34.8619C18.8856 34.8625 18.9536 34.8727 19.0295 34.8812C27.4514 35.2992 34.6573 28.0886 35.116 18.777C35.5826 9.46374 29.1245 1.57854 20.6948 1.16223Z" fill="url(#paint0_angular_13983_3418)"/>
-<path opacity="0.75" d="M34.9434 15.1906L31.7833 14.4651L15.678 34.0316L15.6654 34.2813C15.77 34.3084 15.87 34.3529 15.9668 34.3817L15.9507 34.7309L18.8127 34.8695L18.811 34.8617C18.8853 34.8623 18.9533 34.8725 19.0292 34.881C27.4511 35.299 34.657 28.0883 35.1157 18.7768C35.1821 17.544 35.1162 16.3477 34.9434 15.1906Z" fill="#A95508"/>
-<path d="M32.1201 18.6221C32.5794 9.31192 26.121 1.42756 17.6948 1.01184C9.26857 0.596126 2.06542 7.80648 1.6061 17.1166C1.14677 26.4268 7.60521 34.3111 16.0314 34.7268C24.4576 35.1426 31.6608 27.9322 32.1201 18.6221Z" fill="url(#paint1_linear_13983_3418)"/>
-<path d="M28.9838 18.4667C29.3489 11.0666 24.2184 4.79987 17.5245 4.46962C10.8306 4.13937 5.10819 9.87064 4.74309 17.2708C4.378 24.6709 9.5085 30.9376 16.2024 31.2679C22.8963 31.5981 28.6187 25.8669 28.9838 18.4667Z" fill="url(#paint2_linear_13983_3418)"/>
-<path opacity="0.75" d="M28.9838 18.4667C29.3489 11.0666 24.2184 4.79987 17.5245 4.46962C10.8306 4.13937 5.10819 9.87064 4.74309 17.2708C4.378 24.6709 9.5085 30.9376 16.2024 31.2679C22.8963 31.5981 28.6187 25.8669 28.9838 18.4667Z" fill="#A95508"/>
-<path d="M28.9614 18.9128C29.3144 11.7589 24.3546 5.70065 17.8834 5.38138C11.4122 5.06212 5.8802 10.6027 5.52725 17.7566C5.1743 24.9106 10.1341 30.9688 16.6053 31.288C23.0764 31.6073 28.6085 26.0667 28.9614 18.9128Z" fill="url(#paint3_linear_13983_3418)"/>
-<path opacity="0.75" d="M12.1178 16.2449L9 17.0001L10.2741 17.9394L11.9157 17.7885L11.8776 18.3095L11.8644 18.8417L11.8546 19.2375C11.8514 19.3649 11.8525 19.4919 11.8577 19.6185L9.00014 20.0001L10.1908 21.2967L11.9335 21.1366C12.0475 22.2971 12.2737 23.3384 12.612 24.2605C12.959 25.1727 12.0562 24.9945 12.612 25.6152C13.7 26.8303 15.1997 27.6221 15.9736 27.9141C16.7478 28.197 17.6231 28.2935 18.5997 28.2038C19.8035 28.0932 20.8497 27.7383 21.7381 27.1393C22.6349 26.5394 23.3938 25.7435 24.0147 24.7514L22.993 23.7832L21.4464 22.7538L21.9122 24.1821C21.7825 24.3302 21.6273 24.4942 21.4464 24.6742C21.274 24.8535 21.0639 25.0271 20.8161 25.1951C20.5686 25.354 20.2796 25.4941 19.949 25.6152C19.6184 25.7364 19.23 25.8174 18.7838 25.8584C17.622 25.9652 16.6649 25.6083 15.9125 24.7879C15.1604 23.9583 14.6885 22.6627 14.497 20.901L19.4219 20.4485C19.6408 20.4284 19.8152 20.3397 19.945 20.1826C20.0749 20.0254 20.142 19.8604 20.1463 19.6875L20.1669 18.855L18.5001 18.0001L14.4086 19.3841C14.4033 19.2575 14.4023 19.1305 14.4054 19.0031L14.4152 18.6073L14.4284 18.0751L14.4666 17.5541L20.6921 16.9821C20.911 16.962 21.0854 16.8733 21.2153 16.7162C21.3452 16.559 21.4123 16.394 21.4166 16.2211L21.4372 15.3886L20.0001 14.5001L14.6686 16.0105C14.9793 14.3207 15.5325 13.0126 16.3282 12.0862C17.1325 11.1499 18.1198 10.628 19.29 10.5205C19.9046 10.464 20.4033 10.5044 20.7863 10.6417C21.1695 10.7699 21.4849 10.9225 21.7325 11.0994C21.9801 11.2764 22.1775 11.4444 22.3248 11.6033C22.4807 11.7524 22.6302 11.8203 22.7733 11.8072C22.908 11.7948 23.014 11.7533 23.0914 11.6826C23.1687 11.612 23.2422 11.5281 23.3118 11.4309L24.1832 10.3296C23.6222 9.5823 22.9433 9.01377 22.1466 8.62401C21.35 8.23426 20.3834 8.09159 19.2468 8.19602C18.3376 8.27957 17.4915 8.52979 16.7084 8.9467C15.9337 9.36284 15.2395 9.92136 14.6258 10.6223C14.0123 11.3141 13.4921 12.138 13.0652 13.0941C12.6386 14.0411 12.3227 15.0914 12.1178 16.2449Z" fill="#A95508"/>
-<path d="M8.8163 15.4107L10.6221 15.2448C10.8271 14.0912 11.1429 13.0409 11.5695 12.094C11.9964 11.1379 12.5166 10.3139 13.1301 9.62213C13.7439 8.92122 14.4381 8.3627 15.2127 7.94656C15.9958 7.52965 16.842 7.27942 17.7512 7.19588C18.8877 7.09145 19.8543 7.23411 20.651 7.62387C21.4477 8.01363 22.1265 8.58215 22.6876 9.32944L21.8161 10.4308C21.7465 10.5279 21.673 10.6118 21.5957 10.6825C21.5184 10.7531 21.4123 10.7947 21.2776 10.807C21.1345 10.8202 20.985 10.7522 20.8291 10.6032C20.6819 10.4442 20.4844 10.2763 20.2368 10.0993C19.9892 9.92234 19.6738 9.76976 19.2906 9.64157C18.9077 9.50429 18.4089 9.46388 17.7943 9.52035C16.6242 9.62788 15.6369 10.1498 14.8325 11.0861C14.0368 12.0125 13.4836 13.3206 13.1729 15.0104L19.9415 14.3884L19.9209 15.2209C19.9166 15.3938 19.8495 15.5588 19.7196 15.716C19.5897 15.8732 19.4154 15.9618 19.1965 15.9819L12.9709 16.554C12.9582 16.7276 12.9455 16.9013 12.9328 17.0749C12.9285 17.2478 12.9241 17.4252 12.9196 17.6072C12.9162 17.7437 12.9129 17.8756 12.9098 18.003C12.9066 18.1304 12.9077 18.2573 12.9129 18.3839L18.6713 17.8548L18.6506 18.6873C18.6464 18.8602 18.5793 19.0252 18.4494 19.1824C18.3195 19.3396 18.1451 19.4282 17.9262 19.4484L13.0013 19.9009C13.1928 21.6625 13.6647 22.9581 14.4169 23.7877C15.1693 24.6082 16.1264 24.9651 17.2881 24.8583C17.7343 24.8173 18.1227 24.7362 18.4533 24.6151C18.7839 24.4939 19.0729 24.3539 19.3205 24.195C19.5682 24.027 19.7783 23.8533 19.9507 23.6741C20.1316 23.4941 20.2868 23.33 20.4165 23.182C20.5548 23.024 20.6756 22.8949 20.7789 22.7946C20.8906 22.6936 21.0012 22.638 21.1106 22.628C21.1948 22.6202 21.2618 22.6277 21.3116 22.6504C21.3699 22.6722 21.4318 22.7165 21.4973 22.7831L22.5191 23.7513C21.8981 24.7434 21.1392 25.5393 20.2424 26.1391C19.354 26.7382 18.3079 27.093 17.104 27.2037C16.1275 27.2934 15.2521 27.1968 14.478 26.9139C13.7041 26.6219 13.0349 26.1705 12.4705 25.5597C11.9147 24.939 11.4633 24.1726 11.1164 23.2604C10.778 22.3383 10.5519 21.297 10.4378 20.1364L8.69518 20.2966L8.73307 18.768L10.3621 18.6183C10.3568 18.4917 10.3558 18.3647 10.3589 18.2374C10.3621 18.11 10.3654 17.9781 10.3687 17.8416C10.3732 17.6596 10.3776 17.4822 10.3819 17.3093C10.3946 17.1357 10.4073 16.962 10.42 16.7884L8.77841 16.9392L8.8163 15.4107Z" fill="url(#paint4_linear_13983_3418)"/>
-<defs>
-<radialGradient id="paint0_angular_13983_3418" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22.1186 20.6523) rotate(119.031) scale(70.3432 92.2077)">
-<stop offset="0.413979" stop-color="#BF723B"/>
-<stop offset="0.512607" stop-color="#DD9A2B"/>
-<stop offset="0.601154" stop-color="#F6D74C"/>
-<stop offset="0.656158" stop-color="#D1880D"/>
-<stop offset="0.759746" stop-color="#A05B11"/>
-<stop offset="0.889115" stop-color="#A05B11"/>
-<stop offset="0.947304" stop-color="#F5B11B"/>
-<stop offset="0.972422" stop-color="#BE7D1B"/>
-</radialGradient>
-<linearGradient id="paint1_linear_13983_3418" x1="17.4544" y1="38.4582" x2="36.916" y2="11.3407" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.12897" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint2_linear_13983_3418" x1="25.9569" y1="31.2874" x2="29.6278" y2="10.2197" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.260417" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint3_linear_13983_3418" x1="14.7165" y1="31.9085" x2="30.5309" y2="9.54805" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.178858" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint4_linear_13983_3418" x1="2.49277" y1="25.9591" x2="25.5833" y2="28.7972" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.260417" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#504839" />
+ <path
+ d="M9.786 14.792H11.249C11.4177 13.8973 11.6853 13.0907 12.052 12.372C12.4187 11.646 12.866 11.03 13.394 10.524C13.922 10.018 14.5197 9.62933 15.187 9.358C15.8543 9.07933 16.5803 8.94 17.365 8.94C18.3843 8.94 19.257 9.138 19.983 9.534C20.709 9.92267 21.3177 10.4507 21.809 11.118L20.852 12.152C20.7787 12.2327 20.7017 12.306 20.621 12.372C20.5403 12.4307 20.4267 12.46 20.28 12.46C20.1773 12.46 20.082 12.4307 19.994 12.372C19.9133 12.3133 19.8217 12.24 19.719 12.152C19.6163 12.064 19.5027 11.9687 19.378 11.866C19.2533 11.7633 19.103 11.668 18.927 11.58C18.7583 11.492 18.5567 11.4187 18.322 11.36C18.0873 11.3013 17.8087 11.272 17.486 11.272C16.6207 11.272 15.891 11.569 15.297 12.163C14.703 12.757 14.2887 13.6333 14.054 14.792H19.576V15.628C19.576 15.7967 19.5063 15.9543 19.367 16.101C19.235 16.2403 19.0517 16.31 18.817 16.31H13.867C13.8597 16.4347 13.856 16.5593 13.856 16.684C13.856 16.8013 13.856 16.9223 13.856 17.047C13.856 17.135 13.856 17.223 13.856 17.311C13.856 17.399 13.8597 17.4833 13.867 17.564H18.531V18.389C18.531 18.5577 18.4613 18.7153 18.322 18.862C18.1827 19.0013 17.9993 19.071 17.772 19.071H13.999C14.2043 20.3323 14.5967 21.2747 15.176 21.898C15.7627 22.514 16.4887 22.822 17.354 22.822C17.882 22.822 18.3037 22.7523 18.619 22.613C18.9417 22.4663 19.202 22.305 19.4 22.129C19.6053 21.953 19.774 21.7953 19.906 21.656C20.0453 21.5093 20.1957 21.436 20.357 21.436C20.4377 21.436 20.5073 21.4507 20.566 21.48C20.6247 21.502 20.687 21.5497 20.753 21.623L21.93 22.701C21.4167 23.493 20.764 24.1017 19.972 24.527C19.18 24.945 18.2597 25.154 17.211 25.154C16.3457 25.154 15.5683 25.011 14.879 24.725C14.197 24.4317 13.603 24.021 13.097 23.493C12.591 22.965 12.1767 22.327 11.854 21.579C11.5387 20.831 11.315 19.995 11.183 19.071H9.786V17.564H11.062C11.0547 17.4833 11.051 17.399 11.051 17.311C11.051 17.223 11.051 17.135 11.051 17.047C11.051 16.9223 11.051 16.8013 11.051 16.684C11.051 16.5593 11.0547 16.4347 11.062 16.31H9.786V14.792Z"
+ fill="#E3B82A" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/coins.svg b/src/assets/icons/ico/coins.svg
deleted file mode 100644
index a114437dfc3b8458a599f3f49ad7dac33d99357e..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/coins.svg
+++ /dev/null
@@ -1,98 +0,0 @@
-<svg width="51" height="36" viewBox="0 0 51 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.5">
-<path d="M40.7965 10.7748C40.747 10.7744 40.6975 10.774 40.6533 10.7724L38.7453 10.68L38.7334 10.9076C38.6652 10.9222 38.5981 10.942 38.5234 10.9524L37.4438 32.8543C37.5135 32.8724 37.5802 32.9021 37.6447 32.9213L37.634 33.1541L39.542 33.2465L39.5409 33.2413C39.5904 33.2417 39.6357 33.2485 39.6863 33.2541C45.3009 33.5328 50.1048 28.7257 50.4107 22.518C50.7217 16.3092 46.4163 11.0524 40.7965 10.7748Z" fill="url(#paint0_angular_2390_55515)"/>
-<path opacity="0.75" d="M50.2958 20.127L48.189 19.6433L37.4522 32.6876L37.4438 32.8541C37.5135 32.8722 37.5802 32.9018 37.6447 32.921L37.634 33.1539L39.542 33.2463L39.5409 33.241C39.5904 33.2414 39.6357 33.2482 39.6863 33.2539C45.3009 33.5326 50.1048 28.7255 50.4107 22.5178C50.4549 21.6959 50.411 20.8984 50.2958 20.127Z" fill="#A95508"/>
-<path d="M48.4134 22.4147C48.7196 16.2079 44.414 10.9517 38.7965 10.6746C33.179 10.3974 28.3769 15.2043 28.0707 21.4111C27.7645 27.6178 32.0701 32.8741 37.6876 33.1512C43.3051 33.4284 48.1072 28.6215 48.4134 22.4147Z" fill="url(#paint1_linear_2390_55515)"/>
-<path d="M46.3224 22.3113C46.5658 17.3779 43.1454 13.2001 38.6828 12.9799C34.2202 12.7597 30.4053 16.5806 30.1619 21.514C29.9185 26.4474 33.3388 30.6253 37.8014 30.8454C42.264 31.0656 46.079 27.2447 46.3224 22.3113Z" fill="url(#paint2_linear_2390_55515)"/>
-<path opacity="0.75" d="M46.3224 22.3113C46.5658 17.3779 43.1454 13.2001 38.6828 12.9799C34.2202 12.7597 30.4053 16.5806 30.1619 21.514C29.9185 26.4474 33.3388 30.6253 37.8014 30.8454C42.264 31.0656 46.079 27.2447 46.3224 22.3113Z" fill="#A95508"/>
-<path d="M46.3076 22.6086C46.5429 17.8393 43.2364 13.8005 38.9223 13.5877C34.6082 13.3748 30.9201 17.0686 30.6848 21.8378C30.4495 26.6071 33.7561 30.6459 38.0702 30.8588C42.3843 31.0716 46.0723 27.3779 46.3076 22.6086Z" fill="url(#paint3_linear_2390_55515)"/>
-<path opacity="0.75" d="M35.0785 20.8298L32.9999 21.3333L33.8493 21.9594L34.9438 21.8589L34.9183 22.2061L34.9096 22.561L34.903 22.8248C34.9009 22.9098 34.9016 22.9944 34.9051 23.0788L33 23.3332L33.7938 24.1976L34.9556 24.0909C35.0316 24.8646 35.1824 25.5588 35.408 26.1735C35.6393 26.7816 35.0374 26.6629 35.408 27.0767C36.1333 27.8867 37.1331 28.4145 37.649 28.6092C38.1651 28.7978 38.7487 28.8622 39.3997 28.8024C40.2023 28.7286 40.8997 28.4921 41.492 28.0927C42.0899 27.6928 42.5958 27.1622 43.0098 26.5008L42.3286 25.8553L41.2976 25.169L41.6081 26.1212C41.5216 26.22 41.4181 26.3293 41.2976 26.4493C41.1826 26.5688 41.0425 26.6846 40.8774 26.7966C40.7124 26.9025 40.5197 26.9959 40.2993 27.0766C40.0789 27.1574 39.82 27.2115 39.5225 27.2388C38.748 27.31 38.1099 27.0721 37.6083 26.5251C37.1068 25.972 36.7923 25.1083 36.6646 23.9339L39.9479 23.6322C40.0938 23.6188 40.2101 23.5597 40.2966 23.4549C40.3832 23.3501 40.428 23.2401 40.4308 23.1248L40.4446 22.5698L39.3334 21.9999L36.6057 22.9226C36.6022 22.8382 36.6015 22.7535 36.6036 22.6686L36.6101 22.4047L36.6189 22.0499L36.6443 21.7026L40.7947 21.3212C40.9406 21.3078 41.0569 21.2487 41.1435 21.1439C41.2301 21.0392 41.2748 20.9291 41.2777 20.8139L41.2914 20.2589L40.3334 19.6666L36.779 20.6735C36.9861 19.547 37.3549 18.6749 37.8854 18.0573C38.4216 17.4331 39.0798 17.0852 39.86 17.0135C40.2697 16.9759 40.6022 17.0028 40.8575 17.0943C41.113 17.1798 41.3232 17.2815 41.4883 17.3995C41.6534 17.5174 41.785 17.6294 41.8831 17.7354C41.9871 17.8348 42.0867 17.8801 42.1821 17.8713C42.2719 17.863 42.3426 17.8354 42.3942 17.7883C42.4458 17.7412 42.4947 17.6852 42.5411 17.6204L43.1221 16.8862C42.7481 16.388 42.2955 16.009 41.7644 15.7492C41.2333 15.4893 40.5889 15.3942 39.8312 15.4639C39.225 15.5195 38.6609 15.6864 38.1389 15.9643C37.6224 16.2417 37.1596 16.6141 36.7505 17.0814C36.3415 17.5426 35.9947 18.0919 35.7101 18.7292C35.4257 19.3606 35.2151 20.0607 35.0785 20.8298Z" fill="#A95508"/>
-<path d="M32.8775 20.2737L34.0814 20.1631C34.2181 19.3941 34.4286 18.6939 34.713 18.0626C34.9976 17.4252 35.3444 16.8759 35.7534 16.4147C36.1626 15.9474 36.6254 15.575 37.1418 15.2976C37.6639 15.0197 38.228 14.8529 38.8341 14.7972C39.5918 14.7276 40.2362 14.8227 40.7673 15.0825C41.2984 15.3423 41.751 15.7214 42.125 16.2195L41.5441 16.9538C41.4977 17.0185 41.4487 17.0745 41.3971 17.1216C41.3456 17.1687 41.2749 17.1964 41.1851 17.2046C41.0897 17.2134 40.99 17.1681 40.8861 17.0687C40.7879 16.9627 40.6563 16.8508 40.4912 16.7328C40.3262 16.6148 40.1159 16.5131 39.8604 16.4276C39.6051 16.3361 39.2726 16.3092 38.8629 16.3468C38.0828 16.4185 37.4246 16.7664 36.8883 17.3906C36.3579 18.0083 35.9891 18.8803 35.782 20.0068L40.2944 19.5922L40.2806 20.1472C40.2777 20.2625 40.233 20.3725 40.1464 20.4773C40.0598 20.582 39.9436 20.6411 39.7976 20.6546L35.6473 21.0359C35.6388 21.1517 35.6303 21.2674 35.6219 21.3832C35.619 21.4985 35.6161 21.6167 35.6131 21.738C35.6108 21.829 35.6086 21.917 35.6065 22.0019C35.6044 22.0868 35.6051 22.1715 35.6086 22.2559L39.4475 21.9031L39.4338 22.4581C39.4309 22.5734 39.3862 22.6834 39.2996 22.7882C39.213 22.893 39.0967 22.9521 38.9508 22.9655L35.6675 23.2672C35.7952 24.4416 36.1098 25.3053 36.6112 25.8584C37.1129 26.4054 37.7509 26.6433 38.5254 26.5721C38.8229 26.5448 39.0818 26.4907 39.3022 26.41C39.5226 26.3292 39.7153 26.2358 39.8803 26.1299C40.0455 26.0179 40.1855 25.9021 40.3005 25.7827C40.4211 25.6626 40.5246 25.5533 40.611 25.4546C40.7032 25.3493 40.7837 25.2632 40.8526 25.1963C40.9271 25.129 41.0008 25.0919 41.0737 25.0852C41.1299 25.0801 41.1745 25.0851 41.2078 25.1002C41.2466 25.1147 41.2879 25.1442 41.3316 25.1886L42.0127 25.8341C41.5987 26.4955 41.0928 27.0261 40.4949 27.426C39.9027 27.8254 39.2053 28.0619 38.4027 28.1357C37.7516 28.1955 37.1681 28.1311 36.652 27.9425C36.136 27.7479 35.6899 27.4469 35.3136 27.0397C34.9431 26.6259 34.6422 26.115 34.4109 25.5068C34.1854 24.8921 34.0346 24.1979 33.9586 23.4242L32.7968 23.531L32.822 22.5119L33.9081 22.4121C33.9045 22.3277 33.9038 22.2431 33.906 22.1582C33.9081 22.0732 33.9102 21.9853 33.9125 21.8943C33.9155 21.773 33.9184 21.6547 33.9213 21.5395C33.9298 21.4237 33.9382 21.3079 33.9467 21.1922L32.8523 21.2927L32.8775 20.2737Z" fill="url(#paint4_linear_2390_55515)"/>
-</g>
-<path d="M20.6948 1.16223C20.6205 1.1616 20.5463 1.16097 20.4799 1.15867L17.6179 1.02004L17.6002 1.36141C17.4978 1.38325 17.3971 1.41297 17.2852 1.42862L15.6657 34.2815C15.7702 34.3086 15.8703 34.3531 15.967 34.3819L15.951 34.7311L18.813 34.8698L18.8113 34.8619C18.8856 34.8625 18.9536 34.8727 19.0295 34.8812C27.4514 35.2992 34.6573 28.0886 35.116 18.777C35.5826 9.46374 29.1245 1.57854 20.6948 1.16223Z" fill="url(#paint5_angular_2390_55515)"/>
-<path opacity="0.75" d="M34.9437 15.1906L31.7835 14.4651L15.6782 34.0316L15.6656 34.2813C15.7702 34.3084 15.8703 34.3529 15.967 34.3817L15.9509 34.7309L18.813 34.8695L18.8113 34.8617C18.8855 34.8623 18.9536 34.8725 19.0295 34.881C27.4514 35.299 34.6573 28.0883 35.116 18.7768C35.1823 17.544 35.1164 16.3477 34.9437 15.1906Z" fill="#A95508"/>
-<path d="M32.1201 18.6221C32.5794 9.31192 26.121 1.42756 17.6948 1.01184C9.26857 0.596126 2.06542 7.80648 1.6061 17.1166C1.14677 26.4268 7.60521 34.3111 16.0314 34.7268C24.4576 35.1426 31.6608 27.9322 32.1201 18.6221Z" fill="url(#paint6_linear_2390_55515)"/>
-<path d="M28.9836 18.467C29.3486 11.0668 24.2181 4.80011 17.5243 4.46986C10.8304 4.13961 5.10794 9.87089 4.74285 17.271C4.37775 24.6712 9.50825 30.9379 16.2021 31.2681C22.896 31.5984 28.6185 25.8671 28.9836 18.467Z" fill="url(#paint7_linear_2390_55515)"/>
-<path opacity="0.75" d="M28.9836 18.467C29.3486 11.0668 24.2181 4.80011 17.5243 4.46986C10.8304 4.13961 5.10794 9.87089 4.74285 17.271C4.37775 24.6712 9.50825 30.9379 16.2021 31.2681C22.896 31.5984 28.6185 25.8671 28.9836 18.467Z" fill="#A95508"/>
-<path d="M28.9614 18.913C29.3144 11.7591 24.3546 5.70089 17.8834 5.38163C11.4122 5.06237 5.8802 10.603 5.52725 17.7569C5.1743 24.9108 10.1341 30.969 16.6053 31.2883C23.0764 31.6075 28.6085 26.067 28.9614 18.913Z" fill="url(#paint8_linear_2390_55515)"/>
-<path opacity="0.75" d="M12.1177 16.2449L8.99994 17.0001L10.274 17.9394L11.9156 17.7885L11.8775 18.3095L11.8643 18.8417L11.8545 19.2375C11.8514 19.3649 11.8524 19.4919 11.8577 19.6185L9.00008 20.0001L10.1908 21.2967L11.9334 21.1366C12.0475 22.2971 12.2736 23.3384 12.612 24.2605C12.9589 25.1727 12.0562 24.9945 12.612 25.6152C13.7 26.8303 15.1997 27.6221 15.9736 27.9141C16.7477 28.197 17.6231 28.2935 18.5996 28.2038C19.8035 28.0932 20.8496 27.7383 21.738 27.1393C22.6348 26.5394 23.3937 25.7435 24.0147 24.7514L22.9929 23.7832L21.4463 22.7538L21.9121 24.1821C21.7824 24.3302 21.6272 24.4942 21.4463 24.6742C21.2739 24.8535 21.0638 25.0271 20.8161 25.1951C20.5685 25.354 20.2795 25.4941 19.9489 25.6152C19.6183 25.7364 19.2299 25.8174 18.7838 25.8584C17.622 25.9652 16.6649 25.6083 15.9125 24.7879C15.1603 23.9583 14.6884 22.6627 14.4969 20.901L19.4218 20.4485C19.6407 20.4284 19.8151 20.3397 19.945 20.1826C20.0749 20.0254 20.142 19.8604 20.1462 19.6875L20.1669 18.855L18.5001 18.0001L14.4085 19.3841C14.4033 19.2575 14.4022 19.1305 14.4054 19.0031L14.4152 18.6073L14.4284 18.0751L14.4665 17.5541L20.6921 16.9821C20.911 16.962 21.0854 16.8733 21.2152 16.7162C21.3451 16.559 21.4122 16.394 21.4165 16.2211L21.4371 15.3886L20.0001 14.5001L14.6685 16.0105C14.9792 14.3207 15.5324 13.0126 16.3281 12.0862C17.1325 11.1499 18.1198 10.628 19.29 10.5205C19.9045 10.464 20.4033 10.5044 20.7863 10.6417C21.1695 10.7699 21.4848 10.9225 21.7324 11.0994C21.98 11.2764 22.1775 11.4444 22.3247 11.6033C22.4806 11.7524 22.6301 11.8203 22.7732 11.8072C22.9079 11.7948 23.014 11.7533 23.0913 11.6826C23.1686 11.612 23.2421 11.5281 23.3117 11.4309L24.1832 10.3296C23.6221 9.5823 22.9433 9.01377 22.1466 8.62401C21.3499 8.23426 20.3833 8.09159 19.2468 8.19602C18.3376 8.27957 17.4914 8.52979 16.7083 8.9467C15.9337 9.36284 15.2395 9.92136 14.6257 10.6223C14.0122 11.3141 13.492 12.138 13.0651 13.0941C12.6385 14.0411 12.3227 15.0914 12.1177 16.2449Z" fill="#8A4505"/>
-<path d="M8.8163 15.4107L10.6221 15.2448C10.8271 14.0912 11.1429 13.0409 11.5695 12.094C11.9964 11.1379 12.5166 10.3139 13.1301 9.62213C13.7439 8.92122 14.4381 8.3627 15.2127 7.94656C15.9958 7.52965 16.842 7.27942 17.7512 7.19588C18.8877 7.09145 19.8543 7.23411 20.651 7.62387C21.4477 8.01363 22.1265 8.58215 22.6876 9.32944L21.8161 10.4308C21.7465 10.5279 21.673 10.6118 21.5957 10.6825C21.5184 10.7531 21.4123 10.7947 21.2776 10.807C21.1345 10.8202 20.985 10.7522 20.8291 10.6032C20.6819 10.4442 20.4844 10.2763 20.2368 10.0993C19.9892 9.92234 19.6738 9.76976 19.2906 9.64157C18.9077 9.50429 18.4089 9.46388 17.7943 9.52035C16.6242 9.62788 15.6369 10.1498 14.8325 11.0861C14.0368 12.0125 13.4836 13.3206 13.1729 15.0104L19.9415 14.3884L19.9209 15.2209C19.9166 15.3938 19.8495 15.5588 19.7196 15.716C19.5897 15.8732 19.4154 15.9618 19.1965 15.9819L12.9709 16.554C12.9582 16.7276 12.9455 16.9013 12.9328 17.0749C12.9285 17.2478 12.9241 17.4252 12.9196 17.6072C12.9162 17.7437 12.9129 17.8756 12.9098 18.003C12.9066 18.1304 12.9077 18.2573 12.9129 18.3839L18.6713 17.8548L18.6506 18.6873C18.6464 18.8602 18.5793 19.0252 18.4494 19.1824C18.3195 19.3396 18.1451 19.4282 17.9262 19.4484L13.0013 19.9009C13.1928 21.6625 13.6647 22.9581 14.4169 23.7877C15.1693 24.6082 16.1264 24.9651 17.2881 24.8583C17.7343 24.8173 18.1227 24.7362 18.4533 24.6151C18.7839 24.4939 19.0729 24.3539 19.3205 24.195C19.5682 24.027 19.7783 23.8533 19.9507 23.6741C20.1316 23.4941 20.2868 23.33 20.4165 23.182C20.5548 23.024 20.6756 22.8949 20.7789 22.7946C20.8906 22.6936 21.0012 22.638 21.1106 22.628C21.1948 22.6202 21.2618 22.6277 21.3116 22.6504C21.3699 22.6722 21.4318 22.7165 21.4973 22.7831L22.5191 23.7513C21.8981 24.7434 21.1392 25.5393 20.2424 26.1391C19.354 26.7382 18.3079 27.093 17.104 27.2037C16.1275 27.2934 15.2521 27.1968 14.478 26.9139C13.7041 26.6219 13.0349 26.1705 12.4705 25.5597C11.9147 24.939 11.4633 24.1726 11.1164 23.2604C10.778 22.3383 10.5519 21.297 10.4378 20.1364L8.69518 20.2966L8.73307 18.768L10.3621 18.6183C10.3568 18.4917 10.3558 18.3647 10.3589 18.2374C10.3621 18.11 10.3654 17.9781 10.3687 17.8416C10.3732 17.6596 10.3776 17.4822 10.3819 17.3093C10.3946 17.1357 10.4073 16.962 10.42 16.7884L8.77841 16.9392L8.8163 15.4107Z" fill="url(#paint9_linear_2390_55515)"/>
-<defs>
-<radialGradient id="paint0_angular_2390_55515" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.7457 23.7682) rotate(119.031) scale(46.8954 61.4718)">
-<stop offset="0.413979" stop-color="#BF723B"/>
-<stop offset="0.512607" stop-color="#DD9A2B"/>
-<stop offset="0.601154" stop-color="#F6D74C"/>
-<stop offset="0.656158" stop-color="#D1880D"/>
-<stop offset="0.759746" stop-color="#A05B11"/>
-<stop offset="0.889115" stop-color="#A05B11"/>
-<stop offset="0.947304" stop-color="#F5B11B"/>
-<stop offset="0.972422" stop-color="#BE7D1B"/>
-</radialGradient>
-<linearGradient id="paint1_linear_2390_55515" x1="38.6362" y1="35.6388" x2="51.6107" y2="17.5605" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.12897" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2390_55515" x1="44.3045" y1="30.8584" x2="46.7517" y2="16.8133" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.260417" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint3_linear_2390_55515" x1="36.811" y1="31.2724" x2="47.3539" y2="16.3654" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.178858" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint4_linear_2390_55515" x1="28.6618" y1="27.306" x2="44.0555" y2="29.198" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.260417" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<radialGradient id="paint5_angular_2390_55515" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22.1186 20.6523) rotate(119.031) scale(70.3432 92.2077)">
-<stop offset="0.413979" stop-color="#BF723B"/>
-<stop offset="0.512607" stop-color="#DD9A2B"/>
-<stop offset="0.601154" stop-color="#F6D74C"/>
-<stop offset="0.656158" stop-color="#D1880D"/>
-<stop offset="0.759746" stop-color="#A05B11"/>
-<stop offset="0.889115" stop-color="#A05B11"/>
-<stop offset="0.947304" stop-color="#F5B11B"/>
-<stop offset="0.972422" stop-color="#BE7D1B"/>
-</radialGradient>
-<linearGradient id="paint6_linear_2390_55515" x1="17.4544" y1="38.4582" x2="36.916" y2="11.3407" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.12897" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint7_linear_2390_55515" x1="25.9567" y1="31.2877" x2="29.6276" y2="10.2199" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.260417" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint8_linear_2390_55515" x1="14.7165" y1="31.9087" x2="30.5309" y2="9.54829" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.178858" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-<linearGradient id="paint9_linear_2390_55515" x1="2.49277" y1="25.9591" x2="25.5833" y2="28.7972" gradientUnits="userSpaceOnUse">
-<stop stop-color="#BF723B"/>
-<stop offset="0.260417" stop-color="#DD9A2B"/>
-<stop offset="0.453125" stop-color="#F6D74C"/>
-<stop offset="0.75" stop-color="#D1880D"/>
-<stop offset="1" stop-color="#A05B11"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/assets/icons/ico/compare.svg b/src/assets/icons/ico/compare.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c7f89be25af049352e6ad57683bcd058451a4601
--- /dev/null
+++ b/src/assets/icons/ico/compare.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#504839" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M16.9375 9.125C16.9375 8.87636 16.8387 8.6379 16.6629 8.46209C16.4871 8.28627 16.2487 8.1875 16 8.1875C15.7514 8.1875 15.5129 8.28627 15.3371 8.46209C15.1613 8.6379 15.0625 8.87636 15.0625 9.125V9.76C13.1255 9.80486 11.194 9.98615 9.28251 10.3025C9.03719 10.3433 8.81811 10.4798 8.67347 10.6821C8.52883 10.8844 8.47049 11.1359 8.51126 11.3812C8.55204 11.6266 8.6886 11.8457 8.89091 11.9903C9.09321 12.1349 9.34469 12.1933 9.59001 12.1525L9.75251 12.1263L8.26751 18.0638C8.21972 18.2557 8.23389 18.4579 8.30798 18.6413C8.38207 18.8248 8.5123 18.9801 8.68001 19.085C9.3757 19.5198 10.1796 19.7502 11 19.75C11.8204 19.7502 12.6243 19.5198 13.32 19.085C13.488 18.98 13.6184 18.8245 13.6925 18.6408C13.7666 18.4571 13.7806 18.2547 13.7325 18.0625L12.17 11.8125C13.1316 11.7177 14.0965 11.6589 15.0625 11.6362V21.015C13.9592 21.05 12.8729 21.1442 11.8038 21.2975C11.5576 21.3328 11.3356 21.4645 11.1865 21.6635C11.0374 21.8625 10.9735 22.1126 11.0088 22.3587C11.0441 22.6049 11.1757 22.827 11.3747 22.976C11.5738 23.1251 11.8239 23.1891 12.07 23.1537C14.6767 22.7808 17.3233 22.7808 19.93 23.1537C20.0519 23.1712 20.176 23.1645 20.2953 23.134C20.4146 23.1036 20.5267 23.0499 20.6253 22.976C20.7238 22.9022 20.8069 22.8097 20.8697 22.7038C20.9325 22.5979 20.9738 22.4806 20.9913 22.3587C21.0087 22.2369 21.0021 22.1127 20.9716 21.9934C20.9411 21.8741 20.8874 21.762 20.8136 21.6635C20.7397 21.5649 20.6472 21.4819 20.5413 21.4191C20.4354 21.3563 20.3181 21.315 20.1963 21.2975C19.116 21.1441 18.0281 21.0498 16.9375 21.015V11.6362C17.9108 11.6596 18.875 11.7179 19.83 11.8113L18.2675 18.0625C18.2193 18.2545 18.2331 18.4569 18.307 18.6406C18.3809 18.8242 18.511 18.9798 18.6788 19.085C19.3745 19.5198 20.1784 19.7502 20.9988 19.75C21.8191 19.7502 22.6231 19.5198 23.3188 19.085C23.4867 18.98 23.6171 18.8245 23.6912 18.6408C23.7653 18.4571 23.7793 18.2547 23.7313 18.0625L22.2463 12.125L22.4088 12.1525C22.6541 12.1934 22.9056 12.1353 23.1081 11.9907C23.3105 11.8462 23.4472 11.6272 23.4881 11.3819C23.5291 11.1365 23.4709 10.885 23.3264 10.6826C23.1819 10.4802 22.9628 10.3434 22.7175 10.3025C20.806 9.98615 18.8745 9.80486 16.9375 9.76V9.125ZM10.275 17.7688C10.7477 17.912 11.2523 17.912 11.725 17.7688L11 14.865L10.275 17.7688ZM21 17.875C20.7536 17.8756 20.5085 17.8398 20.2725 17.7688L21 14.865L21.725 17.7688C21.4899 17.8396 21.2456 17.8754 21 17.875Z"
+ fill="#FFF1C5" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/legendComparisoPrevious.svg b/src/assets/icons/ico/legendComparisoPrevious.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8523b05083cd712bca5edd07711ac90236b7500b
--- /dev/null
+++ b/src/assets/icons/ico/legendComparisoPrevious.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M0 -0.75C0.552285 -0.75 1 -1.19772 1 -1.75C1 -2.30228 0.552285 -2.75 0 -2.75C-0.552285 -2.75 -1 -2.30228 -1 -1.75C-1 -1.19772 -0.552285 -0.75 0 -0.75ZM4 -0.75C4.55228 -0.75 5 -1.19772 5 -1.75C5 -2.30228 4.55228 -2.75 4 -2.75C3.44772 -2.75 3 -2.30228 3 -1.75C3 -1.19772 3.44772 -0.75 4 -0.75ZM9 -1.75C9 -1.19772 8.55229 -0.75 8 -0.75C7.44771 -0.75 7 -1.19772 7 -1.75C7 -2.30228 7.44771 -2.75 8 -2.75C8.55229 -2.75 9 -2.30228 9 -1.75ZM12 -0.75C12.5523 -0.75 13 -1.19772 13 -1.75C13 -2.30228 12.5523 -2.75 12 -2.75C11.4477 -2.75 11 -2.30228 11 -1.75C11 -1.19772 11.4477 -0.75 12 -0.75ZM17 -1.75C17 -1.19772 16.5523 -0.75 16 -0.75C15.4477 -0.75 15 -1.19772 15 -1.75C15 -2.30228 15.4477 -2.75 16 -2.75C16.5523 -2.75 17 -2.30228 17 -1.75ZM0 3.25C0.552285 3.25 1 2.80228 1 2.25C1 1.69772 0.552285 1.25 0 1.25C-0.552285 1.25 -1 1.69772 -1 2.25C-1 2.80228 -0.552285 3.25 0 3.25ZM5 2.25C5 2.80228 4.55228 3.25 4 3.25C3.44772 3.25 3 2.80228 3 2.25C3 1.69772 3.44772 1.25 4 1.25C4.55228 1.25 5 1.69772 5 2.25ZM8 3.25C8.55229 3.25 9 2.80228 9 2.25C9 1.69772 8.55229 1.25 8 1.25C7.44771 1.25 7 1.69772 7 2.25C7 2.80228 7.44771 3.25 8 3.25ZM13 2.25C13 2.80228 12.5523 3.25 12 3.25C11.4477 3.25 11 2.80228 11 2.25C11 1.69772 11.4477 1.25 12 1.25C12.5523 1.25 13 1.69772 13 2.25ZM16 3.25C16.5523 3.25 17 2.80228 17 2.25C17 1.69772 16.5523 1.25 16 1.25C15.4477 1.25 15 1.69772 15 2.25C15 2.80228 15.4477 3.25 16 3.25ZM1 6.25C1 6.80229 0.552285 7.25 0 7.25C-0.552285 7.25 -1 6.80229 -1 6.25C-1 5.69771 -0.552285 5.25 0 5.25C0.552285 5.25 1 5.69771 1 6.25ZM4 7.25C4.55228 7.25 5 6.80229 5 6.25C5 5.69771 4.55228 5.25 4 5.25C3.44772 5.25 3 5.69771 3 6.25C3 6.80229 3.44772 7.25 4 7.25ZM9 6.25C9 6.80229 8.55229 7.25 8 7.25C7.44771 7.25 7 6.80229 7 6.25C7 5.69771 7.44771 5.25 8 5.25C8.55229 5.25 9 5.69771 9 6.25ZM12 7.25C12.5523 7.25 13 6.80229 13 6.25C13 5.69771 12.5523 5.25 12 5.25C11.4477 5.25 11 5.69771 11 6.25C11 6.80229 11.4477 7.25 12 7.25ZM17 6.25C17 6.80229 16.5523 7.25 16 7.25C15.4477 7.25 15 6.80229 15 6.25C15 5.69771 15.4477 5.25 16 5.25C16.5523 5.25 17 5.69771 17 6.25ZM0 11.25C0.552285 11.25 1 10.8023 1 10.25C1 9.69771 0.552285 9.25 0 9.25C-0.552285 9.25 -1 9.69771 -1 10.25C-1 10.8023 -0.552285 11.25 0 11.25ZM5 10.25C5 10.8023 4.55228 11.25 4 11.25C3.44772 11.25 3 10.8023 3 10.25C3 9.69771 3.44772 9.25 4 9.25C4.55228 9.25 5 9.69771 5 10.25ZM8 11.25C8.55229 11.25 9 10.8023 9 10.25C9 9.69771 8.55229 9.25 8 9.25C7.44771 9.25 7 9.69771 7 10.25C7 10.8023 7.44771 11.25 8 11.25ZM13 10.25C13 10.8023 12.5523 11.25 12 11.25C11.4477 11.25 11 10.8023 11 10.25C11 9.69771 11.4477 9.25 12 9.25C12.5523 9.25 13 9.69771 13 10.25ZM16 11.25C16.5523 11.25 17 10.8023 17 10.25C17 9.69771 16.5523 9.25 16 9.25C15.4477 9.25 15 9.69771 15 10.25C15 10.8023 15.4477 11.25 16 11.25ZM1 14.25C1 14.8023 0.552285 15.25 0 15.25C-0.552285 15.25 -1 14.8023 -1 14.25C-1 13.6977 -0.552285 13.25 0 13.25C0.552285 13.25 1 13.6977 1 14.25ZM4 15.25C4.55228 15.25 5 14.8023 5 14.25C5 13.6977 4.55228 13.25 4 13.25C3.44772 13.25 3 13.6977 3 14.25C3 14.8023 3.44772 15.25 4 15.25ZM9 14.25C9 14.8023 8.55229 15.25 8 15.25C7.44771 15.25 7 14.8023 7 14.25C7 13.6977 7.44771 13.25 8 13.25C8.55229 13.25 9 13.6977 9 14.25ZM12 15.25C12.5523 15.25 13 14.8023 13 14.25C13 13.6977 12.5523 13.25 12 13.25C11.4477 13.25 11 13.6977 11 14.25C11 14.8023 11.4477 15.25 12 15.25ZM17 14.25C17 14.8023 16.5523 15.25 16 15.25C15.4477 15.25 15 14.8023 15 14.25C15 13.6977 15.4477 13.25 16 13.25C16.5523 13.25 17 13.6977 17 14.25ZM0 19.25C0.552285 19.25 1 18.8023 1 18.25C1 17.6977 0.552285 17.25 0 17.25C-0.552285 17.25 -1 17.6977 -1 18.25C-1 18.8023 -0.552285 19.25 0 19.25ZM5 18.25C5 18.8023 4.55228 19.25 4 19.25C3.44772 19.25 3 18.8023 3 18.25C3 17.6977 3.44772 17.25 4 17.25C4.55228 17.25 5 17.6977 5 18.25ZM8 19.25C8.55229 19.25 9 18.8023 9 18.25C9 17.6977 8.55229 17.25 8 17.25C7.44771 17.25 7 17.6977 7 18.25C7 18.8023 7.44771 19.25 8 19.25ZM13 18.25C13 18.8023 12.5523 19.25 12 19.25C11.4477 19.25 11 18.8023 11 18.25C11 17.6977 11.4477 17.25 12 17.25C12.5523 17.25 13 17.6977 13 18.25ZM16 19.25C16.5523 19.25 17 18.8023 17 18.25C17 17.6977 16.5523 17.25 16 17.25C15.4477 17.25 15 17.6977 15 18.25C15 18.8023 15.4477 19.25 16 19.25Z"
+ fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/legendComparison.svg b/src/assets/icons/ico/legendComparison.svg
index d7ba8f3e3e09c1218713974a3ee9a4e15f54d0dc..ec1f45adbd5f9ba8eab530c820bf7c721d97f109 100644
--- a/src/assets/icons/ico/legendComparison.svg
+++ b/src/assets/icons/ico/legendComparison.svg
@@ -1,4 +1,4 @@
-<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 12.5C0 11.1193 1.11929 10 2.5 10V10C3.88071 10 5 11.1193 5 12.5V21H0V12.5Z" fill="currentColor"/>
-<path d="M7 2.5C7 1.11929 8.11929 0 9.5 0V0C10.8807 0 12 1.11929 12 2.5V21H7V2.5Z" fill="currentColor"/>
-</svg>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect x="0.5" y="0.75" width="15" height="15" rx="1.5" fill="currentColor" />
+ <rect x="0.5" y="0.75" width="15" height="15" rx="1.5" stroke="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss b/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss
index 8ffb59c46e66c02fcc81c91c3ca32c03d6ea3f6f..04fe44c717619c26a0807c1c5a4ab9e42b7e1028 100644
--- a/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss
+++ b/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss
@@ -68,8 +68,7 @@
width: 80px;
&:hover,
&.active {
- // V4TODO create variable
- background: rgba(255, 255, 255, 0.1);
+ background: $bg-active;
}
.MuiIconButton-label {
diff --git a/src/components/CommonKit/FormNavigation/formNavigation.scss b/src/components/CommonKit/FormNavigation/formNavigation.scss
index c954b8d9fa16d6c5cedec0b8ebf08792f4748418..2daa873fa6232d7d882a84226513f37ed2dc15b8 100644
--- a/src/components/CommonKit/FormNavigation/formNavigation.scss
+++ b/src/components/CommonKit/FormNavigation/formNavigation.scss
@@ -2,7 +2,8 @@
@import 'src/styles/base/breakpoint';
.profile-navigation {
- border-top: 1px solid $grey-dark;
+ border-top: 1px solid $grey-2;
+ background-color: $grey-1;
display: flex;
justify-content: center;
align-items: center;
@@ -10,7 +11,6 @@
padding: 1rem;
@media (min-width: $width-tablet) {
- background: $dark-light-2;
height: 3rem;
}
diff --git a/src/components/Consumption/ChartCompare/ChartCompare.scss b/src/components/Consumption/ChartCompare/ChartCompare.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8a806a68c8efdd725cee8923cff829103c00979e
--- /dev/null
+++ b/src/components/Consumption/ChartCompare/ChartCompare.scss
@@ -0,0 +1,92 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.chartCompareContainer {
+ padding-inline: 1rem;
+ margin-bottom: 1rem;
+}
+
+.chartCompare {
+ width: 100%;
+ background-color: $grey-1;
+ border: 1px solid $grey-2;
+ padding: 16px;
+ border-radius: 4px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ margin: auto;
+ padding-top: 1rem;
+ max-width: 45.75rem;
+}
+
+.compareDetails {
+ position: relative;
+ border: 1px solid $grey-2;
+ border-radius: 4px;
+ padding: 8px;
+ width: 100%;
+ display: flex;
+ box-sizing: border-box;
+ flex-direction: row;
+ justify-content: center;
+ gap: 12px;
+ .bloc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ gap: 12px;
+ }
+
+ .verticalLine {
+ content: '';
+ width: 0;
+ height: 80%;
+ position: absolute;
+ border: 1px solid $grey-2;
+ }
+}
+.compareLegend {
+ display: flex;
+ gap: 1rem;
+ font-weight: 700;
+ max-width: 45.75rem;
+ margin: auto;
+
+ .electricity {
+ color: $elec-color;
+ &.compare {
+ color: $elec-compare-color;
+ }
+ }
+
+ .gas {
+ color: $gas-color;
+ &.compare {
+ color: $gas-compare-color;
+ }
+ }
+
+ .water {
+ color: $water-color;
+ &.compare {
+ color: $water-compare-color;
+ }
+ }
+
+ .multifluid {
+ color: $multi-color;
+ &.compare {
+ color: $multi-compare-color;
+ }
+ }
+
+ div {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ }
+}
diff --git a/src/components/Consumption/ChartCompare/ChartCompare.test.tsx b/src/components/Consumption/ChartCompare/ChartCompare.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a2d37530792e42b557966cb18bde7928354b96bd
--- /dev/null
+++ b/src/components/Consumption/ChartCompare/ChartCompare.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { FluidType, TimeStep } from 'enums'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { graphData } from 'tests/__mocks__/chartData.mock'
+import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
+import { ChartCompare } from './ChartCompare'
+
+describe('ChartCompare component', () => {
+ it('should format multifluid value AND compared value', async () => {
+ const store = createMockEcolyoStore({
+ chart: {
+ ...mockChartState,
+ currentDatachart: graphData,
+ showCompare: true,
+ currentTimeStep: TimeStep.DAY,
+ },
+ })
+ const { container } = render(
+ <Provider store={store}>
+ <ChartCompare fluidType={FluidType.MULTIFLUID} />
+ </Provider>
+ )
+ await waitFor(() => null, { container })
+ expect(screen.getByText('130,84 €')).toBeInTheDocument()
+ expect(screen.getByText('110,66 €')).toBeInTheDocument()
+ })
+})
diff --git a/src/components/Consumption/ChartCompare/ChartCompare.tsx b/src/components/Consumption/ChartCompare/ChartCompare.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..da0417a96f15fe93a51ce841c7b9351f4f68c0fa
--- /dev/null
+++ b/src/components/Consumption/ChartCompare/ChartCompare.tsx
@@ -0,0 +1,183 @@
+import Coin from 'assets/icons/ico/coin.svg'
+import CompareIcon from 'assets/icons/ico/compare.svg'
+import LegendComparisonIcon from 'assets/icons/ico/legendComparison.svg'
+// import LegendComparisonPreviousIcon from 'assets/icons/ico/legendComparisonPrevious.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { FluidType, TimeStep } from 'enums'
+import { Dataload } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import ConsumptionService from 'services/consumption.service'
+import ConverterService from 'services/converter.service'
+import { setShowCompare } from 'store/chart/chart.slice'
+import { useAppDispatch, useAppSelector } from 'store/hooks'
+import { convertDateToShortDateString } from 'utils/date'
+import { formatNumberValues, getFluidName } from 'utils/utils'
+import './ChartCompare.scss'
+
+export const ChartCompare = ({ fluidType }: { fluidType: FluidType }) => {
+ const { t } = useI18n()
+ const client = useClient()
+ const {
+ chart: { currentTimeStep, showCompare, currentDatachart },
+ } = useAppSelector(state => state.ecolyo)
+ const dispatch = useAppDispatch()
+ const [totalValue, setTotalValue] = useState('-----')
+ const [previousTotalValue, setPreviousTotalValue] = useState('-----')
+
+ const handleChangeSwitch = () => {
+ dispatch(setShowCompare(!showCompare))
+ }
+
+ const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase()
+ const fluidName = getFluidName(fluidType)
+
+ const computeTotal = useCallback(
+ async (
+ dataload: Dataload[],
+ setState: React.Dispatch<React.SetStateAction<string>>
+ ) => {
+ const consumptionService = new ConsumptionService(client)
+ const activateHalfHourLoad =
+ fluidType === FluidType.ELECTRICITY
+ ? await consumptionService.checkDoctypeEntries(
+ FluidType.ELECTRICITY,
+ TimeStep.HALF_AN_HOUR
+ )
+ : false
+
+ const converterService = new ConverterService()
+ let total = 0
+ let totalPrice = 0
+
+ dataload.forEach(data => {
+ if (data.value !== -1) {
+ total += data.value
+ totalPrice += converterService.LoadToEuro(
+ data.value,
+ fluidType,
+ data.price
+ )
+ }
+ })
+
+ let displayedValue
+ if (
+ total <= 0 ||
+ (!activateHalfHourLoad &&
+ currentTimeStep === TimeStep.HALF_AN_HOUR &&
+ fluidType === FluidType.ELECTRICITY)
+ ) {
+ displayedValue = '-----'
+ } else if (fluidType === FluidType.MULTIFLUID) {
+ displayedValue = formatNumberValues(total).toString()
+ } else if (totalPrice <= 0) {
+ displayedValue = formatNumberValues(
+ converterService.LoadToEuro(total, fluidType)
+ ).toString()
+ } else {
+ displayedValue = formatNumberValues(totalPrice).toString()
+ }
+
+ setState(displayedValue)
+ },
+ [client, currentTimeStep, fluidType]
+ )
+
+ useEffect(() => {
+ let subscribed = true
+ const fetchTotal = async () => {
+ await computeTotal(currentDatachart.actualData, setTotalValue)
+ if (currentDatachart.comparisonData) {
+ await computeTotal(
+ currentDatachart.comparisonData,
+ setPreviousTotalValue
+ )
+ }
+ }
+ subscribed && fetchTotal()
+ return () => {
+ subscribed = false
+ }
+ }, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
+
+ if (currentTimeStep !== TimeStep.YEAR) {
+ return (
+ <div className="chartCompareContainer">
+ <div className="chartCompare">
+ <div>
+ <StyledSwitch
+ fluidType={fluidType}
+ checked={showCompare}
+ aria-label={t('consumption.accessibility.checkbox_compare')}
+ onClick={handleChangeSwitch}
+ />
+ <span>{t(`timestep.${lowercaseTimeStep}.compareLabel`)}</span>
+ </div>
+
+ {showCompare && (
+ <>
+ <div className="compareLegend">
+ <div>
+ <StyledIcon
+ icon={LegendComparisonIcon}
+ className={`${fluidName} compare`}
+ />
+ <span className={`${fluidName} compare`}>
+ {t(`timestep.${lowercaseTimeStep}.last`)}
+ </span>
+ </div>
+ <div>
+ <StyledIcon
+ icon={LegendComparisonIcon}
+ className={fluidName}
+ />
+ <span className={fluidName}>
+ {t(`timestep.${lowercaseTimeStep}.current`)}
+ </span>
+ </div>
+ </div>
+
+ <div>
+ {convertDateToShortDateString(
+ currentDatachart.actualData,
+ currentTimeStep
+ )}
+ </div>
+
+ <div className="compareDetails">
+ <div className="bloc">
+ <StyledIcon icon={CompareIcon} size={36} />
+ <span className="text-24-bold price">
+ {previousTotalValue} €
+ </span>
+ <span className="date">
+ {convertDateToShortDateString(
+ currentDatachart.comparisonData,
+ currentTimeStep
+ )}
+ </span>
+ </div>
+ <div className="verticalLine" />
+ <div className="bloc">
+ <StyledIcon className="pile-icon" icon={Coin} size={32} />
+ <span className="text-24-bold price">{totalValue} €</span>
+ <span className="date">
+ {convertDateToShortDateString(
+ currentDatachart.actualData,
+ currentTimeStep
+ )}
+ </span>
+ </div>
+ </div>
+ </>
+ )}
+ </div>
+ </div>
+ )
+ }
+
+ return null
+}
diff --git a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
index 3ffa25603c8e63bbbe5fdc34d66d4fb0d5050a56..d681a25bda12a76c79d6f0c2937f012b728b44aa 100644
--- a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
+++ b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
@@ -1,10 +1,18 @@
-import { render } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
import { FluidType } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { graphData } from 'tests/__mocks__/chartData.mock'
+import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
import ConsumptionDetails from './ConsumptionDetails'
+const mockChartStore = createMockEcolyoStore({
+ chart: {
+ ...mockChartState,
+ currentDatachart: graphData,
+ },
+})
+
describe('ConsumptionDetails component', () => {
const store = createMockEcolyoStore()
@@ -16,4 +24,36 @@ describe('ConsumptionDetails component', () => {
)
expect(container).toMatchSnapshot()
})
+
+ it('should be rendered correctly and render euro value', async () => {
+ const { container } = render(
+ <Provider store={mockChartStore}>
+ <ConsumptionDetails fluidType={FluidType.ELECTRICITY} />
+ </Provider>
+ )
+ await waitFor(() => null, { container })
+ expect(container).toMatchSnapshot()
+ expect(screen.getByText('22,77')).toBeInTheDocument()
+ })
+
+ it('should format multifluid value', async () => {
+ const { container } = render(
+ <Provider store={mockChartStore}>
+ <ConsumptionDetails fluidType={FluidType.MULTIFLUID} />
+ </Provider>
+ )
+ await waitFor(() => null, { container })
+ expect(screen.getByText('130,84')).toBeInTheDocument()
+ })
+
+ it('should display ----- when half an hour electricity data is not activated', async () => {
+ const store = createMockEcolyoStore()
+ const { container } = render(
+ <Provider store={store}>
+ <ConsumptionDetails fluidType={FluidType.ELECTRICITY} />
+ </Provider>
+ )
+ await waitFor(() => null, { container })
+ expect(screen.getByText('-----')).toBeInTheDocument()
+ })
})
diff --git a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
index 32b9c1021605b43b032f5638bae0e529fea80d13..34f7fe9fbdb8012cec342eb112748a99d873b98a 100644
--- a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
+++ b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
@@ -1,37 +1,103 @@
-import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
-import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import Coin from 'assets/icons/ico/coin.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useClient } from 'cozy-client'
import { FluidType, TimeStep } from 'enums'
-import React from 'react'
+import { Dataload } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import ConsumptionService from 'services/consumption.service'
+import ConverterService from 'services/converter.service'
import { useAppSelector } from 'store/hooks'
import { convertDateToShortDateString } from 'utils/date'
+import { formatNumberValues } from 'utils/utils'
import './consumptionDetails.scss'
const ConsumptionDetails = ({ fluidType }: { fluidType: FluidType }) => {
- const { t } = useI18n()
- const { currentTimeStep, currentDatachart, showCompare } = useAppSelector(
+ const client = useClient()
+ const { currentTimeStep, currentDatachart } = useAppSelector(
state => state.ecolyo.chart
)
+ const [totalValue, setTotalValue] = useState<string>('-----')
+
+ const computeTotal = useCallback(
+ async (
+ dataload: Dataload[],
+ setState: React.Dispatch<React.SetStateAction<string>>
+ ) => {
+ const consumptionService = new ConsumptionService(client)
+ const activateHalfHourLoad =
+ fluidType === FluidType.ELECTRICITY
+ ? await consumptionService.checkDoctypeEntries(
+ FluidType.ELECTRICITY,
+ TimeStep.HALF_AN_HOUR
+ )
+ : false
+
+ const converterService = new ConverterService()
+ let total = 0
+ let totalPrice = 0
+
+ dataload.forEach(data => {
+ if (data.value !== -1) {
+ total += data.value
+ totalPrice += converterService.LoadToEuro(
+ data.value,
+ fluidType,
+ data.price
+ )
+ }
+ })
+
+ let displayedValue
+ if (
+ total <= 0 ||
+ (!activateHalfHourLoad &&
+ currentTimeStep === TimeStep.HALF_AN_HOUR &&
+ fluidType === FluidType.ELECTRICITY)
+ ) {
+ displayedValue = '-----'
+ } else if (fluidType === FluidType.MULTIFLUID) {
+ displayedValue = formatNumberValues(total).toString()
+ } else if (totalPrice <= 0) {
+ displayedValue = formatNumberValues(
+ converterService.LoadToEuro(total, fluidType)
+ ).toString()
+ } else {
+ displayedValue = formatNumberValues(totalPrice).toString()
+ }
+
+ setState(displayedValue)
+ },
+ [client, currentTimeStep, fluidType]
+ )
+
+ useEffect(() => {
+ let subscribed = true
+ const fetchTotal = async () => {
+ await computeTotal(currentDatachart.actualData, setTotalValue)
+ }
+ subscribed && fetchTotal()
+ return () => {
+ subscribed = false
+ }
+ }, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
+
return (
<div className="consumption-details-root">
<div className="consumption-details-content">
- <div className="consumption-details-header text-16-normal-uppercase details-title">
+ <div className="text-16-normal">
{convertDateToShortDateString(
currentDatachart.actualData,
currentTimeStep
)}
- {showCompare && (
- <div className="consumption-details-header compare">
- {t('consumption.compared')}
- {currentTimeStep === TimeStep.DAY ? ' ' : ' AU '}
- {convertDateToShortDateString(
- currentDatachart.comparisonData,
- currentTimeStep
- )}
- </div>
- )}
</div>
- <TotalConsumption fluidType={fluidType} />
+ <div className="icon-line">
+ <StyledIcon className="euro-icon" icon={Coin} size={32} />
+ <div>
+ <span className="euro-value">{totalValue}</span>
+ <span className="euro-symbol"> €</span>
+ </div>
+ </div>
</div>
</div>
)
diff --git a/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap b/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
index 3c0517d1cdd8cbda84246c18ace6328b9def3cca..3a1d9aefc32f19e65981147f7cfb974947a2893b 100644
--- a/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
+++ b/src/components/Consumption/ConsumptionDetails/__snapshots__/ConsumptionDetails.spec.tsx.snap
@@ -9,16 +9,16 @@ exports[`ConsumptionDetails component should be rendered correctly 1`] = `
class="consumption-details-content"
>
<div
- class="consumption-details-header text-16-normal-uppercase details-title"
+ class="text-16-normal"
/>
<div
- class="icon-line "
+ class="icon-line"
>
<svg
aria-hidden="true"
- class="pile-icon styles__icon___23x3R"
- height="36"
- width="36"
+ class="euro-icon styles__icon___23x3R"
+ height="32"
+ width="32"
>
<use
xlink:href="#test-file-stub"
@@ -41,3 +41,47 @@ exports[`ConsumptionDetails component should be rendered correctly 1`] = `
</div>
</div>
`;
+
+exports[`ConsumptionDetails component should be rendered correctly and render euro value 1`] = `
+<div>
+ <div
+ class="consumption-details-root"
+ >
+ <div
+ class="consumption-details-content"
+ >
+ <div
+ class="text-16-normal"
+ >
+ Bilan du 01/10 au 03/10
+ </div>
+ <div
+ class="icon-line"
+ >
+ <svg
+ aria-hidden="true"
+ class="euro-icon styles__icon___23x3R"
+ height="32"
+ width="32"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div>
+ <span
+ class="euro-value"
+ >
+ 22,77
+ </span>
+ <span
+ class="euro-symbol"
+ >
+ €
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss b/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss
index 8935757ac095da52dcabaf4cf072c73b30525f5b..d6e8893879aaf3811494bf24e82b2eccf5c2c436 100644
--- a/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss
+++ b/src/components/Consumption/ConsumptionDetails/consumptionDetails.scss
@@ -13,25 +13,14 @@
.consumption-details-content {
max-width: 45.75rem;
width: 100%;
- .consumption-details-header {
- margin-bottom: 0.5rem;
- color: $grey-bright;
- font-size: 1rem;
-
- &.compare {
- margin-top: 4px;
- font-size: 0.8rem;
- color: $grey-dark;
- }
- }
- .fluid-details {
- margin-top: 2.75rem;
- }
- .details-title {
- display: block;
- color: $grey-bright;
- font-size: 1rem;
- }
+ background-color: $grey-1;
+ border: 1px solid $grey-2;
+ padding: 16px;
+ border-radius: 4px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
}
}
@@ -41,3 +30,22 @@
justify-content: space-between;
align-items: center;
}
+
+.icon-line {
+ display: flex;
+ align-items: baseline;
+ gap: 12px;
+
+ svg {
+ transform: translate(0px, 4px);
+ }
+
+ .euro-value {
+ color: white;
+ font-size: 2rem;
+ font-weight: 900;
+ }
+ .euro-symbol {
+ color: $grey-bright;
+ }
+}
diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx
index 3e3cbe47d6aca5fa9cdf8b6f21b424bd8ad4761e..6dbfecd0f1b417470fc8b9a3aaf560976c75476a 100644
--- a/src/components/Consumption/ConsumptionView.tsx
+++ b/src/components/Consumption/ConsumptionView.tsx
@@ -3,6 +3,7 @@ import Content from 'components/Content/Content'
import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
import DateNavigator from 'components/DateNavigator/DateNavigator'
import FluidChart from 'components/FluidChart/FluidChart'
+import TimeStepSelector from 'components/FluidChart/TimeStepSelector/TimeStepSelector'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
@@ -31,8 +32,10 @@ import {
getTodayDate,
isKonnectorActive,
} from 'utils/utils'
+import { ChartCompare } from './ChartCompare/ChartCompare'
import ConsumptionDetails from './ConsumptionDetails/ConsumptionDetails'
import FluidButtons from './FluidButtons/FluidButtons'
+import { TodayButton } from './TodayButton/TodayButton'
import { WaterPricing } from './WaterPricing/WaterPricing'
/**
@@ -203,11 +206,14 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
/>
</Header>
<Content>
+ <TimeStepSelector fluidType={fluidType} />
<FluidButtons activeFluid={fluidType} key={updateKey} />
{showOfflineData && !isWaitingForConsent && (
<>
<FluidChart fluidType={fluidType} key={lastDataDateKey} />
+ <TodayButton />
+ <ChartCompare fluidType={fluidType} />
<ConsumptionDetails fluidType={fluidType} />
</>
)}
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index 60ceac21aa6d5db1b968f021bbdff5520dc4a336..afafe2578997c162d1b9dce5b0e730188cfeca81 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -24,10 +24,14 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
const isMulti = fluidType === FluidType.MULTIFLUID
const fluidName = getFluidName(fluidType)
+ const isSomeFluidConnected = fluidStatus.some(fluid =>
+ isKonnectorActive(fluidStatus, fluid.fluidType)
+ )
+
const isConnected = useCallback(() => {
- if (isMulti) return true
+ if (isMulti) return isSomeFluidConnected
return isKonnectorActive(fluidStatus, fluidType)
- }, [fluidStatus, fluidType, isMulti])
+ }, [fluidStatus, fluidType, isMulti, isSomeFluidConnected])
const isErrored = useCallback(() => {
if (
@@ -58,7 +62,7 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
return (
<IconButton
role="tab"
- className="fluid-title fluid-button"
+ className={classNames('fluid-title fluid-button', { active: isActive })}
onClick={goToFluid}
>
<StyledIcon
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
index 0a7e3429f9c88c29f61fd0f25fd686b7e63bc566..f1f41a59234625ce00d191842b9df2d5ad339015 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
/>
</button>
<button
- class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+ class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button active"
role="tab"
tabindex="0"
type="button"
diff --git a/src/components/Consumption/FluidButtons/fluidButtons.scss b/src/components/Consumption/FluidButtons/fluidButtons.scss
index 2946e6b42b364335a424f5c1c568da947060ec7d..4b647e41ee2da3dca18594cf4058ce2891a80ae8 100644
--- a/src/components/Consumption/FluidButtons/fluidButtons.scss
+++ b/src/components/Consumption/FluidButtons/fluidButtons.scss
@@ -13,6 +13,11 @@
}
.fluid-button {
min-width: 80px;
+ border-radius: 4px;
+ &:hover,
+ &.active {
+ background: $bg-active;
+ }
span {
display: flex;
flex-direction: column;
diff --git a/src/components/Consumption/TodayButton/TodayButton.scss b/src/components/Consumption/TodayButton/TodayButton.scss
new file mode 100644
index 0000000000000000000000000000000000000000..74b991224312031a6d0cbe264dfd38e6a64aadb9
--- /dev/null
+++ b/src/components/Consumption/TodayButton/TodayButton.scss
@@ -0,0 +1,10 @@
+.todayButton {
+ max-width: 45.75rem;
+ width: 100%;
+ padding-inline: 16px;
+ margin: auto;
+ margin-bottom: 16px;
+ button {
+ max-width: fit-content;
+ }
+}
diff --git a/src/components/Consumption/TodayButton/TodayButton.spec.tsx b/src/components/Consumption/TodayButton/TodayButton.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fc7a3bf84903876dc18065dcd3db08d218da3d0
--- /dev/null
+++ b/src/components/Consumption/TodayButton/TodayButton.spec.tsx
@@ -0,0 +1,39 @@
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TimeStep } from 'enums'
+import { DateTime } from 'luxon'
+import React from 'react'
+import { Provider } from 'react-redux'
+import * as chartActions from 'store/chart/chart.slice'
+import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
+import { TodayButton } from './TodayButton'
+
+const setCurrentTimeStepSpy = jest.spyOn(chartActions, 'setCurrentTimeStep')
+const setCurrentIndexSpy = jest.spyOn(chartActions, 'setCurrentIndex')
+const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate')
+
+describe('TodayButton component', () => {
+ it('should go to todays day with timestep week', async () => {
+ const store = createMockEcolyoStore({
+ chart: {
+ ...mockChartState,
+ currentTimeStep: TimeStep.YEAR,
+ selectedDate: DateTime.local().setZone('utc', {
+ keepLocalTime: true,
+ }),
+ },
+ })
+ render(
+ <Provider store={store}>
+ <TodayButton />
+ </Provider>
+ )
+ await act(async () => {
+ await userEvent.click(screen.getByText('timestep.today'))
+ })
+ expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
+ expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK)
+ expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1)
+ expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/src/components/Consumption/TodayButton/TodayButton.tsx b/src/components/Consumption/TodayButton/TodayButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..20f8318514f30c3067f282af5e47e6b4523cfeb8
--- /dev/null
+++ b/src/components/Consumption/TodayButton/TodayButton.tsx
@@ -0,0 +1,43 @@
+import { Button } from '@material-ui/core'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { TimeStep } from 'enums'
+import { DateTime } from 'luxon'
+import React from 'react'
+import {
+ setCurrentIndex,
+ setCurrentTimeStep,
+ setSelectedDate,
+} from 'store/chart/chart.slice'
+import { useAppDispatch } from 'store/hooks'
+import './TodayButton.scss'
+
+export const TodayButton = () => {
+ const { t } = useI18n()
+ const dispatch = useAppDispatch()
+
+ const handleToday = () => {
+ const today = DateTime.local()
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .startOf('day')
+ dispatch(setCurrentIndex(0))
+ dispatch(setSelectedDate(today))
+ dispatch(setCurrentTimeStep(TimeStep.WEEK))
+ }
+
+ return (
+ <div className="todayButton">
+ <Button
+ onClick={handleToday}
+ classes={{
+ root: 'btnSecondary today',
+ label: 'text-13-normal',
+ }}
+ size="small"
+ >
+ {t('timestep.today')}
+ </Button>
+ </div>
+ )
+}
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
index 073b60d0c07942d6fa2e98f86d65570998ab02cb..3e3e36dbbcf9c4bb992d36e6b45a3a54fb1731f3 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.spec.tsx
@@ -40,4 +40,15 @@ describe('DataloadSection component', () => {
screen.getByText('consumption_visualizer.no_data')
).toBeInTheDocument()
})
+ it('should have estimated button', () => {
+ render(
+ <DataloadSection
+ dataload={baseDataLoad}
+ fluidType={FluidType.MULTIFLUID}
+ dataloadSectionType={DataloadSectionType.NO_COMPARE}
+ toggleEstimationModal={jest.fn()}
+ />
+ )
+ expect(screen.getByRole('button')).toBeInTheDocument()
+ })
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx
index f15b5ad208a90d2608363e17f28ef7a04d19d94b..4baa319440dc151319de994807269982b8e1120b 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { DataloadSectionType, FluidType } from 'enums'
@@ -53,17 +54,24 @@ const DataloadSection = ({
[fluidName]: noCompare || isRight,
[`${fluidName}-compare`]: isLeft,
'multifluid-compare-color': isRight && isMulti,
- alignTop: isMulti,
})}
>
- <DataloadSectionValue
- dataload={dataload}
- fluidType={fluidType}
- dataloadSectionType={dataloadSectionType}
- toggleEstimationModal={toggleEstimationModal}
- focusable={focusable}
- />
+ <DataloadSectionValue dataload={dataload} fluidType={fluidType} />
</div>
+ {dataloadSectionType === DataloadSectionType.NO_COMPARE &&
+ fluidType === FluidType.MULTIFLUID && (
+ <Button
+ classes={{
+ root: 'btnText',
+ label: 'text-14-normal',
+ }}
+ size="small"
+ onClick={toggleEstimationModal}
+ tabIndex={focusable ? 0 : -1}
+ >
+ {t('consumption_visualizer.estimated')}
+ </Button>
+ )}
<DataloadSectionDetail
dataload={dataload}
fluidType={fluidType}
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 2ad80eeb605c06830487a00a960487e585a04d39..66576c8360134642bc1a1f09c4b5f15e15220427 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -63,30 +63,25 @@ const DataloadSectionDetail = ({
const isEmpty = value.state === DataloadState.EMPTY
const isHole = value.state === DataloadState.HOLE
const isMissing = value.state === DataloadState.MISSING
+ const fluidName = getFluidName(index)
return (
<NavLink
key={FluidType[index]}
aria-label={t(
- `consumption_visualizer.cost_per_fluid.${FluidType[
- index
- ].toLowerCase()}`
+ `consumption_visualizer.cost_per_fluid.${fluidName}`
)}
- to={`/consumption/${FluidType[index].toLowerCase()}`}
+ to={`/consumption/${fluidName}`}
className="dataloadvisualizer-euro-link"
tabIndex={focusable ? 0 : -1}
>
<div
className={classNames('dataloadvisualizer-euro-fluid', {
- [FluidType[index].toLowerCase()]:
+ [fluidName]:
isValid || isUpcoming || isComing || isEmpty || isHole,
error: isMissing,
})}
>
- <StyledIcon
- className="dataloadvisualizer-euro-fluid-icon"
- icon={getFluidIcon(index)}
- size={22}
- />
+ <StyledIcon icon={getFluidIcon(index)} size={22} />
<div>
{isValid && `${formatNumberValues(value.value)} €`}
{(isUpcoming || isComing) &&
@@ -102,6 +97,7 @@ const DataloadSectionDetail = ({
</div>
)
}
+
return (
<div className="dataloadvisualizer-euro text-16-normal">
<NavLink
@@ -112,11 +108,7 @@ const DataloadSectionDetail = ({
<div
className={`dataloadvisualizer-euro-fluid ${getFluidName(fluidType)}`}
>
- <StyledIcon
- className="dataloadvisualizer-euro-fluid-icon"
- icon={getFluidIcon(fluidType)}
- size={22}
- />
+ <StyledIcon icon={getFluidIcon(fluidType)} size={22} />
<div>{`${formatNumberValues(
converterService.LoadToEuro(
dataload.value,
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
index 3661724c30e2e89bb0dd5b32c13c437fae2dfab4..f6dc2eab05fb17f22a679a47e9d03b2eaec6d243 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx
@@ -1,6 +1,5 @@
-import { act, render, screen } from '@testing-library/react'
-import { userEvent } from '@testing-library/user-event'
-import { DataloadSectionType, FluidType } from 'enums'
+import { render, screen } from '@testing-library/react'
+import { FluidType } from 'enums'
import { Dataload } from 'models'
import React from 'react'
import {
@@ -9,16 +8,12 @@ import {
} from 'tests/__mocks__/chartData.mock'
import DataloadSectionValue from './DataloadSectionValue'
-const mockToggleEstimationModal = jest.fn()
-
describe('DataloadSectionValue component', () => {
it('should render correctly', () => {
const { container } = render(
<DataloadSectionValue
dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
- dataloadSectionType={DataloadSectionType.NO_COMPARE}
- toggleEstimationModal={mockToggleEstimationModal}
/>
)
expect(container).toMatchSnapshot()
@@ -30,8 +25,6 @@ describe('DataloadSectionValue component', () => {
<DataloadSectionValue
dataload={baseDataLoad}
fluidType={FluidType.ELECTRICITY}
- dataloadSectionType={DataloadSectionType.NO_COMPARE}
- toggleEstimationModal={mockToggleEstimationModal}
/>
)
expect(screen.getByText('12,00')).toBeInTheDocument()
@@ -43,8 +36,6 @@ describe('DataloadSectionValue component', () => {
<DataloadSectionValue
dataload={mockDataLoad}
fluidType={FluidType.ELECTRICITY}
- dataloadSectionType={DataloadSectionType.NO_COMPARE}
- toggleEstimationModal={mockToggleEstimationModal}
/>
)
expect(screen.getByText('1,00')).toBeInTheDocument()
@@ -58,42 +49,10 @@ describe('DataloadSectionValue component', () => {
<DataloadSectionValue
dataload={baseMultiFluidDataLoad}
fluidType={FluidType.MULTIFLUID}
- dataloadSectionType={DataloadSectionType.RIGHT}
- toggleEstimationModal={mockToggleEstimationModal}
/>
)
expect(screen.getByText('12,00')).toBeInTheDocument()
expect(screen.getByText('FLUID.MULTIFLUID.UNIT')).toBeInTheDocument()
})
- it('should render correctly with a estimated link when no comparison', () => {
- render(
- <DataloadSectionValue
- dataload={baseMultiFluidDataLoad}
- fluidType={FluidType.MULTIFLUID}
- dataloadSectionType={DataloadSectionType.NO_COMPARE}
- toggleEstimationModal={mockToggleEstimationModal}
- />
- )
- expect(screen.getByText('12,00')).toBeInTheDocument()
- expect(
- screen.getByText('consumption_visualizer.estimated')
- ).toBeInTheDocument()
- })
- it('should call toggleEstimationModal when click on the estimated link', async () => {
- render(
- <DataloadSectionValue
- dataload={baseMultiFluidDataLoad}
- fluidType={FluidType.MULTIFLUID}
- dataloadSectionType={DataloadSectionType.NO_COMPARE}
- toggleEstimationModal={mockToggleEstimationModal}
- />
- )
- await act(async () => {
- await userEvent.click(
- screen.getByText('consumption_visualizer.estimated')
- )
- })
- expect(mockToggleEstimationModal).toHaveBeenCalled()
- })
})
})
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
index 61edc3c75d8459af18b034e3ab04228ca84495d2..68ea12af39a2d644fd3687c55ffd797a33009057 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
-import { DataloadSectionType, FluidType } from 'enums'
+import { FluidType } from 'enums'
import { Dataload } from 'models'
import React from 'react'
import { formatNumberValues, getFluidName } from 'utils/utils'
@@ -8,17 +7,11 @@ import { formatNumberValues, getFluidName } from 'utils/utils'
interface DataloadSectionValueProps {
dataload: Dataload
fluidType: FluidType
- dataloadSectionType: DataloadSectionType
- toggleEstimationModal: () => void
- focusable?: boolean
}
const DataloadSectionValue = ({
dataload,
fluidType,
- dataloadSectionType,
- toggleEstimationModal,
- focusable,
}: DataloadSectionValueProps) => {
const { t } = useI18n()
const FLUIDNAME = getFluidName(fluidType).toUpperCase()
@@ -30,19 +23,6 @@ const DataloadSectionValue = ({
<div className="text-18-normal euroUnit">
{t(`FLUID.${FLUIDNAME}.UNIT`)}
</div>
- {dataloadSectionType === DataloadSectionType.NO_COMPARE && (
- <Button
- classes={{
- root: 'btnText',
- label: 'text-14-normal',
- }}
- size="small"
- onClick={toggleEstimationModal}
- tabIndex={focusable ? 0 : -1}
- >
- {t('consumption_visualizer.estimated')}
- </Button>
- )}
</>
)
}
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
index 46f81e81efde54fe0b8f5950427f45535cc5c8e5..3b1098a47ef2a38a11c8cbc5578c3272a21aba39 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadSection.spec.tsx.snap
@@ -10,7 +10,6 @@ exports[`DataloadSection component should render correctly 1`] = `
>
<mock-dataloadsectionvalue
dataload="[object Object]"
- dataloadsectiontype="NO_COMPARE"
fluidtype="0"
/>
</div>
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index a116495e40a7d6b79a81e242827a4193b840e3fb..bdd30d64b1401002a68ab78e9cbe750c12105c43 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -46,9 +46,6 @@
display: flex;
gap: 0.4rem;
align-items: center;
- &.alignTop {
- align-items: flex-start;
- }
}
.upper {
font-weight: bold;
@@ -93,32 +90,35 @@
flex-direction: row;
min-height: 2rem;
align-items: center;
+ gap: 16px;
.dataloadvisualizer-euro-link {
text-decoration: none;
color: transparent;
}
.dataloadvisualizer-euro-fluid {
- padding: 0 0.5rem;
+ padding-right: 4px;
+ border-radius: 4px;
display: flex;
- align-items: center;
- .dataloadvisualizer-euro-fluid-icon {
- margin-right: 0.5rem;
- }
+ gap: 4px;
+ font-weight: 700;
}
.electricity {
color: $elec-color;
+ background-color: #544232;
}
.electricity-compare {
color: $elec-compare-color;
}
.water {
color: $water-color;
+ background-color: #3d516d;
}
.water-compare {
color: $water-compare-color;
}
.gas {
color: $gas-color;
+ background-color: #2f4f43;
}
.gas-compare {
color: $gas-compare-color;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 50da25f22e63e16d1815f4aa8ce3d8d3040abca1..0f78c8323ca7d8a5814c7600d6d9b33bb62d6035 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -1,30 +1,26 @@
-import { Button, Slide } from '@material-ui/core'
-import LegendComparisonIcon from 'assets/icons/ico/legendComparison.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { Button } from '@material-ui/core'
import useExploration from 'components/Hooks/useExploration'
import { useMoveToLatestDate } from 'components/Hooks/useMoveToDate'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidType, TimeStep, UserExplorationID } from 'enums'
import { DateTime } from 'luxon'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ConsumptionService from 'services/consumption.service'
-import { setShowCompare, setShowOfflineData } from 'store/chart/chart.slice'
+import { setShowOfflineData } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils'
+import { getKonnectorSlug, isKonnectorActive } from 'utils/utils'
import FluidChartSwipe from './FluidChartSwipe'
import HalfHourNoDataFailure from './HalfHourNoDataFailure/HalfHourNoDataFailure'
import HalfHourUpcoming from './HalfHourUpcoming/HalfHourUpcoming'
-import TimeStepSelector from './TimeStepSelector/TimeStepSelector'
import './fluidChart.scss'
const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
const { t } = useI18n()
const client = useClient()
const {
- chart: { currentTimeStep, selectedDate, showCompare },
+ chart: { currentTimeStep, selectedDate },
global: { fluidStatus },
} = useAppSelector(state => state.ecolyo)
const dispatch = useAppDispatch()
@@ -36,15 +32,7 @@ const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
currentFluidStatus?.lastDataDate
)
const [, setValidExploration] = useExploration()
- const [containsHalfHourData, setContainsHalfHourData] =
- useState<boolean>(false)
-
- const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase()
- const lowercaseFluidType = getFluidName(fluidType)
-
- const handleChangeSwitch = () => {
- dispatch(setShowCompare(!showCompare))
- }
+ const [containsHalfHourData, setContainsHalfHourData] = useState(false)
useEffect(() => {
let subscribed = true
@@ -75,32 +63,6 @@ const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
}
}, [containsHalfHourData, currentTimeStep, setValidExploration])
- const compareLegend = useCallback(
- () => (
- <div className="compareLegend">
- <div>
- <StyledIcon
- icon={LegendComparisonIcon}
- className={`${lowercaseFluidType} compare`}
- />
- <span className={`${lowercaseFluidType} compare`}>
- {t(`timestep.${lowercaseTimeStep}.last`)}
- </span>
- </div>
- <div>
- <StyledIcon
- icon={LegendComparisonIcon}
- className={lowercaseFluidType}
- />
- <span className={lowercaseFluidType}>
- {t(`timestep.${lowercaseTimeStep}.current`)}
- </span>
- </div>
- </div>
- ),
- [lowercaseFluidType, lowercaseTimeStep, t]
- )
-
const toggleModalConnection = () => {
switch (fluidType) {
case FluidType.ELECTRICITY:
@@ -146,16 +108,9 @@ const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
)
}
return (
- <>
- <div className="fluidchart-content">
- <FluidChartSwipe fluidType={fluidType} />
- </div>
- {showCompare && currentTimeStep !== TimeStep.YEAR && (
- <Slide direction="right" in={showCompare}>
- {compareLegend()}
- </Slide>
- )}
- </>
+ <div className="fluidchart-content">
+ <FluidChartSwipe fluidType={fluidType} />
+ </div>
)
}
@@ -163,22 +118,6 @@ const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
<div className="fluidchart-root">
{!isFluidConnected && LastDataValid}
{chartContent()}
- <TimeStepSelector fluidType={fluidType} />
- {currentTimeStep !== TimeStep.YEAR && (
- <div className="fluidchart-footer">
- <div className="fluidchart-footer-compare text-15-normal">
- <StyledSwitch
- fluidType={fluidType}
- checked={showCompare}
- aria-label={t('consumption.accessibility.checkbox_compare')}
- onClick={handleChangeSwitch}
- />
- <span className="fluidchart-footer-label graph-switch-text">
- {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
- </span>
- </div>
- </div>
- )}
</div>
)
}
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
index ab25fa0ef054088f668adbf8f7ec414cc5e77381..a5621a2190daac52224c2e75ff043f6b3134d34f 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -10,7 +10,6 @@ import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
const setCurrentTimeStepSpy = jest.spyOn(chartActions, 'setCurrentTimeStep')
const setCurrentIndexSpy = jest.spyOn(chartActions, 'setCurrentIndex')
-const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate')
describe('TimeStepSelector component', () => {
beforeEach(() => {
@@ -76,27 +75,4 @@ describe('TimeStepSelector component', () => {
expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.DAY)
expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1)
})
- it('should go to todays day with timestep week', async () => {
- const store = createMockEcolyoStore({
- chart: {
- ...mockChartState,
- currentTimeStep: TimeStep.YEAR,
- selectedDate: DateTime.local().setZone('utc', {
- keepLocalTime: true,
- }),
- },
- })
- render(
- <Provider store={store}>
- <TimeStepSelector fluidType={FluidType.WATER} />
- </Provider>
- )
- await act(async () => {
- await userEvent.click(screen.getByText('timestep.today'))
- })
- expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
- expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK)
- expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1)
- expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
- })
})
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index 2d9a103d64c2a416d3ee4fcc3b31828d587ba69d..24ccc905c9f14819cdb581e5a435ce31ca10e77d 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -1,16 +1,10 @@
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidType, TimeStep } from 'enums'
-import { DateTime } from 'luxon'
import React from 'react'
import DateChartService from 'services/dateChart.service'
-import {
- setCurrentIndex,
- setCurrentTimeStep,
- setSelectedDate,
-} from 'store/chart/chart.slice'
+import { setCurrentIndex, setCurrentTimeStep } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './timeStepSelector.scss'
@@ -32,16 +26,6 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
? [TimeStep.HALF_AN_HOUR, ...timeStepMultiArray]
: [...timeStepMultiArray]
- const handleToday = () => {
- const today = DateTime.local()
- .setZone('utc', {
- keepLocalTime: true,
- })
- .startOf('day')
- dispatch(setCurrentIndex(0))
- dispatch(setSelectedDate(today))
- dispatch(setCurrentTimeStep(TimeStep.WEEK))
- }
const handleChangeTimeStep = (targetTimestep: TimeStep) => {
const index = dateChartService.defineDateIndex(targetTimestep, selectedDate)
dispatch(setCurrentTimeStep(targetTimestep))
@@ -49,16 +33,6 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
}
return (
<div className="timestep-selector">
- <Button
- onClick={handleToday}
- classes={{
- root: 'btnSecondary',
- label: 'text-13-normal',
- }}
- size="large"
- >
- {t('timestep.today')}
- </Button>
<div className="timestep-container">
<ul
className={`timestep-bar ${
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index bd50699f8e15615f0e591ab144c1b29a4992c0f8..c83e1f6b4830d8cbcf4a551827798bddc3a80c0c 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -5,20 +5,6 @@ exports[`TimeStepSelector component should render component properly with 4 time
<div
class="timestep-selector"
>
- <button
- class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-13-normal"
- >
- timestep.today
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
<div
class="timestep-container"
>
diff --git a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
index d41cb3344de86a7ee77a8a2f924ef34bc70ecffb..4b3277a2e8e687399d33660c9bd44fa5648955e2 100644
--- a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
@@ -10,6 +10,7 @@
margin: auto;
margin-top: 1rem;
max-width: 45.75rem;
+ width: 100%;
.btnSecondary {
max-width: 90px;
border-radius: 4px;
diff --git a/src/components/FluidChart/fluidChart.scss b/src/components/FluidChart/fluidChart.scss
index f5ca24c3f16e5f57c9fac4ce93283f54ecc65ec6..19a353390ff1691c371632050937ba4130163880 100644
--- a/src/components/FluidChart/fluidChart.scss
+++ b/src/components/FluidChart/fluidChart.scss
@@ -6,6 +6,10 @@
@media #{$large-phone} {
padding: 0rem 1rem 1rem 1rem;
}
+
+ button.today {
+ max-width: fit-content;
+ }
}
.fluidchart-content {
min-height: 29.5rem;
@@ -13,59 +17,6 @@
min-height: 21.5rem;
}
}
-.fluidchart-footer {
- display: flex;
- align-items: center;
- justify-content: left;
- margin: auto;
- padding-top: 1rem;
- max-width: 45.75rem;
- .fluidchart-footer-label {
- color: $grey-bright;
- }
-}
-.compareLegend {
- padding: 1rem 0 0 0;
- display: flex;
- gap: 1rem;
- font-weight: 700;
- max-width: 45.75rem;
- margin: auto;
-
- .electricity {
- color: $elec-color;
- &.compare {
- color: $elec-compare-color;
- }
- }
-
- .gas {
- color: $gas-color;
- &.compare {
- color: $gas-compare-color;
- }
- }
-
- .water {
- color: $water-color;
- &.compare {
- color: $water-compare-color;
- }
- }
-
- .multifluid {
- color: $multi-color;
- &.compare {
- color: $multi-compare-color;
- }
- }
-
- div {
- display: flex;
- gap: 0.5rem;
- align-items: center;
- }
-}
.lastValidData {
display: flex;
diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
deleted file mode 100644
index de4e50f332f7ea6b6b7b7886b28f3653b5c203e3..0000000000000000000000000000000000000000
--- a/src/components/TotalConsumption/TotalConsumption.spec.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import { FluidType, TimeStep } from 'enums'
-import React from 'react'
-import { Provider } from 'react-redux'
-import { graphData } from 'tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
-import TotalConsumption from './TotalConsumption'
-
-const mockChartStore = createMockEcolyoStore({
- chart: {
- ...mockChartState,
- currentDatachart: graphData,
- },
-})
-
-describe('TotalConsumption component', () => {
- it('should be rendered correctly and render euro value', async () => {
- const { container } = render(
- <Provider store={mockChartStore}>
- <TotalConsumption fluidType={FluidType.ELECTRICITY} />
- </Provider>
- )
- await waitFor(() => null, { container })
- expect(container).toMatchSnapshot()
- expect(screen.getByText('22,77')).toBeInTheDocument()
- })
-
- it('should format multifluid value', async () => {
- const { container } = render(
- <Provider store={mockChartStore}>
- <TotalConsumption fluidType={FluidType.MULTIFLUID} />
- </Provider>
- )
- await waitFor(() => null, { container })
- expect(screen.getByText('130,84')).toBeInTheDocument()
- })
- it('should format multifluid value AND compared value', async () => {
- const store = createMockEcolyoStore({
- chart: {
- ...mockChartState,
- currentDatachart: graphData,
- showCompare: true,
- currentTimeStep: TimeStep.DAY,
- },
- })
- const { container } = render(
- <Provider store={store}>
- <TotalConsumption fluidType={FluidType.MULTIFLUID} />
- </Provider>
- )
- await waitFor(() => null, { container })
- expect(screen.getByText('130,84')).toBeInTheDocument()
- expect(screen.getByText('110,66')).toBeInTheDocument()
- })
- it('should display ----- when half an hour electricity data is not activated', async () => {
- const store = createMockEcolyoStore()
- const { container } = render(
- <Provider store={store}>
- <TotalConsumption fluidType={FluidType.ELECTRICITY} />
- </Provider>
- )
- await waitFor(() => null, { container })
- expect(screen.getByText('-----')).toBeInTheDocument()
- })
-})
diff --git a/src/components/TotalConsumption/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx
deleted file mode 100644
index 75959c1e99cef1fc63ed720fc6678189e8de628f..0000000000000000000000000000000000000000
--- a/src/components/TotalConsumption/TotalConsumption.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Coin from 'assets/icons/ico/coin.svg'
-import Coins from 'assets/icons/ico/coins.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useClient } from 'cozy-client'
-import { FluidType, TimeStep } from 'enums'
-import { Dataload } from 'models'
-import React, { useCallback, useEffect, useState } from 'react'
-import ConsumptionService from 'services/consumption.service'
-import ConverterService from 'services/converter.service'
-import { useAppSelector } from 'store/hooks'
-import { formatNumberValues } from 'utils/utils'
-import './totalConsumption.scss'
-
-const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
- const { currentTimeStep, showCompare, currentDatachart } = useAppSelector(
- state => state.ecolyo.chart
- )
- const client = useClient()
- const [totalValue, setTotalValue] = useState<string>('-----')
- const [previousTotalValue, setPreviousTotalValue] = useState<string>('-----')
-
- const computeTotal = useCallback(
- async (
- dataload: Dataload[],
- setState: React.Dispatch<React.SetStateAction<string>>
- ) => {
- const consumptionService = new ConsumptionService(client)
- const activateHalfHourLoad =
- fluidType === FluidType.ELECTRICITY
- ? await consumptionService.checkDoctypeEntries(
- FluidType.ELECTRICITY,
- TimeStep.HALF_AN_HOUR
- )
- : false
-
- const converterService = new ConverterService()
- let total = 0
- let totalPrice = 0
-
- dataload.forEach(data => {
- if (data.value !== -1) {
- total += data.value
- totalPrice += converterService.LoadToEuro(
- data.value,
- fluidType,
- data.price
- )
- }
- })
-
- let displayedValue
- if (
- total <= 0 ||
- (!activateHalfHourLoad &&
- currentTimeStep === TimeStep.HALF_AN_HOUR &&
- fluidType === FluidType.ELECTRICITY)
- ) {
- displayedValue = '-----'
- } else if (fluidType === FluidType.MULTIFLUID) {
- displayedValue = formatNumberValues(total).toString()
- } else if (totalPrice <= 0) {
- displayedValue = formatNumberValues(
- converterService.LoadToEuro(total, fluidType)
- ).toString()
- } else {
- displayedValue = formatNumberValues(totalPrice).toString()
- }
-
- setState(displayedValue)
- },
- [client, currentTimeStep, fluidType]
- )
-
- useEffect(() => {
- let subscribed = true
- const fetchTotal = async () => {
- await computeTotal(currentDatachart.actualData, setTotalValue)
- if (currentDatachart.comparisonData) {
- await computeTotal(
- currentDatachart.comparisonData,
- setPreviousTotalValue
- )
- }
- }
- subscribed && fetchTotal()
- return () => {
- subscribed = false
- }
- }, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
-
- const compareIcon = () => (
- <StyledIcon
- className="pile-icon"
- icon={showCompare ? Coins : Coin}
- size={showCompare ? 48 : 36}
- />
- )
-
- return (
- <div className={`icon-line ${showCompare ? 'compare' : ''}`}>
- {compareIcon()}
- <div>
- <span className="euro-value">{totalValue}</span>
- <span className="euro-symbol"> €</span>
- </div>
- {showCompare && (
- <div className="compare">
- <span className="euro-value">{previousTotalValue}</span>
- </div>
- )}
- </div>
- )
-}
-
-export default TotalConsumption
diff --git a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
deleted file mode 100644
index 307e792394c41eb30c0babdebbfae70d8839bc86..0000000000000000000000000000000000000000
--- a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TotalConsumption component should be rendered correctly and render euro value 1`] = `
-<div>
- <div
- class="icon-line "
- >
- <svg
- aria-hidden="true"
- class="pile-icon styles__icon___23x3R"
- height="36"
- width="36"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div>
- <span
- class="euro-value"
- >
- 22,77
- </span>
- <span
- class="euro-symbol"
- >
- €
- </span>
- </div>
- </div>
-</div>
-`;
diff --git a/src/components/TotalConsumption/totalConsumption.scss b/src/components/TotalConsumption/totalConsumption.scss
deleted file mode 100644
index d36b15977ca31574e2365c54a4934f7040a04bdb..0000000000000000000000000000000000000000
--- a/src/components/TotalConsumption/totalConsumption.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import 'src/styles/base/color';
-
-.icon-line {
- display: flex;
- align-items: baseline;
- &.compare {
- align-items: flex-end;
- }
-
- svg {
- transform: translate(0px, 4px);
- }
-
- .compare {
- span {
- color: $grey-dark;
- font-size: 1.4rem;
-
- &.euro-symbol {
- font-size: 0.8rem;
- }
- }
- }
- .euro-value {
- font-size: 2rem;
- font-weight: 900;
- color: white;
- margin-left: 0.7rem;
- margin-right: 0.3rem;
- }
- .euro-symbol {
- color: white;
- }
-}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 1cd8aa387bf1cedcf7b9015ab65445b490c00a2a..9ada80a25fae8cad101c8e90418dd353ca4cc809 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -400,7 +400,7 @@
"data_to_come": "À venir",
"aie": "Aïe !",
"data_empty": "Vide",
- "estimated": "estimés",
+ "estimated": "consommation estimée",
"cost_per_fluid": {
"electricity": "Part de l'électricité",
"water": "Part de l'eau",
@@ -1305,32 +1305,32 @@
}
},
"timestep": {
- "today": "Aujourd'hui",
+ "today": "Revenir à aujourd’hui",
"year": {
"period": "5 ans",
- "comparelabel": "Comparer à l'année précédente"
+ "compareLabel": "Comparer à l'année précédente"
},
"month": {
"period": "Année",
- "comparelabel": "Comparer à l'année précédente",
+ "compareLabel": "Comparer à l'année précédente",
"current": "année actuelle",
"last": "année précédente"
},
"day": {
"period": "Mois",
- "comparelabel": "Comparer au mois précédent",
+ "compareLabel": "Comparer au mois précédent",
"current": "mois actuel",
"last": "mois précédent"
},
"week": {
"period": "Semaine",
- "comparelabel": "Comparer à la semaine précédente",
+ "compareLabel": "Comparer à la semaine précédente",
"current": "semaine actuelle",
"last": "semaine précédente"
},
"half_an_hour": {
"period": "Jour",
- "comparelabel": "Comparer à la journée précédente",
+ "compareLabel": "Comparer à la journée précédente",
"gather_data_title": "La récupération de vos données demi-horaires prend environ 24h.",
"current": "jour actuel",
"last": "jour précédent",
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index 5ff62dc2a582c8b6679998fc46a64b21ca392f09..ad61855c9821a65358c24b16804e7826c2ebb559 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -61,6 +61,8 @@ $grey-linear-gradient-background: linear-gradient(
#25262b 100%
);
+$bg-active: rgba(255, 255, 255, 0.1);
+
// new greys
/** Base background for every screen */
$grey-0: #1b1c21;
diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss
index 07c66d82be9a5d588af12064854bd233f896d936..7b492fc18ae7e926d27d9aafc692b03dc703d8a4 100644
--- a/src/styles/components/_dialog.scss
+++ b/src/styles/components/_dialog.scss
@@ -8,7 +8,7 @@ div.modal-root {
}
div.modal-paper {
- background: $grey-linear-gradient-background;
+ background: $grey-1;
width: 36rem;
max-width: 100%;
max-height: 90vh;
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index f8e04f113ed6de110117c5440189f956871b09de..095c7e8568d4e15da4cd4dd9b0081ff0c2566880 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -1,7 +1,7 @@
@import '../base/color';
div.expansion-panel-root {
- margin: 1.2rem 0;
+ margin-bottom: 1rem;
color: $grey-bright;
background-color: $grey-1;
border: 1px solid $grey-2;
@@ -20,7 +20,7 @@ div.expansion-panel-root {
}
}
div.expansion-panel-summary {
- padding: 0.25rem 1.2rem;
+ padding: 0.25rem 1rem;
min-height: 4rem;
&.Mui-focused {
border-radius: 4px;
diff --git a/src/utils/date.spec.ts b/src/utils/date.spec.ts
index 362a95ddd3f19e77f2df83078570cb94b80a1a55..df72bc57c0b8160fa54f760725a5e65afe8ef170 100644
--- a/src/utils/date.spec.ts
+++ b/src/utils/date.spec.ts
@@ -383,22 +383,22 @@ describe('date utils', () => {
actualData,
TimeStep.HALF_AN_HOUR
)
- expect(result).toBe('bilan du jeudi 01 octobre')
+ expect(result).toBe('Bilan du jeudi 01 octobre')
})
it('case WEEK', () => {
const result = convertDateToShortDateString(actualData, TimeStep.WEEK)
- expect(result).toBe('bilan du 01/10 au 03/10')
+ expect(result).toBe('Bilan du 01/10 au 03/10')
})
it('case DAY', () => {
const result = convertDateToShortDateString(actualData, TimeStep.DAY)
- expect(result).toBe('bilan d’octobre')
+ expect(result).toBe('Bilan d’octobre')
})
it('case MONTH', () => {
const result = convertDateToShortDateString(actualData, TimeStep.MONTH)
- expect(result).toBe('bilan de l’année 2020')
+ expect(result).toBe('Bilan de l’année 2020')
})
})
})
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 9468ee8f43ebba8267546b22958443b2f3b43807..1a6d379dfbc650bf74a09188d1d029a00244aad3 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -119,15 +119,15 @@ export const convertDateToShortDateString = (
const date = actualData[0].date
switch (timeStep) {
case TimeStep.HALF_AN_HOUR:
- return `bilan du ${date.setLocale('fr').toFormat('cccc dd LLLL')}`
+ return `Bilan du ${date.setLocale('fr').toFormat('cccc dd LLLL')}`
case TimeStep.DAY:
- return `bilan ${getMonthNameWithPrep(date)}`
+ return `Bilan ${getMonthNameWithPrep(date)}`
case TimeStep.WEEK:
- return `bilan du ${date.toFormat('dd/MM')} au ${actualData[
+ return `Bilan du ${date.toFormat('dd/MM')} au ${actualData[
actualData.length - 1
].date.toFormat('dd/MM')}`
case TimeStep.MONTH:
- return `bilan de l’année ${date.toFormat('y')}`
+ return `Bilan de l’année ${date.toFormat('y')}`
case TimeStep.YEAR:
return `de ${date.toFormat('y')} à ${actualData[
actualData.length - 1