From 2418612507bb8171f4d452ba18542dc13a938621 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Sat, 26 Aug 2023 13:18:12 +0530 Subject: [PATCH 01/10] chore: updated documents page Signed-off-by: Adithya Krishna --- .../src/app/(dashboard)/documents/page.tsx | 44 +++++++------------ 1 file changed, 16 insertions(+), 28 deletions(-) diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx index 834483757..8ac33be51 100644 --- a/apps/web/src/app/(dashboard)/documents/page.tsx +++ b/apps/web/src/app/(dashboard)/documents/page.tsx @@ -64,6 +64,12 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage return `/documents?${params.toString()}`; }; + const documentStatuses = [ + InternalDocumentStatus.PENDING, + InternalDocumentStatus.COMPLETED, + InternalDocumentStatus.DRAFT, + ]; + return (
@@ -73,35 +79,17 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
- - - + {documentStatuses.map((status) => ( + + + - - {Math.min(stats.PENDING, 99)} - - - - - - - - - - {Math.min(stats.COMPLETED, 99)} - - - - - - - - - - {Math.min(stats.DRAFT, 99)} - - - + + {Math.min(stats[status], 99)} + + + + ))} All From 3ac29d8da3da4bb307d7185463e8101d1d2f9654 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Sat, 26 Aug 2023 13:18:28 +0530 Subject: [PATCH 02/10] chore: updated dashboard page Signed-off-by: Adithya Krishna --- .../src/app/(dashboard)/dashboard/page.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx index a9d650eb6..6af737a68 100644 --- a/apps/web/src/app/(dashboard)/dashboard/page.tsx +++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx @@ -34,22 +34,23 @@ export default async function DashboardPage() { }), ]); + const cardData = [ + { icon: FileCheck, title: 'Completed', status: stats.COMPLETED }, + { icon: File, title: 'Drafts', status: stats.DRAFT }, + { icon: Clock, title: 'Pending', status: stats.PENDING }, + ]; + return (

Dashboard

-
- - - - - - - - - + {cardData.map((card) => ( + + + + ))}
- + ;
From d195dc1a46e1b053e488ba4f52072ac927e9e7cf Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Sat, 26 Aug 2023 13:18:58 +0530 Subject: [PATCH 03/10] chore: updated signing fields Signed-off-by: Adithya Krishna --- .../app/(signing)/sign/[token]/date-field.tsx | 18 +++++++++------ .../sign/[token]/signature-field.tsx | 4 ++-- .../sign/[token]/signing-field-container.tsx | 23 ++++++++----------- 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx index 8e2201df9..599aa8358 100644 --- a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx @@ -82,13 +82,17 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
)} - {!field.inserted && ( -

Date

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

{field.customText}

- )} +

+ {field.inserted ? field.customText : 'Date'} +

); }; diff --git a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx index bbc58b5e8..921b4f51f 100644 --- a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx @@ -139,9 +139,9 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => { /> )} - {state === 'signed-text' && ( + {state === 'signed-text' && signature?.typedSignature && (

- {signature?.typedSignature} + {signature.typedSignature}

)} 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 index d5efcb3df..329b9938b 100644 --- a/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx @@ -60,19 +60,16 @@ export const SigningFieldContainer = ({ 'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2', )} > - {!field.inserted && !loading && ( - - )} - + {children} From b8b8b4dbadc26d157f936a7640f9845be9c9c675 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Sat, 26 Aug 2023 13:19:47 +0530 Subject: [PATCH 04/10] chore: updated footer component Signed-off-by: Adithya Krishna --- .../web/src/components/(marketing)/footer.tsx | 79 +++++++------------ 1 file changed, 28 insertions(+), 51 deletions(-) diff --git a/apps/web/src/components/(marketing)/footer.tsx b/apps/web/src/components/(marketing)/footer.tsx index 823ece92e..df47b05da 100644 --- a/apps/web/src/components/(marketing)/footer.tsx +++ b/apps/web/src/components/(marketing)/footer.tsx @@ -10,6 +10,19 @@ import { cn } from '@documenso/ui/lib/utils'; export type FooterProps = HTMLAttributes; export const Footer = ({ className, ...props }: FooterProps) => { + const socialLinks = [ + { href: 'https://twitter.com/documenso', icon: }, + { href: 'https://github.com/documenso/documenso', icon: }, + { href: 'https://documenso.slack.com', icon: }, + ]; + + const footerLinks = [ + { href: '/pricing', text: 'Pricing' }, + { href: 'https://status.documenso.com', text: 'Status', target: '_blank' }, + { href: 'mailto:support@documenso.com', text: 'Support' }, + // { href: '/privacy', text: 'Privacy'} + ]; + return (
@@ -19,61 +32,25 @@ export const Footer = ({ className, ...props }: FooterProps) => {
- - - - - - - - - - - + {socialLinks.map((link, index) => ( + + {link.icon} + + ))}
- - Pricing - - - - Status - - - - Support - - - {/* - Privacy - */} + {footerLinks.map((link, index) => ( + + {link.text} + + ))}
From f41c78e8e353697b8f53582bed0498ae743cfa3f Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Sun, 27 Aug 2023 07:24:39 +0530 Subject: [PATCH 05/10] feat: updated rendeing of items using map Signed-off-by: Adithya Krishna --- .../faster-smarter-beautiful-bento.tsx | 54 ++++++------- .../(marketing)/open-build-template-bento.tsx | 55 +++++++------- .../share-connect-paid-widget-bento.tsx | 76 +++++++++---------- 3 files changed, 93 insertions(+), 92 deletions(-) diff --git a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx b/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx index 2cbaaef53..8b7eaf15c 100644 --- a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx +++ b/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx @@ -16,6 +16,21 @@ export const FasterSmarterBeautifulBento = ({ className, ...props }: FasterSmarterBeautifulBentoProps) => { + const featureCards = [ + { + title: 'Beautiful.', + description: + 'Because signing should be celebrated. That’s why we care about the smallest detail in our product.', + image: cardBeautifulFigure, + }, + { + title: 'Smart.', + description: + 'Our custom templates come with smart rules that can help you save time and energy.', + image: cardSmartFigure, + }, + ]; + return (
@@ -45,32 +60,19 @@ export const FasterSmarterBeautifulBento = ({ - - -

- Beautiful. - Because signing should be celebrated. That’s why we care about the smallest detail in - our product. -

- -
- its fast -
- - - - - -

- Smart. - Our custom templates come with smart rules that can help you save time and energy. -

- -
- its fast -
- - + {featureCards.map((card, index) => ( + + +

+ {card.title} + {card.description} +

+
+ Its fast +
+ + + ))}
); diff --git a/apps/web/src/components/(marketing)/open-build-template-bento.tsx b/apps/web/src/components/(marketing)/open-build-template-bento.tsx index e7920500b..779ef36e5 100644 --- a/apps/web/src/components/(marketing)/open-build-template-bento.tsx +++ b/apps/web/src/components/(marketing)/open-build-template-bento.tsx @@ -13,6 +13,22 @@ import cardTemplateFigure from '~/assets/card-template-figure.png'; export type OpenBuildTemplateBentoProps = HTMLAttributes; export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => { + const cardData = [ + { + title: 'Build on top.', + description: 'Make it your own through advanced customization and adjustability.', + image: cardBuildFigure, + imageSize: 'max-w-xs', + }, + { + title: 'Template Store (Soon).', + description: + 'Choose a template from the community app store. Or submit your own template for others to use.', + image: cardTemplateFigure, + imageSize: 'max-w-sm', + }, + ]; + return (
@@ -42,32 +58,19 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat - - -

- Build on top. - Make it your own through advanced customization and adjustability. -

- -
- its fast -
- - - - - -

- Template Store (Soon). - Choose a template from the community app store. Or submit your own template for others - to use. -

- -
- its fast -
- - + {cardData.map((card, index) => ( + + +

+ {card.title} + {card.description} +

+
+ Its fast +
+ + + ))}
); diff --git a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx b/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx index 05b6a3232..8c7fa74e5 100644 --- a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx +++ b/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx @@ -17,6 +17,29 @@ export const ShareConnectPaidWidgetBento = ({ className, ...props }: ShareConnectPaidWidgetBentoProps) => { + const cardData = [ + { + title: 'Connections (Soon).', + description: + 'Create connections and automations with Zapier and more to integrate with your favorite tools.', + image: cardConnectionsFigure, + imageSize: 'max-w-sm', + }, + { + title: 'Get paid (Soon).', + description: 'Integrated payments with stripe so you don’t have to worry about getting paid.', + image: cardPaidFigure, + imageSize: 'max-w-[14rem]', + }, + { + title: 'React Widget (Soon).', + description: + 'Easily embed Documenso into your product. Simply copy and paste our react widget into your application.', + image: cardWidgetFigure, + imageSize: 'max-w-xs', + }, + ]; + return (
@@ -45,46 +68,19 @@ export const ShareConnectPaidWidgetBento = ({ - - -

- Connections (Soon). - Create connections and automations with Zapier and more to integrate with your - favorite tools. -

- -
- its fast -
- - - - - -

- Get paid (Soon). - Integrated payments with stripe so you don’t have to worry about getting paid. -

- -
- its fast -
- - - - - -

- React Widget (Soon). - Easily embed Documenso into your product. Simply copy and paste our react widget into - your application. -

- -
- its fast -
- - + {cardData.map((card, index) => ( + + +

+ {card.title} + {card.description} +

+
+ Its fast +
+ + + ))}
); From 3c1790ba83d5ff8b24bbf50cabadf5f9532b335a Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 28 Aug 2023 12:44:50 +0530 Subject: [PATCH 06/10] chore: made requested changes Signed-off-by: Adithya Krishna --- .../src/app/(dashboard)/dashboard/page.tsx | 23 +++--- .../app/(signing)/sign/[token]/date-field.tsx | 18 ++--- .../sign/[token]/signing-field-container.tsx | 22 +++--- .../faster-smarter-beautiful-bento.tsx | 54 +++++++------ .../web/src/components/(marketing)/footer.tsx | 14 ++-- .../(marketing)/open-build-template-bento.tsx | 55 +++++++------- .../share-connect-paid-widget-bento.tsx | 76 ++++++++++--------- 7 files changed, 129 insertions(+), 133 deletions(-) diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx index 6af737a68..a9d650eb6 100644 --- a/apps/web/src/app/(dashboard)/dashboard/page.tsx +++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx @@ -34,23 +34,22 @@ export default async function DashboardPage() { }), ]); - const cardData = [ - { icon: FileCheck, title: 'Completed', status: stats.COMPLETED }, - { icon: File, title: 'Drafts', status: stats.DRAFT }, - { icon: Clock, title: 'Pending', status: stats.PENDING }, - ]; - return (

Dashboard

+
- {cardData.map((card) => ( - - - - ))} + + + + + + + + +
- ; +
diff --git a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx index 599aa8358..8e2201df9 100644 --- a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx @@ -82,17 +82,13 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
)} -

- {field.inserted ? field.customText : 'Date'} -

+ {!field.inserted && ( +

Date

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

{field.customText}

+ )} ); }; 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 index 329b9938b..cdf6dee24 100644 --- a/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx @@ -60,16 +60,18 @@ export const SigningFieldContainer = ({ 'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2', )} > - + {!field.inserted && !loading && ( + + )} {children} diff --git a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx b/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx index 8b7eaf15c..2cbaaef53 100644 --- a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx +++ b/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx @@ -16,21 +16,6 @@ export const FasterSmarterBeautifulBento = ({ className, ...props }: FasterSmarterBeautifulBentoProps) => { - const featureCards = [ - { - title: 'Beautiful.', - description: - 'Because signing should be celebrated. That’s why we care about the smallest detail in our product.', - image: cardBeautifulFigure, - }, - { - title: 'Smart.', - description: - 'Our custom templates come with smart rules that can help you save time and energy.', - image: cardSmartFigure, - }, - ]; - return (
@@ -60,19 +45,32 @@ export const FasterSmarterBeautifulBento = ({ - {featureCards.map((card, index) => ( - - -

- {card.title} - {card.description} -

-
- Its fast -
- - - ))} + + +

+ Beautiful. + Because signing should be celebrated. That’s why we care about the smallest detail in + our product. +

+ +
+ its fast +
+ + + + + +

+ Smart. + Our custom templates come with smart rules that can help you save time and energy. +

+ +
+ its fast +
+ +
); diff --git a/apps/web/src/components/(marketing)/footer.tsx b/apps/web/src/components/(marketing)/footer.tsx index df47b05da..255d91985 100644 --- a/apps/web/src/components/(marketing)/footer.tsx +++ b/apps/web/src/components/(marketing)/footer.tsx @@ -9,13 +9,13 @@ import { cn } from '@documenso/ui/lib/utils'; export type FooterProps = HTMLAttributes; -export const Footer = ({ className, ...props }: FooterProps) => { - const socialLinks = [ - { href: 'https://twitter.com/documenso', icon: }, - { href: 'https://github.com/documenso/documenso', icon: }, - { href: 'https://documenso.slack.com', icon: }, - ]; +const SOCIAL_LINKS = [ + { href: 'https://twitter.com/documenso', icon: }, + { href: 'https://github.com/documenso/documenso', icon: }, + { href: 'https://documenso.slack.com', icon: }, +]; +export const Footer = ({ className, ...props }: FooterProps) => { const footerLinks = [ { href: '/pricing', text: 'Pricing' }, { href: 'https://status.documenso.com', text: 'Status', target: '_blank' }, @@ -32,7 +32,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
- {socialLinks.map((link, index) => ( + {SOCIAL_LINKS.map((link, index) => ( {link.icon} diff --git a/apps/web/src/components/(marketing)/open-build-template-bento.tsx b/apps/web/src/components/(marketing)/open-build-template-bento.tsx index 779ef36e5..e7920500b 100644 --- a/apps/web/src/components/(marketing)/open-build-template-bento.tsx +++ b/apps/web/src/components/(marketing)/open-build-template-bento.tsx @@ -13,22 +13,6 @@ import cardTemplateFigure from '~/assets/card-template-figure.png'; export type OpenBuildTemplateBentoProps = HTMLAttributes; export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => { - const cardData = [ - { - title: 'Build on top.', - description: 'Make it your own through advanced customization and adjustability.', - image: cardBuildFigure, - imageSize: 'max-w-xs', - }, - { - title: 'Template Store (Soon).', - description: - 'Choose a template from the community app store. Or submit your own template for others to use.', - image: cardTemplateFigure, - imageSize: 'max-w-sm', - }, - ]; - return (
@@ -58,19 +42,32 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat - {cardData.map((card, index) => ( - - -

- {card.title} - {card.description} -

-
- Its fast -
- - - ))} + + +

+ Build on top. + Make it your own through advanced customization and adjustability. +

+ +
+ its fast +
+ + + + + +

+ Template Store (Soon). + Choose a template from the community app store. Or submit your own template for others + to use. +

+ +
+ its fast +
+ +
); diff --git a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx b/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx index 8c7fa74e5..05b6a3232 100644 --- a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx +++ b/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx @@ -17,29 +17,6 @@ export const ShareConnectPaidWidgetBento = ({ className, ...props }: ShareConnectPaidWidgetBentoProps) => { - const cardData = [ - { - title: 'Connections (Soon).', - description: - 'Create connections and automations with Zapier and more to integrate with your favorite tools.', - image: cardConnectionsFigure, - imageSize: 'max-w-sm', - }, - { - title: 'Get paid (Soon).', - description: 'Integrated payments with stripe so you don’t have to worry about getting paid.', - image: cardPaidFigure, - imageSize: 'max-w-[14rem]', - }, - { - title: 'React Widget (Soon).', - description: - 'Easily embed Documenso into your product. Simply copy and paste our react widget into your application.', - image: cardWidgetFigure, - imageSize: 'max-w-xs', - }, - ]; - return (
@@ -68,19 +45,46 @@ export const ShareConnectPaidWidgetBento = ({ - {cardData.map((card, index) => ( - - -

- {card.title} - {card.description} -

-
- Its fast -
- - - ))} + + +

+ Connections (Soon). + Create connections and automations with Zapier and more to integrate with your + favorite tools. +

+ +
+ its fast +
+ + + + + +

+ Get paid (Soon). + Integrated payments with stripe so you don’t have to worry about getting paid. +

+ +
+ its fast +
+ + + + + +

+ React Widget (Soon). + Easily embed Documenso into your product. Simply copy and paste our react widget into + your application. +

+ +
+ its fast +
+ +
); From b5f96ee2fcb4767300fc13a2dac127451d1c187d Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 28 Aug 2023 12:53:51 +0530 Subject: [PATCH 07/10] chore: made requested changes - v2 Signed-off-by: Adithya Krishna --- .../src/components/(marketing)/footer.tsx | 98 ++++++------------- .../src/app/(dashboard)/documents/page.tsx | 44 ++++++--- .../web/src/components/(marketing)/footer.tsx | 20 ++-- 3 files changed, 69 insertions(+), 93 deletions(-) diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx index 6ae66a0a4..ab0dd6e24 100644 --- a/apps/marketing/src/components/(marketing)/footer.tsx +++ b/apps/marketing/src/components/(marketing)/footer.tsx @@ -9,6 +9,22 @@ import { cn } from '@documenso/ui/lib/utils'; export type FooterProps = HTMLAttributes; +const SOCIAL_LINKS = [ + { href: 'https://twitter.com/documenso', icon: }, + { href: 'https://github.com/documenso/documenso', icon: }, + { href: 'https://documen.so/discord', icon: }, +]; + +const FOOTER_LINKS = [ + { href: '/pricing', text: 'Pricing' }, + { href: '/blog', text: 'Blog' }, + { href: '/open', text: 'Open' }, + { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' }, + { href: 'https://status.documenso.com', text: 'Status', target: '_blank' }, + { href: 'mailto:support@documenso.com', text: 'Support' }, + { href: '/privacy', text: 'Privacy' }, +]; + export const Footer = ({ className, ...props }: FooterProps) => { return (
@@ -19,77 +35,25 @@ export const Footer = ({ className, ...props }: FooterProps) => {
- - - - - - - - - - - + {SOCIAL_LINKS.map((link, index) => ( + + {link.icon} + + ))}
- - Pricing - - - - Blog - - - - Open - - - - Shop - - - - Status - - - - Support - - - - Privacy - + {FOOTER_LINKS.map((link, index) => ( + + {link.text} + + ))}
diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx index 8ac33be51..834483757 100644 --- a/apps/web/src/app/(dashboard)/documents/page.tsx +++ b/apps/web/src/app/(dashboard)/documents/page.tsx @@ -64,12 +64,6 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage return `/documents?${params.toString()}`; }; - const documentStatuses = [ - InternalDocumentStatus.PENDING, - InternalDocumentStatus.COMPLETED, - InternalDocumentStatus.DRAFT, - ]; - return (
@@ -79,17 +73,35 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
- {documentStatuses.map((status) => ( - - - + + + - - {Math.min(stats[status], 99)} - - - - ))} + + {Math.min(stats.PENDING, 99)} + + + + + + + + + + {Math.min(stats.COMPLETED, 99)} + + + + + + + + + + {Math.min(stats.DRAFT, 99)} + + + All diff --git a/apps/web/src/components/(marketing)/footer.tsx b/apps/web/src/components/(marketing)/footer.tsx index 255d91985..a5fadfcf8 100644 --- a/apps/web/src/components/(marketing)/footer.tsx +++ b/apps/web/src/components/(marketing)/footer.tsx @@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react'; import Image from 'next/image'; import Link from 'next/link'; -import { Github, Slack, Twitter } from 'lucide-react'; +import { Github, MessagesSquare, Twitter } from 'lucide-react'; import { cn } from '@documenso/ui/lib/utils'; @@ -12,17 +12,17 @@ export type FooterProps = HTMLAttributes; const SOCIAL_LINKS = [ { href: 'https://twitter.com/documenso', icon: }, { href: 'https://github.com/documenso/documenso', icon: }, - { href: 'https://documenso.slack.com', icon: }, + { href: 'https://documen.so/discord', icon: }, +]; + +const FOOTER_LINKS = [ + { href: '/pricing', text: 'Pricing' }, + { href: 'https://status.documenso.com', text: 'Status', target: '_blank' }, + { href: 'mailto:support@documenso.com', text: 'Support' }, + // { href: '/privacy', text: 'Privacy'} ]; export const Footer = ({ className, ...props }: FooterProps) => { - const footerLinks = [ - { href: '/pricing', text: 'Pricing' }, - { href: 'https://status.documenso.com', text: 'Status', target: '_blank' }, - { href: 'mailto:support@documenso.com', text: 'Support' }, - // { href: '/privacy', text: 'Privacy'} - ]; - return (
@@ -41,7 +41,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
- {footerLinks.map((link, index) => ( + {FOOTER_LINKS.map((link, index) => ( Date: Mon, 28 Aug 2023 12:54:55 +0530 Subject: [PATCH 08/10] fix: reverted line change Signed-off-by: Adithya Krishna --- .../src/app/(signing)/sign/[token]/signing-field-container.tsx | 1 + 1 file changed, 1 insertion(+) 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 index cdf6dee24..d5efcb3df 100644 --- a/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx @@ -72,6 +72,7 @@ export const SigningFieldContainer = ({ Remove )} + {children} From c161a8109b1d6558049e4f8a60fb364b8e1acd02 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 28 Aug 2023 12:58:30 +0530 Subject: [PATCH 09/10] fix: removed passHref and updated card Signed-off-by: Adithya Krishna --- .../src/app/(dashboard)/dashboard/page.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx index a9d650eb6..4fcf867ec 100644 --- a/apps/web/src/app/(dashboard)/dashboard/page.tsx +++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx @@ -34,20 +34,22 @@ export default async function DashboardPage() { }), ]); + const cardData = [ + { icon: FileCheck, title: 'Completed', status: stats.COMPLETED }, + { icon: File, title: 'Drafts', status: stats.DRAFT }, + { icon: Clock, title: 'Pending', status: stats.PENDING }, + ]; + return (

Dashboard

- - - - - - - - - + {cardData.map((card) => ( + + + + ))}
From 34e962cc48e5bfdb296b7013f1e4bd90e8ad49de Mon Sep 17 00:00:00 2001 From: Mythie Date: Thu, 31 Aug 2023 14:06:19 +1000 Subject: [PATCH 10/10] fix: minor updates --- .../src/app/(dashboard)/dashboard/page.tsx | 29 +- .../sign/[token]/signature-field.tsx | 5 +- .../src/components/(marketing)/callout.tsx | 66 --- .../(marketing)/claim-plan-dialog.tsx | 150 ------- .../faster-smarter-beautiful-bento.tsx | 77 ---- .../web/src/components/(marketing)/footer.tsx | 63 --- .../web/src/components/(marketing)/header.tsx | 32 -- apps/web/src/components/(marketing)/hero.tsx | 225 ---------- .../(marketing)/open-build-template-bento.tsx | 74 ---- .../(marketing)/password-reveal.tsx | 33 -- .../components/(marketing)/pricing-table.tsx | 180 -------- .../share-connect-paid-widget-bento.tsx | 91 ---- .../web/src/components/(marketing)/widget.tsx | 402 ------------------ 13 files changed, 24 insertions(+), 1403 deletions(-) delete mode 100644 apps/web/src/components/(marketing)/callout.tsx delete mode 100644 apps/web/src/components/(marketing)/claim-plan-dialog.tsx delete mode 100644 apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx delete mode 100644 apps/web/src/components/(marketing)/footer.tsx delete mode 100644 apps/web/src/components/(marketing)/header.tsx delete mode 100644 apps/web/src/components/(marketing)/hero.tsx delete mode 100644 apps/web/src/components/(marketing)/open-build-template-bento.tsx delete mode 100644 apps/web/src/components/(marketing)/password-reveal.tsx delete mode 100644 apps/web/src/components/(marketing)/pricing-table.tsx delete mode 100644 apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx delete mode 100644 apps/web/src/components/(marketing)/widget.tsx diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx index a83b2e8cc..77b18b98c 100644 --- a/apps/web/src/app/(dashboard)/dashboard/page.tsx +++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx @@ -5,6 +5,7 @@ import { Clock, File, FileCheck } from 'lucide-react'; import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session'; import { findDocuments } from '@documenso/lib/server-only/document/find-documents'; import { getStats } from '@documenso/lib/server-only/document/get-stats'; +import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client'; import { Table, TableBody, @@ -21,6 +22,24 @@ import { LocaleDate } from '~/components/formatter/locale-date'; import { UploadDocument } from './upload-document'; +const CARD_DATA = [ + { + icon: FileCheck, + title: 'Completed', + status: InternalDocumentStatus.COMPLETED, + }, + { + icon: File, + title: 'Drafts', + status: InternalDocumentStatus.DRAFT, + }, + { + icon: Clock, + title: 'Pending', + status: InternalDocumentStatus.PENDING, + }, +]; + export default async function DashboardPage() { const user = await getRequiredServerComponentSession(); @@ -34,20 +53,14 @@ export default async function DashboardPage() { }), ]); - const cardData = [ - { icon: FileCheck, title: 'Completed', status: stats.COMPLETED }, - { icon: File, title: 'Drafts', status: stats.DRAFT }, - { icon: Clock, title: 'Pending', status: stats.PENDING }, - ]; - return (

Dashboard

- {cardData.map((card) => ( + {CARD_DATA.map((card) => ( - + ))}
diff --git a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx index cada25e06..68a61fb67 100644 --- a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx +++ b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx @@ -139,9 +139,10 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => { /> )} - {state === 'signed-text' && signature?.typedSignature && ( + {state === 'signed-text' && (

- {signature.typedSignature} + {/* This optional chaining is intentional, we don't want to move the check into the condition above */} + {signature?.typedSignature}

)} diff --git a/apps/web/src/components/(marketing)/callout.tsx b/apps/web/src/components/(marketing)/callout.tsx deleted file mode 100644 index d83983141..000000000 --- a/apps/web/src/components/(marketing)/callout.tsx +++ /dev/null @@ -1,66 +0,0 @@ -'use client'; - -import Link from 'next/link'; - -import { Github } from 'lucide-react'; -import { usePlausible } from 'next-plausible'; - -import { Button } from '@documenso/ui/primitives/button'; - -export type CalloutProps = { - starCount?: number; - [key: string]: unknown; -}; - -export const Callout = ({ starCount }: CalloutProps) => { - const event = usePlausible(); - - const onSignUpClick = () => { - const el = document.getElementById('email'); - - if (el) { - const { top } = el.getBoundingClientRect(); - - window.scrollTo({ - top: top - 120, - behavior: 'smooth', - }); - - setTimeout(() => { - el.focus(); - }, 500); - } - }; - - return ( -
- - - event('view-github')} - > - - -
- ); -}; diff --git a/apps/web/src/components/(marketing)/claim-plan-dialog.tsx b/apps/web/src/components/(marketing)/claim-plan-dialog.tsx deleted file mode 100644 index 1f78c5292..000000000 --- a/apps/web/src/components/(marketing)/claim-plan-dialog.tsx +++ /dev/null @@ -1,150 +0,0 @@ -'use client'; - -import React, { useState } from 'react'; - -import { useSearchParams } from 'next/navigation'; - -import { zodResolver } from '@hookform/resolvers/zod'; -import { Info, Loader } from 'lucide-react'; -import { usePlausible } from 'next-plausible'; -import { useForm } from 'react-hook-form'; -import { z } from 'zod'; - -import { cn } from '@documenso/ui/lib/utils'; -import { Button } from '@documenso/ui/primitives/button'; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} 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 { claimPlan } from '~/api/claim-plan/fetcher'; - -import { FormErrorMessage } from '../form/form-error-message'; - -export const ZClaimPlanDialogFormSchema = z.object({ - name: z.string().min(3), - email: z.string().email(), -}); - -export type TClaimPlanDialogFormSchema = z.infer; - -export type ClaimPlanDialogProps = { - className?: string; - planId: string; - children: React.ReactNode; -}; - -export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => { - const params = useSearchParams(); - const { toast } = useToast(); - const event = usePlausible(); - - const [open, setOpen] = useState(() => params?.get('cancelled') === 'true'); - - const { - register, - handleSubmit, - formState: { errors, isSubmitting }, - } = useForm({ - mode: 'onBlur', - defaultValues: { - name: params?.get('name') ?? '', - email: params?.get('email') ?? '', - }, - resolver: zodResolver(ZClaimPlanDialogFormSchema), - }); - - const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => { - try { - const delay = new Promise((resolve) => { - setTimeout(resolve, 1000); - }); - - const [redirectUrl] = await Promise.all([ - claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }), - delay, - ]); - - event('claim-plan-pricing'); - - window.location.href = redirectUrl; - } catch (error) { - event('claim-plan-failed'); - - toast({ - title: 'Something went wrong', - description: error instanceof Error ? error.message : 'Please try again later.', - variant: 'destructive', - }); - } - }; - - return ( - - {children} - - - - Claim your plan - - - We're almost there! Please enter your email address and name to claim your plan. - - - -
- {params?.get('cancelled') === 'true' && ( -
-
-
- -
-
-

- You have cancelled the payment process. If you didn't mean to do this, please - try again. -

-
-
-
- )} - -
- - - - - -
- -
- - - - - -
- - -
- - - ); -}; diff --git a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx b/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx deleted file mode 100644 index 2cbaaef53..000000000 --- a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { HTMLAttributes } from 'react'; - -import Image from 'next/image'; - -import { cn } from '@documenso/ui/lib/utils'; -import { Card, CardContent } from '@documenso/ui/primitives/card'; - -import backgroundPattern from '~/assets/background-pattern.png'; -import cardBeautifulFigure from '~/assets/card-beautiful-figure.png'; -import cardFastFigure from '~/assets/card-fast-figure.png'; -import cardSmartFigure from '~/assets/card-smart-figure.png'; - -export type FasterSmarterBeautifulBentoProps = HTMLAttributes; - -export const FasterSmarterBeautifulBento = ({ - className, - ...props -}: FasterSmarterBeautifulBentoProps) => { - return ( -
-
- background pattern -
-

- A 10x better signing experience. - Faster, smarter and more beautiful. -

- -
- - -

- Fast. - When it comes to sending or receiving a contract, you can count on lightning-fast - speeds. -

- -
- its fast -
- - - - - -

- Beautiful. - Because signing should be celebrated. That’s why we care about the smallest detail in - our product. -

- -
- its fast -
- - - - - -

- Smart. - Our custom templates come with smart rules that can help you save time and energy. -

- -
- its fast -
- - -
-
- ); -}; diff --git a/apps/web/src/components/(marketing)/footer.tsx b/apps/web/src/components/(marketing)/footer.tsx deleted file mode 100644 index a5fadfcf8..000000000 --- a/apps/web/src/components/(marketing)/footer.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { HTMLAttributes } from 'react'; - -import Image from 'next/image'; -import Link from 'next/link'; - -import { Github, MessagesSquare, Twitter } from 'lucide-react'; - -import { cn } from '@documenso/ui/lib/utils'; - -export type FooterProps = HTMLAttributes; - -const SOCIAL_LINKS = [ - { href: 'https://twitter.com/documenso', icon: }, - { href: 'https://github.com/documenso/documenso', icon: }, - { href: 'https://documen.so/discord', icon: }, -]; - -const FOOTER_LINKS = [ - { href: '/pricing', text: 'Pricing' }, - { href: 'https://status.documenso.com', text: 'Status', target: '_blank' }, - { href: 'mailto:support@documenso.com', text: 'Support' }, - // { href: '/privacy', text: 'Privacy'} -]; - -export const Footer = ({ className, ...props }: FooterProps) => { - return ( -
-
-
- - Documenso Logo - - -
- {SOCIAL_LINKS.map((link, index) => ( - - {link.icon} - - ))} -
-
- -
- {FOOTER_LINKS.map((link, index) => ( - - {link.text} - - ))} -
-
-
-

- © {new Date().getFullYear()} Documenso, Inc. All rights reserved. -

-
-
- ); -}; diff --git a/apps/web/src/components/(marketing)/header.tsx b/apps/web/src/components/(marketing)/header.tsx deleted file mode 100644 index 5a1fa3b89..000000000 --- a/apps/web/src/components/(marketing)/header.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { HTMLAttributes } from 'react'; - -import Image from 'next/image'; -import Link from 'next/link'; - -import { cn } from '@documenso/ui/lib/utils'; - -export type HeaderProps = HTMLAttributes; - -export const Header = ({ className, ...props }: HeaderProps) => { - return ( -
- - Documenso Logo - - -
- - Pricing - - - - Sign in - -
-
- ); -}; diff --git a/apps/web/src/components/(marketing)/hero.tsx b/apps/web/src/components/(marketing)/hero.tsx deleted file mode 100644 index 7896a010e..000000000 --- a/apps/web/src/components/(marketing)/hero.tsx +++ /dev/null @@ -1,225 +0,0 @@ -'use client'; - -import Image from 'next/image'; -import Link from 'next/link'; - -import { Variants, motion } from 'framer-motion'; -import { Github } from 'lucide-react'; -import { usePlausible } from 'next-plausible'; - -import { cn } from '@documenso/ui/lib/utils'; -import { Button } from '@documenso/ui/primitives/button'; - -import backgroundPattern from '~/assets/background-pattern.png'; - -import { Widget } from './widget'; - -export type HeroProps = { - className?: string; - starCount?: number; - [key: string]: unknown; -}; - -const BackgroundPatternVariants: Variants = { - initial: { - opacity: 0, - }, - - animate: { - opacity: 1, - - transition: { - delay: 1, - duration: 1.2, - }, - }, -}; - -const HeroTitleVariants: Variants = { - initial: { - opacity: 0, - y: 60, - }, - animate: { - opacity: 1, - y: 0, - transition: { - duration: 0.5, - }, - }, -}; - -export const Hero = ({ className, starCount, ...props }: HeroProps) => { - const event = usePlausible(); - - const onSignUpClick = () => { - const el = document.getElementById('email'); - - if (el) { - const { top } = el.getBoundingClientRect(); - - window.scrollTo({ - top: top - 120, - behavior: 'smooth', - }); - - requestAnimationFrame(() => { - el.focus(); - }); - } - }; - - return ( - -
- - background pattern - -
- -
- - Document signing, - finally open source. - - - - - - event('view-github')}> - - - - -
- - - Documenso - The open source DocuSign alternative | Product Hunt - - -
- - - - Documenso Supporter Pledge -

- Our mission is to create an open signing infrastructure that empowers the world, - enabling businesses to embrace openness, cooperation, and transparency. We believe - that signing, as a fundamental act, should embody these values. By offering an - open-source signing solution, we aim to make document signing accessible, transparent, - and trustworthy. -

- -

- Through our platform, called Documenso, we strive to earn your trust by allowing - self-hosting and providing complete visibility into its inner workings. We value - inclusivity and foster an environment where diverse perspectives and contributions are - welcomed, even though we may not implement them all. -

- -

- At Documenso, we envision a web-enabled future for business and contracts, and we are - committed to being the leading provider of open signing infrastructure. By combining - exceptional product design with open-source principles, we aim to deliver a robust and - well-designed application that exceeds your expectations. -

- -

- We understand that exceptional products are born from exceptional communities, and we - invite you to join our open-source community. Your contributions, whether technical or - non-technical, will help shape the future of signing. Together, we can create a better - future for everyone. -

- -

- Today we invite you to join us on this journey: By signing this mission statement you - signal your support of Documenso's mission{' '} - - (in a non-legally binding, but heartfelt way) - {' '} - and lock in the early supporter plan for forever, including everything we build this - year. -

- -
-

Timur & Lucas

-
- -
- Timur Ercan & Lucas Smith -

Co-Founders, Documenso

-
- - -
- - ); -}; diff --git a/apps/web/src/components/(marketing)/open-build-template-bento.tsx b/apps/web/src/components/(marketing)/open-build-template-bento.tsx deleted file mode 100644 index e7920500b..000000000 --- a/apps/web/src/components/(marketing)/open-build-template-bento.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { HTMLAttributes } from 'react'; - -import Image from 'next/image'; - -import { cn } from '@documenso/ui/lib/utils'; -import { Card, CardContent } from '@documenso/ui/primitives/card'; - -import backgroundPattern from '~/assets/background-pattern.png'; -import cardBuildFigure from '~/assets/card-build-figure.png'; -import cardOpenFigure from '~/assets/card-open-figure.png'; -import cardTemplateFigure from '~/assets/card-template-figure.png'; - -export type OpenBuildTemplateBentoProps = HTMLAttributes; - -export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => { - return ( -
-
- background pattern -
-

- Truly your own. - Customise and expand. -

- -
- - -

- Open Source or Hosted. - It’s up to you. Either clone our repository or rely on our easy to use hosting - solution. -

- -
- its fast -
- - - - - -

- Build on top. - Make it your own through advanced customization and adjustability. -

- -
- its fast -
- - - - - -

- Template Store (Soon). - Choose a template from the community app store. Or submit your own template for others - to use. -

- -
- its fast -
- - -
-
- ); -}; diff --git a/apps/web/src/components/(marketing)/password-reveal.tsx b/apps/web/src/components/(marketing)/password-reveal.tsx deleted file mode 100644 index b31765943..000000000 --- a/apps/web/src/components/(marketing)/password-reveal.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client'; - -import { useToast } from '@documenso/ui/primitives/use-toast'; - -import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'; - -export type PasswordRevealProps = { - password: string; -}; - -export const PasswordReveal = ({ password }: PasswordRevealProps) => { - const { toast } = useToast(); - const [, copy] = useCopyToClipboard(); - - const onCopyClick = () => { - void copy(password).then(() => { - toast({ - title: 'Copied to clipboard', - description: 'Your password has been copied to your clipboard.', - }); - }); - }; - - return ( - - ); -}; diff --git a/apps/web/src/components/(marketing)/pricing-table.tsx b/apps/web/src/components/(marketing)/pricing-table.tsx deleted file mode 100644 index 73003abdc..000000000 --- a/apps/web/src/components/(marketing)/pricing-table.tsx +++ /dev/null @@ -1,180 +0,0 @@ -'use client'; - -import { HTMLAttributes, useMemo, useState } from 'react'; - -import Link from 'next/link'; -import { useSearchParams } from 'next/navigation'; - -import { AnimatePresence, motion } from 'framer-motion'; -import { usePlausible } from 'next-plausible'; - -import { cn } from '@documenso/ui/lib/utils'; -import { Button } from '@documenso/ui/primitives/button'; - -import { ClaimPlanDialog } from './claim-plan-dialog'; - -export type PricingTableProps = HTMLAttributes; - -const SELECTED_PLAN_BAR_LAYOUT_ID = 'selected-plan-bar'; - -export const PricingTable = ({ className, ...props }: PricingTableProps) => { - const params = useSearchParams(); - const event = usePlausible(); - - const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>(() => - // eslint-disable-next-line turbo/no-undeclared-env-vars - params?.get('planId') === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID - ? 'YEARLY' - : 'MONTHLY', - ); - - const planId = useMemo(() => { - if (period === 'MONTHLY') { - // eslint-disable-next-line turbo/no-undeclared-env-vars - return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID; - } - - // eslint-disable-next-line turbo/no-undeclared-env-vars - return process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID; - }, [period]); - - return ( -
-
- - setPeriod('MONTHLY')} - > - Monthly - {period === 'MONTHLY' && ( - - )} - - - setPeriod('YEARLY')} - > - Yearly -
- Save $60 -
- {period === 'YEARLY' && ( - - )} - - -
- -
-
-

Self Hosted

-

Free

- -

- For small teams and individuals who need a simple solution -

- - - -
-

Host your own instance

-

Full Control

-

Customizability

-

Docker Ready

-

Community Support

-

Free, Forever

-
-
- -
-

Community

-
- - {period === 'MONTHLY' && $30} - {period === 'YEARLY' && $300} - -
- -

- For fast-growing companies that aim to scale across multiple teams. -

- - - - - -
-

Documenso Early Adopter Deal:

-

Join the movement

-

Simple signing solution

-

Email and Slack assistance

-

- Includes all upcoming features -

-

Fixed, straightforward pricing

-
-
- -
-

Enterprise

-

Pricing on request

- -

- For large organizations that need extra flexibility and control. -

- - event('enterprise-contact')} - > - - - -
-

Everything in Community, plus:

-

Custom Subdomain

-

Compliance Check

-

Guaranteed Uptime

-

Reporting & Analysis

-

24/7 Support

-
-
-
-
- ); -}; diff --git a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx b/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx deleted file mode 100644 index 05b6a3232..000000000 --- a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { HTMLAttributes } from 'react'; - -import Image from 'next/image'; - -import { cn } from '@documenso/ui/lib/utils'; -import { Card, CardContent } from '@documenso/ui/primitives/card'; - -import backgroundPattern from '~/assets/background-pattern.png'; -import cardConnectionsFigure from '~/assets/card-connections-figure.png'; -import cardPaidFigure from '~/assets/card-paid-figure.png'; -import cardSharingFigure from '~/assets/card-sharing-figure.png'; -import cardWidgetFigure from '~/assets/card-widget-figure.png'; - -export type ShareConnectPaidWidgetBentoProps = HTMLAttributes; - -export const ShareConnectPaidWidgetBento = ({ - className, - ...props -}: ShareConnectPaidWidgetBentoProps) => { - return ( -
-
- background pattern -
-

- Integrates with all your favourite tools. - Send, connect, receive and embed everywhere. -

- -
- - -

- Easy Sharing (Soon). - Receive your personal link to share with everyone you care about. -

- -
- its fast -
- - - - - -

- Connections (Soon). - Create connections and automations with Zapier and more to integrate with your - favorite tools. -

- -
- its fast -
- - - - - -

- Get paid (Soon). - Integrated payments with stripe so you don’t have to worry about getting paid. -

- -
- its fast -
- - - - - -

- React Widget (Soon). - Easily embed Documenso into your product. Simply copy and paste our react widget into - your application. -

- -
- its fast -
- - -
-
- ); -}; diff --git a/apps/web/src/components/(marketing)/widget.tsx b/apps/web/src/components/(marketing)/widget.tsx deleted file mode 100644 index 15e15d04c..000000000 --- a/apps/web/src/components/(marketing)/widget.tsx +++ /dev/null @@ -1,402 +0,0 @@ -'use client'; - -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 { Controller, useForm } from 'react-hook-form'; -import { z } from 'zod'; - -import { cn } from '@documenso/ui/lib/utils'; -import { Button } from '@documenso/ui/primitives/button'; -import { Card, CardContent } from '@documenso/ui/primitives/card'; -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from '@documenso/ui/primitives/dialog'; -import { Input } from '@documenso/ui/primitives/input'; -import { SignaturePad } from '@documenso/ui/primitives/signature-pad'; -import { useToast } from '@documenso/ui/primitives/use-toast'; - -import { claimPlan } from '~/api/claim-plan/fetcher'; - -import { FormErrorMessage } from '../form/form-error-message'; - -const ZWidgetFormSchema = z - .object({ - email: z.string().email({ message: 'Please enter a valid email address.' }), - name: z.string().min(3, { message: 'Please enter a valid name.' }), - }) - .and( - z.union([ - z.object({ - signatureDataUrl: z.string().min(1), - signatureText: z.null().or(z.string().max(0)), - }), - z.object({ - signatureDataUrl: z.null().or(z.string().max(0)), - signatureText: z.string().min(1), - }), - ]), - ); - -export type TWidgetFormSchema = z.infer; - -export type WidgetProps = HTMLAttributes; - -export const Widget = ({ className, children, ...props }: WidgetProps) => { - const { toast } = useToast(); - const event = usePlausible(); - - const [step, setStep] = useState<'EMAIL' | 'NAME' | 'SIGN'>('EMAIL'); - const [showSigningDialog, setShowSigningDialog] = useState(false); - const [draftSignatureDataUrl, setDraftSignatureDataUrl] = useState(null); - - const { - control, - register, - handleSubmit, - setValue, - trigger, - watch, - formState: { errors, isSubmitting, isValid }, - } = useForm({ - mode: 'onChange', - defaultValues: { - email: '', - name: '', - signatureDataUrl: null, - signatureText: '', - }, - resolver: zodResolver(ZWidgetFormSchema), - }); - - const signatureDataUrl = watch('signatureDataUrl'); - const signatureText = watch('signatureText'); - - const stepsRemaining = useMemo(() => { - if (step === 'NAME') { - return 2; - } - - if (step === 'SIGN') { - return 1; - } - - return 3; - }, [step]); - - const onNextStepClick = () => { - if (step === 'EMAIL') { - setStep('NAME'); - - setTimeout(() => { - document.querySelector('#name')?.focus(); - }, 0); - } - - if (step === 'NAME') { - setStep('SIGN'); - - setTimeout(() => { - document.querySelector('#signatureText')?.focus(); - }, 0); - } - }; - - const onEnterPress = (callback: () => void) => { - return (e: KeyboardEvent) => { - if (e.key === 'Enter') { - e.preventDefault(); - - callback(); - } - }; - }; - - const onSignatureConfirmClick = () => { - setValue('signatureDataUrl', draftSignatureDataUrl); - setValue('signatureText', ''); - - void trigger('signatureDataUrl'); - setShowSigningDialog(false); - }; - - const onFormSubmit = async ({ - email, - name, - signatureDataUrl, - signatureText, - }: TWidgetFormSchema) => { - try { - const delay = new Promise((resolve) => { - setTimeout(resolve, 1000); - }); - - // eslint-disable-next-line turbo/no-undeclared-env-vars - const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID; - - const claimPlanInput = signatureDataUrl - ? { - name, - email, - planId, - signatureDataUrl: signatureDataUrl!, - signatureText: null, - } - : { - name, - email, - planId, - signatureDataUrl: null, - signatureText: signatureText!, - }; - - const [result] = await Promise.all([claimPlan(claimPlanInput), delay]); - - event('claim-plan-widget'); - - window.location.href = result; - } catch (error) { - event('claim-plan-failed'); - - toast({ - title: 'Something went wrong', - description: error instanceof Error ? error.message : 'Please try again later.', - variant: 'destructive', - }); - } - }; - - return ( - <> - -
-
- {children} -
- -
-

Sign up for the community plan

-

- with Timur Ercan & Lucas Smith from Documenso -

- -
- - - - - - ( -
- - field.value !== '' && - !errors.email?.message && - onEnterPress(onNextStepClick)(e) - } - {...field} - /> - -
- -
-
- )} - /> - - - - - {(step === 'NAME' || step === 'SIGN') && ( - - - - ( -
- - field.value !== '' && - !errors.name?.message && - onEnterPress(onNextStepClick)(e) - } - {...field} - /> - -
- -
-
- )} - /> - - - - )} - - -
- -
-

{stepsRemaining} step(s) until signed

-

Minimise contract

-
- -
-
-
- - - setShowSigningDialog(true)} - > -
- {!signatureText && signatureDataUrl && ( - user signature - )} - - {signatureText && ( -

- {signatureText} -

- )} -
- -
e.stopPropagation()} - > - { - if (e.target.value !== '') { - setValue('signatureDataUrl', null); - } - }, - })} - /> - - -
- - - -
- - - - - - Add your signature - - - - By signing you signal your support of Documenso's mission in a

- non-legally binding, but heartfelt way.

-

You also unlock the option to purchase the early supporter plan including - everything we build this year for fixed price. - - - - - - - - - - - - - ); -};