cozy-sharing 10.2.0 → 10.3.0

package/docs/share-modal-architecture.md

@@ -0,0 +1,44 @@
+# ShareModal architecture
+
+```mermaid
+flowchart TD
+    ShareModal --> ShareModalConditions{isReadOnly}
+    ShareModalConditions --> |yes| SharingDetailsModal
+    ShareModalConditions --> |no| EditableSharingModal
+    SharingDetailsModal --> WhoHasAccess
+    EditableSharingModal --> DumbShareModal
+    DumbShareModal --> DumbShareModalConditions{isOnlyByLink}
+    DumbShareModalConditions --> |yes| ShareDialogOnlyByLink
+    DumbShareModalConditions --> |no| ShareDialogCozyToCozy
+    ShareDialogOnlyByLink --> WhoHasAccess
+    ShareDialogOnlyByLink --> DumbShareByLink
+    ShareDialogCozyToCozy --> ShareDialogTwoStepsConfirmationContainer
+    ShareDialogTwoStepsConfirmationContainer --> |dialogContentOnShare|SharingContent
+    ShareDialogTwoStepsConfirmationContainer --> |dialogTitleOnShare|SharingTitleFunction
+    ShareDialogTwoStepsConfirmationContainer --> |dialogActionsOnShare|DumbShareByLink
+    SharingContent --> WhoHasAccess
+    SharingContent --> ShareByEmail
+    ConfirmTrustedRecipientsDialog --> DumbConfirmTrustedRecipientsDialog
+    DumbConfirmTrustedRecipientsDialog --> ShareDialogTwoStepsConfirmationContainer
+    ShareByEmail --> ShareRecipientsInput
+    ShareRecipientsInput --> ShareAutosuggest
+```
+
+### Specific case of `ShareDialogTwoStepsConfirmationContainer`
+
+#### Content
+
+```mermaid
+flowchart TD
+    A(status === 'error') --> |yes|ErrorContent
+    A --> |no| B(status === 'loading')
+    B --> |yes|LoadingContent
+    B --> |no| C(status === 'sharing')
+    C --> |yes|DialogContentOnShare
+    DialogContentOnShare --> SharingContent
+    C --> |no|D(status === 'confirmingRecipient')
+    D --> |yes|ConfirmationDialogContent
+    D --> |no|E(status === 'rejectingRecipient')
+    E --> |yes|RejectDialogContent
+    E --> |no|F[null]
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -60,5 +60,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "b90bf90c604284a0f77a89ed394ee3a9b25be889"
+  "gitHead": "4f5a6b23fb9df75f5f564f5d41667e922742b05b"
 }

package/src/ConfirmTrustedRecipientsDialog.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { default as DumbConfirmTrustedRecipientsDialog } from './components/ConfirmTrustedRecipientsDialog'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export const ConfirmTrustedRecipientsDialog = withLocales(
   ({ document, ...rest }) => (

package/src/ShareButton.jsx

@@ -8,7 +8,7 @@ import {
   SharedWithMeButton
 } from './components/ShareButton'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export const ShareButton = withLocales(({ docId, useShortLabel, ...rest }) => {
   const { t } = useI18n()

package/src/ShareButton.spec.jsx

@@ -16,7 +16,7 @@ jest.mock('cozy-ui/transpiled/react/providers/I18n', () => ({
   useI18n: jest.fn().mockReturnValue({ t: jest.fn() })
 }))
 
-jest.mock('./withLocales', () =>
+jest.mock('./hoc/withLocales', () =>
   // eslint-disable-next-line react/display-name
   Component => props => <>{Component(props)}</>
 )

package/src/SharedBadge.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { default as DumbSharedBadge } from './components/SharedBadge'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export const SharedBadge = withLocales(({ docId, ...rest }) => (
   <SharingContext.Consumer>

package/src/SharedRecipients.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import RecipientsAvatars from './components/Recipient/RecipientsAvatars'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export const SharedRecipients = withLocales(({ docId, onClick, ...rest }) => (
   <SharingContext.Consumer>

package/src/SharedRecipientsList.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { default as RecipientsList } from './components/WhoHasAccessLight'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export const SharedRecipientsList = withLocales(({ docId, ...rest }) => (
   <SharingContext.Consumer>

package/src/SharedStatus.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import RecipientsAvatars from './components/Recipient/RecipientsAvatars'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export const SharedStatus = withLocales(
   ({ docId, className, noSharedClassName, onClick, showMeAsOwner }) => (

package/src/SharingOwnerAvatar.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import RecipientAvatar from './components/Recipient/RecipientAvatar'
 import SharingContext from './context'
-import withLocales from './withLocales'
+import withLocales from './hoc/withLocales'
 
 export const SharingOwnerAvatar = withLocales(({ docId, ...rest }) => (
   <SharingContext.Consumer>

package/src/assets/icons/icon-arrow-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <polyline fill="none" stroke="#95999D" stroke-width="2" points="33 36 38 41 43 36" transform="translate(-32 -32)" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/icon-calendar-16.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="16px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-224.000000, -192.000000)">
+        <g id="slices" transform="translate(32.000000, 32.000000)"></g>
+        <path d="M237,193 L240,193 L240,195 L224,195 L224,193 L227,193 L227,192 L229,192 L229,193 L235,193 L235,192 L237,192 L237,193 Z M224,196 L240,196 L240,206.997527 C240,207.551177 239.555369,208 238.999128,208 L225.000872,208 C224.448106,208 224,207.544239 224,206.997527 L224,196 Z M226,198 L226,206 L238,206 L238,198 L226,198 Z M232,201 L237,201 L237,205 L232,205 L232,201 Z" id="calendar" fill="#95999D"></path>
+    </g>
+</svg>

package/src/assets/icons/icon-check-blue.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="icon-check-blue.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1296"
+     inkscape:window-height="770"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="-0.98305085"
+     inkscape:cy="8"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <g
+     transform="translate(-32 -128)"
+     id="g4"
+     style="stroke:none;stroke-opacity:1;fill:#297ef0;fill-opacity:1">
+    <path
+       d="M33.7071068,138.292893 C33.3165825,137.902369 32.6834175,137.902369 32.2928932,138.292893 C31.9023689,138.683418 31.9023689,139.316582 32.2928932,139.707107 L35.2928932,142.707107 C35.6834175,143.097631 36.3165825,143.097631 36.7071068,142.707107 L47.7071068,131.707107 C48.0976311,131.316582 48.0976311,130.683418 47.7071068,130.292893 C47.3165825,129.902369 46.6834175,129.902369 46.2928932,130.292893 L36,140.585786 L33.7071068,138.292893 Z"
+       id="path2"
+       style="stroke:none;stroke-opacity:1;fill:#297ef0;fill-opacity:1" />
+  </g>
+</svg>

package/src/assets/icons/icon-cross-bold.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" 
+  xmlns="http://www.w3.org/2000/svg" 
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path fill="#32363F" fill-rule="nonzero" d="M8 6.586l5.293-5.293a1 1 0 0 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 1 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 1 1 1.414-1.414L8 6.586z" />
+</svg>

package/src/assets/icons/icon-link.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M8.87940867,3.87953579 C8.48888438,4.27006009 7.8557194,4.27006009 7.46519511,3.87953579 C7.07467081,3.4890115 7.07467081,2.85584652 7.46519511,2.46532223 L9.05304103,0.877476309 C10.2226142,-0.292096843 12.1218341,-0.292252339 13.289659,0.875572597 L14.4691583,2.05507187 C15.6394269,3.22534048 15.6355011,5.12344332 14.4628542,6.29609024 L10.9986358,9.7603087 C9.4643126,11.2946319 6.92867661,11.3430173 5.46519511,9.87953579 C5.07467081,9.4890115 5.07467081,8.85584652 5.46519511,8.46532223 C5.8557194,8.07479794 6.48888438,8.07479794 6.87940867,8.46532223 C7.54950929,9.13542285 8.81932532,9.11119201 9.5844222,8.34609513 L13.0486407,4.88187668 C13.4415455,4.48897179 13.4428522,3.85719292 13.0549447,3.46928543 L11.8754455,2.28978616 C11.488721,1.90306165 10.855831,1.90311347 10.4672546,2.29168987 L8.87940867,3.87953579 Z M6.46519511,11.4653222 C6.8557194,11.0747979 7.48888438,11.0747979 7.87940867,11.4653222 C8.26993296,11.8558465 8.26993296,12.4890115 7.87940867,12.8795358 L6.29156275,14.4673817 C5.12198959,15.6369549 3.22276968,15.6371104 2.05494474,14.4692854 L0.875445471,13.2897862 C-0.294823143,12.1195175 -0.290897366,10.2214147 0.881749556,9.04876778 L4.34596801,5.58454933 C5.88029117,4.05022616 8.41592716,4.00184073 9.87940867,5.46532223 C10.269933,5.85584652 10.269933,6.4890115 9.87940867,6.87953579 C9.48888438,7.27006009 8.8557194,7.27006009 8.46519511,6.87953579 C7.79509448,6.20943517 6.52527845,6.23366601 5.76018157,6.99876289 L2.29596312,10.4629813 C1.90305823,10.8558862 1.90175154,11.4876651 2.28965903,11.8755726 L3.4691583,13.0550719 C3.85588281,13.4417964 4.48877278,13.4417446 4.87734918,13.0531682 L6.46519511,11.4653222 Z" id="link-1-path-1"></path>
+    </defs>
+    <g id="🍦-icons" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="icons/16/link">
+            <mask id="mask-2">
+                <use xlink:href="#link-1-path-1"></use>
+            </mask>
+            <use id="Mask" fill-rule="nonzero" xlink:href="#link-1-path-1"></use>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/icon-pen-16.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#95999D" fill-rule="evenodd" d="M201.5,99.5 L192,109.025391 L192,112 L195.03772,112 L204.5,102.5 L201.5,99.5 Z M206.912154,96.9121541 C206.132243,96.1322429 204.869144,96.1308556 204.089264,96.9107361 L203,98 L206.030762,101 L207.092271,99.9252663 C207.869738,99.1381134 207.863777,97.8637772 207.087846,97.0878459 L206.912154,96.9121541 Z M199,110 L204.997071,110 C205.550973,110 206,110.443865 206,111 C206,111.552285 205.553689,112 205.002455,112 L197,112 L199,110 Z" transform="translate(-192 -96)"/>
+</svg>

package/src/components/CozyPassFingerprintDialogContent.jsx

@@ -7,7 +7,7 @@ import Paper from 'cozy-ui/transpiled/react/Paper'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import styles from './CozyPassFingerprintDialogContent.styl'
+import styles from '../styles/CozyPassFingerprintDialogContent.styl'
 
 /**
  * CozyPassFingerprintDialogContent can be use as a content for ShareModal when

package/src/components/Recipient/Identity.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import styles from './recipient.styl'
+import styles from '../../styles/recipient.styl'
 
 const Identity = ({ name, details }) => (
   <div className={classNames(styles['recipient-idents'], 'u-ml-1')}>

package/src/components/Recipient/LinkRecipient.jsx

@@ -13,8 +13,8 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import LinkRecipientPermissions from './LinkRecipientPermissions'
 import RecipientConfirm from './RecipientConfirm'
-import styles from './recipient.styl'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
+import styles from '../../styles/recipient.styl'
 
 const LinkRecipient = props => {
   const { t } = useI18n()

package/src/components/Recipient/OwnerIdentity.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import Identity from './Identity'
-import styles from './recipient.styl'
 import { getDisplayName, getInitials } from '../../models'
+import styles from '../../styles/recipient.styl'
 
 const OwnerIdentity = ({ url, size, ...rest }) => (
   <div className={styles['avatar']}>

package/src/components/Recipient/RecipientConfirm.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import modalStyles from '../../share.styl'
+import modalStyles from '../../styles/share.styl'
 
 /**
  * Displays the confirmation interface that allows to confirm or reject a recipient

package/src/components/Recipient/RecipientList.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import Recipient from './Recipient'
+import { usePrevious } from '../../helpers/hooks'
+import { filterAndReworkRecipients } from '../../helpers/recipients'
+
+const RecipientList = ({
+  recipients,
+  recipientsToBeConfirmed,
+  isOwner,
+  document,
+  documentType,
+  onRevoke,
+  onRevokeSelf,
+  verifyRecipient
+}) => {
+  const previousRecipients = usePrevious(recipients)
+  const recipientsToDisplay = filterAndReworkRecipients(
+    recipients,
+    previousRecipients
+  )
+
+  return recipientsToDisplay.map(recipient => {
+    const recipientConfirmationData = recipientsToBeConfirmed.find(
+      user => user.email === recipient.email
+    )
+
+    return (
+      <Recipient
+        {...recipient}
+        key={`key_r_${recipient.index}`}
+        isOwner={isOwner}
+        document={document}
+        documentType={documentType}
+        onRevoke={onRevoke}
+        onRevokeSelf={onRevokeSelf}
+        recipientConfirmationData={recipientConfirmationData}
+        verifyRecipient={verifyRecipient}
+        fadeIn={recipient.hasBeenJustAdded}
+      />
+    )
+  })
+}
+
+export { RecipientList }

package/src/components/Recipient/RecipientPlusX.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 
 import AvatarPlusX from './AvatarPlusX'
 import Identity from './Identity'
-import styles from './recipient.styl'
 import { getDisplayName } from '../../models'
+import styles from '../../styles/recipient.styl'
 
 const RecipientPlusX = ({ extraRecipients }, { t }) => (
   <div className={styles['recipient']}>

package/src/components/Recipient/RecipientStatus.jsx

@@ -8,7 +8,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import styles from './recipient.styl'
+import styles from '../../styles/recipient.styl'
 
 const RecipientStatus = ({ status, isMe, instance }) => {
   const { t } = useI18n()

package/src/components/Recipient/RecipientWithoutStatus.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import Identity from './Identity'
-import styles from './recipient.styl'
 import { getDisplayName, getInitials } from '../../models'
+import styles from '../../styles/recipient.styl'
 
 const RecipientWithoutStatus = ({ instance, ...rest }) => {
   const name = getDisplayName(rest)

package/src/components/Recipient/RecipientsAvatars.jsx

@@ -7,8 +7,8 @@ import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
 
 import AvatarPlusX from './AvatarPlusX'
 import RecipientAvatar from './RecipientAvatar'
-import styles from './recipient.styl'
 import { getDisplayName } from '../../models'
+import styles from '../../styles/recipient.styl'
 
 export const MAX_DISPLAYED_RECIPIENTS = 3
 

package/src/components/ShareAutosuggest.jsx

@@ -8,9 +8,9 @@ import { Spinner } from 'cozy-ui/transpiled/react/Spinner'
 import palette from 'cozy-ui/transpiled/react/palette'
 
 import ContactSuggestion from './ContactSuggestion'
-import styles from './autosuggest.styl'
 import { extractEmails, validateEmail } from '../helpers/email'
 import { getDisplayName, getInitials, Contact } from '../models'
+import styles from '../styles/autosuggest.styl'
 import {
   cozyUrlMatch,
   emailMatch,

package/src/components/ShareButton.jsx

@@ -5,7 +5,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
 import { Button } from 'cozy-ui/transpiled/react/deprecated/Button'
 
-import styles from './button.styl'
+import styles from '../styles/button.styl'
 
 export const ShareButton = ({ label, onClick, className, ...props }) => (
   <Button

package/src/components/ShareByEmail.jsx

@@ -15,8 +15,8 @@ import { hasReachRecipientsLimit } from '../helpers/recipients'
 import { getSuccessMessage } from '../helpers/successMessage'
 import { Group } from '../models'
 import { contactsResponseType, groupsResponseType } from '../propTypes'
-import styles from '../share.styl'
 import { isReadOnlySharing } from '../state'
+import styles from '../styles/share.styl'
 
 export const ShareByEmail = ({
   contacts,

package/src/components/ShareDialogCozyToCozy.jsx

@@ -8,7 +8,7 @@ import { default as DumbShareByEmail } from './ShareByEmail'
 import { default as DumbShareByLink } from './ShareByLink'
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer'
 import WhoHasAccess from './WhoHasAccess'
-import styles from '../share.styl'
+import styles from '../styles/share.styl'
 
 /**
  * Displays the sharing interface that can be used when ShareDialogCozyToCozy is in sharing state

package/src/components/{EditableSharingModal.jsx → ShareModal/EditableSharingModal.jsx}

@@ -3,11 +3,11 @@ import React from 'react'
 
 import { useClient, useQueryAll } from 'cozy-client'
 
-import { default as DumbShareModal } from './ShareModal'
-import { useFetchDocumentPath } from './useFetchDocumentPath'
-import SharingContext from '../context'
-import { Contact } from '../models'
-import { buildContactsQuery, buildGroupsQuery } from '../queries/queries'
+import SharingContext from '../../context'
+import { useFetchDocumentPath } from '../../hooks/useFetchDocumentPath'
+import { Contact } from '../../models'
+import { buildContactsQuery, buildGroupsQuery } from '../../queries/queries'
+import { default as DumbShareModal } from '../ShareModal'
 
 export const EditableSharingModal = ({ document, ...rest }) => {
   const client = useClient()

package/src/components/{EditableSharingModal.spec.jsx → ShareModal/EditableSharingModal.spec.jsx}

@@ -5,13 +5,13 @@ import { createMockClient } from 'cozy-client'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import { EditableSharingModal } from './EditableSharingModal'
-import { default as DumbShareModal } from './ShareModal'
-import { useFetchDocumentPath } from './useFetchDocumentPath'
-import AppLike from '../../test/AppLike'
-import { SharingProvider } from '../SharingProvider'
-import { receivePaths } from '../state'
+import AppLike from '../../../test/AppLike'
+import { SharingProvider } from '../../SharingProvider'
+import { useFetchDocumentPath } from '../../hooks/useFetchDocumentPath'
+import { receivePaths } from '../../state'
+import { default as DumbShareModal } from '../ShareModal'
 
-jest.mock('./useFetchDocumentPath', () => ({
+jest.mock('../../hooks/useFetchDocumentPath', () => ({
   useFetchDocumentPath: jest.fn()
 }))
 

package/src/components/ShareModal/ShareModal.jsx

@@ -0,0 +1,45 @@
+import omit from 'lodash/omit'
+import React from 'react'
+import { useLocation } from 'react-router'
+
+import EditableSharingModal from './EditableSharingModal'
+import { SharingDetailsModal } from './SharingDetailsModal'
+import withLocales from '../../hoc/withLocales'
+import { useSharingContext } from '../../hooks/useSharingContext'
+
+export const ShareModal = withLocales(props => {
+  const location = useLocation?.()
+  const locationProps = location?.state?.modalProps
+  const document = locationProps?.document || props.document
+  const rest = omit(locationProps || props, 'document')
+
+  const {
+    byDocId,
+    isOwner,
+    canReshare,
+    documentType,
+    getOwner,
+    getSharingType,
+    getRecipients,
+    revokeSelf
+  } = useSharingContext()
+
+  const isEditable =
+    !byDocId[document.id] || isOwner(document.id) || canReshare(document.id)
+
+  if (isEditable) {
+    return <EditableSharingModal document={document} {...rest} />
+  }
+
+  return (
+    <SharingDetailsModal
+      document={document}
+      documentType={documentType}
+      owner={getOwner(document.id)}
+      sharingType={getSharingType(document.id)}
+      recipients={getRecipients(document.id)}
+      onRevoke={revokeSelf}
+      {...rest}
+    />
+  )
+})

package/src/{SharingDetailsModal.jsx → components/ShareModal/SharingDetailsModal.jsx}

@@ -5,10 +5,10 @@ import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Divider from 'cozy-ui/transpiled/react/Divider'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import OwnerIdentity from './components/Recipient/OwnerIdentity'
-import WhoHasAccess from './components/WhoHasAccess'
-import { getDisplayName } from './models'
-import styles from './share.styl'
+import { getDisplayName } from '../../models'
+import styles from '../../styles/share.styl'
+import OwnerIdentity from '../Recipient/OwnerIdentity'
+import WhoHasAccess from '../WhoHasAccess'
 
 export const SharingDetailsModal = ({
   onClose,

package/src/components/SharedBadge.jsx

@@ -5,7 +5,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
 import palette from 'cozy-ui/transpiled/react/palette'
 
-import styles from './badge.styl'
+import styles from '../styles/badge.styl'
 
 const SharedBadge = ({ byMe, className, small, xsmall }) => (
   <div

package/src/components/SharedStatus.jsx

@@ -5,9 +5,9 @@ import palette from 'cozy-ui/transpiled/react/palette'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { SharingTooltip, TooltipRecipientList } from './Tooltip'
-import styles from './status.styl'
-import LinkIcon from '../../assets/icons/icon-link.svg'
+import LinkIcon from '../assets/icons/icon-link.svg'
 import { getDisplayName } from '../models'
+import styles from '../styles/status.styl'
 
 export const SharedStatus = ({ className, docId, recipients, link }) => {
   const { t } = useI18n()

package/src/components/Sharetypeselect.jsx

@@ -9,7 +9,7 @@ import SelectBox, { components } from 'cozy-ui/transpiled/react/SelectBox'
 import palette from 'cozy-ui/transpiled/react/palette'
 
 import logger from '../logger'
-import styles from '../share.styl'
+import styles from '../styles/share.styl'
 
 const DropdownIndicator = props => (
   <components.DropdownIndicator {...props}>

package/src/{SharingBanner → components/SharingBanner}/components/PublicBanner.jsx

@@ -8,7 +8,7 @@ import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import CozyHomeLinkIcon from './CozyHomeLinkIcon'
-import styles from './publicBanner.styl'
+import styles from '../../../styles/publicBanner.styl'
 
 const HOME_LINK_HREF = 'https://manager.cozycloud.cc/cozy/create'
 

package/src/{SharingBanner → components/SharingBanner}/hooks/useSharingInfos.jsx

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react'
 
 import { useClient, models } from 'cozy-client'
 
-import logger from '../../logger'
-import { buildSharingsByIdQuery } from '../../queries/queries'
+import logger from '../../../logger'
+import { buildSharingsByIdQuery } from '../../../queries/queries'
 import getQueryParameter from '../helpers/QueryParameter'
 
 const getSharingId = permission => {

package/src/{SharingBanner → components/SharingBanner}/index.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import { SharingBanner } from './components/SharingBanner'
 import { useSharingInfos } from './hooks/useSharingInfos'
-import withLocales from '../withLocales'
+import withLocales from '../../hoc/withLocales'
 
 const Plugin = ({ previewPath }) => {
   const sharingInfos = useSharingInfos(previewPath)

package/src/{SharingBanner → components/SharingBanner}/test/AppLike.jsx

@@ -11,8 +11,8 @@ import FabProvider from './FabProvider'
 import { ModalContext } from './ModalContext'
 import { RouterContext } from './RouterContext'
 import { ThumbnailSizeContextProvider } from './ThumbnailSizeContext'
-import langEn from '../../../locales/en.json'
-import SharingContext from '../../context'
+import langEn from '../../../../locales/en.json'
+import SharingContext from '../../../context'
 
 const mockStore = createStore(() => ({
   mobile: {

package/src/components/Tooltip.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import ReactTooltip from 'react-tooltip'
 
-import styles from './tooltip.styl'
+import styles from '../styles/tooltip.styl'
 
 export const SharingTooltip = props => (
   <ReactTooltip