diff --git a/src/assets/icons/ico/switchGRDFDesktop.svg b/src/assets/icons/ico/switchGRDFDesktop.svg
deleted file mode 100644
index 19bf66996ba838fb3c52f3c98e82856a711a8543..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/switchGRDFDesktop.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<svg width="335" height="256" viewBox="0 0 335 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.55" filter="url(#filter0_f)">
-<rect x="18" y="18" width="299" height="220" rx="2" fill="#121212"/>
-</g>
-<rect x="18" y="18" width="299" height="220" rx="4" fill="white"/>
-<rect x="273" y="73" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="292.5" cy="75.5" r="7.5" fill="#01B1AE"/>
-<rect x="273" y="96" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="292.5" cy="98.5" r="7.5" fill="#01B1AE"/>
-<rect x="273" y="119" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="292.5" cy="121.5" r="7.5" fill="#01B1AE"/>
-<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 300 160)" fill="#D5D5D5"/>
-<circle r="7.5" transform="matrix(-1 0 0 1 280.5 162.5)" fill="#AEAEAE"/>
-<rect x="273" y="183" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="292.5" cy="185.5" r="7.5" fill="#01B1AE"/>
-<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 300 206)" fill="#D5D5D5"/>
-<circle r="7.5" transform="matrix(-1 0 0 1 280.5 208.5)" fill="#AEAEAE"/>
-<path d="M32 77L41.0476 73L40.0423 77L48.5873 73L47.0794 77L57.1323 73L55.6243 77L67.1852 73L64.672 77L75.2275 73L73.7196 77L84.7778 73L82.2645 77L92.3175 73L91.3122 77L101.365 73L99.3545 77L109.91 73L107.899 77L118.455 73L115.942 77L127 73" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M127.005 73L126 77L134.545 73L133.037 77L143.09 73L141.582 77L153.143 73L150.63 77L161.185 73L159.677 77L170.735 73L168.222 77L178.275 73L177.27 77L187.323 73L185.312 77L195.868 73L193.857 77L204.413 73L201.899 77L212.958 73" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M75.0053 95L74 99L82.545 95L81.037 99L91.0899 95L89.582 99L101.143 95L98.6296 99L109.185 95L107.677 99L118.735 95L116.222 99L126.275 95L125.27 99L135.323 95L133.312 99L143.868 95L141.857 99L152.413 95L149.899 99L160.958 95" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M102.005 117L101 121L109.545 117L108.037 121L118.09 117L116.582 121L128.143 117L125.63 121L136.185 117L134.677 121L145.735 117L143.222 121L153.275 117L152.27 121L162.323 117L160.312 121L170.868 117L168.857 121L179.413 117L176.899 121L187.958 117" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M93.0053 161L92 165L100.545 161L99.037 165L109.09 161L107.582 165L119.143 161L116.63 165L127.185 161L125.677 165L136.735 161L134.222 165L144.275 161L143.27 165L153.323 161L151.312 165L161.868 161L159.857 165L170.413 161L167.899 165L178.958 161" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M119.005 183L118 187L126.545 183L125.037 187L135.09 183L133.582 187L145.143 183L142.63 187L153.185 183L151.677 187L162.735 183L160.222 187L170.275 183L169.27 187L179.323 183L177.312 187L187.868 183L185.857 187L196.413 183L193.899 187L204.958 183" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M102.005 207L101 211L109.545 207L108.037 211L118.09 207L116.582 211L128.143 207L125.63 211L136.185 207L134.677 211L145.735 207L143.222 211L153.275 207L152.27 211L162.323 207L160.312 211L170.868 207L168.857 211L179.413 207L176.899 211L187.958 207" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 99L41.0476 95L40.0423 99L48.5873 95L47.0794 99L57.1323 95L55.6243 99L67.1852 95L64.672 99L75.2275 95" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 121L41.0476 117L40.0423 121L48.5873 117L47.0794 121L57.1323 117L55.6243 121L67.1852 117L64.672 121L75.2275 117L73.7196 121L84.7778 117L82.2645 121L92.3175 117L91.3122 121L101.365 117" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 187L41.0476 183L40.0423 187L48.5873 183L47.0794 187L57.1323 183L55.6243 187L67.1852 183L64.672 187L75.2275 183L73.7196 187L84.7778 183L82.2645 187L92.3175 183L91.3122 187L101.365 183L99.3545 187L109.91 183L107.899 187L118.455 183" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 211L41.0476 207L40.0423 211L48.5873 207L47.0794 211L57.1323 207L55.6243 211L67.1852 207L64.672 211L75.2275 207L73.7196 211L84.7778 207L82.2645 211L92.3175 207L91.3122 211L101.365 207" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 165L41.0476 161L40.0423 165L48.5873 161L47.0794 165L57.1323 161L55.6243 165L67.1852 161L64.672 165L75.2275 161L73.7196 165L84.7778 161L82.2645 165L92.3175 161" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18 22C18 19.7909 19.7909 18 22 18H313C315.209 18 317 19.7909 317 22V51H18V22Z" fill="#01B1AE"/>
-<path d="M39.1588 34.7091C39.8892 34.7428 39.9893 35.3904 40.0013 35.5602V38.9181C39.9847 38.9392 39.9681 38.9607 39.9512 38.9824C39.879 39.0754 39.8038 39.1722 39.7258 39.2592C39.5829 39.4159 39.3546 39.6577 39.2689 39.739C37.6995 41.2258 35.8554 41.7672 34.1354 41.7672C32.7216 41.7672 30.7763 41.3212 29.1192 39.7359C26.308 37.0351 26.2798 32.7103 29.1177 30.0352C29.6434 29.5431 29.847 29.3592 30.6836 28.8848C31.8382 28.2276 33.1469 28 34.2041 28C35.1323 28 36.1486 28.2004 36.9095 28.5143C37.0868 28.5859 37.2869 28.6714 37.5384 28.8162C38.2117 29.2048 39.0951 29.8861 39.5366 30.9633V30.9683H31.2333V36.0008C31.2963 36.8979 31.4917 37.6099 32.0437 38.1104C32.4895 38.5162 33.1704 38.7821 34.2041 38.8867C34.5351 38.9224 34.906 38.9396 35.3177 38.9396L37.1224 38.9354C37.1054 38.9296 37.037 38.8867 36.7867 38.5763C36.4754 38.1859 36.4055 37.5175 36.4055 37.0182H36.4039V34.7083L39.1588 34.7091Z" fill="white"/>
-<path d="M65.3996 28.028V34.7739C66.0084 34.2753 66.9752 34.109 68.4898 34.0113L68.4863 30.971H70.9051C72.1771 30.9139 75.0058 30.536 75 28.028H65.3996Z" fill="white"/>
-<path d="M55.13 46.6042C55.13 46.8241 54.948 47 54.7286 47H47.3261C47.1083 47 46.931 46.8241 46.931 46.6042V45.4683C46.931 45.2495 47.1083 45.0717 47.3261 45.0717H54.7286C54.948 45.0717 55.13 45.2495 55.13 45.4683V46.6042Z" fill="white"/>
-<path d="M72.7146 33.934H73.3554C73.3554 33.934 73.3539 34.3901 73.3539 34.5682C73.3539 35.9688 72.1167 36.6789 69.6824 36.6789H68.4865V38.9988C68.4865 39.8154 68.291 41.7 66.4358 41.7395H65.3994V38.3412C65.693 34.4196 70.8991 33.9762 72.7146 33.934Z" fill="white"/>
-<path d="M58.6291 28.0314L51.8945 28.0291V41.7392C54.2418 41.4511 55.1001 40.3455 55.2245 38.7158V30.9694H58.1849C58.2213 30.9718 58.2627 30.9741 58.3043 30.9764C58.3758 30.9803 58.448 30.9843 58.4966 30.9889C59.9011 31.1552 60.7961 31.7676 60.8869 34.5784C60.8973 34.6884 60.894 34.8121 60.891 34.9245C60.8897 34.9741 60.8884 35.0216 60.8884 35.0646C60.8162 39.6182 57.3235 41.0127 55.3887 41.5216L55.3786 41.525C55.3555 41.5346 55.3389 41.5461 55.3389 41.5695V41.6921C55.3389 41.717 55.3586 41.7358 55.3786 41.7385L55.3852 41.7392H55.6119C58.4321 41.7392 64.0999 41.0591 64.0999 34.9144V34.8022C64.0666 29.4768 61.7536 28.0314 58.6291 28.0314Z" fill="white"/>
-<path d="M46.0177 30.9822L44.4259 30.9691C44.3243 30.9691 44.2254 30.9649 44.1242 30.9576C42.1623 30.8185 41.0414 29.3352 40.5844 28.5573C40.4797 28.3979 40.3801 28.2342 40.2858 28.0614C40.2858 28.0614 40.2762 28.0281 40.2924 28.0281H44.8453C46.3688 28.0281 47.0034 28.1216 47.6779 28.3837C47.837 28.4427 48.0027 28.5155 48.1785 28.5964C49.1561 29.0524 49.8186 29.8693 50.0836 30.9174C50.123 31.0619 50.1481 31.2163 50.1697 31.3707C50.1994 31.5742 50.2164 31.7861 50.2164 32.0053C50.2195 33.6351 49.4014 34.5643 48.2696 35.215C48.2681 35.2177 48.2495 35.2284 48.2495 35.2284C48.2341 35.2342 48.2341 35.2342 48.2252 35.2414C48.2127 35.2475 48.2016 35.2542 48.1912 35.2605C48.1846 35.2644 48.1782 35.2683 48.1719 35.2717C48.1684 35.2717 48.1518 35.284 48.1518 35.284C48.0197 35.3499 47.8899 35.3905 47.769 35.42C47.75 35.4239 47.7318 35.4288 47.7147 35.4333C47.6999 35.4373 47.6858 35.4411 47.6728 35.4438V32.2337C47.6311 31.2443 46.7535 30.9856 46.2487 30.9856C46.2327 30.9856 46.2162 30.9858 46.1992 30.986C46.144 30.9865 46.0836 30.9871 46.0177 30.9822Z" fill="white"/>
-<path d="M42.635 34.7091C41.8679 34.7386 41.7937 35.4402 41.7849 35.5778V37.6479H44.6661C44.9089 38.0019 45.1505 38.3524 45.3752 38.6783L45.6306 39.0488C45.955 39.5121 46.2664 39.9494 46.3958 40.1168C46.4046 40.1284 46.4149 40.1429 46.4269 40.1598C46.5904 40.3898 47.0831 41.0827 48.7845 41.4971C49.4069 41.6479 50.0927 41.6928 50.4763 41.7179C50.5458 41.7224 50.6058 41.7263 50.6533 41.7301L50.824 41.7385L50.8058 41.7056C50.8058 41.7056 50.4976 41.2817 50.1082 40.6134L50.0234 40.4677C49.4873 39.5466 47.6691 36.4226 47.3201 35.8127C47.0057 35.2628 46.5051 35.018 45.9929 34.8693H45.9879C45.6209 34.7681 45.218 34.7294 44.9164 34.7141C44.903 34.7135 44.89 34.7127 44.877 34.7119C44.8542 34.7105 44.8316 34.7091 44.8082 34.7091H42.635Z" fill="white"/>
-<defs>
-<filter id="filter0_f" x="0" y="0" width="335" height="256" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="9" result="effect1_foregroundBlur"/>
-</filter>
-</defs>
-</svg>
diff --git a/src/assets/icons/ico/switchGRDFMobile.svg b/src/assets/icons/ico/switchGRDFMobile.svg
deleted file mode 100644
index 5b262e5689da1f088a42a6320e37882bc1e44c68..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/switchGRDFMobile.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-<svg width="210" height="256" viewBox="0 0 210 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.55" filter="url(#filter0_f)">
-<rect x="18" y="18" width="174" height="220" rx="2" fill="#121212"/>
-</g>
-<rect x="18" y="18" width="174" height="220" rx="4" fill="white"/>
-<rect x="150" y="73" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="169.5" cy="75.5" r="7.5" fill="#01B1AE"/>
-<rect x="150" y="96" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="169.5" cy="98.5" r="7.5" fill="#01B1AE"/>
-<rect x="150" y="119" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="169.5" cy="121.5" r="7.5" fill="#01B1AE"/>
-<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 177 160)" fill="#D5D5D5"/>
-<circle r="7.5" transform="matrix(-1 0 0 1 157.5 162.5)" fill="#AEAEAE"/>
-<rect x="150" y="183" width="24" height="6" rx="3" fill="#D5D5D5"/>
-<circle cx="169.5" cy="185.5" r="7.5" fill="#01B1AE"/>
-<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 177 206)" fill="#D5D5D5"/>
-<circle r="7.5" transform="matrix(-1 0 0 1 157.5 208.5)" fill="#AEAEAE"/>
-<path d="M32 77L41.0476 73L40.0423 77L48.5873 73L47.0794 77L57.1323 73L55.6243 77L67.1852 73L64.672 77L75.2275 73L73.7196 77L84.7778 73L82.2645 77L92.3175 73L91.3122 77L101.365 73L99.3545 77L109.91 73L107.899 77L118.455 73L115.942 77L127 73" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 99L41.0476 95L40.0423 99L48.5873 95L47.0794 99L57.1323 95L55.6243 99L67.1852 95L64.672 99L75.2275 95" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 121L41.0476 117L40.0423 121L48.5873 117L47.0794 121L57.1323 117L55.6243 121L67.1852 117L64.672 121L75.2275 117L73.7196 121L84.7778 117L82.2645 121L92.3175 117L91.3122 121L101.365 117" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 187L41.0476 183L40.0423 187L48.5873 183L47.0794 187L57.1323 183L55.6243 187L67.1852 183L64.672 187L75.2275 183L73.7196 187L84.7778 183L82.2645 187L92.3175 183L91.3122 187L101.365 183L99.3545 187L109.91 183L107.899 187L118.455 183" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 210L41.0476 207L40.0423 210L48.5873 207L47.0794 210L57.1323 207L55.6243 210L67.1852 207L64.672 210L75.2275 207L73.7196 210L84.7778 207L82.2645 210L92.3175 207L91.3122 210L101.365 207" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32 165L41.0476 161L40.0423 165L48.5873 161L47.0794 165L57.1323 161L55.6243 165L67.1852 161L64.672 165L75.2275 161L73.7196 165L84.7778 161L82.2645 165L92.3175 161" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18 22C18 19.7909 19.7909 18 22 18H188C190.209 18 192 19.7909 192 22V51H18V22Z" fill="#01B1AE"/>
-<path d="M39.1588 34.7091C39.8892 34.7428 39.9893 35.3904 40.0013 35.5602V38.9181C39.9847 38.9392 39.9681 38.9607 39.9512 38.9824C39.879 39.0754 39.8038 39.1722 39.7258 39.2592C39.5829 39.4159 39.3546 39.6577 39.2689 39.739C37.6995 41.2258 35.8554 41.7672 34.1354 41.7672C32.7216 41.7672 30.7763 41.3212 29.1192 39.7359C26.308 37.0351 26.2798 32.7103 29.1177 30.0352C29.6434 29.5431 29.847 29.3592 30.6836 28.8848C31.8382 28.2276 33.1469 28 34.2041 28C35.1323 28 36.1486 28.2004 36.9095 28.5143C37.0868 28.5859 37.2869 28.6714 37.5384 28.8162C38.2117 29.2048 39.0951 29.8861 39.5366 30.9633V30.9683H31.2333V36.0008C31.2963 36.8979 31.4917 37.6099 32.0437 38.1104C32.4895 38.5162 33.1704 38.7821 34.2041 38.8867C34.5351 38.9224 34.906 38.9396 35.3177 38.9396L37.1224 38.9354C37.1054 38.9296 37.037 38.8867 36.7867 38.5763C36.4754 38.1859 36.4055 37.5175 36.4055 37.0182H36.4039V34.7083L39.1588 34.7091Z" fill="white"/>
-<path d="M65.3996 28.028V34.7739C66.0084 34.2753 66.9752 34.109 68.4898 34.0113L68.4863 30.971H70.9051C72.1771 30.9139 75.0058 30.536 75 28.028H65.3996Z" fill="white"/>
-<path d="M55.13 46.6042C55.13 46.8241 54.948 47 54.7286 47H47.3261C47.1083 47 46.931 46.8241 46.931 46.6042V45.4683C46.931 45.2495 47.1083 45.0717 47.3261 45.0717H54.7286C54.948 45.0717 55.13 45.2495 55.13 45.4683V46.6042Z" fill="white"/>
-<path d="M72.7146 33.934H73.3554C73.3554 33.934 73.3539 34.3901 73.3539 34.5682C73.3539 35.9688 72.1167 36.6789 69.6824 36.6789H68.4865V38.9988C68.4865 39.8154 68.291 41.7 66.4358 41.7395H65.3994V38.3412C65.693 34.4196 70.8991 33.9762 72.7146 33.934Z" fill="white"/>
-<path d="M58.6291 28.0314L51.8945 28.0291V41.7392C54.2418 41.4511 55.1001 40.3455 55.2245 38.7158V30.9694H58.1849C58.2213 30.9718 58.2627 30.9741 58.3043 30.9764C58.3758 30.9803 58.448 30.9843 58.4966 30.9889C59.9011 31.1552 60.7961 31.7676 60.8869 34.5784C60.8973 34.6884 60.894 34.8121 60.891 34.9245C60.8897 34.9741 60.8884 35.0216 60.8884 35.0646C60.8162 39.6182 57.3235 41.0127 55.3887 41.5216L55.3786 41.525C55.3555 41.5346 55.3389 41.5461 55.3389 41.5695V41.6921C55.3389 41.717 55.3586 41.7358 55.3786 41.7385L55.3852 41.7392H55.6119C58.4321 41.7392 64.0999 41.0591 64.0999 34.9144V34.8022C64.0666 29.4768 61.7536 28.0314 58.6291 28.0314Z" fill="white"/>
-<path d="M46.0177 30.9822L44.4259 30.9691C44.3243 30.9691 44.2254 30.9649 44.1242 30.9576C42.1623 30.8185 41.0414 29.3352 40.5844 28.5573C40.4797 28.3979 40.3801 28.2342 40.2858 28.0614C40.2858 28.0614 40.2762 28.0281 40.2924 28.0281H44.8453C46.3688 28.0281 47.0034 28.1216 47.6779 28.3837C47.837 28.4427 48.0027 28.5155 48.1785 28.5964C49.1561 29.0524 49.8186 29.8693 50.0836 30.9174C50.123 31.0619 50.1481 31.2163 50.1697 31.3707C50.1994 31.5742 50.2164 31.7861 50.2164 32.0053C50.2195 33.6351 49.4014 34.5643 48.2696 35.215C48.2681 35.2177 48.2495 35.2284 48.2495 35.2284C48.2341 35.2342 48.2341 35.2342 48.2252 35.2414C48.2127 35.2475 48.2016 35.2542 48.1912 35.2605C48.1846 35.2644 48.1782 35.2683 48.1719 35.2717C48.1684 35.2717 48.1518 35.284 48.1518 35.284C48.0197 35.3499 47.8899 35.3905 47.769 35.42C47.75 35.4239 47.7318 35.4288 47.7147 35.4333C47.6999 35.4373 47.6858 35.4411 47.6728 35.4438V32.2337C47.6311 31.2443 46.7535 30.9856 46.2487 30.9856C46.2327 30.9856 46.2162 30.9858 46.1992 30.986C46.144 30.9865 46.0836 30.9871 46.0177 30.9822Z" fill="white"/>
-<path d="M42.635 34.7091C41.8679 34.7386 41.7937 35.4402 41.7849 35.5778V37.6479H44.6661C44.9089 38.0019 45.1505 38.3524 45.3752 38.6783L45.6306 39.0488C45.955 39.5121 46.2664 39.9494 46.3958 40.1168C46.4046 40.1284 46.4149 40.1429 46.4269 40.1598C46.5904 40.3898 47.0831 41.0827 48.7845 41.4971C49.4069 41.6479 50.0927 41.6928 50.4763 41.7179C50.5458 41.7224 50.6058 41.7263 50.6533 41.7301L50.824 41.7385L50.8058 41.7056C50.8058 41.7056 50.4976 41.2817 50.1082 40.6134L50.0234 40.4677C49.4873 39.5466 47.6691 36.4226 47.3201 35.8127C47.0057 35.2628 46.5051 35.018 45.9929 34.8693H45.9879C45.6209 34.7681 45.218 34.7294 44.9164 34.7141C44.903 34.7135 44.89 34.7127 44.877 34.7119C44.8542 34.7105 44.8316 34.7091 44.8082 34.7091H42.635Z" fill="white"/>
-<defs>
-<filter id="filter0_f" x="0" y="0" width="210" height="256" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="9" result="effect1_foregroundBlur"/>
-</filter>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/onboarding/browser_grdf.svg b/src/assets/icons/visu/onboarding/browser_grdf.svg
deleted file mode 100644
index 06f210b1217ed42e9a509022ed865bab32d66e0e..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/onboarding/browser_grdf.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="83" height="62" viewBox="0 0 83 62" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 8.5H82.5V58C82.5 59.933 80.933 61.5 79 61.5H4C2.06701 61.5 0.5 59.933 0.5 58V8.5Z" fill="white" stroke="#A2B4C1"/>
-<path d="M0 4C0 1.79086 1.79086 0 4 0H79C81.2091 0 83 1.79086 83 4V8H0V4Z" fill="#A2B4C1"/>
-<circle cx="5" cy="5" r="2" fill="#FF5F5F"/>
-<circle cx="11" cy="5" r="2" fill="#FFB850"/>
-<circle cx="17" cy="5" r="2" fill="#3CE800"/>
-<path d="M45.9203 47.1802C45.9203 47.466 45.6815 47.6946 45.3936 47.6946H35.6778C35.3919 47.6946 35.1592 47.466 35.1592 47.1802V45.704C35.1592 45.4196 35.3919 45.1885 35.6778 45.1885H45.3936C45.6815 45.1885 45.9203 45.4196 45.9203 45.704V47.1802Z" fill="#FAB200"/>
-<path d="M59.3997 23.0361V31.8037C60.1987 31.1557 61.4677 30.9396 63.4555 30.8126L63.451 26.8611H66.6257C68.2952 26.7869 72.0078 26.2958 72.0002 23.0361H59.3997Z" fill="#71B857"/>
-<path d="M69.0006 30.7122H69.8417C69.8417 30.7122 69.8396 31.3049 69.8396 31.5365C69.8396 33.3568 68.2158 34.2797 65.0208 34.2797H63.4512V37.2948C63.4512 38.3562 63.1947 40.8055 60.7596 40.8568H59.3994V36.4402C59.7847 31.3432 66.6178 30.767 69.0006 30.7122Z" fill="#71B857"/>
-<path d="M50.513 23.0401L41.6738 23.0371V40.8561C44.7547 40.4816 45.8813 39.0447 46.0445 36.9265V26.8586H49.93C49.9779 26.8617 50.0321 26.8647 50.0867 26.8677C50.1806 26.8728 50.2753 26.878 50.3391 26.884C52.1825 27.1001 53.3572 27.896 53.4763 31.5492C53.49 31.6922 53.4857 31.853 53.4818 31.999C53.48 32.0635 53.4784 32.1253 53.4784 32.1812C53.3836 38.0994 48.7994 39.9118 46.26 40.5732L46.2468 40.5777C46.2164 40.5902 46.1946 40.6051 46.1946 40.6355V40.7949C46.1946 40.8272 46.2204 40.8516 46.2468 40.8551L46.2554 40.8561H46.553C50.2545 40.8561 57.6934 39.9721 57.6934 31.986V31.84C57.6498 24.9187 54.614 23.0401 50.513 23.0401Z" fill="#00B1AF"/>
-<path d="M33.9604 26.8756L31.8711 26.8586C31.7378 26.8586 31.608 26.8531 31.4752 26.8437C28.9002 26.6629 27.429 24.735 26.8292 23.7239C26.6918 23.5167 26.561 23.3041 26.4373 23.0795C26.4373 23.0795 26.4247 23.0361 26.446 23.0361H32.4217C34.4213 23.0361 35.2542 23.1577 36.1394 23.4983C36.3483 23.575 36.5658 23.6696 36.7965 23.7747C38.0796 24.3674 38.9491 25.4292 39.2969 26.7914C39.3486 26.9791 39.3815 27.1799 39.4099 27.3806C39.449 27.645 39.4713 27.9204 39.4713 28.2053C39.4753 30.3235 38.4016 31.5313 36.9161 32.3769C36.9141 32.3804 36.8897 32.3944 36.8897 32.3944C36.8695 32.4018 36.8695 32.4018 36.8578 32.4113C36.8414 32.4192 36.8268 32.4279 36.8132 32.436C36.8045 32.4412 36.7961 32.4462 36.7878 32.4507C36.7833 32.4507 36.7615 32.4666 36.7615 32.4666C36.5881 32.5523 36.4177 32.605 36.2591 32.6434C36.2341 32.6484 36.2102 32.6548 36.1878 32.6607C36.1683 32.6659 36.1498 32.6708 36.1328 32.6743V28.5022C36.0781 27.2162 34.9262 26.88 34.2636 26.88C34.2426 26.88 34.221 26.8803 34.1987 26.8805C34.1262 26.8812 34.0469 26.882 33.9604 26.8756Z" fill="#009BC4"/>
-<path d="M29.5207 31.7194C28.5138 31.7578 28.4165 32.6697 28.4048 32.8485V35.5389H32.1864C32.5051 35.9991 32.8222 36.4546 33.1171 36.8781L33.4523 37.3598C33.8782 37.9619 34.2868 38.5302 34.4567 38.7478C34.4682 38.7629 34.4817 38.7817 34.4975 38.8037C34.7122 39.1026 35.3588 40.0032 37.5918 40.5418C38.4088 40.7378 39.3089 40.7961 39.8124 40.8287C39.9036 40.8346 39.9823 40.8397 40.0446 40.8446L40.2687 40.8555L40.2449 40.8127C40.2449 40.8127 39.8403 40.2619 39.3293 39.3933L39.2179 39.2038C38.5143 38.0067 36.1279 33.9464 35.6699 33.1538C35.2572 32.4391 34.6001 32.1208 33.9279 31.9276H33.9213C33.4397 31.7961 32.9109 31.7458 32.5149 31.7259C32.4974 31.7252 32.4803 31.7241 32.4632 31.7231C32.4333 31.7212 32.4036 31.7194 32.373 31.7194H29.5207Z" fill="#009BC4"/>
-<path d="M24.9584 31.7197C25.9171 31.7636 26.0484 32.6053 26.0641 32.8259V37.1903C26.0425 37.2177 26.0206 37.2456 25.9985 37.2738C25.9037 37.3946 25.805 37.5204 25.7027 37.6335C25.5151 37.8372 25.2155 38.1515 25.1029 38.2571C23.043 40.1895 20.6227 40.8932 18.3651 40.8932C16.5096 40.8932 13.9564 40.3135 11.7815 38.2531C8.0917 34.7429 8.05469 29.122 11.7795 25.6451C12.4695 25.0056 12.7367 24.7666 13.8348 24.15C15.3501 23.2958 17.0678 23 18.4554 23C19.6737 23 21.0075 23.2605 22.0063 23.6684C22.239 23.7615 22.5016 23.8726 22.8316 24.0608C23.7153 24.5658 24.8748 25.4514 25.4542 26.8514V26.8578H14.5562V33.3987C14.6388 34.5646 14.8954 35.4899 15.6198 36.1404C16.2049 36.6678 17.0987 37.0135 18.4554 37.1494C18.8899 37.1957 19.3766 37.2181 19.917 37.2181L22.2856 37.2127C22.2633 37.2052 22.1736 37.1494 21.8451 36.746C21.4364 36.2385 21.3447 35.3699 21.3447 34.721H21.3426V31.7188L24.9584 31.7197Z" fill="#0053A2"/>
-</svg>
diff --git a/src/assets/icons/visu/onboarding/grdf-mail.svg b/src/assets/icons/visu/onboarding/grdf-mail.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b397180f4a760fa71892e3d856e8ef89c9ed53a0
--- /dev/null
+++ b/src/assets/icons/visu/onboarding/grdf-mail.svg
@@ -0,0 +1,33 @@
+<svg width="78" height="75" viewBox="0 0 78 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M66.6722 31.5706C66.6722 28.1162 65.0488 24.8626 62.2886 22.7855L43.6853 8.78557C40.8367 6.64179 36.9132 6.64179 34.0645 8.78556L15.8114 22.5219C12.9888 24.6461 11.3285 27.9734 11.3285 31.5061C11.3285 36.0711 14.0886 40.1831 18.3134 41.9122L33.9507 48.3123C37.1065 49.6039 40.6434 49.6039 43.7991 48.3123L59.842 41.7462C63.9733 40.0554 66.6722 36.0345 66.6722 31.5706Z"
+ fill="#7B7B7B" />
+ <rect x="16.1047" y="19.8311" width="46.5452" height="28.2264" rx="4" fill="#45D1B8" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M31.9807 31.8938C31.973 31.7826 31.9087 31.3583 31.4391 31.3362L29.6679 31.3357V32.8489H29.6689C29.6689 33.176 29.7139 33.6137 29.914 33.8695C30.0749 34.0729 30.1189 34.101 30.1298 34.1047L28.9696 34.1075C28.7048 34.1075 28.4664 34.0962 28.2536 34.0729C27.589 34.0043 27.1512 33.8301 26.8646 33.5643C26.5098 33.2365 26.3841 32.7701 26.3436 32.1824V28.8858H31.682V28.8825C31.3981 28.1769 30.8301 27.7306 30.3973 27.4761C30.2356 27.3812 30.107 27.3252 29.993 27.2783C29.5038 27.0727 28.8504 26.9414 28.2536 26.9414C27.5739 26.9414 26.7325 27.0905 25.9902 27.521C25.4523 27.8318 25.3214 27.9523 24.9835 28.2746C23.1589 30.0269 23.177 32.8599 24.9844 34.6291C26.0498 35.6676 27.3005 35.9598 28.2094 35.9598C29.3153 35.9598 30.5008 35.6051 31.5099 34.6311C31.565 34.5779 31.7118 34.4195 31.8036 34.3169C31.8538 34.2599 31.9021 34.1964 31.9485 34.1356L31.9486 34.1355L31.9807 34.0934V31.8938ZM35.8491 28.8946L34.8257 28.886C34.7604 28.886 34.6968 28.8833 34.6317 28.8785C33.3704 28.7874 32.6497 27.8157 32.356 27.3061C32.2887 27.2017 32.2246 27.0945 32.164 26.9813C32.164 26.9813 32.1578 26.9595 32.1682 26.9595H35.0954C36.0749 26.9595 36.4829 27.0207 36.9165 27.1924C37.0188 27.2311 37.1253 27.2788 37.2383 27.3317C37.8669 27.6304 38.2928 28.1656 38.4632 28.8522C38.4885 28.9468 38.5046 29.048 38.5185 29.1491C38.5377 29.2824 38.5486 29.4212 38.5486 29.5648C38.5506 30.6324 38.0246 31.2411 37.2969 31.6673C37.2959 31.6691 37.284 31.6761 37.284 31.6761C37.2741 31.6799 37.2741 31.6799 37.2684 31.6847C37.2603 31.6886 37.2532 31.693 37.2465 31.6971L37.2415 31.7002L37.2341 31.7045C37.2319 31.7045 37.2212 31.7125 37.2212 31.7125C37.1363 31.7557 37.0528 31.7823 36.9751 31.8016C36.9629 31.8042 36.9512 31.8074 36.9402 31.8104L36.9402 31.8104C36.9306 31.813 36.9216 31.8154 36.9133 31.8172V29.7144C36.8864 29.0663 36.3222 28.8968 35.9976 28.8968L35.9658 28.8971H35.9658C35.9303 28.8974 35.8915 28.8978 35.8491 28.8946ZM33.6744 31.3359C33.1811 31.3553 33.1335 31.8149 33.1278 31.905V33.261H34.9801C35.136 33.4926 35.2911 33.7218 35.4353 33.935L35.436 33.936L35.6002 34.1787C35.8088 34.4822 36.009 34.7686 36.0922 34.8783C36.0979 34.8859 36.1045 34.8954 36.1122 34.9065C36.2174 35.0571 36.5341 35.5111 37.6279 35.7825C38.0281 35.8813 38.469 35.9107 38.7157 35.9271C38.7603 35.9301 38.7989 35.9327 38.8294 35.9351L38.9392 35.9406L38.9275 35.9191C38.9275 35.9191 38.7293 35.6414 38.479 35.2036L38.4245 35.1082L38.4236 35.1067C38.0779 34.5014 36.9107 32.458 36.6865 32.0589C36.4843 31.6987 36.1625 31.5383 35.8332 31.4409H35.83C35.594 31.3746 35.335 31.3492 35.1411 31.3392C35.1325 31.3388 35.1241 31.3383 35.1157 31.3378C35.1011 31.3369 35.0865 31.3359 35.0715 31.3359H33.6744ZM48.3094 31.3784V26.9595H54.4817C54.4854 28.6024 52.6668 28.8499 51.8491 28.8873H50.2939L50.2962 30.8789C49.3224 30.9429 48.7008 31.0518 48.3094 31.3784ZM53.4244 30.8283H53.0124C51.8452 30.8559 48.4981 31.1463 48.3093 33.7153V35.9413H48.9756C50.1684 35.9154 50.2941 34.6809 50.2941 34.146V32.6263H51.0629C52.628 32.6263 53.4234 32.1612 53.4234 31.2437C53.4234 31.127 53.4244 30.8283 53.4244 30.8283ZM39.6268 26.96L43.9567 26.9615C45.9655 26.9615 47.4526 27.9083 47.4739 31.3967V31.4703C47.4739 35.4954 43.83 35.9409 42.0169 35.9409H41.8711L41.8669 35.9404C41.854 35.9387 41.8413 35.9264 41.8413 35.91V35.8297C41.8413 35.8144 41.852 35.8069 41.8669 35.8006L41.8733 35.7983C43.1173 35.465 45.3628 34.5515 45.4092 31.5687C45.4092 31.5406 45.41 31.5095 45.4109 31.4771V31.477V31.477V31.4769C45.4128 31.4032 45.4149 31.3222 45.4082 31.2501C45.3498 29.4089 44.7744 29.0078 43.8715 28.8988C43.8402 28.8958 43.7938 28.8932 43.7478 28.8906C43.7211 28.8891 43.6945 28.8876 43.6711 28.886H41.7678V33.9604C41.6878 35.028 41.136 35.7522 39.6268 35.9409V26.96Z"
+ fill="#1B1C22" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M12.1026 28.4502L39.126 48.7866L65.9628 28.5906C66.4206 29.5981 66.6755 30.7173 66.6755 31.8961V53.8734C66.6755 58.2917 63.0938 61.8734 58.6755 61.8734H19.3245C14.9062 61.8734 11.3245 58.2917 11.3245 53.8734V31.8961C11.3245 30.6623 11.6038 29.4937 12.1026 28.4502Z"
+ fill="#383941" />
+ <path
+ d="M36.0909 44.932L27.1389 50.9733C23.0504 53.7325 25.0035 60.1178 29.9359 60.1178H47.929C52.8733 60.1178 54.8179 53.7075 50.7069 50.9605L41.6659 44.9192C39.9774 43.7909 37.7742 43.796 36.0909 44.932Z"
+ fill="#383941" />
+ <path
+ d="M38.5354 41.9437L13.5887 60.1174L38.5865 44.1672C38.9152 43.9574 39.3359 43.9579 39.6642 44.1684L64.5369 60.1174L39.715 41.9451C39.3639 41.6881 38.8871 41.6875 38.5354 41.9437Z"
+ fill="white" />
+ <mask id="path-7-inside-1_4484_19904" fill="white">
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M52.8918 8.21365C51.8896 7.7836 50.8117 8.60204 50.9462 9.69091L51.7422 16.1351C51.9333 17.6829 53.7178 18.4486 54.9364 17.5058L60.0101 13.5804C60.8675 12.9172 60.6875 11.5589 59.6853 11.1289C58.9638 10.8193 58.6216 9.9799 58.921 9.25411L60.773 4.76489C61.1942 3.7438 60.7128 2.56293 59.6978 2.12735L59.1928 1.91068C58.1778 1.4751 57.0134 1.94976 56.5922 2.97085L54.7402 7.46009C54.4408 8.18587 53.6132 8.52325 52.8918 8.21365Z" />
+ </mask>
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M52.8918 8.21365C51.8896 7.7836 50.8117 8.60204 50.9462 9.69091L51.7422 16.1351C51.9333 17.6829 53.7178 18.4486 54.9364 17.5058L60.0101 13.5804C60.8675 12.9172 60.6875 11.5589 59.6853 11.1289C58.9638 10.8193 58.6216 9.9799 58.921 9.25411L60.773 4.76489C61.1942 3.7438 60.7128 2.56293 59.6978 2.12735L59.1928 1.91068C58.1778 1.4751 57.0134 1.94976 56.5922 2.97085L54.7402 7.46009C54.4408 8.18587 53.6132 8.52325 52.8918 8.21365Z"
+ fill="white" />
+ <path
+ d="M59.1928 1.91068L59.5742 0.986253L59.1928 1.91068ZM56.5922 2.97085L57.5112 3.3652L56.5922 2.97085ZM59.6978 2.12735L59.3164 3.05178L59.6978 2.12735ZM54.9364 17.5058L55.5463 18.3059L54.9364 17.5058ZM52.7294 16.0203L51.9334 9.57616L49.9589 9.80565L50.7549 16.2498L52.7294 16.0203ZM59.4003 12.7803L54.3266 16.7057L55.5463 18.3059L60.62 14.3806L59.4003 12.7803ZM59.854 4.37055L58.0021 8.85977L59.84 9.64845L61.6919 5.15924L59.854 4.37055ZM58.8115 2.83511L59.3164 3.05178L60.0791 1.20292L59.5742 0.986253L58.8115 2.83511ZM55.6592 7.85444L57.5112 3.3652L55.6732 2.57651L53.8213 7.06575L55.6592 7.85444ZM53.8213 7.06575C53.7325 7.28098 53.4871 7.38103 53.2731 7.28922L52.5104 9.13808C53.7394 9.66547 55.1492 9.09076 55.6592 7.85444L53.8213 7.06575ZM59.5742 0.986253C58.0516 0.332886 56.3051 1.04487 55.6732 2.57651L57.5112 3.3652C57.7218 2.85465 58.3039 2.61732 58.8115 2.83511L59.5742 0.986253ZM61.6919 5.15924C62.3238 3.62759 61.6017 1.85629 60.0791 1.20292L59.3164 3.05178C59.8239 3.26957 60.0646 3.86 59.854 4.37055L61.6919 5.15924ZM60.0666 10.2044C59.8527 10.1126 59.7512 9.86369 59.84 9.64845L58.0021 8.85977C57.492 10.0961 58.0749 11.5259 59.3039 12.0533L60.0666 10.2044ZM60.62 14.3806C62.0804 13.2507 61.7738 10.937 60.0666 10.2044L59.3039 12.0533C59.6012 12.1808 59.6545 12.5836 59.4003 12.7803L60.62 14.3806ZM51.9334 9.57616C51.8935 9.25325 52.2132 9.01054 52.5104 9.13808L53.2731 7.28922C51.5659 6.55665 49.7298 7.95082 49.9589 9.80565L51.9334 9.57616ZM50.7549 16.2498C51.0417 18.5715 53.7183 19.7201 55.5463 18.3059L54.3266 16.7057C53.7172 17.1771 52.825 16.7942 52.7294 16.0203L50.7549 16.2498Z"
+ fill="white" mask="url(#path-7-inside-1_4484_19904)" />
+ <path d="M49.6108 14.8994L46.6999 11.9305" stroke="white" stroke-width="2" stroke-linecap="round" />
+ <path d="M49.0653 17.8965H47.5557" stroke="white" stroke-width="2" stroke-linecap="round" />
+ <path d="M57.8223 18.4336L61.905 17.896" stroke="white" stroke-width="2" stroke-linecap="round" />
+ <path d="M55.2557 20.4531L56.5728 21.4893" stroke="white" stroke-width="2" stroke-linecap="round" />
+ <ellipse cx="39" cy="71.5898" rx="38.5" ry="3.40909" fill="#212121" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/onboarding/grdf.svg b/src/assets/icons/visu/onboarding/grdf.svg
deleted file mode 100644
index 564e21d8a9355eec4d0bc3f5b9bc1006b78d043c..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/onboarding/grdf.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.5293 131.207H115.611V199.241C115.611 201.174 114.044 202.741 112.111 202.741H6.0293C4.0963 202.741 2.5293 201.174 2.5293 199.241V131.207Z" fill="url(#paint0_linear_11182_69332)" stroke="#52616C"/>
-<path d="M2.0293 123.962C2.0293 121.753 3.82016 119.962 6.0293 119.962H112.111C114.321 119.962 116.111 121.753 116.111 123.962V130.707H2.0293V123.962Z" fill="#52616C"/>
-<ellipse cx="8.90131" cy="126.678" rx="2.74897" ry="2.68643" fill="#FF5F5F"/>
-<ellipse cx="17.1484" cy="126.678" rx="2.74897" ry="2.68643" fill="#FFB850"/>
-<ellipse cx="25.3954" cy="126.678" rx="2.74896" ry="2.68643" fill="#3CE800"/>
-<path d="M44.2788 179.917V181.115H39.0259V184.723H43.2786V185.875H39.0259V189.582H44.2788V190.78H37.5371V179.917H44.2788Z" fill="white"/>
-<path d="M51.4717 184.465C51.431 184.521 51.3902 184.564 51.3495 184.594C51.3088 184.624 51.2503 184.64 51.1739 184.64C51.0976 184.64 51.0136 184.609 50.922 184.549C50.8354 184.483 50.7235 184.412 50.586 184.336C50.4486 184.261 50.2806 184.192 50.0821 184.132C49.8887 184.066 49.6495 184.033 49.3644 184.033C48.9878 184.033 48.6544 184.101 48.3643 184.238C48.0741 184.369 47.8298 184.561 47.6313 184.814C47.4379 185.067 47.2903 185.372 47.1885 185.731C47.0918 186.09 47.0434 186.492 47.0434 186.937C47.0434 187.402 47.0969 187.816 47.2038 188.18C47.3106 188.539 47.4608 188.842 47.6542 189.09C47.8476 189.332 48.0818 189.519 48.3566 189.651C48.6366 189.777 48.9496 189.84 49.2957 189.84C49.6266 189.84 49.8989 189.802 50.1127 189.726C50.3264 189.645 50.5046 189.557 50.6471 189.461C50.7896 189.365 50.9067 189.279 50.9983 189.203C51.0899 189.122 51.1816 189.082 51.2732 189.082C51.3902 189.082 51.4768 189.125 51.5328 189.211L51.9145 189.704C51.5786 190.113 51.1586 190.414 50.6547 190.606C50.1508 190.793 49.6189 190.886 49.059 190.886C48.5755 190.886 48.125 190.798 47.7077 190.621C47.2954 190.444 46.9365 190.189 46.6311 189.855C46.3257 189.517 46.084 189.102 45.9058 188.612C45.7328 188.122 45.6462 187.563 45.6462 186.937C45.6462 186.366 45.7251 185.837 45.8829 185.352C46.0458 184.867 46.2799 184.45 46.5853 184.101C46.8958 183.748 47.2776 183.472 47.7306 183.275C48.1836 183.078 48.7027 182.979 49.2881 182.979C49.8276 182.979 50.3061 183.068 50.7235 183.245C51.1408 183.417 51.5099 183.662 51.8305 183.98L51.4717 184.465Z" fill="white"/>
-<path d="M56.4542 182.979C57.0192 182.979 57.5282 183.073 57.9812 183.26C58.4393 183.447 58.8261 183.712 59.1417 184.056C59.4623 184.4 59.7067 184.817 59.8746 185.307C60.0477 185.792 60.1342 186.335 60.1342 186.937C60.1342 187.543 60.0477 188.089 59.8746 188.574C59.7067 189.059 59.4623 189.474 59.1417 189.817C58.8261 190.161 58.4393 190.426 57.9812 190.613C57.5282 190.795 57.0192 190.886 56.4542 190.886C55.8892 190.886 55.3777 190.795 54.9196 190.613C54.4666 190.426 54.0797 190.161 53.7591 189.817C53.4384 189.474 53.1915 189.059 53.0185 188.574C52.8454 188.089 52.7589 187.543 52.7589 186.937C52.7589 186.335 52.8454 185.792 53.0185 185.307C53.1915 184.817 53.4384 184.4 53.7591 184.056C54.0797 183.712 54.4666 183.447 54.9196 183.26C55.3777 183.073 55.8892 182.979 56.4542 182.979ZM56.4542 189.832C57.2177 189.832 57.7878 189.58 58.1644 189.074C58.5411 188.564 58.7294 187.854 58.7294 186.944C58.7294 186.029 58.5411 185.317 58.1644 184.806C57.7878 184.296 57.2177 184.041 56.4542 184.041C56.0673 184.041 55.7314 184.106 55.4464 184.238C55.1613 184.369 54.9221 184.559 54.7287 184.806C54.5404 185.054 54.3978 185.36 54.3011 185.724C54.2095 186.083 54.1637 186.489 54.1637 186.944C54.1637 187.399 54.2095 187.806 54.3011 188.165C54.3978 188.524 54.5404 188.827 54.7287 189.074C54.9221 189.317 55.1613 189.504 55.4464 189.635C55.7314 189.767 56.0673 189.832 56.4542 189.832Z" fill="white"/>
-<path d="M63.3205 179.614V190.78H61.9615V179.614H63.3205Z" fill="white"/>
-<path d="M67.9833 193.047C67.9375 193.148 67.8789 193.229 67.8077 193.289C67.7415 193.35 67.6372 193.38 67.4946 193.38H66.4868L67.8993 190.333L64.7079 183.101H65.8837C66.0007 183.101 66.0924 183.131 66.1585 183.192C66.2247 183.247 66.2731 183.311 66.3036 183.381L68.3727 188.218C68.4185 188.329 68.4566 188.44 68.4872 188.551C68.5228 188.662 68.5534 188.776 68.5788 188.892C68.6144 188.776 68.6501 188.662 68.6857 188.551C68.7213 188.44 68.762 188.326 68.8078 188.21L70.8158 183.381C70.8464 183.3 70.8973 183.235 70.9685 183.184C71.0449 183.129 71.1263 183.101 71.2128 183.101H72.297L67.9833 193.047Z" fill="white"/>
-<path d="M76.466 182.979C77.031 182.979 77.54 183.073 77.993 183.26C78.4511 183.447 78.838 183.712 79.1535 184.056C79.4742 184.4 79.7185 184.817 79.8865 185.307C80.0595 185.792 80.1461 186.335 80.1461 186.937C80.1461 187.543 80.0595 188.089 79.8865 188.574C79.7185 189.059 79.4742 189.474 79.1535 189.817C78.838 190.161 78.4511 190.426 77.993 190.613C77.54 190.795 77.031 190.886 76.466 190.886C75.9011 190.886 75.3895 190.795 74.9314 190.613C74.4784 190.426 74.0916 190.161 73.7709 189.817C73.4502 189.474 73.2034 189.059 73.0303 188.574C72.8573 188.089 72.7707 187.543 72.7707 186.937C72.7707 186.335 72.8573 185.792 73.0303 185.307C73.2034 184.817 73.4502 184.4 73.7709 184.056C74.0916 183.712 74.4784 183.447 74.9314 183.26C75.3895 183.073 75.9011 182.979 76.466 182.979ZM76.466 189.832C77.2295 189.832 77.7996 189.58 78.1763 189.074C78.5529 188.564 78.7412 187.854 78.7412 186.944C78.7412 186.029 78.5529 185.317 78.1763 184.806C77.7996 184.296 77.2295 184.041 76.466 184.041C76.0792 184.041 75.7433 184.106 75.4582 184.238C75.1732 184.369 74.934 184.559 74.7405 184.806C74.5522 185.054 74.4097 185.36 74.313 185.724C74.2214 186.083 74.1756 186.489 74.1756 186.944C74.1756 187.399 74.2214 187.806 74.313 188.165C74.4097 188.524 74.5522 188.827 74.7405 189.074C74.934 189.317 75.1732 189.504 75.4582 189.635C75.7433 189.767 76.0792 189.832 76.466 189.832Z" fill="white"/>
-<path d="M59.1015 174.342C74.561 168.216 73.3594 159.506 72.5584 146.515C67.5922 146.293 63.1866 144.743 59.1015 142.16C55.0163 144.743 50.6107 146.293 45.6445 146.515C44.8435 159.506 43.6419 168.216 59.1015 174.342Z" fill="#1B1C22"/>
-<path d="M59.1014 139.79L58.0541 140.452C54.2241 142.874 50.1454 144.301 45.5575 144.505L43.7785 144.584L43.6673 146.389C43.6342 146.925 43.5999 147.458 43.5657 147.988C43.1983 153.691 42.8537 159.041 44.4 163.651C46.1826 168.965 50.3182 173.02 58.3811 176.215L59.1014 176.501V174.342C44.248 168.456 44.7748 160.184 45.5494 148.023C45.581 147.527 45.613 147.024 45.6444 146.515C50.6107 146.293 55.0162 144.743 59.1014 142.16V139.79Z" fill="#FFC600"/>
-<path d="M59.1017 139.79L60.1491 140.452C63.979 142.874 68.0577 144.301 72.6456 144.505L74.4246 144.584L74.5359 146.389C74.5689 146.925 74.6032 147.458 74.6374 147.988C75.0048 153.691 75.3494 159.041 73.8032 163.651C72.0205 168.965 67.8849 173.02 59.822 176.215L59.1017 176.501V174.342C73.9551 168.456 73.4283 160.184 72.6538 148.023C72.6221 147.527 72.5901 147.024 72.5587 146.515C67.5925 146.293 63.1869 144.743 59.1017 142.16V139.79Z" fill="#DB8300"/>
-<path d="M54.2159 152.442H54.9187C55.1994 152.442 55.4686 152.554 55.667 152.754C55.8655 152.953 55.977 153.223 55.977 153.505V164.285H53.1576V153.505C53.1576 153.223 53.2691 152.953 53.4676 152.754C53.666 152.554 53.9352 152.442 54.2159 152.442ZM59.099 157.692H59.8018C60.0824 157.692 60.3516 157.804 60.5501 158.003C60.7486 158.202 60.8601 158.472 60.8601 158.754V164.285H58.0407V158.754C58.0407 158.472 58.1522 158.202 58.3506 158.003C58.5491 157.804 58.8183 157.692 59.099 157.692ZM64.2731 155.661H64.9759C65.2566 155.661 65.5257 155.773 65.7242 155.972C65.9227 156.172 66.0342 156.442 66.0342 156.723V164.285H63.2148V156.723C63.2148 156.442 63.3263 156.172 63.5248 155.972C63.7232 155.773 63.9924 155.661 64.2731 155.661Z" fill="#FFC600"/>
-<path d="M121.39 51.5078C105.493 53.5147 90.8171 61.0771 79.9564 72.8584C69.0957 84.6396 62.7497 99.8811 62.04 115.889" stroke="#A0A0A0" stroke-width="2"/>
-<path d="M131.5 25.5H213.5V75C213.5 76.933 211.933 78.5 210 78.5H135C133.067 78.5 131.5 76.933 131.5 75V25.5Z" fill="white" stroke="#A2B4C1"/>
-<path d="M131 21C131 18.7909 132.791 17 135 17H210C212.209 17 214 18.7909 214 21V25H131V21Z" fill="#A2B4C1"/>
-<circle cx="136" cy="22" r="2" fill="#FF5F5F"/>
-<circle cx="142" cy="22" r="2" fill="#FFB850"/>
-<circle cx="148" cy="22" r="2" fill="#3CE800"/>
-<path d="M180.92 68.1802C180.92 68.466 180.682 68.6946 180.394 68.6946H170.678C170.392 68.6946 170.159 68.466 170.159 68.1802V66.704C170.159 66.4196 170.392 66.1885 170.678 66.1885H180.394C180.682 66.1885 180.92 66.4196 180.92 66.704V68.1802Z" fill="#FAB200"/>
-<path d="M194.4 44.0361V52.8037C195.199 52.1557 196.468 51.9396 198.456 51.8126L198.451 47.8611H201.626C203.295 47.7869 207.008 47.2958 207 44.0361H194.4Z" fill="#71B857"/>
-<path d="M204.001 51.7122H204.842C204.842 51.7122 204.84 52.3049 204.84 52.5365C204.84 54.3568 203.216 55.2797 200.021 55.2797H198.451V58.2948C198.451 59.3562 198.195 61.8055 195.76 61.8568H194.399V57.4402C194.785 52.3432 201.618 51.767 204.001 51.7122Z" fill="#71B857"/>
-<path d="M185.513 44.0401L176.674 44.0371V61.8561C179.755 61.4816 180.881 60.0447 181.045 57.9265V47.8586H184.93C184.978 47.8617 185.032 47.8647 185.087 47.8677C185.181 47.8728 185.275 47.878 185.339 47.884C187.183 48.1001 188.357 48.896 188.476 52.5492C188.49 52.6922 188.486 52.853 188.482 52.999C188.48 53.0635 188.478 53.1253 188.478 53.1812C188.384 59.0994 183.799 60.9118 181.26 61.5732L181.247 61.5777C181.216 61.5902 181.195 61.6051 181.195 61.6355V61.7949C181.195 61.8272 181.22 61.8516 181.247 61.8551L181.255 61.8561H181.553C185.254 61.8561 192.693 60.9721 192.693 52.986V52.84C192.65 45.9187 189.614 44.0401 185.513 44.0401Z" fill="#00B1AF"/>
-<path d="M168.96 47.8756L166.871 47.8586C166.738 47.8586 166.608 47.8531 166.475 47.8437C163.9 47.6629 162.429 45.735 161.829 44.7239C161.692 44.5167 161.561 44.3041 161.437 44.0795C161.437 44.0795 161.425 44.0361 161.446 44.0361H167.422C169.421 44.0361 170.254 44.1577 171.139 44.4983C171.348 44.575 171.566 44.6696 171.796 44.7747C173.08 45.3674 173.949 46.4292 174.297 47.7914C174.349 47.9791 174.382 48.1799 174.41 48.3806C174.449 48.645 174.471 48.9204 174.471 49.2053C174.475 51.3235 173.402 52.5313 171.916 53.3769C171.914 53.3804 171.89 53.3944 171.89 53.3944C171.869 53.4018 171.869 53.4018 171.858 53.4113C171.841 53.4192 171.827 53.4279 171.813 53.436C171.804 53.4412 171.796 53.4462 171.788 53.4507C171.783 53.4507 171.761 53.4666 171.761 53.4666C171.588 53.5523 171.418 53.605 171.259 53.6434C171.234 53.6484 171.21 53.6548 171.188 53.6607C171.168 53.6659 171.15 53.6708 171.133 53.6743V49.5022C171.078 48.2162 169.926 47.88 169.264 47.88C169.243 47.88 169.221 47.8803 169.199 47.8805C169.126 47.8812 169.047 47.882 168.96 47.8756Z" fill="#009BC4"/>
-<path d="M164.521 52.7194C163.514 52.7578 163.417 53.6697 163.405 53.8485V56.5389H167.186C167.505 56.9991 167.822 57.4546 168.117 57.8781L168.452 58.3598C168.878 58.9619 169.287 59.5302 169.457 59.7478C169.468 59.7629 169.482 59.7817 169.498 59.8037C169.712 60.1026 170.359 61.0032 172.592 61.5418C173.409 61.7378 174.309 61.7961 174.812 61.8287C174.904 61.8346 174.982 61.8397 175.045 61.8446L175.269 61.8555L175.245 61.8127C175.245 61.8127 174.84 61.2619 174.329 60.3933L174.218 60.2038C173.514 59.0067 171.128 54.9464 170.67 54.1538C170.257 53.4391 169.6 53.1208 168.928 52.9276H168.921C168.44 52.7961 167.911 52.7458 167.515 52.7259C167.497 52.7252 167.48 52.7241 167.463 52.7231C167.433 52.7212 167.404 52.7194 167.373 52.7194H164.521Z" fill="#009BC4"/>
-<path d="M159.958 52.7197C160.917 52.7636 161.048 53.6053 161.064 53.8259V58.1903C161.042 58.2177 161.021 58.2456 160.998 58.2738C160.904 58.3946 160.805 58.5204 160.703 58.6335C160.515 58.8372 160.215 59.1515 160.103 59.2571C158.043 61.1895 155.623 61.8932 153.365 61.8932C151.51 61.8932 148.956 61.3135 146.782 59.2531C143.092 55.7429 143.055 50.122 146.779 46.6451C147.469 46.0056 147.737 45.7666 148.835 45.15C150.35 44.2958 152.068 44 153.455 44C154.674 44 156.008 44.2605 157.006 44.6684C157.239 44.7615 157.502 44.8726 157.832 45.0608C158.715 45.5658 159.875 46.4514 160.454 47.8514V47.8578H149.556V54.3987C149.639 55.5646 149.895 56.4899 150.62 57.1404C151.205 57.6678 152.099 58.0135 153.455 58.1494C153.89 58.1957 154.377 58.2181 154.917 58.2181L157.286 58.2127C157.263 58.2052 157.174 58.1494 156.845 57.746C156.436 57.2385 156.345 56.3699 156.345 55.721H156.343V52.7188L159.958 52.7197Z" fill="#0053A2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M188.731 87C193.047 94.9617 195.732 103.771 196.553 112.912C197.9 127.919 194.144 142.942 185.892 155.548C177.643 168.152 165.384 177.603 151.097 182.375C147.902 183.347 139.667 184.868 121.422 184.992L126.071 180.343C126.462 179.953 126.462 179.319 126.071 178.929C125.681 178.538 125.047 178.538 124.657 178.929L118.293 185.293C117.902 185.683 117.902 186.317 118.293 186.707L124.657 193.071C125.047 193.462 125.681 193.462 126.071 193.071C126.462 192.681 126.462 192.047 126.071 191.657L121.406 186.992C139.762 186.869 148.23 185.34 151.693 184.284L151.705 184.28L151.718 184.276C166.437 179.363 179.068 169.627 187.566 156.644C196.064 143.66 199.932 128.189 198.545 112.734C197.732 103.683 195.145 94.9472 190.996 87H188.731Z" fill="#A0A0A0"/>
-<defs>
-<linearGradient id="paint0_linear_11182_69332" x1="57.1095" y1="130.707" x2="57.1095" y2="203.241" gradientUnits="userSpaceOnUse">
-<stop stop-color="#323339"/>
-<stop offset="1" stop-color="#25262B"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/onboarding/grdf_consent.svg b/src/assets/icons/visu/onboarding/grdf_consent.svg
deleted file mode 100644
index 0fe88893ce78805d76c354b18d502c2be412eb0f..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/onboarding/grdf_consent.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<svg width="211" height="247" viewBox="0 0 211 247" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.55" filter="url(#filter0_f_1394_2484)">
-<rect x="18.5" y="18" width="174" height="211" rx="2" fill="#121212"/>
-</g>
-<rect x="18.5" y="18" width="174" height="204" rx="4" fill="white"/>
-<path d="M66.0066 57.5052C66.0066 57.74 65.8121 57.9278 65.5776 57.9278H57.6662C57.4334 57.9278 57.2439 57.74 57.2439 57.5052V56.2926C57.2439 56.059 57.4334 55.8691 57.6662 55.8691H65.5776C65.8121 55.8691 66.0066 56.059 66.0066 56.2926V57.5052Z" fill="#FAB200"/>
-<path d="M76.9826 37.6719V44.8738C77.6333 44.3415 78.6666 44.164 80.2853 44.0597L80.2815 40.8138H82.8667C84.2261 40.7529 87.2492 40.3495 87.243 37.6719H76.9826Z" fill="#71B857"/>
-<path d="M84.8005 43.9772H85.4854C85.4854 43.9772 85.4838 44.4641 85.4838 44.6543C85.4838 46.1496 84.1615 46.9076 81.5598 46.9076H80.2817V49.3844C80.2817 50.2562 80.0728 52.2682 78.09 52.3103H76.9824V48.6824C77.2962 44.4956 82.8602 44.0222 84.8005 43.9772Z" fill="#71B857"/>
-<path d="M69.7463 37.6753L62.5487 37.6729V52.3099C65.0575 52.0022 65.9748 50.822 66.1077 49.082V40.8119H69.2716C69.3106 40.8145 69.3548 40.8169 69.3992 40.8194C69.4757 40.8236 69.5528 40.8279 69.6047 40.8328C71.1058 41.0103 72.0623 41.6641 72.1593 44.6649C72.1705 44.7824 72.1669 44.9144 72.1637 45.0344C72.1623 45.0874 72.161 45.1381 72.161 45.1841C72.0838 50.0455 68.351 51.5342 66.2831 52.0775L66.2724 52.0812C66.2476 52.0914 66.2299 52.1037 66.2299 52.1287V52.2596C66.2299 52.2862 66.2509 52.3062 66.2724 52.3091L66.2794 52.3099H66.5218C69.5358 52.3099 75.5932 51.5837 75.5932 45.0237V44.9038C75.5577 39.2185 73.0857 37.6753 69.7463 37.6753Z" fill="#00B1AF"/>
-<path d="M56.2678 40.8257L54.5665 40.8118C54.4579 40.8118 54.3523 40.8073 54.2441 40.7995C52.1474 40.651 50.9493 39.0673 50.461 38.2369C50.3491 38.0667 50.2426 37.892 50.1418 37.7075C50.1418 37.7075 50.1315 37.6719 50.1489 37.6719H55.0148C56.643 37.6719 57.3213 37.7717 58.0421 38.0515C58.2122 38.1145 58.3893 38.1923 58.5771 38.2786C59.622 38.7654 60.33 39.6376 60.6132 40.7565C60.6553 40.9108 60.6821 41.0756 60.7052 41.2405C60.737 41.4578 60.7552 41.684 60.7552 41.918C60.7585 43.6579 59.8841 44.65 58.6746 45.3447C58.6729 45.3475 58.6531 45.359 58.6531 45.359C58.6366 45.3651 58.6366 45.3651 58.6271 45.3729C58.6137 45.3794 58.6019 45.3865 58.5907 45.3932C58.5837 45.3975 58.5768 45.4016 58.5701 45.4052C58.5664 45.4052 58.5486 45.4183 58.5486 45.4183C58.4075 45.4887 58.2687 45.5321 58.1395 45.5636C58.1192 45.5677 58.0998 45.5729 58.0815 45.5778C58.0656 45.582 58.0505 45.5861 58.0367 45.5889V42.1618C57.9921 41.1055 57.0542 40.8294 56.5146 40.8294C56.4976 40.8294 56.48 40.8295 56.4618 40.8297C56.4028 40.8303 56.3382 40.831 56.2678 40.8257Z" fill="#009BC4"/>
-<path d="M52.6526 44.8046C51.8327 44.8361 51.7534 45.5852 51.744 45.732V47.942H54.8232C55.0827 48.32 55.341 48.6942 55.5811 49.0421L55.8541 49.4377C56.2008 49.9323 56.5336 50.3991 56.6719 50.5779C56.6813 50.5903 56.6923 50.6057 56.7051 50.6238C56.8799 50.8693 57.4065 51.6091 59.2248 52.0515C59.89 52.2125 60.623 52.2604 61.033 52.2872C61.1072 52.292 61.1713 52.2962 61.222 52.3002L61.4045 52.3092L61.3851 52.2741C61.3851 52.2741 61.0557 51.8216 60.6395 51.1081L60.5489 50.9525C59.976 49.9692 58.0328 46.6339 57.6598 45.9828C57.3237 45.3957 56.7887 45.1343 56.2413 44.9756H56.2359C55.8437 44.8676 55.4132 44.8263 55.0907 44.8099C55.0765 44.8093 55.0625 44.8084 55.0486 44.8076C55.0243 44.8061 55.0001 44.8046 54.9751 44.8046H52.6526Z" fill="#009BC4"/>
-<path d="M48.9376 44.8052C49.7182 44.8412 49.8252 45.5326 49.838 45.7139V49.2989C49.8203 49.3214 49.8025 49.3443 49.7845 49.3675C49.7073 49.4667 49.627 49.5701 49.5436 49.663C49.3909 49.8303 49.1469 50.0884 49.0552 50.1752C47.3779 51.7625 45.4071 52.3406 43.5688 52.3406C42.0578 52.3406 39.9788 51.8644 38.2078 50.1719C35.2033 47.2885 35.1731 42.6713 38.2062 39.8153C38.768 39.2901 38.9856 39.0937 39.8798 38.5872C41.1137 37.8856 42.5124 37.6426 43.6423 37.6426C44.6343 37.6426 45.7204 37.8565 46.5337 38.1916C46.7232 38.2681 46.937 38.3593 47.2058 38.514C47.9253 38.9288 48.8695 39.6562 49.3413 40.8062V40.8115H40.4672V46.1843C40.5345 47.142 40.7434 47.9022 41.3333 48.4365C41.8097 48.8697 42.5375 49.1536 43.6423 49.2653C43.996 49.3034 44.3924 49.3218 44.8324 49.3218L46.7612 49.3173C46.743 49.3111 46.6699 49.2653 46.4024 48.9339C46.0697 48.5171 45.995 47.8036 45.995 47.2705H45.9933V44.8044L48.9376 44.8052Z" fill="#0053A2"/>
-<path d="M32.5 72L41.5476 68L40.5423 72L49.0873 68L47.5794 72L57.6323 68L56.1243 72L67.6852 68L65.172 72L75.7275 68L74.2196 72L85.2778 68L82.7645 72L92.8175 68L91.8122 72L101.865 68L99.8545 72L110.41 68L108.399 72L118.955 68L116.442 72" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M116.5 72L125.548 68L124.542 72L133.087 68L131.579 72L141.632 68L140.124 72L151.685 68L149.172 72L159.728 68L158.22 72L169.278 68" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M57.5 113L66.5476 109L65.5423 113L74.0873 109L72.5794 113L82.6323 109L81.1243 113L92.6852 109L90.172 113L100.728 109" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M57.5 150L66.5476 146L65.5423 150L74.0873 146L72.5794 150L82.6323 146L81.1243 150L92.6852 146L90.172 150L100.728 146L99.2196 150L110.278 146L107.765 150L117.817 146L116.812 150L126.865 146" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="39.5" cy="88" r="6" fill="#0053A2"/>
-<circle cx="39.5" cy="88" r="4.5" fill="#0053A2" stroke="white"/>
-<circle cx="84.5" cy="88" r="5.5" stroke="#0053A2"/>
-<path d="M55.632 88.108C55.632 88.532 55.5613 88.9253 55.42 89.288C55.2787 89.648 55.08 89.96 54.824 90.224C54.568 90.488 54.26 90.6947 53.9 90.844C53.54 90.9907 53.1413 91.064 52.704 91.064C52.2667 91.064 51.8667 90.9907 51.504 90.844C51.144 90.6947 50.8347 90.488 50.576 90.224C50.32 89.96 50.1213 89.648 49.98 89.288C49.8387 88.9253 49.768 88.532 49.768 88.108C49.768 87.684 49.8387 87.292 49.98 86.932C50.1213 86.5693 50.32 86.256 50.576 85.992C50.8347 85.728 51.144 85.5227 51.504 85.376C51.8667 85.2267 52.2667 85.152 52.704 85.152C53.1413 85.152 53.54 85.2267 53.9 85.376C54.26 85.5253 54.568 85.732 54.824 85.996C55.08 86.2573 55.2787 86.5693 55.42 86.932C55.5613 87.292 55.632 87.684 55.632 88.108ZM54.528 88.108C54.528 87.7907 54.4853 87.5067 54.4 87.256C54.3173 87.0027 54.1973 86.788 54.04 86.612C53.8827 86.436 53.6907 86.3013 53.464 86.208C53.24 86.1147 52.9867 86.068 52.704 86.068C52.4213 86.068 52.1667 86.1147 51.94 86.208C51.7133 86.3013 51.52 86.436 51.36 86.612C51.2027 86.788 51.0813 87.0027 50.996 87.256C50.9107 87.5067 50.868 87.7907 50.868 88.108C50.868 88.4253 50.9107 88.7107 50.996 88.964C51.0813 89.2147 51.2027 89.428 51.36 89.604C51.52 89.7773 51.7133 89.9107 51.94 90.004C52.1667 90.0973 52.4213 90.144 52.704 90.144C52.9867 90.144 53.24 90.0973 53.464 90.004C53.6907 89.9107 53.8827 89.7773 54.04 89.604C54.1973 89.428 54.3173 89.2147 54.4 88.964C54.4853 88.7107 54.528 88.4253 54.528 88.108ZM57.3304 86.896V89.504C57.3304 89.7547 57.3878 89.9493 57.5024 90.088C57.6198 90.224 57.7944 90.292 58.0264 90.292C58.1971 90.292 58.3571 90.2547 58.5064 90.18C58.6558 90.1027 58.7971 89.9973 58.9304 89.864V86.896H59.9184V91H59.3144C59.1864 91 59.1024 90.94 59.0624 90.82L58.9944 90.492C58.9091 90.5773 58.8211 90.656 58.7304 90.728C58.6398 90.7973 58.5424 90.8573 58.4384 90.908C58.3371 90.956 58.2264 90.9933 58.1064 91.02C57.9891 91.0493 57.8624 91.064 57.7264 91.064C57.5024 91.064 57.3038 91.0267 57.1304 90.952C56.9598 90.8747 56.8158 90.7667 56.6984 90.628C56.5811 90.4893 56.4918 90.3253 56.4304 90.136C56.3718 89.944 56.3424 89.7333 56.3424 89.504V86.896H57.3304ZM62.0253 86.896V91H61.0373V86.896H62.0253ZM62.1733 85.7C62.1733 85.7853 62.156 85.8653 62.1213 85.94C62.0866 86.0147 62.04 86.08 61.9813 86.136C61.9253 86.192 61.8586 86.2373 61.7813 86.272C61.704 86.304 61.6213 86.32 61.5333 86.32C61.448 86.32 61.3666 86.304 61.2893 86.272C61.2146 86.2373 61.1493 86.192 61.0933 86.136C61.0373 86.08 60.992 86.0147 60.9573 85.94C60.9253 85.8653 60.9093 85.7853 60.9093 85.7C60.9093 85.612 60.9253 85.5293 60.9573 85.452C60.992 85.3747 61.0373 85.308 61.0933 85.252C61.1493 85.196 61.2146 85.152 61.2893 85.12C61.3666 85.0853 61.448 85.068 61.5333 85.068C61.6213 85.068 61.704 85.0853 61.7813 85.12C61.8586 85.152 61.9253 85.196 61.9813 85.252C62.04 85.308 62.0866 85.3747 62.1213 85.452C62.156 85.5293 62.1733 85.612 62.1733 85.7Z" fill="#0053A2"/>
-<path d="M94.648 85.216C94.696 85.216 94.736 85.2187 94.768 85.224C94.8 85.2267 94.828 85.2347 94.852 85.248C94.8787 85.2587 94.904 85.276 94.928 85.3C94.952 85.3213 94.9787 85.3507 95.008 85.388L98.044 89.256C98.0333 89.1627 98.0253 89.072 98.02 88.984C98.0173 88.8933 98.016 88.8093 98.016 88.732V85.216H98.964V91H98.408C98.3227 91 98.252 90.9867 98.196 90.96C98.14 90.9333 98.0853 90.8853 98.032 90.816L95.008 86.964C95.016 87.0493 95.0213 87.1347 95.024 87.22C95.0293 87.3027 95.032 87.3787 95.032 87.448V91H94.084V85.216H94.648ZM101.827 86.832C102.134 86.832 102.411 86.8813 102.659 86.98C102.91 87.0787 103.123 87.2187 103.299 87.4C103.475 87.5813 103.611 87.8027 103.707 88.064C103.803 88.3253 103.851 88.6173 103.851 88.94C103.851 89.2653 103.803 89.5587 103.707 89.82C103.611 90.0813 103.475 90.304 103.299 90.488C103.123 90.672 102.91 90.8133 102.659 90.912C102.411 91.0107 102.134 91.06 101.827 91.06C101.52 91.06 101.242 91.0107 100.991 90.912C100.74 90.8133 100.526 90.672 100.347 90.488C100.171 90.304 100.034 90.0813 99.9349 89.82C99.8389 89.5587 99.7909 89.2653 99.7909 88.94C99.7909 88.6173 99.8389 88.3253 99.9349 88.064C100.034 87.8027 100.171 87.5813 100.347 87.4C100.526 87.2187 100.74 87.0787 100.991 86.98C101.242 86.8813 101.52 86.832 101.827 86.832ZM101.827 90.3C102.168 90.3 102.42 90.1853 102.583 89.956C102.748 89.7267 102.831 89.3907 102.831 88.948C102.831 88.5053 102.748 88.168 102.583 87.936C102.42 87.704 102.168 87.588 101.827 87.588C101.48 87.588 101.224 87.7053 101.059 87.94C100.894 88.172 100.811 88.508 100.811 88.948C100.811 89.388 100.894 89.724 101.059 89.956C101.224 90.1853 101.48 90.3 101.827 90.3ZM104.622 91V86.896H105.226C105.354 86.896 105.438 86.956 105.478 87.076L105.546 87.4C105.628 87.3147 105.715 87.2373 105.806 87.168C105.899 87.0987 105.996 87.0387 106.098 86.988C106.202 86.9373 106.312 86.8987 106.43 86.872C106.547 86.8453 106.675 86.832 106.814 86.832C107.038 86.832 107.236 86.8707 107.41 86.948C107.583 87.0227 107.727 87.1293 107.842 87.268C107.959 87.404 108.047 87.568 108.106 87.76C108.167 87.9493 108.198 88.1587 108.198 88.388V91H107.21V88.388C107.21 88.1373 107.151 87.944 107.034 87.808C106.919 87.6693 106.746 87.6 106.514 87.6C106.343 87.6 106.183 87.6387 106.034 87.716C105.884 87.7933 105.743 87.8987 105.61 88.032V91H104.622Z" fill="#7B7B7B"/>
-<circle cx="63.5" cy="125" r="6" fill="#0053A2"/>
-<circle cx="63.5" cy="125" r="4.5" fill="#0053A2" stroke="white"/>
-<circle cx="108.5" cy="125" r="5.5" stroke="#0053A2"/>
-<path d="M79.632 125.108C79.632 125.532 79.5613 125.925 79.42 126.288C79.2787 126.648 79.08 126.96 78.824 127.224C78.568 127.488 78.26 127.695 77.9 127.844C77.54 127.991 77.1413 128.064 76.704 128.064C76.2667 128.064 75.8667 127.991 75.504 127.844C75.144 127.695 74.8347 127.488 74.576 127.224C74.32 126.96 74.1213 126.648 73.98 126.288C73.8387 125.925 73.768 125.532 73.768 125.108C73.768 124.684 73.8387 124.292 73.98 123.932C74.1213 123.569 74.32 123.256 74.576 122.992C74.8347 122.728 75.144 122.523 75.504 122.376C75.8667 122.227 76.2667 122.152 76.704 122.152C77.1413 122.152 77.54 122.227 77.9 122.376C78.26 122.525 78.568 122.732 78.824 122.996C79.08 123.257 79.2787 123.569 79.42 123.932C79.5613 124.292 79.632 124.684 79.632 125.108ZM78.528 125.108C78.528 124.791 78.4853 124.507 78.4 124.256C78.3173 124.003 78.1973 123.788 78.04 123.612C77.8827 123.436 77.6907 123.301 77.464 123.208C77.24 123.115 76.9867 123.068 76.704 123.068C76.4213 123.068 76.1667 123.115 75.94 123.208C75.7133 123.301 75.52 123.436 75.36 123.612C75.2027 123.788 75.0813 124.003 74.996 124.256C74.9107 124.507 74.868 124.791 74.868 125.108C74.868 125.425 74.9107 125.711 74.996 125.964C75.0813 126.215 75.2027 126.428 75.36 126.604C75.52 126.777 75.7133 126.911 75.94 127.004C76.1667 127.097 76.4213 127.144 76.704 127.144C76.9867 127.144 77.24 127.097 77.464 127.004C77.6907 126.911 77.8827 126.777 78.04 126.604C78.1973 126.428 78.3173 126.215 78.4 125.964C78.4853 125.711 78.528 125.425 78.528 125.108ZM81.3304 123.896V126.504C81.3304 126.755 81.3878 126.949 81.5024 127.088C81.6198 127.224 81.7944 127.292 82.0264 127.292C82.1971 127.292 82.3571 127.255 82.5064 127.18C82.6558 127.103 82.7971 126.997 82.9304 126.864V123.896H83.9184V128H83.3144C83.1864 128 83.1024 127.94 83.0624 127.82L82.9944 127.492C82.9091 127.577 82.8211 127.656 82.7304 127.728C82.6398 127.797 82.5424 127.857 82.4384 127.908C82.3371 127.956 82.2264 127.993 82.1064 128.02C81.9891 128.049 81.8624 128.064 81.7264 128.064C81.5024 128.064 81.3038 128.027 81.1304 127.952C80.9598 127.875 80.8158 127.767 80.6984 127.628C80.5811 127.489 80.4918 127.325 80.4304 127.136C80.3718 126.944 80.3424 126.733 80.3424 126.504V123.896H81.3304ZM86.0253 123.896V128H85.0373V123.896H86.0253ZM86.1733 122.7C86.1733 122.785 86.156 122.865 86.1213 122.94C86.0866 123.015 86.04 123.08 85.9813 123.136C85.9253 123.192 85.8586 123.237 85.7813 123.272C85.704 123.304 85.6213 123.32 85.5333 123.32C85.448 123.32 85.3666 123.304 85.2893 123.272C85.2146 123.237 85.1493 123.192 85.0933 123.136C85.0373 123.08 84.992 123.015 84.9573 122.94C84.9253 122.865 84.9093 122.785 84.9093 122.7C84.9093 122.612 84.9253 122.529 84.9573 122.452C84.992 122.375 85.0373 122.308 85.0933 122.252C85.1493 122.196 85.2146 122.152 85.2893 122.12C85.3666 122.085 85.448 122.068 85.5333 122.068C85.6213 122.068 85.704 122.085 85.7813 122.12C85.8586 122.152 85.9253 122.196 85.9813 122.252C86.04 122.308 86.0866 122.375 86.1213 122.452C86.156 122.529 86.1733 122.612 86.1733 122.7Z" fill="#0053A2"/>
-<path d="M118.648 122.216C118.696 122.216 118.736 122.219 118.768 122.224C118.8 122.227 118.828 122.235 118.852 122.248C118.879 122.259 118.904 122.276 118.928 122.3C118.952 122.321 118.979 122.351 119.008 122.388L122.044 126.256C122.033 126.163 122.025 126.072 122.02 125.984C122.017 125.893 122.016 125.809 122.016 125.732V122.216H122.964V128H122.408C122.323 128 122.252 127.987 122.196 127.96C122.14 127.933 122.085 127.885 122.032 127.816L119.008 123.964C119.016 124.049 119.021 124.135 119.024 124.22C119.029 124.303 119.032 124.379 119.032 124.448V128H118.084V122.216H118.648ZM125.827 123.832C126.134 123.832 126.411 123.881 126.659 123.98C126.91 124.079 127.123 124.219 127.299 124.4C127.475 124.581 127.611 124.803 127.707 125.064C127.803 125.325 127.851 125.617 127.851 125.94C127.851 126.265 127.803 126.559 127.707 126.82C127.611 127.081 127.475 127.304 127.299 127.488C127.123 127.672 126.91 127.813 126.659 127.912C126.411 128.011 126.134 128.06 125.827 128.06C125.52 128.06 125.242 128.011 124.991 127.912C124.74 127.813 124.526 127.672 124.347 127.488C124.171 127.304 124.034 127.081 123.935 126.82C123.839 126.559 123.791 126.265 123.791 125.94C123.791 125.617 123.839 125.325 123.935 125.064C124.034 124.803 124.171 124.581 124.347 124.4C124.526 124.219 124.74 124.079 124.991 123.98C125.242 123.881 125.52 123.832 125.827 123.832ZM125.827 127.3C126.168 127.3 126.42 127.185 126.583 126.956C126.748 126.727 126.831 126.391 126.831 125.948C126.831 125.505 126.748 125.168 126.583 124.936C126.42 124.704 126.168 124.588 125.827 124.588C125.48 124.588 125.224 124.705 125.059 124.94C124.894 125.172 124.811 125.508 124.811 125.948C124.811 126.388 124.894 126.724 125.059 126.956C125.224 127.185 125.48 127.3 125.827 127.3ZM128.622 128V123.896H129.226C129.354 123.896 129.438 123.956 129.478 124.076L129.546 124.4C129.628 124.315 129.715 124.237 129.806 124.168C129.899 124.099 129.996 124.039 130.098 123.988C130.202 123.937 130.312 123.899 130.43 123.872C130.547 123.845 130.675 123.832 130.814 123.832C131.038 123.832 131.236 123.871 131.41 123.948C131.583 124.023 131.727 124.129 131.842 124.268C131.959 124.404 132.047 124.568 132.106 124.76C132.167 124.949 132.198 125.159 132.198 125.388V128H131.21V125.388C131.21 125.137 131.151 124.944 131.034 124.808C130.919 124.669 130.746 124.6 130.514 124.6C130.343 124.6 130.183 124.639 130.034 124.716C129.884 124.793 129.743 124.899 129.61 125.032V128H128.622Z" fill="#7B7B7B"/>
-<circle cx="63.5" cy="163" r="6" fill="#0053A2"/>
-<circle cx="63.5" cy="163" r="4.5" fill="#0053A2" stroke="white"/>
-<circle cx="108.5" cy="163" r="5.5" stroke="#0053A2"/>
-<path d="M79.632 163.108C79.632 163.532 79.5613 163.925 79.42 164.288C79.2787 164.648 79.08 164.96 78.824 165.224C78.568 165.488 78.26 165.695 77.9 165.844C77.54 165.991 77.1413 166.064 76.704 166.064C76.2667 166.064 75.8667 165.991 75.504 165.844C75.144 165.695 74.8347 165.488 74.576 165.224C74.32 164.96 74.1213 164.648 73.98 164.288C73.8387 163.925 73.768 163.532 73.768 163.108C73.768 162.684 73.8387 162.292 73.98 161.932C74.1213 161.569 74.32 161.256 74.576 160.992C74.8347 160.728 75.144 160.523 75.504 160.376C75.8667 160.227 76.2667 160.152 76.704 160.152C77.1413 160.152 77.54 160.227 77.9 160.376C78.26 160.525 78.568 160.732 78.824 160.996C79.08 161.257 79.2787 161.569 79.42 161.932C79.5613 162.292 79.632 162.684 79.632 163.108ZM78.528 163.108C78.528 162.791 78.4853 162.507 78.4 162.256C78.3173 162.003 78.1973 161.788 78.04 161.612C77.8827 161.436 77.6907 161.301 77.464 161.208C77.24 161.115 76.9867 161.068 76.704 161.068C76.4213 161.068 76.1667 161.115 75.94 161.208C75.7133 161.301 75.52 161.436 75.36 161.612C75.2027 161.788 75.0813 162.003 74.996 162.256C74.9107 162.507 74.868 162.791 74.868 163.108C74.868 163.425 74.9107 163.711 74.996 163.964C75.0813 164.215 75.2027 164.428 75.36 164.604C75.52 164.777 75.7133 164.911 75.94 165.004C76.1667 165.097 76.4213 165.144 76.704 165.144C76.9867 165.144 77.24 165.097 77.464 165.004C77.6907 164.911 77.8827 164.777 78.04 164.604C78.1973 164.428 78.3173 164.215 78.4 163.964C78.4853 163.711 78.528 163.425 78.528 163.108ZM81.3304 161.896V164.504C81.3304 164.755 81.3878 164.949 81.5024 165.088C81.6198 165.224 81.7944 165.292 82.0264 165.292C82.1971 165.292 82.3571 165.255 82.5064 165.18C82.6558 165.103 82.7971 164.997 82.9304 164.864V161.896H83.9184V166H83.3144C83.1864 166 83.1024 165.94 83.0624 165.82L82.9944 165.492C82.9091 165.577 82.8211 165.656 82.7304 165.728C82.6398 165.797 82.5424 165.857 82.4384 165.908C82.3371 165.956 82.2264 165.993 82.1064 166.02C81.9891 166.049 81.8624 166.064 81.7264 166.064C81.5024 166.064 81.3038 166.027 81.1304 165.952C80.9598 165.875 80.8158 165.767 80.6984 165.628C80.5811 165.489 80.4918 165.325 80.4304 165.136C80.3718 164.944 80.3424 164.733 80.3424 164.504V161.896H81.3304ZM86.0253 161.896V166H85.0373V161.896H86.0253ZM86.1733 160.7C86.1733 160.785 86.156 160.865 86.1213 160.94C86.0866 161.015 86.04 161.08 85.9813 161.136C85.9253 161.192 85.8586 161.237 85.7813 161.272C85.704 161.304 85.6213 161.32 85.5333 161.32C85.448 161.32 85.3666 161.304 85.2893 161.272C85.2146 161.237 85.1493 161.192 85.0933 161.136C85.0373 161.08 84.992 161.015 84.9573 160.94C84.9253 160.865 84.9093 160.785 84.9093 160.7C84.9093 160.612 84.9253 160.529 84.9573 160.452C84.992 160.375 85.0373 160.308 85.0933 160.252C85.1493 160.196 85.2146 160.152 85.2893 160.12C85.3666 160.085 85.448 160.068 85.5333 160.068C85.6213 160.068 85.704 160.085 85.7813 160.12C85.8586 160.152 85.9253 160.196 85.9813 160.252C86.04 160.308 86.0866 160.375 86.1213 160.452C86.156 160.529 86.1733 160.612 86.1733 160.7Z" fill="#0053A2"/>
-<path d="M118.648 160.216C118.696 160.216 118.736 160.219 118.768 160.224C118.8 160.227 118.828 160.235 118.852 160.248C118.879 160.259 118.904 160.276 118.928 160.3C118.952 160.321 118.979 160.351 119.008 160.388L122.044 164.256C122.033 164.163 122.025 164.072 122.02 163.984C122.017 163.893 122.016 163.809 122.016 163.732V160.216H122.964V166H122.408C122.323 166 122.252 165.987 122.196 165.96C122.14 165.933 122.085 165.885 122.032 165.816L119.008 161.964C119.016 162.049 119.021 162.135 119.024 162.22C119.029 162.303 119.032 162.379 119.032 162.448V166H118.084V160.216H118.648ZM125.827 161.832C126.134 161.832 126.411 161.881 126.659 161.98C126.91 162.079 127.123 162.219 127.299 162.4C127.475 162.581 127.611 162.803 127.707 163.064C127.803 163.325 127.851 163.617 127.851 163.94C127.851 164.265 127.803 164.559 127.707 164.82C127.611 165.081 127.475 165.304 127.299 165.488C127.123 165.672 126.91 165.813 126.659 165.912C126.411 166.011 126.134 166.06 125.827 166.06C125.52 166.06 125.242 166.011 124.991 165.912C124.74 165.813 124.526 165.672 124.347 165.488C124.171 165.304 124.034 165.081 123.935 164.82C123.839 164.559 123.791 164.265 123.791 163.94C123.791 163.617 123.839 163.325 123.935 163.064C124.034 162.803 124.171 162.581 124.347 162.4C124.526 162.219 124.74 162.079 124.991 161.98C125.242 161.881 125.52 161.832 125.827 161.832ZM125.827 165.3C126.168 165.3 126.42 165.185 126.583 164.956C126.748 164.727 126.831 164.391 126.831 163.948C126.831 163.505 126.748 163.168 126.583 162.936C126.42 162.704 126.168 162.588 125.827 162.588C125.48 162.588 125.224 162.705 125.059 162.94C124.894 163.172 124.811 163.508 124.811 163.948C124.811 164.388 124.894 164.724 125.059 164.956C125.224 165.185 125.48 165.3 125.827 165.3ZM128.622 166V161.896H129.226C129.354 161.896 129.438 161.956 129.478 162.076L129.546 162.4C129.628 162.315 129.715 162.237 129.806 162.168C129.899 162.099 129.996 162.039 130.098 161.988C130.202 161.937 130.312 161.899 130.43 161.872C130.547 161.845 130.675 161.832 130.814 161.832C131.038 161.832 131.236 161.871 131.41 161.948C131.583 162.023 131.727 162.129 131.842 162.268C131.959 162.404 132.047 162.568 132.106 162.76C132.167 162.949 132.198 163.159 132.198 163.388V166H131.21V163.388C131.21 163.137 131.151 162.944 131.034 162.808C130.919 162.669 130.746 162.6 130.514 162.6C130.343 162.6 130.183 162.639 130.034 162.716C129.884 162.793 129.743 162.899 129.61 163.032V166H128.622Z" fill="#7B7B7B"/>
-<rect x="74" y="186.5" width="109" height="23" rx="4.5" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.25 194.842V203.053C82.25 203.401 82.5298 203.684 82.875 203.684H90.375C90.7202 203.684 91 203.401 91 203.053V194.842C91 194.493 90.7202 194.21 90.375 194.21H82.875C82.5298 194.21 82.25 194.493 82.25 194.842ZM82.875 196.105V203.053H90.375V196.105H82.875Z" fill="#0053A1"/>
-<path d="M84.125 193.579C84.125 193.23 84.4048 192.947 84.75 192.947C85.0952 192.947 85.375 193.23 85.375 193.579V194.21C85.375 194.559 85.0952 194.842 84.75 194.842C84.4048 194.842 84.125 194.559 84.125 194.21V193.579Z" fill="#0053A1"/>
-<path d="M87.875 193.579C87.875 193.23 88.1548 192.947 88.5 192.947C88.8452 192.947 89.125 193.23 89.125 193.579V194.21C89.125 194.559 88.8452 194.842 88.5 194.842C88.1548 194.842 87.875 194.559 87.875 194.21V193.579Z" fill="#0053A1"/>
-<path d="M101.026 198.369L99.2525 195.728H99.9762C100.029 195.728 100.067 195.737 100.092 195.754C100.117 195.772 100.14 195.797 100.16 195.83L101.562 198.005C101.58 197.952 101.606 197.894 101.641 197.831L102.965 195.845C102.987 195.81 103.011 195.782 103.036 195.762C103.064 195.739 103.096 195.728 103.134 195.728H103.827L102.046 198.335L103.887 201.158H103.167C103.112 201.158 103.069 201.144 103.036 201.116C103.006 201.086 102.981 201.053 102.961 201.018L101.521 198.74C101.504 198.793 101.481 198.844 101.454 198.892L100.051 201.018C100.029 201.053 100.002 201.086 99.9725 201.116C99.945 201.144 99.905 201.158 99.8525 201.158H99.1775L101.026 198.369Z" fill="#1B1C22"/>
-<path d="M105.846 198.369L104.072 195.728H104.796C104.848 195.728 104.887 195.737 104.912 195.754C104.937 195.772 104.959 195.797 104.979 195.83L106.382 198.005C106.399 197.952 106.426 197.894 106.461 197.831L107.784 195.845C107.807 195.81 107.831 195.782 107.856 195.762C107.883 195.739 107.916 195.728 107.953 195.728H108.647L106.866 198.335L108.707 201.158H107.987C107.932 201.158 107.888 201.144 107.856 201.116C107.826 201.086 107.801 201.053 107.781 201.018L106.341 198.74C106.323 198.793 106.301 198.844 106.273 198.892L104.871 201.018C104.848 201.053 104.822 201.086 104.792 201.116C104.764 201.144 104.724 201.158 104.672 201.158H103.997L105.846 198.369Z" fill="#1B1C22"/>
-<path d="M109.367 201.238C109.332 201.326 109.28 201.392 109.21 201.435C109.142 201.478 109.072 201.499 109 201.499H108.719L110.972 195.826C111.005 195.745 111.051 195.684 111.111 195.641C111.171 195.598 111.242 195.576 111.325 195.576H111.606L109.367 201.238Z" fill="#1B1C22"/>
-<path d="M113.463 198.369L111.689 195.728H112.413C112.465 195.728 112.504 195.737 112.529 195.754C112.554 195.772 112.577 195.797 112.597 195.83L113.999 198.005C114.017 197.952 114.043 197.894 114.078 197.831L115.402 195.845C115.424 195.81 115.448 195.782 115.473 195.762C115.5 195.739 115.533 195.728 115.57 195.728H116.264L114.483 198.335L116.324 201.158H115.604C115.549 201.158 115.505 201.144 115.473 201.116C115.443 201.086 115.418 201.053 115.398 201.018L113.958 198.74C113.94 198.793 113.918 198.844 113.89 198.892L112.488 201.018C112.465 201.053 112.439 201.086 112.409 201.116C112.382 201.144 112.342 201.158 112.289 201.158H111.614L113.463 198.369Z" fill="#1B1C22"/>
-<path d="M118.282 198.369L116.508 195.728H117.232C117.285 195.728 117.323 195.737 117.348 195.754C117.373 195.772 117.396 195.797 117.416 195.83L118.818 198.005C118.836 197.952 118.862 197.894 118.897 197.831L120.221 195.845C120.243 195.81 120.267 195.782 120.292 195.762C120.32 195.739 120.352 195.728 120.39 195.728H121.083L119.302 198.335L121.143 201.158H120.423C120.368 201.158 120.325 201.144 120.292 201.116C120.262 201.086 120.237 201.053 120.217 201.018L118.777 198.74C118.76 198.793 118.737 198.844 118.71 198.892L117.307 201.018C117.285 201.053 117.258 201.086 117.228 201.116C117.201 201.144 117.161 201.158 117.108 201.158H116.433L118.282 198.369Z" fill="#1B1C22"/>
-<path d="M121.804 201.238C121.769 201.326 121.716 201.392 121.646 201.435C121.579 201.478 121.509 201.499 121.436 201.499H121.155L123.409 195.826C123.441 195.745 123.488 195.684 123.548 195.641C123.608 195.598 123.679 195.576 123.761 195.576H124.043L121.804 201.238Z" fill="#1B1C22"/>
-<path d="M125.899 198.369L124.126 195.728H124.849C124.902 195.728 124.941 195.737 124.966 195.754C124.991 195.772 125.013 195.797 125.033 195.83L126.436 198.005C126.453 197.952 126.479 197.894 126.514 197.831L127.838 195.845C127.861 195.81 127.884 195.782 127.909 195.762C127.937 195.739 127.969 195.728 128.007 195.728H128.701L126.919 198.335L128.761 201.158H128.041C127.986 201.158 127.942 201.144 127.909 201.116C127.879 201.086 127.854 201.053 127.834 201.018L126.394 198.74C126.377 198.793 126.354 198.844 126.327 198.892L124.924 201.018C124.902 201.053 124.876 201.086 124.846 201.116C124.818 201.144 124.778 201.158 124.726 201.158H124.051L125.899 198.369Z" fill="#1B1C22"/>
-<path d="M130.719 198.369L128.945 195.728H129.669C129.721 195.728 129.76 195.737 129.785 195.754C129.81 195.772 129.832 195.797 129.852 195.83L131.255 198.005C131.272 197.952 131.299 197.894 131.334 197.831L132.657 195.845C132.68 195.81 132.704 195.782 132.729 195.762C132.756 195.739 132.789 195.728 132.826 195.728H133.52L131.739 198.335L133.58 201.158H132.86C132.805 201.158 132.761 201.144 132.729 201.116C132.699 201.086 132.674 201.053 132.654 201.018L131.214 198.74C131.196 198.793 131.174 198.844 131.146 198.892L129.744 201.018C129.721 201.053 129.695 201.086 129.665 201.116C129.637 201.144 129.597 201.158 129.545 201.158H128.87L130.719 198.369Z" fill="#1B1C22"/>
-<path d="M135.538 198.369L133.764 195.728H134.488C134.54 195.728 134.579 195.737 134.604 195.754C134.629 195.772 134.652 195.797 134.672 195.83L136.074 198.005C136.092 197.952 136.118 197.894 136.153 197.831L137.477 195.845C137.499 195.81 137.523 195.782 137.548 195.762C137.575 195.739 137.608 195.728 137.645 195.728H138.339L136.558 198.335L138.399 201.158H137.679C137.624 201.158 137.58 201.144 137.548 201.116C137.518 201.086 137.493 201.053 137.473 201.018L136.033 198.74C136.015 198.793 135.993 198.844 135.965 198.892L134.563 201.018C134.54 201.053 134.514 201.086 134.484 201.116C134.457 201.144 134.417 201.158 134.364 201.158H133.689L135.538 198.369Z" fill="#1B1C22"/>
-<path d="M140.357 198.369L138.584 195.728H139.307C139.36 195.728 139.399 195.737 139.424 195.754C139.449 195.772 139.471 195.797 139.491 195.83L140.894 198.005C140.911 197.952 140.937 197.894 140.972 197.831L142.296 195.845C142.319 195.81 142.342 195.782 142.367 195.762C142.395 195.739 142.427 195.728 142.465 195.728H143.159L141.377 198.335L143.219 201.158H142.499C142.444 201.158 142.4 201.144 142.367 201.116C142.337 201.086 142.312 201.053 142.292 201.018L140.852 198.74C140.835 198.793 140.812 198.844 140.785 198.892L139.382 201.018C139.36 201.053 139.334 201.086 139.304 201.116C139.276 201.144 139.236 201.158 139.184 201.158H138.509L140.357 198.369Z" fill="#1B1C22"/>
-<rect x="74" y="186.5" width="109" height="23" rx="4.5" stroke="#909090"/>
-<path d="M34.5 196L40.3605 192L39.7093 196L45.2442 192L44.2674 196L50.7791 192L49.8023 196L57.2907 192L55.6628 196L62.5 192" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M34.5 207L40.3605 203L39.7093 207L45.2442 203L44.2674 207L50.7791 203L49.8023 207L57.2907 203L55.6628 207L62.5 203" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<filter id="filter0_f_1394_2484" x="0.5" y="0" width="210" height="247" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="9" result="effect1_foregroundBlur_1394_2484"/>
-</filter>
-</defs>
-</svg>
diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx
index 04513039f6f7c9d959eefa6649142fb884619e5b..075556c3c4a9ac4d483c56dfdb193563c02355fb 100644
--- a/src/components/Connection/Connection.tsx
+++ b/src/components/Connection/Connection.tsx
@@ -1,35 +1,16 @@
import { FluidType } from 'enums'
-import { FluidConnection } from 'models'
-import React, { useCallback } from 'react'
-import { updateFluidConnection } from 'store/global/global.slice'
-import { useAppDispatch, useAppSelector } from 'store/hooks'
+import React from 'react'
import EpglInit from './EPGLConnect/EpglInit'
import GrdfInit from './GRDFConnect/GrdfInit'
import SgeInit from './SGEConnect/SgeInit'
import './connection.scss'
const Connection = ({ fluidType }: { fluidType: FluidType }) => {
- const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
- const currentFluidStatus = fluidStatus[fluidType]
- const dispatch = useAppDispatch()
-
- const handleSuccess = useCallback(async () => {
- const updatedConnection: FluidConnection = {
- ...currentFluidStatus.connection,
- shouldLaunchKonnector: true,
- }
- dispatch(
- updateFluidConnection({
- fluidType: fluidType,
- fluidConnection: updatedConnection,
- })
- )
- }, [dispatch, fluidType, currentFluidStatus.connection])
return (
<div className="konnector-form">
{fluidType === FluidType.ELECTRICITY && <SgeInit />}
{fluidType === FluidType.WATER && <EpglInit />}
- {fluidType === FluidType.GAS && <GrdfInit onSuccess={handleSuccess} />}
+ {fluidType === FluidType.GAS && <GrdfInit />}
</div>
)
}
diff --git a/src/components/Connection/EPGLConnect/EpglBill.tsx b/src/components/Connection/EPGLConnect/EpglBill.tsx
index 113c53dc041a033cc9ecb5b12e3de39feeccebee..56ed120f6f123c7e56ab72e7d900266605486fad 100644
--- a/src/components/Connection/EPGLConnect/EpglBill.tsx
+++ b/src/components/Connection/EPGLConnect/EpglBill.tsx
@@ -6,10 +6,13 @@ import { FluidType } from 'enums'
import React from 'react'
import { setShowOfflineData } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { openConnectionModal } from 'store/modal/modal.slice'
import '../connection.scss'
-const EpglBill = () => {
+const EpglBill = ({
+ openModal: setOpenModal,
+}: {
+ openModal: (value: boolean) => void
+}) => {
const { t } = useI18n()
const dispatch = useAppDispatch()
const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
@@ -17,20 +20,20 @@ const EpglBill = () => {
return (
<div className="connection-form">
- <p className="connection-form-title eglgrandlyon text-20-bold">
+ <h2 className="connection-form-title eglgrandlyon text-20-bold">
{t('auth.eglgrandlyon.no_account.title')}
- </p>
+ </h2>
<StyledIcon icon={WaterBillIcon} size={180} />
<p
- className="connection-form-subtitle eglgrandlyon text-16-regular"
+ className="connection-form-subtitle text-16-regular"
dangerouslySetInnerHTML={{ __html: t('auth.eglgrandlyon.bill') }}
/>
<div className="connection-form-button">
<Button
aria-label={t('auth.eglgrandlyon.accessibility.connect')}
- onClick={() => dispatch(openConnectionModal(true))}
+ onClick={() => setOpenModal(true)}
className="btnPrimary"
>
{t('auth.eglgrandlyon.connect')}
diff --git a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
similarity index 79%
rename from src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
rename to src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
index 404ab89396ad58811c9c2f1147789f310bae02a6..55b005d968e4bef248b72f1c4fab45344751a164 100644
--- a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
@@ -2,12 +2,19 @@ import { Button, Dialog, IconButton } from '@material-ui/core'
import CloseIcon from 'assets/icons/ico/close.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
+import { FluidType } from 'enums'
import React, { useEffect, useState } from 'react'
+import { useAppSelector } from 'store/hooks'
import './PartnerConnectModal.scss'
-import { StepContent } from './StepContent.interface'
import EpglCreateAccount from './Steps/EpglCreateAccount'
import EpglDoYouHaveAccount from './Steps/EpglDoYouHaveAccount'
+interface StepContent {
+ content: JSX.Element
+ topButton: JSX.Element
+ bottomButton: JSX.Element
+}
+
enum StepEnum {
DoYouHaveAccount,
CreateAccount,
@@ -15,37 +22,47 @@ enum StepEnum {
interface EpglConnectModalProps {
open: boolean
- handleCloseClick: () => void
setShowForm: (value: boolean) => void
- goToPartnerSite: () => void
setHasCreatedAccount: (value: boolean) => void
+ closeModal: (value: boolean) => void
}
const EpglConnectModal = ({
open,
- handleCloseClick,
setShowForm,
- goToPartnerSite,
setHasCreatedAccount,
+ closeModal: setOpenModal,
}: EpglConnectModalProps) => {
const { t } = useI18n()
+ const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
+ const currentFluidStatus = fluidStatus[FluidType.WATER]
+ const siteLink = currentFluidStatus.connection.konnectorConfig.siteLink
+
const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
+
useEffect(() => {
if (open) {
setCurrentStep(0)
}
}, [open])
+ const handleCloseModal = () => {
+ setOpenModal(false)
+ }
+
+ const goToPartnerSite = () => {
+ window.open(siteLink, '_blank')
+ }
const handleGoToPartnerSite = () => {
goToPartnerSite()
setHasCreatedAccount(true)
setShowForm(true)
- handleCloseClick()
+ handleCloseModal()
}
const handleShowForm = () => {
setShowForm(true)
- handleCloseClick()
+ handleCloseModal()
}
const steps: Record<StepEnum, StepContent> = {
@@ -86,7 +103,7 @@ const EpglConnectModal = ({
return (
<Dialog
open={open}
- onClose={handleCloseClick}
+ onClose={handleCloseModal}
classes={{
root: 'modal-root',
paper: 'modal-paper',
@@ -95,7 +112,7 @@ const EpglConnectModal = ({
<IconButton
aria-label={t('auth.accessibility.button_close')}
className="modal-paper-close-button"
- onClick={handleCloseClick}
+ onClick={handleCloseModal}
>
<Icon icon={CloseIcon} size={16} />
</IconButton>
diff --git a/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss b/src/components/Connection/EPGLConnect/EpglConnectModal/PartnerConnectModal.scss
similarity index 100%
rename from src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
rename to src/components/Connection/EPGLConnect/EpglConnectModal/PartnerConnectModal.scss
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglCreateAccount.tsx
similarity index 100%
rename from src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
rename to src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglCreateAccount.tsx
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglDoYouHaveAccount.tsx
similarity index 100%
rename from src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
rename to src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglDoYouHaveAccount.tsx
diff --git a/src/components/Connection/PartnerConnectModal/Steps/stepDetail.scss b/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/stepDetail.scss
similarity index 100%
rename from src/components/Connection/PartnerConnectModal/Steps/stepDetail.scss
rename to src/components/Connection/EPGLConnect/EpglConnectModal/Steps/stepDetail.scss
diff --git a/src/components/Connection/EPGLConnect/EpglForm.scss b/src/components/Connection/EPGLConnect/EpglForm.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8ec67c230423962c184fc1811b762b54b5f06da5
--- /dev/null
+++ b/src/components/Connection/EPGLConnect/EpglForm.scss
@@ -0,0 +1,22 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/components/input';
+
+form {
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .iconShowPassword {
+ float: right;
+ position: relative;
+ margin-top: -67px;
+ margin-right: 15px;
+ }
+
+ .errorMessage {
+ color: $red-primary;
+ min-height: 1.25rem;
+ }
+}
diff --git a/src/components/Connection/EPGLConnect/EpglForm.tsx b/src/components/Connection/EPGLConnect/EpglForm.tsx
index 7626152639d743c4bfd23c1ba892c365bedd1387..0ae8fc6a35f01ddadba355bd9d378ed27f144112 100644
--- a/src/components/Connection/EPGLConnect/EpglForm.tsx
+++ b/src/components/Connection/EPGLConnect/EpglForm.tsx
@@ -1,22 +1,156 @@
+import { Button, TextField } from '@material-ui/core'
+import * as Sentry from '@sentry/react'
+import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
+import EglLogo from 'assets/icons/visu/egl-logo.svg'
+import classNames from 'classnames'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import '../connection.scss'
-import FormLogin from './FormLogin/FormLogin'
+import { FluidType } from 'enums'
+import { AccountEGLData } from 'models'
+import React, { useEffect, useState } from 'react'
+import { useAppSelector } from 'store/hooks'
+import logApp from 'utils/logger'
+import './EpglForm.scss'
const EpglForm = ({ hasCreatedAccount }: { hasCreatedAccount: boolean }) => {
const { t } = useI18n()
+ const { fluidStatus, lastEpglLogin } = useAppSelector(
+ state => state.ecolyo.global
+ )
+ const currentFluidStatus = fluidStatus[FluidType.WATER]
+ const fluidName = FluidType[currentFluidStatus.fluidType]
+ const account = currentFluidStatus.connection.account
+
+ const [login, setLogin] = useState<string>('')
+ const [password, setPassword] = useState<string>('')
+ const [error, setError] = useState<string>('')
+ const [loading, setLoading] = useState<boolean>(false)
+ const [showPassword, setShowPassword] = useState(false)
+
+ const [connect, update, connectError] = useKonnectorAuth(FluidType.WATER, {
+ eglAuthData: { login, password },
+ })
+
+ const changeLogin = (value: string) => {
+ if ((/\d/.test(value) && value.length <= 7) || value === '') {
+ setError('')
+ setLogin(value)
+ }
+ }
+
+ const changePassword = (value: string) => {
+ setError('')
+ setPassword(value)
+ }
+
+ const handleSubmit = async () => {
+ try {
+ setError('')
+ setLoading(true)
+ if (!login || !password) {
+ setError(t('konnector_form.error_no_login_password'))
+ setLoading(false)
+ return null
+ }
+ if (!account) {
+ await connect()
+ setLoading(false)
+ } else {
+ await update()
+ }
+ } catch (error) {
+ logApp.error(error)
+ Sentry.captureException(error)
+ setLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ if (connectError) setError(connectError)
+ }, [connectError])
+
+ useEffect(() => {
+ if (account?.auth) {
+ const auth = account.auth
+ const authData = auth as AccountEGLData
+ if (authData.login) {
+ setLogin(authData.login)
+ }
+ } else if (lastEpglLogin) {
+ setLogin(lastEpglLogin)
+ setError(t('konnector_form.error_login_failed'))
+ }
+ }, [account, lastEpglLogin, t])
return (
<div className="connection-form">
{hasCreatedAccount && (
- <p className="connection-form-title eglgrandlyon text-20-bold">
+ <h2 className="connection-form-title eglgrandlyon text-20-bold">
{t('auth.eglgrandlyon.with_account.title')}
- </p>
+ </h2>
)}
<div className="connection-form-subtitle text-18-bold">
{t('auth.eglgrandlyon.with_account.subtitle1')}
</div>
- <FormLogin />
+ <form>
+ <TextField
+ variant="outlined"
+ id={'idFieldLogin' + fluidName}
+ type="number"
+ className={classNames('inputText', { error: error !== '' })}
+ label={t(`auth.eglgrandlyon.connect_form.login`)}
+ name="login"
+ onChange={e => changeLogin(e.target.value)}
+ value={login}
+ inputMode="numeric"
+ error={Boolean(error)}
+ />
+
+ <TextField
+ variant="outlined"
+ id={'idFieldPassword' + fluidName}
+ name="password"
+ type={showPassword ? 'text' : 'password'}
+ className={classNames('inputText', { error: error !== '' })}
+ label={t(`auth.eglgrandlyon.connect_form.password`)}
+ onChange={e => changePassword(e.target.value)}
+ value={password}
+ error={Boolean(error)}
+ />
+ <span>
+ <StyledIconButton
+ icon={TrailingIcon}
+ aria-label={t('auth.accessibility.button_reveal_password')}
+ className="iconShowPassword"
+ sized={22}
+ onClick={() => setShowPassword(prev => !prev)}
+ />
+ </span>
+
+ <div className="errorMessage">{error === '' ? null : error}</div>
+ <div className="connection-form-connect-button">
+ <Button
+ aria-label={t('auth.accessibility.button_connect')}
+ disabled={loading}
+ classes={{
+ root: 'btnPrimary',
+ label: 'text-18-bold',
+ }}
+ onClick={handleSubmit}
+ >
+ <div className="connection-form-connect-button-content">
+ <div className="connection-form-connect-button-content-icon">
+ <StyledIcon icon={EglLogo} size={80} />
+ </div>
+ <div className="connection-form-connect-button-text text-18-bold">
+ <div>{t(`auth.eglgrandlyon.connect_form.label`)}</div>
+ </div>
+ </div>
+ </Button>
+ </div>
+ </form>
</div>
)
}
diff --git a/src/components/Connection/EPGLConnect/EpglInit.tsx b/src/components/Connection/EPGLConnect/EpglInit.tsx
index d79dd4a9d07517da49bed11e57cc3d59342c7bf5..216e832f9f8d8f28b28644d9625fbe3a79c74aef 100644
--- a/src/components/Connection/EPGLConnect/EpglInit.tsx
+++ b/src/components/Connection/EPGLConnect/EpglInit.tsx
@@ -1,42 +1,26 @@
-import EpglConnectModal from 'components/Connection/PartnerConnectModal/EpglConnectModal'
-import { FluidType } from 'enums'
-import React, { useCallback, useState } from 'react'
-import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { openConnectionModal } from 'store/modal/modal.slice'
+import React, { useState } from 'react'
import '../connection.scss'
import EpglBill from './EpglBill'
+import EpglConnectModal from './EpglConnectModal/EpglConnectModal'
import EpglForm from './EpglForm'
const EpglInit = () => {
- const dispatch = useAppDispatch()
- const {
- modal: { isConnectionModalOpen },
- global: { fluidStatus },
- } = useAppSelector(state => state.ecolyo)
- const currentFluidStatus = fluidStatus[FluidType.WATER]
- const siteLink: string =
- currentFluidStatus.connection.konnectorConfig.siteLink
-
+ const [openModal, setOpenModal] = useState(false)
const [showForm, setShowForm] = useState(false)
const [hasCreatedAccount, setHasCreatedAccount] = useState(false)
- const goToPartnerSite = useCallback(() => {
- window.open(siteLink, '_blank')
- }, [siteLink])
-
return (
<>
{!showForm ? (
- <EpglBill />
+ <EpglBill openModal={setOpenModal} />
) : (
<EpglForm hasCreatedAccount={hasCreatedAccount} />
)}
<EpglConnectModal
- open={isConnectionModalOpen}
- handleCloseClick={() => dispatch(openConnectionModal(false))}
+ open={openModal}
setShowForm={setShowForm}
- goToPartnerSite={goToPartnerSite}
setHasCreatedAccount={setHasCreatedAccount}
+ closeModal={setOpenModal}
/>
</>
)
diff --git a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
deleted file mode 100644
index 1996f265d60ff056754065138ef37303be91f43b..0000000000000000000000000000000000000000
--- a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { Button, TextField } from '@material-ui/core'
-import * as Sentry from '@sentry/react'
-import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
-import EglLogo from 'assets/icons/visu/egl-logo.svg'
-import classNames from 'classnames'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enums'
-import { Account, AccountAuthData } from 'models'
-import React, { useEffect, useState } from 'react'
-import { useAppSelector } from 'store/hooks'
-import logApp from 'utils/logger'
-import './formLogin.scss'
-
-const FormLogin = () => {
- const { t } = useI18n()
- const { fluidStatus, lastEpglLogin } = useAppSelector(
- state => state.ecolyo.global
- )
- const currentFluidStatus = fluidStatus[FluidType.WATER]
- const konnectorSlug: string =
- currentFluidStatus.connection.konnectorConfig.slug
- const fluidName: string = FluidType[currentFluidStatus.fluidType]
- const account: Account | null = currentFluidStatus.connection.account
-
- const [login, setLogin] = useState<string>('')
- const [password, setPassword] = useState<string>('')
- const [error, setError] = useState<string>('')
- const [loading, setLoading] = useState<boolean>(false)
- const [showPassword, setShowPassword] = useState(false)
-
- const [connect, update, connectError] = useKonnectorAuth(
- currentFluidStatus.fluidType,
- login,
- password
- )
-
- const changeLogin = (value: string) => {
- if ((/\d/.test(value) && value.length <= 7) || value === '') {
- setError('')
- setLogin(value)
- }
- }
-
- const changePassword = (value: string) => {
- setError('')
- setPassword(value)
- }
-
- const handleSubmit = async () => {
- try {
- setError('')
- setLoading(true)
- if (!login || !password) {
- setError(t('konnector_form.error_no_login_password'))
- setLoading(false)
- return null
- }
- if (!account) {
- await connect()
- setLoading(false)
- } else {
- await update()
- }
- } catch (error) {
- logApp.error(error)
- Sentry.captureException(error)
- setLoading(false)
- }
- }
-
- useEffect(() => {
- if (connectError) setError(connectError)
- }, [connectError])
-
- useEffect(() => {
- if (account?.auth) {
- const auth = account.auth
- const authData = auth as AccountAuthData
- if (authData.login) {
- setLogin(authData.login)
- }
- } else if (lastEpglLogin) {
- setLogin(lastEpglLogin)
- setError(t('konnector_form.error_login_failed'))
- }
- }, [account, lastEpglLogin, t])
-
- return (
- <form>
- <div className="form-group">
- <TextField
- variant="outlined"
- id={'idFieldLogin' + fluidName}
- type="tel"
- className={classNames('inputText', { error: error !== '' })}
- label={t(`auth.${konnectorSlug}.connect_form.login`)}
- name="login"
- onChange={e => changeLogin(e.target.value)}
- value={login}
- />
- </div>
- <div className="form-group">
- <TextField
- variant="outlined"
- id={'idFieldPassword' + fluidName}
- name="password"
- type={showPassword ? 'text' : 'password'}
- className={classNames('inputText', { error: error !== '' })}
- label={t(`auth.${konnectorSlug}.connect_form.password`)}
- onChange={e => changePassword(e.target.value)}
- value={password}
- />
- <span>
- <StyledIconButton
- icon={TrailingIcon}
- aria-label={t('auth.accessibility.button_reveal_password')}
- className="form-trailing-icon"
- sized={22}
- onClick={() => setShowPassword(prev => !prev)}
- />
- </span>
- </div>
- <div className="form-message">{error === '' ? null : error}</div>
- <div className="connection-form-connect-button">
- <Button
- aria-label={t('auth.accessibility.button_connect')}
- disabled={loading}
- classes={{
- root: 'btnPrimary',
- label: 'text-18-bold',
- }}
- onClick={handleSubmit}
- >
- <div className="connection-form-connect-button-content">
- <div className="connection-form-connect-button-content-icon">
- <StyledIcon icon={EglLogo} size={80} />
- </div>
- <div className="connection-form-connect-button-text text-18-bold">
- <div>{t(`auth.${konnectorSlug}.connect_form.label`)}</div>
- </div>
- </div>
- </Button>
- </div>
- </form>
- )
-}
-
-export default FormLogin
diff --git a/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss b/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
deleted file mode 100644
index 92be631cd3d13a41bc390b45a8e520e2de1256ab..0000000000000000000000000000000000000000
--- a/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/components/input';
-
-form {
- margin-top: 1rem;
- display: flex;
- flex-direction: column;
- gap: 1rem;
-
- .form-info-provider {
- padding: 0;
- margin: 0;
- color: $grey-bright;
- text-align: center;
- }
- label {
- font-style: normal;
- font-weight: normal;
- font-size: 1rem;
- color: $grey-bright;
- margin-top: 0rem;
- }
-
- .form-group {
- display: flex;
- flex-direction: column;
- input {
- max-width: unset;
- &.error {
- border: 1px solid $red-primary;
- }
- }
- .form-trailing-icon {
- float: right;
- position: relative;
- margin-top: -48px;
- margin-right: 15px;
- }
- }
- .form-message {
- color: $red-primary;
- min-height: 1.25rem;
- margin-top: 0.25rem;
- }
-}
diff --git a/src/components/Connection/GRDFConnect/GrdfBill.tsx b/src/components/Connection/GRDFConnect/GrdfBill.tsx
deleted file mode 100644
index 2ca3a67747bd2612f56271b14658dd7d388b5901..0000000000000000000000000000000000000000
--- a/src/components/Connection/GRDFConnect/GrdfBill.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import Button from '@material-ui/core/Button'
-import GasBillIcon from 'assets/icons/visu/onboarding/gas_bill.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enums'
-import React from 'react'
-import { setShowOfflineData } from 'store/chart/chart.slice'
-import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { openConnectionModal } from 'store/modal/modal.slice'
-import '../connection.scss'
-
-const GrdfBill = () => {
- const { t } = useI18n()
- const dispatch = useAppDispatch()
- const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
- const currentFluidStatus = fluidStatus[FluidType.GAS]
-
- return (
- <div className="connection-form">
- <p className="connection-form-title grdfgrandlyon text-20-bold">
- {t('auth.grdfgrandlyon.no_account.title')}
- </p>
- <StyledIcon icon={GasBillIcon} size={180} />
- <p
- className="connection-form-subtitle grdfgrandlyon text-16-regular"
- dangerouslySetInnerHTML={{ __html: t('auth.grdfgrandlyon.bill') }}
- />
-
- <div className="connection-form-button">
- <Button
- aria-label={t('auth.grdfgrandlyon.accessibility.connect')}
- onClick={() => dispatch(openConnectionModal(true))}
- className="btnPrimary"
- >
- {t('auth.grdfgrandlyon.connect')}
- </Button>
- {currentFluidStatus.firstDataDate && (
- <Button
- className="btnSecondary"
- onClick={() => dispatch(setShowOfflineData(true))}
- >
- {t('auth.button_showOfflineData')}
- </Button>
- )}
- </div>
- </div>
- )
-}
-
-export default GrdfBill
diff --git a/src/components/Connection/GRDFConnect/GrdfConnectView.tsx b/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1ecf2d104ed46ae0f455995c9d6da648fbc828bd
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
@@ -0,0 +1,150 @@
+import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
+import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
+import Content from 'components/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
+import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
+import { FluidType } from 'enums'
+import { AccountGRDFData } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAppSelector } from 'store/hooks'
+import '../connection.scss'
+import StepConsent from './StepConsent'
+import { StepIdentity } from './StepIdentity'
+
+export enum GrdfStep {
+ Identity,
+ Consent,
+}
+
+export const GrdfConnectView = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const [launchConnection, setLaunchConnection] = useState(false)
+ const navigate = useNavigate()
+ const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
+ const currentFluidStatus = fluidStatus[FluidType.GAS]
+ const account = currentFluidStatus.connection.account
+ const { data: instanceSettings } = useUserInstanceSettings()
+
+ const [currentStep, setCurrentStep] = useState<GrdfStep>(GrdfStep.Identity)
+
+ // TODO DEBUG VALUES
+ const [formData, setFormData] = useState<AccountGRDFData>({
+ lastname: 'Dumont',
+ firstname: 'Bastien',
+ email: 'bdumont@grandlyon.com',
+ postalCode: '69007',
+ pce: '19170766925335',
+ })
+ const [formConsent, setFormConsent] = useState({
+ dataConsent: true,
+ pceConfirm: true,
+ })
+
+ const [connect, update] = useKonnectorAuth(FluidType.GAS, {
+ grdfAuthData: formData,
+ })
+
+ useEffect(() => {
+ setFormData(prev => ({ ...prev, email: instanceSettings.email ?? '' }))
+ }, [instanceSettings])
+
+ useEffect(() => {
+ async function launchConnect() {
+ if (launchConnection) {
+ if (!account) {
+ await connect()
+ } else {
+ await update()
+ }
+
+ setLaunchConnection(false)
+ navigate('/consumption/gas')
+ }
+ }
+ launchConnect()
+ }, [account, connect, launchConnection, navigate, update])
+
+ const isNextValid = useCallback(() => {
+ if (currentStep === GrdfStep.Identity) {
+ return (
+ formData.firstname !== '' &&
+ formData.lastname !== '' &&
+ formData.postalCode !== '' &&
+ formData.email.includes('@') &&
+ formData.pce.length === 14
+ )
+ } else if (currentStep === GrdfStep.Consent) {
+ return formConsent.dataConsent && formConsent.pceConfirm
+ }
+ return false
+ }, [
+ currentStep,
+ formConsent.dataConsent,
+ formConsent.pceConfirm,
+ formData.email,
+ formData.firstname,
+ formData.lastname,
+ formData.pce,
+ formData.postalCode,
+ ])
+
+ const handleNext = useCallback(() => {
+ if (!isNextValid()) return
+ if (currentStep < GrdfStep.Consent) {
+ setCurrentStep(prev => prev + 1)
+ }
+ if (currentStep === GrdfStep.Consent) {
+ setLaunchConnection(true)
+ }
+ }, [currentStep, isNextValid])
+
+ const handlePrev = () => {
+ setCurrentStep(prev => prev - 1)
+ }
+
+ const renderStep = (step: GrdfStep) => {
+ if (step === GrdfStep.Identity) {
+ return <StepIdentity formData={formData} setFormData={setFormData} />
+ } else {
+ return (
+ <StepConsent
+ formConsent={formConsent}
+ setFormConsent={setFormConsent}
+ />
+ )
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey="common.title_gas_connect" displayBackArrow={true} />
+ <Header
+ setHeaderHeight={setHeaderHeight}
+ desktopTitleKey="common.title_gas_connect"
+ displayBackArrow={true}
+ />
+ <Content heightOffset={headerHeight}>
+ <div className="connectView">
+ <div className="stepContainer">
+ <FormProgress
+ currentStep={currentStep}
+ totalSteps={Object.keys(GrdfStep).length / 2}
+ />
+ {renderStep(currentStep)}
+ </div>
+ <FormNavigation
+ handlePrevious={handlePrev}
+ handleNext={handleNext}
+ isLoading={false}
+ disableNextButton={!isNextValid()}
+ disablePrevButton={currentStep === GrdfStep.Identity}
+ isLastStep={currentStep === GrdfStep.Consent}
+ />
+ </div>
+ </Content>
+ </>
+ )
+}
diff --git a/src/components/Connection/GRDFConnect/GrdfForm.tsx b/src/components/Connection/GRDFConnect/GrdfForm.tsx
deleted file mode 100644
index 77dd226b7ab96be2a0d7c3c5f51ecdc9017371e3..0000000000000000000000000000000000000000
--- a/src/components/Connection/GRDFConnect/GrdfForm.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import Button from '@material-ui/core/Button'
-import iconGrdfLogo from 'assets/icons/visu/grdf-logo.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import { useAppDispatch } from 'store/hooks'
-import { openConnectionModal } from 'store/modal/modal.slice'
-import '../connection.scss'
-
-const GrdfForm = () => {
- const { t } = useI18n()
- const dispatch = useAppDispatch()
-
- return (
- <div className="connection-form">
- <p className="connection-form-title grdfgrandlyon text-20-bold">
- {t('auth.grdfgrandlyon.with_account.title')}
- </p>
-
- <div className="connection-form-subtitle text-18-bold">
- {t('auth.grdfgrandlyon.with_account.subtitle1')}
- </div>
- <div className="connection-form-connect-button grdf">
- <Button
- aria-label={t('auth.accessibility.button_connect')}
- onClick={() => dispatch(openConnectionModal(true))}
- classes={{
- root: 'btnPrimary',
- label: 'text-18-bold',
- }}
- >
- <div className="connection-form-connect-button-content">
- <div className="connection-form-connect-button-content-icon">
- <StyledIcon icon={iconGrdfLogo} size={80} />
- </div>
- <div className="connection-form-connect-button-text text-18-bold">
- <div>{t('auth.grdfgrandlyon.connect_form.label')}</div>
- </div>
- </div>
- </Button>
- </div>
- </div>
- )
-}
-
-export default GrdfForm
diff --git a/src/components/Connection/GRDFConnect/GrdfInit.tsx b/src/components/Connection/GRDFConnect/GrdfInit.tsx
index d851448b4ba66e7fc1f36d827593bcb1bc938b4e..8793804daa0e702b5ac657d04543489b5ae398f3 100644
--- a/src/components/Connection/GRDFConnect/GrdfInit.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfInit.tsx
@@ -1,96 +1,50 @@
-import GrdfConnectModal from 'components/Connection/PartnerConnectModal/GrdfConnectModal'
-import { useClient } from 'cozy-client'
+import Button from '@material-ui/core/Button'
+import GasBillIcon from 'assets/icons/visu/onboarding/gas_bill.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enums'
-import { FluidConnection, Konnector, Trigger } from 'models'
-import React, { useCallback, useState } from 'react'
-import AccountService from 'services/account.service'
-import TriggerService from 'services/triggers.service'
-import { updateFluidConnection } from 'store/global/global.slice'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { setShowOfflineData } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { openConnectionModal } from 'store/modal/modal.slice'
import '../connection.scss'
-import GrdfBill from './GrdfBill'
-import GrdfForm from './GrdfForm'
-const GrdfInit = ({ onSuccess }: { onSuccess: () => Promise<void> }) => {
- const client = useClient()
+const GrdfInit = () => {
+ const { t } = useI18n()
+ const navigate = useNavigate()
const dispatch = useAppDispatch()
- const {
- modal: { isConnectionModalOpen },
- global: { fluidStatus },
- } = useAppSelector(state => state.ecolyo)
-
- const [showForm, setShowForm] = useState(false)
-
+ const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
const currentFluidStatus = fluidStatus[FluidType.GAS]
- const siteLink: string =
- currentFluidStatus.connection.konnectorConfig.siteLink
- const konnector: Konnector | null = currentFluidStatus.connection.konnector
-
- const handleSuccess = useCallback(
- async (accountId: string) => {
- if (konnector) {
- const accountService = new AccountService(client)
- const account = await accountService.getAccount(accountId)
- if (!account) {
- const updatedConnection: FluidConnection = {
- ...currentFluidStatus.connection,
- account: null,
- trigger: null,
- }
- dispatch(
- updateFluidConnection({
- fluidType: currentFluidStatus.fluidType,
- fluidConnection: updatedConnection,
- })
- )
- } else {
- const triggersServices = new TriggerService(client)
- const trigger: Trigger = await triggersServices.createTrigger(
- account,
- konnector
- )
- const updatedConnection: FluidConnection = {
- ...currentFluidStatus.connection,
- account: account,
- trigger: trigger,
- }
- dispatch(
- updateFluidConnection({
- fluidType: currentFluidStatus.fluidType,
- fluidConnection: updatedConnection,
- })
- )
- onSuccess()
- }
- }
- },
- [
- client,
- konnector,
- dispatch,
- currentFluidStatus.fluidType,
- currentFluidStatus.connection,
- onSuccess,
- ]
- )
-
- const goToPartnerSite = useCallback(() => {
- window.open(siteLink, '_blank')
- }, [siteLink])
return (
- <>
- {!showForm ? <GrdfBill /> : <GrdfForm />}
- <GrdfConnectModal
- open={isConnectionModalOpen}
- showForm={showForm}
- handleCloseClick={() => dispatch(openConnectionModal(false))}
- setShowForm={setShowForm}
- goToPartnerSite={goToPartnerSite}
- handleSuccess={handleSuccess}
+ <div className="connection-form">
+ <h2 className="connection-form-title grdfgrandlyon text-20-bold">
+ {t('auth.grdfgrandlyon.title')}
+ </h2>
+ <StyledIcon icon={GasBillIcon} size={180} />
+ <p
+ className="connection-form-subtitle text-16-regular"
+ dangerouslySetInnerHTML={{ __html: t('auth.grdfgrandlyon.bill') }}
/>
- </>
+
+ <div className="connection-form-button">
+ <Button
+ aria-label={t('auth.grdfgrandlyon.accessibility.connect')}
+ onClick={() => navigate('/connect/gas')}
+ className="btnPrimary"
+ >
+ {t('auth.grdfgrandlyon.connect')}
+ </Button>
+ {currentFluidStatus.firstDataDate && (
+ <Button
+ className="btnSecondary"
+ onClick={() => dispatch(setShowOfflineData(true))}
+ >
+ {t('auth.button_showOfflineData')}
+ </Button>
+ )}
+ </div>
+ </div>
)
}
diff --git a/src/components/Connection/GRDFConnect/GrdfModalHint.tsx b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c015a99bd03ed0331699bd7cd8a0b081d72b72c8
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
@@ -0,0 +1,67 @@
+import { IconButton } from '@material-ui/core'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import GasBill from 'assets/icons/visu/onboarding/gas_bill.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import React from 'react'
+
+const GrdfModalHint = ({
+ open,
+ handleCloseClick,
+}: {
+ open: boolean
+ handleCloseClick: () => void
+}) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ disableEscapeKeyDown
+ onClose={handleCloseClick}
+ aria-labelledby="accessibility-title"
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id="accessibility-title">
+ {t('challenge_no_fluid_modal.accessibility.window_title')}
+ </div>
+ <IconButton
+ aria-label={t('feedback.accessibility.button_close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
+ <div className="hintModal">
+ <h1 className="text-20-bold">
+ {t('auth.grdfgrandlyon.pceModal.title')}
+ </h1>
+ <div className="content">
+ <div className="bill grdf">
+ <Icon icon={GasBill} alt="Facture" className="bill" size={180} />
+ </div>
+ <p
+ className="grdfText"
+ dangerouslySetInnerHTML={{
+ __html: t('auth.grdfgrandlyon.pceModal.txt1'),
+ }}
+ />
+ <Button
+ aria-label={t('auth.grdfgrandlyon.pceModal.button-accessibility')}
+ onClick={handleCloseClick}
+ className="btnPrimary"
+ >
+ {t('auth.grdfgrandlyon.pceModal.button')}
+ </Button>
+ </div>
+ </div>
+ </Dialog>
+ )
+}
+
+export default GrdfModalHint
diff --git a/src/components/Connection/GRDFConnect/GrdfWaitConsent.scss b/src/components/Connection/GRDFConnect/GrdfWaitConsent.scss
new file mode 100644
index 0000000000000000000000000000000000000000..674d6fb8bf78182c8f98fdfc123594bf241c161c
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/GrdfWaitConsent.scss
@@ -0,0 +1,19 @@
+@import 'src/styles/base/color';
+
+.grdfWait {
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: center;
+ text-align: center;
+
+ .green {
+ color: var(--gasColor);
+ }
+
+ .emailContainer span {
+ color: $gold-shadow;
+ font-weight: 700;
+ }
+}
diff --git a/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a9be5885dc6fc78412bf3d45b940ac64aec4975
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@material-ui/core'
+import GRDFMail from 'assets/icons/visu/onboarding/grdf-mail.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import './GrdfWaitConsent.scss'
+
+export const GrdfWaitConsent = () => {
+ const { t } = useI18n()
+ return (
+ <div className="grdfWait">
+ <div
+ className="text-18-normal emailContainer"
+ dangerouslySetInnerHTML={{
+ __html: t('auth.grdfgrandlyon.waiting.mailSent', {
+ email: 'test@test.com',
+ }),
+ }}
+ />
+ <StyledIcon size={80} icon={GRDFMail} />
+ <div className="text-18-normal">
+ <span className="text-18-bold green">
+ {t('auth.grdfgrandlyon.waiting.validate')}
+ </span>
+ <br />
+ <span>{t('auth.grdfgrandlyon.waiting.comeback')}</span>
+ </div>
+ <Button className="btnPrimary">
+ {t('auth.grdfgrandlyon.waiting.button_done')}
+ </Button>
+ </div>
+ )
+}
diff --git a/src/components/Connection/GRDFConnect/StepConsent.tsx b/src/components/Connection/GRDFConnect/StepConsent.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c00dea6cea9d96aca4382038ab404dd4cab01
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/StepConsent.tsx
@@ -0,0 +1,65 @@
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+
+const StepConsent = ({
+ formConsent,
+ setFormConsent,
+}: {
+ formConsent: {
+ dataConsent: boolean
+ pceConfirm: boolean
+ }
+ setFormConsent: React.Dispatch<
+ React.SetStateAction<{
+ dataConsent: boolean
+ pceConfirm: boolean
+ }>
+ >
+}) => {
+ const { t } = useI18n()
+
+ return (
+ <div className="stepDetails stepConsent">
+ <div className="text-16-normal">
+ {t('auth.grdfgrandlyon.headConsent')}
+ </div>
+ <h2 className="text-22-bold">{t('auth.grdfgrandlyon.textConsent')}</h2>
+ <ul className="text-16-normal">
+ <li>{t('auth.grdfgrandlyon.consentLi1')}</li>
+ <li>{t('auth.grdfgrandlyon.consentLi2')}</li>
+ </ul>
+ <label className="inline">
+ <input
+ id="dataConsent"
+ type="checkbox"
+ name="Data-consent-validation"
+ className="inputCheckbox"
+ checked={formConsent.dataConsent}
+ onChange={e =>
+ setFormConsent(prev => ({ ...prev, dataConsent: e.target.checked }))
+ }
+ />
+ <span
+ dangerouslySetInnerHTML={{
+ __html: t('auth.grdfgrandlyon.consentCheck1'),
+ }}
+ />
+ </label>
+ <label className="inline">
+ <input
+ id="pdlConfirm"
+ type="checkbox"
+ name="Data-consent-validation"
+ className="inputCheckbox"
+ checked={formConsent.pceConfirm}
+ onChange={e =>
+ setFormConsent(prev => ({ ...prev, pceConfirm: e.target.checked }))
+ }
+ />
+ <span>{t('auth.grdfgrandlyon.consentCheck2')}</span>
+ </label>
+ </div>
+ )
+}
+
+export default StepConsent
diff --git a/src/components/Connection/GRDFConnect/StepIdentity.tsx b/src/components/Connection/GRDFConnect/StepIdentity.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b16b386291e6d64421522809b41de3f2f49bf7c5
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/StepIdentity.tsx
@@ -0,0 +1,96 @@
+import { TextField } from '@material-ui/core'
+import Button from '@material-ui/core/Button'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { AccountGRDFData } from 'models'
+import React, { useState } from 'react'
+import GrdfModalHint from './GrdfModalHint'
+
+export const StepIdentity = ({
+ formData,
+ setFormData,
+}: {
+ formData: AccountGRDFData
+ setFormData: React.Dispatch<React.SetStateAction<AccountGRDFData>>
+}) => {
+ const { t } = useI18n()
+ const [openHintModal, setOpenHintModal] = useState<boolean>(false)
+ const toggleModal = () => setOpenHintModal(prev => !prev)
+
+ return (
+ <div className="stepDetails stepIdentity">
+ <h2 className="text-22-bold">{t('auth.grdfgrandlyon.identityTitle')}</h2>
+ <TextField
+ label={t('auth.grdfgrandlyon.firstName')}
+ variant="outlined"
+ type="text"
+ id="firstName"
+ name="firstName"
+ value={formData.firstname}
+ onChange={e =>
+ setFormData(prev => ({ ...prev, firstname: e.target.value }))
+ }
+ required
+ />
+
+ <TextField
+ label={t('auth.grdfgrandlyon.lastName')}
+ variant="outlined"
+ type="text"
+ id="lastName"
+ name="lastName"
+ required
+ value={formData.lastname}
+ onChange={e =>
+ setFormData(prev => ({ ...prev, lastname: e.target.value }))
+ }
+ />
+
+ <TextField
+ label={t('auth.grdfgrandlyon.email')}
+ variant="outlined"
+ type="email"
+ id="email"
+ name="email"
+ required
+ value={formData.email}
+ onChange={e =>
+ setFormData(prev => ({ ...prev, email: e.target.value }))
+ }
+ />
+
+ <TextField
+ label={t('auth.grdfgrandlyon.zipCode')}
+ variant="outlined"
+ type="number"
+ id="zipCode"
+ name="zipCode"
+ value={formData.postalCode}
+ onChange={e =>
+ setFormData(prev => ({ ...prev, postalCode: e.target.value }))
+ }
+ />
+
+ <div className="text-22-bold">{t('auth.grdfgrandlyon.pceTitle')}</div>
+
+ <TextField
+ label={t('auth.grdfgrandlyon.pceLabel')}
+ variant="outlined"
+ id="pce"
+ name="pce"
+ type="number"
+ inputMode="numeric"
+ required
+ value={formData.pce}
+ onChange={e => {
+ if (e.target.value.length > 14) return
+ setFormData(prev => ({ ...prev, pce: e.target.value }))
+ }}
+ />
+
+ <Button className="btnText" onClick={toggleModal}>
+ {t('auth.grdfgrandlyon.pceHint')}
+ </Button>
+ <GrdfModalHint open={openHintModal} handleCloseClick={toggleModal} />
+ </div>
+ )
+}
diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
deleted file mode 100644
index 9826c86b36f19a970fdf49bf23a18ff45ca65ae1..0000000000000000000000000000000000000000
--- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { userEvent } from '@testing-library/user-event'
-import React from 'react'
-import DeleteGRDFAccountModal from './DeleteGRDFAccountModal'
-
-describe('DeleteGRDFAccountModal component', () => {
- it('should be rendered correctly', () => {
- const { baseElement } = render(
- <DeleteGRDFAccountModal
- open={true}
- handleCloseClick={jest.fn()}
- deleteAccount={jest.fn()}
- />
- )
- expect(baseElement).toMatchSnapshot()
- })
- it('should launch the deletion process and close modal', async () => {
- const mockDelete = jest.fn()
- render(
- <DeleteGRDFAccountModal
- open={true}
- handleCloseClick={jest.fn()}
- deleteAccount={mockDelete}
- />
- )
- await userEvent.click(
- screen.getByRole('button', { name: 'delete_grdf_modal.go' })
- )
- expect(mockDelete).toHaveBeenCalledTimes(1)
- })
-})
diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
deleted file mode 100644
index f47a29865b9029c859b923bdfb9be1e28ceb91d4..0000000000000000000000000000000000000000
--- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Button, IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import GrdfIcon from 'assets/icons/ico/consent-outdated-grdf.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React, { useCallback } from 'react'
-import './deleteGRDFAccountModal.scss'
-
-interface DeleteGRDFAccountModalProps {
- open: boolean
- handleCloseClick: () => void
- deleteAccount: () => void
-}
-
-const DeleteGRDFAccountModal = ({
- open,
- handleCloseClick,
- deleteAccount,
-}: DeleteGRDFAccountModalProps) => {
- const { t } = useI18n()
-
- const handleDelete = useCallback(() => {
- deleteAccount()
- handleCloseClick()
- }, [deleteAccount, handleCloseClick])
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- aria-labelledby="accessibility-title"
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id="accessibility-title">
- {t('consumption_visualizer.modal.window_title')}
- </div>
- <IconButton
- aria-label={t('consumption_visualizer.modal.close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={16} />
- </IconButton>
- <div className="delete-grdf-modal">
- <div className="icon-main">
- <Icon icon={GrdfIcon} size={135} />
- </div>
-
- <div className="text-15-normal text1">
- {t(`delete_grdf_modal.text1`)}
- </div>
- <div className="text-16-normal text2">
- {t(`delete_grdf_modal.text2`)}
- </div>
- <div className="text-15-normal text3">
- {t(`delete_grdf_modal.text3`)}
- </div>
- <div className="buttons">
- <Button
- aria-label={t(`delete_grdf_modal.go`)}
- onClick={handleDelete}
- className="btnPrimary"
- >
- {t(`delete_grdf_modal.go`)}
- </Button>
- <Button
- aria-label={t(`delete_grdf_modal.cancel`)}
- onClick={handleCloseClick}
- className="btnSecondary"
- >
- {t(`delete_grdf_modal.cancel`)}
- </Button>
- </div>
- </div>
- </Dialog>
- )
-}
-
-export default DeleteGRDFAccountModal
diff --git a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
deleted file mode 100644
index 901dd8ffa45493404d270d6f3fb91fd995d534a2..0000000000000000000000000000000000000000
--- a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
+++ /dev/null
@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
-<body
- style="padding-right: 0px; overflow: hidden;"
->
- <div
- aria-hidden="true"
- />
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- consumption_visualizer.modal.window_title
- </div>
- <button
- aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="delete-grdf-modal"
- >
- <div
- class="icon-main"
- >
- <svg
- class="styles__icon___23x3R"
- height="135"
- width="135"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <div
- class="text-15-normal text1"
- >
- delete_grdf_modal.text1
- </div>
- <div
- class="text-16-normal text2"
- >
- delete_grdf_modal.text2
- </div>
- <div
- class="text-15-normal text3"
- >
- delete_grdf_modal.text3
- </div>
- <div
- class="buttons"
- >
- <button
- aria-label="delete_grdf_modal.go"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label"
- >
- delete_grdf_modal.go
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="delete_grdf_modal.cancel"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label"
- >
- delete_grdf_modal.cancel
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
-</body>
-`;
diff --git a/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss b/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
deleted file mode 100644
index 84b0d3caa520462824848fa9d933dc53e7f16d72..0000000000000000000000000000000000000000
--- a/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import 'src/styles/base/color';
-
-.delete-grdf-modal {
- .icon-main {
- display: flex;
- svg {
- margin: auto;
- }
- }
- .text1 {
- margin-top: 1rem;
- }
- .text2 {
- color: $grey-bright;
- margin: 1rem 0;
- }
- .text3 {
- margin-bottom: 1rem;
- }
- .buttons {
- display: flex;
- gap: 1rem;
- }
-}
diff --git a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
deleted file mode 100644
index 5e5ca5cf272ae7c72267a9c6a4ad29bbf92a1613..0000000000000000000000000000000000000000
--- a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Button, Dialog, IconButton } from '@material-ui/core'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import GrdfFormOAuth from 'components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React, { useEffect, useState } from 'react'
-import './PartnerConnectModal.scss'
-import { StepContent } from './StepContent.interface'
-import GrdfCreateAccount from './Steps/GrdfCreateAccount'
-import GrdfDoYouHaveAccount from './Steps/GrdfDoYouHaveAccount'
-import GrdfGiveConsent from './Steps/GrdfGiveConsent'
-
-enum StepEnum {
- DoYouHaveAccount,
- CreateAccount,
- GiveConsent,
-}
-
-interface GrdfConnectModalProps {
- open: boolean
- showForm: boolean
- handleCloseClick: () => void
- setShowForm: (value: boolean) => void
- goToPartnerSite: () => void
- handleSuccess: (accountId: string) => Promise<void>
-}
-
-const GrdfConnectModal = ({
- open,
- showForm,
- handleCloseClick,
- setShowForm,
- goToPartnerSite,
- handleSuccess,
-}: GrdfConnectModalProps) => {
- const { t } = useI18n()
- const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
-
- useEffect(() => {
- if (open) {
- showForm
- ? setCurrentStep(StepEnum.GiveConsent)
- : setCurrentStep(StepEnum.DoYouHaveAccount)
- }
- }, [showForm, open])
-
- const handleGoToPartnerSite = () => {
- goToPartnerSite()
- setShowForm(true)
- handleCloseClick()
- }
- const handleGiveConsentPrevious = () => {
- showForm ? handleCloseClick() : setCurrentStep(StepEnum.DoYouHaveAccount)
- }
-
- const steps: Record<StepEnum, StepContent> = {
- [StepEnum.DoYouHaveAccount]: {
- content: <GrdfDoYouHaveAccount />,
- topButton: (
- <Button
- onClick={() => setCurrentStep(StepEnum.GiveConsent)}
- className="btnPrimary"
- >
- {t('auth.button_has_account')}
- </Button>
- ),
- bottomButton: (
- <Button
- onClick={() => setCurrentStep(StepEnum.CreateAccount)}
- className="btnSecondary"
- >
- {t('auth.button_create_account')}
- </Button>
- ),
- },
- [StepEnum.CreateAccount]: {
- content: <GrdfCreateAccount />,
- topButton: (
- <Button onClick={handleGoToPartnerSite} className="btnPrimary">
- {t('auth.grdfgrandlyon.button_go_to_partner_site')}
- </Button>
- ),
- bottomButton: (
- <Button
- onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
- className="btnSecondary"
- >
- {t('auth.button_previous')}
- </Button>
- ),
- },
- [StepEnum.GiveConsent]: {
- content: <GrdfGiveConsent />,
- topButton: <GrdfFormOAuth onSuccess={handleSuccess} />,
- bottomButton: (
- <Button onClick={handleGiveConsentPrevious} className="btnSecondary">
- {t('auth.button_previous')}
- </Button>
- ),
- },
- }
-
- return (
- <Dialog
- open={open}
- onClose={handleCloseClick}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <IconButton
- aria-label={t('auth.accessibility.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <StyledIcon icon={CloseIcon} size={16} />
- </IconButton>
- <div className="partners-connection-step-content">
- {steps[currentStep].content}
- </div>
- <div className="partners-connection-step-navigation">
- {steps[currentStep].topButton}
- {steps[currentStep].bottomButton}
- </div>
- </Dialog>
- )
-}
-
-export default GrdfConnectModal
diff --git a/src/components/Connection/PartnerConnectModal/StepContent.interface.ts b/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
deleted file mode 100644
index 8e62bd015db93f7bba4b275c4da809787e6576d9..0000000000000000000000000000000000000000
--- a/src/components/Connection/PartnerConnectModal/StepContent.interface.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface StepContent {
- content: JSX.Element
- topButton: JSX.Element
- bottomButton: JSX.Element
-}
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
deleted file mode 100644
index 3d945808cb5b30cf220bb8fd02b769b2f066be11..0000000000000000000000000000000000000000
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import GrdfIcon from 'assets/icons/visu/onboarding/grdf.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './stepDetail.scss'
-
-const GrdfCreateAccount = () => {
- const { t } = useI18n()
-
- return (
- <div className="step-detail-info">
- <Icon className="info-icon" icon={GrdfIcon} size={220} />
- <div className="info-content text-18-normal">
- <div
- className="info-content-text"
- dangerouslySetInnerHTML={{
- __html: t('auth.grdfgrandlyon.step2.info1'),
- }}
- />
- </div>
- </div>
- )
-}
-
-export default GrdfCreateAccount
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
deleted file mode 100644
index aadcc4ee4c5a5657d1bfb933eacb2c3b3f616445..0000000000000000000000000000000000000000
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import BrowserGrdf from 'assets/icons/visu/onboarding/browser_grdf.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './stepDetail.scss'
-
-const GrdfDoYouHaveAccount = () => {
- const { t } = useI18n()
-
- return (
- <div className="step-detail-info">
- <Icon className="info-icon" icon={BrowserGrdf} size={150} />
- <div className="info-content text-18-normal">
- <div
- className="info-content-text"
- dangerouslySetInnerHTML={{
- __html: t('auth.grdfgrandlyon.step1.info1'),
- }}
- />
- <div
- className="info-content-text"
- dangerouslySetInnerHTML={{
- __html: t('auth.grdfgrandlyon.step1.info2'),
- }}
- />
- <div
- className="info-content-text"
- dangerouslySetInnerHTML={{
- __html: t('auth.grdfgrandlyon.step1.info3'),
- }}
- />
- </div>
- </div>
- )
-}
-
-export default GrdfDoYouHaveAccount
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
deleted file mode 100644
index aa598b45f1ac7ed9491ed17aff330cadc5ce08d2..0000000000000000000000000000000000000000
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import Button from '@material-ui/core/Button'
-import { useClient } from 'cozy-client'
-import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enums'
-import { Konnector } from 'models'
-import React, { useCallback, useEffect, useState } from 'react'
-import { setShouldRefreshConsent } from 'store/global/global.slice'
-import { useAppDispatch, useAppSelector } from 'store/hooks'
-
-const GrdfFormOAuth = ({
- onSuccess,
-}: {
- onSuccess: (accountId: string) => Promise<void>
-}) => {
- const { t } = useI18n()
- const client = useClient()
- const { shouldRefreshConsent, fluidStatus } = useAppSelector(
- state => state.ecolyo.global
- )
- const currentFluidStatus = fluidStatus[FluidType.GAS]
- const konnector: Konnector | null = currentFluidStatus.connection.konnector
- const dispatch = useAppDispatch()
- const [status, setStatus] = useState<'idle' | 'waiting'>('idle')
- const endOAuth = useCallback(() => {
- setStatus('idle')
- // Set back to false the variable that allows to automatically refresh the consent (deletes and recreates the account)
- dispatch(setShouldRefreshConsent(false))
- }, [dispatch])
-
- const handleAccountId = useCallback(
- (accountId: string) => {
- endOAuth()
- onSuccess(accountId)
- },
- [endOAuth, onSuccess]
- )
-
- const isWaiting = status === 'waiting'
-
- useEffect(() => {
- if (shouldRefreshConsent) {
- // If user has selected accept button on Expired consent modal, his account has been deleted on KonnectorViewerCard, such as his consent (for GRDF), then automatically launch oauth connection flow
- setStatus('waiting')
- }
- }, [shouldRefreshConsent])
-
- if (!konnector) {
- return null
- }
-
- return (
- <>
- <Button
- aria-label={t('auth.accessibility.button_connect')}
- onClick={() => setStatus('waiting')}
- disabled={isWaiting}
- className="btnPrimary"
- >
- {isWaiting
- ? t('auth.connect_oauth.loading')
- : t('auth.button_validate')}
- </Button>
- {isWaiting && (
- <OAuthWindow
- client={client}
- konnector={konnector}
- redirectSlug={client.appMetadata.slug}
- onSuccess={handleAccountId}
- onCancel={endOAuth}
- t={t}
- />
- )}
- </>
- )
-}
-
-export default GrdfFormOAuth
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
deleted file mode 100644
index 64bebd7590a0caeeb1a2bf0c09018abed3a6712d..0000000000000000000000000000000000000000
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import GrdfConsent from 'assets/icons/visu/onboarding/grdf_consent.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './stepDetail.scss'
-
-const GrdfGiveConsent = () => {
- const { t } = useI18n()
-
- return (
- <div className="step-detail-info">
- <Icon className="info-icon" icon={GrdfConsent} size={220} />
- <div className="info-content text-18-normal">
- <div
- className="info-content-text"
- dangerouslySetInnerHTML={{
- __html: t('auth.grdfgrandlyon.step3.info1'),
- }}
- />
- <div
- className="info-content-text"
- dangerouslySetInnerHTML={{
- __html: t('auth.grdfgrandlyon.step3.info2'),
- }}
- />
- <div
- className="info-content-text"
- dangerouslySetInnerHTML={{
- __html: t('auth.grdfgrandlyon.step3.info3'),
- }}
- />
- </div>
- </div>
- )
-}
-
-export default GrdfGiveConsent
diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss
deleted file mode 100644
index 14268822eda2f22a4050079fa1fb1323f64a4295..0000000000000000000000000000000000000000
--- a/src/components/Connection/SGEConnect/SgeConnect.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/mixins';
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/components/input';
-
-.sge-view {
- box-sizing: border-box;
- min-height: inherit;
- width: inherit;
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: space-between;
- .sge-container {
- padding: 1rem;
-
- .sge-step-container {
- margin-top: 1rem;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- color: $grey-bright;
-
- .head {
- margin-top: 1rem;
- }
- .inline {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 10px;
- &.inline {
- flex-direction: row;
- align-items: center;
- gap: 0.5rem;
- }
- cursor: pointer;
-
- span span {
- color: $gold-shadow;
- }
- }
-
- label {
- &.inline {
- flex-direction: row;
- align-items: center;
- gap: 0.5rem;
- }
- cursor: pointer;
-
- span span {
- color: $gold-shadow;
- }
- }
- #zipCode {
- max-width: 115px;
- }
-
- /* Chrome, Safari, Edge, Opera */
- input::-webkit-outer-spin-button,
- input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- /* Firefox */
- input[type='number'] {
- -moz-appearance: textfield;
- }
-
- .btnText {
- max-width: 300px;
- }
- ul {
- margin: 0;
- padding: 0 1rem 1rem;
- line-height: 130%;
- border-bottom: 1px solid $grey-dark;
- li {
- margin: 0.5rem 0;
- }
- }
- }
- }
-}
-.sgeHintModal {
- padding: 1rem;
- display: flex;
- flex-direction: column;
- text-align: left;
-
- h1 {
- text-align: center;
- color: $gold-shadow;
- margin: 1rem 0;
- }
-
- .sgeHintModal-content {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- p {
- color: $grey-bright;
- margin: 0;
- text-wrap: pretty;
- }
-
- .bill {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- p {
- color: $gold-shadow;
- }
- }
-
- svg.prm {
- width: 100%;
- height: 180px;
- }
- }
-}
-
-.MuiInputBase-root {
- max-width: 300px;
-}
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 5a5df27cc2eb7d666ebcdfe02487f0d85a392311..777e5556efc91f3840a973a9165c46b53b06de1d 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -9,7 +9,7 @@ import React, { useCallback, useState } from 'react'
import { useNavigate } from 'react-router'
import { updateSgeStore } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import './SgeConnect.scss'
+import '../connection.scss'
import StepAddress from './StepAddress'
import StepConsent from './StepConsent'
import StepIdentityAndPdl from './StepIdentityAndPdl'
@@ -69,11 +69,11 @@ const SgeConnectView = () => {
])
const handleNext = useCallback(() => {
- if (currentStep < SgeStep.Consent && isNextValid()) {
+ if (currentStep < SgeStep.Consent) {
setCurrentStep(prev => prev + 1)
dispatch(updateSgeStore(currentSgeState))
}
- if (currentStep === SgeStep.Consent && isNextValid() && !isLoading) {
+ if (currentStep === SgeStep.Consent && !isLoading) {
setIsLoading(true)
const updatedState = {
...currentSgeState,
@@ -84,7 +84,7 @@ const SgeConnectView = () => {
dispatch(updateSgeStore(updatedState))
navigate('/consumption/electricity')
}
- }, [currentStep, isNextValid, isLoading, dispatch, currentSgeState, navigate])
+ }, [currentStep, isLoading, dispatch, currentSgeState, navigate])
const handlePrev = useCallback(() => {
if (currentStep !== SgeStep.IdentityAndPDL) {
@@ -138,8 +138,8 @@ const SgeConnectView = () => {
displayBackArrow={true}
/>
<Content heightOffset={headerHeight}>
- <div className="sge-view">
- <div className="sge-container">
+ <div className="connectView">
+ <div className="stepContainer">
<FormProgress
currentStep={currentStep}
totalSteps={Object.values(SgeStep).length / 2}
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index 5d349bc50929ef1bf6ec174a29abb81aacc1258e..95455867b0d705856efce6fa1409c95ccbe0a967 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -4,7 +4,6 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enums'
-import { Account } from 'models'
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { setShowOfflineData } from 'store/chart/chart.slice'
@@ -19,12 +18,12 @@ const SgeInit = () => {
const navigate = useNavigate()
const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
const currentFluidStatus = fluidStatus[FluidType.ELECTRICITY]
- const konnectorSlug: string =
- currentFluidStatus.connection.konnectorConfig.slug
- const account: Account | null = currentFluidStatus.connection.account
+ const account = currentFluidStatus.connection.account
const { sgeConnect } = useAppSelector(state => state.ecolyo.global)
const dispatch = useAppDispatch()
- const [connect, update] = useKonnectorAuth(currentFluidStatus.fluidType)
+ const [connect, update] = useKonnectorAuth(FluidType.ELECTRICITY, {
+ sgeAuthData: sgeConnect,
+ })
useEffect(() => {
async function launchConnect() {
@@ -43,24 +42,24 @@ const SgeInit = () => {
return (
<div className="connection-form">
- <p className={`connection-form-title ${konnectorSlug} text-20-bold`}>
- {t(`auth.${konnectorSlug}.title`)}
- </p>
+ <h2 className="connection-form-title enedissgegrandlyon text-20-bold">
+ {t(`auth.enedissgegrandlyon.title`)}
+ </h2>
<StyledIcon icon={ElectricityBillIcon} size={180} />
<p
- className={`connection-form-subtitle ${konnectorSlug} text-16-regular`}
- dangerouslySetInnerHTML={{ __html: t(`auth.${konnectorSlug}.bill`) }}
+ className="connection-form-subtitle text-16-regular"
+ dangerouslySetInnerHTML={{ __html: t(`auth.enedissgegrandlyon.bill`) }}
/>
<div className="connection-form-button">
<Button
- aria-label={t(`auth.${konnectorSlug}.accessibility.connect`)}
+ aria-label={t(`auth.enedissgegrandlyon.accessibility.connect`)}
onClick={() => {
- navigate('/sge-connect')
+ navigate('/connect/electricity')
}}
className="btnPrimary"
>
- {t(`auth.${konnectorSlug}.connect`)}
+ {t(`auth.enedissgegrandlyon.connect`)}
</Button>
{currentFluidStatus.firstDataDate && (
<Button
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 4e18157d9b818e0da8ea8b5630c4c7dca05f0f44..5b68e0d94d2b0298ed34a3e4ecb23348568b8daa 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -37,11 +37,11 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
>
<Icon icon={CloseIcon} size={16} />
</IconButton>
- <div className="sgeHintModal">
+ <div className="hintModal">
<h1 className="text-20-bold">
{t('auth.enedissgegrandlyon.pdlModal.title')}
</h1>
- <div className="sgeHintModal-content">
+ <div className="content">
<p>{t('auth.enedissgegrandlyon.pdlModal.txt1')}</p>
<p>{t('auth.enedissgegrandlyon.pdlModal.txt2')}</p>
<div className="bill">
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index c919dc81b56ca49df6d1633cbcf61c962b07a754..d696ff762620ced393205381adc0db5f90899cad 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -12,17 +12,16 @@ interface StepAddressProps {
const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
const { t } = useI18n()
return (
- <div className="sge-step-container stepAddress">
- <div className="title text-22-bold">
+ <div className="stepDetails stepAddress">
+ <h2 className="text-22-bold">
{t('auth.enedissgegrandlyon.addressTitle')}
- </div>
+ </h2>
<TextField
label={t('auth.enedissgegrandlyon.address')}
variant="outlined"
type="text"
id="address"
name="address"
- className="inputText"
value={sgeState.address}
onChange={e => onChange('address', e.target.value)}
/>
@@ -32,7 +31,6 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
type="number"
id="zipCode"
name="zipCode"
- className="inputText"
value={sgeState.zipCode ?? undefined}
onChange={e => onChange('zipCode', e.target.value, 5)}
/>
@@ -42,7 +40,6 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
type="text"
id="city"
name="city"
- className="inputText"
value={sgeState.city}
onChange={e => onChange('city', e.target.value)}
/>
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index e320304fa1f7dbfddec4a4ef160c714a66ead0c5..33988363d12cafb532a43b721be00e1a02027e4a 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -11,13 +11,13 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
const { t } = useI18n()
return (
- <div className="sge-step-container stepConsent">
- <div className="head text-16-normal">
+ <div className="stepDetails stepConsent">
+ <div className="text-16-normal">
{t('auth.enedissgegrandlyon.headConsent')}
</div>
- <div className="title text-22-bold">
+ <h2 className="text-22-bold">
{t('auth.enedissgegrandlyon.textConsent')}
- </div>
+ </h2>
<ul className="text-16-normal">
<li>{t('auth.enedissgegrandlyon.consentLi1')}</li>
<li>{t('auth.enedissgegrandlyon.consentLi2')}</li>
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index 6611104df235bcf8ce2148f1dbb96f1afbc40372..f633f9458f81e7871e01aa9c485b02523edf9baf 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -23,21 +23,19 @@ const StepIdentityAndPdl = ({
const toggleModal = () => setOpenHintModal(prev => !prev)
return (
- <div className="sge-step-container stepIdentity">
- <div className="title text-22-bold">
+ <div className="stepDetails stepIdentity">
+ <h2 className="text-22-bold">
{t('auth.enedissgegrandlyon.identityTitle')}
- </div>
+ </h2>
<TextField
label={t('auth.enedissgegrandlyon.firstName')}
variant="outlined"
type="text"
id="firstName"
name="firstName"
- className="inputText"
value={sgeState.firstName}
onChange={e => onChange('firstName', e.target.value)}
required
- // style={{ maxWidth: 300 }}
/>
<TextField
label={t('auth.enedissgegrandlyon.lastName')}
@@ -45,21 +43,17 @@ const StepIdentityAndPdl = ({
type="text"
id="lastName"
name="lastName"
- className="inputText"
value={sgeState.lastName}
onChange={e => onChange('lastName', e.target.value)}
required
/>
- <div className="title text-22-bold">
- {t('auth.enedissgegrandlyon.pdlTitle')}
- </div>
+ <h2 className="text-22-bold">{t('auth.enedissgegrandlyon.pdlTitle')}</h2>
<TextField
label={t('auth.enedissgegrandlyon.pdlLabel')}
variant="outlined"
id="pdl"
name="pdl"
type="number"
- className="inputText"
value={sgeState.pdl ? sgeState.pdl : undefined}
onChange={e => onChange('pdl', e.target.value, 14)}
inputMode="numeric"
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 03ac2d18b48e668df4445b8a3e43852c258147a8..9b3fe3495ddab6c2dc20ce859e0800fca2a1b127 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -80,10 +80,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
heightoffset="-48"
>
<div
- class="sge-view"
+ class="connectView"
>
<div
- class="sge-container"
+ class="stepContainer"
>
<div
class="formProgress"
@@ -110,15 +110,15 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
</div>
</div>
<div
- class="sge-step-container stepIdentity"
+ class="stepDetails stepIdentity"
>
- <div
- class="title text-22-bold"
+ <h2
+ class="text-22-bold"
>
auth.enedissgegrandlyon.identityTitle
- </div>
+ </h2>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
@@ -163,7 +163,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
</div>
</div>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
@@ -207,13 +207,13 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
</fieldset>
</div>
</div>
- <div
- class="title text-22-bold"
+ <h2
+ class="text-22-bold"
>
auth.enedissgegrandlyon.pdlTitle
- </div>
+ </h2>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
inputmode="numeric"
>
<label
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
index 4658462c50026aba4d736556c29c9cc6a13f1c90..0a5c931bc2a82e2df698f5f6149c7e998e5d5e18 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
@@ -5,11 +5,11 @@ exports[`SgeInit component should be rendered correctly 1`] = `
<div
class="connection-form"
>
- <p
+ <h2
class="connection-form-title enedissgegrandlyon text-20-bold"
>
auth.enedissgegrandlyon.title
- </p>
+ </h2>
<svg
aria-hidden="true"
class="styles__icon___23x3R"
@@ -21,7 +21,7 @@ exports[`SgeInit component should be rendered correctly 1`] = `
/>
</svg>
<p
- class="connection-form-subtitle enedissgegrandlyon text-16-regular"
+ class="connection-form-subtitle text-16-regular"
>
auth.enedissgegrandlyon.bill
</p>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index cc445baab5c109866977c4f3fcd16b676e047082..b9ab5c3f9dc4a7569fdc89d10fdbddcf246c804b 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -61,7 +61,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
/>
</button>
<div
- class="sgeHintModal"
+ class="hintModal"
>
<h1
class="text-20-bold"
@@ -69,7 +69,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
auth.enedissgegrandlyon.pdlModal.title
</h1>
<div
- class="sgeHintModal-content"
+ class="content"
>
<p>
auth.enedissgegrandlyon.pdlModal.txt1
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
index 89d8603f21c0cee705d09b8e99f0af2645268e68..fe38f9a0dc1554dfb68198bd24acf049a2550b49 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
@@ -3,15 +3,15 @@
exports[`StepAddress component should be rendered correctly 1`] = `
<div>
<div
- class="sge-step-container stepAddress"
+ class="stepDetails stepAddress"
>
- <div
- class="title text-22-bold"
+ <h2
+ class="text-22-bold"
>
auth.enedissgegrandlyon.addressTitle
- </div>
+ </h2>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
@@ -47,7 +47,7 @@ exports[`StepAddress component should be rendered correctly 1`] = `
</div>
</div>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
@@ -83,7 +83,7 @@ exports[`StepAddress component should be rendered correctly 1`] = `
</div>
</div>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
index 4d4e94cc71c5da336220e045dc7e6da2d59f05de..12291fade1d0270bf8dd71711888143f63131886 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
@@ -3,18 +3,18 @@
exports[`StepConsent component should be rendered correctly 1`] = `
<div>
<div
- class="sge-step-container stepConsent"
+ class="stepDetails stepConsent"
>
<div
- class="head text-16-normal"
+ class="text-16-normal"
>
auth.enedissgegrandlyon.headConsent
</div>
- <div
- class="title text-22-bold"
+ <h2
+ class="text-22-bold"
>
auth.enedissgegrandlyon.textConsent
- </div>
+ </h2>
<ul
class="text-16-normal"
>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
index 342be618bdb767f3840bfbc6668417bc027e5ae0..2eaf41d731643a98e6a4fa75ba5903fcaad55e04 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
@@ -3,15 +3,15 @@
exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
<div>
<div
- class="sge-step-container stepIdentity"
+ class="stepDetails stepIdentity"
>
- <div
- class="title text-22-bold"
+ <h2
+ class="text-22-bold"
>
auth.enedissgegrandlyon.identityTitle
- </div>
+ </h2>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
@@ -56,7 +56,7 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
</div>
</div>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
@@ -100,13 +100,13 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
</fieldset>
</div>
</div>
- <div
- class="title text-22-bold"
+ <h2
+ class="text-22-bold"
>
auth.enedissgegrandlyon.pdlTitle
- </div>
+ </h2>
<div
- class="MuiFormControl-root MuiTextField-root inputText"
+ class="MuiFormControl-root MuiTextField-root"
inputmode="numeric"
>
<label
diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss
index ae93a0111e53974968b023e1ebe562daee2f5f88..bde9ff1d3bb802b579c84895e838e9a8f4bc15fd 100644
--- a/src/components/Connection/connection.scss
+++ b/src/components/Connection/connection.scss
@@ -33,9 +33,6 @@
margin: 0 auto 0.5rem auto;
color: $white;
}
- .connection-form-infotext {
- color: $grey-bright;
- }
.connection-form-button {
display: flex;
@@ -76,3 +73,128 @@
}
}
}
+
+// SGE & GRDF
+.connectView {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-between;
+ .stepContainer {
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .stepDetails {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ h2 {
+ color: $grey-bright;
+ margin: 0;
+ }
+
+ label.inline {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+ &.inline {
+ flex-direction: row;
+ align-items: center;
+ gap: 0.5rem;
+ }
+ cursor: pointer;
+
+ span span {
+ color: $gold-shadow;
+ }
+ }
+ #zipCode {
+ max-width: 115px;
+ }
+
+ .MuiInputBase-root {
+ max-width: 300px;
+ }
+
+
+ /* Chrome, Safari, Edge, Opera */
+ input::-webkit-outer-spin-button,
+ input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ }
+ /* Firefox */
+ input[type='number'] {
+ appearance: textfield;
+ -moz-appearance: textfield;
+ }
+
+ .btnText {
+ max-width: 280px;
+ }
+ ul {
+ margin: 0;
+ padding: 0 1rem 1rem;
+ line-height: 130%;
+ border-bottom: 1px solid $grey-dark;
+ li {
+ margin: 0.5rem 0;
+ }
+ }
+ }
+ }
+}
+
+.hintModal {
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+
+ h1 {
+ text-align: center;
+ color: $gold-shadow;
+ margin: 1rem 0;
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ p {
+ text-align: center;
+ color: $grey-bright;
+ margin: 0;
+ text-wrap: pretty;
+ }
+
+ .grdfText {
+ color: $grey-bright;
+ span {
+ color: $gold-shadow;
+ font-weight: 700;
+ }
+ }
+
+ .bill {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ &.grdf {
+ justify-content: center;
+ }
+ p {
+ color: $gold-shadow;
+ }
+ }
+
+ svg.prm {
+ width: 100%;
+ height: 180px;
+ }
+ }
+}
+
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 943c8f1558f6e5496527d093f50d92cabb68fb45..2b5c2e45a73b9e64102dde5608476e04c17051e6 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -18,7 +18,6 @@ import {
setShowOfflineData,
} from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { openConnectionModal } from 'store/modal/modal.slice'
import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils'
import FluidChartSwipe from './FluidChartSwipe'
import HalfHourNoDataFailure from './HalfHourNoDataFailure/HalfHourNoDataFailure'
@@ -125,12 +124,13 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
const toggleModalConnection = () => {
switch (fluidType) {
case FluidType.ELECTRICITY:
- navigate('/sge-connect')
+ navigate('/connect/electricity')
break
case FluidType.GAS:
+ navigate('/connect/gas')
+ break
case FluidType.WATER:
dispatch(setShowOfflineData(false))
- dispatch(openConnectionModal(true))
break
}
}
diff --git a/src/components/Hooks/useKonnectorAuth.tsx b/src/components/Hooks/useKonnectorAuth.tsx
index ce50e44044a4cc66403a78fd400233bdb32adcd4..de2e6ca5b1eda7798437604b1a095fdf1178edcf 100644
--- a/src/components/Hooks/useKonnectorAuth.tsx
+++ b/src/components/Hooks/useKonnectorAuth.tsx
@@ -1,8 +1,14 @@
import * as Sentry from '@sentry/react'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidSlugType, FluidType } from 'enums'
-import { AccountAuthData, AccountSgeData, FluidConnection } from 'models'
+import { FluidType } from 'enums'
+import {
+ AccountEGLData,
+ AccountGRDFData,
+ AccountSgeData,
+ FluidConnection,
+ SgeStore,
+} from 'models'
import { useState } from 'react'
import AccountService from 'services/account.service'
import ConnectionService from 'services/connection.service'
@@ -11,46 +17,93 @@ import { updateFluidConnection } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import logApp from 'utils/logger'
+/**
+ * Format local state data to a format expected by konnectors
+ */
+const formatAuthData = ({
+ eglAuthData,
+ grdfAuthData,
+ sgeAuthData,
+}: {
+ eglAuthData?: AccountEGLData
+ sgeAuthData?: SgeStore
+ grdfAuthData?: AccountGRDFData
+}): AccountEGLData | AccountSgeData | AccountGRDFData => {
+ if (eglAuthData) {
+ const konnectorFields: AccountEGLData = {
+ login: eglAuthData.login,
+ password: eglAuthData.password,
+ }
+ return konnectorFields
+ // TODO could be simplified with satisfies but parser error
+ } else if (grdfAuthData) {
+ const konnectorFields: AccountGRDFData = {
+ pce: grdfAuthData.pce,
+ email: grdfAuthData.email,
+ lastname: grdfAuthData.lastname,
+ firstname: grdfAuthData.firstname,
+ postalCode: grdfAuthData.postalCode,
+ }
+ return konnectorFields
+ } else if (sgeAuthData) {
+ const konnectorFields: AccountSgeData = {
+ pointId: sgeAuthData?.pdl?.toString() ?? '',
+ firstname: sgeAuthData?.firstName ?? '',
+ lastname: sgeAuthData?.lastName ?? '',
+ address: sgeAuthData?.address ?? '',
+ postalCode: sgeAuthData?.zipCode?.toString() ?? '',
+ city: sgeAuthData?.city ?? '',
+ }
+ return konnectorFields
+ } else {
+ throw new Error('Expected data but got none')
+ }
+}
+
const useKonnectorAuth = (
+ // not needed ?
fluidType: FluidType,
- login?: string,
- password?: string
+ options: {
+ eglAuthData?: AccountEGLData
+ sgeAuthData?: SgeStore
+ grdfAuthData?: AccountGRDFData
+ }
): [() => Promise<null | undefined>, () => Promise<void>, string] => {
const client = useClient()
const { t } = useI18n()
const dispatch = useAppDispatch()
- const { sgeConnect, fluidStatus } = useAppSelector(
- state => state.ecolyo.global
- )
+ const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
const currentFluidStatus = fluidStatus[fluidType]
- const konnectorSlug: FluidSlugType =
- currentFluidStatus.connection.konnectorConfig.slug
+ const konnectorSlug = currentFluidStatus.connection.konnectorConfig.slug
const [connectError, setConnectError] = useState<string>('')
const connect = async () => {
- const connectionService = new ConnectionService(client)
try {
- const { account: _account, trigger: _trigger } =
- konnectorSlug === FluidSlugType.WATER
- ? await connectionService.connectNewUser(konnectorSlug, {
- login: login ?? '',
- password: password,
- })
- : await connectionService.connectNewUser(
- konnectorSlug,
- undefined,
- sgeConnect
- )
- if (!_trigger || !_account) {
+ logApp('info', `useKonnectorAuth connect ${konnectorSlug}`)
+ const connectionService = new ConnectionService(client)
+ const accountAuthData = formatAuthData({
+ eglAuthData: options.eglAuthData,
+ grdfAuthData: options.grdfAuthData,
+ sgeAuthData: options.sgeAuthData,
+ })
+ logApp('info', `accountAuthData ${JSON.stringify(accountAuthData)}`)
+
+ const { account, trigger } = await connectionService.connectNewUser(
+ konnectorSlug,
+ accountAuthData
+ )
+
+ if (!trigger || !account) {
setConnectError(t('konnector_form.error_account_creation'))
return null
}
const updatedConnection: FluidConnection = {
...currentFluidStatus.connection,
- account: _account,
- trigger: _trigger,
+ account: account,
+ trigger: trigger,
shouldLaunchKonnector: true,
}
+ // TODO this should be dispatched
setLoading(false)
dispatch(
updateFluidConnection({
@@ -66,38 +119,38 @@ const useKonnectorAuth = (
}
const update = async () => {
- if (currentFluidStatus.connection.account) {
- const _account = currentFluidStatus.connection.account
- let auth: AccountAuthData | AccountSgeData
- if (konnectorSlug === FluidSlugType.WATER) {
- auth = {
- login: login,
- password: password,
- } as AccountAuthData
- } else {
- auth = {
- pointId: sgeConnect.pdl ? sgeConnect.pdl.toString() : '',
- firstname: sgeConnect.firstName,
- lastname: sgeConnect.lastName,
- address: sgeConnect.address,
- postalCode: sgeConnect.zipCode ? sgeConnect.zipCode.toString() : '',
- city: sgeConnect.city,
- } as AccountSgeData
- }
- _account.auth = auth
- const accountService = new AccountService(client)
- const updatedAccount = await accountService.updateAccount(_account)
- const updatedConnection: FluidConnection = {
- ...currentFluidStatus.connection,
- account: updatedAccount,
- shouldLaunchKonnector: true,
- }
- dispatch(
- updateFluidConnection({
- fluidType: currentFluidStatus.fluidType,
- fluidConnection: updatedConnection,
+ try {
+ logApp('info', `useKonnectorAuth update ${konnectorSlug}`)
+ if (currentFluidStatus.connection.account) {
+ const accountAuthData = formatAuthData({
+ eglAuthData: options.eglAuthData,
+ grdfAuthData: options.grdfAuthData,
+ sgeAuthData: options.sgeAuthData,
})
- )
+ logApp('info', `accountAuthData ${JSON.stringify(accountAuthData)}`)
+
+ const newAccount = structuredClone(
+ currentFluidStatus.connection.account
+ )
+ newAccount.auth = accountAuthData
+ const accountService = new AccountService(client)
+ const updatedAccount = await accountService.updateAccount(newAccount)
+ const updatedConnection: FluidConnection = {
+ ...currentFluidStatus.connection,
+ account: updatedAccount,
+ shouldLaunchKonnector: true,
+ }
+ dispatch(
+ updateFluidConnection({
+ fluidType: currentFluidStatus.fluidType,
+ fluidConnection: updatedConnection,
+ })
+ )
+ }
+ } catch (error) {
+ setLoading(false)
+ logApp.error(error)
+ Sentry.captureException(error)
}
}
return [connect, update, connectError]
diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
index 746c5878a3e628c2fc31626c46272bbf1605f4fd..ed4433a1ed16ced0b1f8de2fde10726ea18cda60 100644
--- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
+++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
@@ -7,13 +7,7 @@ import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType, KonnectorUpdate } from 'enums'
import { DateTime } from 'luxon'
-import {
- Account,
- AccountSgeData,
- FluidConnection,
- FluidStatus,
- Trigger,
-} from 'models'
+import { Account, AccountSgeData, FluidConnection, FluidStatus } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import AccountService from 'services/account.service'
import DateChartService from 'services/dateChart.service'
@@ -25,7 +19,6 @@ import {
} from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { getKonnectorUpdateError } from 'utils/utils'
-import DeleteGRDFAccountModal from '../../Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal'
import './connectionResult.scss'
interface ConnectionResultProps {
@@ -52,11 +45,6 @@ const ConnectionResult = ({
const [konnectorError, setKonnectorError] = useState<string>('')
const [status, setStatus] = useState<string>('')
const [outDatedDataDays, setOutDatedDataDays] = useState<number | null>(null)
- const [openGRDFDeletionModal, setOpenGRDFDeletionModal] =
- useState<boolean>(false)
- const toggleGRDFDeletionModal = useCallback(() => {
- setOpenGRDFDeletionModal(prev => !prev)
- }, [])
const updateKonnector = async () => {
setUpdating(true)
@@ -83,12 +71,11 @@ const ConnectionResult = ({
if (account) {
const accountService = new AccountService(client)
const triggerService = new TriggerService(client)
- const accounts: Account[] = await accountService.getAccountsByType(
+ const accounts = await accountService.getAccountsByType(
account.account_type
)
for (const _account of accounts) {
- const trigger: Trigger | null =
- await triggerService.getTriggerForAccount(_account)
+ const trigger = await triggerService.getTriggerForAccount(_account)
if (trigger) await triggerService.deleteTrigger(trigger)
await accountService.deleteAccount(_account)
}
@@ -263,11 +250,7 @@ const ConnectionResult = ({
{!consentError && (
<Button
aria-label={t('konnector_form.accessibility.button_disconnect')}
- onClick={
- fluidType === FluidType.GAS
- ? toggleGRDFDeletionModal
- : deleteAccountsAndTriggers
- }
+ onClick={deleteAccountsAndTriggers}
disabled={updating || deleting}
className="btnSecondary"
>
@@ -296,13 +279,6 @@ const ConnectionResult = ({
)}
</Button>
</div>
- {fluidType === FluidType.GAS && (
- <DeleteGRDFAccountModal
- open={openGRDFDeletionModal}
- handleCloseClick={toggleGRDFDeletionModal}
- deleteAccount={deleteAccountsAndTriggers}
- />
- )}
</div>
)
}
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 9817b2864295223d368ff67baa6611b879e6c72f..c5ebc3ba8a5bd98feda2f6cb770acbd2018b23c0 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -23,6 +23,7 @@ import './konnectorModal.scss'
interface KonnectorModalProps {
open: boolean
isUpdating: boolean
+ /** Only used for SGE when searching for user identity */
isLogging: boolean
state: string | null
error: KonnectorError | null
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index 836fb3397949bcd4205e765464ad7d135143402e..dbc539dcf5f8877dc1f24f100cc78ecaaf9206b0 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -34,7 +34,7 @@ const KonnectorModalFooter = ({
const navigate = useNavigate()
const handleSGELoginRetry = useCallback(() => {
handleCloseClick(state === SUCCESS_EVENT)
- navigate('/sge-connect')
+ navigate('/connect/electricity')
}, [handleCloseClick, navigate, state])
const handleResetSGEAccount = useCallback(async () => {
@@ -42,7 +42,7 @@ const KonnectorModalFooter = ({
const accountService = new AccountService(client)
await accountService.deleteAccount(account)
await handleAccountDeletion()
- navigate('/sge-connect')
+ navigate('/connect/electricity')
}
}, [account, client, handleAccountDeletion, navigate])
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index ab157f8f05c9a190057025fdc323782e78679efe..d21e51fcc4b80655db43d3ee9e16248b0a7e1e96 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -12,8 +12,7 @@ import OfflinePicto from 'assets/icons/visu/offline-param.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Connection from 'components/Connection/Connection'
-import ConnectionNotFound from 'components/Konnector/ConnectionNotFound/ConnectionNotFound'
-import ConnectionResult from 'components/Konnector/ConnectionResult/ConnectionResult'
+import { GrdfWaitConsent } from 'components/Connection/GRDFConnect/GrdfWaitConsent'
import KonnectorModal from 'components/Konnector/KonnectorModal'
import { useClient } from 'cozy-client'
import { isKonnectorRunning } from 'cozy-harvest-lib/dist/helpers/triggers'
@@ -34,15 +33,7 @@ import {
UserDuelState,
} from 'enums'
import { DateTime } from 'luxon'
-import {
- Account,
- AccountAuthData,
- FluidConnection,
- FluidStatus,
- Konnector,
- PartnersInfo,
- Trigger,
-} from 'models'
+import { AccountEGLData, FluidConnection, FluidStatus } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import AccountService from 'services/account.service'
@@ -59,9 +50,10 @@ import {
updateFluidConnection,
} from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { openConnectionModal } from 'store/modal/modal.slice'
import { getParamPicto } from 'utils/picto'
import { getKonnectorSlug } from 'utils/utils'
+import ConnectionNotFound from './ConnectionNotFound/ConnectionNotFound'
+import ConnectionResult from './ConnectionResult/ConnectionResult'
import './konnectorViewerCard.scss'
interface KonnectorViewerCardProps {
@@ -90,13 +82,13 @@ const KonnectorViewerCard = ({
const currentFluidStatus = fluidStatus[fluidType]
const fluidSlug = currentFluidStatus.connection.konnectorConfig.slug
const fluidState = currentFluidStatus.status
- const konnector: Konnector | null = currentFluidStatus.connection.konnector
- const account: Account | null = currentFluidStatus.connection.account
- const trigger: Trigger | null = currentFluidStatus.connection.trigger
-
+ const { konnector, account, trigger } = currentFluidStatus.connection
+ const currentFluidName = FluidType[currentFluidStatus.fluidType].toLowerCase()
const [openModal, setOpenModal] = useState(false)
const [isUpdating, setIsUpdating] = useState(false)
- const [isLogging, setIsLogging] = useState(fluidSlug !== FluidSlugType.GAS)
+ const [isLogging, setIsLogging] = useState(
+ fluidType === FluidType.ELECTRICITY
+ )
const [konnectorErrorDescription, setKonnectorErrorDescription] =
useState<KonnectorError | null>(null)
const [konnectorState, setKonnectorState] = useState<string | null>(null)
@@ -121,10 +113,9 @@ const KonnectorViewerCard = ({
const updateGlobalFluidStatus = useCallback(async (): Promise<
FluidStatus[]
> => {
- const _updatedFluidStatus: FluidStatus[] =
- await fluidService.getFluidStatus()
+ const _updatedFluidStatus = await fluidService.getFluidStatus()
const refDate = DateTime.fromISO('0001-01-01')
- let _lastDataDate: DateTime | null = DateTime.fromISO('0001-01-01')
+ let _lastDataDate = DateTime.fromISO('0001-01-01')
for (const fluid of _updatedFluidStatus) {
if (fluid?.lastDataDate && fluid?.lastDataDate > _lastDataDate) {
_lastDataDate = fluid.lastDataDate
@@ -164,10 +155,8 @@ const KonnectorViewerCard = ({
await refreshChallengeState()
const _updatedFluidStatus = await updateGlobalFluidStatus()
if (_updatedFluidStatus.length > 0) {
- const partnersInfo: PartnersInfo | undefined =
- await partnersInfoService.getPartnersInfo()
- const updatedFluidStatus: FluidStatus[] =
- await fluidService.getFluidStatus(partnersInfo)
+ const partnersInfo = await partnersInfoService.getPartnersInfo()
+ const updatedFluidStatus = await fluidService.getFluidStatus(partnersInfo)
dispatch(setFluidStatus(updatedFluidStatus))
}
setActive(false)
@@ -209,7 +198,7 @@ const KonnectorViewerCard = ({
currentFluidStatus.connection.account?.auth
) {
const auth = currentFluidStatus.connection.account
- .auth as AccountAuthData
+ .auth as AccountEGLData
lastEpglLogin = auth.login
}
// DELETE ACCOUNT
@@ -252,17 +241,24 @@ const KonnectorViewerCard = ({
const toggleModalConnection = useCallback(() => {
switch (fluidType) {
case FluidType.ELECTRICITY:
- navigate('/sge-connect')
+ navigate('/connect/electricity')
break
case FluidType.GAS:
+ navigate('/connect/gas')
+ break
case FluidType.WATER:
dispatch(setShowOfflineData(false))
- dispatch(openConnectionModal(true))
break
}
}, [dispatch, fluidType, navigate])
const getConnectionCard = useCallback(() => {
+ if (
+ fluidType === FluidType.GAS &&
+ fluidState === FluidState.CHALLENGE_ASKED
+ ) {
+ return <GrdfWaitConsent />
+ }
if (showOfflineData && !account) {
return (
<Button className="btnPrimary" onClick={toggleModalConnection}>
@@ -275,8 +271,8 @@ const KonnectorViewerCard = ({
}
// Handle login failed for EGL
else if (
- (fluidState === FluidState.ERROR_LOGIN_FAILED &&
- fluidType === FluidType.WATER) ||
+ (fluidType === FluidType.WATER &&
+ fluidState === FluidState.ERROR_LOGIN_FAILED) ||
(account && currentFluidStatus.status !== FluidState.NOT_CONNECTED)
) {
return (
@@ -407,17 +403,13 @@ const KonnectorViewerCard = ({
</span>
)
} else if (currentFluidStatus.connection.account && !isOutdatedData) {
- return t(`FLUID.${FluidType[currentFluidStatus.fluidType]}.LABEL`)
+ return t(`FLUID.${currentFluidName.toUpperCase()}.LABEL`)
} else {
- return t(
- `konnector_options.label_offline_${FluidType[
- currentFluidStatus.fluidType
- ].toLowerCase()}`
- )
+ return t(`konnector_options.label_offline_${currentFluidName}`)
}
}, [
+ currentFluidName,
currentFluidStatus.connection.account,
- currentFluidStatus.fluidType,
currentFluidStatus.maintenance,
isOutdatedData,
t,
@@ -458,6 +450,7 @@ const KonnectorViewerCard = ({
}
const connectionFlow = new ConnectionFlow(client, trigger, konnector)
await connectionFlow.launch()
+ console.log('connectionFlow', connectionFlow.jobWatcher)
connectionFlow.jobWatcher.on(ERROR_EVENT, () => {
setKonnectorErrorDescription(connectionFlow.jobWatcher.on()._error)
callbackResponse(ERROR_EVENT)
@@ -497,7 +490,10 @@ const KonnectorViewerCard = ({
return (
<>
- {!isDisconnected ? (
+ {isDisconnected && (
+ <AccordionDetails>{getConnectionCard()}</AccordionDetails>
+ )}
+ {!isDisconnected && (
<Accordion
expanded={active}
onChange={toggleAccordion}
@@ -513,9 +509,7 @@ const KonnectorViewerCard = ({
>
<AccordionSummary
aria-label={t(
- `konnector_options.accessibility.button_toggle_detail_${FluidType[
- currentFluidStatus.fluidType
- ].toLowerCase()}`
+ `konnector_options.accessibility.button_toggle_detail_${currentFluidName}`
)}
expandIcon={
<Icon icon={chevronDown} size={16} className="accordion-icon" />
@@ -528,9 +522,7 @@ const KonnectorViewerCard = ({
{displayKonnectorIcon()}
<div
className={classNames('text-16-bold konnector-title', {
- [`${FluidType[
- currentFluidStatus.fluidType
- ].toLowerCase()}-connected`]:
+ [`${currentFluidName}-connected`]:
currentFluidStatus.status !== FluidState.NOT_CONNECTED &&
!currentFluidStatus.maintenance,
})}
@@ -546,8 +538,6 @@ const KonnectorViewerCard = ({
{getConnectionCard()}
</AccordionDetails>
</Accordion>
- ) : (
- <AccordionDetails>{getConnectionCard()}</AccordionDetails>
)}
<KonnectorModal
open={openModal}
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 89d3a0590b6262642918b54382c2851aa3bf5fa6..a6cdf99bbd9d30ea9d8342544d664a61d6b70e0f 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,5 +1,6 @@
import ActionView from 'components/Action/ActionView'
import ChallengeView from 'components/Challenge/ChallengeView'
+import { GrdfConnectView } from 'components/Connection/GRDFConnect/GrdfConnectView'
import SgeConnectView from 'components/Connection/SGEConnect/SgeConnectView'
import DuelView from 'components/Duel/DuelView'
import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView'
@@ -66,7 +67,8 @@ const AppRoutes = ({ termsStatus }: { termsStatus: TermsStatus }) => {
path="/consumption"
element={<ConsumptionView fluidType={FluidType.MULTIFLUID} />}
/>
- <Route path="/sge-connect" element={<SgeConnectView />} />
+ <Route path="/connect/electricity" element={<SgeConnectView />} />
+ <Route path="/connect/gas" element={<GrdfConnectView />} />
<Route path="/challenges/duel" element={<DuelView />} />
<Route path="/challenges/quiz" element={<QuizView />} />
<Route
diff --git a/src/components/theme.ts b/src/components/theme.ts
index 0230c425e7902585a2895cecbede70e5695f1b82..9f08839f031ef6da09636a558b98e59e6d0226f7 100644
--- a/src/components/theme.ts
+++ b/src/components/theme.ts
@@ -31,5 +31,10 @@ export const theme = createTheme({
backgroundColor: '#e3b82a',
},
},
+ MuiInputBase: {
+ input: {
+ color: '#e0e0e0',
+ },
+ },
},
})
diff --git a/src/constants/config.json b/src/constants/config.json
index 2c1c6e36aff92db90bd24d1907d93fe4f7cbac26..3ef9da6cd3182512e86758c38f7dcbd62662d263 100644
--- a/src/constants/config.json
+++ b/src/constants/config.json
@@ -36,7 +36,7 @@
"dataDelayOffset": 5,
"konnectorConfig": {
"name": "GRDF",
- "oauth": true,
+ "oauth": false,
"slug": "grdfgrandlyon",
"siteLink": "https://monespace.grdf.fr/creation-particulier",
"activation": ""
diff --git a/src/enums/fluid.enum.ts b/src/enums/fluid.enum.ts
index e62cd529ed496bf0b6c157c4d59c82b5ac04f3d4..4f6608f2c6212950fcd55aaaf83679553a56cec5 100644
--- a/src/enums/fluid.enum.ts
+++ b/src/enums/fluid.enum.ts
@@ -11,4 +11,5 @@ export enum FluidState {
DONE = 200,
ERROR = 300,
ERROR_LOGIN_FAILED = 301,
+ CHALLENGE_ASKED = 400,
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 38489df02043c85e921d89a743960567bc6bff4b..27bff7a7a136d240954126d5451898549a5c0456 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -17,6 +17,7 @@
"title_gcu": "Conditions générales d’utilisation",
"title_accessibility": "Accessibilité : non conforme",
"title_sge_connect": "Connexion à l'électricité",
+ "title_gas_connect": "Connexion au gaz",
"accessibility": {
"loading": "Chargement"
}
@@ -179,7 +180,7 @@
"zipCode": "Code postal",
"city": "Ville",
"headConsent": "En acceptant de partager vos données, celles-ci seront directement transférées à Ecolyo à l’intérieur de votre cloud personnel, sans que la Métropole n’y accède ni ne les visualise.",
- "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes\u00a0: ",
+ "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes\u00a0: ",
"consentLi1": "L'historique et le relevé de vos consommations quotidiennes en kWh",
"consentLi2": "L'historique et le relevé de vos consommations au pas de temps 30 minutes",
"consentLi3": "Les puissances maximales atteintes quotidiennement",
@@ -188,35 +189,39 @@
"consentCheck2": "J’atteste être le titulaire du point de livraison (PDL) renseigné à l’étape précédente"
},
"grdfgrandlyon": {
+ "title": "Ecolyo doit se connecter au gaz",
"bill": "Munissez-vous d’une <span>facture de gaz</span> pour valider la connexion",
"connect": "Je me connecte au gaz",
"accessibility": {
"connect": "Se connecter"
},
- "connect_form": {
- "label": "Je donne mon accord via mon compte GRDF"
- },
- "no_account": {
- "title": "Ecolyo doit se connecter au gaz"
- },
- "with_account": {
- "title": "Votre compte GRDF a bien été créé\u00a0?",
- "subtitle1": "Plus qu’à donner votre accord pour connecter votre compteur de gaz et Ecolyo\u00a0!"
- },
- "step1": {
- "info1": "Un <span>compte chez GRDF</span> est nécessaire pour vous connecter au gaz <span>quelque soit votre fournisseur de gaz</span>.",
- "info2": "<p>GRDF est le gestionnaire de réseau. C'est lui qui est responsable de votre compteur Gazpar et de la collecte des données de consommation.</p>",
- "info3": "Possédez-vous un <span>compte GRDF</span>\u00a0?"
- },
- "step2": {
- "info1": "Une fois votre compte créé, <span>n'oubliez pas de revenir sur Ecolyo</span> pour finaliser la connexion."
- },
- "step3": {
- "info1": "La visualisation de vos données sur Ecolyo demande l'activation du <span>partage de toutes les données.</span>",
- "info2": "Pour une expérience optimale, <span>une période de consentement de 1 an</span> est recommandée à partir d’aujourd’hui.",
- "info3": "<p>Veillez également à indiquer une date antérieure pour l'historique (1er calendrier) afin de pouvoir récupérer jusqu'à 3 ans d'historique.</p>"
+ "identityTitle": "Nom inscrit sur la facture",
+ "firstName": "Prénom",
+ "lastName": "Nom",
+ "email": "Email",
+ "zipCode": "Code postal",
+ "pceTitle": "Numéro de votre compteur de gaz (PCE)",
+ "pceLabel": "N° (14 chiffres)",
+ "pceHint": "Où trouver le numéro de PCE\u00a0?",
+ "pceModal": {
+ "title": "Où trouver le n° de PCE\u00a0?",
+ "txt1": "Votre numéro PCE est inscrit en première page de votre facture de gaz, à la rubrique <span>“votre contrat d’énergie“</span> ou <span>“votre facture en détail“</span>.",
+ "button": "J'ai compris",
+ "accessibility": "Titre de la modale",
+ "button-accessibility": "Bouton valider"
},
- "button_go_to_partner_site": "Aller sur GRDF"
+ "headConsent": "Vous allez partager vos données à la Métropole de Lyon. Elles seront directement transférées à Ecolyo à l'intérieur de votre cloud personnel, sans que la Métropole n'y accède ni ne les visualise.",
+ "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes\u00a0:",
+ "consentLi1": "L'historique de vos consommations (jusqu’à 36 mois) et le relevé quotidien de vos consommations",
+ "consentLi2": "Les données contractuelles (type de compteur, date de début de contrat)",
+ "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span>",
+ "consentCheck2": "J’atteste être le titulaire du point de livraison (PCE) renseigné à l’étape précédente",
+ "waiting": {
+ "mailSent": "Un mail va vous être envoyé par GRDF sur l’adresse mail :<br><span>%{email}</span>",
+ "validate": "Merci de valider l'autorisation d'accès à vos données",
+ "comeback": "Une fois ce clic effectué, revenez ici pour accéder à vos données",
+ "button_done": "C’est fait !"
+ }
},
"eglgrandlyon": {
"bill": "Munissez-vous d’une <span>facture d'eau</span> pour valider la connexion",
@@ -862,13 +867,6 @@
"no": "Non",
"yes": "Oui"
},
- "delete_grdf_modal": {
- "text1": "La suppression de la connexion avec GRDF s’accompagne de la suppression de votre consentement à partager vos données gaz avec Ecolyo.",
- "text2": "Si vous souhaitez vous reconnecter, il vous faudra re-donner votre accord pour que GRDF nous transmette vos données de consommation.",
- "text3": "Voulez-vous supprimer votre connexion et votre consentement à GRDF\u00a0?",
- "cancel": "Plus tard",
- "go": "Oui"
- },
"legal": {
"read_legal": "Lire les mentions légales",
"title_legal": "Mentions légales & CGU",
diff --git a/src/models/account.model.ts b/src/models/account.model.ts
index 329d7a37703d855da6c15ecc76bfff6a508020ba..73866654512b67c454c39157727466612dc235f3 100644
--- a/src/models/account.model.ts
+++ b/src/models/account.model.ts
@@ -14,26 +14,27 @@ export interface SgeAccountData {
export interface AccountAttributes {
account_type: string
- auth?: AccountAuthData | AccountSgeData
- oauth?: AccountOAuthData
+ auth?: AccountEGLData | AccountSgeData | AccountGRDFData
identifier?: string
state?: string | null
name?: string
data?: SgeAccountData
+ // TODO remove this ?
oauth_callback_results?: Record<string, any>
}
-export interface AccountAuthData {
+export interface AccountEGLData {
login: string
credentials_encrypted?: string
password?: string
}
-export interface AccountOAuthData {
- access_token: string
- refresh_token: string
- expires_at?: string
- token_type?: string
+export interface AccountGRDFData {
+ pce: string
+ email: string
+ lastname: string
+ firstname: string
+ postalCode: string
}
export interface AccountSgeData {
diff --git a/src/models/modal.model.ts b/src/models/modal.model.ts
index 019051d00c75129a4462867115947247dea66030..1fbb95c7b7f754863a0af07dd9ab8ddace94d562 100644
--- a/src/models/modal.model.ts
+++ b/src/models/modal.model.ts
@@ -2,7 +2,6 @@ import { CustomPopup } from 'models'
export interface ModalState {
customPopupModal: CustomPopup
- isConnectionModalOpen: boolean
isFeedbacksOpen: boolean
partnersIssueModal: {
enedis: boolean
diff --git a/src/services/account.service.spec.ts b/src/services/account.service.spec.ts
index 6dad879e0bd469b416ac9a20516eaf3016ec7406..5eef808b36786a1191a1f7224ecbd08010c36d70 100644
--- a/src/services/account.service.spec.ts
+++ b/src/services/account.service.spec.ts
@@ -1,7 +1,7 @@
/* eslint-disable camelcase */
import { QueryResult } from 'cozy-client'
import * as harvestLibAccounts from 'cozy-harvest-lib/dist/connections/accounts'
-import { Account, AccountAuthData } from 'models'
+import { Account, AccountEGLData } from 'models'
import { accountsData } from 'tests/__mocks__/accountsData.mock'
import mockClient from 'tests/__mocks__/client.mock'
import { konnectorsData } from 'tests/__mocks__/konnectorsData.mock'
@@ -10,7 +10,7 @@ import { triggersEnedisData } from 'tests/__mocks__/triggersData.mock'
import AccountService from './account.service'
jest.mock('cozy-harvest-lib/dist/connections/accounts')
-const mockHavestLibAccounts = harvestLibAccounts
+const mockHarvestLibAccounts = harvestLibAccounts
const mockGetTriggerForAccount = jest.fn()
jest.mock('./triggers.service', () => {
@@ -24,8 +24,10 @@ describe('Account service', () => {
describe('createAccount method', () => {
it('should return created account for login type', async () => {
- mockHavestLibAccounts.createAccount.mockResolvedValueOnce(accountsData[2])
- const mockAuthData: AccountAuthData = {
+ mockHarvestLibAccounts.createAccount.mockResolvedValueOnce(
+ accountsData[2]
+ )
+ const mockAuthData: AccountEGLData = {
login: 'login',
password: 'password', // NOSONAR
}
@@ -39,14 +41,14 @@ describe('Account service', () => {
describe('getAccount method', () => {
it('should return account', async () => {
- mockHavestLibAccounts.fetchAccount.mockResolvedValueOnce(accountsData[2])
+ mockHarvestLibAccounts.fetchAccount.mockResolvedValueOnce(accountsData[2])
const mockId = 'io.cozy.konnectors/eglgrandlyon'
const result = await accountService.getAccount(mockId)
expect(result).toBe(accountsData[2])
})
it('should throw error when fetchAccount unsuccessfully', async () => {
- mockHavestLibAccounts.fetchAccount.mockRejectedValueOnce(new Error())
+ mockHarvestLibAccounts.fetchAccount.mockRejectedValueOnce(new Error())
const mockId = 'io.cozy.konnectors/eglgrandlyon'
const error = await getError(async () =>
accountService.getAccount(mockId)
@@ -121,13 +123,15 @@ describe('Account service', () => {
describe('updateAccount method', () => {
it('should return updated account when updateAccount successfully', async () => {
- mockHavestLibAccounts.updateAccount.mockResolvedValueOnce(accountsData[2])
+ mockHarvestLibAccounts.updateAccount.mockResolvedValueOnce(
+ accountsData[2]
+ )
const result = await accountService.updateAccount(accountsData[2])
expect(result).toEqual(accountsData[2])
})
it('should throw error when updateAccount unsuccessfully', async () => {
- mockHavestLibAccounts.updateAccount.mockRejectedValueOnce(new Error())
+ mockHarvestLibAccounts.updateAccount.mockRejectedValueOnce(new Error())
const error = await getError(async () =>
accountService.updateAccount(accountsData[2])
)
@@ -137,13 +141,15 @@ describe('Account service', () => {
describe('deleteAccount method', () => {
it('should return true when destroy successfully', async () => {
- mockHavestLibAccounts.deleteAccount.mockResolvedValueOnce(accountsData[2])
+ mockHarvestLibAccounts.deleteAccount.mockResolvedValueOnce(
+ accountsData[2]
+ )
const result = await accountService.deleteAccount(accountsData[2])
expect(result).toBe(true)
})
it('should throw error when destroy unsuccessfully', async () => {
- mockHavestLibAccounts.deleteAccount.mockRejectedValueOnce(new Error())
+ mockHarvestLibAccounts.deleteAccount.mockRejectedValueOnce(new Error())
const error = await getError(async () =>
accountService.deleteAccount(accountsData[2])
)
diff --git a/src/services/account.service.ts b/src/services/account.service.ts
index 3ed4c8bfc6e40c851b566fdc8ff51041e4828fa5..5692a60656eb186725d3d77575ef4c77890b349b 100644
--- a/src/services/account.service.ts
+++ b/src/services/account.service.ts
@@ -14,7 +14,8 @@ import { DateTime } from 'luxon'
import {
Account,
AccountAttributes,
- AccountAuthData,
+ AccountEGLData,
+ AccountGRDFData,
AccountSgeData,
Konnector,
Trigger,
@@ -31,16 +32,17 @@ export default class AccountService {
this._client = _client
}
+ // TODO no need for this method
private buildAccountAttributes(
konnector: Konnector,
- authData: AccountAuthData | AccountSgeData
+ authData: AccountEGLData | AccountSgeData | AccountGRDFData
): AccountAttributes {
return build(konnector, authData)
}
public async createAccount(
konnector: Konnector,
- accountAuthData: AccountAuthData | AccountSgeData
+ accountAuthData: AccountEGLData | AccountSgeData | AccountGRDFData
): Promise<Account> {
const accountAttributes = this.buildAccountAttributes(
konnector,
@@ -78,7 +80,7 @@ export default class AccountService {
triggerService.getTriggerForAccount(_account)
)
)
- // Keep the accountid which have the older trigger
+ // Keep the accountId which have the older trigger
let olderDate: DateTime = DateTime.now()
let olderAccountId: string | null = null
for (const _trigger of triggers) {
diff --git a/src/services/connection.service.spec.ts b/src/services/connection.service.spec.ts
index 445efa37ffd5330e4e4f23b02ca88105b548f1fb..6494c5b7d38b4832ce5fdd8706ce5a75b5f7a0fd 100644
--- a/src/services/connection.service.spec.ts
+++ b/src/services/connection.service.spec.ts
@@ -1,4 +1,4 @@
-import { AccountAuthData } from 'models'
+import { AccountEGLData } from 'models'
import { accountsData } from 'tests/__mocks__/accountsData.mock'
import mockClient from 'tests/__mocks__/client.mock'
import { konnectorsData } from 'tests/__mocks__/konnectorsData.mock'
@@ -26,7 +26,7 @@ jest.mock('./triggers.service', () => {
}))
})
-const mockEGLAuthData: AccountAuthData = {
+const mockEGLAuthData: AccountEGLData = {
login: 'login',
password: 'password',
}
diff --git a/src/services/connection.service.ts b/src/services/connection.service.ts
index b37854fb64c6cf4434eb0f84d4ae253f4ae1e863..86f5da837bb72668a3a7cc1424e3249680e1e2ac 100644
--- a/src/services/connection.service.ts
+++ b/src/services/connection.service.ts
@@ -3,10 +3,9 @@ import { Client } from 'cozy-client'
import logger from 'cozy-logger'
import {
Account,
- AccountAuthData,
+ AccountEGLData,
+ AccountGRDFData,
AccountSgeData,
- Konnector,
- SgeStore,
Trigger,
} from 'models'
import AccountService from 'services/account.service'
@@ -25,13 +24,11 @@ export default class ConnectionService {
public async connectNewUser(
konnectorId: string,
- eglAuthData?: AccountAuthData,
- sgeAuthData?: SgeStore
+ authData: AccountEGLData | AccountSgeData | AccountGRDFData
): Promise<{ account: Account; trigger: Trigger }> {
// Retrieve konnector
const konnectorService = new KonnectorService(this._client)
- const konnector: Konnector | null =
- await konnectorService.getKonnector(konnectorId)
+ const konnector = await konnectorService.getKonnector(konnectorId)
if (!konnector?.slug) {
const errorMessage = `Could not find konnector for ${konnectorId}`
logStack('error', errorMessage)
@@ -39,29 +36,9 @@ export default class ConnectionService {
Sentry.captureException(errorMessage)
throw new Error(errorMessage)
}
- // Creation of the account linked to the konnector retrieved
- let accountAuthData: AccountAuthData | AccountSgeData
- if (eglAuthData) {
- accountAuthData = {
- login: eglAuthData.login,
- password: eglAuthData.password,
- } as AccountAuthData
- } else {
- // No login and password for Sge account
- accountAuthData = {
- pointId: sgeAuthData?.pdl ? sgeAuthData.pdl.toString() : '',
- firstname: sgeAuthData?.firstName,
- lastname: sgeAuthData?.lastName,
- address: sgeAuthData?.address,
- postalCode: sgeAuthData?.zipCode ? sgeAuthData.zipCode.toString() : '',
- city: sgeAuthData?.city,
- } as AccountSgeData
- }
+
const accountService = new AccountService(this._client)
- const account: Account = await accountService.createAccount(
- konnector,
- accountAuthData
- )
+ const account = await accountService.createAccount(konnector, authData)
if (!account?._id) {
const errorMessage = `Error during account creation`
logStack('error', errorMessage)
@@ -71,10 +48,7 @@ export default class ConnectionService {
}
// creation of the trigger for the konnector retrieve and the created account
const triggersServices = new TriggerService(this._client)
- const trigger: Trigger = await triggersServices.createTrigger(
- account,
- konnector
- )
+ const trigger = await triggersServices.createTrigger(account, konnector)
if (!trigger) {
const errorMessage = `Error during trigger creation`
logStack('error', errorMessage)
diff --git a/src/services/fluid.service.spec.ts b/src/services/fluid.service.spec.ts
index a21c59d1b82087d3d46a3a7c6cf55d8080cb5eed..8de4bf3ba466ab01c64883ba3becd9418b7ff858 100644
--- a/src/services/fluid.service.spec.ts
+++ b/src/services/fluid.service.spec.ts
@@ -128,7 +128,7 @@ describe('Fluid service', () => {
isUpdating: false,
konnectorConfig: {
name: 'GRDF',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.GAS,
siteLink: 'https://monespace.grdf.fr/creation-particulier',
activation: '',
@@ -217,7 +217,7 @@ describe('Fluid service', () => {
isUpdating: false,
konnectorConfig: {
name: 'GRDF',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.GAS,
siteLink: 'https://monespace.grdf.fr/creation-particulier',
activation: '',
@@ -306,7 +306,7 @@ describe('Fluid service', () => {
isUpdating: false,
konnectorConfig: {
name: 'GRDF',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.GAS,
siteLink: 'https://monespace.grdf.fr/creation-particulier',
activation: '',
@@ -395,7 +395,7 @@ describe('Fluid service', () => {
isUpdating: false,
konnectorConfig: {
name: 'GRDF',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.GAS,
siteLink: 'https://monespace.grdf.fr/creation-particulier',
activation: '',
@@ -485,7 +485,7 @@ describe('Fluid service', () => {
isUpdating: false,
konnectorConfig: {
name: 'GRDF',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.GAS,
siteLink: 'https://monespace.grdf.fr/creation-particulier',
activation: '',
diff --git a/src/services/fluid.service.ts b/src/services/fluid.service.ts
index b8a31df14e9814b17769180832839cb597619955..6803648785ed0e2a7b8a4257203199d45a193181 100644
--- a/src/services/fluid.service.ts
+++ b/src/services/fluid.service.ts
@@ -26,20 +26,18 @@ export default class FluidService {
konnector: Konnector | null,
state: TriggerState | null
): FluidState => {
+ console.log('🚀 ~ FluidService ~ state:', state)
if (!konnector) return FluidState.KONNECTOR_NOT_FOUND
- if (!state) {
- return FluidState.NOT_CONNECTED
- } else {
- switch (state.status) {
- case 'done':
- return FluidState.DONE
- case 'errored':
- if (state?.last_error === 'LOGIN_FAILED')
- return FluidState.ERROR_LOGIN_FAILED
- else return FluidState.ERROR
- default:
- return FluidState.NOT_CONNECTED
- }
+ if (!state) return FluidState.NOT_CONNECTED
+ switch (state.status) {
+ case 'done':
+ return FluidState.DONE
+ case 'errored':
+ if (state?.last_error === 'LOGIN_FAILED')
+ return FluidState.ERROR_LOGIN_FAILED
+ else return FluidState.ERROR
+ default:
+ return FluidState.NOT_CONNECTED
}
}
@@ -106,6 +104,7 @@ export default class FluidService {
waterTrigger ? triggerService.fetchTriggerState(waterTrigger) : null,
gasTrigger ? triggerService.fetchTriggerState(gasTrigger) : null,
])
+ console.log('🚀 ~ FluidService ~ gasStatus:', gasStatus)
const firstDataDates =
await consumptionService.fetchAllFirstDateData(allFluids)
const lastDataDates =
diff --git a/src/store/global/global.slice.spec.ts b/src/store/global/global.slice.spec.ts
index b4fc3d507a4612d127f3e2196de7e5012c5bdd2d..922f49c5768bb2fdab9e01738d6b75995eb6f5d2 100644
--- a/src/store/global/global.slice.spec.ts
+++ b/src/store/global/global.slice.spec.ts
@@ -44,7 +44,7 @@ const fluidStatus: FluidStatus[] = [
isUpdating: false,
konnectorConfig: {
name: 'Enedis',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.ELECTRICITY,
siteLink: 'https://mon-compte-particulier.enedis.fr/donnees/',
activation: 'https://mon-compte-particulier.enedis.fr/donnees/',
@@ -88,7 +88,7 @@ const fluidStatus: FluidStatus[] = [
isUpdating: false,
konnectorConfig: {
name: 'GRDF',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.GAS,
siteLink: 'https://monespace.grdf.fr/creation-particulier',
activation: '',
diff --git a/src/store/modal/modal.slice.spec.ts b/src/store/modal/modal.slice.spec.ts
index f9f98b9a361882b03d822a27eb47db29a16dab92..3ff8dd684ed589fb048e37ba1bbecc078be2f3e4 100644
--- a/src/store/modal/modal.slice.spec.ts
+++ b/src/store/modal/modal.slice.spec.ts
@@ -3,7 +3,6 @@ import { mockCustomPopup } from 'tests/__mocks__/customPopup.mock'
import { mockModalState } from 'tests/__mocks__/store'
import {
modalSlice,
- openConnectionModal,
openFeedbackModal,
openPartnersModal,
setCustomPopup,
@@ -78,16 +77,6 @@ describe('modal reducer', () => {
}
expect(state).toEqual(expectedResult)
})
- it('should handle openConnectionModal', () => {
- const state = modalSlice.reducer(
- mockModalState,
- openConnectionModal(true)
- )
- expect(state).toEqual({
- ...mockModalState,
- isConnectionModalOpen: true,
- })
- })
})
describe('customPopup', () => {
diff --git a/src/store/modal/modal.slice.ts b/src/store/modal/modal.slice.ts
index 7efe8c5a3c5d0e1e97b42f384428149ddf2664d2..e4e75f81a643b100073d0c312765a8542a48113d 100644
--- a/src/store/modal/modal.slice.ts
+++ b/src/store/modal/modal.slice.ts
@@ -9,7 +9,6 @@ const initialState: ModalState = {
description: '',
endDate: '',
},
- isConnectionModalOpen: false,
isFeedbacksOpen: false,
partnersIssueModal: {
enedis: false,
@@ -34,18 +33,12 @@ export const modalSlice = createSlice({
openPartnersModal: (state, action: OpenPartnersModalAction) => {
state.partnersIssueModal = action.payload
},
- openConnectionModal: (state, action: PayloadAction<boolean>) => {
- state.isConnectionModalOpen = action.payload
- },
+
setCustomPopup: (state, action: PayloadAction<CustomPopup>) => {
state.customPopupModal = action.payload
},
},
})
-export const {
- openFeedbackModal,
- openPartnersModal,
- setCustomPopup,
- openConnectionModal,
-} = modalSlice.actions
+export const { openFeedbackModal, openPartnersModal, setCustomPopup } =
+ modalSlice.actions
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 688abe38d86d2d8e3e76df9400246a5ca30cd1bb..9ff9de10a8f6304dd59a7b9f5556118704e8c5e7 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -9,6 +9,7 @@ html {
body {
background: $dark-light-2;
overflow: unset !important;
+ color: $grey-bright;
}
.column {
diff --git a/tests/__mocks__/fluidStatusData.mock.ts b/tests/__mocks__/fluidStatusData.mock.ts
index b9e9880732e2e22c19f93b99906c0326ab0a6394..eb1338c7612ecdcb31a3940c6203fc3dc4b4645a 100644
--- a/tests/__mocks__/fluidStatusData.mock.ts
+++ b/tests/__mocks__/fluidStatusData.mock.ts
@@ -167,7 +167,7 @@ export const fluidStatusConnectedData: FluidStatus[] = [
triggerState: null,
konnectorConfig: {
name: '',
- oauth: true,
+ oauth: false,
slug: FluidSlugType.GAS,
siteLink: '',
activation: '',
diff --git a/tests/__mocks__/mockConfig.mock.ts b/tests/__mocks__/mockConfig.mock.ts
index 65d5dfe2a1e22424bcb1d552a6be64a2622fbedc..e4b7ccdf785f0918e59830f4aeeaf49b8c1d058b 100644
--- a/tests/__mocks__/mockConfig.mock.ts
+++ b/tests/__mocks__/mockConfig.mock.ts
@@ -4,12 +4,11 @@ const mockConfig = {
fluidTypeId: 0,
name: 'enedis',
coefficient: 0.174,
-
startDate: '2021-08-01T00:00:00.000',
dataDelayOffset: 3,
konnectorConfig: {
name: 'Enedis',
- oauth: true,
+ oauth: false,
slug: 'enedissgegrandlyon',
siteLink: 'https://mon-compte-client.enedis.fr/',
activation: 'https://mon-compte-particulier.enedis.fr/donnees/',
@@ -37,7 +36,7 @@ const mockConfig = {
dataDelayOffset: 5,
konnectorConfig: {
name: 'GRDF',
- oauth: true,
+ oauth: false,
slug: 'grdfgrandlyon',
siteLink: 'https://monespace.grdf.fr/creation-particulier',
activation: '',
diff --git a/tests/__mocks__/store/modal.state.mock.ts b/tests/__mocks__/store/modal.state.mock.ts
index db9bdb4a10e2193464256b0b73dd1b0618af745c..1b568aaaf882b98c8ae2a102ca9870ed2fe891bc 100644
--- a/tests/__mocks__/store/modal.state.mock.ts
+++ b/tests/__mocks__/store/modal.state.mock.ts
@@ -8,7 +8,6 @@ export const mockModalState: ModalState = {
description: '',
endDate: '',
},
- isConnectionModalOpen: false,
isFeedbacksOpen: false,
partnersIssueModal: {
enedis: false,