feat: Add a modal to help the user to connect

Add a link on the login modal to open a second information modal, to help the user by providing a link to the connector's website
cozy · Dec 15, 2022 · 1f2aab2 · 1f2aab2
1 parent dd16f36
commit 1f2aab2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx b/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx
@@ -7,11 +7,12 @@ import compose from 'lodash/flowRight'
 
 import { isMobile } from 'cozy-device-helper'
 import Button from 'cozy-ui/transpiled/react/Buttons'
+import Link from 'cozy-ui/transpiled/react/Link'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Info from 'cozy-ui/transpiled/react/Icons/Info'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import { Dialog, ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 
 import withLocales from '../hoc/withLocales'
 import AccountFields from './AccountFields'
@@ -43,7 +44,8 @@ export class AccountForm extends PureComponent {
     super(props)
 
     this.state = {
-      showConfirmationModal: false
+      showConfirmationModal: false,
+      showCannotConnectModal: false
     }
 
     this.inputs = {}
@@ -55,6 +57,8 @@ export class AccountForm extends PureComponent {
     this.focusNext = this.focusNext.bind(this)
     this.showConfirmationModal = this.showConfirmationModal.bind(this)
     this.hideConfirmationModal = this.hideConfirmationModal.bind(this)
+    this.showCannotConnectModal = this.showCannotConnectModal.bind(this)
+    this.hideCannotConnectModal = this.hideCannotConnectModal.bind(this)
   }
 
   /**
@@ -188,11 +192,19 @@ export class AccountForm extends PureComponent {
   }
 
   showConfirmationModal() {
-    this.setState({ showConfirmationModal: true })
+    this.setState(prev => ({ ...prev, showConfirmationModal: true }))
   }
 
   hideConfirmationModal() {
-    this.setState({ showConfirmationModal: false })
+    this.setState(prev => ({ ...prev, showConfirmationModal: false }))
+  }
+
+  showCannotConnectModal() {
+    this.setState(prev => ({ ...prev, showCannotConnectModal: true }))
+  }
+
+  hideCannotConnectModal() {
+    this.setState(prev => ({ ...prev, showCannotConnectModal: false }))
   }
 
   manageSecretFieldOptions = () => {
@@ -221,7 +233,7 @@ export class AccountForm extends PureComponent {
     const submitting = flowState.running
     const error = flowState.error
 
-    const { fields, name } = konnector
+    const { fields, name, vendor_link } = konnector
     const sanitizedFields = manifest.sanitizeFields(fields)
     fieldHelpers.addForceEncryptedPlaceholder(sanitizedFields, fieldOptions)
 
@@ -287,6 +299,16 @@ export class AccountForm extends PureComponent {
                   inputRefByName={this.inputRefByName}
                   t={t}
                 />
+                <Typography>
+                  <Link
+                    className="u-mt-1"
+                    component="button"
+                    onClick={this.showCannotConnectModal}
+                  >
+                    {t('accountForm.cannotConnectLink')}
+                  </Link>
+                </Typography>
+
                 <Button
                   busy={submitting}
                   className="u-mt-2 u-mb-1-half"
@@ -342,6 +364,29 @@ export class AccountForm extends PureComponent {
                 }
               />
             )}
+            {this.state.showCannotConnectModal && (
+              <ConfirmDialog
+                open
+                content={
+                  <>
+                    <Typography variant="h4" className="u-mb-1">
+                      {t('accountForm.cannotConnectModal.title')}
+                    </Typography>
+                    <Typography className="u-mb-1">
+                      {t('accountForm.cannotConnectModal.content')}
+                      <Link
+                        href={vendor_link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {name}
+                      </Link>
+                    </Typography>
+                  </>
+                }
+                onClose={this.hideCannotConnectModal}
+              />
+            )}
           </div>
         )}
       />

diff --git a/packages/cozy-harvest-lib/src/locales/en.json b/packages/cozy-harvest-lib/src/locales/en.json
@@ -21,6 +21,11 @@
     "installFlagship": {
       "label": "Install Cozy on mobile"
     },
+    "cannotConnectModal": {
+      "title": "You can't connect?",
+      "content": "You can check your login or reset your password on the website "
+    },
+    "cannotConnectLink": "I can't connect",
     "notClientSide": "The %{name} application uses a brand-new and efficient system for retrieving your data from your Cozy. This action is only accessible from the Cozy mobile app."
   },
   "contracts": {

diff --git a/packages/cozy-harvest-lib/src/locales/fr.json b/packages/cozy-harvest-lib/src/locales/fr.json
@@ -21,6 +21,11 @@
     "installFlagship": {
       "label": "Install Cozy on mobile"
     },
+    "cannotConnectModal": {
+      "title": "Vous ne parvenez pas à vous connecter ?",
+      "content": "Vous pouvez vérifier vos identifiants ou réinitialiser votre mot de passe sur le site "
+    },
+    "cannotConnectLink": "Je ne parviens pas à me connecter",
     "notClientSide": "L'application %{name} utilise un nouveau système plus efficace pour la récupération de vos données dans votre Cozy. Cette action est uniquement accessible depuis l’application mobile Cozy."
   },
   "contracts": {