Merge branch 'main' into feat/public-api

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -151,7 +151,7 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message, timezone, dateFormat } = data.meta;
+    const { subject, message, timezone, dateFormat, redirectUrl } = data.meta;
 
     try {
       await sendDocument({
@@ -159,8 +159,9 @@ export const EditDocumentForm = ({
         meta: {
           subject,
           message,
-          timezone,
           dateFormat,
+          timezone,
+          redirectUrl,
         },
       });
 

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -108,88 +108,86 @@ export const ResendDocumentActionItem = ({
   };
 
   return (
-    <>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger asChild>
-          <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
-            <History className="mr-2 h-4 w-4" />
-            Resend
-          </DropdownMenuItem>
-        </DialogTrigger>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
+          <History className="mr-2 h-4 w-4" />
+          Resend
+        </DropdownMenuItem>
+      </DialogTrigger>
 
-        <DialogContent className="sm:max-w-sm" hideClose>
-          <DialogHeader>
-            <DialogTitle>
-              <h1 className="text-center text-xl">Who do you want to remind?</h1>
-            </DialogTitle>
-          </DialogHeader>
+      <DialogContent className="sm:max-w-sm" hideClose>
+        <DialogHeader>
+          <DialogTitle>
+            <h1 className="text-center text-xl">Who do you want to remind?</h1>
+          </DialogTitle>
+        </DialogHeader>
 
-          <Form {...form}>
-            <form id={FORM_ID} onSubmit={handleSubmit(onFormSubmit)} className="px-3">
-              <FormField
-                control={form.control}
-                name="recipients"
-                render={({ field: { value, onChange } }) => (
-                  <>
-                    {recipients.map((recipient) => (
-                      <FormItem
-                        key={recipient.id}
-                        className="flex flex-row items-center justify-between gap-x-3"
+        <Form {...form}>
+          <form id={FORM_ID} onSubmit={handleSubmit(onFormSubmit)} className="px-3">
+            <FormField
+              control={form.control}
+              name="recipients"
+              render={({ field: { value, onChange } }) => (
+                <>
+                  {recipients.map((recipient) => (
+                    <FormItem
+                      key={recipient.id}
+                      className="flex flex-row items-center justify-between gap-x-3"
+                    >
+                      <FormLabel
+                        className={cn('my-2 flex items-center gap-2 font-normal', {
+                          'opacity-50': !value.includes(recipient.id),
+                        })}
                       >
-                        <FormLabel
-                          className={cn('my-2 flex items-center gap-2 font-normal', {
-                            'opacity-50': !value.includes(recipient.id),
-                          })}
-                        >
-                          <StackAvatar
-                            key={recipient.id}
-                            type={getRecipientType(recipient)}
-                            fallbackText={recipientAbbreviation(recipient)}
-                          />
-                          {recipient.email}
-                        </FormLabel>
+                        <StackAvatar
+                          key={recipient.id}
+                          type={getRecipientType(recipient)}
+                          fallbackText={recipientAbbreviation(recipient)}
+                        />
+                        {recipient.email}
+                      </FormLabel>
 
-                        <FormControl>
-                          <Checkbox
-                            className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black "
-                            checkClassName="text-white"
-                            value={recipient.id}
-                            checked={value.includes(recipient.id)}
-                            onCheckedChange={(checked: boolean) =>
-                              checked
-                                ? onChange([...value, recipient.id])
-                                : onChange(value.filter((v) => v !== recipient.id))
-                            }
-                          />
-                        </FormControl>
-                      </FormItem>
-                    ))}
-                  </>
-                )}
-              />
-            </form>
-          </Form>
+                      <FormControl>
+                        <Checkbox
+                          className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black "
+                          checkClassName="text-white"
+                          value={recipient.id}
+                          checked={value.includes(recipient.id)}
+                          onCheckedChange={(checked: boolean) =>
+                            checked
+                              ? onChange([...value, recipient.id])
+                              : onChange(value.filter((v) => v !== recipient.id))
+                          }
+                        />
+                      </FormControl>
+                    </FormItem>
+                  ))}
+                </>
+              )}
+            />
+          </form>
+        </Form>
 
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <DialogClose asChild>
-                <Button
-                  type="button"
-                  className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-                  variant="secondary"
-                  disabled={isSubmitting}
-                >
-                  Cancel
-                </Button>
-              </DialogClose>
-
-              <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
-                Send reminder
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                disabled={isSubmitting}
+              >
+                Cancel
               </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
+            </DialogClose>
+
+            <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
+              Send reminder
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -117,7 +117,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
   return (
     <div className={cn('relative', className)}>
       <DocumentDropzone
-        className="min-h-[40vh]"
+        className="h-[min(400px,50vh)]"
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
         disabledMessage={disabledMessage}
         onDrop={onFileDrop}

apps/web/src/app/(dashboard)/settings/billing/create-billing-portal.action.ts

@@ -2,6 +2,7 @@
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 export const createBillingPortal = async () => {
@@ -11,6 +12,6 @@ export const createBillingPortal = async () => {
 
   return getPortalSession({
     customerId: stripeCustomer.id,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
   });
 };

apps/web/src/app/(dashboard)/settings/billing/create-checkout.action.ts

@@ -3,6 +3,7 @@
 import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
 
@@ -27,13 +28,13 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
   if (foundSubscription) {
     return getPortalSession({
       customerId: stripeCustomer.id,
-      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+      returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
     });
   }
 
   return getCheckoutSession({
     customerId: stripeCustomer.id,
     priceId,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
   });
 };

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -5,7 +5,7 @@ import { match } from 'ts-pattern';
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
-import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
+import { getPrimaryAccountPlanPrices } from '@documenso/ee/server-only/stripe/get-primary-account-plan-prices';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
 import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
@@ -37,23 +37,23 @@ export default async function BillingSettingsPage() {
     user = await getStripeCustomerByUser(user).then((result) => result.user);
   }
 
-  const [subscriptions, prices, communityPlanPrices] = await Promise.all([
+  const [subscriptions, prices, primaryAccountPlanPrices] = await Promise.all([
     getSubscriptionsByUserId({ userId: user.id }),
     getPricesByInterval({ plan: STRIPE_PLAN_TYPE.COMMUNITY }),
-    getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY),
+    getPrimaryAccountPlanPrices(),
   ]);
 
-  const communityPlanPriceIds = communityPlanPrices.map(({ id }) => id);
+  const primaryAccountPlanPriceIds = primaryAccountPlanPrices.map(({ id }) => id);
 
   let subscriptionProduct: Stripe.Product | null = null;
 
-  const communityPlanUserSubscriptions = subscriptions.filter(({ priceId }) =>
-    communityPlanPriceIds.includes(priceId),
+  const primaryAccountPlanSubscriptions = subscriptions.filter(({ priceId }) =>
+    primaryAccountPlanPriceIds.includes(priceId),
   );
 
   const subscription =
-    communityPlanUserSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
-    communityPlanUserSubscriptions[0];
+    primaryAccountPlanSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
+    primaryAccountPlanSubscriptions[0];
 
   if (subscription?.priceId) {
     subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(

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

@@ -3,6 +3,8 @@ import { NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+
 import type { ShareHandlerAPIResponse } from '~/pages/api/share';
 
 export const runtime = 'edge';
@@ -37,7 +39,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
     ),
   ]);
 
-  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const baseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
 
   const recipientOrSender: ShareHandlerAPIResponse = await fetch(
     new URL(`/api/share?slug=${slug}`, baseUrl),

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

@@ -1,8 +1,8 @@
-import { Metadata } from 'next';
+import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
-import { APP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
 
 type SharePageProps = {
   params: { slug: string };
@@ -16,12 +16,12 @@ export function generateMetadata({ params: { slug } }: SharePageProps) {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',
       type: 'website',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`/share/${slug}/opengraph`],
     },
     twitter: {
       site: '@documenso',
       card: 'summary_large_image',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`/share/${slug}/opengraph`],
       description: 'I just signed with Documenso!',
     },
   } satisfies Metadata;
@@ -35,5 +35,5 @@ export default function SharePage() {
     return null;
   }
 
-  redirect(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
+  redirect(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001');
 }

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -26,9 +26,10 @@ export type SigningFormProps = {
   document: Document;
   recipient: Recipient;
   fields: Field[];
+  redirectUrl?: string | null;
 };
 
-export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
+export const SigningForm = ({ document, recipient, fields, redirectUrl }: SigningFormProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
   const { data: session } = useSession();
@@ -74,7 +75,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
       timestamp: new Date().toISOString(),
     });
 
-    router.push(`/sign/${recipient.token}/complete`);
+    redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${recipient.token}/complete`);
   };
 
   return (

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -1,3 +1,4 @@
+import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
@@ -8,12 +9,12 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { getDocumentMetaByDocumentId } from '@documenso/lib/server-only/document/get-document-meta-by-document-id';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
+import { extractNextHeaderRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { DocumentStatus, FieldType, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -40,24 +41,26 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
+  const requestHeaders = Object.fromEntries(headers().entries());
+
+  const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);
+
   const [document, fields, recipient] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
-    viewedDocument({ token }).catch(() => null),
+    viewedDocument({ token, requestMetadata }).catch(() => null),
   ]);
 
-  const documentMeta = await getDocumentMetaByDocumentId({ id: document!.id }).catch(() => null);
-
   if (!document || !document.documentData || !recipient) {
     return notFound();
   }
 
   const truncatedTitle = truncateTitle(document.title);
 
-  const { documentData } = document;
+  const { documentData, documentMeta } = document;
 
   const { user } = await getServerComponentSession();
 
@@ -65,7 +68,9 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     document.status === DocumentStatus.COMPLETED ||
     recipient.signingStatus === SigningStatus.SIGNED
   ) {
-    redirect(`/sign/${token}/complete`);
+    documentMeta?.redirectUrl
+      ? redirect(documentMeta.redirectUrl)
+      : redirect(`/sign/${token}/complete`);
   }
 
   if (documentMeta?.password) {
@@ -133,7 +138,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
           </Card>
 
           <div className="col-span-12 lg:col-span-5 xl:col-span-4">
-            <SigningForm document={document} recipient={recipient} fields={fields} />
+            <SigningForm
+              document={document}
+              recipient={recipient}
+              fields={fields}
+              redirectUrl={documentMeta?.redirectUrl}
+            />
           </div>
         </div>
 

apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx

@@ -18,7 +18,7 @@ export type TeamTransferStatusProps = {
   className?: string;
   currentUserTeamRole: TeamMemberRole;
   teamId: number;
-  transferVerification: TeamTransferVerification | null;
+  transferVerification: Pick<TeamTransferVerification, 'email' | 'expiresAt' | 'name'> | null;
 };
 
 export const TeamTransferStatus = ({

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { env } from 'next-runtime-env';
+
 import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
@@ -18,6 +20,8 @@ type SignInPageProps = {
 };
 
 export default function SignInPage({ searchParams }: SignInPageProps) {
+  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
+
   const rawEmail = typeof searchParams.email === 'string' ? searchParams.email : undefined;
   const email = rawEmail ? decryptSecondaryData(rawEmail) : null;
 
@@ -39,7 +43,7 @@ export default function SignInPage({ searchParams }: SignInPageProps) {
         isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
       />
 
-      {process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
+      {NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
         <p className="text-muted-foreground mt-6 text-center text-sm">
           Don't have an account?{' '}
           <Link href="/signup" className="text-primary duration-200 hover:opacity-70">

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { env } from 'next-runtime-env';
+
 import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
@@ -18,7 +20,9 @@ type SignUpPageProps = {
 };
 
 export default function SignUpPage({ searchParams }: SignUpPageProps) {
-  if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
+  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
+
+  if (NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
     redirect('/signin');
   }
 

apps/web/src/app/(unauthenticated)/unverified-account/page.tsx

@@ -0,0 +1,27 @@
+import { Mails } from 'lucide-react';
+
+import { SendConfirmationEmailForm } from '~/components/forms/send-confirmation-email';
+
+export default function UnverifiedAccount() {
+  return (
+    <div className="flex w-full items-start">
+      <div className="mr-4 mt-1 hidden md:block">
+        <Mails className="text-primary h-10 w-10" strokeWidth={2} />
+      </div>
+      <div className="">
+        <h2 className="text-2xl font-bold md:text-4xl">Confirm email</h2>
+
+        <p className="text-muted-foreground mt-4">
+          To gain access to your account, please confirm your email address by clicking on the
+          confirmation link from your inbox.
+        </p>
+
+        <p className="text-muted-foreground mt-4">
+          If you don't find the confirmation link in your inbox, you can request a new one below.
+        </p>
+
+        <SendConfirmationEmailForm />
+      </div>
+    </div>
+  );
+}

apps/web/src/app/layout.tsx

@@ -2,8 +2,11 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { PublicEnvScript } from 'next-runtime-env';
+
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getServerComponentAllFlags } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { TrpcProvider } from '@documenso/trpc/react';
@@ -19,32 +22,35 @@ import './globals.css';
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
-export const metadata = {
-  title: {
-    template: '%s - Documenso',
-    default: 'Documenso',
-  },
-  description:
-    'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  keywords:
-    'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
-  authors: { name: 'Documenso, Inc.' },
-  robots: 'index, follow',
-  openGraph: {
-    title: 'Documenso - The Open Source DocuSign Alternative',
+export function generateMetadata() {
+  return {
+    title: {
+      template: '%s - Documenso',
+      default: 'Documenso',
+    },
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-    type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
-  },
-  twitter: {
-    site: '@documenso',
-    card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
-    description:
-      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  },
-};
+    keywords:
+      'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
+    authors: { name: 'Documenso, Inc.' },
+    robots: 'index, follow',
+    metadataBase: new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000'),
+    openGraph: {
+      title: 'Documenso - The Open Source DocuSign Alternative',
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+      type: 'website',
+      images: ['/opengraph-image.jpg'],
+    },
+    twitter: {
+      site: '@documenso',
+      card: 'summary_large_image',
+      images: ['/opengraph-image.jpg'],
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+    },
+  };
+}
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getServerComponentAllFlags();
@@ -62,6 +68,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
+        <PublicEnvScript />
       </head>
 
       <Suspense>