From a354c23231979510758e085fb5af2eb1cd1183bf Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Fri, 13 Oct 2023 14:14:13 +1100 Subject: [PATCH] feat: add document share button to marketing (#422) --- apps/marketing/src/app/layout.tsx | 5 +++- .../(marketing)/password-reveal.tsx | 3 +- .../single-player-mode-success.tsx | 15 +++++----- apps/marketing/src/pages/api/trpc/[trpc].ts | 8 ++++++ .../documents/data-table-action-button.tsx | 5 ++-- .../documents/data-table-action-dropdown.tsx | 5 ++-- .../(signing)/sign/[token]/complete/page.tsx | 5 ++-- apps/web/src/hooks/use-copy-to-clipboard.ts | 28 ------------------- .../hooks/use-copy-to-clipboard.ts | 0 .../document/document-share-button.tsx | 22 +++++++++------ 10 files changed, 39 insertions(+), 57 deletions(-) create mode 100644 apps/marketing/src/pages/api/trpc/[trpc].ts delete mode 100644 apps/web/src/hooks/use-copy-to-clipboard.ts rename {apps/marketing/src => packages/lib/client-only}/hooks/use-copy-to-clipboard.ts (100%) rename apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx => packages/ui/components/document/document-share-button.tsx (81%) diff --git a/apps/marketing/src/app/layout.tsx b/apps/marketing/src/app/layout.tsx index f99050512..05206a76f 100644 --- a/apps/marketing/src/app/layout.tsx +++ b/apps/marketing/src/app/layout.tsx @@ -4,6 +4,7 @@ import { Caveat, Inter } from 'next/font/google'; import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag'; import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag'; +import { TrpcProvider } from '@documenso/trpc/react'; import { cn } from '@documenso/ui/lib/utils'; import { Toaster } from '@documenso/ui/primitives/toaster'; @@ -63,7 +64,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo - {children} + + {children} + diff --git a/apps/marketing/src/components/(marketing)/password-reveal.tsx b/apps/marketing/src/components/(marketing)/password-reveal.tsx index b31765943..450221339 100644 --- a/apps/marketing/src/components/(marketing)/password-reveal.tsx +++ b/apps/marketing/src/components/(marketing)/password-reveal.tsx @@ -1,9 +1,8 @@ 'use client'; +import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard'; import { useToast } from '@documenso/ui/primitives/use-toast'; -import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'; - export type PasswordRevealProps = { password: string; }; diff --git a/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx b/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx index 0c85fc65c..49a9efcae 100644 --- a/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx +++ b/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx @@ -4,14 +4,13 @@ import { useEffect, useState } from 'react'; import Link from 'next/link'; -import { Share } from 'lucide-react'; - import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag'; import { base64 } from '@documenso/lib/universal/base64'; import { getFile } from '@documenso/lib/universal/upload/get-file'; import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient'; import DocumentDialog from '@documenso/ui/components/document/document-dialog'; import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button'; +import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button'; import { SigningCard3D } from '@documenso/ui/components/signing-card'; import { cn } from '@documenso/ui/lib/utils'; import { Button } from '@documenso/ui/primitives/button'; @@ -87,11 +86,11 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
- {/* TODO: Hook this up */} - + onShowDocumentClick()} loading={isFetchingDocumentFile} - className="col-span-2" + className="z-10 col-span-2" > Show document diff --git a/apps/marketing/src/pages/api/trpc/[trpc].ts b/apps/marketing/src/pages/api/trpc/[trpc].ts new file mode 100644 index 000000000..a42844904 --- /dev/null +++ b/apps/marketing/src/pages/api/trpc/[trpc].ts @@ -0,0 +1,8 @@ +import * as trpcNext from '@documenso/trpc/server/adapters/next'; +import { createTrpcContext } from '@documenso/trpc/server/context'; +import { appRouter } from '@documenso/trpc/server/router'; + +export default trpcNext.createNextApiHandler({ + router: appRouter, + createContext: async ({ req, res }) => createTrpcContext({ req, res }), +}); diff --git a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx index 4443981f8..234c222eb 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx @@ -6,13 +6,12 @@ import { Edit, Pencil, Share } from 'lucide-react'; import { useSession } from 'next-auth/react'; import { match } from 'ts-pattern'; +import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard'; import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client'; import { trpc } from '@documenso/trpc/react'; import { Button } from '@documenso/ui/primitives/button'; import { useToast } from '@documenso/ui/primitives/use-toast'; -import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'; - export type DataTableActionButtonProps = { row: Document & { User: Pick; @@ -47,7 +46,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => { documentId: row.id, }); - await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null); + await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null); toast({ title: 'Copied to clipboard', diff --git a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx index 2fb06833b..8963058a6 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx @@ -18,6 +18,7 @@ import { } from 'lucide-react'; import { useSession } from 'next-auth/react'; +import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard'; import { getFile } from '@documenso/lib/universal/upload/get-file'; import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client'; import { DocumentWithData } from '@documenso/prisma/types/document-with-data'; @@ -32,8 +33,6 @@ import { } from '@documenso/ui/primitives/dropdown-menu'; import { useToast } from '@documenso/ui/primitives/use-toast'; -import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'; - import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog'; export type DataTableActionDropdownProps = { @@ -73,7 +72,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) = documentId: row.id, }); - await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null); + await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null); toast({ title: 'Copied to clipboard', diff --git a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx index 414a6624b..5402d12cb 100644 --- a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx @@ -9,12 +9,11 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token'; import { DocumentStatus, FieldType } from '@documenso/prisma/client'; import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button'; +import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button'; import { SigningCard3D } from '@documenso/ui/components/signing-card'; import signingCelebration from '~/assets/signing-celebration.png'; -import { ShareButton } from './share-button'; - export type CompletedSigningPageProps = { params: { token?: string; @@ -89,7 +88,7 @@ export default async function CompletedSigningPage({ ))}
- + Promise; - -export function useCopyToClipboard(): [CopiedValue, CopyFn] { - const [copiedText, setCopiedText] = useState(null); - - const copy: CopyFn = async (text) => { - if (!navigator?.clipboard) { - console.warn('Clipboard not supported'); - return false; - } - - // Try to save to clipboard then save it in the state if worked - try { - await navigator.clipboard.writeText(text); - setCopiedText(text); - return true; - } catch (error) { - console.warn('Copy failed', error); - setCopiedText(null); - return false; - } - }; - - return [copiedText, copy]; -} diff --git a/apps/marketing/src/hooks/use-copy-to-clipboard.ts b/packages/lib/client-only/hooks/use-copy-to-clipboard.ts similarity index 100% rename from apps/marketing/src/hooks/use-copy-to-clipboard.ts rename to packages/lib/client-only/hooks/use-copy-to-clipboard.ts diff --git a/apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx b/packages/ui/components/document/document-share-button.tsx similarity index 81% rename from apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx rename to packages/ui/components/document/document-share-button.tsx index c76d3d7c5..4e7ee1a94 100644 --- a/apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx +++ b/packages/ui/components/document/document-share-button.tsx @@ -5,8 +5,10 @@ import { HTMLAttributes, useState } from 'react'; import { Copy, Share } from 'lucide-react'; import { FaXTwitter } from 'react-icons/fa6'; +import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard'; import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent'; import { trpc } from '@documenso/trpc/react'; +import { cn } from '@documenso/ui/lib/utils'; import { Button } from '@documenso/ui/primitives/button'; import { Dialog, @@ -18,14 +20,12 @@ import { } from '@documenso/ui/primitives/dialog'; import { useToast } from '@documenso/ui/primitives/use-toast'; -import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'; - -export type ShareButtonProps = HTMLAttributes & { +export type DocumentShareButtonProps = HTMLAttributes & { token: string; documentId: number; }; -export const ShareButton = ({ token, documentId }: ShareButtonProps) => { +export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => { const { toast } = useToast(); const [, copyToClipboard] = useCopyToClipboard(); @@ -60,7 +60,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => { slug = result.slug; } - await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null); + await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null); toast({ title: 'Copied to clipboard', @@ -85,7 +85,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => { window.open( generateTwitterIntent( `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`, - `${window.location.origin}/share/${slug}`, + `${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`, ), '_blank', ); @@ -99,7 +99,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {