Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 08:42:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove share button from top level, texts (#653)

Browse Source
This commit is contained in:
Timur Ercan
2023-11-16 06:43:50 +01:00
committed by GitHub
parent 8722e4de74
commit e838a07bf9
8 changed files with 121 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
View File

@ -2,12 +2,15 @@
import Link from 'next/link';
import { Edit, Pencil, Share } from 'lucide-react';
import { Download, Edit, Pencil } from 'lucide-react';
import { useSession } from 'next-auth/react';
import { match } from 'ts-pattern';
import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
import { getFile } from '@documenso/lib/universal/upload/get-file';
import type { Document, Recipient, User } from '@documenso/prisma/client';
import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
import { trpc as trpcClient } from '@documenso/trpc/client';
import { Button } from '@documenso/ui/primitives/button';
export type DataTableActionButtonProps = {
@ -33,6 +36,41 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
const isComplete = row.status === DocumentStatus.COMPLETED;
const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
const onDownloadClick = async () => {
let document: DocumentWithData | null = null;
if (!recipient) {
document = await trpcClient.document.getDocumentById.query({
id: row.id,
});
} else {
document = await trpcClient.document.getDocumentByToken.query({
token: recipient.token,
});
}
const documentData = document?.documentData;
if (!documentData) {
return;
}
const documentBytes = await getFile(documentData);
const blob = new Blob([documentBytes], {
type: 'application/pdf',
});
const link = window.document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = row.title || 'document.pdf';
link.click();
window.URL.revokeObjectURL(link.href);
};
return match({
isOwner,
isRecipient,
@ -42,7 +80,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
isSigned,
})
.with({ isOwner: true, isDraft: true }, () => (
<Button className="w-24" asChild>
<Button className="w-32" asChild>
<Link href={`/documents/${row.id}`}>
<Edit className="-ml-1 mr-2 h-4 w-4" />
Edit
@ -50,23 +88,24 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
</Button>
))
.with({ isRecipient: true, isPending: true, isSigned: false }, () => (
<Button className="w-24" asChild>
<Button className="w-32" asChild>
<Link href={`/sign/${recipient?.token}`}>
<Pencil className="-ml-1 mr-2 h-4 w-4" />
Sign
</Link>
</Button>
))
.otherwise(() => (
<DocumentShareButton
documentId={row.id}
token={recipient?.token}
trigger={({ loading }) => (
<Button className="w-24" loading={loading}>
{!loading && <Share className="-ml-1 mr-2 h-4 w-4" />}
Share
.with({ isPending: true, isSigned: true }, () => (
<Button className="w-32" disabled={true}>
<Pencil className="-ml-1 mr-2 inline h-4 w-4" />
Sign
</Button>
)}
/>
));
))
.with({ isComplete: true }, () => (
<Button className="w-32" onClick={onDownloadClick}>
<Download className="-ml-1 mr-2 inline h-4 w-4" />
Download
</Button>
))
.otherwise(() => <div></div>);
};

4
apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
View File

@ -147,12 +147,12 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
<DocumentShareButton
documentId={row.id}
token={recipient?.token}
token={isOwner ? undefined : recipient?.token}
trigger={({ loading, disabled }) => (
<DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
<div className="flex items-center">
{loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
Share
Share Signing Card
</div>
</DropdownMenuItem>
)}

2
apps/web/src/app/(dashboard)/documents/page.tsx
View File

@ -80,7 +80,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
].map((value) => (
<TabsTrigger
key={value}
className="hover:text-primary min-w-[60px]"
className="hover:text-foreground min-w-[60px]"
value={value}
asChild
>

32
apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx
View File

@ -3,15 +3,14 @@ import { NextResponse } from 'next/server';
import { P, match } from 'ts-pattern';
import { Logo } from '~/components/branding/logo';
import { ShareHandlerAPIResponse } from '~/pages/api/share';
import type { ShareHandlerAPIResponse } from '~/pages/api/share';
export const runtime = 'edge';
const CARD_OFFSET_TOP = 152;
const CARD_OFFSET_LEFT = 350;
const CARD_WIDTH = 500;
const CARD_HEIGHT = 250;
const CARD_OFFSET_TOP = 173;
const CARD_OFFSET_LEFT = 307;
const CARD_WIDTH = 590;
const CARD_HEIGHT = 337;
const IMAGE_SIZE = {
width: 1200,
@ -33,7 +32,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
fetch(new URL('@documenso/assets/fonts/caveat-regular.ttf', import.meta.url)).then(
async (res) => res.arrayBuffer(),
),
fetch(new URL('@documenso/assets/static/og-share-frame.png', import.meta.url)).then(
fetch(new URL('@documenso/assets/static/og-share-frame2.png', import.meta.url)).then(
async (res) => res.arrayBuffer(),
),
]);
@ -72,11 +71,6 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
{/* @ts-expect-error Lack of typing from ImageResponse */}
<img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
<div tw="absolute top-20 flex w-full items-center justify-center">
{/* @ts-expect-error Lack of typing from ImageResponse */}
<Logo tw="h-8 w-60" />
</div>
{signatureImage ? (
<div
tw="absolute py-6 px-12 flex items-center justify-center text-center"
@ -109,21 +103,21 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
)}
<div
tw="absolute flex flex-col items-center justify-center pt-12 w-full"
tw="absolute flex w-full"
style={{
top: `${CARD_OFFSET_TOP + CARD_HEIGHT}px`,
top: `${CARD_OFFSET_TOP - 78}px`,
left: `${CARD_OFFSET_LEFT}px`,
}}
>
<h2
tw="text-3xl text-slate-500"
tw="text-xl"
style={{
color: '#828282',
fontFamily: 'Inter',
fontWeight: 600,
fontWeight: 700,
}}
>
{isRecipient
? 'I just signed with Documenso and you can too!'
: 'I just sent a document with Documenso and you can too!'}
{isRecipient ? 'Document Signed!' : 'Document Sent!'}
</h2>
</div>
</div>

2
apps/web/src/app/(share)/share/[slug]/page.tsx
View File

@ -11,7 +11,7 @@ type SharePageProps = {
export function generateMetadata({ params: { slug } }: SharePageProps) {
return {
title: 'Documenso - Share',
description: 'I just signed a document with Documenso!',
description: 'I just signed a document in style with Documenso!',
openGraph: {
title: 'Documenso - Join the open source signing revolution',
description: 'I just signed with Documenso!',

BIN
packages/assets/static/og-share-frame2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 458 KiB

28
packages/lib/server-only/share/get-recipient-or-sender-by-share-link-slug.ts
View File

@ -13,20 +13,6 @@ export const getRecipientOrSenderByShareLinkSlug = async ({
},
});
const recipient = await prisma.recipient.findFirst({
where: {
documentId,
email,
},
include: {
Signature: true,
},
});
if (recipient) {
return recipient;
}
const sender = await prisma.user.findFirst({
where: {
Document: { some: { id: documentId } },
@ -43,5 +29,19 @@ export const getRecipientOrSenderByShareLinkSlug = async ({
return sender;
}
const recipient = await prisma.recipient.findFirst({
where: {
documentId,
email,
},
include: {
Signature: true,
},
});
if (recipient) {
return recipient;
}
throw new Error('Recipient or sender not found');
};

51
packages/ui/components/document/document-share-button.tsx
View File

@ -1,8 +1,9 @@
'use client';
import React, { HTMLAttributes, useState } from 'react';
import type { HTMLAttributes } from 'react';
import React, { useState } from 'react';
import { Copy, Share } from 'lucide-react';
import { Copy, Sparkles } from 'lucide-react';
import { FaXTwitter } from 'react-icons/fa6';
import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
@ -48,9 +49,11 @@ export const DocumentShareButton = ({
const {
mutateAsync: createOrGetShareLink,
data: shareLink,
isLoading,
isLoading: isCreatingOrGettingShareLink,
} = trpc.shareLink.createOrGetShareLink.useMutation();
const isLoading = isCreatingOrGettingShareLink || isCopyingShareLink;
const onOpenChange = (nextOpen: boolean) => {
if (nextOpen) {
void createOrGetShareLink({
@ -95,7 +98,7 @@ export const DocumentShareButton = ({
window.open(
generateTwitterIntent(
`I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
`I just ${token ? 'signed' : 'sent'} a document in style with @documenso. Check it out!`,
`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
),
'_blank',
@ -108,31 +111,34 @@ export const DocumentShareButton = ({
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
{trigger?.({
disabled: !token || !documentId,
loading: isLoading || isCopyingShareLink,
disabled: !documentId,
loading: isLoading,
}) || (
<Button
variant="outline"
disabled={!token || !documentId}
className={cn('flex-1', className)}
loading={isLoading || isCopyingShareLink}
className={cn('flex-1 text-[11px]', className)}
loading={isLoading}
>
{!isLoading && !isCopyingShareLink && <Share className="mr-2 h-5 w-5" />}
Share
{!isLoading && <Sparkles className="mr-2 h-5 w-5" />}
Share Signature Card
</Button>
)}
</DialogTrigger>
<DialogContent position="end">
<DialogHeader>
<DialogTitle>Share</DialogTitle>
<DialogTitle>Share your signing experience!</DialogTitle>
<DialogDescription className="mt-4">Share your signing experience!</DialogDescription>
<DialogDescription className="mt-4">
Don't worry, the document you signed or sent wont be shared; only your signing
experience is. Share your signing card and showcase your signature!
</DialogDescription>
</DialogHeader>
<div className="flex w-full flex-col">
<div className="rounded-md border p-4">
I just {token ? 'signed' : 'sent'} a document with{' '}
I just {token ? 'signed' : 'sent'} a document in style with{' '}
<span className="font-medium text-blue-400">@documenso</span>
. Check it out!
<span className="mt-2 block" />
@ -144,9 +150,12 @@ export const DocumentShareButton = ({
{process.env.NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
</span>
<div
className={cn('bg-muted/40 mt-4 aspect-video overflow-hidden rounded-lg border', {
className={cn(
'bg-muted/40 mt-4 aspect-[1200/630] overflow-hidden rounded-lg border',
{
'animate-pulse': !shareLink?.slug,
})}
},
)}
>
{shareLink?.slug && (
<img
@ -158,22 +167,18 @@ export const DocumentShareButton = ({
</div>
</div>
<Button variant="outline" className="mt-4" onClick={onTweetClick}>
<div className="mt-6 flex items-center gap-4">
<Button variant="outline" className="flex-1" onClick={onTweetClick}>
<FaXTwitter className="mr-2 h-4 w-4" />
Tweet
</Button>
<div className="relative flex items-center justify-center gap-x-4 py-4 text-xs uppercase">
<div className="bg-border h-px flex-1" />
<span className="text-muted-foreground bg-transparent">Or</span>
<div className="bg-border h-px flex-1" />
</div>
<Button variant="outline" onClick={onCopyClick}>
<Button variant="outline" className="flex-1" onClick={onCopyClick}>
<Copy className="mr-2 h-4 w-4" />
Copy Link
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);