chore: team url slugify and profanity filter

Signed-off-by: Adithya Krishna <adi@documenso.com>

.env.example

@@ -4,10 +4,8 @@ NEXTAUTH_SECRET="secret"
 
 # [[CRYPTO]]
 # Application Key for symmetric encryption and decryption
-# REQUIRED: This should be a random string of at least 32 characters
+# This should be a random string of at least 32 characters
 NEXT_PRIVATE_ENCRYPTION_KEY="CAFEBABE"
-# REQUIRED: This should be a random string of at least 32 characters
-NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 
 # [[AUTH OPTIONAL]]
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
@@ -25,7 +23,7 @@ NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/
 # [[E2E Tests]]
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
-E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_password"
 
 # [[STORAGE]]
 # OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
@@ -74,13 +72,13 @@ NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN=
 NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR=
 # OPTIONAL: The private key to use for DKIM signing.
 NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
-# OPTIONAL: Displays the maximum document upload limit to the user in MBs
-NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 
 # [[STRIPE]]
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_TEAM_SEAT_PRICE_ID=
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -33,4 +33,3 @@ body:
         - label: I have explained the use case or scenario for this feature.
         - label: I have included any relevant technical details or design suggestions.
         - label: I understand that this is a suggestion and that there is no guarantee of implementation.
-        - label: I want to work on creating a PR for this issue if approved

.github/ISSUE_TEMPLATE/improvement.yml

@@ -1,39 +1,35 @@
-name: 'General Improvement Request'
-description: 'Suggest a minor enhancement or improvement for this project'
-title: '[Title for your improvement suggestion]'
+name: 'General Improvement'
+description: Suggest a minor enhancement or improvement for this project
 body:
+  - type: markdown
+    attributes:
+      value: Please provide a clear and concise title for your improvement suggestion
   - type: textarea
     attributes:
-      label: 'Describe the improvement you are suggesting in detail'
-      description: 'Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.'
-    validations:
-      required: true
+      label: Improvement Description
+      description: Describe the improvement you are suggesting in detail. Explain what specific aspect of the project it addresses or enhances.
   - type: textarea
-    id: description
     attributes:
-      label: 'Additional Information & Alternatives (optional)'
-      description: 'Are there any additional context or information that might be relevant to the improvement suggestion.'
-    validations:
-      required: false
-  - type: dropdown
-    id: assignee
+      label: Rationale
+      description: Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.
+  - type: textarea
     attributes:
-      label: 'Do you want to work on this improvement?'
-      multiple: false
-      options:
-        - 'No'
-        - 'Yes'
-      default: 0
-    validations:
-      required: true
+      label: Proposed Solution
+      description: If you have a suggestion for how this improvement could be implemented, describe it here. Include any technical details, design suggestions, or other relevant information.
+  - type: textarea
+    attributes:
+      label: Alternatives (optional)
+      description: Are there any alternative approaches to achieve the same improvement? Describe other ways to address the issue or enhance the project.
+  - type: textarea
+    attributes:
+      label: Additional Context
+      description: Add any additional context or information that might be relevant to the improvement suggestion.
   - type: checkboxes
     attributes:
-      label: 'Please check the boxes that apply to this improvement suggestion.'
+      label: Please check the boxes that apply to this improvement suggestion.
       options:
-        - label: 'I have searched the existing issues and improvement suggestions to avoid duplication.'
-        - label: 'I have provided a clear description of the improvement being suggested.'
-        - label: 'I have explained the rationale behind this improvement.'
-        - label: 'I have included any relevant technical details or design suggestions.'
-        - label: 'I understand that this is a suggestion and that there is no guarantee of implementation.'
-    validations:
-      required: true
+        - label: I have searched the existing issues and improvement suggestions to avoid duplication.
+        - label: I have provided a clear description of the improvement being suggested.
+        - label: I have explained the rationale behind this improvement.
+        - label: I have included any relevant technical details or design suggestions.
+        - label: I understand that this is a suggestion and that there is no guarantee of implementation.

.github/workflows/stale.yml

@@ -15,10 +15,11 @@ jobs:
       - uses: actions/stale@v4
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          days-before-pr-stale: 90
-          days-before-issue-stale: 90
-          days-before-issue-close: 180
+          days-before-pr-stale: 30
+          days-before-issue-stale: 30
+          stale-issue-message: 'This issue has not seen activity for a while. It will be closed in 30 days unless further activity is detected'
           stale-pr-message: 'This PR has not seen activitiy for a while. It will be closed in 30 days unless further activity is detected.'
+          close-issue-message: 'This issue has been closed because of inactivity.'
           close-pr-message: 'This PR has been closed because of inactivity.'
           exempt-pr-labels: 'WIP,on-hold,needs review'
-          exempt-issue-labels: 'WIP,on-hold,needs review,roadmap,assigned,needs triage'
+          exempt-issue-labels: 'WIP,on-hold,needs review,roadmap,assigned'

.husky/pre-commit

@@ -1,16 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
-MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
-
-echo "Copying pdf.js"
-npm run copy:pdfjs --workspace apps/**
-
-echo "Copying .well-known/ contents"
-node "$MONOREPO_ROOT/scripts/copy-wellknown.cjs"
-
-git add "$MONOREPO_ROOT/apps/web/public/"
-git add "$MONOREPO_ROOT/apps/marketing/public/"
-
 npx lint-staged

.well-known/security.txt

@@ -1,7 +0,0 @@
-# General Issues
-Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
-
-# Report critical issues privately to let us take appropriate action before publishing.
-Contact: mailto:security@documenso.com
-Preferred-Languages: en
-Canonical: https://documenso.com/.well-known/security.txt

README.md

@@ -1,5 +1,3 @@
->We are nominated for a Product Hunt Gold Kitty 😺✨ and appreciate any support: https://documen.so/kitty
-
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">
@@ -15,9 +13,9 @@
     ·
     <a href="https://github.com/documenso/documenso/issues">Issues</a>
     ·
-    <a href="https://documen.so/live">Upcoming Releases</a>
+    <a href="https://github.com/documenso/documenso/milestones">Roadmap</a>
     ·
-    <a href="https://documen.so/roadmap">Roadmap</a>
+    <a href="https://documen.so/launches">Upcoming Launches</a>
   </p>
 </p>
 
@@ -117,12 +115,10 @@ To run Documenso locally, you will need
 
 Want to get up and running quickly? Follow these steps:
 
-1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
-
-After forking the repository, clone it to your local device by using the following command:
+1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 
 ```sh
-git clone https://github.com/<your-username>/documenso
+git clone https://github.com/documenso/documenso
 ```
 
 2. Set up your `.env` file using the recommendations in the `.env.example` file. Alternatively, just run `cp .env.example .env` to get started with our handpicked defaults.
@@ -156,12 +152,10 @@ npm run d
 
 Follow these steps to setup Documenso on your local machine:
 
-1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
-
-After forking the repository, clone it to your local device by using the following command:
+1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 
 ```sh
-git clone https://github.com/<your-username>/documenso
+git clone https://github.com/documenso/documenso
 ```
 
 2. Run `npm i` in the root directory
@@ -286,16 +280,12 @@ WantedBy=multi-user.target
 
 ### Railway
 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/bG6D4p)
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/DjrRRX)
 
 ### Render
 
 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
 
-### Koyeb
-
-[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
-
 ## Troubleshooting
 
 ### I'm not receiving any emails when using the developer quickstart.

apps/marketing/content/blog/commodifying-signing.mdx

@@ -1,87 +0,0 @@
----
-title: Commodifying Signing
-description: We are creating signing as a public good and are commoditizing it to make it cheaper and better.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-01-25
-tags:
-  - Vision
-  - Mission
-  - Open Source
----
-
-<figure>
-  <MdxNextImage
-    src="/blog/lighthouse.jpeg"
-    width="650"
-    height="650"
-    alt="A lighthouse on a tiny island."
-  />
-
-  <figcaption className="text-center">
-    Lighthouses are often used as an example of a public good; As they benefit all maritime users, but no one can be excluded from using them as a navigational aid. Use by one person neither prevents access by other people, nor does it reduce availability to others.
-  </figcaption>
-</figure>
-
-# Commodifying Signing
-
-> TLDR; We are creating signing as a public good and are commoditizing it to make it cheaper and better.
-
-While we are in full-on building mode with Documenso, I think a lot about the big picture of what we are attempting to do. One phrase that keeps popping up is, "We are commodifying signing." Let's dig deeper into what that means.
-
-Let's start with why we are doing this. Documenso's mission is to solve the domain of signing once and for all for everyone. In so many calls, I hear stories about how organizations build their own solution because the existing ones are too expensive or need to be more flexible. That means not hundreds but probably thousands of companies worldwide have done the same. This is simply wasting humanity's time. Since digital signing systems are understood well enough that seemingly "everyone" can build them, given enough pain, It's time to do it once correctly.
-
-## Is signing already a commodity?
-
-> In economics, a **commodity** is an economic good, usually a resource, that has explicitly full or substantial fungibility: that is, the market treats instances of the good as equivalent or nearly so with no regard to who produced them.
-
-That sounds like the signing market today. There is no shortage of signing providers, and you can get similar signing services from many places. So why is this different from what we want, and why does this not satisfy the market?
-
-- Signing is expensive and painful when you are locked into your vendor, and they charge by signing volume.
-- Signing is also expensive and painful when you have to build it yourself since no vendor fits your requirements or you are not allowed to
-
-To understand why, we need to look at the landscape as it is today:
-
-- **Commodity**: Signing SaaS
-- **Private Goods**: Signing Code Base, Regulatory Know-How
-- **Public Goods**: Web Tech, Digital Signature Algorithms and Standards
-
-What the current players have done is to commodify the listed public goods into commercial products:
-
-> […]the action and process of transforming goods, services, ideas, nature, personal information, people, or animals into commodities.
-> (Let's ignore the end of that list for now and what it says about humanity, yikes)
-
-While this paradigm brought digital signing to many businesses worldwide, we aim for a different future. To solve signing once and for all, we need to achieve two core points:
-
-- Making it cheaper so it's profitable for everyone to use
-- Making it more accessible so everyone can use it (e.g. regulated industries) and flexible enough (extendable, open).
-
-To achieve this, we must transform the landscape to look like this:
-
-- **Commodities**: Enterprise Components, Support, Hosting, Self-Host Licenses
-- **Public Goods**: (no longer private): OS (Open Source) Signing Code Base, OS Regulatory Know-How
-- **Public Goods**: OS Web Tech, Digital Signature Algorithms and Standards
-
-## Raising the Bar
-
-Before creating a commodity, we are raising the bar of what the underlying public good is. Having an open source singing framework you can extend, self-host, and understand makes the resulting solution much more accessible and extendable for everyone. Now for the final feat of making signing cheaper:
-
-As we have seen, signing has already been commodified. But since it was done by a closed source and, frankly, a very opaque industry, no downward price spiral has ensued. By building Documenso open source with an open culture, we can pierce the veil and trigger what the space has been missing for a long time: Commoditization. If you had to read that again, so did I:
-
-> In business literature, **commoditization** is defined as the process by which goods that have economic value and are distinguishable in terms of attributes (uniqueness or brand) become simple commodities in the eyes of the market or consumers.
-
-By only selling what creates value for the customer (hosting a highly available service, keeping it compliant, supporting with technical issues and challenges, preparing industry-specific components), we are commoditizing signing since everyone can do it now: The resources enabling it are public goods, aka. open source. A leveled playing field, as described above, is the perfect environment for a community-first, technology-first, and value-first company like Documenso to flourish.
-
-## Changing the Game
-
-In this new world, a company needing signing (literally every company) can decide if the ROI (Return on Investment) of building signing themselves is greater than simply paying for the value-added activities they will need anyway. Pricing our offering not on volume but fixed is a nice additional wedge into the market we intend to use here.
-
-The market dynamic now changes to who can offer the greatest value added to the public goods, driving the price down as this can be done much more efficiently than locking customers into closed source SaaS. Documenso, being a lean company, which we intend to stay with for a long time, will help kickstart this effect. Open Source capital efficiency is real. Our planned enterprise components, hosting support, and partner ecosystem will all leverage this effect.
-
-We will grow our community around the public good, the open-source repo, and create an ecosystem around the commodities built on top of it (components, hosting, compliance, support). We will solve signing once and for all, and the world will be better for it. Onwards.
-
-As always, feel free to connect on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments.
-
-Best from Hamburg\
-Timur

apps/marketing/content/blog/email-provider-incident-2024-01-10.mdx

@@ -1,28 +0,0 @@
----
-title: Jan 10th Email Provider Security Incident
-description: On January 10th, 2022, we were notified by our email provider that they had experienced a security incident.
-authorName: 'Lucas Smith'
-authorImage: '/blog/blog-author-lucas.png'
-authorRole: 'Co-Founder'
-date: 2024-01-17
-tags:
-  - Security
----
-
-On January 10th, 2024 we were notified by our email provider that a security incident had occurred. This security incident which had started on January 7th led to a bad actor obtaining access to their database which contains ours and other customer’s data.
-
-We understand that during this security incident the following has been accessed:
-
-- Email addresses.
-- Metadata on emails sent excluding the email body.
-
-While the incident is unfortunate we are pleased with the remediation and the processes that our email provider has put in place to help avoid this kind of situation in the future. Since the incident, our provider has rectified the issue and has engaged a security company to conduct an exhaustive investigation and to help improve their security posture moving forward.
-
-We remain steadfast in our commitment to our current email provider, and will not be taking any further action with relation to changing providers.
-
-We are now working with our legal counsel to ensure that we provide the appropriate notice to all our customers in each jurisdiction. If you have any further questions on this incident please feel free to contact our support team at [support@documenso.com](mailto:support@documenso.com).
-
-We appreciate your ongoing support in this matter.
-
-You can read more on the incident on our providers blog post below:
-[https://resend.com/blog/incident-report-for-january-10-2024](https://resend.com/blog/incident-report-for-january-10-2024)

apps/marketing/content/blog/linear-gh.mdx

@@ -1,115 +0,0 @@
----
-title: Moving from Linear to GitHub & LIVE Roadmap 2.0
-description: We are leaving linear and are going all in on GitHub. Here is how we do it.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-01-10
-tags:
-  - GitHub
-  - Backlog
-  - Roadmap
----
-
-# From Linear to GitHub
-
-> TLDR; We are leaving Linear and are using only GitHub going forward. We no longer communicate feature timelines, only what we are working on and what's next.
-
-If you follow us, you know we have been in full-on build mode. We are building, the community is building, it's great. Building is our daily business, so we think a lot about improving our approach to doing it.
-Our most recent approach is to reduce the number of tools and platforms we use. Every tool we use
-
-- Reduces the average time you spend on the tool
-- Reduces your focus
-- Increases mental load to keep all points of interest in mind
-
-We thought about where we spend the most time, and hardly surprising: it's GitHub. Not only do we spend a lot of time there, but we also WANT to spend a lot of time there because:
-
-- It's where the community contributes, and we are all about community
-- It's where we show the world what we are working on
-
-# The old structure
-
-So far, we have been using Linear for our Backlog/ Task Management and synced issues we want to showcase or work on with the community via synclinear.com. Not only did we have our development issues there, but since
-we have our own resident founding designer, we created a proper design backlog to structure our design workflows.
-
-# The new structure
-
-We moved everything to GitHub once we realized our focus was already there. This has a few key benefits:
-
-- Reducing dilution of attention and time: You can hang out on GitHub without risk of missing much
-- Putting different aspects of Documenso close to each other: Development, Design, Community
-- Keep long-term, niche, and very abstract issues out of the main repo so we don't get desensitized by large issue numbers
-
-To achieve this, we created a few GitHub repositories to host issues, with the main repository remaining the central point of interest, especially for the community.
-
-## 1. Main Repository - Day to day Issues and the shorter-term roadmap (LIVE Roadmap 2.0)
-
-> [github.com/documenso/documenso](https://github.com/documenso/documenso)
-
-Apart from the source code of the Documenso app and website, the main repo houses issues raised by the community and issues where we invite the community to participate.
-With the overhauling of our issue management, we are also updating our progress communication. While the software and product development process is highly complex,
-we try to give as much insight into what we do as possible. To that end, we went through 3 phases, three being what we do now.
-
-1. **One extensive roadmap**: Initially we had one roadmap and were (very) slowly checking off boxes there (via a "Roadmap" milestone). While this is easy, it's also pretty imprecise and not practical as the project grows
-2. **Estimated releases per quarter**: To give better guidance, we tried communicating our goals for the quarter; a pretty big window we thought we could roughly "hit". While the idea of not being too detailed was good, it is tough to estimate when some significant things are done if you do a lot of minor/ other things in parallel,
-   like working with the community and tuning things you go. Hitting time targets is tricky because there may be better things to do than sticking to that time target. This is always much easier to grasp for the people closely involved. The fallacy is to assume the thing you plan for exists in a vacuum.
-3. Since we do not want to limit ourselves in choosing the most effective course but still give some insight into what's going on and what's coming up, we updated the live roadmap [https://documen.so/live](https://documen.so/live). It now shows what we are currently working on and what we plan on doing next. We do not provide
-   a specific timeline anymore since we couldn't even if we wanted to. Of course, we set our short-term goals based on what's best for the community. We give updates on the issues being worked on as well as possible.
-
-## 2. Public Backlog - The longer-term roadmap
-
-> [github.com/documenso/backlog](https://github.com/documenso/backlog)
-
-The public backlog houses everything we want to build eventually. We do not provide a specific timeline of when that might happen. If we decide against something, it will be removed from the public backlog, as we consider this our long-term vision for Documenso. If you are interested in something on the roadmap, comment on the issue or post on Discord. This helps us gauge interest in specific features.
-**Issues in the public backlog are not** available to be worked on. For issues to work on, please check the main repository issues. The issues found here are scoped broader since they are not meant for immediate execution but rather give a sense of where Documenso is going and what we consider part of our domain.
-
-## 3. Internal Backlog
-
-> github.com/documenso/backlog-internal
-
-<figure>
-  <MdxNextImage
-    src="/blog/gh1.png"
-    width="1260"
-    height="630"
-    alt="GitHub: Development Board"
-  />
-
-  <figcaption className="text-center">
-    Our internal Kanban for development
-  </figcaption>
-</figure>
-
-This serves as the direct replacement for our Linear backlog. Here, we manage issues that are either too small or short-term for inclusion in the long-term roadmap, yet too specialized or fundamental to be integrated into the main repository. Our development Kanban board is implemented using a GitHub project.
-
-## 4. Internal Design Backlog
-
-> github.com/documenso/design-internal
-
-<figure>
-  <MdxNextImage
-    src="/blog/gh2.png"
-    width="1260"
-    height="630"
-    alt="GitHub: Design Board"
-  />
-
-  <figcaption className="text-center">
-    Our internal Kanban for design
-  </figcaption>
-</figure>
-
-This is the design equivalent of the internal backlog. The internal design backlog houses our design projects that include the exploration of new features, detailed UI designs, and improving the platform overall.
-It's similar to the Kanban board for the development backlog.
-
-## 5. Public Design Repository
-
-> [github.com/documenso/backlog-design](https://github.com/documenso/design)
-
-While the internal design backlog also existed in Linear, the public design repository is new. Since designing in the open is tricky, we opted to publish the detailed design artifacts with the corresponding feature instead.
-We already have design.documenso.com housing our general design system. Here, we will publish the specifics of how we applied this to each feature. We will publish the first artifacts here soon, what may be in the cards can be found on the [LIVE Roadmap](https://documen.so/live).
-
-Feel free to connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here to help and would love to hear from you :)
-
-Best from Hamburg\
-Timur

apps/marketing/content/blog/manifest.mdx

@@ -7,8 +7,6 @@ authorRole: 'Co-Founder'
 date: 2023-07-13
 tags:
   - Manifesto
-  - Open Source
-  - Vision
 ---
 
 <figure>

apps/marketing/content/blog/pre-seed.mdx

@@ -1,6 +1,6 @@
 ---
 title: Announcing Pre-Seed and Open Metrics
-description: We are excited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
+description: We are exicited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'

apps/marketing/content/blog/shop.mdx

@@ -30,7 +30,7 @@ We kicked off [Malfunction Mania](https://documenso.com/blog/malfunction-mania)
 
 ## Documenso Merch Shop
 
-The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors. All items can be earned by contributing to Documenso.
+The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors. All items can be earned by contrinuting to Documenso.
 
 <figure>
   <MdxNextImage

apps/marketing/content/blog/why-i-started-documenso.mdx

@@ -1,68 +0,0 @@
----
-title: Why I started Documenso
-description: I started Documenso because I wanted to build a modern tech company in a growing space with a mission bigger than money, I overpaid for a SSL cert 13 years ago, like encryption and want to help make the internet/ world more open.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-02-06
-tags:
-  - Founders
-  - Mission
-  - Open Source
----
-
-<figure>
-  <MdxNextImage
-    src="/blog/burgers.jpeg"
-    width="650"
-    height="100"
-    alt="Burgers, drinks on a table between friends."
-  />
-
-  <figcaption className="text-center">
-    Not the burger from the story. But it could be as well, the place is pretty generic.
-  </figcaption>
-</figure>
-
-> TLDR; I started Documenso because I wanted to build a modern tech company in a growing space with a mission bigger than money, I overpaid for a SSL cert 13 years ago, like encryption, and wanted to help make the world/ Internet more open.
-
-It's hard to pinpoint when I decided to start Documenso. I first uttered the word "Documenso" while sitting in a restaurant with [Felix](https://twitter.com/flxmgdnz), eating a burger and discussing what's next in late 2022. Shortly after, I sat down with a can of caffeine and started building [Documenso 0.9](https://github.com/documenso/documenso/releases/tag/0.9-developer-preview). Starting Documenso is the most deliberate business decision I ever made. It was deliberate from the personal side and deliberate from the business side.
-
-Looking at the personal side, I've had some time off and was actively looking for my next move. Looking back, I stumbled into my first company. Less so with the second one, but I joined my co-founders and did not develop the core concept myself. While coming up with Documenso, I was deliberately looking for a few things, based on my previous experiences:
-
-- An entrepreneurial space that was a big enough opportunity
-- A huge macro trend, lifting everything in it's space
-- A mode of working that fits my flow (which, luckily for me, is pretty close to the modern startup/ tech scene)
-- A more significant impact to be made than just earning lots of money (though there is nothing wrong with that)
-
-Quick shoutout to everyone feeling even a pinch of imposter syndrome while calling themselves a founder. It was after ten years, slightly after starting Documenso, that I started doing it in my head without cringing. So cut yourself some slack. Considering how long I've been doing this, I would have earned the internal title sooner, and so do you. After grappling with my identity for a second, as is customary for founders, my decision to start this journey came quickly.
-
-Aside from the personal dimension, I had a clear mindset of what I wanted. The criteria I describe below clicked into place one after another, in no particular order. Having experienced no market demand and a very gritty, grindy market, I was looking for something more fundamental. Something basic, infrastructure-like, with a huge demand. A growing market deeply rooted in the ever-increasing digitalization of the world.
-
-And to be honest, I just always liked digital signature tools. It's a product that is easy enough to comprehend and build but complex and impactful enough to satisfy a hard need. It's a product you can build very product-driven since the market and domain are well understood. So when asked about what's next for me, I literally said, "Digital, um, let's say… signatures". As it turns out, my first gut feeling was spot on, but how spot on I only realized when I started researching the space. An open source document signing company happens to be the perfect intersection of all the criteria and personal preferences I described above; it's pretty amazing, actually:
-
-- The global signing market is enormous and rapidly growing
-- To put it bluntly, the signing space is vast and dominated by one outdated player. Outdated in terms of tech, pricing, and ecosystem
-- The signing space is also ridiculously opaque for a space based on open web tech, open encryption tech, and open signing standards. Even by closed-source standards
-- We are currently seeing a renaissance for commercial open source startups, combining venture founder financials with open source mechanics
-- Rebuilding a fundamental infrastructure as open source with a meaningful scale has a profoundly transformative effect on any space
-- Working in open source requires being open, cooperative, and inclusive. It also requires quite a bit of context jumping, "going with the flow," and empathy
-- Apart from fixing the signing space, making Documenso successful would be another domino tile toward open source eating the world, which is great for everyone
-
-Building a company is so complex it can't be planned out. Basing it on great fundamentals and the expected dynamics is the best founders can do, in my humble opinion. After these fundamental decisions, you are (almost) just along for the ride and need to focus on solving the "conventional" problems of starting a company the best you can. With digital signatures hitting so many points of my personal and professional checklist, this already was a great fit. What got me excited at first, though, apart from the perspective of drinking caffeine and coding, was this:
-
-Roughly 13 years ago, I was launching my first product. We obviously wanted SSL encryption on the product site, so I had to buy an SSL certificate. ~$200ish, two years validity, from VeriSign, I think. Apart from it being ridiculously complicated to get, it bothered me that we had basically paid $200 for what is essentially a long number someone generated. SSL wasn't even that widespread back then because it was mainly considered important for e-commerce, no wonder considering it cost so much. "Why would I encrypt a blog?". Fast forward to today, and everyone can get a free SSL cert courtesy of [Let's Encrypt](https://letsencrypt.org/) and browsers are basically blocking unencrypted sites. Mostly, it is even built into hosting platforms, so you barely even notice as a developer.
-
-I had forgotten all about that story until I realized this is where signing is today. A global need fulfilled only by a closed ecosystem, not really state-of-the-art companies, leading to, let's call it, steep prices. I had considered Let's Encrypt a pillar of the open internet for so long that I forgot that they weren't always there. One day, someone said, let's make the internet better. Signing is another domain that should have had an open ecosystem for a long time. Another parallel to that story is the fact that the cryptographic certificates you need for document signing are also stuck in the "pre-Let's Encrypt world." Free document signing certificates via "Let's Sign" are now another to-do on the [long-term roadmap](https://documen.so/roadmap) list for the open signing ecosystem. Effecting this change in any way is a huge driver for me.
-
-Apart from my personal gripes with the corporate certificate industry, I have always found encryption fascinating. It's such a fundamental force in society when you think about it: Secure Communication, Secure Commerce, and even [internet native, open source money (Bitcoin)](https://github.com/bitcoin/bitcoin) were created using a bit of smart math. All these examples are expressions of very fundamental human behaviors that should be enabled and protected by open infrastructures.
-
-I never told rthis to anyone before, but since starting Documenso, I realized that I underestimated the impact and importance of open source for quite some time. When I was in University, I distantly remember my mindset of "yeah, open source is nice, but the great, commercially successful products used in the real world are built by closed companies (aka Microsoft)" _shudder_ It was never really a conscious thought, but enough that I started learning MS Silverlight before plain Javascript. It was slowly, over time, that I realized that open web standards are superior to closed ones, and even later, I understood the same holds true for all software. Open source fixes something in the economy I find hard to articulate. I did my best in [Commodifying Signing](https://documenso.com/blog/commodifying-signing).
-
-To wrap this up, Documenso happens to be the perfect storm of market opportunity, my interests, and my passions. Creating a company in which people want to work for the long term while tackling these issues is a critical side quest of Documenso. This is not only about building the next generation of signing tech; it's also about doing our part to normalize open, healthy, efficient working cultures and tackling relevant problems.
-
-As always, feel free to connect on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions, comments, thoughts or feelings.
-
-\
-Best from Hamburg\
-Timur

apps/marketing/package.json

@@ -36,7 +36,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
-    "sharp": "0.33.1",
+    "sharp": "0.32.5",
     "typescript": "5.2.2",
     "zod": "^3.22.4"
   },

apps/marketing/public/.well-known/security.txt

@@ -1,7 +0,0 @@
-# General Issues
-Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
-
-# Report critical issues privately to let us take appropriate action before publishing.
-Contact: mailto:security@documenso.com
-Preferred-Languages: en
-Canonical: https://documenso.com/.well-known/security.txt

apps/marketing/src/app/(marketing)/[content]/page.tsx

@@ -12,10 +12,10 @@ export const generateMetadata = ({ params }: { params: { content: string } }) =>
   const document = allDocuments.find((post) => post._raw.flattenedPath === params.content);
 
   if (!document) {
-    return { title: 'Not Found' };
+    notFound();
   }
 
-  return { title: document.title };
+  return { title: `Documenso - ${document.title}` };
 };
 
 const mdxComponents: MDXComponents = {

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -7,8 +7,6 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const dynamic = 'force-dynamic';
-
 export const generateStaticParams = () =>
   allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
 
@@ -16,15 +14,11 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
   const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
 
   if (!blogPost) {
-    return {
-      title: 'Not Found',
-    };
+    notFound();
   }
 
   return {
-    title: {
-      absolute: `${blogPost.title} - Documenso Blog`,
-    },
+    title: `Documenso - ${blogPost.title}`,
     description: blogPost.description,
   };
 };

apps/marketing/src/app/(marketing)/blog/page.tsx

@@ -1,10 +1,5 @@
-import type { Metadata } from 'next';
-
 import { allBlogPosts } from 'contentlayer/generated';
 
-export const metadata: Metadata = {
-  title: 'Blog',
-};
 export default function BlogPage() {
   const blogPosts = allBlogPosts.sort((a, b) => {
     const dateA = new Date(a.date);

apps/marketing/src/app/(marketing)/claimed/page.tsx

@@ -4,7 +4,6 @@ import { redirect } from 'next/navigation';
 
 import { ArrowRight } from 'lucide-react';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
@@ -13,8 +12,6 @@ import { Button } from '@documenso/ui/primitives/button';
 
 import { PasswordReveal } from '~/components/(marketing)/password-reveal';
 
-export const dynamic = 'force-dynamic';
-
 const fontCaveat = Caveat({
   weight: ['500'],
   subsets: ['latin'],
@@ -178,7 +175,11 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
           This is a temporary password. Please change it as soon as possible.
         </p>
 
-        <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signin`} target="_blank" className="mt-4 block">
+        <Link
+          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`}
+          target="_blank"
+          className="mt-4 block"
+        >
           <Button size="lg" className="text-base">
             Let's get started!
             <ArrowRight className="ml-2 h-5 w-5" />

apps/marketing/src/app/(marketing)/layout.tsx

@@ -41,7 +41,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
       </div>
 
-      <div className="relative max-w-screen-xl flex-1 px-4 sm:mx-auto lg:px-8">{children}</div>
+      <div className="relative mx-auto max-w-screen-xl flex-1 px-4 lg:px-8">{children}</div>
 
       <Footer className="bg-background border-muted mt-24 border-t" />
     </div>

apps/marketing/src/app/(marketing)/open/data.ts

@@ -47,14 +47,6 @@ export const TEAM_MEMBERS = [
     engagement: 'Full-Time',
     joinDate: 'October 9th, 2023',
   },
-  {
-    name: 'Adithya Krishna',
-    role: 'Software Engineer - II',
-    salary: '-',
-    location: 'India',
-    engagement: 'Full-Time',
-    joinDate: 'December 1st, 2023',
-  },
 ];
 
 export const FUNDING_RAISED = [

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -1,5 +1,3 @@
-import type { Metadata } from 'next';
-
 import { z } from 'zod';
 
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
@@ -16,10 +14,6 @@ import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
 
-export const metadata: Metadata = {
-  title: 'Open Startup',
-};
-
 export const revalidate = 3600;
 
 export const dynamic = 'force-dynamic';
@@ -147,12 +141,7 @@ export default async function OpenPage() {
         <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
           All our metrics, finances, and learnings are public. We believe in transparency and want
           to share our journey with you. You can read more about why here:{' '}
-          <a
-            className="font-bold"
-            href="https://documenso.com/blog/pre-seed"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <a className="font-bold" href="https://documenso.com/blog/pre-seed" target="_blank">
             Announcing Open Metrics
           </a>
         </p>

apps/marketing/src/app/(marketing)/oss-friends/page.tsx

@@ -1,4 +1,3 @@
-import type { Metadata } from 'next';
 import Image from 'next/image';
 
 import { z } from 'zod';
@@ -6,12 +5,7 @@ import { z } from 'zod';
 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 
 import { OSSFriendsContainer } from './container';
-import type { TOSSFriendsSchema } from './schema';
-import { ZOSSFriendsSchema } from './schema';
-
-export const metadata: Metadata = {
-  title: 'OSS Friends',
-};
+import { TOSSFriendsSchema, ZOSSFriendsSchema } from './schema';
 
 export default async function OSSFriendsPage() {
   const ossFriends: TOSSFriendsSchema = await fetch('https://formbricks.com/api/oss-friends', {

apps/marketing/src/app/(marketing)/page.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
-import type { Metadata } from 'next';
 import { Caveat } from 'next/font/google';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -11,11 +10,6 @@ import { OpenBuildTemplateBento } from '~/components/(marketing)/open-build-temp
 import { ShareConnectPaidWidgetBento } from '~/components/(marketing)/share-connect-paid-widget-bento';
 
 export const revalidate = 600;
-export const metadata: Metadata = {
-  title: {
-    absolute: 'Documenso - The Open Source DocuSign Alternative',
-  },
-};
 
 const fontCaveat = Caveat({
   weight: ['500'],

apps/marketing/src/app/(marketing)/pricing/page.tsx

@@ -1,4 +1,5 @@
-import type { Metadata } from 'next';
+'use client';
+
 import Link from 'next/link';
 
 import {
@@ -11,12 +12,6 @@ import { Button } from '@documenso/ui/primitives/button';
 
 import { PricingTable } from '~/components/(marketing)/pricing-table';
 
-export const metadata: Metadata = {
-  title: 'Pricing',
-};
-
-export const dynamic = 'force-dynamic';
-
 export type PricingPageProps = {
   searchParams?: {
     planId?: string;
@@ -55,7 +50,7 @@ export default function PricingPage() {
 
         <div className="mt-4 flex justify-center">
           <Button variant="outline" size="lg" className="rounded-full hover:cursor-pointer" asChild>
-            <Link href="https://github.com/documenso/documenso" target="_blank" rel="noreferrer">
+            <Link href="https://github.com/documenso/documenso" target="_blank">
               Get Started
             </Link>
           </Button>
@@ -168,7 +163,6 @@ export default function PricingPage() {
               <Link
                 className="text-documenso-700 font-bold"
                 target="_blank"
-                rel="noreferrer"
                 href="mailto:support@documenso.com"
               >
                 support@documenso.com
@@ -178,7 +172,6 @@ export default function PricingPage() {
                 className="text-documenso-700 font-bold"
                 href="https://documen.so/discord"
                 target="_blank"
-                rel="noreferrer"
               >
                 in our Discord-Support-Channel
               </a>{' '}

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -6,7 +6,6 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import type { Field, Recipient } from '@documenso/prisma/client';
@@ -86,7 +85,6 @@ export const SinglePlayerClient = () => {
     setFields(
       data.fields.map((field, i) => ({
         id: i,
-        secondaryId: i.toString(),
         documentId: -1,
         templateId: null,
         recipientId: -1,
@@ -160,7 +158,6 @@ export const SinglePlayerClient = () => {
     readStatus: 'OPENED',
     signingStatus: 'NOT_SIGNED',
     sendStatus: 'NOT_SENT',
-    role: 'SIGNER',
   };
 
   const onFileDrop = async (file: File) => {
@@ -191,7 +188,7 @@ export const SinglePlayerClient = () => {
         <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
           Create a{' '}
           <Link
-            href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}
+            href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
             target="_blank"
             className="hover:text-foreground/80 font-semibold transition-colors"
           >

apps/marketing/src/app/(marketing)/singleplayer/page.tsx

@@ -1,13 +1,6 @@
-import type { Metadata } from 'next';
-
 import { SinglePlayerClient } from './client';
 
-export const metadata: Metadata = {
-  title: 'Singleplayer',
-};
-
 export const revalidate = 0;
-export const dynamic = 'force-dynamic';
 
 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during

apps/marketing/src/app/layout.tsx

@@ -3,7 +3,6 @@ import { Suspense } from 'react';
 import { Caveat, Inter } from 'next/font/google';
 
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
-import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
 import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -18,35 +17,29 @@ import './globals.css';
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
-export function generateMetadata() {
-  return {
-    title: {
-      template: '%s - Documenso',
-      default: 'Documenso',
-    },
+export const metadata = {
+  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.',
+  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',
     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_MARKETING_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.',
-    },
-  };
-}
+    type: 'website',
+    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
+  },
+  twitter: {
+    site: '@documenso',
+    card: 'summary_large_image',
+    images: [`${process.env.NEXT_PUBLIC_MARKETING_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.',
+  },
+};
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getAllAnonymousFlags();

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

@@ -39,7 +39,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
   return (
     <div className={cn('border-t py-12', className)} {...props}>
       <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
-        <div className="flex-shrink-0">
+        <div>
           <Link href="/">
             <Image
               src={LogoImage}
@@ -64,13 +64,13 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </div>
         </div>
 
-        <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">
+        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
           {FOOTER_LINKS.map((link, index) => (
             <Link
               key={index}
               href={link.href}
               target={link.target}
-              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 break-words text-sm"
+              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 text-sm"
             >
               {link.text}
             </Link>

apps/marketing/src/components/(marketing)/pricing-table.tsx

@@ -8,7 +8,6 @@ import Link from 'next/link';
 import { AnimatePresence, motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -83,7 +82,11 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="rounded-full text-base" asChild>
-            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`} target="_blank" className="mt-6">
+            <Link
+              href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+              target="_blank"
+              className="mt-6"
+            >
               Signup Now
             </Link>
           </Button>
@@ -114,13 +117,13 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="mt-6 rounded-full text-base" asChild>
-            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}>Signup Now</Link>
+            <Link href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}>Signup Now</Link>
           </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">
             <p className="text-foreground py-4 font-medium">
               {' '}
-              <a href="https://documenso.com/blog/early-adopters" target="_blank" rel="noreferrer">
+              <a href="https://documenso.com/blog/early-adopters" target="_blank">
                 The Early Adopter Deal:
               </a>
             </p>
@@ -130,11 +133,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             <p className="text-foreground py-4">
               <strong>
                 {' '}
-                <a
-                  href="https://documenso.com/blog/early-adopters"
-                  target="_blank"
-                  rel="noreferrer"
-                >
+                <a href="https://documenso.com/blog/early-adopters" target="_blank">
                   Includes all upcoming features
                 </a>
               </strong>

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

@@ -6,7 +6,6 @@ import Link from 'next/link';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import type { Signature } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
@@ -86,7 +85,7 @@ export const SinglePlayerModeSuccess = ({
       <p className="text-muted-foreground/60 mt-16 text-center text-sm">
         Create a{' '}
         <Link
-          href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}
+          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
           target="_blank"
           className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
         >

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

@@ -1,13 +1,11 @@
 'use client';
 
-import type { HTMLAttributes, KeyboardEvent } from 'react';
-import { useMemo, useState } from 'react';
+import { HTMLAttributes, KeyboardEvent, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Loader } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
-import { env } from 'next-runtime-env';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -92,10 +90,10 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     }
 
     if (step === STEP.EMAIL) {
-      return 3;
+      return 1;
     }
 
-    return 1;
+    return 3;
   }, [step]);
 
   const onNextStepClick = () => {
@@ -145,11 +143,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
         setTimeout(resolve, 1000);
       });
 
-      const planId = env('NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID');
-
-      if (!planId) {
-        throw new Error('No plan ID found.');
-      }
+      const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
 
       const claimPlanInput = signatureDataUrl
         ? {
@@ -404,7 +398,6 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
           </DialogDescription>
 
           <SignaturePad
-            disabled={isSubmitting}
             className="aspect-video w-full rounded-md border"
             defaultValue={signatureDataUrl || ''}
             onChange={setDraftSignatureDataUrl}

apps/marketing/src/pages/api/claim-plan/index.ts

@@ -1,15 +1,13 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
+import { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomUUID } from 'crypto';
 
-import type { TEarlyAdopterCheckoutMetadataSchema } from '@documenso/ee/server-only/stripe/webhook/early-adopter-checkout-metadata';
-import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { TEarlyAdopterCheckoutMetadataSchema } from '@documenso/ee/server-only/stripe/webhook/early-adopter-checkout-metadata';
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
 
-import type { TClaimPlanResponseSchema } from '~/api/claim-plan/types';
-import { ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
+import { TClaimPlanResponseSchema, ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
 
 export default async function handler(
   req: NextApiRequest,
@@ -42,7 +40,7 @@ export default async function handler(
 
     if (user) {
       return res.status(200).json({
-        redirectUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/signin`,
+        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`,
       });
     }
 
@@ -79,8 +77,8 @@ export default async function handler(
       mode: 'subscription',
       metadata,
       allow_promotion_codes: true,
-      success_url: `${NEXT_PUBLIC_MARKETING_URL()}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${NEXT_PUBLIC_MARKETING_URL()}`,
+      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}`,
     });
 
     if (!checkout.url) {

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -1,4 +1,4 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
+import { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomBytes } from 'crypto';
 import { buffer } from 'micro';
@@ -6,8 +6,7 @@ import { buffer } from 'micro';
 import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
 import { insertTextInPDF } from '@documenso/lib/server-only/pdf/insert-text-in-pdf';
 import { redis } from '@documenso/lib/server-only/redis';
-import type { Stripe } from '@documenso/lib/server-only/stripe';
-import { stripe } from '@documenso/lib/server-only/stripe';
+import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';

apps/web/package.json

@@ -42,10 +42,9 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
-    "sharp": "0.33.1",
+    "sharp": "0.32.5",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",
-    "ua-parser-js": "^1.0.37",
     "uqr": "^0.1.2",
     "zod": "^3.22.4"
   },
@@ -54,8 +53,7 @@
     "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
     "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
-    "@types/ua-parser-js": "^0.7.39"
+    "@types/react-dom": "18.2.7"
   },
   "overrides": {
     "next-auth": {

apps/web/process-env.d.ts

@@ -6,6 +6,7 @@ declare namespace NodeJS {
     NEXT_PRIVATE_DATABASE_URL: string;
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
+    NEXT_PUBLIC_STRIPE_TEAM_SEAT_PRICE_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

apps/web/public/.well-known/security.txt

@@ -1,7 +0,0 @@
-# General Issues
-Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
-
-# Report critical issues privately to let us take appropriate action before publishing.
-Contact: mailto:security@documenso.com
-Preferred-Languages: en
-Canonical: https://documenso.com/.well-known/security.txt

apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx

@@ -20,7 +20,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { MultiSelectRoleCombobox } from './multiselect-role-combobox';
+import { RoleCombobox } from './role-combobox';
 
 const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
 
@@ -118,7 +118,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
                   <fieldset className="flex flex-col gap-2">
                     <FormLabel className="text-muted-foreground">Roles</FormLabel>
                     <FormControl>
-                      <MultiSelectRoleCombobox
+                      <RoleCombobox
                         listValues={roles}
                         onChange={(values: string[]) => onChange(values)}
                       />

apps/web/src/app/(dashboard)/admin/users/[id]/role-combobox.tsx

@@ -14,12 +14,12 @@ import {
 } from '@documenso/ui/primitives/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 
-type ComboboxProps = {
+type RoleComboboxProps = {
   listValues: string[];
   onChange: (_values: string[]) => void;
 };
 
-const MultiSelectRoleCombobox = ({ listValues, onChange }: ComboboxProps) => {
+export const RoleCombobox = ({ listValues, onChange }: RoleComboboxProps) => {
   const [open, setOpen] = React.useState(false);
   const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
   const dbRoles = Object.values(Role);
@@ -78,5 +78,3 @@ const MultiSelectRoleCombobox = ({ listValues, onChange }: ComboboxProps) => {
     </Popover>
   );
 };
-
-export { MultiSelectRoleCombobox };

apps/web/src/app/(dashboard)/admin/users/page.tsx

@@ -1,5 +1,4 @@
-import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
-import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
+import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
 
 import { UsersDataTable } from './data-table-users';
 import { search } from './fetch-users.actions';
@@ -19,7 +18,7 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
 
   const [{ users, totalPages }, individualPrices] = await Promise.all([
     search(searchString, page, perPage),
-    getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY),
+    getPricesByType('individual'),
   ]);
 
   const individualPriceIds = individualPrices.map((price) => price.id);

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

@@ -3,13 +3,10 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
-import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -18,19 +15,19 @@ import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
-export type DocumentPageViewProps = {
+export type DocumentPageComponentProps = {
   params: {
     id: string;
   };
   team?: Team;
 };
 
-export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
+export default async function DocumentPageComponent({ params, team }: DocumentPageComponentProps) {
   const { id } = params;
 
   const documentId = Number(id);
 
-  const documentRootPath = formatDocumentsPath(team?.url);
+  const documentRootPath = team ? `/t/${team.url}/documents` : '/documents';
 
   if (!documentId || Number.isNaN(documentId)) {
     redirect(documentRootPath);
@@ -41,38 +38,20 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
   const document = await getDocumentById({
     id: documentId,
     userId: user.id,
-    teamId: team?.id,
   }).catch(() => null);
 
   if (!document || !document.documentData) {
     redirect(documentRootPath);
   }
 
-  const { documentData, documentMeta } = document;
-
-  if (documentMeta?.password) {
-    const key = DOCUMENSO_ENCRYPTION_KEY;
-
-    if (!key) {
-      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
-    }
-
-    const securePassword = Buffer.from(
-      symmetricDecrypt({
-        key,
-        data: documentMeta.password,
-      }),
-    ).toString('utf-8');
-
-    documentMeta.password = securePassword;
-  }
+  const { documentData } = document;
 
   const [recipients, fields] = await Promise.all([
-    getRecipientsForDocument({
+    await getRecipientsForDocument({
       documentId,
       userId: user.id,
     }),
-    getFieldsForDocument({
+    await getFieldsForDocument({
       documentId,
       userId: user.id,
     }),
@@ -108,7 +87,6 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
           className="mt-8"
           document={document}
           user={user}
-          documentMeta={documentMeta}
           recipients={recipients}
           fields={fields}
           documentData={documentData}
@@ -118,14 +96,9 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
 
       {document.status === InternalDocumentStatus.COMPLETED && (
         <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer
-            document={document}
-            key={documentData.id}
-            documentMeta={documentMeta}
-            documentData={documentData}
-          />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
         </div>
       )}
     </div>
   );
-};
+}

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

@@ -4,8 +4,8 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import type { DocumentData, DocumentMeta, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -29,7 +29,6 @@ export type EditDocumentFormProps = {
   user: User;
   document: DocumentWithData;
   recipients: Recipient[];
-  documentMeta: DocumentMeta | null;
   fields: Field[];
   documentData: DocumentData;
   documentRootPath: string;
@@ -43,7 +42,6 @@ export const EditDocumentForm = ({
   document,
   recipients,
   fields,
-  documentMeta,
   user: _user,
   documentData,
   documentRootPath,
@@ -60,8 +58,6 @@ export const EditDocumentForm = ({
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
   const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
   const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
-  const { mutateAsync: setPasswordForDocument } =
-    trpc.document.setPasswordForDocument.useMutation();
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     title: {
@@ -151,17 +147,14 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message, timezone, dateFormat, redirectUrl } = data.meta;
+    const { subject, message } = data.email;
 
     try {
       await sendDocument({
         documentId: document.id,
-        meta: {
+        email: {
           subject,
           message,
-          dateFormat,
-          timezone,
-          redirectUrl,
         },
       });
 
@@ -183,13 +176,6 @@ export const EditDocumentForm = ({
     }
   };
 
-  const onPasswordSubmit = async (password: string) => {
-    await setPasswordForDocument({
-      documentId: document.id,
-      password,
-    });
-  };
-
   const currentDocumentFlow = documentFlow[step];
 
   return (
@@ -199,13 +185,7 @@ export const EditDocumentForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer
-            key={documentData.id}
-            documentData={documentData}
-            document={document}
-            password={documentMeta?.password}
-            onPasswordSubmit={onPasswordSubmit}
-          />
+          <LazyPDFViewer key={documentData.id} documentData={documentData} />
         </CardContent>
       </Card>
 
@@ -221,9 +201,9 @@ export const EditDocumentForm = ({
             <AddTitleFormPartial
               key={recipients.length}
               documentFlow={documentFlow.title}
-              document={document}
               recipients={recipients}
               fields={fields}
+              document={document}
               onSubmit={onAddTitleFormSubmit}
             />
 

apps/web/src/app/(dashboard)/documents/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { DocumentPageView } from './document-page-view';
+import DocumentPageComponent from './document-page-component';
 
 export type DocumentPageProps = {
   params: {
@@ -7,5 +7,5 @@ export type DocumentPageProps = {
 };
 
 export default function DocumentPage({ params }: DocumentPageProps) {
-  return <DocumentPageView params={params} />;
+  return <DocumentPageComponent params={params} />;
 }

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

@@ -10,7 +10,6 @@ import * as z from 'zod';
 
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import type { Team } from '@documenso/prisma/client';
 import { type Document, type Recipient, SigningStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -40,11 +39,8 @@ import { StackAvatar } from '~/components/(dashboard)/avatar/stack-avatar';
 const FORM_ID = 'resend-email';
 
 export type ResendDocumentActionItemProps = {
-  document: Document & {
-    team: Pick<Team, 'id' | 'url'> | null;
-  };
+  document: Document;
   recipients: Recipient[];
-  team?: Pick<Team, 'id' | 'url'>;
 };
 
 export const ZResendDocumentFormSchema = z.object({
@@ -58,17 +54,15 @@ export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema
 export const ResendDocumentActionItem = ({
   document,
   recipients,
-  team,
 }: ResendDocumentActionItemProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
 
   const [isOpen, setIsOpen] = useState(false);
   const isOwner = document.userId === session?.user?.id;
-  const isCurrentTeamDocument = team && document.team?.url === team.url;
 
   const isDisabled =
-    (!isOwner && !isCurrentTeamDocument) ||
+    !isOwner ||
     document.status !== 'PENDING' ||
     !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);
 
@@ -88,7 +82,7 @@ export const ResendDocumentActionItem = ({
 
   const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
     try {
-      await resendDocument({ documentId: document.id, recipients, teamId: team?.id });
+      await resendDocument({ documentId: document.id, recipients });
 
       toast({
         title: 'Document re-sent',
@@ -108,86 +102,88 @@ 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"
-                    >
-                      <FormLabel
-                        className={cn('my-2 flex items-center gap-2 font-normal', {
-                          'opacity-50': !value.includes(recipient.id),
-                        })}
+          <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"
                       >
-                        <StackAvatar
-                          key={recipient.id}
-                          type={getRecipientType(recipient)}
-                          fallbackText={recipientAbbreviation(recipient)}
-                        />
-                        {recipient.email}
-                      </FormLabel>
+                        <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>
 
-                      <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
+          <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
               </Button>
-            </DialogClose>
-
-            <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
-              Send reminder
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };

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

@@ -2,14 +2,14 @@
 
 import Link from 'next/link';
 
-import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
+import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
-import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+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';
@@ -19,12 +19,11 @@ export type DataTableActionButtonProps = {
   row: Document & {
     User: Pick<User, 'id' | 'name' | 'email'>;
     Recipient: Recipient[];
-    team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  teamUrl?: string;
 };
 
-export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps) => {
+export const DataTableActionButton = ({ row, teamUrl }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
 
@@ -40,10 +39,8 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
   const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const role = recipient?.role;
-  const isCurrentTeamDocument = team && row.team?.url === team.url;
 
-  const documentsPath = formatDocumentsPath(team?.url);
+  const documentsPath = formatDocumentsPath(teamUrl);
 
   const onDownloadClick = async () => {
     try {
@@ -52,7 +49,6 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
       if (!recipient) {
         document = await trpcClient.document.getDocumentById.query({
           id: row.id,
-          teamId: team?.id,
         });
       } else {
         document = await trpcClient.document.getDocumentByToken.query({
@@ -63,24 +59,33 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
       const documentData = document?.documentData;
 
       if (!documentData) {
-        throw Error('No document available');
+        return;
       }
 
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
+      const documentBytes = await getFile(documentData);
+
+      const blob = new Blob([documentBytes], {
+        type: 'application/pdf',
+      });
+
+      const link = window.document.createElement('a');
+      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
+
+      link.href = window.URL.createObjectURL(blob);
+      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
+
+      link.click();
+
+      window.URL.revokeObjectURL(link.href);
+    } catch (error) {
       toast({
         title: 'Something went wrong',
-        description: 'An error occurred while downloading your document.',
+        description: 'An error occurred while trying to download file.',
         variant: 'destructive',
       });
     }
   };
 
-  // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
-  if (recipient?.role === RecipientRole.CC && isComplete === false) {
-    return null;
-  }
-
   return match({
     isOwner,
     isRecipient,
@@ -88,48 +93,27 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
     isPending,
     isComplete,
     isSigned,
-    isCurrentTeamDocument,
   })
-    .with(
-      isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
-      () => (
-        <Button className="w-32" asChild>
-          <Link href={`${documentsPath}/${row.id}`}>
-            <Edit className="-ml-1 mr-2 h-4 w-4" />
-            Edit
-          </Link>
-        </Button>
-      ),
-    )
+    .with({ isOwner: true, isDraft: true }, () => (
+      <Button className="w-32" asChild>
+        <Link href={`${documentsPath}/${row.id}`}>
+          <Edit className="-ml-1 mr-2 h-4 w-4" />
+          Edit
+        </Link>
+      </Button>
+    ))
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
       <Button className="w-32" asChild>
         <Link href={`/sign/${recipient?.token}`}>
-          {match(role)
-            .with(RecipientRole.SIGNER, () => (
-              <>
-                <Pencil className="-ml-1 mr-2 h-4 w-4" />
-                Sign
-              </>
-            ))
-            .with(RecipientRole.APPROVER, () => (
-              <>
-                <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
-                Approve
-              </>
-            ))
-            .otherwise(() => (
-              <>
-                <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-                View
-              </>
-            ))}
+          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+          Sign
         </Link>
       </Button>
     ))
     .with({ isPending: true, isSigned: true }, () => (
       <Button className="w-32" disabled={true}>
-        <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-        View
+        <Pencil className="-ml-1 mr-2 inline h-4 w-4" />
+        Sign
       </Button>
     ))
     .with({ isComplete: true }, () => (

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

@@ -5,11 +5,9 @@ import { useState } from 'react';
 import Link from 'next/link';
 
 import {
-  CheckCircle,
   Copy,
   Download,
   Edit,
-  EyeIcon,
   Loader,
   MoreHorizontal,
   Pencil,
@@ -19,10 +17,10 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { DocumentStatus, RecipientRole } from '@documenso/prisma/client';
-import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -33,7 +31,6 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ResendDocumentActionItem } from './_action-items/resend-document';
 import { DeleteDocumentDialog } from './delete-document-dialog';
@@ -43,14 +40,12 @@ export type DataTableActionDropdownProps = {
   row: Document & {
     User: Pick<User, 'id' | 'name' | 'email'>;
     Recipient: Recipient[];
-    team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  teamUrl?: string;
 };
 
-export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
+export const DataTableActionDropdown = ({ row, teamUrl }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
-  const { toast } = useToast();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -68,39 +63,43 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const isDocumentDeletable = isOwner;
-  const isCurrentTeamDocument = team && row.team?.url === team.url;
 
-  const documentsPath = formatDocumentsPath(team?.url);
+  const documentsPath = formatDocumentsPath(teamUrl);
 
   const onDownloadClick = async () => {
-    try {
-      let document: DocumentWithData | null = null;
+    let document: DocumentWithData | null = null;
 
-      if (!recipient) {
-        document = await trpcClient.document.getDocumentById.query({
-          id: row.id,
-          teamId: team?.id,
-        });
-      } else {
-        document = await trpcClient.document.getDocumentByToken.query({
-          token: recipient.token,
-        });
-      }
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
-      toast({
-        title: 'Something went wrong',
-        description: 'An error occurred while downloading your document.',
-        variant: 'destructive',
+    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');
+    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
   };
 
   const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');
@@ -114,34 +113,14 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        {recipient && recipient?.role !== RecipientRole.CC && (
-          <DropdownMenuItem disabled={!recipient || isComplete} asChild>
-            <Link href={`/sign/${recipient?.token}`}>
-              {recipient?.role === RecipientRole.VIEWER && (
-                <>
-                  <EyeIcon className="mr-2 h-4 w-4" />
-                  View
-                </>
-              )}
+        <DropdownMenuItem disabled={!recipient || isComplete} asChild>
+          <Link href={`/sign/${recipient?.token}`}>
+            <Pencil className="mr-2 h-4 w-4" />
+            Sign
+          </Link>
+        </DropdownMenuItem>
 
-              {recipient?.role === RecipientRole.SIGNER && (
-                <>
-                  <Pencil className="mr-2 h-4 w-4" />
-                  Sign
-                </>
-              )}
-
-              {recipient?.role === RecipientRole.APPROVER && (
-                <>
-                  <CheckCircle className="mr-2 h-4 w-4" />
-                  Approve
-                </>
-              )}
-            </Link>
-          </DropdownMenuItem>
-        )}
-
-        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
+        <DropdownMenuItem disabled={!isOwner || isComplete} asChild>
           <Link href={`${documentsPath}/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
@@ -170,7 +149,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
 
         <DropdownMenuLabel>Share</DropdownMenuLabel>
 
-        <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} team={team} />
+        <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} />
 
         <DocumentShareButton
           documentId={row.id}
@@ -200,7 +179,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           id={row.id}
           open={isDuplicateDialogOpen}
           onOpenChange={setDuplicateDialogOpen}
-          team={team}
+          teamUrl={teamUrl}
         />
       )}
     </DropdownMenu>

apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx

@@ -3,9 +3,9 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { parseToNumberArray } from '@documenso/lib/utils/params';
 import { trpc } from '@documenso/trpc/react';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+import { Combobox } from '@documenso/ui/primitives/combobox';
 
 type DataTableSenderFilterProps = {
   teamId: number;
@@ -18,7 +18,7 @@ export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) =>
 
   const isMounted = useIsMounted();
 
-  const senderIds = parseToIntegerArray(searchParams?.get('senderIds') ?? '');
+  const senderIds = parseToNumberArray(searchParams?.get('senderIds') ?? '');
 
   const { data, isInitialLoading } = trpc.team.getTeamMembers.useQuery({
     teamId,
@@ -46,7 +46,7 @@ export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) =>
   };
 
   return (
-    <MultiSelectCombobox
+    <Combobox
       emptySelectionPlaceholder={
         <p className="text-muted-foreground font-normal">
           <span className="text-muted-foreground/70">Sender:</span> All

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -7,7 +7,7 @@ import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { FindResultSet } from '@documenso/lib/types/find-result-set';
-import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -25,17 +25,16 @@ export type DocumentsDataTableProps = {
     Document & {
       Recipient: Recipient[];
       User: Pick<User, 'id' | 'name' | 'email'>;
-      team: Pick<Team, 'id' | 'url'> | null;
     }
   >;
   showSenderColumn?: boolean;
-  team?: Pick<Team, 'id' | 'url'>;
+  teamUrl?: string;
 };
 
 export const DocumentsDataTable = ({
   results,
   showSenderColumn,
-  team,
+  teamUrl,
 }: DocumentsDataTableProps) => {
   const { data: session } = useSession();
   const [isPending, startTransition] = useTransition();
@@ -91,8 +90,8 @@ export const DocumentsDataTable = ({
               (!row.original.deletedAt ||
                 row.original.status === ExtendedDocumentStatus.COMPLETED) && (
                 <div className="flex items-center gap-x-4">
-                  <DataTableActionButton team={team} row={row.original} />
-                  <DataTableActionDropdown team={team} row={row.original} />
+                  <DataTableActionButton teamUrl={teamUrl} row={row.original} />
+                  <DataTableActionDropdown teamUrl={teamUrl} row={row.original} />
                 </div>
               ),
           },

apps/web/src/app/(dashboard)/documents/documents-page-component.tsx

@@ -2,11 +2,9 @@ import Link from 'next/link';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
-import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 import type { GetStatsInput } from '@documenso/lib/server-only/document/get-stats';
 import { getStats } from '@documenso/lib/server-only/document/get-stats';
-import { parseToIntegerArray } from '@documenso/lib/utils/params';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { parseToNumberArray } from '@documenso/lib/utils/params';
 import type { Team, TeamEmail } from '@documenso/prisma/client';
 import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@@ -14,7 +12,10 @@ import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import { isPeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
+import {
+  type PeriodSelectorValue,
+  isPeriodSelectorValue,
+} from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 import { DocumentsDataTable } from './data-table';
@@ -22,7 +23,7 @@ import { DataTableSenderFilter } from './data-table-sender-filter';
 import { EmptyDocumentState } from './empty-state';
 import { UploadDocument } from './upload-document';
 
-export type DocumentsPageViewProps = {
+export type DocumentsPageComponentProps = {
   searchParams?: {
     status?: ExtendedDocumentStatus;
     period?: PeriodSelectorValue;
@@ -33,30 +34,33 @@ export type DocumentsPageViewProps = {
   team?: Team & { teamEmail?: TeamEmail | null };
 };
 
-export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPageViewProps) => {
+export default async function DocumentsPageComponent({
+  searchParams = {},
+  team,
+}: DocumentsPageComponentProps) {
   const { user } = await getRequiredServerComponentSession();
 
   const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
   const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
-  const senderIds = parseToIntegerArray(searchParams.senderIds ?? '');
-  const currentTeam = team ? { id: team.id, url: team.url } : undefined;
+  const documentsPath = team ? `/t/${team.url}/documents` : '/documents';
+  const senderIds = parseToNumberArray(searchParams.senderIds ?? '');
 
-  const getStatOptions: GetStatsInput = {
-    user,
-    period,
-  };
+  let teamStatOptions: GetStatsInput['team'] = undefined;
 
   if (team) {
-    getStatOptions.team = {
+    teamStatOptions = {
       teamId: team.id,
       teamEmail: team.teamEmail?.email,
       senderIds,
     };
   }
 
-  const stats = await getStats(getStatOptions);
+  const stats = await getStats({
+    user,
+    team: teamStatOptions,
+  });
 
   const results = await findDocuments({
     userId: user.id,
@@ -81,12 +85,12 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
       params.delete('page');
     }
 
-    return `${formatDocumentsPath(team?.url)}?${params.toString()}`;
+    return `${documentsPath}?${params.toString()}`;
   };
 
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <UploadDocument team={currentTeam} />
+      <UploadDocument team={team ? { id: team.id, url: team.url } : undefined} />
 
       <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
         <div className="flex flex-row items-center">
@@ -102,7 +106,7 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
         </div>
 
         <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-          <Tabs value={status} className="overflow-x-auto">
+          <Tabs defaultValue={status} className="overflow-x-auto">
             <TabsList>
               {[
                 ExtendedDocumentStatus.INBOX,
@@ -111,17 +115,12 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
                 ExtendedDocumentStatus.DRAFT,
                 ExtendedDocumentStatus.ALL,
               ].map((value) => (
-                <TabsTrigger
-                  key={value}
-                  className="hover:text-foreground min-w-[60px]"
-                  value={value}
-                  asChild
-                >
+                <TabsTrigger key={value} className="min-w-[60px]" value={value} asChild>
                   <Link href={getTabHref(value)} scroll={false}>
                     <DocumentStatus status={value} />
 
                     {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 inline-block opacity-50">
+                      <span className="ml-1 hidden opacity-50 md:inline-block">
                         {Math.min(stats[value], 99)}
                         {stats[value] > 99 && '+'}
                       </span>
@@ -145,11 +144,11 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
           <DocumentsDataTable
             results={results}
             showSenderColumn={team !== undefined}
-            team={currentTeam}
+            teamUrl={team?.url}
           />
         )}
         {results.count === 0 && <EmptyDocumentState status={status} />}
       </div>
     </div>
   );
-};
+}

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

@@ -1,7 +1,6 @@
 import { useRouter } from 'next/navigation';
 
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import type { Team } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -18,21 +17,20 @@ type DuplicateDocumentDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
-  team?: Pick<Team, 'id' | 'url'>;
+  teamUrl?: string;
 };
 
 export const DuplicateDocumentDialog = ({
   id,
   open,
   onOpenChange,
-  team,
+  teamUrl,
 }: DuplicateDocumentDialogProps) => {
   const router = useRouter();
   const { toast } = useToast();
 
   const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
     id,
-    teamId: team?.id,
   });
 
   const documentData = document?.documentData
@@ -42,7 +40,7 @@ export const DuplicateDocumentDialog = ({
       }
     : undefined;
 
-  const documentsPath = formatDocumentsPath(team?.url);
+  const documentsPath = formatDocumentsPath(teamUrl);
 
   const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({
@@ -61,7 +59,7 @@ export const DuplicateDocumentDialog = ({
 
   const onDuplicate = async () => {
     try {
-      await duplicateDocument({ id, teamId: team?.id });
+      await duplicateDocument({ id });
     } catch {
       toast({
         title: 'Something went wrong',

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

@@ -1,16 +1,10 @@
-import type { Metadata } from 'next';
-
-import type { DocumentsPageViewProps } from './documents-page-view';
-import { DocumentsPageView } from './documents-page-view';
+import type { DocumentsPageComponentProps } from './documents-page-component';
+import DocumentsPageComponent from './documents-page-component';
 
 export type DocumentsPageProps = {
-  searchParams?: DocumentsPageViewProps['searchParams'];
-};
-
-export const metadata: Metadata = {
-  title: 'Documents',
+  searchParams?: DocumentsPageComponentProps['searchParams'];
 };
 
 export default function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  return <DocumentsPageView searchParams={searchParams} />;
+  return <DocumentsPageComponent searchParams={searchParams} />;
 }

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -10,10 +10,8 @@ import { useSession } from 'next-auth/react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -31,7 +29,6 @@ export type UploadDocumentProps = {
 export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
-
   const { data: session } = useSession();
 
   const { toast } = useToast();
@@ -42,18 +39,6 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
 
   const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
-  const disabledMessage = useMemo(() => {
-    if (remaining.documents === 0) {
-      return team
-        ? 'Document upload disabled due to unpaid invoices'
-        : 'You have reached your document limit.';
-    }
-
-    if (!session?.user.emailVerified) {
-      return 'Verify your email to upload documents.';
-    }
-  }, [remaining.documents, session?.user.emailVerified, team]);
-
   const onFileDrop = async (file: File) => {
     try {
       setIsLoading(true);
@@ -83,7 +68,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
         timestamp: new Date().toISOString(),
       });
 
-      router.push(`${formatDocumentsPath(team?.url)}/${id}`);
+      router.push(team?.id !== undefined ? `/t/${team.url}/documents/${id}` : `/documents/${id}`);
     } catch (error) {
       console.error(error);
 
@@ -105,23 +90,12 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
     }
   };
 
-  const onFileDropRejected = () => {
-    toast({
-      title: 'Your document failed to upload.',
-      description: `File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
-      duration: 5000,
-      variant: 'destructive',
-    });
-  };
-
   return (
     <div className={cn('relative', className)}>
       <DocumentDropzone
-        className="h-[min(400px,50vh)]"
+        className="min-h-[40vh]"
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
-        disabledMessage={disabledMessage}
         onDrop={onFileDrop}
-        onDropRejected={onFileDropRejected}
       />
 
       <div className="absolute -bottom-6 right-0">

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

@@ -2,7 +2,6 @@
 
 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 () => {
@@ -12,6 +11,6 @@ export const createBillingPortal = async () => {
 
   return getPortalSession({
     customerId: stripeCustomer.id,
-    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
+    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
   });
 };

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

@@ -3,7 +3,6 @@
 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';
 
@@ -28,13 +27,13 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
   if (foundSubscription) {
     return getPortalSession({
       customerId: stripeCustomer.id,
-      returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
+      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
     });
   }
 
   return getCheckoutSession({
     customerId: stripeCustomer.id,
     priceId,
-    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
+    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
   });
 };

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

@@ -1,13 +1,11 @@
-import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
 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 { getPrimaryAccountPlanPrices } from '@documenso/ee/server-only/stripe/get-primary-account-plan-prices';
+import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
 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';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { type Stripe } from '@documenso/lib/server-only/stripe';
@@ -19,10 +17,6 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 import { BillingPlans } from './billing-plans';
 import { BillingPortalButton } from './billing-portal-button';
 
-export const metadata: Metadata = {
-  title: 'Billing',
-};
-
 export default async function BillingSettingsPage() {
   let { user } = await getRequiredServerComponentSession();
 
@@ -37,23 +31,23 @@ export default async function BillingSettingsPage() {
     user = await getStripeCustomerByUser(user).then((result) => result.user);
   }
 
-  const [subscriptions, prices, primaryAccountPlanPrices] = await Promise.all([
+  const [subscriptions, prices, individualPrices] = await Promise.all([
     getSubscriptionsByUserId({ userId: user.id }),
-    getPricesByInterval({ plan: STRIPE_PLAN_TYPE.COMMUNITY }),
-    getPrimaryAccountPlanPrices(),
+    getPricesByInterval({ type: 'individual' }),
+    getPricesByType('individual'),
   ]);
 
-  const primaryAccountPlanPriceIds = primaryAccountPlanPrices.map(({ id }) => id);
+  const individualPriceIds = individualPrices.map(({ id }) => id);
 
   let subscriptionProduct: Stripe.Product | null = null;
 
-  const primaryAccountPlanSubscriptions = subscriptions.filter(({ priceId }) =>
-    primaryAccountPlanPriceIds.includes(priceId),
+  const individualUserSubscriptions = subscriptions.filter(({ priceId }) =>
+    individualPriceIds.includes(priceId),
   );
 
   const subscription =
-    primaryAccountPlanSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
-    primaryAccountPlanSubscriptions[0];
+    individualUserSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
+    individualUserSubscriptions[0];
 
   if (subscription?.priceId) {
     subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(

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

@@ -1,20 +1,17 @@
-import type { Metadata } from 'next';
-
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { ProfileForm } from '~/components/forms/profile';
 
-export const metadata: Metadata = {
-  title: 'Profile',
-};
-
 export default async function ProfileSettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 
   return (
     <div>
-      <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
+      <h3 className="text-2xl font-semibold">Profile</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
+
+      <hr className="my-4" />
 
       <ProfileForm user={user} className="max-w-xl" />
     </div>

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

@@ -1,23 +0,0 @@
-import type { Metadata } from 'next';
-
-import { UserSecurityActivityDataTable } from './user-security-activity-data-table';
-
-export const metadata: Metadata = {
-  title: 'Security activity',
-};
-
-export default function SettingsSecurityActivityPage() {
-  return (
-    <div>
-      <h3 className="text-2xl font-semibold">Security activity</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        View all recent security activity related to your account.
-      </p>
-
-      <hr className="my-4" />
-
-      <UserSecurityActivityDataTable />
-    </div>
-  );
-}

apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx

@@ -1,156 +0,0 @@
-'use client';
-
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-
-import type { DateTimeFormatOptions } from 'luxon';
-import { DateTime } from 'luxon';
-import { UAParser } from 'ua-parser-js';
-
-import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { USER_SECURITY_AUDIT_LOG_MAP } from '@documenso/lib/constants/auth';
-import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
-import { trpc } from '@documenso/trpc/react';
-import { DataTable } from '@documenso/ui/primitives/data-table';
-import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { TableCell } from '@documenso/ui/primitives/table';
-
-import { LocaleDate } from '~/components/formatter/locale-date';
-
-const dateFormat: DateTimeFormatOptions = {
-  ...DateTime.DATETIME_SHORT,
-  hourCycle: 'h12',
-};
-
-export const UserSecurityActivityDataTable = () => {
-  const parser = new UAParser();
-
-  const pathname = usePathname();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const updateSearchParams = useUpdateSearchParams();
-
-  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
-    Object.fromEntries(searchParams ?? []),
-  );
-
-  const { data, isLoading, isInitialLoading, isLoadingError } =
-    trpc.profile.findUserSecurityAuditLogs.useQuery(
-      {
-        page: parsedSearchParams.page,
-        perPage: parsedSearchParams.perPage,
-      },
-      {
-        keepPreviousData: true,
-      },
-    );
-
-  const onPaginationChange = (page: number, perPage: number) => {
-    updateSearchParams({
-      page,
-      perPage,
-    });
-  };
-
-  const results = data ?? {
-    data: [],
-    perPage: 10,
-    currentPage: 1,
-    totalPages: 1,
-  };
-
-  return (
-    <DataTable
-      columns={[
-        {
-          header: 'Date',
-          accessorKey: 'createdAt',
-          cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
-        },
-        {
-          header: 'Device',
-          cell: ({ row }) => {
-            if (!row.original.userAgent) {
-              return 'N/A';
-            }
-
-            parser.setUA(row.original.userAgent);
-
-            const result = parser.getResult();
-
-            let output = result.os.name;
-
-            if (!output) {
-              return 'N/A';
-            }
-
-            if (result.os.version) {
-              output += ` (${result.os.version})`;
-            }
-
-            return output;
-          },
-        },
-        {
-          header: 'Browser',
-          cell: ({ row }) => {
-            if (!row.original.userAgent) {
-              return 'N/A';
-            }
-
-            parser.setUA(row.original.userAgent);
-
-            const result = parser.getResult();
-
-            return result.browser.name ?? 'N/A';
-          },
-        },
-        {
-          header: 'IP Address',
-          accessorKey: 'ipAddress',
-          cell: ({ row }) => row.original.ipAddress ?? 'N/A',
-        },
-        {
-          header: 'Action',
-          accessorKey: 'type',
-          cell: ({ row }) => USER_SECURITY_AUDIT_LOG_MAP[row.original.type],
-        },
-      ]}
-      data={results.data}
-      perPage={results.perPage}
-      currentPage={results.currentPage}
-      totalPages={results.totalPages}
-      onPaginationChange={onPaginationChange}
-      hasFilters={parsedSearchParams.page !== undefined || parsedSearchParams.perPage !== undefined}
-      onClearFilters={() => router.push(pathname ?? '/')}
-      error={{
-        enable: isLoadingError,
-      }}
-      skeleton={{
-        enable: isLoading && isInitialLoading,
-        rows: 3,
-        component: (
-          <>
-            <TableCell>
-              <Skeleton className="h-4 w-20 rounded-full" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="h-4 w-12 rounded-full" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="h-4 w-12 rounded-full" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="h-4 w-12 rounded-full" />
-            </TableCell>
-            <TableCell>
-              <Skeleton className="h-4 w-12 rounded-full" />
-            </TableCell>
-          </>
-        ),
-      }}
-    >
-      {(table) => <DataTablePagination table={table} />}
-    </DataTable>
-  );
-};

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

@@ -1,100 +1,46 @@
-import type { Metadata } from 'next';
-import Link from 'next/link';
-
-import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
 import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
 import { PasswordForm } from '~/components/forms/password';
 
-export const metadata: Metadata = {
-  title: 'Security',
-};
-
 export default async function SecuritySettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 
   return (
     <div>
-      <SettingsHeader
-        title="Security"
-        subtitle="Here you can manage your password and security settings."
-      />
+      <h3 className="text-2xl font-semibold">Security</h3>
 
-      {user.identityProvider === 'DOCUMENSO' ? (
-        <div>
-          <PasswordForm user={user} />
+      <p className="text-muted-foreground mt-2 text-sm">
+        Here you can manage your password and security settings.
+      </p>
 
-          <hr className="border-border/50 mt-6" />
+      <hr className="my-4" />
 
-          <Alert
-            className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-            variant="neutral"
-          >
-            <div className="mb-4 sm:mb-0">
-              <AlertTitle>Two factor authentication</AlertTitle>
+      <PasswordForm user={user} className="max-w-xl" />
 
-              <AlertDescription className="mr-4">
-                Create one-time passwords that serve as a secondary authentication method for
-                confirming your identity when requested during the sign-in process.
-              </AlertDescription>
-            </div>
+      <hr className="mb-4 mt-8" />
 
-            <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
-          </Alert>
+      <h4 className="text-lg font-medium">Two Factor Authentication</h4>
 
-          {user.twoFactorEnabled && (
-            <Alert
-              className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-              variant="neutral"
-            >
-              <div className="mb-4 sm:mb-0">
-                <AlertTitle>Recovery codes</AlertTitle>
+      <p className="text-muted-foreground mt-2 text-sm">
+        Add and manage your two factor security settings to add an extra layer of security to your
+        account!
+      </p>
 
-                <AlertDescription className="mr-4">
-                  Two factor authentication recovery codes are used to access your account in the
-                  event that you lose access to your authenticator app.
-                </AlertDescription>
-              </div>
+      <div className="mt-4 max-w-xl">
+        <h5 className="font-medium">Two-factor methods</h5>
 
-              <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
-            </Alert>
-          )}
+        <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
+      </div>
+
+      {user.twoFactorEnabled && (
+        <div className="mt-4 max-w-xl">
+          <h5 className="font-medium">Recovery methods</h5>
+
+          <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
         </div>
-      ) : (
-        <Alert className="p-6" variant="neutral">
-          <AlertTitle>
-            Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
-          </AlertTitle>
-
-          <AlertDescription>
-            To update your password, enable two-factor authentication, and manage other security
-            settings, please go to your {IDENTITY_PROVIDER_NAME[user.identityProvider]} account
-            settings.
-          </AlertDescription>
-        </Alert>
       )}
-
-      <Alert
-        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
-        variant="neutral"
-      >
-        <div className="mb-4 mr-4 sm:mb-0">
-          <AlertTitle>Recent activity</AlertTitle>
-
-          <AlertDescription className="mr-2">
-            View all recent security activity related to your account.
-          </AlertDescription>
-        </div>
-
-        <Button asChild>
-          <Link href="/settings/security/activity">View activity</Link>
-        </Button>
-      </Alert>
     </div>
   );
 }

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

@@ -1,15 +1,14 @@
 'use client';
 
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 
 import { trpc } from '@documenso/trpc/react';
-import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { CreateTeamDialog } from '~/components/(teams)/dialogs/create-team-dialog';
-import { UserSettingsTeamsPageDataTable } from '~/components/(teams)/tables/user-settings-teams-page-data-table';
+import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
+import CreateTeamDialog from '~/components/(teams)/dialogs/create-team-dialog';
+import UserTeamsPageDataTable from '~/components/(teams)/tables/user-teams-page-data-table';
 
-import { TeamEmailUsage } from './team-email-usage';
+import TeamEmailUsage from './team-email-usage';
 import { TeamInvitations } from './team-invitations';
 
 export default function TeamsSettingsPage() {
@@ -21,19 +20,27 @@ export default function TeamsSettingsPage() {
         <CreateTeamDialog />
       </SettingsHeader>
 
-      <UserSettingsTeamsPageDataTable />
+      <UserTeamsPageDataTable />
 
-      <div className="mt-8 space-y-8">
-        <AnimatePresence>
-          {teamEmail && (
-            <AnimateGenericFadeInOut>
-              <TeamEmailUsage teamEmail={teamEmail} />
-            </AnimateGenericFadeInOut>
-          )}
-        </AnimatePresence>
+      <AnimatePresence>
+        {teamEmail && (
+          <motion.section
+            initial={{
+              opacity: 0,
+            }}
+            animate={{
+              opacity: 1,
+            }}
+            exit={{
+              opacity: 0,
+            }}
+          >
+            <TeamEmailUsage teamEmail={teamEmail} />
+          </motion.section>
+        )}
+      </AnimatePresence>
 
-        <TeamInvitations />
-      </div>
+      <TeamInvitations />
     </div>
   );
 }

apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react';
 
 import type { TeamEmail } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -21,7 +20,7 @@ export type TeamEmailUsageProps = {
   teamEmail: TeamEmail & { team: { name: string; url: string } };
 };
 
-export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
+export default function TeamEmailUsage({ teamEmail }: TeamEmailUsageProps) {
   const [open, setOpen] = useState(false);
 
   const { toast } = useToast();
@@ -47,23 +46,22 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
     });
 
   return (
-    <Alert variant="neutral" className="flex flex-row items-center justify-between p-6">
-      <div>
-        <AlertTitle className="mb-0">Team Email</AlertTitle>
-        <AlertDescription>
-          <p>
-            Your email is currently being used by team{' '}
-            <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
-            ).
-          </p>
+    <div className="mt-8 flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
+      <div className="text-sm">
+        <h3 className="text-base font-medium">Team email</h3>
 
-          <p className="mt-1">They have permission on your behalf to:</p>
+        <p className="text-muted-foreground">
+          Your email is currently being used by team{' '}
+          <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
+          ).
+        </p>
 
-          <ul className="mt-0.5 list-inside list-disc">
-            <li>Display your name and email in documents</li>
-            <li>View all documents sent to your account</li>
-          </ul>
-        </AlertDescription>
+        <p className="text-muted-foreground mt-1">They have permission on your behalf to:</p>
+
+        <ul className="text-muted-foreground mt-0.5 list-inside list-disc">
+          <li>Display your name and email in documents</li>
+          <li>View all documents sent to your account</li>
+        </ul>
       </div>
 
       <Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
@@ -71,7 +69,7 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
           <Button variant="destructive">Revoke access</Button>
         </DialogTrigger>
 
-        <DialogContent position="center">
+        <DialogContent>
           <DialogHeader>
             <DialogTitle>Are you sure?</DialogTitle>
 
@@ -83,7 +81,7 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
           </DialogHeader>
 
           <fieldset disabled={isDeletingTeamEmail}>
-            <DialogFooter>
+            <DialogFooter className="space-x-4">
               <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
                 Cancel
               </Button>
@@ -100,6 +98,6 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
           </fieldset>
         </DialogContent>
       </Dialog>
-    </Alert>
+    </div>
   );
-};
+}

apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { BellIcon } from 'lucide-react';
 
 import { formatTeamUrl } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import {
   Dialog,
@@ -25,58 +23,66 @@ export const TeamInvitations = () => {
   return (
     <AnimatePresence>
       {data && data.length > 0 && !isInitialLoading && (
-        <AnimateGenericFadeInOut>
-          <Alert variant="secondary">
-            <div className="flex h-full flex-row items-center p-2">
-              <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
+        <motion.div
+          className="mt-8 flex flex-row items-center justify-between rounded-md bg-blue-50 p-6"
+          initial={{
+            opacity: 0,
+          }}
+          animate={{
+            opacity: 1,
+          }}
+          exit={{
+            opacity: 0,
+          }}
+        >
+          {/* Todo: Teams - Extract into `Alerts` component? */}
+          <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
 
-              <AlertDescription className="mr-2">
-                You have <strong>{data.length}</strong> pending team invitation
-                {data.length > 1 ? 's' : ''}.
-              </AlertDescription>
+          <div className="text-sm text-blue-700">
+            You have <strong>{data.length}</strong> pending team invitation
+            {data.length > 1 ? 's' : ''}.
+          </div>
 
-              <Dialog>
-                <DialogTrigger asChild>
-                  <button className="ml-auto text-sm font-medium text-blue-700 hover:text-blue-600">
-                    View invites
-                  </button>
-                </DialogTrigger>
+          <Dialog>
+            <DialogTrigger asChild>
+              <button className="ml-auto text-sm font-medium text-blue-700 hover:text-blue-600">
+                View invites
+              </button>
+            </DialogTrigger>
 
-                <DialogContent position="center">
-                  <DialogHeader>
-                    <DialogTitle>Pending invitations</DialogTitle>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Pending invitations</DialogTitle>
 
-                    <DialogDescription className="mt-4">
-                      You have {data.length} pending team invitation{data.length > 1 ? 's' : ''}.
-                    </DialogDescription>
-                  </DialogHeader>
+                <DialogDescription className="mt-4">
+                  You have {data.length} pending team invitation{data.length > 1 ? 's' : ''}.
+                </DialogDescription>
+              </DialogHeader>
 
-                  <ul className="-mx-6 -mb-6 max-h-[80vh] divide-y overflow-auto px-6 pb-6 xl:max-h-[70vh]">
-                    {data.map((invitation) => (
-                      <li key={invitation.teamId}>
-                        <AvatarWithText
-                          className="w-full max-w-none py-4"
-                          avatarFallback={invitation.team.name.slice(0, 1)}
-                          primaryText={
-                            <span className="text-foreground/80 font-semibold">
-                              {invitation.team.name}
-                            </span>
-                          }
-                          secondaryText={formatTeamUrl(invitation.team.url)}
-                          rightSideComponent={
-                            <div className="ml-auto">
-                              <AcceptTeamInvitationButton teamId={invitation.team.id} />
-                            </div>
-                          }
-                        />
-                      </li>
-                    ))}
-                  </ul>
-                </DialogContent>
-              </Dialog>
-            </div>
-          </Alert>
-        </AnimateGenericFadeInOut>
+              <ul className="-mx-6 -mb-6 max-h-[80vh] divide-y overflow-auto px-6 pb-6 xl:max-h-[70vh]">
+                {data.map((invitation) => (
+                  <li key={invitation.teamId}>
+                    <AvatarWithText
+                      className="w-full max-w-none py-4"
+                      avatarFallback={invitation.team.name.slice(0, 1)}
+                      primaryText={
+                        <span className="text-foreground/80 font-semibold">
+                          {invitation.team.name}
+                        </span>
+                      }
+                      secondaryText={formatTeamUrl(invitation.team.url)}
+                      rightSideComponent={
+                        <div className="ml-auto">
+                          <AcceptTeamInvitationButton teamId={invitation.team.id} />
+                        </div>
+                      }
+                    />
+                  </li>
+                ))}
+              </ul>
+            </DialogContent>
+          </Dialog>
+        </motion.div>
       )}
     </AnimatePresence>
   );

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -28,7 +28,6 @@ export type EditTemplateFormProps = {
   recipients: Recipient[];
   fields: Field[];
   documentData: DocumentData;
-  templateRootPath: string;
 };
 
 type EditTemplateStep = 'signers' | 'fields';
@@ -41,7 +40,6 @@ export const EditTemplateForm = ({
   fields,
   user: _user,
   documentData,
-  templateRootPath,
 }: EditTemplateFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
@@ -100,7 +98,7 @@ export const EditTemplateForm = ({
         duration: 5000,
       });
 
-      router.push(templateRootPath);
+      router.push('/templates');
     } catch (err) {
       toast({
         title: 'Error',

apps/web/src/app/(dashboard)/templates/[id]/page.tsx

@@ -1,10 +1,81 @@
 import React from 'react';
 
-import type { TemplatePageViewProps } from './template-page-view';
-import { TemplatePageView } from './template-page-view';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
 
-type TemplatePageProps = Pick<TemplatePageViewProps, 'params'>;
+import { ChevronLeft } from 'lucide-react';
 
-export default function TemplatePage({ params }: TemplatePageProps) {
-  return <TemplatePageView params={params} />;
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
+import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+
+import { TemplateType } from '~/components/formatter/template-type';
+
+import { EditTemplateForm } from './edit-template';
+
+export type TemplatePageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default async function TemplatePage({ params }: TemplatePageProps) {
+  const { id } = params;
+
+  const templateId = Number(id);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    redirect('/documents');
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData) {
+    redirect('/documents');
+  }
+
+  const { templateDocumentData } = template;
+
+  const [templateRecipients, templateFields] = await Promise.all([
+    getRecipientsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+    getFieldsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+  ]);
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Templates
+      </Link>
+
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+        {template.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
+      </div>
+
+      <EditTemplateForm
+        className="mt-8"
+        template={template}
+        user={user}
+        recipients={templateRecipients}
+        fields={templateFields}
+        documentData={templateDocumentData}
+      />
+    </div>
+  );
 }

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
-
-import { ChevronLeft } from 'lucide-react';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
-import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-import type { Team } from '@documenso/prisma/client';
-
-import { TemplateType } from '~/components/formatter/template-type';
-
-import { EditTemplateForm } from './edit-template';
-
-export type TemplatePageViewProps = {
-  params: {
-    id: string;
-  };
-  team?: Team;
-};
-
-export const TemplatePageView = async ({ params, team }: TemplatePageViewProps) => {
-  const { id } = params;
-
-  const templateId = Number(id);
-  const templateRootPath = formatTemplatesPath(team?.url);
-
-  if (!templateId || Number.isNaN(templateId)) {
-    redirect(templateRootPath);
-  }
-
-  const { user } = await getRequiredServerComponentSession();
-
-  const template = await getTemplateById({
-    id: templateId,
-    userId: user.id,
-  }).catch(() => null);
-
-  if (!template || !template.templateDocumentData) {
-    redirect(templateRootPath);
-  }
-
-  const { templateDocumentData } = template;
-
-  const [templateRecipients, templateFields] = await Promise.all([
-    getRecipientsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-    getFieldsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-  ]);
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Templates
-      </Link>
-
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
-        {template.title}
-      </h1>
-
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
-      </div>
-
-      <EditTemplateForm
-        className="mt-8"
-        template={template}
-        user={user}
-        recipients={templateRecipients}
-        fields={templateFields}
-        documentData={templateDocumentData}
-        templateRootPath={templateRootPath}
-      />
-    </div>
-  );
-};

apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx

@@ -21,15 +21,9 @@ import { DuplicateTemplateDialog } from './duplicate-template-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Template;
-  templateRootPath: string;
-  teamId?: number;
 };
 
-export const DataTableActionDropdown = ({
-  row,
-  templateRootPath,
-  teamId,
-}: DataTableActionDropdownProps) => {
+export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -40,7 +34,6 @@ export const DataTableActionDropdown = ({
   }
 
   const isOwner = row.userId === session.user.id;
-  const isTeamTemplate = row.teamId === teamId;
 
   return (
     <DropdownMenu>
@@ -51,25 +44,20 @@ export const DataTableActionDropdown = ({
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
-          <Link href={`${templateRootPath}/${row.id}`}>
+        <DropdownMenuItem disabled={!isOwner} asChild>
+          <Link href={`/templates/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
           </Link>
         </DropdownMenuItem>
 
-        <DropdownMenuItem
-          disabled={!isOwner && !isTeamTemplate}
-          onClick={() => setDuplicateDialogOpen(true)}
-        >
+        {/* <DropdownMenuItem disabled={!isOwner} onClick={async () => onDuplicateButtonClick(row.id)}> */}
+        <DropdownMenuItem disabled={!isOwner} onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem
-          disabled={!isOwner && !isTeamTemplate}
-          onClick={() => setDeleteDialogOpen(true)}
-        >
+        <DropdownMenuItem disabled={!isOwner} onClick={() => setDeleteDialogOpen(true)}>
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
         </DropdownMenuItem>
@@ -77,7 +65,6 @@ export const DataTableActionDropdown = ({
 
       <DuplicateTemplateDialog
         id={row.id}
-        teamId={teamId}
         open={isDuplicateDialogOpen}
         onOpenChange={setDuplicateDialogOpen}
       />

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -2,16 +2,13 @@
 
 import { useState, useTransition } from 'react';
 
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { AlertTriangle, Loader, Plus } from 'lucide-react';
+import { Loader, Plus } from 'lucide-react';
 
-import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { Template } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -28,9 +25,6 @@ type TemplatesDataTableProps = {
   perPage: number;
   page: number;
   totalPages: number;
-  documentRootPath: string;
-  templateRootPath: string;
-  teamId?: number;
 };
 
 export const TemplatesDataTable = ({
@@ -38,15 +32,10 @@ export const TemplatesDataTable = ({
   perPage,
   page,
   totalPages,
-  documentRootPath,
-  templateRootPath,
-  teamId,
 }: TemplatesDataTableProps) => {
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
 
-  const { remaining } = useLimits();
-
   const router = useRouter();
 
   const { toast } = useToast();
@@ -76,7 +65,7 @@ export const TemplatesDataTable = ({
         duration: 5000,
       });
 
-      router.push(`${documentRootPath}/${id}`);
+      router.push(`/documents/${id}`);
     } catch (err) {
       toast({
         title: 'Error',
@@ -88,19 +77,6 @@ export const TemplatesDataTable = ({
 
   return (
     <div className="relative">
-      {remaining.documents === 0 && (
-        <Alert variant="warning" className="mb-4">
-          <AlertTriangle className="h-4 w-4" />
-          <AlertTitle>Document Limit Exceeded!</AlertTitle>
-          <AlertDescription className="mt-2">
-            You have reached your document limit.{' '}
-            <Link className="underline underline-offset-4" href="/settings/billing">
-              Upgrade your account to continue!
-            </Link>
-          </AlertDescription>
-        </Alert>
-      )}
-
       <DataTable
         columns={[
           {
@@ -126,7 +102,7 @@ export const TemplatesDataTable = ({
               return (
                 <div className="flex items-center gap-x-4">
                   <Button
-                    disabled={isRowLoading || remaining.documents === 0}
+                    disabled={isRowLoading}
                     loading={isRowLoading}
                     onClick={async () => {
                       setLoadingStates((prev) => ({ ...prev, [row.original.id]: true }));
@@ -137,12 +113,7 @@ export const TemplatesDataTable = ({
                     {!isRowLoading && <Plus className="-ml-1 mr-2 h-4 w-4" />}
                     Use Template
                   </Button>
-
-                  <DataTableActionDropdown
-                    row={row.original}
-                    teamId={teamId}
-                    templateRootPath={templateRootPath}
-                  />
+                  <DataTableActionDropdown row={row.original} />
                 </div>
               );
             },

apps/web/src/app/(dashboard)/templates/delete-template-dialog.tsx

@@ -35,15 +35,20 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
 
       onOpenChange(false);
     },
-    onError: () => {
+  });
+
+  const onDeleteTemplate = async () => {
+    try {
+      await deleteTemplate({ id });
+    } catch {
       toast({
         title: 'Something went wrong',
         description: 'This template could not be deleted at this time. Please try again.',
         variant: 'destructive',
         duration: 7500,
       });
-    },
-  });
+    }
+  };
 
   return (
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
@@ -58,18 +63,20 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
         </DialogHeader>
 
         <DialogFooter>
-          <Button
-            type="button"
-            variant="secondary"
-            disabled={isLoading}
-            onClick={() => onOpenChange(false)}
-          >
-            Cancel
-          </Button>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
 
-          <Button type="button" loading={isLoading} onClick={async () => deleteTemplate({ id })}>
-            Delete
-          </Button>
+            <Button type="button" loading={isLoading} onClick={onDeleteTemplate} className="flex-1">
+              Delete
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/web/src/app/(dashboard)/templates/duplicate-template-dialog.tsx

@@ -14,14 +14,12 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type DuplicateTemplateDialogProps = {
   id: number;
-  teamId?: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
 export const DuplicateTemplateDialog = ({
   id,
-  teamId,
   open,
   onOpenChange,
 }: DuplicateTemplateDialogProps) => {
@@ -42,15 +40,22 @@ export const DuplicateTemplateDialog = ({
 
         onOpenChange(false);
       },
-      onError: () => {
-        toast({
-          title: 'Error',
-          description: 'An error occurred while duplicating template.',
-          variant: 'destructive',
-        });
-      },
     });
 
+  const onDuplicate = async () => {
+    try {
+      await duplicateTemplate({
+        templateId: id,
+      });
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while duplicating template.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
@@ -61,27 +66,20 @@ export const DuplicateTemplateDialog = ({
         </DialogHeader>
 
         <DialogFooter>
-          <Button
-            type="button"
-            disabled={isLoading}
-            variant="secondary"
-            onClick={() => onOpenChange(false)}
-          >
-            Cancel
-          </Button>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
 
-          <Button
-            type="button"
-            loading={isLoading}
-            onClick={async () =>
-              duplicateTemplate({
-                templateId: id,
-                teamId,
-              })
-            }
-          >
-            Duplicate
-          </Button>
+            <Button type="button" loading={isLoading} onClick={onDuplicate} className="flex-1">
+              Duplicate
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -43,14 +43,8 @@ const ZCreateTemplateFormSchema = z.object({
 
 type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;
 
-type NewTemplateDialogProps = {
-  teamId?: number;
-  templateRootPath: string;
-};
-
-export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialogProps) => {
+export const NewTemplateDialog = () => {
   const router = useRouter();
-
   const { data: session } = useSession();
   const { toast } = useToast();
 
@@ -105,7 +99,6 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
       });
 
       const { id } = await createTemplate({
-        teamId,
         title: values.name ? values.name : file.name,
         templateDocumentDataId,
       });
@@ -119,7 +112,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
 
       setShowNewTemplateDialog(false);
 
-      router.push(`${templateRootPath}/${id}`);
+      void router.push(`/templates/${id}`);
     } catch {
       toast({
         title: 'Something went wrong',

apps/web/src/app/(dashboard)/templates/page.tsx

@@ -1,18 +1,52 @@
 import React from 'react';
 
-import type { Metadata } from 'next';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTemplates } from '@documenso/lib/server-only/template/get-templates';
 
-import { TemplatesPageView } from './templates-page-view';
-import type { TemplatesPageViewProps } from './templates-page-view';
+import { TemplatesDataTable } from './data-table-templates';
+import { EmptyTemplateState } from './empty-state';
+import { NewTemplateDialog } from './new-template-dialog';
 
 type TemplatesPageProps = {
-  searchParams?: TemplatesPageViewProps['searchParams'];
+  searchParams?: {
+    page?: number;
+    perPage?: number;
+  };
 };
 
-export const metadata: Metadata = {
-  title: 'Templates',
-};
+export default async function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+  const { user } = await getRequiredServerComponentSession();
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
 
-export default function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
-  return <TemplatesPageView searchParams={searchParams} />;
+  const { templates, totalPages } = await getTemplates({
+    userId: user.id,
+    page: page,
+    perPage: perPage,
+  });
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex items-baseline justify-between">
+        <h1 className="mb-5 mt-2 truncate text-2xl font-semibold md:text-3xl">Templates</h1>
+
+        <div>
+          <NewTemplateDialog />
+        </div>
+      </div>
+
+      <div className="relative">
+        {templates.length > 0 ? (
+          <TemplatesDataTable
+            templates={templates}
+            page={page}
+            perPage={perPage}
+            totalPages={totalPages}
+          />
+        ) : (
+          <EmptyTemplateState />
+        )}
+      </div>
+    </div>
+  );
 }

apps/web/src/app/(dashboard)/templates/templates-page-view.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
-import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
-import type { Team } from '@documenso/prisma/client';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-
-import { TemplatesDataTable } from './data-table-templates';
-import { EmptyTemplateState } from './empty-state';
-import { NewTemplateDialog } from './new-template-dialog';
-
-export type TemplatesPageViewProps = {
-  searchParams?: {
-    page?: number;
-    perPage?: number;
-  };
-  team?: Team;
-};
-
-export const TemplatesPageView = async ({ searchParams = {}, team }: TemplatesPageViewProps) => {
-  const { user } = await getRequiredServerComponentSession();
-  const page = Number(searchParams.page) || 1;
-  const perPage = Number(searchParams.perPage) || 10;
-
-  const documentRootPath = formatDocumentsPath(team?.url);
-  const templateRootPath = formatTemplatesPath(team?.url);
-
-  const { templates, totalPages } = await findTemplates({
-    userId: user.id,
-    teamId: team?.id,
-    page: page,
-    perPage: perPage,
-  });
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex items-baseline justify-between">
-        <div className="flex flex-row items-center">
-          {team && (
-            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-              <AvatarFallback className="text-xs text-gray-400">
-                {team.name.slice(0, 1)}
-              </AvatarFallback>
-            </Avatar>
-          )}
-
-          <h1 className="truncate text-2xl font-semibold md:text-3xl">Templates</h1>
-        </div>
-
-        <div>
-          <NewTemplateDialog templateRootPath={templateRootPath} teamId={team?.id} />
-        </div>
-      </div>
-
-      <div className="relative mt-5">
-        {templates.length > 0 ? (
-          <TemplatesDataTable
-            templates={templates}
-            page={page}
-            perPage={perPage}
-            totalPages={totalPages}
-            documentRootPath={documentRootPath}
-            templateRootPath={templateRootPath}
-            teamId={team?.id}
-          />
-        ) : (
-          <EmptyTemplateState />
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -3,8 +3,6 @@ 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';
@@ -39,7 +37,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
     ),
   ]);
 
-  const baseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
+  const baseUrl = process.env.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 type { Metadata } from 'next';
+import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
-import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
+import { APP_BASE_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: [`/share/${slug}/opengraph`],
+      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
     },
     twitter: {
       site: '@documenso',
       card: 'summary_large_image',
-      images: [`/share/${slug}/opengraph`],
+      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
       description: 'I just signed with Documenso!',
     },
   } satisfies Metadata;
@@ -35,5 +35,5 @@ export default function SharePage() {
     return null;
   }
 
-  redirect(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001');
+  redirect(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
 }

apps/web/src/app/(signing)/sign/[token]/complete/document-preview-button.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { FileSearch } from 'lucide-react';
-
-import type { DocumentData } from '@documenso/prisma/client';
-import DocumentDialog from '@documenso/ui/components/document/document-dialog';
-import type { ButtonProps } from '@documenso/ui/primitives/button';
-import { Button } from '@documenso/ui/primitives/button';
-
-export type DocumentPreviewButtonProps = {
-  className?: string;
-  documentData: DocumentData;
-} & ButtonProps;
-
-export const DocumentPreviewButton = ({
-  className,
-  documentData,
-  ...props
-}: DocumentPreviewButtonProps) => {
-  const [showDialog, setShowDialog] = useState(false);
-
-  return (
-    <>
-      <Button
-        className={className}
-        variant="outline"
-        onClick={() => setShowDialog((visible) => !visible)}
-        {...props}
-      >
-        <FileSearch className="mr-2 h-5 w-5" strokeWidth={1.7} />
-        View Original Document
-      </Button>
-
-      <DocumentDialog documentData={documentData} open={showDialog} onOpenChange={setShowDialog} />
-    </>
-  );
-};

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

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
-
-export type SigningLayoutProps = {
-  children: React.ReactNode;
-};
-
-export default function SigningLayout({ children }: SigningLayoutProps) {
-  return (
-    <div>
-      {children}
-
-      <RefreshOnFocus />
-    </div>
-  );
-}

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

@@ -10,15 +10,11 @@ import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/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 { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/client';
+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 { truncateTitle } from '~/helpers/truncate-title';
-
-import { DocumentPreviewButton } from './document-preview-button';
-
 export type CompletedSigningPageProps = {
   params: {
     token?: string;
@@ -40,8 +36,6 @@ export default async function CompletedSigningPage({
     return notFound();
   }
 
-  const truncatedTitle = truncateTitle(document.title);
-
   const { documentData } = document;
 
   const [fields, recipient] = await Promise.all([
@@ -94,11 +88,8 @@ export default async function CompletedSigningPage({
           ))}
 
         <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-          You have
-          {recipient.role === RecipientRole.SIGNER && ' signed '}
-          {recipient.role === RecipientRole.VIEWER && ' viewed '}
-          {recipient.role === RecipientRole.APPROVER && ' approved '}
-          <span className="mt-1.5 block">"{truncatedTitle}"</span>
+          You have signed
+          <span className="mt-1.5 block">"{document.title}"</span>
         </h2>
 
         {match({ status: document.status, deletedAt: document.deletedAt })
@@ -122,20 +113,12 @@ export default async function CompletedSigningPage({
         <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
           <DocumentShareButton documentId={document.id} token={recipient.token} />
 
-          {document.status === DocumentStatus.COMPLETED ? (
-            <DocumentDownloadButton
-              className="flex-1"
-              fileName={document.title}
-              documentData={documentData}
-              disabled={document.status !== DocumentStatus.COMPLETED}
-            />
-          ) : (
-            <DocumentPreviewButton
-              className="text-[11px]"
-              title="Signatures will appear once the document has been completed"
-              documentData={documentData}
-            />
-          )}
+          <DocumentDownloadButton
+            className="flex-1"
+            fileName={document.title}
+            documentData={documentData}
+            disabled={document.status !== DocumentStatus.COMPLETED}
+          />
         </div>
 
         {isLoggedIn ? (

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -6,13 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import {
-  DEFAULT_DOCUMENT_DATE_FORMAT,
-  convertToLocalSystemFormat,
-} from '@documenso/lib/constants/date-formats';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import type { Recipient } from '@documenso/prisma/client';
-import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -21,16 +16,9 @@ import { SigningFieldContainer } from './signing-field-container';
 export type DateFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
-  dateFormat?: string | null;
-  timezone?: string | null;
 };
 
-export const DateField = ({
-  field,
-  recipient,
-  dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
-  timezone = DEFAULT_DOCUMENT_TIME_ZONE,
-}: DateFieldProps) => {
+export const DateField = ({ field, recipient }: DateFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -47,18 +35,12 @@ export const DateField = ({
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
-  const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
-
-  const isDifferentTime = field.inserted && localDateString !== field.customText;
-
-  const tooltipText = `"${field.customText}" will appear on the document as it has a timezone of "${timezone}".`;
-
   const onSign = async () => {
     try {
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        value: '',
       });
 
       startTransition(() => router.refresh());
@@ -93,13 +75,7 @@ export const DateField = ({
   };
 
   return (
-    <SigningFieldContainer
-      field={field}
-      onSign={onSign}
-      onRemove={onRemove}
-      type="Date"
-      tooltipText={isDifferentTime ? tooltipText : undefined}
-    >
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
@@ -111,7 +87,7 @@ export const DateField = ({
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{localDateString}</p>
+        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
       )}
     </SigningFieldContainer>
   );

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import type { Recipient } from '@documenso/prisma/client';
-import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -79,7 +79,7 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

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

@@ -9,7 +9,7 @@ import { useForm } from 'react-hook-form';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { type Document, type Field, type Recipient, RecipientRole } from '@documenso/prisma/client';
+import type { Document, Field, Recipient } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
@@ -26,16 +26,14 @@ export type SigningFormProps = {
   document: Document;
   recipient: Recipient;
   fields: Field[];
-  redirectUrl?: string | null;
 };
 
-export const SigningForm = ({ document, recipient, fields, redirectUrl }: SigningFormProps) => {
+export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
   const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
-
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
   const { mutateAsync: completeDocumentWithToken } =
@@ -50,11 +48,6 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
     return sortFieldsByPosition(fields.filter((field) => !field.inserted));
   }, [fields]);
 
-  const fieldsValidated = () => {
-    setValidateUninsertedFields(true);
-    validateFieldsInserted(fields);
-  };
-
   const onFormSubmit = async () => {
     setValidateUninsertedFields(true);
 
@@ -75,7 +68,7 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
       timestamp: new Date().toISOString(),
     });
 
-    redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${recipient.token}/complete`);
+    router.push(`/sign/${recipient.token}/complete`);
   };
 
   return (
@@ -97,114 +90,68 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
 
       <fieldset
         disabled={isSubmitting}
-        className={cn(
-          'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
-        )}
+        className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}
       >
         <div className={cn('flex flex-1 flex-col')}>
-          <h3 className="text-foreground text-2xl font-semibold">
-            {recipient.role === RecipientRole.VIEWER && 'View Document'}
-            {recipient.role === RecipientRole.SIGNER && 'Sign Document'}
-            {recipient.role === RecipientRole.APPROVER && 'Approve Document'}
-          </h3>
+          <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
 
-          {recipient.role === RecipientRole.VIEWER ? (
-            <>
-              <p className="text-muted-foreground mt-2 text-sm">
-                Please mark as viewed to complete
-              </p>
+          <p className="text-muted-foreground mt-2 text-sm">
+            Please review the document before signing.
+          </p>
 
-              <hr className="border-border mb-8 mt-4" />
+          <hr className="border-border mb-8 mt-4" />
 
-              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
-                <div className="flex flex-1 flex-col gap-y-4" />
-                <div className="flex flex-col gap-4 md:flex-row">
-                  <Button
-                    type="button"
-                    className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
-                    variant="secondary"
-                    size="lg"
-                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
-                    onClick={() => router.back()}
-                  >
-                    Cancel
-                  </Button>
+          <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+            <div className="flex flex-1 flex-col gap-y-4">
+              <div>
+                <Label htmlFor="full-name">Full Name</Label>
 
-                  <SignDialog
-                    isSubmitting={isSubmitting}
-                    onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
-                    fields={fields}
-                    fieldsValidated={fieldsValidated}
-                    role={recipient.role}
-                  />
-                </div>
+                <Input
+                  type="text"
+                  id="full-name"
+                  className="bg-background mt-2"
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value.trimStart())}
+                />
               </div>
-            </>
-          ) : (
-            <>
-              <p className="text-muted-foreground mt-2 text-sm">
-                Please review the document before signing.
-              </p>
 
-              <hr className="border-border mb-8 mt-4" />
+              <div>
+                <Label htmlFor="Signature">Signature</Label>
 
-              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
-                <div className="flex flex-1 flex-col gap-y-4">
-                  <div>
-                    <Label htmlFor="full-name">Full Name</Label>
-
-                    <Input
-                      type="text"
-                      id="full-name"
-                      className="bg-background mt-2"
-                      value={fullName}
-                      onChange={(e) => setFullName(e.target.value.trimStart())}
+                <Card className="mt-2" gradient degrees={-120}>
+                  <CardContent className="p-0">
+                    <SignaturePad
+                      className="h-44 w-full"
+                      defaultValue={signature ?? undefined}
+                      onChange={(value) => {
+                        setSignature(value);
+                      }}
                     />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="Signature">Signature</Label>
-
-                    <Card className="mt-2" gradient degrees={-120}>
-                      <CardContent className="p-0">
-                        <SignaturePad
-                          className="h-44 w-full"
-                          disabled={isSubmitting}
-                          defaultValue={signature ?? undefined}
-                          onChange={(value) => {
-                            setSignature(value);
-                          }}
-                        />
-                      </CardContent>
-                    </Card>
-                  </div>
-                </div>
-
-                <div className="flex flex-col gap-4 md:flex-row">
-                  <Button
-                    type="button"
-                    className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
-                    variant="secondary"
-                    size="lg"
-                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
-                    onClick={() => router.back()}
-                  >
-                    Cancel
-                  </Button>
-
-                  <SignDialog
-                    isSubmitting={isSubmitting}
-                    onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
-                    fields={fields}
-                    fieldsValidated={fieldsValidated}
-                    role={recipient.role}
-                  />
-                </div>
+                  </CardContent>
+                </Card>
               </div>
-            </>
-          )}
+            </div>
+
+            <div className="flex flex-col gap-4 md:flex-row">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                size="lg"
+                disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                onClick={() => router.back()}
+              >
+                Cancel
+              </Button>
+
+              <SignDialog
+                isSubmitting={isSubmitting}
+                onSignatureComplete={handleSubmit(onFormSubmit)}
+                document={document}
+                fields={fields}
+              />
+            </div>
+          </div>
         </div>
       </fieldset>
     </form>

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

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
-import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+import { GetTeamsResponse, getTeams } from '@documenso/lib/server-only/team/get-teams';
 
 import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
 import { NextAuthProvider } from '~/providers/next-auth';

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import type { Recipient } from '@documenso/prisma/client';
-import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
@@ -98,7 +98,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Name">
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
@@ -118,7 +118,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
             <span className="text-muted-foreground">({recipient.email})</span>
           </DialogTitle>
 
-          <div>
+          <div className="py-4">
             <Label htmlFor="signature">Full Name</Label>
 
             <Input

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

@@ -1,27 +1,19 @@
-import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
-import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
-import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 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 { 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 { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
-import { truncateTitle } from '~/helpers/truncate-title';
-
 import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
@@ -41,26 +33,20 @@ 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, requestMetadata }).catch(() => null),
+    viewedDocument({ token }).catch(() => null),
   ]);
 
   if (!document || !document.documentData || !recipient) {
     return notFound();
   }
 
-  const truncatedTitle = truncateTitle(document.title);
-
-  const { documentData, documentMeta } = document;
+  const { documentData } = document;
 
   const { user } = await getServerComponentSession();
 
@@ -68,26 +54,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     document.status === DocumentStatus.COMPLETED ||
     recipient.signingStatus === SigningStatus.SIGNED
   ) {
-    documentMeta?.redirectUrl
-      ? redirect(documentMeta.redirectUrl)
-      : redirect(`/sign/${token}/complete`);
-  }
-
-  if (documentMeta?.password) {
-    const key = DOCUMENSO_ENCRYPTION_KEY;
-
-    if (!key) {
-      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
-    }
-
-    const securePassword = Buffer.from(
-      symmetricDecrypt({
-        key,
-        data: documentMeta.password,
-      }),
-    ).toString('utf-8');
-
-    documentMeta.password = securePassword;
+    redirect(`/sign/${token}/complete`);
   }
 
   const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
@@ -110,15 +77,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     >
       <div className="mx-auto w-full max-w-screen-xl">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-          {truncatedTitle}
+          {document.title}
         </h1>
 
         <div className="mt-2.5 flex items-center gap-x-6">
           <p className="text-muted-foreground">
-            {document.User.name} ({document.User.email}) has invited you to{' '}
-            {recipient.role === RecipientRole.VIEWER && 'view'}
-            {recipient.role === RecipientRole.SIGNER && 'sign'}
-            {recipient.role === RecipientRole.APPROVER && 'approve'} this document.
+            {document.User.name} ({document.User.email}) has invited you to sign this document.
           </p>
         </div>
 
@@ -128,22 +92,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
             gradient
           >
             <CardContent className="p-2">
-              <LazyPDFViewer
-                key={documentData.id}
-                documentData={documentData}
-                document={document}
-                password={documentMeta?.password}
-              />
+              <LazyPDFViewer key={documentData.id} documentData={documentData} />
             </CardContent>
           </Card>
 
           <div className="col-span-12 lg:col-span-5 xl:col-span-4">
-            <SigningForm
-              document={document}
-              recipient={recipient}
-              fields={fields}
-              redirectUrl={documentMeta?.redirectUrl}
-            />
+            <SigningForm document={document} recipient={recipient} fields={fields} />
           </div>
         </div>
 
@@ -157,13 +111,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
                 <NameField key={field.id} field={field} recipient={recipient} />
               ))
               .with(FieldType.DATE, () => (
-                <DateField
-                  key={field.id}
-                  field={field}
-                  recipient={recipient}
-                  dateFormat={documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
-                  timezone={documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
-                />
+                <DateField key={field.id} field={field} recipient={recipient} />
               ))
               .with(FieldType.EMAIL, () => (
                 <EmailField key={field.id} field={field} recipient={recipient} />

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

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
-import type { Document, Field } from '@documenso/prisma/client';
-import { RecipientRole } from '@documenso/prisma/client';
+import { Document, Field } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -10,56 +9,41 @@ import {
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 
-import { truncateTitle } from '~/helpers/truncate-title';
-
 export type SignDialogProps = {
   isSubmitting: boolean;
   document: Document;
   fields: Field[];
-  fieldsValidated: () => void | Promise<void>;
   onSignatureComplete: () => void | Promise<void>;
-  role: RecipientRole;
 };
 
 export const SignDialog = ({
   isSubmitting,
   document,
   fields,
-  fieldsValidated,
   onSignatureComplete,
-  role,
 }: SignDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
-  const truncatedTitle = truncateTitle(document.title);
+
   const isComplete = fields.every((field) => field.inserted);
 
   return (
-    <Dialog open={showDialog && isComplete} onOpenChange={setShowDialog}>
+    <Dialog open={showDialog} onOpenChange={setShowDialog}>
       <DialogTrigger asChild>
         <Button
           className="w-full"
           type="button"
           size="lg"
-          onClick={fieldsValidated}
+          disabled={!isComplete}
           loading={isSubmitting}
         >
-          {isComplete ? 'Complete' : 'Next field'}
+          Complete
         </Button>
       </DialogTrigger>
       <DialogContent>
         <div className="text-center">
-          <div className="text-foreground text-xl font-semibold">
-            {role === RecipientRole.VIEWER && 'Mark Document as Viewed'}
-            {role === RecipientRole.SIGNER && 'Sign Document'}
-            {role === RecipientRole.APPROVER && 'Approve Document'}
-          </div>
+          <div className="text-xl font-semibold text-neutral-800">Sign Document</div>
           <div className="text-muted-foreground mx-auto w-4/5 py-2 text-center">
-            {role === RecipientRole.VIEWER &&
-              `You are about to finish viewing "${truncatedTitle}". Are you sure?`}
-            {role === RecipientRole.SIGNER &&
-              `You are about to finish signing "${truncatedTitle}". Are you sure?`}
-            {role === RecipientRole.APPROVER &&
-              `You are about to finish approving "${truncatedTitle}". Are you sure?`}
+            You are about to finish signing "{document.title}". Are you sure?
           </div>
         </div>
 
@@ -83,9 +67,7 @@ export const SignDialog = ({
               loading={isSubmitting}
               onClick={onSignatureComplete}
             >
-              {role === RecipientRole.VIEWER && 'Mark as Viewed'}
-              {role === RecipientRole.SIGNER && 'Sign'}
-              {role === RecipientRole.APPROVER && 'Approve'}
+              Sign
             </Button>
           </div>
         </DialogFooter>

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -127,7 +127,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Signature">
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -2,9 +2,8 @@
 
 import React from 'react';
 
-import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 export type SignatureFieldProps = {
   field: FieldWithSignature;
@@ -12,8 +11,6 @@ export type SignatureFieldProps = {
   children: React.ReactNode;
   onSign?: () => Promise<void> | void;
   onRemove?: () => Promise<void> | void;
-  type?: 'Date' | 'Email' | 'Name' | 'Signature';
-  tooltipText?: string | null;
 };
 
 export const SigningFieldContainer = ({
@@ -22,8 +19,6 @@ export const SigningFieldContainer = ({
   onSign,
   onRemove,
   children,
-  type,
-  tooltipText,
 }: SignatureFieldProps) => {
   const onSignFieldClick = async () => {
     if (field.inserted) {
@@ -51,22 +46,7 @@ export const SigningFieldContainer = ({
         />
       )}
 
-      {type === 'Date' && field.inserted && !loading && (
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
-            <button
-              className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
-              onClick={onRemoveSignedFieldClick}
-            >
-              Remove
-            </button>
-          </TooltipTrigger>
-
-          {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
-        </Tooltip>
-      )}
-
-      {type !== 'Date' && field.inserted && !loading && (
+      {field.inserted && !loading && (
         <button
           className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
           onClick={onRemoveSignedFieldClick}

apps/web/src/app/(teams)/layout.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { getServerSession } from 'next-auth';
+
+import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
+import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+
+import { Header } from '~/components/(dashboard)/layout/header';
+import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+export type AuthenticatedDashboardLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default async function AuthenticatedTeamsDashboardLayout({
+  children,
+}: AuthenticatedDashboardLayoutProps) {
+  const session = await getServerSession(NEXT_AUTH_OPTIONS);
+
+  if (!session) {
+    redirect('/signin');
+  }
+
+  const [{ user }, teams] = await Promise.all([
+    getRequiredServerComponentSession(),
+    getTeams({ userId: session.user.id }),
+  ]);
+
+  return (
+    <NextAuthProvider session={session}>
+      <LimitsProvider>
+        <Header user={user} teams={teams} />
+
+        <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
+
+        <RefreshOnFocus />
+      </LimitsProvider>
+    </NextAuthProvider>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
 
-import { DocumentPageView } from '~/app/(dashboard)/documents/[id]/document-page-view';
+import DocumentPageComponent from '~/app/(dashboard)/documents/[id]/document-page-component';
 
 export type DocumentPageProps = {
   params: {
@@ -16,5 +16,5 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
   const { user } = await getRequiredServerComponentSession();
   const team = await getTeamByUrl({ userId: user.id, teamUrl });
 
-  return <DocumentPageView params={params} team={team} />;
+  return <DocumentPageComponent params={params} team={team} />;
 }

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/sent/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+export default function DocumentSentPage() {
+  return (
+    <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+      <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+
+      <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
+        Loading Document...
+      </h1>
+    </div>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx

@@ -1,14 +1,14 @@
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
 
-import type { DocumentsPageViewProps } from '~/app/(dashboard)/documents/documents-page-view';
-import { DocumentsPageView } from '~/app/(dashboard)/documents/documents-page-view';
+import type { DocumentsPageComponentProps } from '~/app/(dashboard)/documents/documents-page-component';
+import DocumentsPageComponent from '~/app/(dashboard)/documents/documents-page-component';
 
 export type TeamsDocumentPageProps = {
   params: {
     teamUrl: string;
   };
-  searchParams?: DocumentsPageViewProps['searchParams'];
+  searchParams?: DocumentsPageComponentProps['searchParams'];
 };
 
 export default async function TeamsDocumentPage({
@@ -18,8 +18,7 @@ export default async function TeamsDocumentPage({
   const { teamUrl } = params;
 
   const { user } = await getRequiredServerComponentSession();
-
   const team = await getTeamByUrl({ userId: user.id, teamUrl });
 
-  return <DocumentsPageView searchParams={searchParams} team={team} />;
+  return <DocumentsPageComponent searchParams={searchParams} team={team} />;
 }

apps/web/src/app/(teams)/t/[teamUrl]/layout-billing-banner.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { AlertTriangle } from 'lucide-react';
-import { match } from 'ts-pattern';
-
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import type { TeamMemberRole } from '@documenso/prisma/client';
-import { type Subscription, SubscriptionStatus } from '@documenso/prisma/client';
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type LayoutBillingBannerProps = {
-  subscription: Subscription;
-  teamId: number;
-  userRole: TeamMemberRole;
-};
-
-export const LayoutBillingBanner = ({
-  subscription,
-  teamId,
-  userRole,
-}: LayoutBillingBannerProps) => {
-  const { toast } = useToast();
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { mutateAsync: createBillingPortal, isLoading } =
-    trpc.team.createBillingPortal.useMutation();
-
-  const handleCreatePortal = async () => {
-    try {
-      const sessionUrl = await createBillingPortal({ teamId });
-
-      window.open(sessionUrl, '_blank');
-
-      setIsOpen(false);
-    } catch (err) {
-      toast({
-        title: 'Something went wrong',
-        description:
-          'We are unable to proceed to the billing portal at this time. Please try again, or contact support.',
-        variant: 'destructive',
-        duration: 10000,
-      });
-    }
-  };
-
-  if (subscription.status === SubscriptionStatus.ACTIVE) {
-    return null;
-  }
-
-  return (
-    <>
-      <div
-        className={cn({
-          'bg-yellow-200 text-yellow-900 dark:bg-yellow-400':
-            subscription.status === SubscriptionStatus.PAST_DUE,
-          'bg-destructive text-destructive-foreground':
-            subscription.status === SubscriptionStatus.INACTIVE,
-        })}
-      >
-        <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 text-sm font-medium">
-          <div className="flex items-center">
-            <AlertTriangle className="mr-2.5 h-5 w-5" />
-
-            {match(subscription.status)
-              .with(SubscriptionStatus.PAST_DUE, () => 'Payment overdue')
-              .with(SubscriptionStatus.INACTIVE, () => 'Teams restricted')
-              .exhaustive()}
-          </div>
-
-          <Button
-            variant="ghost"
-            className={cn({
-              'text-yellow-900 hover:bg-yellow-100 hover:text-yellow-900 dark:hover:bg-yellow-500':
-                subscription.status === SubscriptionStatus.PAST_DUE,
-              'text-destructive-foreground hover:bg-destructive-foreground hover:text-white':
-                subscription.status === SubscriptionStatus.INACTIVE,
-            })}
-            disabled={isLoading}
-            onClick={() => setIsOpen(true)}
-            size="sm"
-          >
-            Resolve
-          </Button>
-        </div>
-      </div>
-
-      <Dialog open={isOpen} onOpenChange={(value) => !isLoading && setIsOpen(value)}>
-        <DialogContent>
-          <DialogTitle>Payment overdue</DialogTitle>
-
-          {match(subscription.status)
-            .with(SubscriptionStatus.PAST_DUE, () => (
-              <DialogDescription>
-                Your payment for teams is overdue. Please settle the payment to avoid any service
-                disruptions.
-              </DialogDescription>
-            ))
-            .with(SubscriptionStatus.INACTIVE, () => (
-              <DialogDescription>
-                Due to an unpaid invoice, your team has been restricted. Please settle the payment
-                to restore full access to your team.
-              </DialogDescription>
-            ))
-            .otherwise(() => null)}
-
-          {canExecuteTeamAction('MANAGE_BILLING', userRole) && (
-            <DialogFooter>
-              <Button loading={isLoading} onClick={handleCreatePortal}>
-                Resolve payment
-              </Button>
-            </DialogFooter>
-          )}
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};

apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-
-import { RedirectType, redirect } from 'next/navigation';
-
-import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
-import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { getTeams } from '@documenso/lib/server-only/team/get-teams';
-import { SubscriptionStatus } from '@documenso/prisma/client';
-
-import { Header } from '~/components/(dashboard)/layout/header';
-import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
-import { NextAuthProvider } from '~/providers/next-auth';
-
-import { LayoutBillingBanner } from './layout-billing-banner';
-
-export type AuthenticatedTeamsLayoutProps = {
-  children: React.ReactNode;
-  params: {
-    teamUrl: string;
-  };
-};
-
-export default async function AuthenticatedTeamsLayout({
-  children,
-  params,
-}: AuthenticatedTeamsLayoutProps) {
-  const { session, user } = await getServerComponentSession();
-
-  if (!session || !user) {
-    redirect('/signin');
-  }
-
-  const [getTeamsPromise, getTeamPromise] = await Promise.allSettled([
-    getTeams({ userId: user.id }),
-    getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl }),
-  ]);
-
-  if (getTeamPromise.status === 'rejected') {
-    redirect('/documents', RedirectType.replace);
-  }
-
-  const team = getTeamPromise.value;
-  const teams = getTeamsPromise.status === 'fulfilled' ? getTeamsPromise.value : [];
-
-  return (
-    <NextAuthProvider session={session}>
-      <LimitsProvider teamId={team.id}>
-        {team.subscription && team.subscription.status !== SubscriptionStatus.ACTIVE && (
-          <LayoutBillingBanner
-            subscription={team.subscription}
-            teamId={team.id}
-            userRole={team.currentTeamMember.role}
-          />
-        )}
-
-        <Header user={user} teams={teams} />
-
-        <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
-
-        <RefreshOnFocus />
-      </LimitsProvider>
-    </NextAuthProvider>
-  );
-}

apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx

@@ -3,13 +3,12 @@ import type Stripe from 'stripe';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { stripe } from '@documenso/lib/server-only/stripe';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-teams';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { TeamBillingInvoicesDataTable } from '~/components/(teams)/tables/team-billing-invoices-data-table';
-import { TeamBillingPortalButton } from '~/components/(teams)/team-billing-portal-button';
+import { BillingPortalButton } from '~/app/(dashboard)/settings/billing/billing-portal-button';
+import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
+import TeamBillingInvoicesDataTable from '~/components/(teams)/tables/team-billing-invoices-data-table';
 
 export type TeamsSettingsBillingPageProps = {
   params: {
@@ -18,16 +17,18 @@ export type TeamsSettingsBillingPageProps = {
 };
 
 export default async function TeamsSettingBillingPage({ params }: TeamsSettingsBillingPageProps) {
+  const { teamUrl } = params;
+
   const session = await getRequiredServerComponentSession();
 
-  const team = await getTeamByUrl({ userId: session.user.id, teamUrl: params.teamUrl });
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
 
-  const canManageBilling = canExecuteTeamAction('MANAGE_BILLING', team.currentTeamMember.role);
+  const isUserOwnerOfTeam = team.ownerUserId === session.user.id;
 
   let teamSubscription: Stripe.Subscription | null = null;
 
-  if (team.subscription) {
-    teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
+  if (team.subscriptionId) {
+    teamSubscription = await stripe.subscriptions.retrieve(team.subscriptionId);
   }
 
   const formatTeamSubscriptionDetails = (subscription: Stripe.Subscription | null) => {
@@ -65,12 +66,12 @@ export default async function TeamsSettingBillingPage({ params }: TeamsSettingsB
           {teamSubscription && (
             <div
               title={
-                canManageBilling
-                  ? 'Manage team subscription.'
-                  : 'You must be an admin of this team to manage billing.'
+                isUserOwnerOfTeam
+                  ? 'Manage your team subscription.'
+                  : 'You must be the owner of this team to directly manage the billing.'
               }
             >
-              <TeamBillingPortalButton teamId={team.id} />
+              <BillingPortalButton buttonProps={{ disabled: !isUserOwnerOfTeam }} />
             </div>
           )}
         </CardContent>