diff --git a/src/app/drive/components/ShareDialog/ShareDialog.tsx b/src/app/drive/components/ShareDialog/ShareDialog.tsx index 85f62d0705..34d88a37d6 100644 --- a/src/app/drive/components/ShareDialog/ShareDialog.tsx +++ b/src/app/drive/components/ShareDialog/ShareDialog.tsx @@ -50,6 +50,7 @@ import { filterEditorAndReader, isAdvancedShareItem } from './utils'; import { useShareItemActions } from './hooks/useShareItemActions'; import { useShareItemInvitations } from './hooks/useShareItemInvitations'; import { useShareItemUserRoles } from './hooks/useShareItemUserRoles'; +import AccessRequests from './components/AccessRequests'; export type ShareDialogProps = { user: UserSettings; @@ -164,7 +165,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => { if (!itemToShare?.item) return; actionDispatch(setIsLoading(true)); - // Change object type of itemToShare to AdvancedSharedItem let shareAccessMode: AccessMode = 'public'; const itemType = itemToShare?.item.isFolder ? 'folder' : 'file'; @@ -234,6 +234,8 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => { } }; + const onOpenPendingAccess = () => actionDispatch(setView('requests')); + const onOpenStopSharingDialog = useCallback(() => { actionDispatch(setShowStopSharingConfirmation(true)); }, [actionDispatch]); @@ -243,7 +245,7 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => { }, [actionDispatch]); const View = (viewProps: ViewProps): JSX.Element => { - const view = { + const view: Record = { general: ( <>
@@ -265,6 +267,20 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => { )}
+ {/* Pending access requests from users */} + {/* */} {/* List of users invited to the shared item */} { /> ), + requests: , invite: ( { diff --git a/src/app/drive/components/ShareDialog/components/AccessRequests/empty/index.tsx b/src/app/drive/components/ShareDialog/components/AccessRequests/empty/index.tsx new file mode 100644 index 0000000000..6ce7c47759 --- /dev/null +++ b/src/app/drive/components/ShareDialog/components/AccessRequests/empty/index.tsx @@ -0,0 +1,14 @@ +import { Tray } from '@phosphor-icons/react'; +import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; + +const AccessRequestsEmptyState = () => { + const { translate } = useTranslationContext(); + return ( +
+ +

{translate('modals.shareModal.requests.empty')}

+
+ ); +}; + +export default AccessRequestsEmptyState; diff --git a/src/app/drive/components/ShareDialog/components/AccessRequests/index.tsx b/src/app/drive/components/ShareDialog/components/AccessRequests/index.tsx new file mode 100644 index 0000000000..0bdb0e91b7 --- /dev/null +++ b/src/app/drive/components/ShareDialog/components/AccessRequests/index.tsx @@ -0,0 +1,33 @@ +import AccessRequestsEmptyState from './empty'; +import AccessRequestsList from './list'; + +const AccessRequests = () => { + const mockedRequests = [ + { + user: { + name: 'John Doe', + email: '4V0oX@example.com', + avatar: 'https://i.pravatar.cc/150?u=a042581f4e29026024d', + }, + message: 'Hello there', + onDecline: () => {}, + onAccept: () => {}, + }, + ]; + + if (mockedRequests.length === 0) { + return ( +
+ +
+ ); + } + + return ( +
+ +
+ ); +}; + +export default AccessRequests; diff --git a/src/app/drive/components/ShareDialog/components/AccessRequests/list/index.tsx b/src/app/drive/components/ShareDialog/components/AccessRequests/list/index.tsx new file mode 100644 index 0000000000..89300bff11 --- /dev/null +++ b/src/app/drive/components/ShareDialog/components/AccessRequests/list/index.tsx @@ -0,0 +1,57 @@ +import { Avatar, Button } from '@internxt/ui'; +import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; + +interface AccessRequestItem { + user: { + name: string; + email: string; + avatar: string; + }; + message?: string; + onDecline: () => void; + onAccept: () => void; +} + +const RequestCheap = ({ user, message, onDecline, onAccept }: AccessRequestItem) => { + const { translate } = useTranslationContext(); + return ( +
+
+ {/* User info */} +
+ +
+

{user.name}

+

{user.email}

+
+
+ +
+ + {/* TODO: Add a dropdown to select the user role */} + +
+
+ +
+

{message}

+
+
+ ); +}; + +const AccessRequestsList = ({ accessRequestList }: { accessRequestList: AccessRequestItem[] }) => { + return ( +
+ {accessRequestList.map((request, index) => ( + + ))} +
+ ); +}; + +export default AccessRequestsList; diff --git a/src/app/drive/views/RequestAccess/RequestAccess.tsx b/src/app/drive/views/RequestAccess/RequestAccess.tsx index 09d63af0c1..45e10292a1 100644 --- a/src/app/drive/views/RequestAccess/RequestAccess.tsx +++ b/src/app/drive/views/RequestAccess/RequestAccess.tsx @@ -2,26 +2,26 @@ import { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from 'app/store'; import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings'; -import { LockSimple, CheckCircle } from '@phosphor-icons/react'; +import { LockSimple, CheckCircle, Clock } from '@phosphor-icons/react'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import { Button } from '@internxt/ui'; import InternxtLogo from 'assets/icons/big-logo.svg?react'; import './RequestAccess.scss'; import { logOut } from 'services/auth.service'; +import UserCheapCard from './UserCheapCard'; -const TEXTAREA_MAX_LENGTH = 950; +const TEXTAREA_MAX_LENGTH = 1000; +type Views = 'requestAccess' | 'requestSent' | 'waitingApproval'; function RequestAccess(): JSX.Element { const user = useSelector((state) => state.user.user); const urlParams = new URLSearchParams(window.location.search); - const isRequestingAccess = urlParams.get('requestAccess'); const folderuuid = urlParams.get('folderuuid'); const { translate } = useTranslationContext(); + const [view, setView] = useState('requestAccess'); const [messageText, setMessageText] = useState(''); const [messageTextLimit, setMessageTextLimit] = useState(false); - const [requestSent, setRequestSent] = useState(false); useEffect(() => { if (messageText.length >= TEXTAREA_MAX_LENGTH) { @@ -31,9 +31,9 @@ function RequestAccess(): JSX.Element { } }, [messageText]); - const onRequestAcces = (): void => { + const onRequestAccess = (): void => { // TODO add logic to request access - setRequestSent(true); + setView('requestSent'); }; const onChangeAccount = (): void => { @@ -41,76 +41,78 @@ function RequestAccess(): JSX.Element { logOut(queryParams); }; + const views: Record = { + requestAccess: ( +
+
+ +

{translate('modals.shareModal.requestAccess.title')}

+

+ {translate('modals.shareModal.requestAccess.description')} +

+
+ + {/*
+