From 43a0c1566ade5465651e693d79f9918bbf33b9d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20PAILHAREY?= <rpailharey@grandlyon.com>
Date: Wed, 25 Jan 2023 16:22:58 +0000
Subject: [PATCH] feat: updated onboarding for EPGL and GRDF
---
.vscode/settings.json | 1 +
.../icons/visu/onboarding/browser_egl.svg | 30 +
.../icons/visu/onboarding/browser_grdf.svg | 14 +
.../visu/{partnerSteps => onboarding}/egl.svg | 0
.../visu/onboarding/electricity_bill.svg | 31 +
src/assets/icons/visu/onboarding/gas_bill.svg | 38 +
.../{partnerSteps => onboarding}/grdf.svg | 0
.../icons/visu/onboarding/grdf_consent.svg | 56 +
.../icons/visu/onboarding/water_bill.svg | 36 +
.../visu/partnerSteps/electricity_bill.svg | 31 -
src/assets/icons/visu/partnerSteps/enedis.svg | 37 -
.../visu/partnerSteps/france_connect.svg | 28 -
.../icons/visu/partnerSteps/gas_bill.svg | 38 -
.../icons/visu/partnerSteps/water_bill.svg | 36 -
src/components/Connection/Connection.spec.tsx | 20 +-
src/components/Connection/Connection.tsx | 13 +-
src/components/Connection/ConnectionLogin.tsx | 59 -
.../ConnectionLoginNoPartnerAccount.tsx | 56 -
.../ConnectionLoginWithPartnerAccount.tsx | 81 --
.../ConnectionOAuthNoPartnerAccount.tsx | 68 -
.../ConnectionOAuthWithPartnerAccount.tsx | 90 --
.../Connection/EPGLConnect/EpglBill.tsx | 43 +
.../Connection/EPGLConnect/EpglForm.tsx | 30 +
.../Connection/EPGLConnect/EpglInit.tsx | 48 +
src/components/Connection/FormLogin.tsx | 67 +-
src/components/Connection/FormOAuth.tsx | 32 +-
.../Connection/GRDFConnect/GrdfBill.tsx | 42 +
.../Connection/GRDFConnect/GrdfForm.tsx | 47 +
.../GrdfInit.tsx} | 72 +-
.../PartnerConnectModal/EpglConnectModal.tsx | 136 ++
.../PartnerConnectModal/GrdfConnectModal.tsx | 172 +++
.../PartnerConnectModal.scss} | 16 +-
.../Steps/EpglCreateAccount.tsx | 23 +
.../Steps/EpglDoYouHaveAccount.tsx | 26 +
.../Steps/GrdfCreateAccount.tsx | 23 +
.../Steps/GrdfDoYouHaveAccount.tsx | 30 +
.../Steps/GrdfGiveConsent.tsx | 29 +
.../Steps}/stepDetail.scss | 12 +-
.../Connection/SGEConnect/SgeInit.tsx | 12 +-
.../__snapshots__/SgeInit.spec.tsx.snap | 8 +-
.../__snapshots__/Connection.spec.tsx.snap | 14 +-
src/components/Connection/auth.scss | 22 -
src/components/Connection/connection.scss | 90 ++
.../Connection/connectionLogin.scss | 82 --
.../Connection/connectionOAuth.scss | 71 -
src/components/Connection/formLogin.scss | 21 -
.../PartnerConnectionStepsModal.spec.tsx | 97 --
.../PartnerConnectionStepsModal.tsx | 116 --
.../StepDetail.spec.tsx | 30 -
.../StepDetail.tsx | 29 -
.../PartnerConnectionStepsModal.spec.tsx.snap | 1164 -----------------
.../__snapshots__/StepDetail.spec.tsx.snap | 50 -
src/locales/fr.json | 123 +-
src/models/step.model.ts | 6 +-
src/utils/steps.spec.ts | 36 -
src/utils/steps.ts | 60 -
tests/__mocks__/stepsData.mock.ts | 50 -
57 files changed, 1117 insertions(+), 2575 deletions(-)
create mode 100644 src/assets/icons/visu/onboarding/browser_egl.svg
create mode 100644 src/assets/icons/visu/onboarding/browser_grdf.svg
rename src/assets/icons/visu/{partnerSteps => onboarding}/egl.svg (100%)
create mode 100644 src/assets/icons/visu/onboarding/electricity_bill.svg
create mode 100644 src/assets/icons/visu/onboarding/gas_bill.svg
rename src/assets/icons/visu/{partnerSteps => onboarding}/grdf.svg (100%)
create mode 100644 src/assets/icons/visu/onboarding/grdf_consent.svg
create mode 100644 src/assets/icons/visu/onboarding/water_bill.svg
delete mode 100644 src/assets/icons/visu/partnerSteps/electricity_bill.svg
delete mode 100644 src/assets/icons/visu/partnerSteps/enedis.svg
delete mode 100644 src/assets/icons/visu/partnerSteps/france_connect.svg
delete mode 100644 src/assets/icons/visu/partnerSteps/gas_bill.svg
delete mode 100644 src/assets/icons/visu/partnerSteps/water_bill.svg
delete mode 100644 src/components/Connection/ConnectionLogin.tsx
delete mode 100644 src/components/Connection/ConnectionLoginNoPartnerAccount.tsx
delete mode 100644 src/components/Connection/ConnectionLoginWithPartnerAccount.tsx
delete mode 100644 src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx
delete mode 100644 src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx
create mode 100644 src/components/Connection/EPGLConnect/EpglBill.tsx
create mode 100644 src/components/Connection/EPGLConnect/EpglForm.tsx
create mode 100644 src/components/Connection/EPGLConnect/EpglInit.tsx
create mode 100644 src/components/Connection/GRDFConnect/GrdfBill.tsx
create mode 100644 src/components/Connection/GRDFConnect/GrdfForm.tsx
rename src/components/Connection/{ConnectionOAuth.tsx => GRDFConnect/GrdfInit.tsx} (55%)
create mode 100644 src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
create mode 100644 src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
rename src/components/{PartnerConnectionStepsModal/partnerConnectionStepModal.scss => Connection/PartnerConnectModal/PartnerConnectModal.scss} (70%)
create mode 100644 src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
create mode 100644 src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
create mode 100644 src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
create mode 100644 src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
create mode 100644 src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
rename src/components/{PartnerConnectionStepsModal => Connection/PartnerConnectModal/Steps}/stepDetail.scss (70%)
delete mode 100644 src/components/Connection/auth.scss
delete mode 100644 src/components/Connection/connectionLogin.scss
delete mode 100644 src/components/Connection/connectionOAuth.scss
delete mode 100644 src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.spec.tsx
delete mode 100644 src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.tsx
delete mode 100644 src/components/PartnerConnectionStepsModal/StepDetail.spec.tsx
delete mode 100644 src/components/PartnerConnectionStepsModal/StepDetail.tsx
delete mode 100644 src/components/PartnerConnectionStepsModal/__snapshots__/PartnerConnectionStepsModal.spec.tsx.snap
delete mode 100644 src/components/PartnerConnectionStepsModal/__snapshots__/StepDetail.spec.tsx.snap
delete mode 100644 src/utils/steps.spec.ts
delete mode 100644 src/utils/steps.ts
delete mode 100644 tests/__mocks__/stepsData.mock.ts
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 76eee681f..ec02b433c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -63,6 +63,7 @@
"Enedis",
"ENEDIS",
"enedissgegrandlyon",
+ "Epgl",
"firstname",
"fluidchart",
"fluidchartslide",
diff --git a/src/assets/icons/visu/onboarding/browser_egl.svg b/src/assets/icons/visu/onboarding/browser_egl.svg
new file mode 100644
index 000000000..df9f9e889
--- /dev/null
+++ b/src/assets/icons/visu/onboarding/browser_egl.svg
@@ -0,0 +1,30 @@
+<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="M13.717 44.0593C13.4417 44.3364 13.0378 44.4852 12.5634 44.4852H11V39.8918H12.5634C13.0378 39.8918 13.4417 40.0406 13.717 40.3178C14.1914 40.7954 14.1654 41.4985 14.1654 42.1375C14.1654 42.7765 14.1905 43.5827 13.717 44.0602M13.3769 40.667C13.1402 40.4219 12.832 40.3314 12.4793 40.3314H11.487V44.0476H12.4803C12.8329 44.0476 13.1402 43.9571 13.3779 43.7121C13.6919 43.3833 13.6793 42.6996 13.6793 42.1375C13.6793 41.5753 13.6919 40.9957 13.3779 40.667" fill="#1A171B"/>
+<path d="M16.7105 44.5233C15.7878 44.5233 15.1211 43.8843 15.1211 42.9682V39.891H15.6081V42.9293C15.6081 43.6256 16.0438 44.0837 16.7105 44.0837C17.3772 44.0837 17.8198 43.6256 17.8198 42.9293V39.891H18.3067V42.9682C18.3067 43.8843 17.6333 44.5233 16.7105 44.5233Z" fill="#1A171B"/>
+<path d="M22.1056 43.9952C21.779 44.3375 21.3491 44.5242 20.8302 44.5242C20.3113 44.5242 19.92 44.3433 19.5992 44.0214C19.1384 43.5565 19.1509 42.9827 19.1509 42.1891C19.1509 41.3955 19.1384 40.8217 19.5992 40.3568C19.92 40.0339 20.3171 39.854 20.8302 39.854C21.465 39.854 21.8177 40.0281 22.2274 40.4414L21.6244 41.0483C21.3684 40.7906 21.1819 40.6544 20.8302 40.6544C20.5867 40.6544 20.3877 40.7507 20.2601 40.8995C20.0872 41.093 20.0427 41.306 20.0427 42.1901C20.0427 43.0741 20.0872 43.293 20.2601 43.4865C20.3886 43.6353 20.5867 43.7248 20.8302 43.7248C21.0998 43.7248 21.2921 43.6285 21.4389 43.4671C21.5868 43.3056 21.638 43.0673 21.638 42.8417V42.6803H20.8302V41.9314H22.5288V42.5898C22.5288 43.2541 22.4264 43.6606 22.1056 43.9961" fill="#1A171B"/>
+<path d="M25.6816 44.4852L24.7907 42.6529H24.1501V44.4852H23.2593V39.8918H25.0478C25.9773 39.8918 26.528 40.5308 26.528 41.2982C26.528 41.943 26.1367 42.3437 25.6951 42.5041L26.7145 44.4843H25.6826L25.6816 44.4852ZM24.9898 40.6923H24.1501V41.905H24.9898C25.3811 41.905 25.6372 41.6532 25.6372 41.2991C25.6372 40.9451 25.3811 40.6932 24.9898 40.6932" fill="#1A171B"/>
+<path d="M29.919 44.4852L29.6495 43.6722H28.0281L27.7528 44.4852H26.8232L28.4832 39.8918H29.1818L30.8485 44.4852H29.919ZM28.8552 41.2466L28.2784 42.9175H29.4127L28.8552 41.2466Z" fill="#1A171B"/>
+<path d="M33.9814 44.4852L32.1736 41.6658V44.4852H31.2827V39.8918H32.0779L33.8848 42.7045V39.8918H34.7756V44.4852H33.9814Z" fill="#1A171B"/>
+<path d="M38.5637 44.0466C38.2623 44.3501 37.8333 44.4852 37.3588 44.4852H35.7114V39.8918H37.3588C37.8333 39.8918 38.2623 40.028 38.5637 40.3305C39.0768 40.8469 39.0256 41.4791 39.0256 42.1686C39.0256 42.8582 39.0768 43.5302 38.5637 44.0456M37.9424 40.9753C37.7888 40.7885 37.584 40.6913 37.2757 40.6913H36.6033V43.6848H37.2757C37.583 43.6848 37.7888 43.5876 37.9424 43.4008C38.1086 43.1947 38.1347 42.8659 38.1347 42.1686C38.1347 41.4713 38.1086 41.1815 37.9424 40.9753Z" fill="#1A171B"/>
+<path d="M39.8062 44.4852V39.8918H40.697V43.6848H42.7667V44.4852H39.8062Z" fill="#1A171B"/>
+<path d="M44.5935 42.6014V44.4852H43.7094V42.6014L42.3374 39.8918H43.3056L44.1578 41.7426L44.9974 39.8918H45.9646L44.5935 42.6014Z" fill="#1A171B"/>
+<path d="M49.086 44.0204C48.7652 44.3433 48.3749 44.5233 47.8551 44.5233C47.3352 44.5233 46.9381 44.3424 46.6183 44.0204C46.1564 43.5556 46.17 42.9818 46.17 42.1881C46.17 41.3945 46.1574 40.8207 46.6183 40.3558C46.9391 40.033 47.3362 39.853 47.8551 39.853C48.3739 39.853 48.7652 40.0339 49.086 40.3558C49.5479 40.8207 49.5411 41.3945 49.5411 42.1881C49.5411 42.9818 49.5479 43.5556 49.086 44.0204ZM48.4261 40.8976C48.2976 40.7488 48.0995 40.6525 47.856 40.6525C47.6125 40.6525 47.4077 40.7488 47.2792 40.8976C47.1062 41.0911 47.0618 41.3041 47.0618 42.1881C47.0618 43.0722 47.1062 43.2852 47.2792 43.4787C47.4077 43.6275 47.6125 43.7238 47.856 43.7238C48.0995 43.7238 48.2986 43.6275 48.4261 43.4787C48.5991 43.2852 48.6503 43.0722 48.6503 42.1881C48.6503 41.3041 48.5991 41.0911 48.4261 40.8976Z" fill="#1A171B"/>
+<path d="M53.0214 44.4852L51.2136 41.6658V44.4852H50.3228V39.8918H51.118L52.9248 42.7045V39.8918H53.8157V44.4852H53.0214Z" fill="#1A171B"/>
+<path d="M23.6347 28.229C23.4926 27.9528 23.2994 27.6445 23.0578 27.3099C22.9139 27.129 22.7206 26.9073 22.482 26.6486C22.1467 26.3296 21.9051 26.1224 21.7467 26.0164C21.4926 25.8248 21.2819 25.6799 21.1041 25.572C20.794 25.3843 20.3795 25.1985 19.8712 25.0186C19.2074 24.7959 18.5224 24.6782 17.8344 24.6685H17.7021C17.0015 24.6685 16.2894 24.7861 15.5851 25.0186C15.0768 25.1985 14.6623 25.3843 14.3531 25.572C14.1744 25.6789 13.9589 25.8287 13.7135 26.0145C13.5521 26.1215 13.3106 26.3296 12.9724 26.6515C12.7366 26.9073 12.5434 27.129 12.3975 27.3119C12.1559 27.6455 11.9627 27.9538 11.8226 28.228C11.296 29.2385 11.0303 30.2957 11.0303 31.3694V31.4501C11.0303 32.5404 11.3008 33.6111 11.8342 34.6323C12.0042 34.9474 12.2294 35.283 12.5038 35.6292C12.7521 35.9511 13.0758 36.2818 13.469 36.6134C13.6922 36.7934 13.8942 36.9431 14.071 37.0589C15.1899 37.7834 16.4247 38.1511 17.7407 38.1511C18.7176 38.1511 19.6867 37.9332 20.622 37.5024C20.9863 37.3147 21.3467 37.0939 21.6906 36.8449C21.8781 36.7185 22.1042 36.5269 22.3593 36.2789C22.5313 36.1349 22.6192 35.9891 22.6192 35.8471V35.8082C22.6192 35.7255 22.5931 35.6467 22.5419 35.5728L21.6501 34.6615C21.5244 34.5049 21.3882 34.4252 21.2471 34.4252C21.1476 34.4252 21.05 34.4612 20.9602 34.5312L20.9544 34.536C20.85 34.6411 20.7399 34.7432 20.6259 34.8405C20.3891 35.0437 20.1688 35.2032 19.9717 35.3151C19.2673 35.709 18.5263 35.9093 17.7687 35.9093C16.7764 35.9093 15.8682 35.6166 15.0662 35.0379C14.9271 34.9426 14.7338 34.7695 14.4923 34.5254C14.299 34.3124 14.1483 34.1295 14.0459 33.9836C13.7376 33.5226 13.5154 33.0364 13.3821 32.5365H23.9951C24.2782 32.5462 24.427 32.3964 24.427 32.1046V30.7411C24.427 30.639 24.4086 30.5515 24.3719 30.4814C24.2637 29.716 24.0173 28.9574 23.6366 28.229M17.703 26.8966C17.8615 26.8966 18.0064 26.9053 18.1485 26.9229C18.5755 26.9666 19.0084 27.0736 19.4335 27.2389C20.5563 27.7223 21.3728 28.5305 21.8597 29.6402C21.9457 29.8532 22.0192 30.073 22.0781 30.2957H13.3801C13.4381 30.0739 13.5115 29.8541 13.5975 29.6412C14.0845 28.5305 14.9019 27.7223 16.0237 27.2389C16.589 27.0114 17.1542 26.8966 17.7021 26.8966" fill="#E20025"/>
+<path d="M38.9944 31.4558C38.9944 29.8637 38.4987 28.4263 37.5209 27.1814C37.2281 26.8245 36.8909 26.4851 36.517 26.1709C36.1769 25.9015 35.8619 25.6827 35.5798 25.5232C34.5478 24.9523 33.457 24.6625 32.3371 24.6625H32.2579C31.2694 24.6625 30.2916 24.8939 29.3524 25.3491C29.0954 25.4648 28.7843 25.6506 28.4268 25.9025C28.2017 26.0562 27.9321 26.2828 27.6219 26.5774C27.3659 26.8342 27.1717 27.0472 27.0451 27.2116C26.8132 27.5257 26.6238 27.8107 26.4837 28.0606C25.8972 29.1158 25.5996 30.2275 25.5996 31.3634V31.4432C25.5996 32.4011 25.8112 33.3533 26.2296 34.2753C26.8161 35.4997 27.6992 36.48 28.8548 37.1871C29.9302 37.8222 31.08 38.1441 32.2704 38.1441H38.549C38.5577 38.1441 38.5673 38.1441 38.576 38.1441C38.7267 38.1441 38.8398 38.1042 38.9103 38.0254C38.9789 37.9486 39.007 37.8368 38.9934 37.6977V31.4548L38.9944 31.4558ZM36.7817 31.4957V35.915H32.2975C31.2704 35.915 30.3177 35.5727 29.4664 34.8996C29.2896 34.7489 29.0857 34.5437 28.8626 34.2918C28.1669 33.4243 27.8132 32.4527 27.8132 31.4013C27.8132 30.8324 27.9234 30.2634 28.1408 29.712C28.3418 29.2121 28.6326 28.756 29.0046 28.3553L29.0713 28.2872C29.2732 28.0752 29.4413 27.9206 29.5689 27.8252C30.396 27.2038 31.3129 26.8877 32.2965 26.8877C33.1748 26.8877 34 27.1367 34.7469 27.6259C34.9401 27.7581 35.1614 27.9361 35.402 28.152C35.6348 28.3961 35.7943 28.578 35.888 28.7074C36.0716 28.9622 36.2165 29.2063 36.3218 29.4339C36.6262 30.0378 36.7808 30.7312 36.7808 31.4928" fill="#E20025"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.6833 24.7734C53.7538 24.8464 53.7876 24.9534 53.7828 25.0895H53.7838V27.4878H51.5701V25.0467C51.5701 24.8688 51.6445 24.6558 51.9991 24.6558H53.3403C53.4929 24.6558 53.6079 24.6956 53.6833 24.7734ZM51.432 32.5228C51.3021 33.0328 51.0811 33.5209 50.7711 33.9816C50.6677 34.1295 50.5208 34.3074 50.3256 34.5224C50.0812 34.7684 49.887 34.9416 49.7488 35.0369C48.9478 35.6146 48.0521 35.9073 47.0869 35.9073C46.1216 35.9073 45.2259 35.6146 44.4239 35.0359C44.2867 34.9416 44.0925 34.7684 43.85 34.5243C43.6568 34.3113 43.506 34.1285 43.4036 33.9826C42.8731 33.1948 42.6036 32.3293 42.6036 31.4092V25.0613C42.6036 24.8824 42.5292 24.6694 42.1736 24.6694H40.8325C40.6788 24.6694 40.5639 24.7093 40.4885 24.7871C40.418 24.861 40.3851 24.967 40.389 25.1012V31.4773C40.389 32.5607 40.6595 33.6218 41.1929 34.6323C41.3639 34.9484 41.589 35.2839 41.8625 35.6292C42.1118 35.952 42.4364 36.2827 42.8277 36.6134C43.05 36.7923 43.2529 36.9421 43.4307 37.0588C44.5495 37.7834 45.7796 38.151 47.0869 38.151C48.3942 38.151 49.6242 37.7834 50.743 37.0588C50.9208 36.9421 51.117 36.7972 51.3469 36.6124C51.7373 36.2817 52.0619 35.9511 52.3112 35.6292C52.5856 35.282 52.8108 34.9464 52.9808 34.6313C53.3381 33.9485 53.5771 33.2425 53.6959 32.5228H51.432Z" fill="#E20025"/>
+<path d="M71.0002 32.6385H47.1489V27.3721H71.0002V32.6395V32.6385ZM47.3789 32.407H70.7702V27.6035H47.3789V32.407Z" fill="#E4212C"/>
+<path d="M48.7427 31.5153C48.7146 31.5153 48.6953 31.4959 48.6953 31.4677V28.3458C48.6953 28.3175 48.7146 28.2981 48.7427 28.2981H49.9833C50.678 28.2981 51.0964 28.7192 51.0964 29.3339C51.0964 29.9485 50.6732 30.3648 49.9833 30.3648H49.4142C49.3949 30.3648 49.3862 30.3745 49.3862 30.394V31.4667C49.3862 31.4949 49.3668 31.5144 49.3388 31.5144H48.7417L48.7427 31.5153ZM50.4055 29.3358C50.4055 29.0752 50.2316 28.9001 49.9408 28.9001H49.4142C49.3949 28.9001 49.3862 28.9098 49.3862 28.9283V29.7375C49.3862 29.756 49.3958 29.7657 49.4142 29.7657H49.9408C50.2316 29.7657 50.4055 29.5955 50.4055 29.3358Z" fill="#E4212C"/>
+<path d="M51.5249 30.3337V28.3477C51.5249 28.3195 51.5433 28.3 51.5713 28.3H52.1684C52.1964 28.3 52.2158 28.3195 52.2158 28.3477V30.3531C52.2158 30.7363 52.4274 30.9542 52.752 30.9542C53.0767 30.9542 53.2825 30.7363 53.2825 30.3531V28.3477C53.2825 28.3195 53.3018 28.3 53.3298 28.3H53.926C53.955 28.3 53.9733 28.3195 53.9733 28.3477V30.3337C53.9733 31.1331 53.466 31.5678 52.752 31.5678C52.038 31.5678 51.5259 31.1331 51.5259 30.3337H51.5249Z" fill="#E4212C"/>
+<path d="M54.5708 28.3465C54.5708 28.3183 54.5901 28.2988 54.6181 28.2988H55.8636C56.5583 28.2988 56.883 28.6441 56.883 29.1547C56.883 29.5048 56.7236 29.7227 56.5119 29.8413V29.851C56.7236 29.9318 56.939 30.1963 56.939 30.5795C56.939 31.2136 56.5206 31.5161 55.8298 31.5161H54.6181C54.5901 31.5161 54.5708 31.4966 54.5708 31.4684V28.3465ZM55.7786 29.6147C56.0424 29.6147 56.197 29.4727 56.197 29.2364C56.197 29 56.0424 28.8629 55.7786 28.8629H55.2906C55.2713 28.8629 55.2626 28.8726 55.2626 28.8911V29.5865C55.2626 29.605 55.2723 29.6147 55.2906 29.6147H55.7786ZM55.2906 30.9529H55.8172C56.0994 30.9529 56.2491 30.8012 56.2491 30.5513C56.2491 30.3013 56.0984 30.1496 55.8172 30.1496H55.2906C55.2713 30.1496 55.2626 30.1593 55.2626 30.1778V30.9257C55.2626 30.9442 55.2723 30.9539 55.2906 30.9539V30.9529Z" fill="#E4212C"/>
+<path d="M57.4385 28.3465C57.4385 28.3183 57.4578 28.2988 57.4858 28.2988H58.083C58.111 28.2988 58.1303 28.3183 58.1303 28.3465V30.8674C58.1303 30.8868 58.14 30.8956 58.1583 30.8956H59.568C59.5961 30.8956 59.6154 30.915 59.6154 30.9432V31.4684C59.6154 31.4966 59.5961 31.5161 59.568 31.5161H57.4868C57.4588 31.5161 57.4394 31.4966 57.4394 31.4684V28.3465H57.4385Z" fill="#E4212C"/>
+<path d="M60.0234 28.3465C60.0234 28.3183 60.0428 28.2988 60.0708 28.2988H60.6679C60.6959 28.2988 60.7153 28.3183 60.7153 28.3465V31.4684C60.7153 31.4966 60.6959 31.5161 60.6679 31.5161H60.0708C60.0428 31.5161 60.0234 31.4966 60.0234 31.4684V28.3465Z" fill="#E4212C"/>
+<path d="M63.5404 31.7467C63.521 31.7662 63.493 31.77 63.4698 31.7467L63.1452 31.4199C62.9568 31.5143 62.7365 31.5668 62.4968 31.5668C61.9384 31.5668 61.4958 31.3071 61.3316 30.7868C61.262 30.5641 61.2427 30.3851 61.2427 29.9066C61.2427 29.4281 61.262 29.2492 61.3316 29.0265C61.4958 28.5061 61.9384 28.2465 62.4968 28.2465C63.0553 28.2465 63.493 28.5071 63.6621 29.0265C63.7326 29.2492 63.752 29.4281 63.752 29.9066C63.752 30.3851 63.7326 30.5641 63.6621 30.7868C63.6389 30.8578 63.6109 30.9191 63.5819 30.9813L63.9153 31.312C63.9346 31.3314 63.9346 31.3596 63.9153 31.3781L63.5404 31.7467ZM62.6659 30.9385L62.464 30.7352C62.4447 30.7158 62.4408 30.6924 62.464 30.6691L62.8398 30.3102C62.8679 30.2869 62.8911 30.2908 62.9094 30.3102L63.036 30.4376C63.0505 30.3287 63.0553 30.1682 63.0553 29.9076C63.0553 29.4874 63.0418 29.326 63.0041 29.2132C62.9336 28.9905 62.7597 28.8582 62.4968 28.8582C62.234 28.8582 62.0591 28.9905 61.9896 29.2132C61.9519 29.326 61.9384 29.4874 61.9384 29.9076C61.9384 30.3277 61.9519 30.4892 61.9896 30.603C62.0591 30.8257 62.2331 30.958 62.4968 30.958C62.5577 30.958 62.6147 30.9531 62.6659 30.9385Z" fill="#E4212C"/>
+<path d="M64.2651 30.3337V28.3477C64.2651 28.3195 64.2835 28.3 64.3125 28.3H64.9086C64.9367 28.3 64.956 28.3195 64.956 28.3477V30.3531C64.956 30.7363 65.1676 30.9542 65.4922 30.9542C65.8169 30.9542 66.0227 30.7363 66.0227 30.3531V28.3477C66.0227 28.3195 66.0411 28.3 66.07 28.3H66.6662C66.6952 28.3 66.7135 28.3195 66.7135 28.3477V30.3337C66.7135 31.1331 66.2063 31.5678 65.4922 31.5678C64.7782 31.5678 64.2661 31.1331 64.2661 30.3337H64.2651Z" fill="#E4212C"/>
+<path d="M67.312 28.3465C67.312 28.3183 67.3313 28.2988 67.3594 28.2988H69.4078C69.4358 28.2988 69.4551 28.3183 69.4551 28.3465V28.8522C69.4551 28.8814 69.4358 28.8999 69.4078 28.8999H68.0309C68.0116 28.8999 68.0029 28.9096 68.0029 28.9281V29.567C68.0029 29.5865 68.0125 29.5953 68.0309 29.5953H69.1778C69.2058 29.5953 69.2242 29.6147 69.2242 29.6429V30.1447C69.2242 30.173 69.2058 30.1924 69.1778 30.1924H68.0309C68.0116 30.1924 68.0029 30.2021 68.0029 30.2206V30.8868C68.0029 30.9063 68.0125 30.915 68.0309 30.915H69.4078C69.4358 30.915 69.4551 30.9345 69.4551 30.9627V31.4684C69.4551 31.4966 69.4358 31.5161 69.4078 31.5161H67.3594C67.3313 31.5161 67.312 31.4966 67.312 31.4684V28.3465Z" fill="#E4212C"/>
+</svg>
diff --git a/src/assets/icons/visu/onboarding/browser_grdf.svg b/src/assets/icons/visu/onboarding/browser_grdf.svg
new file mode 100644
index 000000000..06f210b12
--- /dev/null
+++ b/src/assets/icons/visu/onboarding/browser_grdf.svg
@@ -0,0 +1,14 @@
+<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/partnerSteps/egl.svg b/src/assets/icons/visu/onboarding/egl.svg
similarity index 100%
rename from src/assets/icons/visu/partnerSteps/egl.svg
rename to src/assets/icons/visu/onboarding/egl.svg
diff --git a/src/assets/icons/visu/onboarding/electricity_bill.svg b/src/assets/icons/visu/onboarding/electricity_bill.svg
new file mode 100644
index 000000000..716311549
--- /dev/null
+++ b/src/assets/icons/visu/onboarding/electricity_bill.svg
@@ -0,0 +1,31 @@
+<svg width="176" height="186" viewBox="0 0 176 186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_115_37229)">
+<path d="M56.8017 20.6657L55.3012 20.4406L54.6783 21.8278L36.6037 62.0787L36.3709 62.597L36.4445 63.1599L42.0312 105.916L21.4536 150.539L20.3376 152.959L22.9672 153.354L122.529 168.293L124.014 168.516L124.644 167.149L145.465 122L145.707 121.475L145.632 120.901L140.044 78.1339L157.886 38.4013L158.966 35.9956L156.364 35.6051L56.8017 20.6657Z" stroke="#D87B39" stroke-width="4"/>
+<path d="M44.088 106.225L143.65 121.165L122.83 166.313L23.2679 151.374L44.088 106.225Z" fill="white"/>
+<path d="M44.0879 106.226L143.65 121.165L137.988 77.8353L38.426 62.8959L44.0879 106.226Z" fill="#F5E3D8"/>
+<path d="M56.5009 22.6447L156.063 37.5841L137.988 77.835L38.4263 62.8956L56.5009 22.6447Z" fill="white"/>
+<mask id="mask0_115_37229" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="37" y="109" width="94" height="42">
+<path d="M51.9463 109.819L130.854 121.659L122.497 142.152L91.0476 137.433L84.9867 150.499L37.0118 143.3L51.9463 109.819Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask0_115_37229)">
+<rect width="93.2376" height="3.81911" transform="matrix(0.988929 0.14839 -0.1469 0.989151 44.4486 112.556)" fill="#D87B39"/>
+<path d="M38.9602 123.4L127.187 136.639L125.924 140.311L38.3991 127.178L38.9602 123.4Z" fill="#D87B39"/>
+<rect width="93.2376" height="3.81904" transform="matrix(0.988929 0.14839 -0.1469 0.989151 34.9278 134.78)" fill="#D87B39"/>
+</g>
+<mask id="mask1_115_37229" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="67" width="87" height="50">
+<path d="M129.289 79.9088L47.2962 67.6058L51.8517 104.011L133.844 116.314L129.289 79.9088Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask1_115_37229)">
+<rect width="93.2376" height="3.8191" transform="matrix(0.988929 0.14839 -0.1469 0.989151 45.0519 82.7158)" fill="#D87B39"/>
+<path d="M42.6775 70.3994L81.711 76.2564L83.2832 81.1116L42.0064 74.918L42.6775 70.3994Z" fill="#D87B39"/>
+<rect width="93.2376" height="3.81909" transform="matrix(0.988929 0.14839 -0.1469 0.989151 46.1771 94.4697)" fill="#D87B39"/>
+</g>
+<path d="M91.9717 62.7591C99.2172 63.8463 105.871 58.0984 107.041 50.2201C108.211 42.3417 103.517 34.8911 96.2718 33.8039C89.0263 32.7167 82.3725 38.4646 81.2025 46.343C80.0325 54.2213 84.7262 61.6719 91.9717 62.7591Z" fill="#D87B39" stroke="#D87B39" stroke-width="2"/>
+<path d="M81.5198 46.9077L84.1017 50.0529L87.1889 45.69L89.0697 53.5562L94.3515 42.628L95.7315 53.8663L99.916 46.2208L101.66 53.9813L104.908 49.5655L106.348 52.1845" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_115_37229">
+<rect width="153.345" height="158.97" fill="white" transform="matrix(0.988929 0.14839 -0.1469 0.989151 23.8526 5.67773)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/onboarding/gas_bill.svg b/src/assets/icons/visu/onboarding/gas_bill.svg
new file mode 100644
index 000000000..cf6251c42
--- /dev/null
+++ b/src/assets/icons/visu/onboarding/gas_bill.svg
@@ -0,0 +1,38 @@
+<svg width="176" height="186" viewBox="0 0 176 186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_115_37284)">
+<path d="M56.8017 20.6657L55.3012 20.4406L54.6783 21.8278L36.6037 62.0787L36.3709 62.597L36.4445 63.1599L42.0312 105.916L21.4536 150.539L20.3376 152.959L22.9672 153.354L122.529 168.293L124.014 168.516L124.644 167.149L145.465 122L145.707 121.475L145.632 120.901L140.044 78.1339L157.886 38.4013L158.966 35.9956L156.364 35.6051L56.8017 20.6657Z" stroke="#1B7E6D" stroke-width="4"/>
+<path d="M44.088 106.225L143.65 121.165L122.83 166.313L23.2678 151.374L44.088 106.225Z" fill="white"/>
+<path d="M44.0879 106.226L143.65 121.165L137.988 77.8353L38.426 62.8959L44.0879 106.226Z" fill="#C9F5EE"/>
+<path d="M56.5009 22.6447L156.063 37.5841L137.988 77.835L38.4263 62.8956L56.5009 22.6447Z" fill="white"/>
+<mask id="mask0_115_37284" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="37" y="109" width="94" height="42">
+<path d="M51.9463 109.819L130.854 121.659L122.497 142.152L91.0476 137.433L84.9867 150.499L37.0118 143.3L51.9463 109.819Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask0_115_37284)">
+<rect width="93.2376" height="3.8191" transform="matrix(0.988929 0.14839 -0.1469 0.989151 44.4486 112.556)" fill="#45D1B8"/>
+<path d="M38.9602 123.4L127.187 136.639L125.924 140.311L38.3991 127.178L38.9602 123.4Z" fill="#45D1B8"/>
+<rect width="93.2376" height="3.81906" transform="matrix(0.988929 0.14839 -0.1469 0.989151 34.9278 134.78)" fill="#45D1B8"/>
+</g>
+<mask id="mask1_115_37284" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="67" width="87" height="50">
+<path d="M129.289 79.9088L47.2962 67.6058L51.8517 104.011L133.844 116.314L129.289 79.9088Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask1_115_37284)">
+<rect width="93.2376" height="3.81909" transform="matrix(0.988929 0.14839 -0.1469 0.989151 45.0518 82.7158)" fill="#45D1B8"/>
+<path d="M42.6775 70.3994L81.7109 76.2564L83.2832 81.1116L42.0064 74.918L42.6775 70.3994Z" fill="#45D1B8"/>
+<rect width="93.2376" height="3.81909" transform="matrix(0.988929 0.14839 -0.1469 0.989151 46.1771 94.4697)" fill="#45D1B8"/>
+</g>
+<g clip-path="url(#clip1_115_37284)">
+<ellipse cx="98.9304" cy="53.3955" rx="16.36" ry="16.3672" fill="#45D1B8" stroke="#45D1B8"/>
+<path d="M93.2044 58.8058C95.2876 58.8058 96.9763 57.1163 96.9763 55.0322C96.9763 52.9482 95.2876 51.2587 93.2044 51.2587C91.1213 51.2587 89.4325 52.9482 89.4325 55.0322C89.4325 57.1163 91.1213 58.8058 93.2044 58.8058Z" fill="white" stroke="#45D1B8"/>
+<ellipse cx="101.384" cy="61.5791" rx="1.636" ry="1.63672" fill="white" stroke="#45D1B8"/>
+<path d="M100.566 55.5324C104.005 55.5324 106.792 52.7437 106.792 49.3037C106.792 45.8637 104.005 43.0751 100.566 43.0751C97.128 43.0751 94.3405 45.8637 94.3405 49.3037C94.3405 52.7437 97.128 55.5324 100.566 55.5324Z" fill="white" stroke="#45D1B8"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_115_37284">
+<rect width="153.345" height="158.97" fill="white" transform="matrix(0.988929 0.14839 -0.1469 0.989151 23.8526 5.67773)"/>
+</clipPath>
+<clipPath id="clip1_115_37284">
+<rect width="36" height="36" fill="white" transform="translate(80.9344 35.3916)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/partnerSteps/grdf.svg b/src/assets/icons/visu/onboarding/grdf.svg
similarity index 100%
rename from src/assets/icons/visu/partnerSteps/grdf.svg
rename to src/assets/icons/visu/onboarding/grdf.svg
diff --git a/src/assets/icons/visu/onboarding/grdf_consent.svg b/src/assets/icons/visu/onboarding/grdf_consent.svg
new file mode 100644
index 000000000..0fe88893c
--- /dev/null
+++ b/src/assets/icons/visu/onboarding/grdf_consent.svg
@@ -0,0 +1,56 @@
+<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/assets/icons/visu/onboarding/water_bill.svg b/src/assets/icons/visu/onboarding/water_bill.svg
new file mode 100644
index 000000000..335b8cad3
--- /dev/null
+++ b/src/assets/icons/visu/onboarding/water_bill.svg
@@ -0,0 +1,36 @@
+<svg width="176" height="186" viewBox="0 0 176 186" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_115_37337)">
+<path d="M56.8017 20.6667L55.3012 20.4416L54.6783 21.8287L36.6037 62.0796L36.3709 62.598L36.4445 63.1608L42.0312 105.917L21.4536 150.54L20.3376 152.96L22.9672 153.355L122.529 168.294L124.014 168.517L124.644 167.15L145.465 122.001L145.707 121.475L145.632 120.902L140.044 78.1349L157.886 38.4023L158.966 35.9966L156.364 35.6061L56.8017 20.6667Z" stroke="#1761A4" stroke-width="4"/>
+<path d="M44.088 106.226L143.65 121.165L122.83 166.314L23.2678 151.375L44.088 106.226Z" fill="white"/>
+<path d="M44.0879 106.227L143.65 121.166L137.988 77.8363L38.426 62.8969L44.0879 106.227Z" fill="#D7E6F4"/>
+<path d="M56.5009 22.6457L156.063 37.5851L137.988 77.836L38.4263 62.8966L56.5009 22.6457Z" fill="white"/>
+<mask id="mask0_115_37337" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="37" y="109" width="94" height="42">
+<path d="M51.9463 109.819L130.854 121.659L122.497 142.152L91.0476 137.433L84.9867 150.499L37.0118 143.3L51.9463 109.819Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask0_115_37337)">
+<rect width="93.2376" height="3.8191" transform="matrix(0.988929 0.14839 -0.1469 0.989151 44.4486 112.556)" fill="#3A98EC"/>
+<path d="M38.9602 123.401L127.187 136.639L125.924 140.312L38.3991 127.179L38.9602 123.401Z" fill="#3A98EC"/>
+<rect width="93.2376" height="3.81906" transform="matrix(0.988929 0.14839 -0.1469 0.989151 34.9278 134.781)" fill="#3A98EC"/>
+</g>
+<mask id="mask1_115_37337" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="67" width="87" height="50">
+<path d="M129.289 79.9093L47.2962 67.6063L51.8517 104.012L133.844 116.315L129.289 79.9093Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask1_115_37337)">
+<rect width="93.2376" height="3.81909" transform="matrix(0.988929 0.14839 -0.1469 0.989151 45.0518 82.7163)" fill="#3A98EC"/>
+<path d="M42.6775 70.4004L81.7109 76.2574L83.2832 81.1126L42.0064 74.9189L42.6775 70.4004Z" fill="#3A98EC"/>
+<rect width="93.2376" height="3.81909" transform="matrix(0.988929 0.14839 -0.1469 0.989151 46.1771 94.4712)" fill="#3A98EC"/>
+</g>
+<g clip-path="url(#clip1_115_37337)">
+<circle r="14.8636" transform="matrix(0.986285 0.165209 -0.163716 0.986482 97.675 53.5358)" fill="white" stroke="#3A98EC" stroke-width="3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.3748 54.9542C83.1815 52.4137 86.8365 48.9775 91.3057 49.7261C94.5343 50.2669 95.8211 52.5107 97.1078 54.7546C98.3946 56.9984 99.6814 59.2422 102.91 59.783C106.214 60.3364 108.616 58.325 110.732 56.5535C111.879 55.593 112.942 54.7031 114.019 54.3308C113.988 54.963 113.921 55.6001 113.814 56.2395C112.335 65.1548 103.91 71.1716 94.9962 69.6785C87.4763 68.4189 82.0112 62.2163 81.3748 54.9542Z" fill="#3A98EC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_115_37337">
+<rect width="153.345" height="158.97" fill="white" transform="matrix(0.988929 0.14839 -0.1469 0.989151 23.8526 5.67822)"/>
+</clipPath>
+<clipPath id="clip1_115_37337">
+<rect width="36" height="36" fill="white" transform="matrix(0.986285 0.165209 -0.163716 0.986482 82.8688 32.8052)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/partnerSteps/electricity_bill.svg b/src/assets/icons/visu/partnerSteps/electricity_bill.svg
deleted file mode 100644
index 70ceab0a6..000000000
--- a/src/assets/icons/visu/partnerSteps/electricity_bill.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg width="217" height="229" viewBox="0 0 217 229" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11182_68982)">
-<path d="M194.592 47.1556L195.68 44.7462L193.068 44.3563L69.6931 25.939L68.1961 25.7155L67.5728 27.0964L45.7985 75.3369L44.6689 75.1682L44.9407 77.2373L44.0877 79.1272L45.2109 79.2949L51.9551 130.644L26.3996 185.776L25.2762 188.2L27.9156 188.594L151.291 207.011L152.772 207.232L153.402 205.872L179.202 150.212L179.447 149.685L179.371 149.11L172.429 96.2574L194.592 47.1556Z" stroke="#C95300" stroke-width="4"/>
-<path d="M54.0131 130.955L177.388 149.373L151.588 205.032L28.2132 186.615L54.0131 130.955Z" fill="white"/>
-<path d="M54.013 130.956L177.388 149.373L170.372 95.9562L46.9969 77.5389L54.013 130.956Z" fill="#F5E3D8"/>
-<path d="M69.3949 27.917L192.77 46.3343L170.372 95.9557L46.9973 77.5384L69.3949 27.917Z" fill="white"/>
-<mask id="mask0_11182_68982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="45" y="135" width="117" height="51">
-<path d="M63.7506 135.385L161.53 149.982L151.176 175.245L112.204 169.428L104.693 185.535L45.2441 176.661L63.7506 135.385Z" fill="#D87B39"/>
-</mask>
-<g mask="url(#mask0_11182_68982)">
-<rect x="54.46" y="138.759" width="115.525" height="4.70872" transform="rotate(8.49036 54.46 138.759)" fill="#D87B39"/>
-<path d="M47.6582 152.129L156.987 168.449L155.422 172.976L46.963 156.786L47.6582 152.129Z" fill="#D87B39"/>
-<rect x="42.6621" y="166.158" width="115.525" height="4.70866" transform="rotate(8.49036 42.6621 166.158)" fill="#D87B39"/>
-</g>
-<mask id="mask1_11182_68982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="57" y="83" width="109" height="61">
-<path d="M159.591 98.5123L57.9883 83.3452L63.6334 128.226L165.236 143.393L159.591 98.5123Z" fill="#D87B39"/>
-</mask>
-<g mask="url(#mask1_11182_68982)">
-<rect x="55.207" y="101.973" width="115.525" height="4.70871" transform="rotate(8.49036 55.207 101.973)" fill="#D87B39"/>
-<path d="M52.2646 86.7897L100.634 94.0103L102.582 99.9957L51.4331 92.3602L52.2646 86.7897Z" fill="#D87B39"/>
-<rect x="56.6016" y="116.464" width="115.525" height="4.7087" transform="rotate(8.49036 56.6016 116.464)" fill="#D87B39"/>
-</g>
-<path d="M113.733 74.7956C122.357 76.0829 130.461 70.7525 131.667 62.6742C132.873 54.5958 126.679 47.131 118.055 45.8437C109.432 44.5564 101.328 49.8867 100.122 57.9651C98.9157 66.0435 105.11 73.5083 113.733 74.7956Z" fill="#D87B39" stroke="#D87B39" stroke-width="2"/>
-<path d="M100.296 58.5081L103.589 61.7572L107.251 57.4782L109.839 65.4477L115.986 54.6459L118.071 65.9872L122.975 58.4468L125.391 66.3054L129.249 61.9787L131.116 64.6599" stroke="white"/>
-</g>
-<defs>
-<clipPath id="clip0_11182_68982">
-<rect width="190" height="196" fill="white" transform="translate(28.9375 7) rotate(8.49036)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/partnerSteps/enedis.svg b/src/assets/icons/visu/partnerSteps/enedis.svg
deleted file mode 100644
index 15d3543a2..000000000
--- a/src/assets/icons/visu/partnerSteps/enedis.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_69259)" 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.625 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.98 49.2881 182.98C49.8276 182.98 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.98C57.0192 182.98 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.98 56.4542 182.98ZM56.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.107 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.663 68.5534 188.776 68.5788 188.892C68.6144 188.776 68.6501 188.663 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.98C77.031 182.98 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.98 76.466 182.98ZM76.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.107 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.692 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.185 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.692 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.185 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.443H54.9187C55.1994 152.443 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.443 54.2159 152.443ZM59.099 157.692H59.8018C60.0824 157.692 60.3516 157.804 60.5501 158.003C60.7486 158.202 60.8601 158.473 60.8601 158.754V164.285H58.0407V158.754C58.0407 158.473 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="M172.344 62.6227C170.969 62.6227 169.847 61.6269 169.847 60.374V59.967H175.17C177.007 59.967 178.514 58.6071 178.514 56.9473V55.0305C178.514 53.3599 177.018 52.0107 175.17 52.0107H170.529C170.265 52.0107 170.012 52.0107 169.748 52.0642C168.242 52.3855 167.186 53.6277 167.186 55.0305V56.1441C167.186 56.4011 167.373 56.6046 167.615 56.6046H169.418C169.649 56.6046 169.847 56.4011 169.847 56.1441V55.8657V55.4267C169.847 54.8484 170.375 54.3772 171.035 54.3772H174.675C175.324 54.3772 175.863 54.8484 175.863 55.4267V56.5618C175.863 57.14 175.335 57.6112 174.675 57.6112H165.668V59.967H167.186V60.374C167.186 62.9226 169.506 64.9893 172.355 64.9893H180.043V62.6227H172.344Z" fill="#91C21D"/>
-<path d="M160.521 54.3772C161.895 54.3772 163.017 55.3945 163.017 56.6367V64.5717C163.017 64.7966 163.226 64.9893 163.49 64.9893H165.195C165.459 64.9893 165.668 64.8073 165.668 64.5717V56.6367C165.668 54.0881 163.358 52.0107 160.521 52.0107H155.032C154.801 52.0107 154.604 52.2141 154.604 52.4711V64.5288C154.604 64.7858 154.79 64.9893 155.032 64.9893H156.836C157.067 64.9893 157.265 64.7858 157.265 64.5288V54.3772H160.521Z" fill="#0063A6"/>
-<path d="M145.618 54.3779H152.613C152.866 54.3779 153.075 54.1959 153.075 53.971V52.4183C153.075 52.1934 152.877 52.0114 152.613 52.0114H145.563C143.606 52.0114 142 53.4463 142 55.2025V61.8096C142 63.5658 143.595 65.0007 145.563 65.0007H152.613C152.866 65.0007 153.075 64.8187 153.075 64.5938V63.0411C153.075 62.8162 152.866 62.6342 152.613 62.6342H145.618C145.101 62.6342 144.673 62.2379 144.673 61.7668V59.957H148.852C149.105 59.957 149.314 59.775 149.314 59.5501V58.0295C149.314 57.8046 149.105 57.6226 148.852 57.6226H144.673V55.2453C144.673 54.7742 145.101 54.3779 145.618 54.3779Z" fill="#0063A6"/>
-<path d="M208 60.5132C208 60.3954 208 60.2776 207.989 60.1491C207.857 58.7035 206.328 57.6112 204.722 57.6112H200.73H200.631C199.993 57.6112 199.476 57.0544 199.476 56.3798V55.5017C199.476 54.8806 200.037 54.3773 200.741 54.3773H202.314H202.325H206.306C206.515 54.3773 206.691 54.2595 206.757 54.0881C206.779 54.0453 206.779 54.0025 206.779 53.9596V52.4176C206.779 52.1928 206.57 52 206.306 52H200.092C198.288 52 196.804 53.3171 196.804 54.9448V56.7867C196.804 58.5429 198.156 59.9671 199.828 59.9671H204.183C204.821 59.9671 205.338 60.5239 205.338 61.1985V61.4877C205.338 62.1088 204.777 62.6121 204.085 62.6121H197.288C197.079 62.6121 196.903 62.7299 196.837 62.9012C196.815 62.944 196.815 62.9869 196.815 63.0297V64.5717C196.815 64.7966 197.024 64.9893 197.288 64.9893H202.853H204.744C206.548 64.9893 208 63.6722 208 62.0445V60.5132Z" fill="#0063A6"/>
-<path d="M186.257 52.0107H180.472C180.241 52.0107 180.043 52.2141 180.043 52.4711V60.1063C180.043 60.3633 180.23 60.5667 180.472 60.5667H182.276C182.507 60.5667 182.705 60.3633 182.705 60.1063V54.3772H185.96C187.335 54.3772 188.457 55.3945 188.457 56.6367V60.8023C188.457 62.0445 187.335 62.6227 185.96 62.6227L180.043 62.6335V65H185.96C188.798 65 191.107 63.3723 191.107 60.813V56.6153C191.107 54.1631 188.995 52.0107 186.257 52.0107Z" fill="#0063A6"/>
-<path d="M195.286 60.1812V55.8443C195.286 55.5873 195.099 55.3838 194.857 55.3838H193.065C192.834 55.3838 192.636 55.5873 192.636 55.8443V60.1812V64.5181C192.636 64.7751 192.823 64.9786 193.065 64.9786H194.857C195.088 64.9786 195.286 64.7751 195.286 64.5181V60.1812Z" fill="#0063A6"/>
-<path d="M195.286 52.9959V52.4711C195.286 52.2141 195.099 52.0107 194.857 52.0107H193.065C192.834 52.0107 192.636 52.2141 192.636 52.4711V52.9959V53.9168C192.636 54.1738 192.823 54.3772 193.065 54.3772H194.857C195.088 54.3772 195.286 54.1738 195.286 53.9168V52.9959Z" fill="#0063A6"/>
-<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_69259" 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/partnerSteps/france_connect.svg b/src/assets/icons/visu/partnerSteps/france_connect.svg
deleted file mode 100644
index 9a5bba672..000000000
--- a/src/assets/icons/visu/partnerSteps/france_connect.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<svg width="217" height="222" viewBox="0 0 217 222" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.0151 72.4082L22.0224 132.54L79.4766 155.577L129.077 118.285L121.07 58.1526L63.439 35.1399L14.0151 72.4082Z" fill="white"/>
-<path d="M99.9077 91.4759L81.0963 67.0845L65.0127 46.2796L69.1225 77.1428L78.0803 144.413L117.183 114.191L99.9077 91.4759Z" fill="#034EA2"/>
-<path d="M81.1022 67.1272L99.9202 91.5685L110.668 65.263L92.202 57.5462L81.1022 67.1272Z" fill="#0069CC"/>
-<path d="M92.2018 57.546L65.0127 46.2796L81.102 67.127L92.2018 57.546Z" fill="#ED1C24"/>
-<path d="M81.102 67.127L65.0127 46.2796L81.102 67.127Z" fill="#0069CC"/>
-<path d="M117.201 114.331L110.668 65.2636L99.9196 91.5691L117.201 114.331Z" fill="#ED1C24"/>
-<path d="M43.3449 99.0084L55.118 70.5444L65.0127 46.2802L69.1224 77.1434L78.0803 144.414L32.4313 125.477L43.3449 99.0084Z" fill="#0069CC"/>
-<path d="M55.1241 70.5865L43.3577 99.1004L25.9164 76.5487L41.7196 64.2685L55.1241 70.5865Z" fill="#ED1C24"/>
-<path d="M41.7193 64.2683L65.0128 46.2797L55.1238 70.5863L41.7193 64.2683Z" fill="#034EA2"/>
-<path d="M32.4498 125.616L25.916 76.5492L43.3573 99.101L32.4498 125.616Z" fill="#034EA2"/>
-<path d="M83.9036 98.7183C84.6585 98.6178 85.3881 98.3277 86.1682 98.4167C86.7596 98.5309 87.5145 98.4304 87.5397 98.62C87.5025 99.7826 85.8293 100.198 85.2258 101.436C85.0371 101.461 85.0371 101.461 84.8484 101.487C84.4962 101.726 84.7859 102.46 84.4085 102.51C84.0058 102.37 83.6536 102.61 83.1127 102.875C83.7546 103.369 84.5599 103.647 85.2896 103.357C85.4783 103.332 85.6923 103.496 85.7427 103.876C85.7427 103.876 85.9315 103.851 85.9062 103.661C86.0949 103.636 86.0949 103.636 86.1202 103.825C86.1454 104.015 86.1707 104.205 86.1959 104.394C85.8942 105.013 85.1141 104.924 84.5479 104.999C85.7055 105.038 86.8378 104.887 87.7561 104.572C88.4605 104.093 87.5289 102.866 88.0194 102.222C87.8307 102.247 87.9689 101.843 87.5914 101.893C87.7549 101.678 88.0566 101.059 88.2453 101.034C88.4341 101.009 88.975 100.744 88.9497 100.555C88.9245 100.365 88.3331 100.251 88.4713 99.8465C89.1505 99.1772 89.8044 98.3184 89.3007 97.4208C89.0615 97.0668 87.9292 97.2175 87.3378 97.1034C86.5577 97.0143 85.828 97.3044 85.0984 97.5945C84.3435 97.695 83.8279 98.1496 83.0982 98.4396C82.2051 98.9445 81.526 99.6137 80.6581 100.308C81.9034 99.5634 82.8218 99.2482 83.9036 98.7183Z" fill="#034EA2"/>
-<path d="M98.3107 104.879C97.8304 104.179 97.185 103.693 96.5145 103.018C95.8191 102.157 94.9585 101.508 94.6184 100.408C94.0882 99.333 94.3437 98.3446 94.1939 97.2192C93.9191 95.1561 93.0739 93.1689 92.2536 91.3693C91.7483 90.4822 91.4083 89.3822 90.9031 88.495C90.638 87.9577 90.3729 87.4203 89.9176 86.9083C89.7024 86.7461 89.6275 86.1834 89.7927 85.9705C90.3133 85.5194 90.8089 84.8808 91.1393 84.455C91.4198 83.6542 90.9145 82.767 90.294 82.4679C89.2932 82.2194 89.6582 83.507 88.9474 83.9834C88.7573 84.0087 88.7573 84.0087 88.5671 84.034C88.3269 83.6842 88.6823 83.446 88.8475 83.2332C88.8226 83.0456 88.7976 82.858 88.6074 82.8834C88.0369 82.9593 87.4413 82.8478 87.2262 82.6855C85.455 81.0125 83.4283 80.328 81.2365 79.8563C81.832 79.9679 82.4025 79.892 82.9731 79.816C83.9489 79.8769 85.065 79.5374 85.7758 79.061C86.4866 78.5846 86.3617 77.6468 86.452 76.8712C86.6172 76.6584 86.402 76.4961 86.3521 76.121C86.3021 75.7459 85.8718 75.4214 85.6317 75.0716C85.6317 75.0716 85.4165 74.9094 85.1764 74.5596C83.4302 73.0742 76.8852 68.9828 65.9547 71.2018C61.2502 72.21 55.5295 74.308 49.1326 78.5957C48.9424 78.621 48.7772 78.8339 48.3968 78.8846C47.3307 79.5992 45.9341 80.7396 45.1331 81.9915C44.1668 83.4564 43.4157 85.0835 43.2601 86.8221C41.6984 88.1754 40.7821 90.0154 40.056 91.83C39.2146 94.2326 37.9429 96.3108 38.2676 98.7491C38.2926 98.9366 38.3175 99.1242 38.3175 99.1242C38.6076 99.8491 38.6825 100.412 38.9726 101.137C39.5528 102.586 40.133 104.036 40.5229 105.511C40.813 106.236 41.1031 106.961 41.3932 107.686C41.8734 108.386 41.618 109.374 42.2884 110.048C42.5285 110.398 42.6035 110.961 43.199 111.072C43.2239 111.26 43.2489 111.448 43.2739 111.635C43.489 111.797 43.489 111.797 43.6792 111.772C43.7042 111.96 43.7292 112.147 43.7542 112.335C45.0701 113.496 46.5512 114.444 47.5117 115.843C47.9919 116.542 46.2304 116.395 45.4447 116.309C44.0385 115.924 42.9378 114.925 41.6718 114.139L41.5066 114.352C42.202 115.214 44.4438 116.061 43.4027 116.963C42.8821 117.414 42.0215 116.765 41.716 117.378C41.5508 117.591 41.7909 117.941 41.8159 118.128C40.9803 117.667 40.0793 118.169 39.2687 117.895C38.6732 117.783 38.3581 116.871 37.7876 116.947C36.026 116.8 34.2644 116.652 32.3626 116.906C32.1725 116.931 31.9823 116.956 31.9823 116.956C30.2457 116.997 28.5091 117.037 27.0126 117.427L27.2624 119.303C28.7339 118.725 30.2054 118.147 31.7268 117.945C31.917 117.919 32.1071 117.894 32.1071 117.894C32.4875 117.844 33.0331 117.58 33.4384 117.717C32.8679 117.793 32.1072 117.894 31.5616 118.158C30.0651 118.548 28.6186 119.313 27.1721 120.078L27.4219 121.954C28.2076 122.04 29.1585 121.914 29.9441 122C30.92 122.061 31.8959 122.122 32.8967 122.37C34.2779 122.568 35.3038 123.004 36.5198 123.415C37.1403 123.714 37.3804 124.064 38.0009 124.363C38.8115 124.637 39.7624 124.51 40.283 124.059C40.4732 124.034 40.8536 123.983 41.0438 123.958C43.0608 123.116 45.0778 122.275 46.1843 120.41C46.2093 120.597 46.3995 120.572 46.3995 120.572C46.169 121.748 46.3188 122.874 45.708 124.1C45.7329 124.288 45.5677 124.501 45.9731 124.638C46.1632 124.612 46.1632 124.612 46.1632 124.612C45.9731 124.638 45.9731 124.637 45.998 124.825C46.023 125.013 46.3784 124.774 46.5936 124.937C45.8578 125.225 45.3122 125.489 45.0068 126.102C45.0318 126.29 45.222 126.265 45.4121 126.239C45.2469 126.452 44.6764 126.528 44.7014 126.716L44.9165 126.878C44.7264 126.903 44.7264 126.903 44.7513 127.091C44.7763 127.278 44.7763 127.278 44.8013 127.466C44.4209 127.517 44.2807 127.917 44.0905 127.942C44.711 128.241 45.0414 127.816 45.612 127.74C44.1654 128.505 43.1492 129.595 41.6778 130.172C41.4876 130.198 41.7277 130.548 41.5375 130.573C41.9429 130.71 42.2733 130.284 42.6536 130.233C41.9678 130.897 41.2571 131.374 40.5463 131.85L45.4603 133.868C47.2122 132.49 48.749 130.949 50.0457 129.058L50.2608 129.22C50.0553 130.584 49.4194 131.623 48.4032 132.713C47.6925 133.189 47.2218 134.015 46.6763 134.279L50.3493 135.699C51.035 135.035 51.5556 134.584 52.4566 134.082C52.6468 134.057 52.8619 134.219 53.2423 134.168C54.2335 132.891 55.3899 131.401 57.3417 131.522C57.3666 131.71 57.3666 131.71 57.5568 131.685C57.5568 131.685 57.747 131.659 57.722 131.472C57.747 131.659 57.747 131.659 57.5568 131.685C57.0362 132.136 56.7058 132.562 56.1852 133.013C56.02 133.226 56.2102 133.2 56.4004 133.175C57.1112 132.698 57.4416 132.273 57.9622 131.822C57.797 132.035 57.8219 132.222 57.8469 132.41C56.3101 133.95 55.1537 135.441 54.0222 137.118L73.4629 145.028C73.9336 144.202 74.5444 142.975 75.1803 141.936C77.9541 136.604 82.0247 129.381 83.3463 127.678C83.8669 127.227 84.4374 127.151 85.1732 126.862C87.4553 126.558 90.0026 126.792 92.3097 126.675C92.4999 126.65 92.9052 126.787 93.0954 126.761C93.8811 126.848 94.807 126.534 95.7329 126.219C96.6339 125.718 97.7 125.003 97.9305 123.827C98.186 122.839 98.2264 121.688 97.5309 120.826C96.4302 119.827 98.0669 119.037 98.5375 118.211C98.818 117.41 98.0073 117.136 97.9324 116.573C97.7172 116.411 97.1467 116.487 96.9066 116.137C97.8075 115.635 99.2041 114.495 98.2935 113.471C97.8132 112.771 96.9276 111.935 97.5885 111.083C98.4644 110.394 99.9859 110.192 100.241 109.203C101.133 107.176 99.2462 106.091 98.3107 104.879ZM91.516 98.912C91.3508 99.1249 91.9463 99.2365 91.9963 99.6116C91.8311 99.8245 91.4757 100.063 91.2855 100.088C91.1203 100.301 90.7899 100.727 90.6247 100.94C90.8149 100.914 90.6746 101.315 91.055 101.264C90.5843 102.09 91.7101 103.276 90.7842 103.591C89.8832 104.092 88.7421 104.244 87.5511 104.021C88.0967 103.758 88.9073 104.031 89.2128 103.418C89.1878 103.231 89.1628 103.043 89.1378 102.855C89.1129 102.668 88.9227 102.693 88.9227 102.693C88.7575 102.906 88.7575 102.906 88.7575 102.906C88.7325 102.719 88.3022 102.394 88.3022 102.394C87.5665 102.683 86.7558 102.409 86.1103 101.922C86.4657 101.684 86.8211 101.446 87.4166 101.558C87.797 101.507 87.5069 100.782 87.8623 100.544C88.0524 100.519 88.0524 100.519 88.2426 100.493C88.8535 99.2665 90.5152 98.6635 90.5805 97.7004C90.5555 97.5128 89.7948 97.6141 89.1992 97.5025C88.4136 97.4163 87.6778 97.7051 86.9171 97.8064C85.826 98.3335 84.8751 98.4601 83.9991 99.1494C84.6849 98.4854 85.5609 97.7962 86.4618 97.2944C87.1976 97.0056 87.7181 96.5545 88.4789 96.4532C89.2146 96.1643 90.1405 95.8501 90.736 95.9617C91.5217 96.048 92.4726 95.9214 92.7128 96.2711C92.6724 97.4218 92.2018 98.248 91.516 98.912Z" fill="white"/>
-<path opacity="0.45" fill-rule="evenodd" clip-rule="evenodd" d="M109.607 112.227L203.252 125.923C207.884 126.601 211.089 130.904 210.412 135.536L202.644 188.648C201.966 193.28 197.663 196.485 193.031 195.808L99.3855 182.111C94.754 181.434 91.5485 177.13 92.2259 172.499L99.9941 119.386C100.672 114.755 104.975 111.549 109.607 112.227ZM109.198 115.022C106.11 114.57 103.241 116.707 102.79 119.795L95.0213 172.907C94.5697 175.995 96.7067 178.864 99.7944 179.316L193.44 193.013C196.528 193.464 199.397 191.327 199.848 188.239L207.617 135.127C208.068 132.039 205.931 129.17 202.844 128.719L109.198 115.022Z" fill="#AEAEAE"/>
-<path d="M103.029 118.162C103.348 115.976 105.379 114.463 107.565 114.783L204.477 128.957C206.663 129.277 208.175 131.308 207.856 133.494L207.208 137.922L102.381 122.59L103.029 118.162Z" fill="#034EA2"/>
-<path d="M102.381 122.59L207.208 137.922L200.871 181.25L96.0436 165.918L102.381 122.59Z" fill="url(#paint0_linear_11182_69190)"/>
-<path d="M96.043 165.919L200.87 181.251L199.609 189.872C199.289 192.058 197.258 193.571 195.072 193.251L98.161 179.077C95.9751 178.757 94.4623 176.726 94.782 174.54L96.043 165.919Z" fill="white"/>
-<rect x="102.381" y="122.59" width="31.0765" height="43.7896" transform="rotate(8.32109 102.381 122.59)" fill="#E0E0E0"/>
-<path d="M123.397 144.835C122.493 151.01 117.577 156.22 112.559 155.486C107.542 154.752 104.323 148.353 105.227 142.177C106.13 136.002 110.813 132.389 115.83 133.123C120.848 133.857 124.3 138.659 123.397 144.835Z" fill="#6B7F95"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M108.066 152.901C109.28 154.285 110.81 155.229 112.559 155.485C114.341 155.746 116.109 155.257 117.69 154.242L112.968 152.69L108.066 152.901ZM104.671 153.047L97.8831 153.339L96.0433 165.919L126.793 170.416L128.632 157.837L120.931 155.307C118.595 157.404 115.508 158.772 112.15 158.281C108.847 157.797 106.311 155.666 104.671 153.047Z" fill="#6B7F95"/>
-<defs>
-<linearGradient id="paint0_linear_11182_69190" x1="154.794" y1="130.256" x2="148.457" y2="173.584" gradientUnits="userSpaceOnUse">
-<stop stop-color="#A2E8C2"/>
-<stop offset="0.489583" stop-color="#C1E8ED"/>
-<stop offset="1" stop-color="#8CC8DB"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/partnerSteps/gas_bill.svg b/src/assets/icons/visu/partnerSteps/gas_bill.svg
deleted file mode 100644
index be3a8c5b4..000000000
--- a/src/assets/icons/visu/partnerSteps/gas_bill.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-<svg width="217" height="229" viewBox="0 0 217 229" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11182_69056)">
-<path d="M194.592 47.1556L195.68 44.7462L193.068 44.3563L69.6931 25.939L68.1961 25.7155L67.5728 27.0965L45.7985 75.3369L44.6689 75.1683L44.9407 77.2374L44.0877 79.1272L45.2109 79.2949L51.9551 130.644L26.3996 185.776L25.2762 188.2L27.9156 188.594L151.291 207.011L152.772 207.232L153.402 205.872L179.202 150.212L179.447 149.685L179.371 149.11L172.429 96.2575L194.592 47.1556Z" stroke="#1B7E6D" stroke-width="4"/>
-<path d="M54.0131 130.955L177.388 149.373L151.588 205.032L28.2132 186.615L54.0131 130.955Z" fill="white"/>
-<path d="M54.013 130.956L177.388 149.373L170.372 95.9562L46.9969 77.5389L54.013 130.956Z" fill="#C9F5EE"/>
-<path d="M69.3949 27.917L192.77 46.3343L170.372 95.9557L46.9973 77.5384L69.3949 27.917Z" fill="white"/>
-<mask id="mask0_11182_69056" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="45" y="135" width="117" height="51">
-<path d="M63.7506 135.385L161.53 149.981L151.176 175.245L112.204 169.428L104.693 185.535L45.2441 176.661L63.7506 135.385Z" fill="#D87B39"/>
-</mask>
-<g mask="url(#mask0_11182_69056)">
-<rect x="54.46" y="138.759" width="115.525" height="4.70872" transform="rotate(8.49036 54.46 138.759)" fill="#45D1B8"/>
-<path d="M47.6582 152.129L156.987 168.449L155.422 172.976L46.963 156.786L47.6582 152.129Z" fill="#45D1B8"/>
-<rect x="42.6621" y="166.158" width="115.525" height="4.70866" transform="rotate(8.49036 42.6621 166.158)" fill="#45D1B8"/>
-</g>
-<mask id="mask1_11182_69056" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="57" y="83" width="109" height="61">
-<path d="M159.591 98.5123L57.9883 83.3452L63.6334 128.226L165.236 143.393L159.591 98.5123Z" fill="#D87B39"/>
-</mask>
-<g mask="url(#mask1_11182_69056)">
-<rect x="55.207" y="101.973" width="115.525" height="4.70871" transform="rotate(8.49036 55.207 101.973)" fill="#45D1B8"/>
-<path d="M52.2646 86.7897L100.634 94.0103L102.582 99.9957L51.4331 92.3602L52.2646 86.7897Z" fill="#45D1B8"/>
-<rect x="56.6016" y="116.464" width="115.525" height="4.7087" transform="rotate(8.49036 56.6016 116.464)" fill="#45D1B8"/>
-</g>
-<g clip-path="url(#clip1_11182_69056)">
-<circle cx="116" cy="59.9999" r="16.8636" fill="#45D1B8" stroke="#45D1B8"/>
-<path d="M110.273 65.409C112.356 65.409 114.045 63.7199 114.045 61.6363C114.045 59.5527 112.356 57.8636 110.273 57.8636C108.189 57.8636 106.5 59.5527 106.5 61.6363C106.5 63.7199 108.189 65.409 110.273 65.409Z" fill="white" stroke="#45D1B8"/>
-<path d="M118.455 70.3181C119.635 70.3181 120.591 69.3617 120.591 68.1818C120.591 67.0019 119.635 66.0454 118.455 66.0454C117.275 66.0454 116.318 67.0019 116.318 68.1818C116.318 69.3617 117.275 70.3181 118.455 70.3181Z" fill="white" stroke="#45D1B8"/>
-<circle cx="117.636" cy="55.909" r="6.22727" fill="white" stroke="#45D1B8"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_11182_69056">
-<rect width="190" height="196" fill="white" transform="translate(28.9375 7) rotate(8.49036)"/>
-</clipPath>
-<clipPath id="clip1_11182_69056">
-<rect width="36" height="36" fill="white" transform="translate(98 41.9999)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/partnerSteps/water_bill.svg b/src/assets/icons/visu/partnerSteps/water_bill.svg
deleted file mode 100644
index aee720326..000000000
--- a/src/assets/icons/visu/partnerSteps/water_bill.svg
+++ /dev/null
@@ -1,36 +0,0 @@
-<svg width="217" height="229" viewBox="0 0 217 229" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11182_69128)">
-<path d="M194.592 47.1556L195.68 44.7462L193.068 44.3563L69.6931 25.939L68.1961 25.7155L67.5728 27.0965L45.7985 75.3369L44.6689 75.1683L44.9407 77.2374L44.0877 79.1272L45.2109 79.2949L51.9551 130.644L26.3996 185.776L25.2762 188.2L27.9156 188.594L151.291 207.011L152.772 207.232L153.402 205.872L179.202 150.212L179.447 149.685L179.371 149.11L172.429 96.2575L194.592 47.1556Z" stroke="#1761A4" stroke-width="4"/>
-<path d="M54.0131 130.955L177.388 149.373L151.588 205.032L28.2132 186.615L54.0131 130.955Z" fill="white"/>
-<path d="M54.013 130.956L177.388 149.373L170.372 95.9562L46.9969 77.5389L54.013 130.956Z" fill="#D7E6F4"/>
-<path d="M69.3949 27.9171L192.77 46.3344L170.372 95.9557L46.9973 77.5384L69.3949 27.9171Z" fill="white"/>
-<mask id="mask0_11182_69128" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="45" y="135" width="117" height="51">
-<path d="M63.7506 135.385L161.53 149.982L151.176 175.245L112.204 169.428L104.693 185.535L45.2441 176.661L63.7506 135.385Z" fill="#D87B39"/>
-</mask>
-<g mask="url(#mask0_11182_69128)">
-<rect x="54.46" y="138.759" width="115.525" height="4.70872" transform="rotate(8.49036 54.46 138.759)" fill="#3A98EC"/>
-<path d="M47.6582 152.129L156.987 168.449L155.422 172.976L46.963 156.786L47.6582 152.129Z" fill="#3A98EC"/>
-<rect x="42.6621" y="166.158" width="115.525" height="4.70866" transform="rotate(8.49036 42.6621 166.158)" fill="#3A98EC"/>
-</g>
-<mask id="mask1_11182_69128" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="57" y="83" width="109" height="61">
-<path d="M159.591 98.5124L57.9883 83.3452L63.6334 128.226L165.236 143.393L159.591 98.5124Z" fill="#D87B39"/>
-</mask>
-<g mask="url(#mask1_11182_69128)">
-<rect x="55.207" y="101.973" width="115.525" height="4.70871" transform="rotate(8.49036 55.207 101.973)" fill="#3A98EC"/>
-<path d="M52.2646 86.7898L100.634 94.0103L102.582 99.9958L51.4331 92.3603L52.2646 86.7898Z" fill="#3A98EC"/>
-<rect x="56.6016" y="116.464" width="115.525" height="4.7087" transform="rotate(8.49036 56.6016 116.464)" fill="#3A98EC"/>
-</g>
-<g clip-path="url(#clip1_11182_69128)">
-<circle cx="116" cy="60" r="14.8636" transform="rotate(9.46591 116 60)" fill="white" stroke="#3A98EC" stroke-width="3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M99.6956 61.4298C101.505 58.8886 105.163 55.4505 109.632 56.1957C112.861 56.7341 114.147 58.9765 115.432 61.2189C116.718 63.4613 118.003 65.7037 121.232 66.242C124.536 66.793 126.941 64.7802 129.058 63.0076C130.206 62.0465 131.27 61.156 132.347 60.7831C132.316 61.4151 132.248 62.0521 132.142 62.6915C130.655 71.6058 122.224 77.6274 113.31 76.1411C105.789 74.8872 100.327 68.6899 99.6956 61.4298Z" fill="#3A98EC"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_11182_69128">
-<rect width="190" height="196" fill="white" transform="translate(28.9375 7) rotate(8.49036)"/>
-</clipPath>
-<clipPath id="clip1_11182_69128">
-<rect width="36" height="36" fill="white" transform="translate(101.206 39.2848) rotate(9.46591)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/components/Connection/Connection.spec.tsx b/src/components/Connection/Connection.spec.tsx
index e3f3dca8b..20cb2ada3 100644
--- a/src/components/Connection/Connection.spec.tsx
+++ b/src/components/Connection/Connection.spec.tsx
@@ -1,22 +1,22 @@
-import React from 'react'
+import Connection from 'components/Connection/Connection'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
-import Connection from 'components/Connection/Connection'
-import { fluidStatusConnectedData } from '../../../tests/__mocks__/fluidStatusData.mock'
+import React from 'react'
import * as reactRedux from 'react-redux'
-import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { fluidStatusConnectedData } from '../../../tests/__mocks__/fluidStatusData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
-jest.mock('components/Connection/ConnectionLogin', () => {
+jest.mock('components/Connection/EPGLConnect/EpglInit', () => {
return jest.fn(() => {
- return <div id="ConnectionLogin" />
+ return <div id="EpglInit" />
})
})
-jest.mock('components/Connection/ConnectionOAuth', () => {
+jest.mock('components/Connection/GRDFConnect/GrdfInit', () => {
return jest.fn(() => {
- return <div id="ConnectionOAuth" />
+ return <div id="GrdfInit" />
})
})
@@ -38,7 +38,7 @@ describe('Connection component test', () => {
global: globalStateData,
},
})
- it('should call ConnectionOAuth', () => {
+ it('should call GrdfInit', () => {
const wrapper = mount(
<Provider store={store}>
<Connection fluidStatus={fluidStatusConnectedData[2]} />
@@ -47,7 +47,7 @@ describe('Connection component test', () => {
expect(toJson(wrapper)).toMatchSnapshot()
})
- it('should call ConnectionLogin', () => {
+ it('should call EpglInit', () => {
useDispatchSpy.mockReturnValue(jest.fn())
useSelectorSpy.mockReturnValue(globalStateData)
const wrapper = mount(
diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx
index 61ba7c10a..3da86c44d 100644
--- a/src/components/Connection/Connection.tsx
+++ b/src/components/Connection/Connection.tsx
@@ -1,12 +1,11 @@
+import { FluidType } from 'enum/fluid.enum'
+import { FluidConnection, FluidStatus } from 'models'
import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { updatedFluidConnection } from 'store/global/global.actions'
-import { FluidStatus, FluidConnection } from 'models'
-
-import ConnectionLogin from 'components/Connection/ConnectionLogin'
-import ConnectionOauth from 'components/Connection/ConnectionOAuth'
import './connection.scss'
-import { FluidType } from 'enum/fluid.enum'
+import EpglInit from './EPGLConnect/EpglInit'
+import GrdfInit from './GRDFConnect/GrdfInit'
import SgeInit from './SGEConnect/SgeInit'
interface ConnectionProps {
fluidStatus: FluidStatus
@@ -30,10 +29,10 @@ const Connection: React.FC<ConnectionProps> = ({
<SgeInit fluidStatus={fluidStatus} />
)}
{fluidStatus.fluidType === FluidType.WATER && (
- <ConnectionLogin fluidStatus={fluidStatus} />
+ <EpglInit fluidStatus={fluidStatus} />
)}
{fluidStatus.fluidType === FluidType.GAS && (
- <ConnectionOauth fluidStatus={fluidStatus} onSuccess={handleSuccess} />
+ <GrdfInit fluidStatus={fluidStatus} onSuccess={handleSuccess} />
)}
</div>
)
diff --git a/src/components/Connection/ConnectionLogin.tsx b/src/components/Connection/ConnectionLogin.tsx
deleted file mode 100644
index 0a410cd12..000000000
--- a/src/components/Connection/ConnectionLogin.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import './connectionLogin.scss'
-
-import { FluidStatus } from 'models'
-import PartnerConnectionStepsModal from 'components/PartnerConnectionStepsModal/PartnerConnectionStepsModal'
-import ConnectionLoginWithPartnerAccount from './ConnectionLoginWithPartnerAccount'
-import ConnectionLoginNoPartnerAccount from './ConnectionLoginNoPartnerAccount'
-
-interface ConnectionLoginProps {
- fluidStatus: FluidStatus
-}
-
-const ConnectionLogin: React.FC<ConnectionLoginProps> = ({
- fluidStatus,
-}: ConnectionLoginProps) => {
- const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
- const siteLink: string = fluidStatus.connection.konnectorConfig.siteLink
-
- const [openPartenerConnectionModal, setOpenPartenerConnectionModal] =
- useState<boolean>(false)
- const [hasSeenPartnerConnectionModal, setHasSeenPartnerConnectionModal] =
- useState<boolean>(false)
-
- const togglePartnerConnectionModal = useCallback(() => {
- setOpenPartenerConnectionModal(prev => !prev)
- }, [])
-
- const handleEndSteps = useCallback(() => {
- togglePartnerConnectionModal()
- window.open(siteLink, '_blank')
- setHasSeenPartnerConnectionModal(true)
- }, [siteLink, togglePartnerConnectionModal])
-
- return (
- <>
- {hasSeenPartnerConnectionModal ? (
- <ConnectionLoginWithPartnerAccount
- konnectorSlug={konnectorSlug}
- fluidStatus={fluidStatus}
- togglePartnerConnectionModal={togglePartnerConnectionModal}
- />
- ) : (
- <ConnectionLoginNoPartnerAccount
- konnectorSlug={konnectorSlug}
- fluidStatus={fluidStatus}
- togglePartnerConnectionModal={togglePartnerConnectionModal}
- />
- )}
- <PartnerConnectionStepsModal
- fluidType={fluidStatus.fluidType}
- open={openPartenerConnectionModal}
- handleCloseClick={togglePartnerConnectionModal}
- handleEndSteps={handleEndSteps}
- />
- </>
- )
-}
-
-export default ConnectionLogin
diff --git a/src/components/Connection/ConnectionLoginNoPartnerAccount.tsx b/src/components/Connection/ConnectionLoginNoPartnerAccount.tsx
deleted file mode 100644
index da6a343c0..000000000
--- a/src/components/Connection/ConnectionLoginNoPartnerAccount.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import './connectionLogin.scss'
-import { FluidStatus } from 'models'
-import Button from '@material-ui/core/Button'
-import FormLogin from 'components/Connection/FormLogin'
-
-interface ConnectionLoginNoPartnerAccountProps {
- konnectorSlug: string
- fluidStatus: FluidStatus
- togglePartnerConnectionModal: () => void
-}
-
-const ConnectionLoginNoPartnerAccount = ({
- konnectorSlug,
- fluidStatus,
- togglePartnerConnectionModal,
-}: ConnectionLoginNoPartnerAccountProps) => {
- const { t } = useI18n()
-
- return (
- <div className="kloginform">
- <p className={`kloginform-title ${konnectorSlug} text-20-bold`}>
- {t('auth.' + `${konnectorSlug}` + '.no_account.title')}
- </p>
-
- <div className="kloginform-subtitle text-18-bold">
- {t('auth.' + konnectorSlug + '.no_account.subtitle1')}
- </div>
- <div className="kloginform-button">
- <Button
- aria-label={t('auth.accessibility.button_create_account')}
- onClick={togglePartnerConnectionModal}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('auth.' + konnectorSlug + '.no_account.button_create_account')}
- </Button>
- </div>
-
- <div className="kloginform-subtitle text-18-bold">
- {t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2')}
- </div>
- <div className="kloginform-infotext text-16-normal">
- {t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2_info')}
- </div>
- <div className="kloginform-connect-button">
- <FormLogin fluidStatus={fluidStatus} highlightedStyle={false} />
- </div>
- </div>
- )
-}
-
-export default ConnectionLoginNoPartnerAccount
diff --git a/src/components/Connection/ConnectionLoginWithPartnerAccount.tsx b/src/components/Connection/ConnectionLoginWithPartnerAccount.tsx
deleted file mode 100644
index 9da0f6abc..000000000
--- a/src/components/Connection/ConnectionLoginWithPartnerAccount.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { useCallback } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import './connectionLogin.scss'
-import Button from '@material-ui/core/Button'
-import { FluidStatus } from 'models'
-import FormLogin from 'components/Connection/FormLogin'
-
-interface ConnectionLoginWithPartnerAccountProps {
- konnectorSlug: string
- fluidStatus: FluidStatus
- togglePartnerConnectionModal: () => void
-}
-
-const ConnectionLoginWithPartnerAccount = ({
- konnectorSlug,
- fluidStatus,
- togglePartnerConnectionModal,
-}: ConnectionLoginWithPartnerAccountProps) => {
- const { t } = useI18n()
-
- const goToGuide = useCallback(() => {
- window.open(
- 'https://www.notion.so/Besoin-d-aide-d3afe29ba5aa42bb9d49eecfcb506c72',
- '_blank'
- )
- }, [])
-
- return (
- <div className="kloginform">
- <p className={`kloginform-title ${konnectorSlug} text-20-bold`}>
- {t('auth.' + `${konnectorSlug}` + '.with_account.title')}
- </p>
-
- <div className="kloginform-subtitle text-18-bold">
- {t('auth.' + konnectorSlug + '.with_account.subtitle1')}
- </div>
- <div className="kloginform-connect-button">
- <FormLogin fluidStatus={fluidStatus} highlightedStyle={true} />
- </div>
- {konnectorSlug === 'grdfgrandlyon' && (
- <div className="kloginform-infotext text-16-normal">
- {t('auth.' + konnectorSlug + '.with_account.subtitle1_info')}
- </div>
- )}
-
- <div className="kloginform-subtitle text-18-bold">
- {t('auth.' + konnectorSlug + '.with_account.subtitle2')}
- </div>
- <div className="kloginform-button">
- <Button
- aria-label={t('auth.accessibility.button_create_account')}
- onClick={togglePartnerConnectionModal}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- >
- {t('auth.' + konnectorSlug + '.with_account.button_create_account')}
- </Button>
- </div>
-
- <div className="kloginform-infotext text-16-normal">
- {t('auth.' + `${konnectorSlug}` + '.with_account.subtitle2_info')}
- </div>
- <div className="kloginform-button">
- <Button
- aria-label={t('auth.accessibility.button_goto_guide')}
- onClick={goToGuide}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- >
- {t('auth.' + konnectorSlug + '.with_account.button_goto_guide')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default ConnectionLoginWithPartnerAccount
diff --git a/src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx b/src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx
deleted file mode 100644
index 12df683d8..000000000
--- a/src/components/Connection/ConnectionOAuthNoPartnerAccount.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import './connectionOAuth.scss'
-import { FluidStatus, Konnector } from 'models'
-import FormOAuth from 'components/Connection/FormOAuth'
-import Button from '@material-ui/core/Button'
-
-interface ConnectionOAuthNoPartnerAccountProps {
- konnectorSlug: string
- konnector: Konnector | null
- handleSuccess: (accountId: string) => Promise<void>
- togglePartnerConnectionModal: () => void
- fluidStatus: FluidStatus
-}
-
-const ConnectionOAuthNoPartnerAccount = ({
- konnectorSlug,
- konnector,
- handleSuccess,
- togglePartnerConnectionModal,
- fluidStatus,
-}: ConnectionOAuthNoPartnerAccountProps) => {
- const { t } = useI18n()
-
- return (
- <div className="koauthform">
- <p className={`koauthform-title ${konnectorSlug} text-20-bold`}>
- {t('auth.' + `${konnectorSlug}` + '.no_account.title')}
- </p>
-
- <div className="koauthform-subtitle text-18-bold">
- {t('auth.' + konnectorSlug + '.no_account.subtitle1')}
- </div>
- <div className="koauthform-button">
- <Button
- aria-label={t('auth.accessibility.button_create_account')}
- onClick={togglePartnerConnectionModal}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('auth.' + konnectorSlug + '.no_account.button_create_account')}
- </Button>
- </div>
-
- <div className="koauthform-subtitle text-18-bold">
- {t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2')}
- </div>
- <div className="koauthform-infotext text-16-normal">
- {t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2_info')}
- </div>
- <div className="koauthform-connect-button">
- <FormOAuth
- konnector={konnector}
- onSuccess={handleSuccess}
- highlightedStyle={false}
- fluidStatus={fluidStatus}
- />
- </div>
- <div className="koauthform-infotext text-16-italic">
- {t('auth.' + `${konnectorSlug}` + '.no_account.info')}
- </div>
- </div>
- )
-}
-
-export default ConnectionOAuthNoPartnerAccount
diff --git a/src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx b/src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx
deleted file mode 100644
index d0a81c48e..000000000
--- a/src/components/Connection/ConnectionOAuthWithPartnerAccount.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useCallback } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import './connectionOAuth.scss'
-import { FluidStatus, Konnector } from 'models'
-import FormOAuth from 'components/Connection/FormOAuth'
-import Button from '@material-ui/core/Button'
-
-interface ConnectionOAuthWithPartnerAccountProps {
- konnectorSlug: string
- konnector: Konnector | null
- handleSuccess: (accountId: string) => Promise<void>
- togglePartnerConnectionModal: () => void
- fluidStatus: FluidStatus
-}
-
-const ConnectionOAuthWithPartnerAccount = ({
- konnectorSlug,
- konnector,
- handleSuccess,
- togglePartnerConnectionModal,
- fluidStatus,
-}: ConnectionOAuthWithPartnerAccountProps) => {
- const { t } = useI18n()
-
- const goToGuide = useCallback(() => {
- window.open(
- 'https://www.notion.so/Besoin-d-aide-d3afe29ba5aa42bb9d49eecfcb506c72',
- '_blank'
- )
- }, [])
-
- return (
- <div className="koauthform">
- <p className={`koauthform-title ${konnectorSlug} text-20-bold`}>
- {t('auth.' + `${konnectorSlug}` + '.with_account.title')}
- </p>
-
- <div className="koauthform-subtitle text-18-bold">
- {t('auth.' + konnectorSlug + '.with_account.subtitle1')}
- </div>
- <div className="koauthform-connect-button">
- <FormOAuth
- konnector={konnector}
- onSuccess={handleSuccess}
- highlightedStyle={true}
- fluidStatus={fluidStatus}
- />
- </div>
- {konnectorSlug === 'grdfgrandlyon' && (
- <div className="koauthform-infotext text-16-normal">
- {t('auth.' + konnectorSlug + '.with_account.subtitle1_info')}
- </div>
- )}
-
- <div className="koauthform-subtitle text-18-bold">
- {t('auth.' + konnectorSlug + '.with_account.subtitle2')}
- </div>
- <div className="koauthform-button">
- <Button
- aria-label={t('auth.accessibility.button_create_account')}
- onClick={togglePartnerConnectionModal}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- >
- {t('auth.' + konnectorSlug + '.with_account.button_create_account')}
- </Button>
- </div>
-
- <div className="koauthform-infotext text-16-normal">
- {t('auth.' + `${konnectorSlug}` + '.with_account.subtitle2_info')}
- </div>
- <div className="koauthform-button">
- <Button
- aria-label={t('auth.accessibility.button_goto_guide')}
- onClick={goToGuide}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- >
- {t('auth.' + konnectorSlug + '.with_account.button_goto_guide')}
- </Button>
- </div>
- </div>
- )
-}
-
-export default ConnectionOAuthWithPartnerAccount
diff --git a/src/components/Connection/EPGLConnect/EpglBill.tsx b/src/components/Connection/EPGLConnect/EpglBill.tsx
new file mode 100644
index 000000000..7662a9112
--- /dev/null
+++ b/src/components/Connection/EPGLConnect/EpglBill.tsx
@@ -0,0 +1,43 @@
+import Button from '@material-ui/core/Button'
+import WaterBillIcon from 'assets/icons/visu/onboarding/water_bill.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { decoreText } from 'utils/decoreText'
+import '../connection.scss'
+
+interface EpglBillProps {
+ togglePartnerConnectionModal: () => void
+}
+
+const EpglBill = ({ togglePartnerConnectionModal }: EpglBillProps) => {
+ const { t } = useI18n()
+
+ return (
+ <div className="connection-form">
+ <p className="connection-form-title eglgrandlyon text-20-bold">
+ {t('auth.eglgrandlyon.no_account.title')}
+ </p>
+
+ <StyledIcon icon={WaterBillIcon} size={180} />
+ <p className={'connection-form-subtitle eglgrandlyon text-16-regular'}>
+ {decoreText(t('auth.eglgrandlyon.bill'))}
+ </p>
+
+ <div className="connection-form-button">
+ <Button
+ aria-label={t('auth.eglgrandlyon.accessibility.connect')}
+ onClick={togglePartnerConnectionModal}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.eglgrandlyon.connect')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default EpglBill
diff --git a/src/components/Connection/EPGLConnect/EpglForm.tsx b/src/components/Connection/EPGLConnect/EpglForm.tsx
new file mode 100644
index 000000000..670f7f222
--- /dev/null
+++ b/src/components/Connection/EPGLConnect/EpglForm.tsx
@@ -0,0 +1,30 @@
+import FormLogin from 'components/Connection/FormLogin'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidStatus } from 'models'
+import React from 'react'
+import '../connection.scss'
+
+interface EpglFormProps {
+ fluidStatus: FluidStatus
+ hasCreatedAccount: boolean
+}
+
+const EpglForm = ({ fluidStatus, hasCreatedAccount }: EpglFormProps) => {
+ const { t } = useI18n()
+
+ return (
+ <div className="connection-form">
+ {hasCreatedAccount && (
+ <p className="connection-form-title eglgrandlyon text-20-bold">
+ {t('auth.eglgrandlyon.with_account.title')}
+ </p>
+ )}
+ <div className="connection-form-subtitle text-18-bold">
+ {t('auth.eglgrandlyon.with_account.subtitle1')}
+ </div>
+ <FormLogin fluidStatus={fluidStatus} />
+ </div>
+ )
+}
+
+export default EpglForm
diff --git a/src/components/Connection/EPGLConnect/EpglInit.tsx b/src/components/Connection/EPGLConnect/EpglInit.tsx
new file mode 100644
index 000000000..393d1a07b
--- /dev/null
+++ b/src/components/Connection/EPGLConnect/EpglInit.tsx
@@ -0,0 +1,48 @@
+import EpglConnectModal from 'components/Connection/PartnerConnectModal/EpglConnectModal'
+import { FluidStatus } from 'models'
+import React, { useCallback, useState } from 'react'
+import '../connection.scss'
+import EpglBill from './EpglBill'
+import EpglForm from './EpglForm'
+
+interface EpglInitProps {
+ fluidStatus: FluidStatus
+}
+
+const EpglInit: React.FC<EpglInitProps> = ({ fluidStatus }: EpglInitProps) => {
+ const siteLink: string = fluidStatus.connection.konnectorConfig.siteLink
+
+ const [openModal, setOpenModal] = useState(false)
+ const [showForm, setShowForm] = useState(false)
+ const [hasCreatedAccount, setHasCreatedAccount] = useState(false)
+
+ const toggleModal = useCallback(() => {
+ setOpenModal(prev => !prev)
+ }, [])
+
+ const goToPartnerSite = useCallback(() => {
+ window.open(siteLink, '_blank')
+ }, [siteLink])
+
+ return (
+ <>
+ {!showForm ? (
+ <EpglBill togglePartnerConnectionModal={toggleModal} />
+ ) : (
+ <EpglForm
+ fluidStatus={fluidStatus}
+ hasCreatedAccount={hasCreatedAccount}
+ />
+ )}
+ <EpglConnectModal
+ open={openModal}
+ handleCloseClick={toggleModal}
+ setShowForm={setShowForm}
+ goToPartnerSite={goToPartnerSite}
+ setHasCreatedAccount={setHasCreatedAccount}
+ />
+ </>
+ )
+}
+
+export default EpglInit
diff --git a/src/components/Connection/FormLogin.tsx b/src/components/Connection/FormLogin.tsx
index ba3f0171d..d1044446f 100644
--- a/src/components/Connection/FormLogin.tsx
+++ b/src/components/Connection/FormLogin.tsx
@@ -1,24 +1,22 @@
-import React, { useState, useEffect } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { Account, AccountAuthData, FluidStatus } from 'models'
-import './formLogin.scss'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import Button from '@material-ui/core/Button'
+import * as Sentry from '@sentry/react'
import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
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 'enum/fluid.enum'
+import { Account, AccountAuthData, FluidStatus } from 'models'
+import React, { useEffect, useState } from 'react'
import { getPartnerPicto } from 'utils/picto'
-import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
-import * as Sentry from '@sentry/react'
+import './formLogin.scss'
interface FormLoginProps {
fluidStatus: FluidStatus
- highlightedStyle?: boolean
}
const FormLogin: React.FC<FormLoginProps> = ({
fluidStatus,
- highlightedStyle = true,
}: FormLoginProps) => {
const { t } = useI18n()
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
@@ -32,7 +30,7 @@ const FormLogin: React.FC<FormLoginProps> = ({
const [error, setError] = useState<string>('')
const [loading, setLoading] = useState<boolean>(false)
- const icon = getPartnerPicto(konnectorSlug, highlightedStyle)
+ const icon = getPartnerPicto(konnectorSlug)
const [connect, update, connectError] = useKonnectorAuth(
fluidStatus,
login,
@@ -115,8 +113,8 @@ const FormLogin: React.FC<FormLoginProps> = ({
? 'form-control form-input'
: 'form-control form-input --error'
}
- aria-label={t('auth.' + konnectorSlug + '.connect.login')}
- placeholder={t('auth.' + konnectorSlug + '.connect.login')}
+ aria-label={t('auth.' + konnectorSlug + '.connect_form.login')}
+ placeholder={t('auth.' + konnectorSlug + '.connect_form.login')}
name="login"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
changeLogin(e.target.value)
@@ -134,8 +132,8 @@ const FormLogin: React.FC<FormLoginProps> = ({
? 'form-control form-input'
: 'form-control form-input --error'
}
- aria-label={t('auth.' + konnectorSlug + '.connect.password')}
- placeholder={t('auth.' + konnectorSlug + '.connect.password')}
+ aria-label={t('auth.' + konnectorSlug + '.connect_form.password')}
+ placeholder={t('auth.' + konnectorSlug + '.connect_form.password')}
name="password"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
changePassword(e.target.value)
@@ -153,30 +151,25 @@ const FormLogin: React.FC<FormLoginProps> = ({
</span>
</div>
<div className="form-message">{error === '' ? null : error}</div>
- <div className="kloginauthform">
- <div className="kloginauthform-button">
- <Button
- type="submit"
- aria-label={t('auth.accessibility.button_connect')}
- disabled={loading}
- classes={{
- root: `${
- highlightedStyle ? 'btn-highlight' : 'btn-secondary-negative'
- }`,
- label: 'text-18-bold',
- }}
- >
- <div className="authform-button-content">
- <div className="authform-button-content-icon">
- {icon && <StyledIcon icon={icon} size={80} />}
- </div>
- <div className="authform-button-text text-18-bold">
- <div>{t('auth.' + konnectorSlug + '.connect.label1')}</div>
- <div>{t('auth.' + konnectorSlug + '.connect.label2')}</div>
- </div>
+ <div className="connection-form-connect-button">
+ <Button
+ type="submit"
+ aria-label={t('auth.accessibility.button_connect')}
+ disabled={loading}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ >
+ <div className="connection-form-connect-button-content">
+ <div className="connection-form-connect-button-content-icon">
+ {icon && <StyledIcon icon={icon} size={80} />}
+ </div>
+ <div className="connection-form-connect-button-text text-18-bold">
+ <div>{t('auth.' + konnectorSlug + '.connect_form.label')}</div>
</div>
- </Button>
- </div>
+ </div>
+ </Button>
</div>
</form>
)
diff --git a/src/components/Connection/FormOAuth.tsx b/src/components/Connection/FormOAuth.tsx
index eb30fdc60..08dd87b65 100644
--- a/src/components/Connection/FormOAuth.tsx
+++ b/src/components/Connection/FormOAuth.tsx
@@ -1,6 +1,4 @@
import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -11,20 +9,16 @@ import { useDispatch, useSelector } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import { AppStore } from 'store'
import { setShouldRefreshConsent } from 'store/global/global.actions'
-import { getPartnerPicto } from 'utils/picto'
-import './auth.scss'
interface FormOAuthProps {
konnector: Konnector | null
onSuccess: Function
- highlightedStyle?: boolean
fluidStatus: FluidStatus
}
const FormOAuth: React.FC<FormOAuthProps> = ({
konnector,
onSuccess,
- highlightedStyle = true,
fluidStatus,
}: FormOAuthProps) => {
const IDLE = 'idle'
@@ -67,10 +61,6 @@ const FormOAuth: React.FC<FormOAuthProps> = ({
endOAuth()
}, [endOAuth])
- const icon = getPartnerPicto(
- konnector ? konnector.slug : '',
- highlightedStyle
- )
const isWaiting = status === WAITING
useEffect(() => {
@@ -91,25 +81,13 @@ const FormOAuth: React.FC<FormOAuthProps> = ({
onClick={startOAuth}
disabled={isWaiting}
classes={{
- root: `${
- highlightedStyle ? 'btn-highlight' : 'btn-secondary-negative'
- }`,
- label: 'text-18-bold',
+ root: 'btn-highlight',
+ label: 'text-16-bold',
}}
>
- <div className="authform-button-content">
- <div className="authform-button-content-icon">
- {isWaiting ? (
- <Loader color="black" />
- ) : (
- <StyledIcon icon={icon} size={80} />
- )}
- </div>
- <div className="authform-button-text text-18-bold">
- <div>{t('auth.' + konnector.slug + '.connect.label1')}</div>
- <div>{t('auth.' + konnector.slug + '.connect.label2')}</div>
- </div>
- </div>
+ {isWaiting
+ ? t('auth.connect_oauth.loading')
+ : t('auth.button_validate')}
</Button>
{isWaiting && (
<OAuthWindow
diff --git a/src/components/Connection/GRDFConnect/GrdfBill.tsx b/src/components/Connection/GRDFConnect/GrdfBill.tsx
new file mode 100644
index 000000000..2a7e17bb2
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/GrdfBill.tsx
@@ -0,0 +1,42 @@
+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 React from 'react'
+import { decoreText } from 'utils/decoreText'
+import '../connection.scss'
+
+interface GrdfBillProps {
+ togglePartnerConnectionModal: () => void
+}
+
+const GrdfBill = ({ togglePartnerConnectionModal }: GrdfBillProps) => {
+ const { t } = useI18n()
+
+ 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'}>
+ {decoreText(t('auth.grdfgrandlyon.bill'))}
+ </p>
+
+ <div className="connection-form-button">
+ <Button
+ aria-label={t('auth.grdfgrandlyon.accessibility.connect')}
+ onClick={togglePartnerConnectionModal}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.grdfgrandlyon.connect')}
+ </Button>
+ </div>
+ </div>
+ )
+}
+
+export default GrdfBill
diff --git a/src/components/Connection/GRDFConnect/GrdfForm.tsx b/src/components/Connection/GRDFConnect/GrdfForm.tsx
new file mode 100644
index 000000000..891e9cb64
--- /dev/null
+++ b/src/components/Connection/GRDFConnect/GrdfForm.tsx
@@ -0,0 +1,47 @@
+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 '../connection.scss'
+
+interface GrdfFormProps {
+ togglePartnerConnectionModal: () => void
+}
+
+const GrdfForm = ({ togglePartnerConnectionModal }: GrdfFormProps) => {
+ const { t } = useI18n()
+
+ 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={togglePartnerConnectionModal}
+ classes={{
+ root: 'btn-highlight',
+ 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/ConnectionOAuth.tsx b/src/components/Connection/GRDFConnect/GrdfInit.tsx
similarity index 55%
rename from src/components/Connection/ConnectionOAuth.tsx
rename to src/components/Connection/GRDFConnect/GrdfInit.tsx
index a87eaa1b7..4414d9b03 100644
--- a/src/components/Connection/ConnectionOAuth.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfInit.tsx
@@ -1,33 +1,31 @@
-import React, { useCallback, useState } from 'react'
+import GrdfConnectModal from 'components/Connection/PartnerConnectModal/GrdfConnectModal'
import { useClient } from 'cozy-client'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { FluidConnection, FluidStatus, Konnector, Trigger } from 'models'
+import React, { useCallback, useState } from 'react'
import { useDispatch } from 'react-redux'
-import './connectionOAuth.scss'
-import { Konnector, Trigger, FluidStatus, FluidConnection } from 'models'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
-import { updatedFluidConnection } from 'store/global/global.actions'
-import { UsageEventType } from 'enum/usageEvent.enum'
import UsageEventService from 'services/usageEvent.service'
-import PartnerConnectionStepsModal from 'components/PartnerConnectionStepsModal/PartnerConnectionStepsModal'
-import ConnectionOAuthNoPartnerAccount from 'components/Connection/ConnectionOAuthNoPartnerAccount'
-import ConnectionOAuthWithPartnerAccount from 'components/Connection/ConnectionOAuthWithPartnerAccount'
+import { updatedFluidConnection } from 'store/global/global.actions'
+import '../connection.scss'
+import GrdfBill from './GrdfBill'
+import GrdfForm from './GrdfForm'
-interface ConnectionOAuthProps {
+interface GrdfInitProps {
fluidStatus: FluidStatus
onSuccess: Function
}
-const ConnectionOAuth: React.FC<ConnectionOAuthProps> = ({
+const GrdfInit: React.FC<GrdfInitProps> = ({
fluidStatus,
onSuccess,
-}: ConnectionOAuthProps) => {
+}: GrdfInitProps) => {
const client = useClient()
const dispatch = useDispatch()
- const [openPartenerConnectionModal, setOpenPartenerConnectionModal] =
- useState<boolean>(false)
- const [hasSeenPartnerConnectionModal, setHasSeenPartnerConnectionModal] =
- useState<boolean>(false)
+ const [openModal, setOpenModal] = useState(false)
+ const [showForm, setShowForm] = useState(false)
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
const siteLink: string = fluidStatus.connection.konnectorConfig.siteLink
@@ -81,43 +79,33 @@ const ConnectionOAuth: React.FC<ConnectionOAuthProps> = ({
]
)
- const togglePartnerConnectionModal = useCallback(() => {
- setOpenPartenerConnectionModal((prev: boolean) => !prev)
+ const toggleModal = useCallback(() => {
+ setOpenModal((prev: boolean) => !prev)
}, [])
- const handleEndSteps = useCallback(() => {
- togglePartnerConnectionModal()
+ const goToPartnerSite = useCallback(() => {
window.open(siteLink, '_blank')
- setHasSeenPartnerConnectionModal(true)
- }, [siteLink, togglePartnerConnectionModal])
+ }, [siteLink])
return (
<>
- {hasSeenPartnerConnectionModal ? (
- <ConnectionOAuthWithPartnerAccount
- konnectorSlug={konnectorSlug}
- konnector={konnector}
- fluidStatus={fluidStatus}
- handleSuccess={handleSuccess}
- togglePartnerConnectionModal={togglePartnerConnectionModal}
- />
+ {!showForm ? (
+ <GrdfBill togglePartnerConnectionModal={toggleModal} />
) : (
- <ConnectionOAuthNoPartnerAccount
- konnectorSlug={konnectorSlug}
- konnector={konnector}
- fluidStatus={fluidStatus}
- handleSuccess={handleSuccess}
- togglePartnerConnectionModal={togglePartnerConnectionModal}
- />
+ <GrdfForm togglePartnerConnectionModal={toggleModal} />
)}
- <PartnerConnectionStepsModal
- fluidType={fluidStatus.fluidType}
- open={openPartenerConnectionModal}
- handleCloseClick={togglePartnerConnectionModal}
- handleEndSteps={handleEndSteps}
+ <GrdfConnectModal
+ open={openModal}
+ showForm={showForm}
+ konnector={konnector}
+ fluidStatus={fluidStatus}
+ handleCloseClick={toggleModal}
+ setShowForm={setShowForm}
+ goToPartnerSite={goToPartnerSite}
+ handleSuccess={handleSuccess}
/>
</>
)
}
-export default ConnectionOAuth
+export default GrdfInit
diff --git a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
new file mode 100644
index 000000000..8987d385c
--- /dev/null
+++ b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
@@ -0,0 +1,136 @@
+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 { Step } from 'models/step.model'
+import React, { useCallback, useEffect, useState } from 'react'
+import './PartnerConnectModal.scss'
+import EpglCreateAccount from './Steps/EpglCreateAccount'
+import EpglDoYouHaveAccount from './Steps/EpglDoYouHaveAccount'
+
+enum StepEnum {
+ DoYouHaveAccount,
+ CreateAccount,
+}
+
+interface EpglConnectModalProps {
+ open: boolean
+ handleCloseClick: () => void
+ setShowForm: (value: boolean) => void
+ goToPartnerSite: () => void
+ setHasCreatedAccount: (value: boolean) => void
+}
+
+const EpglConnectModal: React.FC<EpglConnectModalProps> = ({
+ open,
+ handleCloseClick,
+ setShowForm,
+ goToPartnerSite,
+ setHasCreatedAccount,
+}) => {
+ const { t } = useI18n()
+ const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
+ useEffect(() => {
+ if (open) {
+ setCurrentStep(0)
+ }
+ }, [open])
+
+ const goToCreateAccountStep = useCallback(() => {
+ setCurrentStep(StepEnum.CreateAccount)
+ }, [])
+ const goToDoYouHaveAccountStep = useCallback(() => {
+ setCurrentStep(StepEnum.DoYouHaveAccount)
+ }, [])
+ const handleGoToPartnerSite = useCallback(() => {
+ goToPartnerSite()
+ setHasCreatedAccount(true)
+ setShowForm(true)
+ handleCloseClick()
+ }, [goToPartnerSite, handleCloseClick, setHasCreatedAccount, setShowForm])
+ const handleShowForm = useCallback(() => {
+ setShowForm(true)
+ handleCloseClick()
+ }, [handleCloseClick, setShowForm])
+
+ const steps: Record<StepEnum, Step> = {
+ [StepEnum.DoYouHaveAccount]: {
+ content: <EpglDoYouHaveAccount />,
+ leftButton: (
+ <Button
+ onClick={goToCreateAccountStep}
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.button_create_account')}
+ </Button>
+ ),
+ rightButton: (
+ <Button
+ onClick={handleShowForm}
+ classes={{
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.button_connect')}
+ </Button>
+ ),
+ },
+ [StepEnum.CreateAccount]: {
+ content: <EpglCreateAccount />,
+ leftButton: (
+ <Button
+ onClick={goToDoYouHaveAccountStep}
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-bold',
+ }}
+ >
+ {`< ${t('auth.button_previous')}`}
+ </Button>
+ ),
+ rightButton: (
+ <Button
+ onClick={handleGoToPartnerSite}
+ classes={{
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.eglgrandlyon.button_go_to_partner_site')}
+ </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}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
+ <div className="partners-connection-step-content">
+ {steps[currentStep].content}
+ </div>
+ <div className="partners-connection-step-navigation">
+ {steps[currentStep].leftButton}
+ {steps[currentStep].rightButton}
+ </div>
+ </Dialog>
+ )
+}
+
+export default EpglConnectModal
diff --git a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
new file mode 100644
index 000000000..75edfed29
--- /dev/null
+++ b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
@@ -0,0 +1,172 @@
+import { Button, Dialog, IconButton } from '@material-ui/core'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import FormOAuth from 'components/Connection/FormOAuth'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { FluidStatus, Konnector } from 'models'
+import { Step } from 'models/step.model'
+import React, { useCallback, useEffect, useState } from 'react'
+import './PartnerConnectModal.scss'
+import GrdfCreateAccount from './Steps/GrdfCreateAccount'
+import GrdfDoYouHaveAccount from './Steps/GrdfDoYouHaveAccount'
+import GiveConsent from './Steps/GrdfGiveConsent'
+
+enum StepEnum {
+ DoYouHaveAccount,
+ CreateAccount,
+ GiveConsent,
+}
+
+interface GrdfConnectModalProps {
+ open: boolean
+ showForm: boolean
+ konnector: Konnector | null
+ fluidStatus: FluidStatus
+ handleCloseClick: () => void
+ setShowForm: (value: boolean) => void
+ goToPartnerSite: () => void
+ handleSuccess: (accountId: string) => Promise<void>
+}
+
+const GrdfConnectModal: React.FC<GrdfConnectModalProps> = ({
+ open,
+ showForm,
+ konnector,
+ fluidStatus,
+ handleCloseClick,
+ setShowForm,
+ goToPartnerSite,
+ handleSuccess,
+}) => {
+ const { t } = useI18n()
+ const [currentStep, setCurrentStep] = useState(StepEnum.DoYouHaveAccount)
+ useEffect(() => {
+ if (open) {
+ showForm
+ ? setCurrentStep(StepEnum.GiveConsent)
+ : setCurrentStep(StepEnum.DoYouHaveAccount)
+ }
+ }, [showForm, open])
+
+ const goToCreateAccountStep = useCallback(() => {
+ setCurrentStep(StepEnum.CreateAccount)
+ }, [])
+ const goToGiveConsentStep = useCallback(() => {
+ setCurrentStep(StepEnum.GiveConsent)
+ }, [])
+ const goToDoYouHaveAccountStep = useCallback(() => {
+ setCurrentStep(StepEnum.DoYouHaveAccount)
+ }, [])
+ const handleGoToPartnerSite = useCallback(() => {
+ goToPartnerSite()
+ setShowForm(true)
+ handleCloseClick()
+ }, [goToPartnerSite, handleCloseClick, setShowForm])
+ const handleGiveConsentPrevious = useCallback(
+ () =>
+ showForm ? handleCloseClick() : setCurrentStep(StepEnum.DoYouHaveAccount),
+ [handleCloseClick, showForm]
+ )
+
+ const steps: Record<StepEnum, Step> = {
+ [StepEnum.DoYouHaveAccount]: {
+ content: <GrdfDoYouHaveAccount />,
+ leftButton: (
+ <Button
+ onClick={goToCreateAccountStep}
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.button_create_account')}
+ </Button>
+ ),
+ rightButton: (
+ <Button
+ onClick={goToGiveConsentStep}
+ classes={{
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.button_has_account')}
+ </Button>
+ ),
+ },
+ [StepEnum.CreateAccount]: {
+ content: <GrdfCreateAccount />,
+ leftButton: (
+ <Button
+ onClick={goToDoYouHaveAccountStep}
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-bold',
+ }}
+ >
+ {`< ${t('auth.button_previous')}`}
+ </Button>
+ ),
+ rightButton: (
+ <Button
+ onClick={handleGoToPartnerSite}
+ classes={{
+ root: 'btn-profile-next',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('auth.grdfgrandlyon.button_go_to_partner_site')}
+ </Button>
+ ),
+ },
+ [StepEnum.GiveConsent]: {
+ content: <GiveConsent />,
+ leftButton: (
+ <Button
+ onClick={handleGiveConsentPrevious}
+ classes={{
+ root: 'btn-profile-back',
+ label: 'text-16-bold',
+ }}
+ >
+ {`< ${t('auth.button_previous')}`}
+ </Button>
+ ),
+ rightButton: (
+ <FormOAuth
+ konnector={konnector}
+ onSuccess={handleSuccess}
+ fluidStatus={fluidStatus}
+ />
+ ),
+ },
+ }
+
+ 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].leftButton}
+ {steps[currentStep].rightButton}
+ </div>
+ </Dialog>
+ )
+}
+
+export default GrdfConnectModal
diff --git a/src/components/PartnerConnectionStepsModal/partnerConnectionStepModal.scss b/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
similarity index 70%
rename from src/components/PartnerConnectionStepsModal/partnerConnectionStepModal.scss
rename to src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
index 695f3c1b4..fcfc53632 100644
--- a/src/components/PartnerConnectionStepsModal/partnerConnectionStepModal.scss
+++ b/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
@@ -1,3 +1,5 @@
+@import 'src/styles/base/color';
+
.partners-connection-step-content {
padding: 0.5rem 0.5rem 0;
text-align: center;
@@ -18,23 +20,17 @@
.partners-connection-step-navigation {
width: 100%;
display: flex;
- align-items: center;
- justify-content: space-evenly;
- transition: all 300ms ease;
- .rounded {
- border-radius: 22px;
- margin-left: 1rem;
- margin-right: 1rem;
- }
+ justify-content: center;
+ gap: 1rem;
.disabled {
opacity: 0;
}
- button.navigation-button {
+ button {
max-width: 10rem;
min-height: 2.5rem;
- margin: 0.375rem 0.5rem;
+ margin-top: 0.5rem;
padding: 0rem 1rem;
}
}
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
new file mode 100644
index 000000000..1c709db2d
--- /dev/null
+++ b/src/components/Connection/PartnerConnectModal/Steps/EpglCreateAccount.tsx
@@ -0,0 +1,23 @@
+import EglIcon from 'assets/icons/visu/onboarding/egl.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { decoreText } from 'utils/decoreText'
+import './stepDetail.scss'
+
+const EpglCreateAccount: React.FC = () => {
+ const { t } = useI18n()
+
+ return (
+ <div className="step-detail-info">
+ <StyledIcon className="info-icon" icon={EglIcon} size={220} />
+ <div className="info-content text-18-normal">
+ <div className="info-content-text">
+ {decoreText(t('auth.eglgrandlyon.step2.info1'))}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default EpglCreateAccount
diff --git a/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
new file mode 100644
index 000000000..272d36ea7
--- /dev/null
+++ b/src/components/Connection/PartnerConnectModal/Steps/EpglDoYouHaveAccount.tsx
@@ -0,0 +1,26 @@
+import BrowserEgl from 'assets/icons/visu/onboarding/browser_egl.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { decoreText } from 'utils/decoreText'
+import './stepDetail.scss'
+
+const EpglDoYouHaveAccount: React.FC = () => {
+ const { t } = useI18n()
+
+ return (
+ <div className="step-detail-info">
+ <StyledIcon className="info-icon" icon={BrowserEgl} size={150} />
+ <div className="info-content text-18-normal">
+ <div className="info-content-text">
+ {decoreText(t('auth.eglgrandlyon.step1.info1'))}
+ </div>
+ <div className="info-content-text">
+ {decoreText(t('auth.eglgrandlyon.step1.info2'))}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default EpglDoYouHaveAccount
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
new file mode 100644
index 000000000..0a5e93611
--- /dev/null
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfCreateAccount.tsx
@@ -0,0 +1,23 @@
+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 { decoreText } from 'utils/decoreText'
+import './stepDetail.scss'
+
+const GrdfCreateAccount: React.FC = () => {
+ 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">
+ {decoreText(t('auth.grdfgrandlyon.step2.info1'))}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default GrdfCreateAccount
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
new file mode 100644
index 000000000..eaddd5946
--- /dev/null
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfDoYouHaveAccount.tsx
@@ -0,0 +1,30 @@
+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 { decoreText } from 'utils/decoreText'
+import './stepDetail.scss'
+
+const GrdfDoYouHaveAccount: React.FC = () => {
+ 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">
+ {decoreText(t('auth.grdfgrandlyon.step1.info1'))}
+ {decoreText(t('auth.grdfgrandlyon.step1.info2'))}
+ </div>
+ <div className="info-content-text">
+ {decoreText(t('auth.grdfgrandlyon.step1.info3'))}
+ </div>
+ <div className="info-content-text">
+ {decoreText(t('auth.grdfgrandlyon.step1.info4'))}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default GrdfDoYouHaveAccount
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
new file mode 100644
index 000000000..5b5c567b8
--- /dev/null
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfGiveConsent.tsx
@@ -0,0 +1,29 @@
+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 { decoreText } from 'utils/decoreText'
+import './stepDetail.scss'
+
+const GrdfGiveConsent: React.FC = () => {
+ 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">
+ {decoreText(t('auth.grdfgrandlyon.step3.info1'))}
+ </div>
+ <div className="info-content-text">
+ {decoreText(t('auth.grdfgrandlyon.step3.info2'))}
+ </div>
+ <div className="info-content-text">
+ {decoreText(t('auth.grdfgrandlyon.step3.info3'))}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default GrdfGiveConsent
diff --git a/src/components/PartnerConnectionStepsModal/stepDetail.scss b/src/components/Connection/PartnerConnectModal/Steps/stepDetail.scss
similarity index 70%
rename from src/components/PartnerConnectionStepsModal/stepDetail.scss
rename to src/components/Connection/PartnerConnectModal/Steps/stepDetail.scss
index 7ba6f5d9d..0a51f47bf 100644
--- a/src/components/PartnerConnectionStepsModal/stepDetail.scss
+++ b/src/components/Connection/PartnerConnectModal/Steps/stepDetail.scss
@@ -14,15 +14,19 @@
min-height: 7.75rem;
display: flex;
flex-direction: column;
- justify-content: center;
+ gap: 1rem;
margin-bottom: 1rem;
.info-content-text {
- margin: 0.25rem 0;
- color: white;
span {
color: $gold-shadow;
- font-weight: 700;
+ font-weight: bold;
+ }
+ p {
+ margin: 0;
+ font-style: italic;
+ font-size: 0.875rem;
+ line-height: 1rem;
}
}
}
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index 6cf6b71d6..a2d3b9d3f 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -1,5 +1,5 @@
import { Button } from '@material-ui/core'
-import ElectricityBillIcon from 'assets/icons/visu/partnerSteps/electricity_bill.svg'
+import ElectricityBillIcon from 'assets/icons/visu/onboarding/electricity_bill.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -43,16 +43,18 @@ const SgeInit: React.FC<SgeInitProps> = ({ fluidStatus }: SgeInitProps) => {
}, [account, connect, dispatch, sgeConnect, update])
return (
- <div className="kloginform sge-connect">
- <p className={`kloginform-title ${konnectorSlug} text-20-bold`}>
+ <div className="connection-form">
+ <p className={`connection-form-title ${konnectorSlug} text-20-bold`}>
{t(`auth.${konnectorSlug}.title`)}
</p>
<StyledIcon icon={ElectricityBillIcon} size={180} />
- <p className={`sge-subtitle ${konnectorSlug} text-16-regular`}>
+ <p
+ className={`connection-form-subtitle ${konnectorSlug} text-16-regular`}
+ >
{decoreText(t('auth.' + `${konnectorSlug}` + '.bill'))}
</p>
- <div className="kloginform-button">
+ <div className="connection-form-button">
<Button
aria-label={t(`auth.${konnectorSlug}.accessibility.connect`)}
onClick={() => {
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
index 1427c5b55..8e4012899 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
@@ -39,10 +39,10 @@ exports[`SgeInit component should be rendered correctly 1`] = `
}
>
<div
- className="kloginform sge-connect"
+ className="connection-form"
>
<p
- className="kloginform-title enedissgegrandlyon text-20-bold"
+ className="connection-form-title enedissgegrandlyon text-20-bold"
>
auth.enedissgegrandlyon.title
</p>
@@ -78,12 +78,12 @@ exports[`SgeInit component should be rendered correctly 1`] = `
</Icon>
</StyledIcon>
<p
- className="sge-subtitle enedissgegrandlyon text-16-regular"
+ className="connection-form-subtitle enedissgegrandlyon text-16-regular"
>
auth.enedissgegrandlyon.bill
</p>
<div
- className="kloginform-button"
+ className="connection-form-button"
>
<WithStyles(ForwardRef(Button))
aria-label="auth.enedissgegrandlyon.accessibility.connect"
diff --git a/src/components/Connection/__snapshots__/Connection.spec.tsx.snap b/src/components/Connection/__snapshots__/Connection.spec.tsx.snap
index c3cfe1573..0dc42e448 100644
--- a/src/components/Connection/__snapshots__/Connection.spec.tsx.snap
+++ b/src/components/Connection/__snapshots__/Connection.spec.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Connection component test should call ConnectionLogin 1`] = `
+exports[`Connection component test should call EpglInit 1`] = `
<Provider
store={
Object {
@@ -89,10 +89,10 @@ exports[`Connection component test should call ConnectionLogin 1`] = `
}
>
<div
- className="kloginform sge-connect"
+ className="connection-form"
>
<p
- className="kloginform-title enedissgegrandlyon text-20-bold"
+ className="connection-form-title enedissgegrandlyon text-20-bold"
>
auth.enedissgegrandlyon.title
</p>
@@ -128,12 +128,12 @@ exports[`Connection component test should call ConnectionLogin 1`] = `
</Icon>
</StyledIcon>
<p
- className="sge-subtitle enedissgegrandlyon text-16-regular"
+ className="connection-form-subtitle enedissgegrandlyon text-16-regular"
>
auth.enedissgegrandlyon.bill
</p>
<div
- className="kloginform-button"
+ className="connection-form-button"
>
<WithStyles(ForwardRef(Button))
aria-label="auth.enedissgegrandlyon.accessibility.connect"
@@ -274,7 +274,7 @@ exports[`Connection component test should call ConnectionLogin 1`] = `
</Provider>
`;
-exports[`Connection component test should call ConnectionOAuth 1`] = `
+exports[`Connection component test should call GrdfInit 1`] = `
<Provider
store={
Object {
@@ -342,7 +342,7 @@ exports[`Connection component test should call ConnectionOAuth 1`] = `
onSuccess={[Function]}
>
<div
- id="ConnectionOAuth"
+ id="GrdfInit"
/>
</mockConstructor>
</div>
diff --git a/src/components/Connection/auth.scss b/src/components/Connection/auth.scss
deleted file mode 100644
index 11caa2a60..000000000
--- a/src/components/Connection/auth.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.authform-button-content {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- @media #{$large-phone} {
- justify-content: left;
- }
- .authform-button-content-icon {
- margin: 0 0.5rem 0 0;
- }
- .authform-button-text {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- text-align: left;
- max-width: 13.5rem;
- }
-}
diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss
index 51d095986..c12e34bfa 100644
--- a/src/components/Connection/connection.scss
+++ b/src/components/Connection/connection.scss
@@ -9,3 +9,93 @@
padding-bottom: 1rem;
}
}
+
+.connection-form {
+ text-align: center;
+ span {
+ color: $gold-shadow;
+ font-weight: bold;
+ }
+ .connection-form-title {
+ margin-top: 0;
+ padding: 0 1rem;
+ &.enedissgegrandlyon {
+ color: $elec-color;
+ }
+ &.grdfgrandlyon {
+ color: $gas-color;
+ }
+ &.eglgrandlyon {
+ color: $water-color;
+ }
+ }
+ .connection-form-subtitle {
+ color: $white;
+ }
+ .connection-form-infotext {
+ color: $grey-bright;
+ }
+
+ button.btn-secondary-positive {
+ span:first-child {
+ color: $grey-bright;
+ }
+ }
+
+ .connection-form-button {
+ margin: 0 0.5rem;
+ button.btn-highlight {
+ padding: 0.5rem;
+ margin-top: 0.5rem;
+ margin-bottom: 0rem;
+ height: 2.5rem;
+ max-width: 22.5rem;
+ }
+ button.btn-secondary-negative {
+ padding: 0.5rem;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+ height: 2.5rem;
+ max-width: 22.5rem;
+ }
+ }
+ .connection-form-connect-button {
+ margin: 0 0.5rem;
+ button.btn-highlight {
+ padding: 0.5rem;
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
+ height: 5rem;
+ max-width: 22.5rem;
+ }
+ button.btn-secondary-negative {
+ padding: 0.5rem;
+ margin-top: 1rem;
+ margin-bottom: 2.5rem;
+ height: 5rem;
+ max-width: 22.5rem;
+ }
+ &.grdf {
+ margin-top: 2rem;
+ }
+ .connection-form-connect-button-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ @media #{$large-phone} {
+ justify-content: left;
+ }
+ .connection-form-connect-button-content-icon {
+ margin: 0 0.5rem 0 0;
+ }
+ .connection-form-connect-button-text {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ text-align: left;
+ max-width: 13.5rem;
+ }
+ }
+ }
+}
diff --git a/src/components/Connection/connectionLogin.scss b/src/components/Connection/connectionLogin.scss
deleted file mode 100644
index 6cd0f09f4..000000000
--- a/src/components/Connection/connectionLogin.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@import 'src/styles/base/color';
-
-.kloginform {
- &.sge-connect {
- text-align: center;
- }
- .kloginform-title {
- text-align: center;
- margin-bottom: 0;
- padding: 0 1rem;
- &.enedissgegrandlyon {
- color: $elec-color;
- }
- &.grdfgrandlyon {
- color: $gas-color;
- }
- &.eglgrandlyon {
- color: $water-color;
- }
- }
- .kloginform-subtitle {
- text-align: center;
- color: $white;
- margin: 2.5rem 0 0.5rem;
- }
-
- .sge-subtitle {
- color: $white;
- text-align: center;
- span {
- font-weight: bold;
- color: $gold-shadow;
- }
- }
- .kloginform-infotext {
- text-align: center;
- color: $grey-bright;
- }
-
- button.btn-secondary-positive {
- span:first-child {
- color: $grey-bright;
- }
- }
-
- .kloginform-button {
- margin: 0 0.5rem;
- text-align: center;
- button.btn-highlight {
- padding: 0.5rem;
- margin-top: 0.5rem;
- margin-bottom: 0rem;
- height: 2.5rem;
- max-width: 22.5rem;
- }
- button.btn-secondary-negative {
- padding: 0.5rem;
- margin-top: 0.5rem;
- margin-bottom: 1.5rem;
- height: 2.5rem;
- max-width: 22.5rem;
- }
- }
- .kloginform-connect-button {
- margin: 0 0.5rem;
- text-align: center;
- button.btn-highlight {
- padding: 0.5rem;
- margin-top: 0.5rem;
- margin-bottom: 1rem;
- height: 5rem;
- max-width: 22.5rem;
- }
- button.btn-secondary-negative {
- padding: 0.5rem;
- margin-top: 1rem;
- margin-bottom: 2.5rem;
- height: 5rem;
- max-width: 22.5rem;
- }
- }
-}
diff --git a/src/components/Connection/connectionOAuth.scss b/src/components/Connection/connectionOAuth.scss
deleted file mode 100644
index b28c2d5ef..000000000
--- a/src/components/Connection/connectionOAuth.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.koauthform {
- .koauthform-title {
- text-align: center;
- margin-bottom: 0;
- padding: 0 1rem;
- &.enedisgrandlyon {
- color: $elec-color;
- }
- &.grdfgrandlyon {
- color: $gas-color;
- }
- &.eglgrandlyon {
- color: $water-color;
- }
- }
- .koauthform-subtitle {
- text-align: center;
- color: $white;
- margin: 2.5rem 0 0.5rem;
- }
- .koauthform-infotext {
- text-align: center;
- color: $grey-bright;
- }
-
- button.btn-secondary-positive {
- span:first-child {
- color: $grey-bright;
- }
- }
-
- .koauthform-button {
- margin: 0 0.5rem;
- text-align: center;
- button.btn-highlight {
- padding: 0.5rem;
- margin-top: 0.5rem;
- margin-bottom: 0rem;
- height: 2.5rem;
- max-width: 22.5rem;
- }
- button.btn-secondary-negative {
- padding: 0.5rem;
- margin-top: 0.5rem;
- margin-bottom: 1.5rem;
- height: 2.5rem;
- max-width: 22.5rem;
- }
- }
- .koauthform-connect-button {
- margin: 0 0.5rem;
- text-align: center;
- button.btn-highlight {
- padding: 0.5rem;
- margin-top: 0.5rem;
- margin-bottom: 1rem;
- height: 5rem;
- max-width: 22.5rem;
- }
- button.btn-secondary-negative {
- padding: 0.5rem;
- margin-top: 1rem;
- margin-bottom: 2.5rem;
- height: 5rem;
- max-width: 22.5rem;
- }
- }
-}
diff --git a/src/components/Connection/formLogin.scss b/src/components/Connection/formLogin.scss
index 469d0606f..861494685 100644
--- a/src/components/Connection/formLogin.scss
+++ b/src/components/Connection/formLogin.scss
@@ -1,27 +1,6 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-.kloginauthform {
- button.btn-secondary-positive {
- span:first-child {
- color: $grey-bright;
- }
- }
- .kloginauthform-text {
- color: $grey-bright;
- padding-top: 1rem;
- }
- .kloginauthform-button {
- margin-bottom: 1rem;
- button.btn-highlight {
- padding: 0.5rem;
- }
- button.btn-secondary-negative {
- padding: 0.5rem;
- }
- }
-}
-
.form {
margin: 0 1.3rem 1rem;
@media #{$large-phone} {
diff --git a/src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.spec.tsx b/src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.spec.tsx
deleted file mode 100644
index c8b94ee62..000000000
--- a/src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.spec.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import PartnerConnectionStepsModal from 'components/PartnerConnectionStepsModal/PartnerConnectionStepsModal'
-import { FluidType } from 'enum/fluid.enum'
-import { electricitySteps } from '../../../tests/__mocks__/stepsData.mock'
-import { Button, IconButton } from '@material-ui/core'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: () => {
- return {
- t: (str: string) => str,
- }
- },
- }
-})
-const mockGetPartnerSteps = jest.fn()
-jest.mock('utils/steps', () => {
- return {
- getPartnerSteps: () => mockGetPartnerSteps,
- }
-})
-const mockHandleCloseClick = jest.fn()
-const mockHandleEndSteps = jest.fn()
-
-describe('PartnerConnectionStepsModal component', () => {
- beforeEach(() => {
- mockGetPartnerSteps.mockClear()
- })
-
- it('should be rendered correctly', () => {
- mockGetPartnerSteps.mockReturnValue(electricitySteps)
- const component = mount(
- <PartnerConnectionStepsModal
- fluidType={FluidType.ELECTRICITY}
- open={true}
- handleCloseClick={mockHandleCloseClick}
- handleEndSteps={mockHandleEndSteps}
- />
- )
- expect(toJson(component)).toMatchSnapshot()
- })
-
- it('should close when user click on the button', async () => {
- mockGetPartnerSteps.mockReturnValue(electricitySteps)
- const component = mount(
- <PartnerConnectionStepsModal
- fluidType={FluidType.ELECTRICITY}
- open={true}
- handleCloseClick={mockHandleCloseClick}
- handleEndSteps={mockHandleEndSteps}
- />
- )
- component.find(IconButton).first().simulate('click')
- expect(mockHandleCloseClick).toBeCalled()
- })
-
- it('should go to next step when user click on next button', () => {
- mockGetPartnerSteps.mockReturnValue(electricitySteps)
- const component = mount(
- <PartnerConnectionStepsModal
- fluidType={FluidType.ELECTRICITY}
- open={true}
- handleCloseClick={mockHandleCloseClick}
- handleEndSteps={mockHandleEndSteps}
- />
- )
- component.find(Button).last().simulate('click')
- const step: string = component
- .find('.partners-connection-step-progress')
- .first()
- .text()
- expect(step).toEqual('2 / 3')
- })
-
- it('should handle the end of modal when user click on last button', () => {
- mockGetPartnerSteps.mockReturnValue(electricitySteps)
- const component = mount(
- <PartnerConnectionStepsModal
- fluidType={FluidType.ELECTRICITY}
- open={true}
- handleCloseClick={mockHandleCloseClick}
- handleEndSteps={mockHandleEndSteps}
- />
- )
- component.find(Button).last().simulate('click')
- component.find(Button).last().simulate('click')
- const step: string = component
- .find('.partners-connection-step-progress')
- .first()
- .text()
- expect(step).toEqual('3 / 3')
- component.find(Button).last().simulate('click')
- expect(mockHandleEndSteps).toBeCalled()
- })
-})
diff --git a/src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.tsx b/src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.tsx
deleted file mode 100644
index a5f41c520..000000000
--- a/src/components/PartnerConnectionStepsModal/PartnerConnectionStepsModal.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import './partnerConnectionStepModal.scss'
-import { Step } from 'models/step.model'
-import { Button, Dialog, IconButton } from '@material-ui/core'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import StepDetail from './StepDetail'
-import { FluidType } from 'enum/fluid.enum'
-import classNames from 'classnames'
-import { getPartnerSteps } from 'utils/steps'
-
-interface PartnerConnectionStepsModalProps {
- fluidType: FluidType
- open: boolean
- handleCloseClick: () => void
- handleEndSteps: () => void
-}
-
-const PartnerConnectionStepsModal = ({
- fluidType,
- open,
- handleCloseClick,
- handleEndSteps,
-}: PartnerConnectionStepsModalProps) => {
- const { t } = useI18n()
-
- const [steps, setSteps] = useState<Step[]>([])
- const [stepIndex, setStepIndex] = useState<number>(0)
-
- const goPrevStep = useCallback(() => {
- setStepIndex(prev => prev - 1)
- }, [])
-
- const goNextStep = useCallback(() => {
- setStepIndex(prev => prev + 1)
- }, [])
-
- useEffect(() => {
- if (open) {
- const newSteps: Step[] = getPartnerSteps(fluidType)
- setSteps(newSteps)
- setStepIndex(0)
- }
- }, [open, fluidType])
-
- return (
- <Dialog
- open={open && steps.length > 0}
- onClose={handleCloseClick}
- aria-labelledby={'accessibility-title'}
- classes={{
- root: 'modal-root',
- paper: 'modal-paper',
- }}
- >
- <div id={'accessibility-title'}>
- {t('partner_connection_steps.accessibility.window_title')}
- </div>
- <IconButton
- aria-label={t('partner_connection_steps.accessibility.button_close')}
- className="modal-paper-close-button"
- onClick={handleCloseClick}
- >
- <Icon icon={CloseIcon} size={16} />
- </IconButton>
- <div className="partners-connection-step-content">
- <div className="partners-connection-step-progress">{`${
- stepIndex + 1
- } / ${steps.length}`}</div>
- <StepDetail step={steps[stepIndex]} />
- </div>
- <div className="partners-connection-step-navigation">
- <Button
- aria-label={t(
- 'partner_connection_steps.accessibility.button_previous'
- )}
- onClick={goPrevStep}
- className={classNames('navigation-button', {
- ['disabled']: stepIndex === 0,
- })}
- disabled={stepIndex === 0}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {`< ${t('partner_connection_steps.button_previous')}`}
- </Button>
- <Button
- aria-label={
- stepIndex === steps.length - 1
- ? t('partner_connection_steps.accessibility.button_validate')
- : t('partner_connection_steps.accessibility.button_next')
- }
- onClick={stepIndex === steps.length - 1 ? handleEndSteps : goNextStep}
- className={'navigation-button'}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
- >
- {stepIndex === steps.length - 1
- ? t(
- `partner_connection_steps.${FluidType[
- fluidType
- ].toLowerCase()}.button_validate`
- )
- : `${t('partner_connection_steps.button_next')} >`}
- </Button>
- </div>
- </Dialog>
- )
-}
-
-export default PartnerConnectionStepsModal
diff --git a/src/components/PartnerConnectionStepsModal/StepDetail.spec.tsx b/src/components/PartnerConnectionStepsModal/StepDetail.spec.tsx
deleted file mode 100644
index bb74c7776..000000000
--- a/src/components/PartnerConnectionStepsModal/StepDetail.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import StepDetail from 'components/PartnerConnectionStepsModal/StepDetail'
-import { electricitySteps } from '../../../tests/__mocks__/stepsData.mock'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: () => {
- return {
- t: (str: string) => str,
- }
- },
- }
-})
-
-describe('StepDetail component', () => {
- it('should be rendered correctly', () => {
- const step = electricitySteps[0]
- const component = shallow(<StepDetail step={step} />)
- expect(toJson(component)).toMatchSnapshot()
- })
-
- it('should not display info2 if empty', () => {
- const step = electricitySteps[0]
- step.info2 = ''
- const component = shallow(<StepDetail step={step} />)
- expect(toJson(component)).toMatchSnapshot()
- })
-})
diff --git a/src/components/PartnerConnectionStepsModal/StepDetail.tsx b/src/components/PartnerConnectionStepsModal/StepDetail.tsx
deleted file mode 100644
index 3289e6224..000000000
--- a/src/components/PartnerConnectionStepsModal/StepDetail.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import './stepDetail.scss'
-import { Step } from 'models/step.model'
-import { decoreText } from 'utils/decoreText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-
-interface StepDetailProps {
- step: Step
-}
-
-const StepDetail = ({ step }: StepDetailProps) => {
- const { t } = useI18n()
- const info1: string = t(step.info1)
- const info2: string = t(step.info2)
- return (
- <div className="step-detail-info">
- <Icon className="info-icon" icon={step.icon} size={222} />
- <div className="info-content text-18-normal">
- <div className="info-content-text">{decoreText(info1)}</div>
- {info2.length > 0 && (
- <div className="info-content-text">{decoreText(info2)}</div>
- )}
- </div>
- </div>
- )
-}
-
-export default StepDetail
diff --git a/src/components/PartnerConnectionStepsModal/__snapshots__/PartnerConnectionStepsModal.spec.tsx.snap b/src/components/PartnerConnectionStepsModal/__snapshots__/PartnerConnectionStepsModal.spec.tsx.snap
deleted file mode 100644
index 8349a835e..000000000
--- a/src/components/PartnerConnectionStepsModal/__snapshots__/PartnerConnectionStepsModal.spec.tsx.snap
+++ /dev/null
@@ -1,1164 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PartnerConnectionStepsModal component should be rendered correctly 1`] = `
-<PartnerConnectionStepsModal
- fluidType={0}
- handleCloseClick={[MockFunction]}
- handleEndSteps={[MockFunction]}
- open={true}
->
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[MockFunction]}
- open={true}
- >
- <ForwardRef(Dialog)
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
- }
- }
- onClose={[MockFunction]}
- open={true}
- >
- <ForwardRef(Modal)
- BackdropComponent={
- Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
- "$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
- },
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
- },
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
- },
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
- },
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
- },
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
- },
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
- },
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
- },
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
- },
- },
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
- },
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
- }
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
- }
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[MockFunction]}
- open={true}
- >
- <ForwardRef(Portal)
- disablePortal={false}
- >
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
- >
- <div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
- >
- <div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- partner_connection_steps.accessibility.window_title
- </div>
- <button
- aria-label="partner_connection_steps.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="partners-connection-step-content"
- >
- <div
- class="partners-connection-step-progress"
- >
- 1 / 3
- </div>
- <div
- class="step-detail-info"
- >
- <svg
- class="info-icon styles__icon___23x3R"
- height="222"
- width="222"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="info-content text-18-normal"
- >
- <div
- class="info-content-text"
- >
- partner_connection_steps.electricity.step1.info1
- </div>
- <div
- class="info-content-text"
- >
- partner_connection_steps.electricity.step1.info2
- </div>
- </div>
- </div>
- </div>
- <div
- class="partners-connection-step-navigation"
- >
- <button
- aria-label="partner_connection_steps.accessibility.button_previous"
- class="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text navigation-button disabled Mui-disabled Mui-disabled"
- disabled=""
- tabindex="-1"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- < partner_connection_steps.button_previous
- </span>
- </button>
- <button
- aria-label="partner_connection_steps.accessibility.button_next"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text navigation-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label text-16-bold"
- >
- partner_connection_steps.button_next >
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
- >
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
- }
- >
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
- onClick={[Function]}
- open={true}
- transitionDuration={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <ForwardRef(Fade)
- in={true}
- onClick={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
- onClick={[Function]}
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- >
- <Transition
- appear={true}
- enter={true}
- exit={true}
- in={true}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
- unmountOnExit={false}
- >
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
- role="none presentation"
- style={
- Object {
- "opacity": 1,
- "visibility": undefined,
- }
- }
- tabIndex="-1"
- >
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
- >
- <ForwardRef(Paper)
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={24}
- role="dialog"
- >
- <div
- aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
- >
- <div
- id="accessibility-title"
- >
- partner_connection_steps.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="partner_connection_steps.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[MockFunction]}
- >
- <ForwardRef(IconButton)
- aria-label="partner_connection_steps.accessibility.button_close"
- className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[MockFunction]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="partner_connection_steps.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <ForwardRef(ButtonBase)
- aria-label="partner_connection_steps.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[MockFunction]}
- >
- <button
- aria-label="partner_connection_steps.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[MockFunction]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="partners-connection-step-content"
- >
- <div
- className="partners-connection-step-progress"
- >
- 1 / 3
- </div>
- <StepDetail
- step={
- Object {
- "icon": "test-file-stub",
- "info1": "partner_connection_steps.electricity.step1.info1",
- "info2": "partner_connection_steps.electricity.step1.info2",
- }
- }
- >
- <div
- className="step-detail-info"
- >
- <Icon
- className="info-icon"
- icon="test-file-stub"
- size={222}
- spin={false}
- >
- <Component
- className="info-icon styles__icon___23x3R"
- height={222}
- style={Object {}}
- width={222}
- >
- <svg
- className="info-icon styles__icon___23x3R"
- height={222}
- style={Object {}}
- width={222}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- <div
- className="info-content text-18-normal"
- >
- <div
- className="info-content-text"
- >
- partner_connection_steps.electricity.step1.info1
- </div>
- <div
- className="info-content-text"
- >
- partner_connection_steps.electricity.step1.info2
- </div>
- </div>
- </div>
- </StepDetail>
- </div>
- <div
- className="partners-connection-step-navigation"
- >
- <WithStyles(ForwardRef(Button))
- aria-label="partner_connection_steps.accessibility.button_previous"
- className="navigation-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="partner_connection_steps.accessibility.button_previous"
- className="navigation-button disabled"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={true}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="partner_connection_steps.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text navigation-button disabled Mui-disabled"
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="partner_connection_steps.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text navigation-button disabled Mui-disabled"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={true}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="partner_connection_steps.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text navigation-button disabled Mui-disabled Mui-disabled"
- disabled={true}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={-1}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- < partner_connection_steps.button_previous
- </span>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="partner_connection_steps.accessibility.button_next"
- className="navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
- aria-label="partner_connection_steps.accessibility.button_next"
- className="navigation-button"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="partner_connection_steps.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text navigation-button"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="partner_connection_steps.accessibility.button_next"
- className="MuiButton-root btn-profile-next rounded MuiButton-text navigation-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="partner_connection_steps.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text navigation-button"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label text-16-bold"
- >
- partner_connection_steps.button_next >
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
-</PartnerConnectionStepsModal>
-`;
diff --git a/src/components/PartnerConnectionStepsModal/__snapshots__/StepDetail.spec.tsx.snap b/src/components/PartnerConnectionStepsModal/__snapshots__/StepDetail.spec.tsx.snap
deleted file mode 100644
index c79888522..000000000
--- a/src/components/PartnerConnectionStepsModal/__snapshots__/StepDetail.spec.tsx.snap
+++ /dev/null
@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StepDetail component should be rendered correctly 1`] = `
-<div
- className="step-detail-info"
->
- <Icon
- className="info-icon"
- icon="test-file-stub"
- size={222}
- spin={false}
- />
- <div
- className="info-content text-18-normal"
- >
- <div
- className="info-content-text"
- >
- partner_connection_steps.electricity.step1.info1
- </div>
- <div
- className="info-content-text"
- >
- partner_connection_steps.electricity.step1.info2
- </div>
- </div>
-</div>
-`;
-
-exports[`StepDetail component should not display info2 if empty 1`] = `
-<div
- className="step-detail-info"
->
- <Icon
- className="info-icon"
- icon="test-file-stub"
- size={222}
- spin={false}
- />
- <div
- className="info-content text-18-normal"
- >
- <div
- className="info-content-text"
- >
- partner_connection_steps.electricity.step1.info1
- </div>
- </div>
-</div>
-`;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 7fcb26e76..736307b54 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -174,57 +174,79 @@
}
},
"grdfgrandlyon": {
- "connect": {
- "label1": "Je me connecte à mon",
- "label2": "compte GRDF"
+ "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 à votre compte GRDF",
- "subtitle1": "Si vous n’avez pas de compte GRDF",
- "button_create_account": "Je crée mon compte GRDF",
- "subtitle2": "Si vous avez déjà un compte GRDF,",
- "subtitle2_info": "votre accord est nécessaire pour connecter GRDF et Ecolyo",
- "info": "GRDF est responsable de votre compteur Gazpar et en charge de relever vos consommations."
+ "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 GRDF et Ecolyo !",
- "subtitle1_info": "Une période de consentement minimale d'un an est recommandée",
- "subtitle2": "Si vous n’avez pas de compte GRDF",
- "button_create_account": "Je crée mon compte",
- "subtitle2_info": "En cas de soucis pour créer votre compte ou pour vous y connecter, un guide en pas-à-pas est disponible pour vous y aider.",
- "button_goto_guide": "Voir le guide"
- }
+ "subtitle1": "Plus qu’à donner votre accord pour connecter GRDF et Ecolyo\u00a0!"
+ },
+ "step1": {
+ "info1": "Un <span>compte chez GRDF</span> est nécessaire pour vous connecter au gaz",
+ "info2": " <span>quelque soit votre fournisseur de gaz</span>.",
+ "info3": "<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>",
+ "info4": "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>"
+ },
+ "button_go_to_partner_site": "Aller sur GRDF"
},
"eglgrandlyon": {
- "connect": {
- "login": "Identifiant Eau Publique du Grand Lyon (7 chiffres)",
+ "bill": "Munissez-vous d’une <span>facture d'eau</span> pour valider la connexion",
+ "connect": "Je me connecte à l'eau",
+ "accessibility": {
+ "connect": "Se connecter"
+ },
+ "connect_form": {
+ "login": "Identifiant (7 chiffres)",
"password": "Mot de passe",
- "label1": "Je me connecte à mon",
- "label2": "compte Eau Publique du Grand Lyon"
+ "label": "Je connecte Ecolyo à mon compte Eau Publique du Grand Lyon"
},
"no_account": {
- "title": "Ecolyo doit se connecter à votre compte Eau Publique du Grand Lyon",
- "subtitle1": "Si vous n’avez pas de compte EPGL",
- "button_create_account": "Je crée mon compte EPGL",
- "subtitle2": "Si vous avez déjà un compte EPGL,",
- "subtitle2_info": "renseignez votre identifiant Eau Publique du Grand Lyon."
+ "title": "Ecolyo doit se connecter à l'eau"
},
"with_account": {
"title": "Votre compte Eau Publique du Grand Lyon a bien été créé\u00a0?",
- "subtitle1": "Plus qu’à donner votre accord pour connecter EPGL et Ecolyo !",
- "subtitle2": "Si vous n’avez pas de compte EPGL",
- "button_create_account": "Je crée mon compte",
- "subtitle2_info": "En cas de soucis pour créer votre compte ou pour vous y connecter, un guide en pas-à-pas est disponible pour vous y aider.",
- "button_goto_guide": "Voir le guide"
- }
+ "subtitle1": "Plus qu’à donner votre accord pour connecter votre compteur d'Eau et Ecolyo\u00a0!"
+ },
+ "step1": {
+ "info1": "La connexion se fait via <span>votre compte Eau Publique du Grand Lyon</span>.",
+ "info2": "Possédez-vous un <span>compte Eau Publique du Grand Lyon</span>\u00a0?"
+ },
+ "step2": {
+ "info1": "Une fois votre compte créé, <span>n'oubliez pas de revenir sur Ecolyo</span> pour finaliser la connexion."
+ },
+ "button_go_to_partner_site": "Aller sur EPGL"
+ },
+ "connect_oauth": {
+ "loading": "Chargement..."
},
"accessibility": {
"button_reveal_password": "Afficher le mot de passe",
"button_connect": "Se connecter",
"button_create_account": "Se créer un compte",
- "button_goto_guide": "Voir le guide"
- }
+ "window_title": "Fenêtre d'information sur la création de compte.",
+ "button_close": "Fermer la fenêtre."
+ },
+ "button_previous": "Précédent",
+ "button_connect": "Se connecter",
+ "button_create_account": "Se créer un compte",
+ "button_has_account": "J'ai déjà un compte",
+ "button_validate": "J'ai compris"
},
"challenge": {
"card": {
@@ -310,7 +332,7 @@
"list_title": "3 raisons possibles :",
"item1": "le lien entre Ecolyo et le fournisseur de données est rompu : une mise à jour de ce lien (en bas de la page) peut résoudre ce problème.",
"item2": "un problème technique chez votre gestionnaire\u00a0: se connecter directement chez ce gestionnaire pour vérifier que cette donnée apparaît.",
- "item3": "vous n'aviez tout simplement pas de compteur communicant à l'époque !"
+ "item3": "vous n'aviez tout simplement pas de compteur communicant à l'époque\u00a0!"
},
"modal": {
"window_title": "info estimation des prix",
@@ -906,39 +928,6 @@
"button_goto_konnector": "Aller aux connecteurs"
}
},
- "partner_connection_steps": {
- "water": {
- "step1": {
- "info1": "Munissez-vous d’une <span>facture d'eau</span> et d’un zeste de patience.",
- "info2": ""
- },
- "step2": {
- "info1": "Une fois votre compte créé, <span>revenez sur Ecolyo</span> pour finaliser la connexion.",
- "info2": ""
- },
- "button_validate": "Aller sur EPGL"
- },
- "gas": {
- "step1": {
- "info1": "Munissez-vous d’une <span>facture de gaz</span> et d’un zeste de patience.",
- "info2": ""
- },
- "step2": {
- "info1": "Une fois votre compte créé, <span>revenez sur Ecolyo</span> pour finaliser la connexion.",
- "info2": ""
- },
- "button_validate": "Aller sur GRDF"
- },
- "button_previous": "Précédent",
- "button_next": "Suivant",
- "accessibility": {
- "window_title": "Fenêtre d'information sur la création de compte.",
- "button_validate": "Aller sur le site du partenaire.",
- "button_close": "Fermer la fenêtre.",
- "button_previous": "Précédent",
- "button_next": "Suivant"
- }
- },
"performance_indicator": {
"bilan": {
"text1": "Par rapport à ",
diff --git a/src/models/step.model.ts b/src/models/step.model.ts
index 10bff78f8..f4255471e 100644
--- a/src/models/step.model.ts
+++ b/src/models/step.model.ts
@@ -1,5 +1,5 @@
export interface Step {
- icon: string
- info1: string
- info2: string
+ content: JSX.Element
+ leftButton: JSX.Element
+ rightButton: JSX.Element
}
diff --git a/src/utils/steps.spec.ts b/src/utils/steps.spec.ts
deleted file mode 100644
index 6ad20cad8..000000000
--- a/src/utils/steps.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { FluidType } from 'enum/fluid.enum'
-import { Step } from 'models/step.model'
-import { getPartnerSteps } from './steps'
-import {
- electricitySteps,
- gasSteps,
- waterSteps,
-} from '../../tests/__mocks__/stepsData.mock'
-
-describe('steps utilis test', () => {
- describe('getPartnerSteps test', () => {
- it('should return Electricty steps', () => {
- const result = getPartnerSteps(FluidType.ELECTRICITY)
- const expected: Step[] = electricitySteps
- expect(result).toEqual(expected)
- })
-
- it('should return Water steps', () => {
- const result = getPartnerSteps(FluidType.WATER)
- const expected: Step[] = waterSteps
- expect(result).toEqual(expected)
- })
-
- it('should return Gas steps', () => {
- const result = getPartnerSteps(FluidType.GAS)
- const expected: Step[] = gasSteps
- expect(result).toEqual(expected)
- })
-
- it('should return empty array', () => {
- const result = getPartnerSteps(999)
- const expected: Step[] = []
- expect(result).toEqual(expected)
- })
- })
-})
diff --git a/src/utils/steps.ts b/src/utils/steps.ts
deleted file mode 100644
index 646fe5029..000000000
--- a/src/utils/steps.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { FluidType } from 'enum/fluid.enum'
-import { Step } from 'models/step.model'
-import ElectricityBillIcon from 'assets/icons/visu/partnerSteps/electricity_bill.svg'
-import FranceConnectIcon from 'assets/icons/visu/partnerSteps/france_connect.svg'
-import EnedisIcon from 'assets/icons/visu/partnerSteps/enedis.svg'
-import WaterBillIcon from 'assets/icons/visu/partnerSteps/water_bill.svg'
-import EglIcon from 'assets/icons/visu/partnerSteps/egl.svg'
-import GasBillIcon from 'assets/icons/visu/partnerSteps/gas_bill.svg'
-import GrdfIcon from 'assets/icons/visu/partnerSteps/grdf.svg'
-
-export const getPartnerSteps = (fluidType: FluidType): Step[] => {
- switch (fluidType) {
- case FluidType.ELECTRICITY:
- return [
- {
- icon: ElectricityBillIcon,
- info1: 'partner_connection_steps.electricity.step1.info1',
- info2: 'partner_connection_steps.electricity.step1.info2',
- },
- {
- icon: FranceConnectIcon,
- info1: 'partner_connection_steps.electricity.step2.info1',
- info2: 'partner_connection_steps.electricity.step2.info2',
- },
- {
- icon: EnedisIcon,
- info1: 'partner_connection_steps.electricity.step3.info1',
- info2: 'partner_connection_steps.electricity.step3.info2',
- },
- ]
- case FluidType.WATER:
- return [
- {
- icon: WaterBillIcon,
- info1: 'partner_connection_steps.water.step1.info1',
- info2: 'partner_connection_steps.water.step1.info2',
- },
- {
- icon: EglIcon,
- info1: 'partner_connection_steps.water.step2.info1',
- info2: 'partner_connection_steps.water.step2.info2',
- },
- ]
- case FluidType.GAS:
- return [
- {
- icon: GasBillIcon,
- info1: 'partner_connection_steps.gas.step1.info1',
- info2: 'partner_connection_steps.gas.step1.info2',
- },
- {
- icon: GrdfIcon,
- info1: 'partner_connection_steps.gas.step2.info1',
- info2: 'partner_connection_steps.gas.step2.info2',
- },
- ]
- default:
- return []
- }
-}
diff --git a/tests/__mocks__/stepsData.mock.ts b/tests/__mocks__/stepsData.mock.ts
deleted file mode 100644
index dc5db01a0..000000000
--- a/tests/__mocks__/stepsData.mock.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Step } from 'models/step.model'
-import ElectricityBillIcon from 'assets/icons/visu/partnerSteps/electricity_bill.svg'
-import FranceConnectIcon from 'assets/icons/visu/partnerSteps/france_connect.svg'
-import EnedisIcon from 'assets/icons/visu/partnerSteps/enedis.svg'
-import WaterBillIcon from 'assets/icons/visu/partnerSteps/water_bill.svg'
-import EglIcon from 'assets/icons/visu/partnerSteps/egl.svg'
-import GasBillIcon from 'assets/icons/visu/partnerSteps/gas_bill.svg'
-import GrdfIcon from 'assets/icons/visu/partnerSteps/grdf.svg'
-
-export const electricitySteps: Step[] = [
- {
- icon: ElectricityBillIcon,
- info1: 'partner_connection_steps.electricity.step1.info1',
- info2: 'partner_connection_steps.electricity.step1.info2',
- },
- {
- icon: FranceConnectIcon,
- info1: 'partner_connection_steps.electricity.step2.info1',
- info2: 'partner_connection_steps.electricity.step2.info2',
- },
- {
- icon: EnedisIcon,
- info1: 'partner_connection_steps.electricity.step3.info1',
- info2: 'partner_connection_steps.electricity.step3.info2',
- },
-]
-export const waterSteps: Step[] = [
- {
- icon: WaterBillIcon,
- info1: 'partner_connection_steps.water.step1.info1',
- info2: 'partner_connection_steps.water.step1.info2',
- },
- {
- icon: EglIcon,
- info1: 'partner_connection_steps.water.step2.info1',
- info2: 'partner_connection_steps.water.step2.info2',
- },
-]
-export const gasSteps: Step[] = [
- {
- icon: GasBillIcon,
- info1: 'partner_connection_steps.gas.step1.info1',
- info2: 'partner_connection_steps.gas.step1.info2',
- },
- {
- icon: GrdfIcon,
- info1: 'partner_connection_steps.gas.step2.info1',
- info2: 'partner_connection_steps.gas.step2.info2',
- },
-]
--
GitLab