Updating No Oauth konnector design

src/components/ContentComponents/Konnector/KonnectorForm.tsx

@@ -3,8 +3,12 @@ import { translate } from 'cozy-ui/react/I18n'
 
 import IFluidConfig from 'services/IFluidConfig'
 
+import iconGRDFLogo from 'assets/icons/visu/grdf-logo.svg'
+import iconEGLLogo from 'assets/icons/visu/egl-logo.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
+import StyledNoOauthButton from 'components/CommonKit/Button/StyledOauthButton'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
 
 interface KonnectorFormProps {
@@ -45,12 +49,28 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({
     }
   }
 
+  const getIcon = (fluidName: string) => {
+    switch (fluidName) {
+      case 'grdf':
+        return iconGRDFLogo
+      case 'egl':
+        return iconEGLLogo
+      default:
+        return null
+    }
+  }
+
+  const icon = getIcon(fluidConfig.name)
+
   return (
     <form
       className="form"
       onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleSubmit(e)}
     >
-      {t('KONNECTORCONFIG.LABEL_FILLIN')} {konnectorName}
+      <div className="text-16-normal">
+        {t('KONNECTORCONFIG.LABEL_FILLIN')} {konnectorName}
+      </div>
+
       <div className="form-group">
         <div className="form-message">{error}</div>
         <input
@@ -66,6 +86,7 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({
           value={login}
         ></input>
       </div>
+
       <div className="form-group">
         <div className="form-message">{error}</div>
         <input
@@ -89,16 +110,42 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({
           />
         </span>
       </div>
-      <StyledButton type="submit" color="primary" disabled={loading}>
-        {t('KONNECTORCONFIG.BTN_CONNECTION')}
-      </StyledButton>
+
+      <div className="koauthform-button">
+        <StyledNoOauthButton type="button" color="primary">
+          <div className="oauthform-button-content">
+            <div className="oauthform-button-content-icon">
+              {icon && <StyledIcon icon={icon} size={48} />}
+            </div>
+            <div className="oauthform-button-text text-18-bold">
+              <div>
+                {t('nooauth.connection.text')}{' '}
+                {t('nooauth.' + fluidConfig.name + '.text')}
+              </div>
+            </div>
+          </div>
+        </StyledNoOauthButton>
+      </div>
+      <br />
+      <div className="koauthform-text text-16-bold">
+        <div className="text-16-bold">
+          {t('nooauth.creation.no_account')}{' '}
+          {t('nooauth.' + fluidConfig.name + '.text')} ?
+        </div>
+        <div className="text-16-normal">
+          {t('nooauth.creation.text')}{' '}
+          {t('nooauth.' + fluidConfig.name + '.facture')}
+        </div>
+      </div>
+
       <StyledButton
         type="button"
         color="secondary"
         disabled={loading}
         onClick={() => window.open(siteLink, '_blank')}
       >
-        {t('KONNECTORCONFIG.BTN_NOACCOUNT')}
+        {t('nooauth.creation.button_text')}{' '}
+        {t('nooauth.' + fluidConfig.name + '.short_text')}
       </StyledButton>
     </form>
   )

src/locales/en.json

@@ -114,7 +114,7 @@
     "LABEL_CONNECTTO_ELECTRICITY": "Se connecter à l'électricité",
     "LABEL_CONNECTTO_WATER": "Se connecter à l'eau",
     "LABEL_CONNECTTO_GAS": "Se connecter au gaz",
-    "BTN_CONNECTION": "Connexion",
+    "BTN_CONNECTION": "Je me connecte à mon compte",
     "BTN_NOACCOUNT": "Créer mes identifiants",
     "BTN_INSTALL": "Installer",
     "BTN_CONFIGURE": "Configurer",
@@ -206,5 +206,25 @@
         "activateLink": "https://mon-compte-client.enedis.fr/"
       }
     }
+  },
+  "nooauth": {
+    "connection" : {
+      "text" : "Je me connecte à mon compte"
+    },
+    "creation" : {
+      "no_account" : "Pas de compte",
+      "text" : "Vous pouvez le créer en vous munissant d'une facture",
+      "button_text" : "Je créé mon compte"
+    },
+    "grdf" : {
+      "text" : "GRDF",
+      "short_text" : "GRDF",
+      "facture" : "de gaz"
+    },
+    "egl" : {
+      "text" : "Eau du Grand Lyon",
+      "short_text" : "Eau du GL",
+      "facture" : "d'eau"
+    }
   }
 }