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
index dbeafb733d..bd84532108 100644
--- 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]}
/>
-
diff --git a/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx b/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx
index f343eeab50..8e98624681 100644
--- 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')}
)}
-
+
`;
exports[`OAuthForm should render 1`] = `
-
-
+
+ CloudSync2
+
+ oauth.connect.title
+
+
+ oauth.connect.description
+
+
+
+
- oauth.connect.label
+
+ oauth.connect.submit
+
-
-
+
+
`;
diff --git a/packages/cozy-harvest-lib/src/components/cards/ConnectCard.tsx b/packages/cozy-harvest-lib/src/components/cards/ConnectCard.tsx
new file mode 100644
index 0000000000..35b6f88e1e
--- /dev/null
+++ b/packages/cozy-harvest-lib/src/components/cards/ConnectCard.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import Button from 'cozy-ui/transpiled/react/Button'
+import Card from 'cozy-ui/transpiled/react/Card'
+import Empty from 'cozy-ui/transpiled/react/Empty'
+import CloudSync2 from 'cozy-ui/transpiled/react/Icons/CloudSync2'
+
+interface ConnectCardProps {
+ description: string
+ title: string
+ buttonProps: {
+ busy: boolean
+ disabled: boolean
+ label: string
+ onClick: () => void
+ }
+}
+
+export const ConnectCard = ({
+ buttonProps,
+ description,
+ title
+}: ConnectCardProps): JSX.Element => (
+
+
+
+
+
+)
diff --git a/packages/cozy-harvest-lib/src/components/cards/InformationsCard.tsx b/packages/cozy-harvest-lib/src/components/cards/InformationsCard.tsx
new file mode 100644
index 0000000000..40a53b7abf
--- /dev/null
+++ b/packages/cozy-harvest-lib/src/components/cards/InformationsCard.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import cx from 'classnames'
+
+import Card from 'cozy-ui/transpiled/react/Card'
+import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
+import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List'
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import logger from '../../logger'
+import { ListItemText } from '@material-ui/core'
+import { getErrorMessage } from '../../helpers/getErrorMessage'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+interface InformationsCardProps {
+ className?: string
+ link: string
+}
+
+const getLabel = (link?: string): string | null => {
+ if (!link) return null
+
+ try {
+ const url = new URL(link)
+ return url.host
+ } catch (error) {
+ logger('warn', getErrorMessage(error))
+ return null
+ }
+}
+
+export const InformationsCard = ({
+ className,
+ link
+}: InformationsCardProps): JSX.Element | null => {
+ const { t } = useI18n()
+ const label = getLabel(link)
+
+ if (!label) return null
+
+ return (
+
+
+ {t('card.websiteLink.title')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.jsx b/packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.jsx
deleted file mode 100644
index 9abef8b23f..0000000000
--- a/packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Card from 'cozy-ui/transpiled/react/Card'
-import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import Link from 'cozy-ui/transpiled/react/Link'
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
-
-import logger from '../../logger'
-
-const linkStyle = { textTransform: 'lowercase' }
-
-const WebsiteLinkCard = ({ link }) => {
- const { t } = useI18n()
- let url = null
- try {
- url = new URL(link)
- } catch (err) {
- logger('warn', err.message)
- return null
- }
-
- const label = url.host
-
- return (
-
-
- {t('card.websiteLink.title')}
-
-
-
-
-
-
-
-
-
-
- {label}
-
-
- {t('card.websiteLink.description')}
-
-
-
-
- )
-}
-
-WebsiteLinkCard.propTypes = {
- link: PropTypes.string.isRequired
-}
-
-export default WebsiteLinkCard
diff --git a/packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.spec.jsx b/packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.spec.jsx
deleted file mode 100644
index 4885e00917..0000000000
--- a/packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.spec.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import I18n from 'cozy-ui/transpiled/react/I18n'
-
-import WebsiteLinkCard from './WebsiteLinkCard'
-import enLocale from '../../locales/en'
-
-describe('WebsiteLinkCard', () => {
- it('should render', () => {
- const link = 'https://fc.assure.ameli.fr/FRCO-app/login'
- const root = render(
- enLocale} lang="en">
- )
-
- )
- const linkNode = root.getByText('fc.assure.ameli.fr')
- expect(linkNode.getAttribute('href')).toEqual(link)
- })
- it('should ignore invalid urls', () => {
- const link = 'www.trainline.fr'
- const root = render(
- enLocale} lang="en">
-
-
- )
- expect(root.queryByText('www.trainline.fr')).toBeFalsy()
- })
-})
diff --git a/packages/cozy-harvest-lib/src/helpers/getErrorMessage.ts b/packages/cozy-harvest-lib/src/helpers/getErrorMessage.ts
new file mode 100644
index 0000000000..26aa97a6d9
--- /dev/null
+++ b/packages/cozy-harvest-lib/src/helpers/getErrorMessage.ts
@@ -0,0 +1,28 @@
+interface ErrorWithMessage {
+ message: string
+}
+
+const isErrorWithMessage = (error: unknown): error is ErrorWithMessage => {
+ return (
+ typeof error === 'object' &&
+ error !== null &&
+ 'message' in error &&
+ typeof (error as Record).message === 'string'
+ )
+}
+
+const toErrorWithMessage = (maybeError: unknown): ErrorWithMessage => {
+ if (isErrorWithMessage(maybeError)) return maybeError
+
+ try {
+ return new Error(JSON.stringify(maybeError))
+ } catch {
+ // fallback in case there's an error stringifying the maybeError
+ // like with circular references for example.
+ return new Error(String(maybeError))
+ }
+}
+
+export const getErrorMessage = (error: unknown): string => {
+ return toErrorWithMessage(error).message
+}
diff --git a/packages/cozy-harvest-lib/src/jest.setup.js b/packages/cozy-harvest-lib/src/jest.setup.js
index 479f1876f5..7574e479d7 100644
--- a/packages/cozy-harvest-lib/src/jest.setup.js
+++ b/packages/cozy-harvest-lib/src/jest.setup.js
@@ -50,3 +50,12 @@ console.error = function () {
originalConsoleError.apply(this, arguments)
throw new Error('console.error should not be called during tests')
}
+
+// Needed for now because `cozy-ui` can't be updated to the latest version in devDependencies
+jest.mock(
+ 'cozy-ui/transpiled/react/Icons/CloudSync2',
+ () => () => 'CloudSync2',
+ {
+ virtual: true
+ }
+)
diff --git a/packages/cozy-harvest-lib/tsconfig.json b/packages/cozy-harvest-lib/tsconfig.json
index eccc3e1101..59e5a6f4a3 100644
--- a/packages/cozy-harvest-lib/tsconfig.json
+++ b/packages/cozy-harvest-lib/tsconfig.json
@@ -7,29 +7,5 @@
"exclude": [
"node_modules",
"dist"
- ],
- "compilerOptions": {
- "allowJs": false,
- "allowSyntheticDefaultImports": true,
- "baseUrl": "./src",
- "declaration": true,
- "declarationDir": "./dist",
- "emitDeclarationOnly": true,
- "esModuleInterop": true,
- "forceConsistentCasingInFileNames": true,
- "isolatedModules": true,
- "jsx": "react",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "module": "esnext",
- "moduleResolution": "node",
- "noFallthroughCasesInSwitch": true,
- "resolveJsonModule": true,
- "skipLibCheck": true,
- "strict": true,
- "target": "es5"
- }
+ ]
}