chore: hide collaboration options if no account

This commit is contained in:
Aman Harwara
2023-09-08 19:14:41 +05:30
parent 5faeaaf330
commit 126e9abd9c
2 changed files with 63 additions and 57 deletions

View File

@@ -27,6 +27,8 @@ import NoProSubscription from '../Account/NoProSubscription'
const Vaults = () => {
const application = useApplication()
const hasAccount = application.hasAccount()
const [vaults, setVaults] = useState<VaultListingInterface[]>([])
const [canCreateMoreVaults, setCanCreateMoreVaults] = useState(true)
const [invites, setInvites] = useState<InviteRecord[]>([])
@@ -140,21 +142,23 @@ const Vaults = () => {
</PreferencesGroup>
)}
<PreferencesGroup>
<PreferencesSegment>
<Title>Contacts</Title>
{contacts.length > 0 && (
<div className="my-2 flex flex-col gap-3.5">
{contacts.map((contact) => {
return <ContactItem contact={contact} key={contact.uuid} />
})}
{hasAccount && (
<PreferencesGroup>
<PreferencesSegment>
<Title>Contacts</Title>
{contacts.length > 0 && (
<div className="my-2 flex flex-col gap-3.5">
{contacts.map((contact) => {
return <ContactItem contact={contact} key={contact.uuid} />
})}
</div>
)}
<div className="mt-2.5 flex flex-row">
<Button label="Add New Contact" className={'mr-3 text-xs'} onClick={createNewContact} />
</div>
)}
<div className="mt-2.5 flex flex-row">
<Button label="Add New Contact" className={'mr-3 text-xs'} onClick={createNewContact} />
</div>
</PreferencesSegment>
</PreferencesGroup>
</PreferencesSegment>
</PreferencesGroup>
)}
<PreferencesGroup>
<PreferencesSegment>
@@ -181,46 +185,48 @@ const Vaults = () => {
</PreferencesSegment>
</PreferencesGroup>
<PreferencesGroup>
<PreferencesSegment>
<Title>CollaborationID</Title>
<Subtitle>Share your CollaborationID with collaborators to join their vaults.</Subtitle>
{contactService.isCollaborationEnabled() ? (
<>
<code className="mt-2.5 overflow-hidden whitespace-pre-wrap break-words rounded border border-border bg-contrast p-3">
{contactService.getCollaborationID()}
</code>
<Button
label="Copy ID"
className="mt-2"
onClick={async () => {
try {
await navigator.clipboard.writeText(contactService.getCollaborationID())
addToast({
type: ToastType.Success,
message: 'Copied to clipboard',
})
} catch (error) {
addToast({
type: ToastType.Error,
message: 'Failed to copy to clipboard',
})
console.error(error)
}
}}
/>
</>
) : (
<div className="mt-2.5 flex flex-row">
<Button
label="Enable Vault Sharing"
className="mr-3 text-xs"
onClick={() => contactService.enableCollaboration()}
/>
</div>
)}
</PreferencesSegment>
</PreferencesGroup>
{hasAccount && (
<PreferencesGroup>
<PreferencesSegment>
<Title>CollaborationID</Title>
<Subtitle>Share your CollaborationID with collaborators to join their vaults.</Subtitle>
{contactService.isCollaborationEnabled() ? (
<>
<code className="mt-2.5 overflow-hidden whitespace-pre-wrap break-words rounded border border-border bg-contrast p-3">
{contactService.getCollaborationID()}
</code>
<Button
label="Copy ID"
className="mt-2"
onClick={async () => {
try {
await navigator.clipboard.writeText(contactService.getCollaborationID())
addToast({
type: ToastType.Success,
message: 'Copied to clipboard',
})
} catch (error) {
addToast({
type: ToastType.Error,
message: 'Failed to copy to clipboard',
})
console.error(error)
}
}}
/>
</>
) : (
<div className="mt-2.5 flex flex-row">
<Button
label="Enable Vault Sharing"
className="mr-3 text-xs"
onClick={() => contactService.enableCollaboration()}
/>
</div>
)}
</PreferencesSegment>
</PreferencesGroup>
)}
</PreferencesPane>
)
}

View File

@@ -138,7 +138,7 @@ const VaultItem = ({ vault }: Props) => {
<EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} />
</ModalOverlay>
<div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow">
<div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
<Icon type={vault.iconString} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-1.5 py-1.5">
<span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
@@ -164,14 +164,14 @@ const VaultItem = ({ vault }: Props) => {
)}
{vault.isSharedVaultListing() ? (
<Button colorStyle="info" label="Invite Contacts" className="text-xs" onClick={openInviteModal} />
) : (
) : application.hasAccount() ? (
<Button
colorStyle="info"
label="Enable Collaboration"
className="text-xs"
onClick={convertToSharedVault}
/>
)}
) : null}
</div>
</div>
</div>