diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 000000000..f8b8e97aa --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,29 @@ +name: "Continuous Integration" + +on: + push: + branches: [ "feat/refresh" ] + pull_request: + branches: [ "feat/refresh" ] + +env: + HUSKY: 0 + +jobs: + build: + name: Build + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + fetch-depth: 2 + - name: Install Node.js + uses: actions/setup-node@v3 + with: + node-version: 18 + cache: npm + - name: Install dependencies + run: npm ci + - name: Build + run: npm run build diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100755 index 000000000..6610d88b5 --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npm run commitlint -- $1 diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 000000000..d24fdfc60 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npx lint-staged diff --git a/apps/marketing/content/blog/pre-seed.mdx b/apps/marketing/content/blog/pre-seed.mdx new file mode 100644 index 000000000..9042aaa9e --- /dev/null +++ b/apps/marketing/content/blog/pre-seed.mdx @@ -0,0 +1,36 @@ +--- +title: Announcing Pre-Seed and Open Metrics +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' +date: 2023-08-17 +tags: + - Funding + - Metrics + - Open Startup +--- + +Today I'm happy to announce that we closed a \$1.25M Pre-Seed round for Documenso, bringing our total funding to \$1.54M. The round actually closed last month, we just were sneaky about it. + +## Two more for the road (to open signing) +We're ecstatic to welcome [OSS Capital](https://twitter.com/osscapital) and especially [Joseph Jacks](https://twitter.com/JosephJacks_) to the inner circle of the open signing revolution. We're also fortunate to be joined by Orrick's very own [John Harrison](https://www.linkedin.com/in/john-harrison-a1213b9/) and his legal experience. For those who are wondering, yes, the round was, of course, signed using Documenso. + +## Open Source, Open Metrics +If you follow us, you know we're firmly committed to the open source values of openness and transparency. For us, this includes not only the code side of things but also the business. As we aim to build trust among our investors, customers, and partners, we want to be open about what's going on. We also want to allow everyone to learn from our data and choices, just as we did from so many other COSS (Commercial Open Source) startups. The term "Open Startup" isn't precisely defined (and probably will never be, just like startup). There is however a [great write-up](https://cal.com/blog/open-startup) about the basics by the founder of our favorite open source scheduling tool Cal.com. + +The two main takeaways are: + +- "Any Startup that shares its metrics as open as technically and operationally possible is an Open Startup." +- "Why should I care? Frankly speaking, Open Startups have a tough time screwing you over." + +The more open the culture, the less shady stuff is going on. While this may sound trivial, the implications are profound. A new generation of organizations, operating more ethically and responsibly simply because everything is out in the open. + +For us, there are two sides to being an Open Startup: + +- The company side: Sharing Financial KPIs like growth, funding, team structure, salary, internal processes, and tools. +- The product side: Sharing insights and data like usage, reach, and GitHub activity. + +Both sides aim to contribute to the global knowledge base of how startups work, specifically COSS startups. As we see more and more COSS, best practices and business insights should be broadly available to let the space mature. As we contribute code to the global community, we also contribute our business knowledge to help bring about even more COSS. + +Starting today, we're releasing a lot of our data as part of the Open Startup movement. You can find the juicy details on our funding and more here: [documen.so/open](https://documen.so/open) diff --git a/apps/marketing/content/blog/switching-from-slack-to-discord b/apps/marketing/content/blog/switching-from-slack-to-discord.mdx similarity index 84% rename from apps/marketing/content/blog/switching-from-slack-to-discord rename to apps/marketing/content/blog/switching-from-slack-to-discord.mdx index 3736505be..0e3d0e54d 100644 --- a/apps/marketing/content/blog/switching-from-slack-to-discord +++ b/apps/marketing/content/blog/switching-from-slack-to-discord.mdx @@ -1,13 +1,13 @@ --- title: Switching to Discord -description: Join us on documen.so/discord to share ideas, support, and memes. +description: The Documenso community is growing and we feel the need to have a more community and developer-friendly environment. We're switching to Discord. authorName: 'Flo Merian' authorImage: '/blog/blog-author-flo.jpeg' authorRole: 'Go-to-market' date: 2023-08-02 tags: - Announcement - - Community + - Community --- We’re switching to Discord. @@ -20,15 +20,15 @@ As the community grows (reached 2K stars on GitHub and 100 community members on The Documenso team is growing, too. [Lucas joined Timur](https://twitter.com/ElTimuro/status/1648608988391514112), then [Ephraim](https://twitter.com/documenso/status/1662418374243041280) and [David](https://github.com/dguyen) recently joined the journey. We want to stay in touch with the community as much as possible and avoid context-switching to focus on work, support, and fun. -We’re an open-source project and focus on building a great developer experience. So, when we thought of a Slack replacement, community- and developer-friendly, Discord was an obvious choice — not to mention that it would help us keep up with [OSS friends](https://documen.so/oss), too. +We’re an open-source project and focus on building a great developer experience. So, when we thought of a Slack replacement, community and developer-friendly, Discord was an obvious choice — not to mention that it would help us keep up with [OSS friends](https://documen.so/oss), too. -So, we’re switching all conversations, team- and community-wide, to Discord. +So, we’re switching all conversations, team and community-wide, to Discord. In this post, we won’t debate *why* we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here. Instead, we’ll focus on *how* we plan to make the switch. -## ## Who is this story for? +## Who is this story for? First, we wrote this post for the team so we’re ready for the switch. Then we post it online because we value transparency and thought it might help the community. @@ -47,15 +47,15 @@ The detailed plan goes like this: - 2023-08-02 `t+8`: We announce to the community the upcoming changes in the different channels — GitHub, Twitter, and Slack. - **GitHub** - - [ ] Create new Pull Request - - [ ] Add story to the blog - - [ ] Update link to the community + - Create new Pull Request + - Add story to the blog + - Update link to the community ``` https://documen.so/discord ``` - - [ ] Start a new Discussion + - Start a new Discussion ```markdown Happy Wednesday! @@ -73,9 +73,9 @@ The detailed plan goes like this: ``` - **Twitter** - - [ ] Tweet the announcement - - [ ] Pin Tweet - - [ ] Update link in bio + - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977) + - Pin Tweet + - Update link in bio ``` The Open Source DocuSign Alternative. @@ -87,7 +87,7 @@ The detailed plan goes like this: ``` - **Slack** - - [ ] Post message in `#general` + - Post message in `#general` ```markdown Happy Wednesday! @@ -104,18 +104,18 @@ The detailed plan goes like this: Flo ``` - - [ ] Pin post - - [ ] Set topic and description + - Pin post + - Set topic and description ``` We're switching to Discord. Join the fun: https://documen.so/discord ``` - - [ ] Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support` + - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support` - 2023-08-09 `t+15`: 7 days later, we send a reminder on Slack. - **Slack** - - [ ] Schedule reminder in `#general` (Flo) + - Schedule reminder in `#general` ``` Friendly reminder: we're switching to Discord and will soon disconnect this Slack workspace. @@ -125,8 +125,8 @@ The detailed plan goes like this: - 2023-08-16 `t+22`: 15 days later, we’re making the final edits to the Slack workspace. - **Slack** - - [ ] [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general` - - [ ] Disconnect Slack + - [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general` + - Disconnect Slack ## Final thoughts diff --git a/apps/marketing/package.json b/apps/marketing/package.json index 120c02930..9089405fb 100644 --- a/apps/marketing/package.json +++ b/apps/marketing/package.json @@ -28,6 +28,7 @@ "react-dom": "18.2.0", "react-hook-form": "^7.43.9", "react-icons": "^4.8.0", + "recharts": "^2.7.2", "typescript": "5.1.6", "zod": "^3.21.4" }, diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx new file mode 100644 index 000000000..d5194e5f5 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx @@ -0,0 +1,87 @@ +'use client'; + +import { HTMLAttributes, useEffect, useState } from 'react'; + +import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts'; + +import { cn } from '@documenso/ui/lib/utils'; + +import { CAP_TABLE } from './data'; + +const COLORS = ['#7fd843', '#a2e771', '#c6f2a4']; +const RADIAN = Math.PI / 180; + +export type LabelRenderProps = { + cx: number; + cy: number; + midAngle: number; + innerRadius: number; + outerRadius: number; + percent: number; +}; + +const renderCustomizedLabel = ({ + cx, + cy, + midAngle, + innerRadius, + outerRadius, + percent, +}: LabelRenderProps) => { + const radius = innerRadius + (outerRadius - innerRadius) * 0.25; + const x = cx + radius * Math.cos(-midAngle * RADIAN); + const y = cy + radius * Math.sin(-midAngle * RADIAN); + + return ( + cx ? 'start' : 'end'} dominantBaseline="central"> + {`${(percent * 100).toFixed(1)}%`} + + ); +}; + +export type CapTableProps = HTMLAttributes; + +export const CapTable = ({ className, ...props }: CapTableProps) => { + const [isSSR, setIsSSR] = useState(true); + + useEffect(() => { + setIsSSR(false); + }, []); + return ( +
+

Cap Table

+ +
+ {!isSSR && ( + + + {CAP_TABLE.map((entry, index) => ( + + ))} + + { + return {value}; + }} + /> + { + return [`${percent}%`, name || props['name'] || props['payload']['name']]; + }} + /> + + )} +
+
+ ); +}; diff --git a/apps/marketing/src/app/(marketing)/open/data.ts b/apps/marketing/src/app/(marketing)/open/data.ts new file mode 100644 index 000000000..c0dc01005 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/data.ts @@ -0,0 +1,124 @@ +export const TEAM_MEMBERS = [ + { + name: 'Timur Ercan', + role: 'Co-Founder, CEO', + salary: 95_000, + location: 'Germany', + engagement: 'Full-Time', + joinDate: 'November 14th, 2022', + }, + { + name: 'Lucas Smith', + role: 'Co-Founder, CTO', + salary: 95_000, + location: 'Australia', + engagement: 'Full-Time', + joinDate: 'April 19th, 2023', + }, + { + name: 'Ephraim Atta-Duncan', + role: 'Software Engineer - Intern', + salary: 15_000, + location: 'Ghana', + engagement: 'Part-Time', + joinDate: 'June 6th, 2023', + }, + { + name: 'Florent Merian', + role: 'Marketer - III', + salary: 'Project-Based', + location: 'France', + engagement: 'Full-Time', + joinDate: 'July 10th, 2023', + }, + { + name: 'Thilo Konzok', + role: 'Designer', + salary: 'Project-Based', + location: 'Germany', + engagement: 'Full-Time', + joinDate: 'April 26th, 2023', + }, + { + name: 'David Nguyen', + role: 'Software Engineer - III', + salary: 100_000, + location: 'Australia', + engagement: 'Full-Time', + joinDate: 'July 26th, 2023', + }, +]; + +export const FUNDING_RAISED = [ + { + date: '2023-04', + amount: 0, + }, + { + date: '2023-05', + amount: 300_000, + }, + { + date: '2023-07', + amount: 1_550_000, + }, +]; + +export const SALARY_BANDS = [ + { + title: 'Software Engineer - Intern', + seniority: 'Intern', + salary: 30_000, + }, + { + title: 'Software Engineer - I', + seniority: 'Junior', + salary: 60_000, + }, + { + title: 'Software Engineer - II', + seniority: 'Mid', + salary: 80_000, + }, + { + title: 'Software Engineer - III', + seniority: 'Senior', + salary: 100_000, + }, + { + title: 'Software Engineer - IV', + seniority: 'Principal', + salary: 120_000, + }, + { + title: 'Designer - III', + seniority: 'Senior', + salary: 100_000, + }, + { + title: 'Designer - IV', + seniority: 'Principal', + salary: 120_000, + }, + { + title: 'Marketer - I', + seniority: 'Junior', + salary: 50_000, + }, + { + title: 'Marketer - II', + seniority: 'Mid', + salary: 65_000, + }, + { + title: 'Marketer - III', + seniority: 'Senior', + salary: 80_000, + }, +]; + +export const CAP_TABLE = [ + { name: 'Founders', percentage: 75.5 }, + { name: 'Investors', percentage: 14.5 }, + { name: 'Team Pool', percentage: 10 }, +]; diff --git a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx new file mode 100644 index 000000000..c6601f547 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx @@ -0,0 +1,57 @@ +'use client'; + +import { HTMLAttributes } from 'react'; + +import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; + +import { formatMonth } from '@documenso/lib/client-only/format-month'; +import { cn } from '@documenso/ui/lib/utils'; + +import { FUNDING_RAISED } from '~/app/(marketing)/open/data'; + +export type FundingRaisedProps = HTMLAttributes; + +export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => { + const formattedData = FUNDING_RAISED.map((item) => ({ + amount: Number(item.amount), + date: formatMonth(item.date), + })); + + return ( +
+

Total Funding Raised

+ +
+ + + + + Number(value).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0, + }) + } + /> + [ + Number(value).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0, + }), + 'Amount Raised', + ]} + cursor={{ fill: 'hsl(var(--primary) / 10%)' }} + /> + + + +
+
+ ); +}; diff --git a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx new file mode 100644 index 000000000..5c0c79716 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx @@ -0,0 +1,59 @@ +'use client'; + +import { HTMLAttributes } from 'react'; + +import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; + +import { formatMonth } from '@documenso/lib/client-only/format-month'; +import { cn } from '@documenso/ui/lib/utils'; + +import { StargazersType } from './page'; + +export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues'; +export type GithubMetricProps = HTMLAttributes & { + data: StargazersType; + metricKey: MetricsDataKey; + title: string; + label: string; + chartHeight?: number; +}; + +export const GithubMetric = ({ + className, + data, + metricKey, + title, + label, + chartHeight = 400, + ...props +}: GithubMetricProps) => { + const formattedData = Object.keys(data) + .map((key) => ({ + month: formatMonth(key), + [metricKey]: data[key][metricKey], + })) + .reverse(); + + return ( +
+

{title}

+ +
+ + + + + [Number(value), label]} + cursor={{ fill: 'hsl(var(--primary) / 10%)' }} + /> + + + +
+
+ ); +}; diff --git a/apps/marketing/src/app/(marketing)/open/metric-card.tsx b/apps/marketing/src/app/(marketing)/open/metric-card.tsx new file mode 100644 index 000000000..6235f4f5e --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/metric-card.tsx @@ -0,0 +1,18 @@ +import { HTMLAttributes } from 'react'; + +import { cn } from '@documenso/ui/lib/utils'; + +export type MetricCardProps = HTMLAttributes & { + title: string; + value: string; +}; + +export const MetricCard = ({ className, title, value, ...props }: MetricCardProps) => { + return ( +
+

{title}

+ +

{value}

+
+ ); +}; diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx new file mode 100644 index 000000000..315b45ef4 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/page.tsx @@ -0,0 +1,157 @@ +import { z } from 'zod'; + +import { MetricCard } from '~/app/(marketing)/open/metric-card'; +import { SalaryBands } from '~/app/(marketing)/open/salary-bands'; + +import { CapTable } from './cap-table'; +import { FundingRaised } from './funding-raised'; +import { GithubMetric } from './gh-metrics'; +import { TeamMembers } from './team-members'; + +export const revalidate = 86400; + +const ZGithubStatsResponse = z.object({ + stargazers_count: z.number(), + forks_count: z.number(), + open_issues: z.number(), +}); + +const ZMergedPullRequestsResponse = z.object({ + total_count: z.number(), +}); + +const ZStargazersLiveResponse = z.record( + z.object({ + stars: z.number(), + forks: z.number(), + mergedPRs: z.number(), + openIssues: z.number(), + }), +); + +export type StargazersType = z.infer; + +// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse; + +export default async function OpenPage() { + const { + forks_count: forksCount, + open_issues: openIssues, + stargazers_count: stargazersCount, + } = await fetch('https://api.github.com/repos/documenso/documenso', { + headers: { + accept: 'application/vnd.github.v3+json', + }, + }) + .then((res) => res.json()) + .then((res) => ZGithubStatsResponse.parse(res)); + + const { total_count: mergedPullRequests } = await fetch( + 'https://api.github.com/search/issues?q=repo:documenso/documenso/+is:pr+merged:>=2010-01-01&page=0&per_page=1', + { + headers: { + accept: 'application/vnd.github.v3+json', + }, + }, + ) + .then((res) => res.json()) + .then((res) => ZMergedPullRequestsResponse.parse(res)); + + const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', { + headers: { + accept: 'application/json', + }, + }) + .then((res) => res.json()) + .then((res) => ZStargazersLiveResponse.parse(res)); + + return ( +
+
+

Open Startup

+ +

+ 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:{' '} + + Announcing Open Metrics + +

+
+ +
+
+ + + + +
+ + + + + + + + + + + + + + +
+

Where's the rest?

+ +

+ We're still working on getting all our metrics together. We'll update this page as soon + as we have more to share. +

+
+
+
+ ); +} diff --git a/apps/marketing/src/app/(marketing)/open/salary-bands.tsx b/apps/marketing/src/app/(marketing)/open/salary-bands.tsx new file mode 100644 index 000000000..31c254157 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/salary-bands.tsx @@ -0,0 +1,50 @@ +import { HTMLAttributes } from 'react'; + +import { cn } from '@documenso/ui/lib/utils'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@documenso/ui/primitives/table'; + +import { SALARY_BANDS } from '~/app/(marketing)/open/data'; + +export type SalaryBandsProps = HTMLAttributes; + +export const SalaryBands = ({ className, ...props }: SalaryBandsProps) => { + return ( +
+

Global Salary Bands

+ +
+ + + + Title + Seniority + Salary + + + + {SALARY_BANDS.map((band, index) => ( + + {band.title} + {band.seniority} + + {band.salary.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0, + })} + + + ))} + +
+
+
+ ); +}; diff --git a/apps/marketing/src/app/(marketing)/open/team-members.tsx b/apps/marketing/src/app/(marketing)/open/team-members.tsx new file mode 100644 index 000000000..a79fcd182 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/open/team-members.tsx @@ -0,0 +1,57 @@ +import { HTMLAttributes } from 'react'; + +import { cn } from '@documenso/ui/lib/utils'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@documenso/ui/primitives/table'; + +import { TEAM_MEMBERS } from './data'; + +export type TeamMembersProps = HTMLAttributes; + +export const TeamMembers = ({ className, ...props }: TeamMembersProps) => { + return ( +
+

Team

+ +
+ + + + Name + Role + Salary + Engagement + Location + Join Date + + + + {TEAM_MEMBERS.map((member) => ( + + {member.name} + {member.role} + + + {member.salary.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0, + })} + + {member.engagement} + {member.location} + {member.joinDate} + + ))} + +
+
+
+ ); +}; diff --git a/apps/marketing/src/app/(marketing)/page.tsx b/apps/marketing/src/app/(marketing)/page.tsx index 9992c51a4..09e9e3dec 100644 --- a/apps/marketing/src/app/(marketing)/page.tsx +++ b/apps/marketing/src/app/(marketing)/page.tsx @@ -9,6 +9,8 @@ import { Hero } from '~/components/(marketing)/hero'; import { OpenBuildTemplateBento } from '~/components/(marketing)/open-build-template-bento'; import { ShareConnectPaidWidgetBento } from '~/components/(marketing)/share-connect-paid-widget-bento'; +export const revalidate = 600; + const fontCaveat = Caveat({ weight: ['500'], subsets: ['latin'], @@ -17,15 +19,24 @@ const fontCaveat = Caveat({ }); export default async function IndexPage() { + const starCount = await fetch('https://api.github.com/repos/documenso/documenso', { + headers: { + accept: 'application/vnd.github.v3+json', + }, + }) + .then((res) => res.json()) + .then((res) => (typeof res.stargazers_count === 'number' ? res.stargazers_count : undefined)) + .catch(() => undefined); + return (
- + - +
); } diff --git a/apps/marketing/src/components/(marketing)/callout.tsx b/apps/marketing/src/components/(marketing)/callout.tsx index 30a1abdbf..d83983141 100644 --- a/apps/marketing/src/components/(marketing)/callout.tsx +++ b/apps/marketing/src/components/(marketing)/callout.tsx @@ -7,7 +7,12 @@ import { usePlausible } from 'next-plausible'; import { Button } from '@documenso/ui/primitives/button'; -export const Callout = () => { +export type CalloutProps = { + starCount?: number; + [key: string]: unknown; +}; + +export const Callout = ({ starCount }: CalloutProps) => { const event = usePlausible(); const onSignUpClick = () => { @@ -36,7 +41,7 @@ export const Callout = () => { onClick={onSignUpClick} > Get the Community Plan - + $30/mo. forever! @@ -49,6 +54,11 @@ export const Callout = () => { diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx index aba8d17ce..e82318a38 100644 --- a/apps/marketing/src/components/(marketing)/footer.tsx +++ b/apps/marketing/src/components/(marketing)/footer.tsx @@ -46,10 +46,6 @@ export const Footer = ({ className, ...props }: FooterProps) => {
- - Blog - - { Pricing + + Blog + + + + Open + + {
+ + Pricing + + Blog - - Pricing + + Open import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), { - ssr: false, - loading: () => ( -
- - -

Loading document...

-
- ), -}); - export type EditDocumentFormProps = { className?: string; user: User; @@ -71,7 +57,7 @@ export const EditDocumentForm = ({ gradient > - + diff --git a/apps/web/src/app/(dashboard)/layout.tsx b/apps/web/src/app/(dashboard)/layout.tsx index 90a0afda8..b1f7d1a1a 100644 --- a/apps/web/src/app/(dashboard)/layout.tsx +++ b/apps/web/src/app/(dashboard)/layout.tsx @@ -8,6 +8,7 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options'; import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session'; 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 = { @@ -30,6 +31,8 @@ export default async function AuthenticatedDashboardLayout({
{children}
+ + ); } diff --git a/apps/web/src/app/(signing)/sign/[token]/complete/download-button.tsx b/apps/web/src/app/(signing)/sign/[token]/complete/download-button.tsx new file mode 100644 index 000000000..2195e2e70 --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/complete/download-button.tsx @@ -0,0 +1,68 @@ +'use client'; + +import { HTMLAttributes } from 'react'; + +import { Download } from 'lucide-react'; + +import { Button } from '@documenso/ui/primitives/button'; + +export type DownloadButtonProps = HTMLAttributes & { + disabled?: boolean; + fileName?: string; + document?: string; +}; + +export const DownloadButton = ({ + className, + fileName, + document, + disabled, + ...props +}: DownloadButtonProps) => { + /** + * Convert the document from base64 to a blob and download it. + */ + const onDownloadClick = () => { + if (!document) { + return; + } + + let decodedDocument = document; + + try { + decodedDocument = atob(document); + } catch (err) { + // We're just going to ignore this error and try to download the document + console.error(err); + } + + const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0))); + + const blob = new Blob([documentBytes], { + type: 'application/pdf', + }); + + const link = window.document.createElement('a'); + + link.href = window.URL.createObjectURL(blob); + link.download = fileName || 'document.pdf'; + + link.click(); + + window.URL.revokeObjectURL(link.href); + }; + + return ( + + ); +}; diff --git a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx new file mode 100644 index 000000000..b97b7f8d6 --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx @@ -0,0 +1,107 @@ +import Link from 'next/link'; +import { notFound } from 'next/navigation'; + +import { CheckCircle2, Clock8, Share } from 'lucide-react'; +import { match } from 'ts-pattern'; + +import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token'; +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 { DocumentStatus, FieldType } from '@documenso/prisma/client'; +import { Button } from '@documenso/ui/primitives/button'; + +import { DownloadButton } from './download-button'; +import { SigningCard } from './signing-card'; + +export type CompletedSigningPageProps = { + params: { + token?: string; + }; +}; + +export default async function CompletedSigningPage({ + params: { token }, +}: CompletedSigningPageProps) { + if (!token) { + return notFound(); + } + + const document = await getDocumentAndSenderByToken({ + token, + }).catch(() => null); + + if (!document) { + return notFound(); + } + + const [fields, recipient] = await Promise.all([ + getFieldsForToken({ token }), + getRecipientByToken({ token }), + ]); + + const recipientName = + recipient.name || + fields.find((field) => field.type === FieldType.NAME)?.customText || + recipient.email; + + return ( +
+ {/* Card with recipient */} + + +
+ {match(document.status) + .with(DocumentStatus.COMPLETED, () => ( +
+ + Everyone has signed +
+ )) + .otherwise(() => ( +
+ + Waiting for others to sign +
+ ))} +
+ +

+ You have signed "{document.title}" +

+ + {match(document.status) + .with(DocumentStatus.COMPLETED, () => ( +

+ Everyone has signed! You will receive an Email copy of the signed document. +

+ )) + .otherwise(() => ( +

+ You will receive an Email copy of the signed document once everyone has signed. +

+ ))} + +
+ {/* TODO: Hook this up */} + + + +
+ +

+ Want so send slick signing links like this one?{' '} + + Check out Documenso. + +

+
+ ); +} diff --git a/apps/web/src/app/(signing)/sign/[token]/complete/signing-card.tsx b/apps/web/src/app/(signing)/sign/[token]/complete/signing-card.tsx new file mode 100644 index 000000000..791c61231 --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/complete/signing-card.tsx @@ -0,0 +1,67 @@ +'use client'; + +import Image from 'next/image'; + +import { motion } from 'framer-motion'; + +import { Card, CardContent } from '@documenso/ui/primitives/card'; + +import signingCelebration from '~/assets/signing-celebration.png'; + +export type SigningCardProps = { + name: string; +}; + +export const SigningCard = ({ name }: SigningCardProps) => { + return ( +
+ + + + {name} + + + + + + background pattern + +
+ ); +}; diff --git a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx new file mode 100644 index 000000000..8e2201df9 --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx @@ -0,0 +1,94 @@ +'use client'; + +import { useTransition } from 'react'; + +import { useRouter } from 'next/navigation'; + +import { Loader } from 'lucide-react'; + +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'; + +import { SigningFieldContainer } from './signing-field-container'; + +export type DateFieldProps = { + field: FieldWithSignature; + recipient: Recipient; +}; + +export const DateField = ({ field, recipient }: DateFieldProps) => { + const router = useRouter(); + + const { toast } = useToast(); + + const [isPending, startTransition] = useTransition(); + + const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } = + trpc.field.signFieldWithToken.useMutation(); + + const { + mutateAsync: removeSignedFieldWithToken, + isLoading: isRemoveSignedFieldWithTokenLoading, + } = trpc.field.removeSignedFieldWithToken.useMutation(); + + const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending; + + const onSign = async () => { + try { + await signFieldWithToken({ + token: recipient.token, + fieldId: field.id, + value: '', + }); + + startTransition(() => router.refresh()); + } catch (err) { + console.error(err); + + toast({ + title: 'Error', + description: 'An error occurred while signing the document.', + variant: 'destructive', + }); + } + }; + + const onRemove = async () => { + try { + await removeSignedFieldWithToken({ + token: recipient.token, + fieldId: field.id, + }); + + startTransition(() => router.refresh()); + } catch (err) { + console.error(err); + + toast({ + title: 'Error', + description: 'An error occurred while removing the signature.', + variant: 'destructive', + }); + } + }; + + return ( + + {isLoading && ( +
+ +
+ )} + + {!field.inserted && ( +

Date

+ )} + + {field.inserted && ( +

{field.customText}

+ )} + + ); +}; diff --git a/apps/web/src/app/(signing)/sign/[token]/form.tsx b/apps/web/src/app/(signing)/sign/[token]/form.tsx new file mode 100644 index 000000000..eab0ff2b2 --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/form.tsx @@ -0,0 +1,127 @@ +'use client'; + +import { useRouter } from 'next/navigation'; + +import { Loader } from 'lucide-react'; +import { useForm } from 'react-hook-form'; + +import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token'; +import { Document, Field, Recipient } from '@documenso/prisma/client'; +import { cn } from '@documenso/ui/lib/utils'; +import { Button } from '@documenso/ui/primitives/button'; +import { Card, CardContent } from '@documenso/ui/primitives/card'; +import { Input } from '@documenso/ui/primitives/input'; +import { Label } from '@documenso/ui/primitives/label'; + +import { SignaturePad } from '~/components/signature-pad'; + +import { useRequiredSigningContext } from './provider'; + +export type SigningFormProps = { + document: Document; + recipient: Recipient; + fields: Field[]; +}; + +export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => { + const router = useRouter(); + + const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext(); + + const { + handleSubmit, + formState: { isSubmitting }, + } = useForm(); + + const isComplete = fields.every((f) => f.inserted); + + const onFormSubmit = async () => { + if (!isComplete) { + return; + } + + await completeDocumentWithToken({ + token: recipient.token, + documentId: document.id, + }); + + router.push(`/sign/${recipient.token}/complete`); + }; + + return ( +
+
+
+

Sign Document

+ +

+ Please review the document before signing. +

+ +
+ +
+
+
+ + + setFullName(e.target.value)} + /> +
+ +
+ + + + + { + console.log({ + signpadValue: value, + }); + setSignature(value); + }} + /> + + +
+
+ +
+ + + +
+
+
+
+
+ ); +}; diff --git a/apps/web/src/app/(signing)/sign/[token]/layout.tsx b/apps/web/src/app/(signing)/sign/[token]/layout.tsx new file mode 100644 index 000000000..3c56c1718 --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/layout.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session'; + +import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header'; +import { NextAuthProvider } from '~/providers/next-auth'; + +export type SigningLayoutProps = { + children: React.ReactNode; +}; + +export default async function SigningLayout({ children }: SigningLayoutProps) { + const user = await getServerComponentSession(); + + return ( + +
+ {user && } + +
{children}
+
+ + ); +} diff --git a/apps/web/src/app/(signing)/sign/[token]/name-field.tsx b/apps/web/src/app/(signing)/sign/[token]/name-field.tsx new file mode 100644 index 000000000..f200d94cd --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/name-field.tsx @@ -0,0 +1,163 @@ +'use client'; + +import { useState, useTransition } from 'react'; + +import { useRouter } from 'next/navigation'; + +import { Loader } from 'lucide-react'; + +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'; +import { Input } from '@documenso/ui/primitives/input'; +import { Label } from '@documenso/ui/primitives/label'; +import { useToast } from '@documenso/ui/primitives/use-toast'; + +import { useRequiredSigningContext } from './provider'; +import { SigningFieldContainer } from './signing-field-container'; + +export type NameFieldProps = { + field: FieldWithSignature; + recipient: Recipient; +}; + +export const NameField = ({ field, recipient }: NameFieldProps) => { + const router = useRouter(); + + const { toast } = useToast(); + + const { fullName: providedFullName, setFullName: setProvidedFullName } = + useRequiredSigningContext(); + + const [isPending, startTransition] = useTransition(); + + const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } = + trpc.field.signFieldWithToken.useMutation(); + + const { + mutateAsync: removeSignedFieldWithToken, + isLoading: isRemoveSignedFieldWithTokenLoading, + } = trpc.field.removeSignedFieldWithToken.useMutation(); + + const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending; + + const [showFullNameModal, setShowFullNameModal] = useState(false); + const [localFullName, setLocalFullName] = useState(''); + + const onSign = async (source: 'local' | 'provider' = 'provider') => { + try { + if (!providedFullName && !localFullName) { + setShowFullNameModal(true); + return; + } + + await signFieldWithToken({ + token: recipient.token, + fieldId: field.id, + value: source === 'local' && localFullName ? localFullName : providedFullName ?? '', + isBase64: false, + }); + + if (source === 'local' && !providedFullName) { + setProvidedFullName(localFullName); + } + + setLocalFullName(''); + + startTransition(() => router.refresh()); + } catch (err) { + console.error(err); + + toast({ + title: 'Error', + description: 'An error occurred while signing the document.', + variant: 'destructive', + }); + } + }; + + const onRemove = async () => { + try { + await removeSignedFieldWithToken({ + token: recipient.token, + fieldId: field.id, + }); + + startTransition(() => router.refresh()); + } catch (err) { + console.error(err); + + toast({ + title: 'Error', + description: 'An error occurred while removing the signature.', + variant: 'destructive', + }); + } + }; + + return ( + + {isLoading && ( +
+ +
+ )} + + {!field.inserted && ( +

Name

+ )} + + {field.inserted &&

{field.customText}

} + + + + + Sign as {recipient.name}{' '} + ({recipient.email}) + + +
+ + + setLocalFullName(e.target.value)} + /> +
+ + +
+ + + +
+ + + + + ); +}; diff --git a/apps/web/src/app/(signing)/sign/[token]/page.tsx b/apps/web/src/app/(signing)/sign/[token]/page.tsx new file mode 100644 index 000000000..c5bee1cf7 --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/page.tsx @@ -0,0 +1,94 @@ +import { notFound } from 'next/navigation'; + +import { match } from 'ts-pattern'; + +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 { FieldType } from '@documenso/prisma/client'; +import { Card, CardContent } from '@documenso/ui/primitives/card'; +import { ElementVisible } from '@documenso/ui/primitives/element-visible'; + +import { LazyPDFViewer } from '~/components/(dashboard)/pdf-viewer/lazy-pdf-viewer'; +import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types'; + +import { DateField } from './date-field'; +import { SigningForm } from './form'; +import { NameField } from './name-field'; +import { SigningProvider } from './provider'; +import { SignatureField } from './signature-field'; + +export type SigningPageProps = { + params: { + token?: string; + }; +}; + +export default async function SigningPage({ params: { token } }: SigningPageProps) { + if (!token) { + return notFound(); + } + + const [document, fields, recipient] = await Promise.all([ + getDocumentAndSenderByToken({ + token, + }).catch(() => null), + getFieldsForToken({ token }), + getRecipientByToken({ token }), + viewedDocument({ token }), + ]); + + if (!document) { + return notFound(); + } + + const documentUrl = `data:application/pdf;base64,${document.document}`; + + return ( + +
+

+ {document.title} +

+ +
+

+ {document.User.name} ({document.User.email}) has invited you to sign this document. +

+
+ +
+ + + + + + +
+ +
+
+ + + {fields.map((field) => + match(field.type) + .with(FieldType.SIGNATURE, () => ( + + )) + .with(FieldType.NAME, () => ( + + )) + .with(FieldType.DATE, () => ( + + )) + .otherwise(() => null), + )} + +
+ + ); +} diff --git a/apps/web/src/app/(signing)/sign/[token]/provider.tsx b/apps/web/src/app/(signing)/sign/[token]/provider.tsx new file mode 100644 index 000000000..40d2bd0bb --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/provider.tsx @@ -0,0 +1,63 @@ +'use client'; + +import { createContext, useContext, useState } from 'react'; + +export type SigningContextValue = { + fullName: string; + setFullName: (_value: string) => void; + email: string; + setEmail: (_value: string) => void; + signature: string | null; + setSignature: (_value: string | null) => void; +}; + +const SigningContext = createContext(null); + +export const useSigningContext = () => { + return useContext(SigningContext); +}; + +export const useRequiredSigningContext = () => { + const context = useSigningContext(); + + if (!context) { + throw new Error('Signing context is required'); + } + + return context; +}; + +export interface SigningProviderProps { + fullName?: string; + email?: string; + signature?: string; + children: React.ReactNode; +} + +export const SigningProvider = ({ + fullName: initialFullName, + email: initialEmail, + signature: initialSignature, + children, +}: SigningProviderProps) => { + const [fullName, setFullName] = useState(initialFullName || ''); + const [email, setEmail] = useState(initialEmail || ''); + const [signature, setSignature] = useState(initialSignature || null); + + return ( + + {children} + + ); +}; + +SigningProvider.displayName = 'SigningProvider'; diff --git a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx new file mode 100644 index 000000000..1c00c5eaa --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx @@ -0,0 +1,197 @@ +'use client'; + +import { useMemo, useState, useTransition } from 'react'; + +import { useRouter } from 'next/navigation'; + +import { Loader } from 'lucide-react'; + +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'; +import { Label } from '@documenso/ui/primitives/label'; +import { useToast } from '@documenso/ui/primitives/use-toast'; + +import { SignaturePad } from '~/components/signature-pad'; + +import { useRequiredSigningContext } from './provider'; +import { SigningFieldContainer } from './signing-field-container'; + +type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text'; + +export type SignatureFieldProps = { + field: FieldWithSignature; + recipient: Recipient; +}; + +export const SignatureField = ({ field, recipient }: SignatureFieldProps) => { + const router = useRouter(); + + const { toast } = useToast(); + const { signature: providedSignature, setSignature: setProvidedSignature } = + useRequiredSigningContext(); + + const [isPending, startTransition] = useTransition(); + + const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } = + trpc.field.signFieldWithToken.useMutation(); + + const { + mutateAsync: removeSignedFieldWithToken, + isLoading: isRemoveSignedFieldWithTokenLoading, + } = trpc.field.removeSignedFieldWithToken.useMutation(); + + const { Signature: signature } = field; + + const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending; + + const [showSignatureModal, setShowSignatureModal] = useState(false); + const [localSignature, setLocalSignature] = useState(null); + + const state = useMemo(() => { + if (!field.inserted) { + return 'empty'; + } + + if (signature?.signatureImageAsBase64) { + return 'signed-image'; + } + + return 'signed-text'; + }, [field.inserted, signature?.signatureImageAsBase64]); + + const onSign = async (source: 'local' | 'provider' = 'provider') => { + try { + console.log({ + providedSignature, + localSignature, + }); + + if (!providedSignature && !localSignature) { + setShowSignatureModal(true); + return; + } + + await signFieldWithToken({ + token: recipient.token, + fieldId: field.id, + value: source === 'local' && localSignature ? localSignature : providedSignature ?? '', + isBase64: true, + }); + + if (source === 'local' && !providedSignature) { + setProvidedSignature(localSignature); + } + + setLocalSignature(null); + + startTransition(() => router.refresh()); + } catch (err) { + console.error(err); + + toast({ + title: 'Error', + description: 'An error occurred while signing the document.', + variant: 'destructive', + }); + } + }; + + const onRemove = async () => { + try { + await removeSignedFieldWithToken({ + token: recipient.token, + fieldId: field.id, + }); + + startTransition(() => router.refresh()); + } catch (err) { + console.error(err); + + toast({ + title: 'Error', + description: 'An error occurred while removing the signature.', + variant: 'destructive', + }); + } + }; + + return ( + + {isLoading && ( +
+ +
+ )} + + {state === 'empty' && ( +

+ Signature +

+ )} + + {state === 'signed-image' && signature?.signatureImageAsBase64 && ( + {`Signature + )} + + {state === 'signed-text' && ( +

+ {signature?.typedSignature} +

+ )} + + + + + Sign as {recipient.name}{' '} + ({recipient.email}) + + +
+ + + setLocalSignature(value)} + /> +
+ + +
+ + + +
+ + + + + ); +}; diff --git a/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx new file mode 100644 index 000000000..d5efcb3df --- /dev/null +++ b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx @@ -0,0 +1,81 @@ +'use client'; + +import React from 'react'; + +import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature'; +import { cn } from '@documenso/ui/lib/utils'; +import { Card, CardContent } from '@documenso/ui/primitives/card'; + +import { useFieldPageCoords } from '~/hooks/use-field-page-coords'; + +export type SignatureFieldProps = { + field: FieldWithSignature; + loading?: boolean; + children: React.ReactNode; + onSign?: () => Promise | void; + onRemove?: () => Promise | void; +}; + +export const SigningFieldContainer = ({ + field, + loading, + onSign, + onRemove, + children, +}: SignatureFieldProps) => { + const coords = useFieldPageCoords(field); + + const onSignFieldClick = async () => { + if (field.inserted) { + return; + } + + await onSign?.(); + }; + + const onRemoveSignedFieldClick = async () => { + if (!field.inserted) { + return; + } + + await onRemove?.(); + }; + + return ( +
+ + + {!field.inserted && !loading && ( + + )} + + {children} + + +
+ ); +}; diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 9c60bbadf..5bf2b9403 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,6 +1,7 @@ -import { Inter } from 'next/font/google'; +import { Caveat, Inter } from 'next/font/google'; import { TrpcProvider } from '@documenso/trpc/react'; +import { cn } from '@documenso/ui/lib/utils'; import { Toaster } from '@documenso/ui/primitives/toaster'; import { TooltipProvider } from '@documenso/ui/primitives/tooltip'; @@ -10,6 +11,7 @@ import { PlausibleProvider } from '~/providers/plausible'; import './globals.css'; const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' }); +const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' }); export const metadata = { title: 'Documenso - The Open Source DocuSign Alternative', @@ -37,7 +39,11 @@ export const metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + diff --git a/apps/web/src/assets/signing-celebration.png b/apps/web/src/assets/signing-celebration.png new file mode 100644 index 000000000..a3fb5bc65 Binary files /dev/null and b/apps/web/src/assets/signing-celebration.png differ diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx index e79a2e71b..adab288cd 100644 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx @@ -12,7 +12,7 @@ export type StackAvatarProps = { first?: boolean; zIndex?: string; fallbackText?: string; - type: 'unsigned' | 'waiting' | 'completed'; + type: 'unsigned' | 'waiting' | 'opened' | 'completed'; }; export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => { @@ -28,6 +28,9 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr case 'unsigned': classes = 'bg-dawn-200 text-dawn-900'; break; + case 'opened': + classes = 'bg-yellow-200 text-yellow-700'; + break; case 'waiting': classes = 'bg-water text-water-700'; break; diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx index dbd1dc712..7143add36 100644 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx @@ -13,15 +13,19 @@ import { StackAvatars } from './stack-avatars'; export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => { const waitingRecipients = recipients.filter( - (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED', + (recipient) => getRecipientType(recipient) === 'waiting', + ); + + const openedRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'opened', ); const completedRecipients = recipients.filter( - (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED', + (recipient) => getRecipientType(recipient) === 'completed', ); const uncompletedRecipients = recipients.filter( - (recipient) => recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED', + (recipient) => getRecipientType(recipient) === 'unsigned', ); return ( @@ -66,6 +70,23 @@ export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[
)} + {openedRecipients.length > 0 && ( +
+

Opened

+ {openedRecipients.map((recipient: Recipient) => ( +
+ + {recipient.email} +
+ ))} +
+ )} + {uncompletedRecipients.length > 0 && (

Uncompleted

diff --git a/apps/web/src/components/(dashboard)/pdf-viewer/lazy-pdf-viewer.tsx b/apps/web/src/components/(dashboard)/pdf-viewer/lazy-pdf-viewer.tsx new file mode 100644 index 000000000..f75920ade --- /dev/null +++ b/apps/web/src/components/(dashboard)/pdf-viewer/lazy-pdf-viewer.tsx @@ -0,0 +1,19 @@ +'use client'; + +import dynamic from 'next/dynamic'; + +import { Loader } from 'lucide-react'; + +export const LazyPDFViewer = dynamic( + async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), + { + ssr: false, + loading: () => ( +
+ + +

Loading document...

+
+ ), + }, +); diff --git a/apps/web/src/components/(dashboard)/refresh-on-focus/refresh-on-focus.tsx b/apps/web/src/components/(dashboard)/refresh-on-focus/refresh-on-focus.tsx new file mode 100644 index 000000000..1b2f529b8 --- /dev/null +++ b/apps/web/src/components/(dashboard)/refresh-on-focus/refresh-on-focus.tsx @@ -0,0 +1,23 @@ +'use client'; + +import { useCallback, useEffect } from 'react'; + +import { useRouter } from 'next/navigation'; + +export const RefreshOnFocus = () => { + const { refresh } = useRouter(); + + const onFocus = useCallback(() => { + refresh(); + }, [refresh]); + + useEffect(() => { + window.addEventListener('focus', onFocus); + + return () => { + window.removeEventListener('focus', onFocus); + }; + }, [onFocus]); + + return null; +}; diff --git a/apps/web/src/components/(marketing)/callout.tsx b/apps/web/src/components/(marketing)/callout.tsx index 0c2613ec8..d83983141 100644 --- a/apps/web/src/components/(marketing)/callout.tsx +++ b/apps/web/src/components/(marketing)/callout.tsx @@ -7,7 +7,12 @@ import { usePlausible } from 'next-plausible'; import { Button } from '@documenso/ui/primitives/button'; -export const Callout = () => { +export type CalloutProps = { + starCount?: number; + [key: string]: unknown; +}; + +export const Callout = ({ starCount }: CalloutProps) => { const event = usePlausible(); const onSignUpClick = () => { @@ -36,21 +41,26 @@ export const Callout = () => { onClick={onSignUpClick} > Get the Community Plan - + $30/mo. forever! - + {starCount && starCount > 0 && ( + + {starCount.toLocaleString('en-US')} + + )} + +
); }; diff --git a/apps/web/src/components/(marketing)/hero.tsx b/apps/web/src/components/(marketing)/hero.tsx index 7f7aa6d05..7896a010e 100644 --- a/apps/web/src/components/(marketing)/hero.tsx +++ b/apps/web/src/components/(marketing)/hero.tsx @@ -16,6 +16,7 @@ import { Widget } from './widget'; export type HeroProps = { className?: string; + starCount?: number; [key: string]: unknown; }; @@ -48,7 +49,7 @@ const HeroTitleVariants: Variants = { }, }; -export const Hero = ({ className, ...props }: HeroProps) => { +export const Hero = ({ className, starCount, ...props }: HeroProps) => { const event = usePlausible(); const onSignUpClick = () => { @@ -109,44 +110,44 @@ export const Hero = ({ className, ...props }: HeroProps) => { onClick={onSignUpClick} > Get the Community Plan - + $30/mo. forever! - - - - - - Documenso - The open source DocuSign alternative | Product Hunt + {starCount && starCount > 0 && ( + + {starCount.toLocaleString('en-US')} + + )} + +
+ + + Documenso - The open source DocuSign alternative | Product Hunt + + +
+ void; - unregisterPageClickHandler: (_handler: OnPDFViewerPageClick) => void; -} | null; - -const EditFormContext = createContext(null); - -export type EditFormProviderProps = { - children: React.ReactNode; -}; - -export const useEditForm = () => { - const context = React.useContext(EditFormContext); - - if (!context) { - throw new Error('useEditForm must be used within a EditFormProvider'); - } - - return context; -}; - -export const EditFormProvider = ({ children }: EditFormProviderProps) => { - const handlers = useRef(new Set()); - - const firePageClickEvent: OnPDFViewerPageClick = (event) => { - handlers.current.forEach((handler) => handler(event)); - }; - - const registerPageClickHandler = (handler: OnPDFViewerPageClick) => { - handlers.current.add(handler); - }; - - const unregisterPageClickHandler = (handler: OnPDFViewerPageClick) => { - handlers.current.delete(handler); - }; - - return ( - - {children} - - ); -}; diff --git a/apps/web/src/components/forms/profile.tsx b/apps/web/src/components/forms/profile.tsx index 6eceef65f..3b6941a44 100644 --- a/apps/web/src/components/forms/profile.tsx +++ b/apps/web/src/components/forms/profile.tsx @@ -1,5 +1,7 @@ 'use client'; +import { useRouter } from 'next/navigation'; + import { zodResolver } from '@hookform/resolvers/zod'; import { Loader } from 'lucide-react'; import { Controller, useForm } from 'react-hook-form'; @@ -30,6 +32,8 @@ export type ProfileFormProps = { }; export const ProfileForm = ({ className, user }: ProfileFormProps) => { + const router = useRouter(); + const { toast } = useToast(); const { @@ -59,6 +63,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => { description: 'Your profile has been updated successfully.', duration: 5000, }); + + router.refresh(); } catch (err) { if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') { toast({ diff --git a/apps/web/src/components/motion.tsx b/apps/web/src/components/motion.tsx new file mode 100644 index 000000000..2e9d19eae --- /dev/null +++ b/apps/web/src/components/motion.tsx @@ -0,0 +1,7 @@ +'use client'; + +import { motion } from 'framer-motion'; + +export * from 'framer-motion'; + +export const MotionDiv = motion.div; diff --git a/apps/web/src/components/signature-pad/signature-pad.tsx b/apps/web/src/components/signature-pad/signature-pad.tsx index 4ff0a6137..66d8d4582 100644 --- a/apps/web/src/components/signature-pad/signature-pad.tsx +++ b/apps/web/src/components/signature-pad/signature-pad.tsx @@ -24,7 +24,12 @@ export type SignaturePadProps = Omit, 'onChang onChange?: (_signatureDataUrl: string | null) => void; }; -export const SignaturePad = ({ className, onChange, ...props }: SignaturePadProps) => { +export const SignaturePad = ({ + className, + defaultValue, + onChange, + ...props +}: SignaturePadProps) => { const $el = useRef(null); const [isPressed, setIsPressed] = useState(false); @@ -127,7 +132,7 @@ export const SignaturePad = ({ className, onChange, ...props }: SignaturePadProp setPoints(newPoints); } - if ($el.current) { + if ($el.current && newPoints.length > 0) { const ctx = $el.current.getContext('2d'); if (ctx) { @@ -188,6 +193,23 @@ export const SignaturePad = ({ className, onChange, ...props }: SignaturePadProp } }, []); + useEffect(() => { + console.log({ defaultValue }); + if ($el.current && typeof defaultValue === 'string') { + const ctx = $el.current.getContext('2d'); + + const { width, height } = $el.current; + + const img = new Image(); + + img.onload = () => { + ctx?.drawImage(img, 0, 0, Math.min(width, img.width), Math.min(height, img.height)); + }; + + img.src = defaultValue; + } + }, [defaultValue]); + return (
-
+