feat(cozy-harvest): Implement new account modal

cozy · Feb 24, 2023 · a1a2d97 · a1a2d97
1 parent 0476351
commit a1a2d97
Show file tree

Hide file tree

Showing 14 changed files with 366 additions and 217 deletions.
diff --git a/packages/cozy-harvest-lib/src/components/AccountForm/__snapshots__/index.spec.jsx.snap b/packages/cozy-harvest-lib/src/components/AccountForm/__snapshots__/index.spec.jsx.snap
@@ -147,14 +147,18 @@ exports[`AccountForm should render normally when client side konnector with laun
       inputRefByName={[Function]}
       t={[Function]}
     />
-    <ForwardRef
-      className="u-mt-2 u-mb-1-half"
-      data-testid="submit-btn"
-      disabled={false}
-      fullWidth={true}
-      label="Connect"
-      onClick={[Function]}
-      variant="primary"
+    <ConnectCard
+      buttonProps={
+        Object {
+          "busy": undefined,
+          "data-testid": "submit-btn",
+          "disabled": false,
+          "label": "Connect",
+          "onClick": [Function],
+        }
+      }
+      description="Connect testkonnector to your Cozy to synchronize your account and automatically retrieve all your data. "
+      title="Connect to your Cozy"
     />
   </React.Fragment>
 </div>

diff --git a/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx b/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx
@@ -14,22 +14,23 @@ 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 withAdaptiveRouter from '../hoc/withRouter'
-import withLocales from '../hoc/withLocales'
 import AccountFields from './AccountFields'
+import CannotConnectModal from './CannotConnectModal'
+import ConnectionBackdrop from './ConnectionBackdrop'
 import ReadOnlyIdentifier from './ReadOnlyIdentifier'
 import TriggerErrorInfo from '../infos/TriggerErrorInfo'
+import manifest from '../../helpers/manifest'
+import withAdaptiveRouter from '../hoc/withRouter'
+import withConnectionFlow from '../../models/withConnectionFlow'
+import withKonnectorLocales from '../hoc/withKonnectorLocales'
+import withLocales from '../hoc/withLocales'
+import { ConnectCard } from '../cards/ConnectCard'
+import { KonnectorJobError } from '../../helpers/konnectors'
+import { findKonnectorPolicy } from '../../konnector-policies'
 import fieldHelpers, {
   getEncryptedFieldName,
   SECRET
 } from '../../helpers/fields'
-import { KonnectorJobError } from '../../helpers/konnectors'
-import { findKonnectorPolicy } from '../../konnector-policies'
-import manifest from '../../helpers/manifest'
-import withKonnectorLocales from '../hoc/withKonnectorLocales'
-import withConnectionFlow from '../../models/withConnectionFlow'
-import CannotConnectModal from './CannotConnectModal'
-import ConnectionBackdrop from './ConnectionBackdrop'
 
 const VALIDATION_ERROR_REQUIRED_FIELD = 'VALIDATION_ERROR_REQUIRED_FIELD'
 
@@ -314,18 +315,49 @@ export class AccountForm extends PureComponent {
                     {t('accountForm.cannotConnectLink')}
                   </Link>
                 )}
-                <Button
-                  busy={submitting && !flag('harvest.inappconnectors.enabled')}
-                  className="u-mt-2 u-mb-1-half"
-                  disabled={
-                    submitting ||
-                    !this.isSubmittable({ dirty, error, initialValues, valid })
-                  }
-                  fullWidth
-                  label={t('accountForm.submit.label')}
-                  onClick={() => this.handleSubmit(values, form)}
-                  data-testid="submit-btn"
-                />
+                {konnector.clientSide ? (
+                  <ConnectCard
+                    title={t('accountForm.clientSide.title')}
+                    description={t('accountForm.clientSide.description', {
+                      name: konnector.name
+                    })}
+                    buttonProps={{
+                      busy:
+                        submitting && !flag('harvest.inappconnectors.enabled'),
+                      disabled:
+                        submitting ||
+                        !this.isSubmittable({
+                          dirty,
+                          error,
+                          initialValues,
+                          valid
+                        }),
+                      label: t('accountForm.clientSide.submit'),
+                      onClick: () => this.handleSubmit(values, form),
+                      ['data-testid']: 'submit-btn'
+                    }}
+                  />
+                ) : (
+                  <Button
+                    busy={
+                      submitting && !flag('harvest.inappconnectors.enabled')
+                    }
+                    className="u-mt-2 u-mb-1-half"
+                    disabled={
+                      submitting ||
+                      !this.isSubmittable({
+                        dirty,
+                        error,
+                        initialValues,
+                        valid
+                      })
+                    }
+                    fullWidth
+                    label={t('accountForm.submit.label')}
+                    onClick={() => this.handleSubmit(values, form)}
+                    data-testid="submit-btn"
+                  />
+                )}
                 {submitting && flag('harvest.inappconnectors.enabled') && (
                   <ConnectionBackdrop name={name} />
                 )}

diff --git a/packages/cozy-harvest-lib/src/components/KonnectorConfiguration/DataTab/index.jsx b/packages/cozy-harvest-lib/src/components/KonnectorConfiguration/DataTab/index.jsx
@@ -12,7 +12,7 @@ import KonnectorUpdateInfos from '../../../components/infos/KonnectorUpdateInfos
 import LaunchTriggerCard from '../../../components/cards/LaunchTriggerCard'
 import KonnectorMaintenance from '../../../components/Maintenance'
 import AppLinkCard from '../../../components/cards/AppLinkCard'
-import WebsiteLinkCard from '../../../components/cards/WebsiteLinkCard'
+import { InformationsCard } from '../../../components/cards/InformationsCard'
 import useMaintenanceStatus from '../../../components/hooks/useMaintenanceStatus'
 import getRelatedAppsSlugs from '../../../models/getRelatedAppsSlugs'
 import appLinksProps from '../../../components/KonnectorConfiguration/DataTab/appLinksProps'
@@ -91,7 +91,7 @@ export const DataTab = ({
             konnector={konnector}
           />
           {konnector.vendor_link && (
-            <WebsiteLinkCard link={konnector.vendor_link} />
+            <InformationsCard link={konnector.vendor_link} />
           )}
         </Stack>
       </div>

diff --git a/packages/cozy-harvest-lib/src/components/KonnectorModalHeader.jsx b/packages/cozy-harvest-lib/src/components/KonnectorModalHeader.jsx
@@ -10,10 +10,14 @@ import KonnectorIcon from './KonnectorIcon'
 import { useDialogContext } from './DialogContext'
 
 const resetFontStyles = { fontSize: '1rem', fontWeight: 'normal' }
-const KonnectorModalHeader = ({ konnector, children }) => {
+const KonnectorModalHeader = ({ konnector, children, className }) => {
   const { dialogTitleProps } = useDialogContext()
   return (
-    <DialogTitle {...dialogTitleProps} className="u-pb-half" disableTypography>
+    <DialogTitle
+      {...dialogTitleProps}
+      className={cx('u-pb-half', className)}
+      disableTypography
+    >
       <Media>
         <Img
           className={cx('u-mr-1', {

diff --git a/packages/cozy-harvest-lib/src/components/NewAccountModal.jsx b/packages/cozy-harvest-lib/src/components/NewAccountModal.jsx
@@ -17,6 +17,8 @@ import KonnectorMaintenance from './Maintenance'
 import useMaintenanceStatus from './hooks/useMaintenanceStatus'
 import { MountPointContext } from './MountPointContext'
 import { useDialogContext } from './DialogContext'
+import { InformationsCard } from './cards/InformationsCard'
+import KonnectorModalHeader from './KonnectorModalHeader'
 
 /**
  * We need to deal with `onLoginSuccess` and `onSucess` because we
@@ -34,7 +36,7 @@ const NewAccountModal = ({ konnector, onSuccess, onDismiss }) => {
   } = useMaintenanceStatus(client, konnector)
   const isMaintenanceLoaded =
     fetchStatus === 'loaded' || fetchStatus === 'failed'
-
+  const serverSideKonnector = !(konnector.oauth || konnector.clientSide)
   const { dialogTitleProps } = useDialogContext()
   const fieldOptions = {
     displaySecretPlaceholder: false
@@ -57,21 +59,29 @@ const NewAccountModal = ({ konnector, onSuccess, onDismiss }) => {
 
   return (
     <>
-      <DialogTitle
-        {...dialogTitleProps}
-        className={cx(
-          dialogTitleProps.className,
-          'u-ta-center u-flex-column u-stack-m u-pb-1'
-        )}
-        disableTypography
-      >
-        <KonnectorIcon className="u-w-3 u-h-3" konnector={konnector} />
-        <div>
-          <Typography variant="h5">
-            {t('modal.addAccount.title', { name: konnector.name })}
-          </Typography>
-        </div>
-      </DialogTitle>
+      {serverSideKonnector ? (
+        <DialogTitle
+          {...dialogTitleProps}
+          className={cx(
+            dialogTitleProps.className,
+            'u-ta-center u-flex-column u-stack-m u-pb-1'
+          )}
+          disableTypography
+        >
+          <KonnectorIcon className="u-w-3 u-h-3" konnector={konnector} />
+          <div>
+            <Typography variant="h5">
+              {t('modal.addAccount.title', { name: konnector.name })}
+            </Typography>
+          </div>
+        </DialogTitle>
+      ) : (
+        <KonnectorModalHeader
+          className="u-elevation-1 u-mb-1"
+          konnector={konnector}
+        />
+      )}
+
       {!isMaintenanceLoaded ? (
         <DialogContent className="u-ta-center u-pt-1 u-pb-3">
           <Spinner size="xxlarge" />
@@ -89,6 +99,11 @@ const NewAccountModal = ({ konnector, onSuccess, onDismiss }) => {
             onVaultDismiss={onDismiss}
             fieldOptions={fieldOptions}
           />
+
+          {!serverSideKonnector && (
+            <InformationsCard className="u-mt-1" link={konnector.vendor_link} />
+          )}
+
           {/*
             Necessary for correct padding-bottom in the DialogContent scroll
             container. u-pb-2 on DialogContent would not work in Firefox.

diff --git a/packages/cozy-harvest-lib/src/components/OAuthForm.jsx b/packages/cozy-harvest-lib/src/components/OAuthForm.jsx
@@ -2,8 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import compose from 'lodash/flowRight'
 
-import Button from 'cozy-ui/transpiled/react/Button'
-
 import { useFlowState } from '../models/withConnectionFlow'
 import useOAuthExtraParams from './hooks/useOAuthExtraParams'
 import withLocales from './hoc/withLocales'
@@ -21,6 +19,7 @@ import {
   openOAuthWindow
 } from './OAuthService'
 import { useWebviewIntent } from 'cozy-intent'
+import { ConnectCard } from './cards/ConnectCard'
 
 /**
  * The OAuth Form is responsible for displaying a form for OAuth konnectors. It
@@ -117,7 +116,7 @@ export const OAuthForm = props => {
       : 'oauth.reconnect.label'
     : isBankingKonnector
     ? 'oauth.banking.connect.label'
-    : 'oauth.connect.label'
+    : 'oauth.connect.submit'
 
   return (
     <>
@@ -129,13 +128,17 @@ export const OAuthForm = props => {
         />
       )}
       {!reconnect && (
-        <Button
-          className="u-mt-1"
-          busy={isBusy}
-          disabled={isBusy}
-          extension="full"
-          label={t(buttonLabel)}
-          onClick={handleConnect}
+        <ConnectCard
+          title={t('oauth.connect.title')}
+          description={t('oauth.connect.description', {
+            name: konnector.name
+          })}
+          buttonProps={{
+            busy: isBusy,
+            disabled: isBusy,
+            label: t(buttonLabel),
+            onClick: handleConnect
+          }}
         />
       )}
     </>