feat: add single player mode

apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx

@@ -10,6 +10,7 @@ import { usePlausible } from 'next-plausible';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -43,9 +44,11 @@ export type ClaimPlanDialogProps = {
 
 export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => {
   const params = useSearchParams();
-  const { toast } = useToast();
+  const analytics = useAnalytics();
   const event = usePlausible();
 
+  const { toast } = useToast();
+
   const [open, setOpen] = useState(() => params?.get('cancelled') === 'true');
 
   const {
@@ -73,10 +76,12 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
       ]);
 
       event('claim-plan-pricing');
+      analytics.capture('Marketing: Claim plan', { planId, email });
 
       window.location.href = redirectUrl;
     } catch (error) {
       event('claim-plan-failed');
+      analytics.capture('Marketing: Claim plan failure', { planId, email });
 
       toast({
         title: 'Something went wrong',

apps/marketing/src/components/(marketing)/confetti-screen.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Confetti from 'react-confetti';
+import { createPortal } from 'react-dom';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size';
+
+export default function ConfettiScreen({
+  numberOfPieces: numberOfPiecesProp = 200,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Confetti> & { duration?: number }) {
+  const isMounted = useIsMounted();
+  const { width, height } = useWindowSize();
+
+  const [numberOfPieces, setNumberOfPieces] = useState(numberOfPiecesProp);
+
+  useEffect(() => {
+    if (!props.duration) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setNumberOfPieces(0);
+    }, props.duration);
+
+    return () => clearTimeout(timer);
+  }, [props.duration]);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return createPortal(
+    <Confetti
+      {...props}
+      className="w-full"
+      numberOfPieces={numberOfPieces}
+      width={width}
+      height={height}
+    />,
+    document.body,
+  );
+}

apps/marketing/src/components/(marketing)/footer.tsx

@@ -20,6 +20,7 @@ const SOCIAL_LINKS = [
 
 const FOOTER_LINKS = [
   { href: '/pricing', text: 'Pricing' },
+  { href: '/single-player-mode', text: 'Single Player Mode' },
   { href: '/blog', text: 'Blog' },
   { href: '/open', text: 'Open' },
   { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },

apps/marketing/src/components/(marketing)/header.tsx

@@ -5,6 +5,7 @@ import { HTMLAttributes, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { HamburgerMenu } from './mobile-hamburger';
@@ -15,17 +16,26 @@ export type HeaderProps = HTMLAttributes<HTMLElement>;
 export const Header = ({ className, ...props }: HeaderProps) => {
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
 
+  const { getFlag } = useFeatureFlags();
+
+  const isSinglePlayerModeMarketingEnabled = getFlag('marketing_header_single_player_mode');
+
   return (
     <header className={cn('flex items-center justify-between', className)} {...props}>
-      <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
-        <Image
-          src="/logo.png"
-          alt="Documenso Logo"
-          className="dark:invert"
-          width={170}
-          height={25}
-        />
-      </Link>
+      <div className="flex items-center space-x-4">
+        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+          <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
+        </Link>
+
+        {isSinglePlayerModeMarketingEnabled && (
+          <Link
+            href="/single-player-mode"
+            className="bg-primary rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Try now!
+          </Link>
+        )}
+      </div>
 
       <div className="hidden items-center gap-x-6 md:flex">
         <Link

apps/marketing/src/components/(marketing)/hero.tsx

@@ -6,7 +6,9 @@ import Link from 'next/link';
 import { Variants, motion } from 'framer-motion';
 import { Github } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { match } from 'ts-pattern';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -51,6 +53,10 @@ const HeroTitleVariants: Variants = {
 export const Hero = ({ className, ...props }: HeroProps) => {
   const event = usePlausible();
 
+  const { getFlag } = useFeatureFlags();
+
+  const heroMarketingCTA = getFlag('marketing_landing_hero_cta');
+
   const onSignUpClick = () => {
     const el = document.getElementById('email');
 
@@ -122,23 +128,40 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           </Link>
         </motion.div>
 
-        <motion.div
-          variants={HeroTitleVariants}
-          initial="initial"
-          animate="animate"
-          className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
-        >
-          <Link
-            href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
-            target="_blank"
-          >
-            <img
-              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
-              alt="Documenso - The open source DocuSign alternative | Product Hunt"
-              style={{ width: '250px', height: '54px' }}
-            />
-          </Link>
-        </motion.div>
+        {match(heroMarketingCTA)
+          .with('spm', () => (
+            <motion.div
+              variants={HeroTitleVariants}
+              initial="initial"
+              animate="animate"
+              className="border-primary mx-auto mt-8 w-fit rounded-xl border-2 bg-white transition-colors hover:bg-slate-50/60"
+            >
+              <Link href="/single-player-mode" className="block px-4 py-2 text-center">
+                <h2 className="text-xs font-semibold text-[#727272]">Single Player Mode</h2>
+                <h1 className="font-semibold leading-5 text-[#606060]">Self sign documents here</h1>
+              </Link>
+            </motion.div>
+          ))
+          .with('productHunt', () => (
+            <motion.div
+              variants={HeroTitleVariants}
+              initial="initial"
+              animate="animate"
+              className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
+            >
+              <Link
+                href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
+                target="_blank"
+              >
+                <img
+                  src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
+                  alt="Documenso - The open source DocuSign alternative | Product Hunt"
+                  style={{ width: '250px', height: '54px' }}
+                />
+              </Link>
+            </motion.div>
+          ))
+          .otherwise(() => null)}
 
         <motion.div
           className="mt-12"

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -14,6 +14,10 @@ export type MobileNavigationProps = {
 };
 
 export const MENU_NAVIGATION_LINKS = [
+  {
+    href: '/single-player-mode',
+    text: 'Single Player Mode',
+  },
   {
     href: '/blog',
     text: 'Blog',

apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts

@@ -0,0 +1,218 @@
+'use server';
+
+import { createElement } from 'react';
+
+import { DateTime } from 'luxon';
+import { nanoid } from 'nanoid';
+import { PDFDocument } from 'pdf-lib';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentSelfSignedEmailTemplate } from '@documenso/email/templates/document-self-signed';
+import { FROM_ADDRESS, FROM_NAME, SERVICE_USER_EMAIL } from '@documenso/lib/constants/email';
+import { insertFieldInPDF } from '@documenso/lib/server-only/pdf/insert-field-in-pdf';
+import { prisma } from '@documenso/prisma';
+import {
+  DocumentDataType,
+  DocumentStatus,
+  FieldType,
+  Prisma,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+
+const ZCreateSinglePlayerDocumentSchema = z.object({
+  document: z.string(),
+  documentName: z.string(),
+  signer: z.object({
+    email: z.string().email().min(1),
+    name: z.string(),
+    signature: z.string(),
+  }),
+  fields: z.array(
+    z.object({
+      page: z.number(),
+      type: z.nativeEnum(FieldType),
+      positionX: z.number(),
+      positionY: z.number(),
+      width: z.number(),
+      height: z.number(),
+    }),
+  ),
+});
+
+export type TCreateSinglePlayerDocumentSchema = z.infer<typeof ZCreateSinglePlayerDocumentSchema>;
+
+/**
+ * Create and self signs a document.
+ *
+ * Returns the document token.
+ */
+export const createSinglePlayerDocument = async (
+  value: TCreateSinglePlayerDocumentSchema,
+): Promise<string> => {
+  const { signer, fields, document, documentName } = ZCreateSinglePlayerDocumentSchema.parse(value);
+
+  const doc = await PDFDocument.load(document);
+  const createdAt = new Date();
+
+  const isBase64 = signer.signature.startsWith('data:image/png;base64,');
+  const signatureImageAsBase64 = isBase64 ? signer.signature : null;
+  const typedSignature = !isBase64 ? signer.signature : null;
+
+  // Update the document with the fields inserted.
+  for (const field of fields) {
+    const isSignatureField = field.type === FieldType.SIGNATURE;
+
+    await insertFieldInPDF(doc, {
+      ...mapField(field, signer),
+      Signature: isSignatureField
+        ? {
+            created: createdAt,
+            signatureImageAsBase64,
+            typedSignature,
+            // Dummy data.
+            id: -1,
+            recipientId: -1,
+            fieldId: -1,
+          }
+        : null,
+      // Dummy data.
+      id: -1,
+      documentId: -1,
+      recipientId: -1,
+    });
+  }
+
+  const pdfBytes = await doc.save();
+
+  const documentToken = await prisma.$transaction(async (tx) => {
+    const documentToken = nanoid();
+
+    // Fetch service user who will be the owner of the document.
+    const serviceUser = await tx.user.findFirstOrThrow({
+      where: {
+        email: SERVICE_USER_EMAIL,
+      },
+    });
+
+    const documentDataBytes = Buffer.from(pdfBytes).toString('base64');
+
+    const { id: documentDataId } = await tx.documentData.create({
+      data: {
+        type: DocumentDataType.BYTES_64,
+        data: documentDataBytes,
+        initialData: documentDataBytes,
+      },
+    });
+
+    // Create document.
+    const document = await tx.document.create({
+      data: {
+        title: documentName,
+        status: DocumentStatus.COMPLETED,
+        documentDataId,
+        userId: serviceUser.id,
+        createdAt,
+      },
+    });
+
+    // Create recipient.
+    const recipient = await tx.recipient.create({
+      data: {
+        documentId: document.id,
+        name: signer.name,
+        email: signer.email,
+        token: documentToken,
+        signedAt: createdAt,
+        readStatus: ReadStatus.OPENED,
+        signingStatus: SigningStatus.SIGNED,
+        sendStatus: SendStatus.SENT,
+      },
+    });
+
+    // Create fields and signatures.
+    await Promise.all(
+      fields.map(async (field) => {
+        const insertedField = await tx.field.create({
+          data: {
+            documentId: document.id,
+            recipientId: recipient.id,
+            ...mapField(field, signer),
+          },
+        });
+
+        if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
+          await tx.signature.create({
+            data: {
+              fieldId: insertedField.id,
+              signatureImageAsBase64,
+              typedSignature,
+              recipientId: recipient.id,
+            },
+          });
+        }
+      }),
+    );
+
+    return documentToken;
+  });
+
+  // Todo: Handle `downloadLink`
+  const template = createElement(DocumentSelfSignedEmailTemplate, {
+    downloadLink: 'https://documenso.com',
+    documentName: documentName,
+    assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
+  });
+
+  // Send email to signer.
+  await mailer.sendMail({
+    to: {
+      address: signer.email,
+      name: signer.name,
+    },
+    from: {
+      name: FROM_NAME,
+      address: FROM_ADDRESS,
+    },
+    subject: 'Document signed',
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+
+  return documentToken;
+};
+
+/**
+ * Map the fields provided by the user to fields compatible with Prisma.
+ *
+ * Signature fields are handled separately.
+ *
+ * @param field The field passed in by the user.
+ * @param signer The details of the person who is signing this document.
+ * @returns A field compatible with Prisma.
+ */
+const mapField = (
+  field: TCreateSinglePlayerDocumentSchema['fields'][number],
+  signer: TCreateSinglePlayerDocumentSchema['signer'],
+) => {
+  const customText = match(field.type)
+    .with(FieldType.DATE, () => DateTime.now().toFormat('yyyy-MM-dd hh:mm a'))
+    .with(FieldType.EMAIL, () => signer.email)
+    .with(FieldType.NAME, () => signer.name)
+    .otherwise(() => '');
+
+  return {
+    type: field.type,
+    page: field.page,
+    positionX: new Prisma.Decimal(field.positionX),
+    positionY: new Prisma.Decimal(field.positionY),
+    width: new Prisma.Decimal(field.width),
+    height: new Prisma.Decimal(field.height),
+    customText,
+    inserted: true,
+  };
+};

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import { Share } from 'lucide-react';
+
+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 { SigningCard3D } from '@documenso/ui/components/signing-card';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import signingCelebration from '~/assets/signing-celebration.png';
+import ConfettiScreen from '~/components/(marketing)/confetti-screen';
+
+import { DocumentStatus } from '.prisma/client';
+
+interface SinglePlayerModeSuccessProps {
+  className?: string;
+  document: DocumentWithRecipient;
+}
+
+export default function SinglePlayerModeSuccess({
+  className,
+  document,
+}: SinglePlayerModeSuccessProps) {
+  const [showDocumentDialog, setShowDocumentDialog] = useState(false);
+  const [isFetchingDocumentFile, setIsFetchingDocumentFile] = useState(false);
+  const [documentFile, setDocumentFile] = useState<string | null>(null);
+
+  const { toast } = useToast();
+
+  const handleShowDocumentDialog = async () => {
+    if (isFetchingDocumentFile) {
+      return;
+    }
+
+    setIsFetchingDocumentFile(true);
+
+    try {
+      const data = await getFile(document.documentData);
+
+      setDocumentFile(Buffer.from(data).toString('base64'));
+
+      setShowDocumentDialog(true);
+    } catch {
+      toast({
+        title: 'Something went wrong.',
+        description: 'We were unable to retrieve the document at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+
+    setIsFetchingDocumentFile(false);
+  };
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, []);
+
+  return (
+    <div className="flex min-h-[calc(100vh-10rem)] flex-col items-center justify-center sm:min-h-[calc(100vh-13rem)]">
+      <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+
+      <h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
+        You have signed
+      </h2>
+      <h3 className="text-foreground/80 mb-6 text-center text-lg font-semibold md:text-xl lg:mb-8 lg:text-3xl">
+        {document.title}
+      </h3>
+
+      <SigningCard3D
+        name={document.Recipient.name || document.Recipient.email}
+        signingCelebrationImage={signingCelebration}
+      />
+
+      <div className="mt-8 w-full">
+        <div className={cn('flex flex-col items-center', className)}>
+          <div className="grid w-full max-w-sm grid-cols-2 gap-4">
+            {/* TODO: Hook this up */}
+            <Button variant="outline" className="flex-1" disabled>
+              <Share className="mr-2 h-5 w-5" />
+              Share
+            </Button>
+
+            <DocumentDownloadButton
+              className="flex-1"
+              fileName={document.title}
+              documentData={document.documentData}
+              disabled={document.status !== DocumentStatus.COMPLETED}
+            />
+
+            <Button
+              onClick={async () => handleShowDocumentDialog()}
+              loading={isFetchingDocumentFile}
+              className="col-span-2"
+            >
+              Show document
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <p className="text-muted-foreground/60 mt-36 text-center text-sm">
+        View the{' '}
+        <Link
+          href="/pricing"
+          target="_blank"
+          className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+        >
+          community plan
+        </Link>{' '}
+        to access the full range of features provided by Documenso
+      </p>
+
+      <DocumentDialog
+        document={documentFile ?? ''}
+        open={showDocumentDialog}
+        onOpenChange={setShowDocumentDialog}
+      />
+    </div>
+  );
+}