feat: Add confirm trusted recipients dialog

Add a `ConfirmTrustedRecipientsDialog` component that allows the user
to see contacts who need their identity to be confirmed and then
confirm or reject those contacts

`ConfirmTrustedRecipientsDialog` should receive confirmation related
methods in `twoStepsConfirmationMethods` prop

`ConfirmTrustedRecipientsDialog` can retrieve a list of contacts who
need to be confirmed by calling `getRecipientsToBeConfirmed` from those
props. It displays a loading spinner while this method is beeing
processed

`ConfirmTrustedRecipientsDialog` can display a custom dialog content
when the users clic on the `verify` action. The custom dialog can be
set by specifying a component in `recipientConfirmationDialogContent`
prop

From this custom dialog content the user can confirm the contact. Then
`confirmRecipient` is called from those props

From this custom dialog content the user can reject a contact. Then
`rejectRecipient` is called from those props

packages/cozy-sharing/locales/en.json

@@ -385,5 +385,9 @@
       "instruction": "For security reasons, please verify **%{userName} (%{userEmail})**'s identity. To do this, contact **%{userName}** via the means of communication of your choice (call, text message, instant messaging app...) and verify their security code.<br><br>Every Cozy user has a security code that they can find using their web application. Their security code must correspond to:",
       "instruction2": "If it is the case, then you can confirm this contact who will be considered as secure for your next sharings."
     }
+  },
+  "ConfirmRecipientModal": {
+    "title": "%{smart_count} contact waiting for confirmation |||| %{smart_count} contacts waiting for confirmation",
+    "intruction": "Verify identity of their Cozy in order to give them access content you shared with them."
   }
 }

packages/cozy-sharing/locales/fr.json

@@ -384,5 +384,9 @@
       "instruction": "Par sécurité, nous vous proposons de vérifier l'identité de **%{userName} (%{userEmail})**. Pour cela, contactez **%{userName}** par le moyen de votre choix (Appel, SMS, messagerie instantanée, ...) afin de vérifier son code de sécurité.<br><br>Chaque Cozy a une phrase de sécurité qu'il peut retrouver dans son interface web. Sa phrase de sécurité doit correspondre à :",
       "instruction2": "Si c'est bien le cas, vous pouvez confirmer ce contact qui sera alors vu comme sécurisé pour vos prochains partages."
     }
+  },
+  "ConfirmRecipientModal": {
+    "title": "%{smart_count} contact en attente de vérification |||| %{smart_count} contacts en attente de vérification",
+    "intruction": "Vérifier l'identité de leur Cozy pour leur permettre d'accéder aux éléments que vous avez partagés avec eux."
   }
 }

packages/cozy-sharing/src/ConfirmTrustedRecipientsDialog.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import SharingContext from './context'
+import withLocales from './withLocales'
+import { default as DumbConfirmTrustedRecipientsDialog } from './components/ConfirmTrustedRecipientsDialog'
+
+export const ConfirmTrustedRecipientsDialog = withLocales(
+  ({ document, ...rest }) => (
+    <SharingContext.Consumer>
+      {() => (
+        <DumbConfirmTrustedRecipientsDialog document={document} {...rest} />
+      )}
+    </SharingContext.Consumer>
+  )
+)

packages/cozy-sharing/src/components/ConfirmTrustedRecipientsDialog.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+import Recipient from './Recipient'
+
+import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer'
+
+/**
+ * Displays the sharing interface that can be used when ConfirmTrustedRecipientsDialog is in sharing state
+ */
+const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
+  const { t } = useI18n()
+
+  return (
+    <>
+      <Typography variant="body1" className="u-mb-2">
+        {t(`ConfirmRecipientModal.intruction`)}
+      </Typography>
+
+      {recipientsToBeConfirmed.map(recipientConfirmationData => {
+        return (
+          <Recipient
+            {...recipientConfirmationData}
+            key={`key_r_${recipientConfirmationData.id}`}
+            isOwner={false}
+            recipientConfirmationData={recipientConfirmationData}
+            verifyRecipient={verifyRecipient}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+/**
+ * Displays the dialog's title that can be used when ConfirmTrustedRecipientsDialog is in sharing state
+ */
+const SharingTitle = ({ recipientsToBeConfirmed }) => {
+  const { t } = useI18n()
+
+  const title = t(`ConfirmRecipientModal.title`, {
+    smart_count: recipientsToBeConfirmed.length
+  })
+
+  return title
+}
+
+const ConfirmTrustedRecipientsDialog = ({ ...props }) => {
+  return (
+    <ShareDialogTwoStepsConfirmationContainer
+      {...props}
+      dialogContentOnShare={SharingContent}
+      dialogActionsOnShare={null}
+      dialogTitleOnShare={SharingTitle}
+    />
+  )
+}
+
+export default ConfirmTrustedRecipientsDialog

packages/cozy-sharing/src/index.jsx

@@ -21,3 +21,6 @@ export {
 } from './components/CozyPassFingerprintDialogContent'
 export { SharingBannerPlugin } from './SharingBanner'
 export { useSharingInfos } from './SharingBanner/hooks/useSharingInfos'
+export {
+  ConfirmTrustedRecipientsDialog
+} from './ConfirmTrustedRecipientsDialog'