cozy-harvest-lib 11.0.0 → 11.2.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.2.0](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@11.1.0...cozy-harvest-lib@11.2.0) (2023-01-02)
+
+
+### Features
+
+* **harvest:** Create a `ConnectionBackdrop` component ([3eb0909](https://github.com/cozy/cozy-libs/commit/3eb0909fd95975a0c3486ae9489aa0a88b469eee))
+* **harvest:** Stop redirecting to the success screen once logged ([441e789](https://github.com/cozy/cozy-libs/commit/441e78969ebd506c4f090f1a2b877e403b0e6d69))
+* **harvest:** Use the new connection backdrop, behind a flag ([43cbfa3](https://github.com/cozy/cozy-libs/commit/43cbfa3d270975566e5ad0d1136310731dd7b29d))
+
+
+
+
+
+# [11.1.0](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@11.0.0...cozy-harvest-lib@11.1.0) (2022-12-21)
+
+
+### Features
+
+* **Harvest:** See the different states of a connector ([a0fbf15](https://github.com/cozy/cozy-libs/commit/a0fbf156f514255f85ec22c191460ee87ddfb8cb))
+
+
+
+
+
 # [11.0.0](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@10.0.0...cozy-harvest-lib@11.0.0) (2022-12-21)
 
 

package/dist/components/AccountForm/ConnectionBackdrop.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import cx from 'classnames';
+import { makeStyles } from 'cozy-ui/transpiled/react/styles';
+import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import Backdrop from 'cozy-ui/transpiled/react/Backdrop';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import IconButton from 'cozy-ui/transpiled/react/IconButton';
+import CrossMediumIcon from 'cozy-ui/transpiled/react/Icons/CrossMedium';
+import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress';
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+var useStyles = makeStyles({
+  container: {
+    position: 'fixed',
+    zIndex: 'var(--zIndex-modal)',
+    inset: 0
+  },
+  iconButton: {
+    position: 'absolute'
+  }
+});
+
+var ConnectionBackdrop = function ConnectionBackdrop(_ref) {
+  var name = _ref.name,
+      onClose = _ref.onClose;
+  var styles = useStyles();
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement(MuiCozyTheme, {
+    variant: "inverted"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(Backdrop, {
+    open: true,
+    className: "u-p-2"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "large",
+    onClick: onClose,
+    className: cx('u-right-0 u-top-0 u-m-1 u-m-0-s', styles.iconButton)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: CrossMediumIcon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "u-w-6 u-w-100-s"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h4",
+    className: "u-ta-center"
+  }, t('connectionBackdrop.connecting')), /*#__PURE__*/React.createElement(LinearProgress, {
+    className: "u-mt-1 u-w-100"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    className: "u-mt-1 u-ta-center"
+  }, t('connectionBackdrop.progress', {
+    name: name
+  }))))));
+};
+
+export default ConnectionBackdrop;

package/dist/components/AccountForm/index.js

@@ -39,6 +39,7 @@ import manifest from '../../helpers/manifest';
 import withKonnectorLocales from '../hoc/withKonnectorLocales';
 import withConnectionFlow from '../../models/withConnectionFlow';
 import CannotConnectModal from './CannotConnectModal';
+import ConnectionBackdrop from './ConnectionBackdrop';
 var VALIDATION_ERROR_REQUIRED_FIELD = 'VALIDATION_ERROR_REQUIRED_FIELD';
 /**
  * AccountForm is reponsible of generating a form which will allow user to
@@ -87,7 +88,8 @@ export var AccountForm = /*#__PURE__*/function (_PureComponent) {
 
     _this.state = {
       showConfirmationModal: false,
-      showCannotConnectModal: false
+      showCannotConnectModal: false,
+      showConnectionBackdrop: false
     };
     _this.inputs = {};
     _this.inputFocused = null;
@@ -99,6 +101,8 @@ export var AccountForm = /*#__PURE__*/function (_PureComponent) {
     _this.hideConfirmationModal = _this.hideConfirmationModal.bind(_assertThisInitialized(_this));
     _this.showCannotConnectModal = _this.showCannotConnectModal.bind(_assertThisInitialized(_this));
     _this.hideCannotConnectModal = _this.hideCannotConnectModal.bind(_assertThisInitialized(_this));
+    _this.showConnectionBackdrop = _this.showConnectionBackdrop.bind(_assertThisInitialized(_this));
+    _this.hideConnectionBackdrop = _this.hideConnectionBackdrop.bind(_assertThisInitialized(_this));
     return _this;
   }
   /**
@@ -217,6 +221,7 @@ export var AccountForm = /*#__PURE__*/function (_PureComponent) {
       form.reset(values);
       onSubmit(values);
       this.hideConfirmationModal();
+      this.showConnectionBackdrop();
     }
     /**
      * Callback passed to `<AccountFields />` element. Called with a field name,
@@ -274,6 +279,24 @@ export var AccountForm = /*#__PURE__*/function (_PureComponent) {
         });
       });
     }
+  }, {
+    key: "showConnectionBackdrop",
+    value: function showConnectionBackdrop() {
+      this.setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          showConnectionBackdrop: true
+        });
+      });
+    }
+  }, {
+    key: "hideConnectionBackdrop",
+    value: function hideConnectionBackdrop() {
+      this.setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          showConnectionBackdrop: false
+        });
+      });
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -358,7 +381,7 @@ export var AccountForm = /*#__PURE__*/function (_PureComponent) {
               component: "button",
               onClick: _this3.showCannotConnectModal
             }, t('accountForm.cannotConnectLink'))), /*#__PURE__*/React.createElement(Button, {
-              busy: submitting,
+              busy: submitting && (!flag('harvest.inappconnectors.enabled') || !_this3.state.showConnectionBackdrop),
               className: "u-mt-2 u-mb-1-half",
               disabled: submitting || !_this3.isSubmittable({
                 dirty: dirty,
@@ -372,6 +395,9 @@ export var AccountForm = /*#__PURE__*/function (_PureComponent) {
                 return _this3.handleSubmit(values, form);
               },
               "data-testid": "submit-btn"
+            }), submitting && flag('harvest.inappconnectors.enabled') && _this3.state.showConnectionBackdrop && /*#__PURE__*/React.createElement(ConnectionBackdrop, {
+              name: name,
+              onClose: _this3.hideConnectionBackdrop
             })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Media, {
               align: "top"
             }, /*#__PURE__*/React.createElement(Img, {

package/dist/components/NewAccountModal.js

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useClient } from 'cozy-client';
+import flag from 'cozy-flags';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
 import Spinner from 'cozy-ui/transpiled/react/Spinner';
 import Typography from 'cozy-ui/transpiled/react/Typography';
@@ -74,7 +75,7 @@ var NewAccountModal = function NewAccountModal(_ref) {
       var accountId = triggersModel.getAccountId(trigger);
       var path = "/accounts/".concat(accountId);
 
-      if (trigger.worker !== 'client') {
+      if (!flag('harvest.inappconnectors.enabled') && trigger.worker !== 'client') {
         path += '/success';
       }
 
@@ -84,7 +85,7 @@ var NewAccountModal = function NewAccountModal(_ref) {
       var accountId = triggersModel.getAccountId(trigger);
       var path = "/accounts/".concat(accountId);
 
-      if (trigger.worker !== 'client') {
+      if (!flag('harvest.inappconnectors.enabled') && trigger.worker !== 'client') {
         path += '/success';
       }
 

package/dist/components/Routes/RoutesV4.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
+import flag from 'cozy-flags';
 import { ViewerModal } from '../../datacards/ViewerModal';
 import AccountModal from '../AccountModal';
 import NewAccountModal from '../NewAccountModal';
@@ -61,7 +62,7 @@ var RoutesV4 = function RoutesV4(_ref) {
         onDismiss: onDismiss
       });
     }
-  }), /*#__PURE__*/React.createElement(Route, {
+  }), !flag('harvest.inappconnectors.enabled') && /*#__PURE__*/React.createElement(Route, {
     path: "".concat(konnectorRoot, "/accounts/:accountId/success"),
     exact: true,
     render: function render(_ref4) {

package/dist/components/Routes/RoutesV6.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Routes, Route, Navigate, useParams } from 'react-router-dom';
+import flag from 'cozy-flags';
 import { ViewerModal } from '../../datacards/ViewerModal';
 import AccountModal from '../AccountModal';
 import NewAccountModal from '../NewAccountModal';
@@ -49,7 +50,7 @@ var RoutesV6 = function RoutesV6(_ref) {
         accounts: accountsAndTriggers
       });
     })
-  }), /*#__PURE__*/React.createElement(Route, {
+  }), !flag('harvest.inappconnectors.enabled') && /*#__PURE__*/React.createElement(Route, {
     path: "accounts/:accountId/success",
     element: /*#__PURE__*/React.createElement(HarvestParamsWrapper, null, function (params) {
       return /*#__PURE__*/React.createElement(KonnectorSuccess, {

package/dist/components/cards/LaunchTriggerCard.spec.js

@@ -124,7 +124,7 @@ describe('LaunchTriggerCard', function () {
     }),
         root = _setup5.root;
 
-    expect(root.html()).toContain('Running…');
+    expect(root.html()).toContain('Data recovery…');
   });
   it('should display a syncing message when a trigger launch is expected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var flow, _setup6, root;
@@ -142,7 +142,7 @@ describe('LaunchTriggerCard', function () {
                 flow: flow
               }
             }), root = _setup6.root;
-            expect(root.html()).toContain('Running…');
+            expect(root.html()).toContain('Data recovery…');
 
           case 4:
           case "end":

package/dist/components/cards/helpers.js

@@ -1,8 +1,38 @@
+import { formatLocallyDistanceToNow } from 'cozy-ui/transpiled/react/I18n/format';
+var DEFAULT_TIME = 300000; // To milliseconds (5 minutes)
+
+var getDifferenceInMinutes = function getDifferenceInMinutes(date) {
+  return Date.now() - new Date(date).getTime();
+};
+/**
+ * @param {object} options
+ * @param {object} options.t - i18n function
+ * @param {object} options.running - If the connector is running
+ * @param {object} options.expectingTriggerLaunch - If the trigger is waiting to be launched
+ * @param {object} options.lastSuccessDate - The last date when the trigger was successfully executed
+ * @returns {string}
+ */
+
+
 export var makeLabel = function makeLabel(_ref) {
   var t = _ref.t,
-      f = _ref.f,
       running = _ref.running,
       expectingTriggerLaunch = _ref.expectingTriggerLaunch,
       lastSuccessDate = _ref.lastSuccessDate;
-  return running || expectingTriggerLaunch ? t('card.launchTrigger.lastSync.syncing') : lastSuccessDate ? f(lastSuccessDate, t('card.launchTrigger.lastSync.format')) : t('card.launchTrigger.lastSync.unknown');
+
+  if (running || expectingTriggerLaunch) {
+    return t('card.launchTrigger.lastSync.syncing');
+  }
+
+  if (lastSuccessDate) {
+    if (getDifferenceInMinutes(lastSuccessDate) < DEFAULT_TIME) {
+      return t('card.launchTrigger.lastSync.justNow');
+    }
+
+    return t('card.launchTrigger.lastSync.afterSomeTimes', {
+      times: formatLocallyDistanceToNow(lastSuccessDate)
+    });
+  }
+
+  return t('card.launchTrigger.lastSync.unknown');
 };

package/dist/components/cards/helpers.spec.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get';
+import MockDate from 'mockdate';
 import enLocales from '../../locales/en.json';
 import { makeLabel } from './helpers';
 
@@ -11,7 +12,7 @@ var f = function f(x) {
 };
 
 describe('makeLabel', function () {
-  describe('it should return "Running…"', function () {
+  describe('it should return "Data recovery…"', function () {
     it('when running is true', function () {
       var res = makeLabel({
         t: t,
@@ -20,7 +21,7 @@ describe('makeLabel', function () {
         expectingTriggerLaunch: false,
         lastSuccessDate: '2021'
       });
-      expect(res).toBe('Running…');
+      expect(res).toBe('Data recovery…');
     });
     it('when runggin and expectingTriggerLaunch are true', function () {
       var res = makeLabel({
@@ -30,7 +31,7 @@ describe('makeLabel', function () {
         expectingTriggerLaunch: true,
         lastSuccessDate: '2021'
       });
-      expect(res).toBe('Running…');
+      expect(res).toBe('Data recovery…');
     });
     it('when expectingTriggerLaunch is true', function () {
       var res = makeLabel({
@@ -40,7 +41,7 @@ describe('makeLabel', function () {
         expectingTriggerLaunch: true,
         lastSuccessDate: '2021'
       });
-      expect(res).toBe('Running…');
+      expect(res).toBe('Data recovery…');
     });
     it('when lastSuccessDate is null', function () {
       var res = makeLabel({
@@ -50,19 +51,35 @@ describe('makeLabel', function () {
         expectingTriggerLaunch: true,
         lastSuccessDate: null
       });
-      expect(res).toBe('Running…');
+      expect(res).toBe('Data recovery…');
     });
   });
   describe('when running and expectingTriggerLaunch are false', function () {
-    it('should return lastSuccessDate if defined', function () {
+    beforeEach(function () {
+      MockDate.set('2020-12-25T12:00:00.000Z');
+    });
+    afterEach(function () {
+      MockDate.reset();
+    });
+    it('should return "Sync. ago..." if lastSuccessDate is defined and > 5 minutes', function () {
       var res = makeLabel({
         t: t,
         f: f,
         running: false,
         expectingTriggerLaunch: false,
-        lastSuccessDate: '2021'
+        lastSuccessDate: '2020-12-25T11:55:00.000Z'
+      });
+      expect(res).toContain("".concat(t('card.launchTrigger.lastSync.afterSomeTimes')));
+    });
+    it('should return "Sync. just now" if lastSuccessDate is defined and < 5 minutes', function () {
+      var res = makeLabel({
+        t: t,
+        f: f,
+        running: false,
+        expectingTriggerLaunch: false,
+        lastSuccessDate: '2020-12-25T11:55:01.000Z'
       });
-      expect(res).toBe('2021');
+      expect(res).toBe("".concat(t('card.launchTrigger.lastSync.justNow')));
     });
     it('should return "Unknown" if lastSuccessDate is null', function () {
       var res = makeLabel({

package/dist/locales/en.json

@@ -88,9 +88,10 @@
       },
       "lastSync": {
         "label": "Update:",
-        "syncing": "Running…",
+        "syncing": "Data recovery…",
         "unknown": "Unknown",
-        "format": "MMMM D[,] YYYY [at] HH[:]mm"
+        "afterSomeTimes": "Sync. %{times} ago",
+        "justNow": "Sync. just now"
       }
     },
     "appLink": {
@@ -521,6 +522,10 @@
       "secondaryText": "Cancel"
     }
   },
+  "connectionBackdrop": {
+    "connecting": "Connection in progress",
+    "progress": "We are requesting %{name}, this can take up to 30 seconds..."
+  },
   "disconnectedAccountModal": {
     "disconnected-help": "This account is disconnected. Your data has been kept. If you want to restart the synchronisation, please reconfigure your account with the \"Add a bank\" button."
   },

package/dist/locales/fr.json

@@ -88,9 +88,10 @@
       },
       "lastSync": {
         "label": "Mise à jour :",
-        "syncing": "En cours...",
+        "syncing": "Récupération des données…",
         "unknown": "Indéterminée",
-        "format": "Le D MMMM YYYY [à] HH[:]mm"
+        "afterSomeTimes": "Sync. il y a %{times}",
+        "justNow": "Sync. à l'instant"
       }
     },
     "appLink": {
@@ -521,6 +522,10 @@
       "secondaryText": "Annuler"
     }
   },
+  "connectionBackdrop": {
+    "connecting": "Connexion en cours",
+    "progress": "Nous interrogeons %{name}, cela peut prendre jusqu'à 30 secondes..."
+  },
   "disconnectedAccountModal": {
     "disconnected-help": "Vous avez déconnecté votre compte. Vous conservez l'historique de vos données déjà importées. Si vous souhaitez reprendre la connexion, reconfigurez votre compte depuis le bouton \"Ajouter une banque\"."
   },

package/dist/locales/nl_NL.json

@@ -85,7 +85,8 @@
         "label": "Bijwerken:",
         "syncing": "Bezig met uitvoeren…",
         "unknown": "Onbekend",
-        "format": "D MMMM YYYY [om] HH[:]mm"
+        "afterSomeTimes": "Sync. %{times} geleden",
+        "justNow": "Sync. onmiddellijk"
       }
     },
     "appLink": {
@@ -540,4 +541,4 @@
       "caption": "Deze dienst haalt je recentste documenten op en maakt er een volledige back-up van."
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-harvest-lib",
-  "version": "11.0.0",
+  "version": "11.2.0",
   "description": "Provides logic, modules and components for Cozy's harvest applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -68,6 +68,7 @@
     "jest-resolve-cached": "1.0.0",
     "jsdom": "16.5.0",
     "leaflet": "1.8.0",
+    "mockdate": "^3.0.5",
     "prop-types": "15.7.2",
     "react": "16.12.0",
     "react-dom": "16.13.0",
@@ -89,5 +90,5 @@
     "react-router-dom": ">=4.3.1"
   },
   "sideEffects": false,
-  "gitHead": "78f7a3bc41cdb2b7527878ec464fd8ba50905bd4"
+  "gitHead": "034e1cbcf44130b8ad3e697001e017a1a610698b"
 }

package/src/components/AccountForm/ConnectionBackdrop.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import cx from 'classnames'
+
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Backdrop from 'cozy-ui/transpiled/react/Backdrop'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CrossMediumIcon from 'cozy-ui/transpiled/react/Icons/CrossMedium'
+import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress'
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const useStyles = makeStyles({
+  container: {
+    position: 'fixed',
+    zIndex: 'var(--zIndex-modal)',
+    inset: 0
+  },
+  iconButton: {
+    position: 'absolute'
+  }
+})
+
+const ConnectionBackdrop = ({ name, onClose }) => {
+  const styles = useStyles()
+  const { t } = useI18n()
+
+  return (
+    <MuiCozyTheme variant="inverted">
+      <div className={styles.container}>
+        <Backdrop open className="u-p-2">
+          <IconButton
+            size="large"
+            onClick={onClose}
+            className={cx('u-right-0 u-top-0 u-m-1 u-m-0-s', styles.iconButton)}
+          >
+            <Icon icon={CrossMediumIcon} />
+          </IconButton>
+          <div className="u-w-6 u-w-100-s">
+            <Typography variant="h4" className="u-ta-center">
+              {t('connectionBackdrop.connecting')}
+            </Typography>
+            <LinearProgress className="u-mt-1 u-w-100" />
+            <Typography variant="body2" className="u-mt-1 u-ta-center">
+              {t('connectionBackdrop.progress', { name })}
+            </Typography>
+          </div>
+        </Backdrop>
+      </div>
+    </MuiCozyTheme>
+  )
+}
+
+export default ConnectionBackdrop

package/src/components/AccountForm/index.jsx

@@ -28,6 +28,7 @@ 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'
 
@@ -47,7 +48,8 @@ export class AccountForm extends PureComponent {
 
     this.state = {
       showConfirmationModal: false,
-      showCannotConnectModal: false
+      showCannotConnectModal: false,
+      showConnectionBackdrop: false
     }
 
     this.inputs = {}
@@ -61,6 +63,8 @@ export class AccountForm extends PureComponent {
     this.hideConfirmationModal = this.hideConfirmationModal.bind(this)
     this.showCannotConnectModal = this.showCannotConnectModal.bind(this)
     this.hideCannotConnectModal = this.hideCannotConnectModal.bind(this)
+    this.showConnectionBackdrop = this.showConnectionBackdrop.bind(this)
+    this.hideConnectionBackdrop = this.hideConnectionBackdrop.bind(this)
   }
 
   /**
@@ -162,6 +166,7 @@ export class AccountForm extends PureComponent {
     form.reset(values)
     onSubmit(values)
     this.hideConfirmationModal()
+    this.showConnectionBackdrop()
   }
 
   /**
@@ -209,6 +214,14 @@ export class AccountForm extends PureComponent {
     this.setState(prev => ({ ...prev, showCannotConnectModal: false }))
   }
 
+  showConnectionBackdrop() {
+    this.setState(prev => ({ ...prev, showConnectionBackdrop: true }))
+  }
+
+  hideConnectionBackdrop() {
+    this.setState(prev => ({ ...prev, showConnectionBackdrop: false }))
+  }
+
   manageSecretFieldOptions = () => {
     const secretFieldOptions = this.props.fieldOptions
     const secretInput = this.inputs[SECRET]
@@ -302,7 +315,6 @@ export class AccountForm extends PureComponent {
                   inputRefByName={this.inputRefByName}
                   t={t}
                 />
-
                 {flag('harvest.inappconnectors.enabled') && (
                   <Typography>
                     <Link
@@ -314,9 +326,12 @@ export class AccountForm extends PureComponent {
                     </Link>
                   </Typography>
                 )}
-
                 <Button
-                  busy={submitting}
+                  busy={
+                    submitting &&
+                    (!flag('harvest.inappconnectors.enabled') ||
+                      !this.state.showConnectionBackdrop)
+                  }
                   className="u-mt-2 u-mb-1-half"
                   disabled={
                     submitting ||
@@ -327,6 +342,14 @@ export class AccountForm extends PureComponent {
                   onClick={() => this.handleSubmit(values, form)}
                   data-testid="submit-btn"
                 />
+                {submitting &&
+                  flag('harvest.inappconnectors.enabled') &&
+                  this.state.showConnectionBackdrop && (
+                    <ConnectionBackdrop
+                      name={name}
+                      onClose={this.hideConnectionBackdrop}
+                    />
+                  )}
               </>
             ) : (
               <>

package/src/components/NewAccountModal.jsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import { useClient } from 'cozy-client'
+import flag from 'cozy-flags'
 
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
@@ -71,7 +72,10 @@ const NewAccountModal = ({ konnector, onDismiss }) => {
             onLoginSuccess={trigger => {
               const accountId = triggersModel.getAccountId(trigger)
               let path = `/accounts/${accountId}`
-              if (trigger.worker !== 'client') {
+              if (
+                !flag('harvest.inappconnectors.enabled') &&
+                trigger.worker !== 'client'
+              ) {
                 path += '/success'
               }
               replaceHistory(path)
@@ -79,7 +83,10 @@ const NewAccountModal = ({ konnector, onDismiss }) => {
             onSuccess={trigger => {
               const accountId = triggersModel.getAccountId(trigger)
               let path = `/accounts/${accountId}`
-              if (trigger.worker !== 'client') {
+              if (
+                !flag('harvest.inappconnectors.enabled') &&
+                trigger.worker !== 'client'
+              ) {
                 path += '/success'
               }
               replaceHistory(path)

package/src/components/Routes/RoutesV4.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Switch, Route, Redirect } from 'react-router-dom'
 
+import flag from 'cozy-flags'
+
 import { ViewerModal } from '../../datacards/ViewerModal'
 import AccountModal from '../AccountModal'
 import NewAccountModal from '../NewAccountModal'
@@ -66,20 +68,22 @@ const RoutesV4 = ({
           />
         )}
       />
-      <Route
-        path={`${konnectorRoot}/accounts/:accountId/success`}
-        exact
-        render={({ match }) => {
-          return (
-            <KonnectorSuccess
-              konnector={konnectorWithTriggers}
-              accountId={match.params.accountId}
-              accounts={accountsAndTriggers}
-              onDismiss={onDismiss}
-            />
-          )
-        }}
-      />
+      {!flag('harvest.inappconnectors.enabled') && (
+        <Route
+          path={`${konnectorRoot}/accounts/:accountId/success`}
+          exact
+          render={({ match }) => {
+            return (
+              <KonnectorSuccess
+                konnector={konnectorWithTriggers}
+                accountId={match.params.accountId}
+                accounts={accountsAndTriggers}
+                onDismiss={onDismiss}
+              />
+            )
+          }}
+        />
+      )}
       <Redirect from={`${konnectorRoot}/*`} to={`${konnectorRoot}/`} />
     </Switch>
   )

package/src/components/Routes/RoutesV6.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Routes, Route, Navigate, useParams } from 'react-router-dom'
 
+import flag from 'cozy-flags'
+
 import { ViewerModal } from '../../datacards/ViewerModal'
 import AccountModal from '../AccountModal'
 import NewAccountModal from '../NewAccountModal'
@@ -71,21 +73,23 @@ const RoutesV6 = ({
           </HarvestParamsWrapper>
         }
       />
-      <Route
-        path="accounts/:accountId/success"
-        element={
-          <HarvestParamsWrapper>
-            {params => (
-              <KonnectorSuccess
-                konnector={konnectorWithTriggers}
-                accountId={params.accountId}
-                accounts={accountsAndTriggers}
-                onDismiss={onDismiss}
-              />
-            )}
-          </HarvestParamsWrapper>
-        }
-      />
+      {!flag('harvest.inappconnectors.enabled') && (
+        <Route
+          path="accounts/:accountId/success"
+          element={
+            <HarvestParamsWrapper>
+              {params => (
+                <KonnectorSuccess
+                  konnector={konnectorWithTriggers}
+                  accountId={params.accountId}
+                  accounts={accountsAndTriggers}
+                  onDismiss={onDismiss}
+                />
+              )}
+            </HarvestParamsWrapper>
+          }
+        />
+      )}
 
       <Route
         path="viewer/:accountId/:folderToSaveId/:fileIndex"

package/src/components/cards/LaunchTriggerCard.spec.jsx

@@ -126,7 +126,7 @@ describe('LaunchTriggerCard', () => {
         flow
       }
     })
-    expect(root.html()).toContain('Running…')
+    expect(root.html()).toContain('Data recovery…')
   })
 
   it('should display a syncing message when a trigger launch is expected', async () => {
@@ -138,6 +138,6 @@ describe('LaunchTriggerCard', () => {
         flow
       }
     })
-    expect(root.html()).toContain('Running…')
+    expect(root.html()).toContain('Data recovery…')
   })
 })

package/src/components/cards/helpers.js

@@ -1,13 +1,38 @@
+import { formatLocallyDistanceToNow } from 'cozy-ui/transpiled/react/I18n/format'
+
+const DEFAULT_TIME = 300_000 // To milliseconds (5 minutes)
+
+const getDifferenceInMinutes = date => {
+  return Date.now() - new Date(date).getTime()
+}
+
+/**
+ * @param {object} options
+ * @param {object} options.t - i18n function
+ * @param {object} options.running - If the connector is running
+ * @param {object} options.expectingTriggerLaunch - If the trigger is waiting to be launched
+ * @param {object} options.lastSuccessDate - The last date when the trigger was successfully executed
+ * @returns {string}
+ */
 export const makeLabel = ({
   t,
-  f,
   running,
   expectingTriggerLaunch,
   lastSuccessDate
 }) => {
-  return running || expectingTriggerLaunch
-    ? t('card.launchTrigger.lastSync.syncing')
-    : lastSuccessDate
-    ? f(lastSuccessDate, t('card.launchTrigger.lastSync.format'))
-    : t('card.launchTrigger.lastSync.unknown')
+  if (running || expectingTriggerLaunch) {
+    return t('card.launchTrigger.lastSync.syncing')
+  }
+
+  if (lastSuccessDate) {
+    if (getDifferenceInMinutes(lastSuccessDate) < DEFAULT_TIME) {
+      return t('card.launchTrigger.lastSync.justNow')
+    }
+
+    return t('card.launchTrigger.lastSync.afterSomeTimes', {
+      times: formatLocallyDistanceToNow(lastSuccessDate)
+    })
+  }
+
+  return t('card.launchTrigger.lastSync.unknown')
 }

package/src/components/cards/helpers.spec.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get'
+import MockDate from 'mockdate'
 
 import enLocales from '../../locales/en.json'
 import { makeLabel } from './helpers'
@@ -7,7 +8,7 @@ const t = x => get(enLocales, x)
 const f = x => x
 
 describe('makeLabel', () => {
-  describe('it should return "Running…"', () => {
+  describe('it should return "Data recovery…"', () => {
     it('when running is true', () => {
       const res = makeLabel({
         t,
@@ -17,7 +18,7 @@ describe('makeLabel', () => {
         lastSuccessDate: '2021'
       })
 
-      expect(res).toBe('Running…')
+      expect(res).toBe('Data recovery…')
     })
 
     it('when runggin and expectingTriggerLaunch are true', () => {
@@ -29,7 +30,7 @@ describe('makeLabel', () => {
         lastSuccessDate: '2021'
       })
 
-      expect(res).toBe('Running…')
+      expect(res).toBe('Data recovery…')
     })
 
     it('when expectingTriggerLaunch is true', () => {
@@ -41,7 +42,7 @@ describe('makeLabel', () => {
         lastSuccessDate: '2021'
       })
 
-      expect(res).toBe('Running…')
+      expect(res).toBe('Data recovery…')
     })
 
     it('when lastSuccessDate is null', () => {
@@ -53,21 +54,42 @@ describe('makeLabel', () => {
         lastSuccessDate: null
       })
 
-      expect(res).toBe('Running…')
+      expect(res).toBe('Data recovery…')
     })
   })
 
   describe('when running and expectingTriggerLaunch are false', () => {
-    it('should return lastSuccessDate if defined', () => {
+    beforeEach(() => {
+      MockDate.set('2020-12-25T12:00:00.000Z')
+    })
+    afterEach(() => {
+      MockDate.reset()
+    })
+
+    it('should return "Sync. ago..." if lastSuccessDate is defined and > 5 minutes', () => {
       const res = makeLabel({
         t,
         f,
         running: false,
         expectingTriggerLaunch: false,
-        lastSuccessDate: '2021'
+        lastSuccessDate: '2020-12-25T11:55:00.000Z'
+      })
+
+      expect(res).toContain(
+        `${t('card.launchTrigger.lastSync.afterSomeTimes')}`
+      )
+    })
+
+    it('should return "Sync. just now" if lastSuccessDate is defined and < 5 minutes', () => {
+      const res = makeLabel({
+        t,
+        f,
+        running: false,
+        expectingTriggerLaunch: false,
+        lastSuccessDate: '2020-12-25T11:55:01.000Z'
       })
 
-      expect(res).toBe('2021')
+      expect(res).toBe(`${t('card.launchTrigger.lastSync.justNow')}`)
     })
 
     it('should return "Unknown" if lastSuccessDate is null', () => {

package/src/locales/en.json

@@ -88,9 +88,10 @@
       },
       "lastSync": {
         "label": "Update:",
-        "syncing": "Running…",
+        "syncing": "Data recovery…",
         "unknown": "Unknown",
-        "format": "MMMM D[,] YYYY [at] HH[:]mm"
+        "afterSomeTimes": "Sync. %{times} ago",
+        "justNow": "Sync. just now"
       }
     },
     "appLink": {
@@ -521,6 +522,10 @@
       "secondaryText": "Cancel"
     }
   },
+  "connectionBackdrop": {
+    "connecting": "Connection in progress",
+    "progress": "We are requesting %{name}, this can take up to 30 seconds..."
+  },
   "disconnectedAccountModal": {
     "disconnected-help": "This account is disconnected. Your data has been kept. If you want to restart the synchronisation, please reconfigure your account with the \"Add a bank\" button."
   },

package/src/locales/fr.json

@@ -88,9 +88,10 @@
       },
       "lastSync": {
         "label": "Mise à jour :",
-        "syncing": "En cours...",
+        "syncing": "Récupération des données…",
         "unknown": "Indéterminée",
-        "format": "Le D MMMM YYYY [à] HH[:]mm"
+        "afterSomeTimes": "Sync. il y a %{times}",
+        "justNow": "Sync. à l'instant"
       }
     },
     "appLink": {
@@ -521,6 +522,10 @@
       "secondaryText": "Annuler"
     }
   },
+  "connectionBackdrop": {
+    "connecting": "Connexion en cours",
+    "progress": "Nous interrogeons %{name}, cela peut prendre jusqu'à 30 secondes..."
+  },
   "disconnectedAccountModal": {
     "disconnected-help": "Vous avez déconnecté votre compte. Vous conservez l'historique de vos données déjà importées. Si vous souhaitez reprendre la connexion, reconfigurez votre compte depuis le bouton \"Ajouter une banque\"."
   },

package/src/locales/nl_NL.json

@@ -85,7 +85,8 @@
         "label": "Bijwerken:",
         "syncing": "Bezig met uitvoeren…",
         "unknown": "Onbekend",
-        "format": "D MMMM YYYY [om] HH[:]mm"
+        "afterSomeTimes": "Sync. %{times} geleden",
+        "justNow": "Sync. onmiddellijk"
       }
     },
     "appLink": {
@@ -540,4 +541,4 @@
       "caption": "Deze dienst haalt je recentste documenten op en maakt er een volledige back-up van."
     }
   }
-}
+}