From a1a2d97639fb2c8c6f4066add6bfbcc1e47d8592 Mon Sep 17 00:00:00 2001
From: Antonin Cezard <acezard@gmail.com>
Date: Wed, 22 Feb 2023 11:02:52 +0100
Subject: [PATCH] feat(cozy-harvest): Implement new account modal

---
 .../__snapshots__/index.spec.jsx.snap         |  20 ++-
 .../src/components/AccountForm/index.jsx      |  74 ++++++---
 .../KonnectorConfiguration/DataTab/index.jsx  |   4 +-
 .../src/components/KonnectorModalHeader.jsx   |   8 +-
 .../src/components/NewAccountModal.jsx        |  47 ++++--
 .../src/components/OAuthForm.jsx              |  23 +--
 .../__snapshots__/OAuthForm.spec.js.snap      | 150 +++++++++++++-----
 .../src/components/cards/ConnectCard.tsx      |  29 ++++
 .../src/components/cards/InformationsCard.tsx |  74 +++++++++
 .../src/components/cards/WebsiteLinkCard.jsx  |  63 --------
 .../components/cards/WebsiteLinkCard.spec.jsx |  28 ----
 .../src/helpers/getErrorMessage.ts            |  28 ++++
 packages/cozy-harvest-lib/src/jest.setup.js   |   9 ++
 packages/cozy-harvest-lib/tsconfig.json       |  26 +--
 14 files changed, 366 insertions(+), 217 deletions(-)
 create mode 100644 packages/cozy-harvest-lib/src/components/cards/ConnectCard.tsx
 create mode 100644 packages/cozy-harvest-lib/src/components/cards/InformationsCard.tsx
 delete mode 100644 packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.jsx
 delete mode 100644 packages/cozy-harvest-lib/src/components/cards/WebsiteLinkCard.spec.jsx
 create mode 100644 packages/cozy-harvest-lib/src/helpers/getErrorMessage.ts

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]}
     />
-    <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
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')}
                   </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
index 60e4a6013e..430e162b2c 100644
--- 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
index a60910cba9..e6d0b507c4 100644
--- 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
index aeeec0ab6a..412284952a 100644
--- 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
index 0d230f19ac..6a727c0b42 100644
--- 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
+          }}
         />
       )}
     </>
diff --git a/packages/cozy-harvest-lib/src/components/__snapshots__/OAuthForm.spec.js.snap b/packages/cozy-harvest-lib/src/components/__snapshots__/OAuthForm.spec.js.snap
index 8a54dbbdad..0eaea38bef 100644
--- a/packages/cozy-harvest-lib/src/components/__snapshots__/OAuthForm.spec.js.snap
+++ b/packages/cozy-harvest-lib/src/components/__snapshots__/OAuthForm.spec.js.snap
@@ -34,37 +34,59 @@ exports[`OAuthForm should handle oauth cancelation 1`] = `
       </div>
     </div>
   </div>
-  <button
-    aria-busy="true"
-    aria-disabled="true"
-    class="styles__c-btn___-2Vnj styles__c-btn--full___2VmR1 styles__c-btn--center___16_Xh u-mt-1"
-    disabled=""
-    type="submit"
+  <div
+    class="styles__c-card___YgP7B u-flex u-flex-wrap"
   >
-    <span>
+    <div
+      class="styles__c-empty___3w5oV"
+    >
+      CloudSync2
+      <h3
+        class="MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom"
+      >
+        oauth.connect.title
+      </h3>
+      <p
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom"
+      >
+        oauth.connect.description
+      </p>
+      <div
+        class="styles__c-empty-text___3HnvR"
+      />
+    </div>
+    <button
+      aria-busy="true"
+      aria-disabled="true"
+      class="styles__c-btn___-2Vnj styles__c-btn--center___16_Xh u-mh-auto"
+      disabled=""
+      type="submit"
+    >
       <span>
-        oauth.connect.label
+        <span>
+          oauth.connect.submit
+        </span>
+        <svg
+          aria-busy="true"
+          aria-hidden="true"
+          class="u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1"
+          focusable="false"
+          height="16"
+          role="progressbar"
+          viewBox="0 0 32 32"
+          width="16"
+        >
+          <path
+            d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
+            opacity="0.25"
+          />
+          <path
+            d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
+          />
+        </svg>
       </span>
-      <svg
-        aria-busy="true"
-        aria-hidden="true"
-        class="u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1"
-        focusable="false"
-        height="16"
-        role="progressbar"
-        viewBox="0 0 32 32"
-        width="16"
-      >
-        <path
-          d="M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24"
-          opacity="0.25"
-        />
-        <path
-          d="M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z"
-        />
-      </svg>
-    </span>
-  </button>
+    </button>
+  </div>
 </div>
 `;
 
@@ -100,30 +122,74 @@ exports[`OAuthForm should handle oauth cancelation 2`] = `
       </div>
     </div>
   </div>
-  <button
-    class="styles__c-btn___-2Vnj styles__c-btn--full___2VmR1 styles__c-btn--center___16_Xh u-mt-1"
-    type="submit"
+  <div
+    class="styles__c-card___YgP7B u-flex u-flex-wrap"
   >
-    <span>
+    <div
+      class="styles__c-empty___3w5oV"
+    >
+      CloudSync2
+      <h3
+        class="MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom"
+      >
+        oauth.connect.title
+      </h3>
+      <p
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom"
+      >
+        oauth.connect.description
+      </p>
+      <div
+        class="styles__c-empty-text___3HnvR"
+      />
+    </div>
+    <button
+      class="styles__c-btn___-2Vnj styles__c-btn--center___16_Xh u-mh-auto"
+      type="submit"
+    >
       <span>
-        oauth.connect.label
+        <span>
+          oauth.connect.submit
+        </span>
       </span>
-    </span>
-  </button>
+    </button>
+  </div>
 </div>
 `;
 
 exports[`OAuthForm should render 1`] = `
 <div>
-  <button
-    class="styles__c-btn___-2Vnj styles__c-btn--full___2VmR1 styles__c-btn--center___16_Xh u-mt-1"
-    type="submit"
+  <div
+    class="styles__c-card___YgP7B u-flex u-flex-wrap"
   >
-    <span>
+    <div
+      class="styles__c-empty___3w5oV"
+    >
+      CloudSync2
+      <h3
+        class="MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom"
+      >
+        oauth.connect.title
+      </h3>
+      <p
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom"
+      >
+        oauth.connect.description
+      </p>
+      <div
+        class="styles__c-empty-text___3HnvR"
+      />
+    </div>
+    <button
+      class="styles__c-btn___-2Vnj styles__c-btn--center___16_Xh u-mh-auto"
+      type="submit"
+    >
       <span>
-        oauth.connect.label
+        <span>
+          oauth.connect.submit
+        </span>
       </span>
-    </span>
-  </button>
+    </button>
+  </div>
 </div>
 `;
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 => (
+  <Card className="u-flex u-flex-wrap">
+    <Empty icon={CloudSync2} title={title} text={description} />
+
+    <Button className="u-mh-auto" {...buttonProps} />
+  </Card>
+)
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 (
+    <Card className={cx('u-p-0', className)}>
+      <div
+        className="u-ph-1 u-flex u-flex-items-center"
+        style={{ minHeight: '64px' }}
+      >
+        <Typography variant="h5">{t('card.websiteLink.title')}</Typography>
+      </div>
+
+      <Divider className="u-ml-0 u-maw-100 u-mb-half" />
+
+      <List className="u-p-0">
+        <ListItem
+          button
+          className="u-mb-half"
+          component="a"
+          href={link}
+          target="_blank"
+        >
+          <ListItemIcon>
+            <Icon icon={GlobeIcon} size={16} color="textPrimary" />
+          </ListItemIcon>
+
+          <ListItemText
+            primary={t('card.websiteLink.description')}
+            secondary={label}
+          />
+        </ListItem>
+      </List>
+    </Card>
+  )
+}
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 (
-    <Card>
-      <Typography className="u-mb-1" variant="h5">
-        {t('card.websiteLink.title')}
-      </Typography>
-      <Divider className="u-ml-0 u-maw-100" />
-      <Media className="u-mt-1">
-        <Img className="u-pr-1">
-          <Typography color="textSecondary">
-            <Icon icon={GlobeIcon} />
-          </Typography>
-        </Img>
-        <Bd>
-          <Link
-            target="_blank"
-            href={link}
-            className="u-m-0 u-fw-bold"
-            style={linkStyle}
-          >
-            {label}
-          </Link>
-          <Typography variant="caption" color="textSecondary">
-            {t('card.websiteLink.description')}
-          </Typography>
-        </Bd>
-      </Media>
-    </Card>
-  )
-}
-
-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(
-      <I18n dictRequire={() => enLocale} lang="en">
-        <WebsiteLinkCard link={link} />)
-      </I18n>
-    )
-    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(
-      <I18n dictRequire={() => enLocale} lang="en">
-        <WebsiteLinkCard link={link} />
-      </I18n>
-    )
-    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<string, unknown>).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"
-  }
+  ]
 }