feat: add integrations animation on the homepage

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
fix: downloaded files should have _signed (#1149 )
2025-11-10 04:22:32 +10:00 · 2024-06-11 17:24:30 +05:30 · 2024-06-05 14:56:02 +10:00 · 2024-06-05 14:40:45 +10:00 · 2024-05-07 10:19:09 +00:00
12 changed files with 303 additions and 28 deletions
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@ -36,7 +36,7 @@
    "react-confetti": "^6.1.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.9",
-    "react-icons": "^4.11.0",
+    "react-icons": "^5.2.1",
    "recharts": "^2.7.2",
    "sharp": "^0.33.1",
    "typescript": "5.2.2",
--- a/apps/marketing/src/components/(marketing)/integrations-data-flow.tsx
+++ b/apps/marketing/src/components/(marketing)/integrations-data-flow.tsx
@ -0,0 +1,83 @@
+'use client';
+
+import React, { forwardRef, useRef } from 'react';
+
+import { FileText, Hexagon, Shapes } from 'lucide-react';
+import { LiaGoogleDrive } from 'react-icons/lia';
+import { PiMicrosoftTeamsLogo } from 'react-icons/pi';
+import { TbBrandAirtable, TbBrandZapier } from 'react-icons/tb';
+
+import { AnimatedDataFlow } from '@documenso/ui/components/animate/animated-data-flow';
+import { cn } from '@documenso/ui/lib/utils';
+
+// eslint-disable-next-line react/display-name
+const Circle = forwardRef<HTMLDivElement, { className?: string; children?: React.ReactNode }>(
+  ({ className, children }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border-border z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export function DocumensoIntegrationsDataFlow() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const div1Ref = useRef<HTMLDivElement>(null);
+  const div2Ref = useRef<HTMLDivElement>(null);
+  const div3Ref = useRef<HTMLDivElement>(null);
+  const div4Ref = useRef<HTMLDivElement>(null);
+  const div5Ref = useRef<HTMLDivElement>(null);
+  const div6Ref = useRef<HTMLDivElement>(null);
+  const div7Ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className="bg-background relative z-[-2] flex h-full w-full max-w-[32rem] items-center justify-center overflow-hidden p-10"
+      ref={containerRef}
+    >
+      <div className="flex h-full w-full flex-row items-stretch justify-between gap-10">
+        <div className="flex flex-col justify-center gap-2">
+          <Circle className="bg-background" ref={div1Ref}>
+            <Shapes color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div2Ref}>
+            <Hexagon color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div3Ref}>
+            <FileText color="#A2E771" className="h-6 w-6" />
+          </Circle>
+        </div>
+        <div className="flex flex-col justify-center">
+          <Circle ref={div4Ref} className="bg-background h-16 w-16">
+            <TbBrandZapier color="#FF4A00" className="h-6 w-6" />
+          </Circle>
+        </div>
+        <div className="flex flex-col justify-center gap-2">
+          <Circle className="bg-background" ref={div5Ref}>
+            <LiaGoogleDrive color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div6Ref}>
+            <PiMicrosoftTeamsLogo color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div7Ref}>
+            <TbBrandAirtable color="#A2E771" className="h-6 w-6" />
+          </Circle>
+        </div>
+      </div>
+
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div1Ref} toRef={div4Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div2Ref} toRef={div4Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div3Ref} toRef={div4Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div5Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div6Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div7Ref} />
+    </div>
+  );
+}
--- a/apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx
+++ b/apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx
@ -3,13 +3,14 @@ import type { HTMLAttributes } from 'react';
 import Image from 'next/image';

 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
-import cardConnectionsFigure from '@documenso/assets/images/card-connections-figure.png';
 import cardPaidFigure from '@documenso/assets/images/card-paid-figure.png';
 import cardSharingFigure from '@documenso/assets/images/card-sharing-figure.png';
 import cardWidgetFigure from '@documenso/assets/images/card-widget-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';

+import { DocumensoIntegrationsDataFlow } from './integrations-data-flow';
+
 export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;

 export const ShareConnectPaidWidgetBento = ({
@ -56,12 +57,9 @@ export const ShareConnectPaidWidgetBento = ({
              favorite tools.
            </p>

-            <div className="flex items-center justify-center p-8">
-              <Image
-                src={cardConnectionsFigure}
-                alt="its fast"
-                className="w-full max-w-sm dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
-              />
+            <div className="flex w-full items-center justify-center p-0 md:p-8">
+              {/* Add Animated Beam */}
+              <DocumensoIntegrationsDataFlow />
            </div>
          </CardContent>
        </Card>
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -46,7 +46,7 @@
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.43.9",
    "react-hotkeys-hook": "^4.4.1",
-    "react-icons": "^4.11.0",
+    "react-icons": "^5.2.1",
    "react-rnd": "^10.4.1",
    "remeda": "^1.27.1",
    "sharp": "^0.33.1",
--- a/apps/web/src/app/(recipient)/d/[token]/direct-template.tsx
+++ b/apps/web/src/app/(recipient)/d/[token]/direct-template.tsx
@ -4,6 +4,7 @@ import { useState } from 'react';

 import { useRouter } from 'next/navigation';

+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { Field } from '@documenso/prisma/client';
 import { type Recipient } from '@documenso/prisma/client';
 import type { TemplateWithDetails } from '@documenso/prisma/types/template';
@ -47,6 +48,8 @@ export const DirectTemplatePageView = ({
  const [step, setStep] = useState<DirectTemplateStep>('configure');
  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);

+  const recipientRoleDescription = RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role];
+
  const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
    configure: {
      title: 'General',
@ -54,8 +57,8 @@ export const DirectTemplatePageView = ({
      stepIndex: 1,
    },
    sign: {
-      title: 'Sign document',
-      description: 'Sign the document to complete the process.',
+      title: `${recipientRoleDescription.actionVerb} document`,
+      description: `${recipientRoleDescription.actionVerb} the document to complete the process.`,
      stepIndex: 2,
    },
  };
--- a/package-lock.json
+++ b/package-lock.json
@ -60,7 +60,7 @@
        "react-confetti": "^6.1.0",
        "react-dom": "18.2.0",
        "react-hook-form": "^7.43.9",
-        "react-icons": "^4.11.0",
+        "react-icons": "^5.2.1",
        "recharts": "^2.7.2",
        "sharp": "^0.33.1",
        "typescript": "5.2.2",
@ -78,6 +78,14 @@
      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
      "dev": true
    },
+    "apps/marketing/node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "apps/marketing/node_modules/typescript": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
@ -127,7 +135,7 @@
        "react-dropzone": "^14.2.3",
        "react-hook-form": "^7.43.9",
        "react-hotkeys-hook": "^4.4.1",
-        "react-icons": "^4.11.0",
+        "react-icons": "^5.2.1",
        "react-rnd": "^10.4.1",
        "remeda": "^1.27.1",
        "sharp": "^0.33.1",
@ -155,6 +163,14 @@
      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
      "dev": true
    },
+    "apps/web/node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "apps/web/node_modules/typescript": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
@ -5836,6 +5852,14 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
    "node_modules/@radix-ui/react-id": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@ -20538,14 +20562,6 @@
        "react-dom": ">=16.8.1"
      }
    },
-    "node_modules/react-icons": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
-      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
    "node_modules/react-immutable-proptypes": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/react-immutable-proptypes/-/react-immutable-proptypes-2.2.0.tgz",
@ -27599,6 +27615,7 @@
        "@radix-ui/react-dialog": "^1.0.5",
        "@radix-ui/react-dropdown-menu": "^2.0.4",
        "@radix-ui/react-hover-card": "^1.0.5",
+        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.0.1",
        "@radix-ui/react-menubar": "^1.0.2",
        "@radix-ui/react-navigation-menu": "^1.1.2",
--- a/packages/email/templates/document-created-from-direct-template.tsx
+++ b/packages/email/templates/document-created-from-direct-template.tsx
@ -1,3 +1,4 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import config from '@documenso/tailwind-config';

 import {
@ -14,9 +15,11 @@ import {
 } from '../components';
 import TemplateDocumentImage from '../template-components/template-document-image';
 import { TemplateFooter } from '../template-components/template-footer';
+import { RecipientRole } from '.prisma/client';

 export type DocumentCompletedEmailTemplateProps = {
  recipientName?: string;
+  recipientRole?: RecipientRole;
  documentLink?: string;
  documentName?: string;
  assetBaseUrl?: string;
@ -24,11 +27,14 @@ export type DocumentCompletedEmailTemplateProps = {

 export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
  recipientName = 'John Doe',
+  recipientRole = RecipientRole.SIGNER,
  documentLink = 'http://localhost:3000',
  documentName = 'Open Source Pledge.pdf',
  assetBaseUrl = 'http://localhost:3002',
 }: DocumentCompletedEmailTemplateProps) => {
-  const previewText = `Completed Document`;
+  const action = RECIPIENT_ROLES_DESCRIPTION[recipientRole].actioned.toLowerCase();
+
+  const previewText = `Document created from direct template`;

  const getAssetUrl = (path: string) => {
    return new URL(path, assetBaseUrl).toString();
@ -61,7 +67,7 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({

                <Section>
                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
-                    {recipientName} signed a document by using one of your direct links
+                    {recipientName} {action} a document by using one of your direct links
                  </Text>

                  <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">
--- a/packages/lib/client-only/download-pdf.ts
+++ b/packages/lib/client-only/download-pdf.ts
@ -18,7 +18,7 @@ export const downloadPDF = async ({ documentData, fileName }: DownloadPDFProps)
  const baseTitle = (fileName ?? 'document').replace(/\.pdf$/, '');

  downloadFile({
-    filename: `${baseTitle}.pdf`,
+    filename: `${baseTitle}_signed.pdf`,
    data: blob,
  });
 };
--- a/packages/lib/server-only/template/create-document-from-direct-template.ts
+++ b/packages/lib/server-only/template/create-document-from-direct-template.ts
@ -480,6 +480,7 @@ export const createDocumentFromDirectTemplate = async ({
    // Send email to template owner.
    const emailTemplate = createElement(DocumentCreatedFromDirectTemplateEmailTemplate, {
      recipientName: directRecipientEmail,
+      recipientRole: directTemplateRecipient.role,
      documentLink: `${formatDocumentsPath(document.team?.url)}/${document.id}`,
      documentName: document.title,
      assetBaseUrl: NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000',
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@ -7,9 +7,6 @@ module.exports = {
  content: ['src/**/*.{ts,tsx}'],
  theme: {
    extend: {
-      screens: {
-        print: { raw: 'print' },
-      },
      fontFamily: {
        sans: ['var(--font-sans)', ...fontFamily.sans],
        signature: ['var(--font-signature)'],
@ -138,6 +135,7 @@ module.exports = {
        '3xl': '1920px',
        '4xl': '2560px',
        '5xl': '3840px',
+        print: { raw: 'print' },
      },
    },
  },
--- a/packages/ui/components/animate/animated-data-flow.tsx
+++ b/packages/ui/components/animate/animated-data-flow.tsx
@ -0,0 +1,168 @@
+'use client';
+
+import { type RefObject, useEffect, useId, useState } from 'react';
+
+import { motion } from 'framer-motion';
+
+import { cn } from '../../lib/utils';
+
+export interface AnimatedDataFlowProps {
+  className?: string;
+  containerRef: RefObject<HTMLElement>;
+  fromRef: RefObject<HTMLElement>;
+  toRef: RefObject<HTMLElement>;
+  curvature?: number;
+  reverse?: boolean;
+  pathColor?: string;
+  pathWidth?: number;
+  pathOpacity?: number;
+  gradientStartColor?: string;
+  gradientStopColor?: string;
+  delay?: number;
+  duration?: number;
+  startXOffset?: number;
+  startYOffset?: number;
+  endXOffset?: number;
+  endYOffset?: number;
+}
+
+export const AnimatedDataFlow: React.FC<AnimatedDataFlowProps> = ({
+  className,
+  containerRef,
+  fromRef,
+  toRef,
+  curvature = 0,
+  reverse = false, // Include the reverse prop
+  duration = 5,
+  delay = 0,
+  pathColor = 'gray',
+  pathWidth = 2,
+  pathOpacity = 0.2,
+  gradientStartColor = '#A2E771',
+  gradientStopColor = '#1F5200',
+  startXOffset = 0,
+  startYOffset = 0,
+  endXOffset = 0,
+  endYOffset = 0,
+}) => {
+  const id = useId();
+  const [pathD, setPathD] = useState('');
+  const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
+
+  // Calculate the gradient coordinates based on the reverse prop
+  const gradientCoordinates = reverse
+    ? {
+        x1: ['90%', '-10%'],
+        x2: ['100%', '0%'],
+        y1: ['0%', '0%'],
+        y2: ['0%', '0%'],
+      }
+    : {
+        x1: ['10%', '110%'],
+        x2: ['0%', '100%'],
+        y1: ['0%', '0%'],
+        y2: ['0%', '0%'],
+      };
+
+  useEffect(() => {
+    const updatePath = () => {
+      if (containerRef.current && fromRef.current && toRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const rectA = fromRef.current.getBoundingClientRect();
+        const rectB = toRef.current.getBoundingClientRect();
+
+        const svgWidth = containerRect.width;
+        const svgHeight = containerRect.height;
+        setSvgDimensions({ width: svgWidth, height: svgHeight });
+
+        const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+        const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+
+        const controlY = startY - curvature;
+        const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
+        setPathD(d);
+      }
+    };
+
+    // Initialize ResizeObserver
+    const resizeObserver = new ResizeObserver((entries) => {
+      // For all entries, recalculate the path
+      // eslint-disable-next-line unused-imports/no-unused-vars
+      for (const entry of entries) {
+        updatePath();
+      }
+    });
+
+    // Observe the container element
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    // Call the updatePath initially to set the initial path
+    updatePath();
+
+    // Clean up the observer on component unmount
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
+
+  return (
+    <svg
+      fill="none"
+      width={svgDimensions.width}
+      height={svgDimensions.height}
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('pointer-events-none absolute left-0 top-0 transform-gpu stroke-2', className)}
+      viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
+    >
+      <path
+        d={pathD}
+        stroke={pathColor}
+        strokeWidth={pathWidth}
+        strokeOpacity={pathOpacity}
+        strokeLinecap="round"
+      />
+      <path
+        d={pathD}
+        strokeWidth={pathWidth}
+        stroke={`url(#${id})`}
+        strokeOpacity="1"
+        strokeLinecap="round"
+      />
+      <defs>
+        <motion.linearGradient
+          className="transform-gpu"
+          id={id}
+          gradientUnits={'userSpaceOnUse'}
+          initial={{
+            x1: '0%',
+            x2: '0%',
+            y1: '0%',
+            y2: '0%',
+          }}
+          animate={{
+            x1: gradientCoordinates.x1,
+            x2: gradientCoordinates.x2,
+            y1: gradientCoordinates.y1,
+            y2: gradientCoordinates.y2,
+          }}
+          transition={{
+            delay,
+            duration,
+            ease: [0.16, 1, 0.3, 1],
+            repeat: Infinity,
+            repeatDelay: 0,
+          }}
+        >
+          <stop stopColor={gradientStartColor} stopOpacity="0"></stop>
+          <stop stopColor={gradientStartColor}></stop>
+          <stop offset="32.5%" stopColor={gradientStopColor}></stop>
+          <stop offset="100%" stopColor={gradientStopColor} stopOpacity="0"></stop>
+        </motion.linearGradient>
+      </defs>
+    </svg>
+  );
+};
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -38,6 +38,7 @@
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.4",
    "@radix-ui/react-hover-card": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.1",
    "@radix-ui/react-menubar": "^1.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.2",
@ -76,4 +77,4 @@
    "ts-pattern": "^5.0.5",
    "zod": "^3.22.4"
  }
-}
+}
Author	SHA1	Message	Date
Adithya Krishna	5f22fd48d1	feat: add integrations animation on the homepage Signed-off-by: Adithya Krishna <aadithya794@gmail.com>	2024-06-11 17:24:30 +05:30
Lucas Smith	cc43139573	fix: downloaded files should have _signed (#1149 ) Modifies the generated filename for the downloaded PDF by appending "_signed" to the base title. ## Changes Made - Update the filename in the downloadFile function call to append "_signed" to the baseTitle variable. ## Testing Performed Tested the `downloadPDF` function locally to ensure that the downloaded PDF file has the correct filename with "_signed" appended.	2024-06-05 14:56:02 +10:00
David Nguyen	0c2306b745	fix: add correct role names for direct templates (#1179 ) ## Description Update the direct template signing process and emails to correctly reflect the role of the recipient who actioned the direct template. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - New Features - Dynamic updating of title and description based on recipient role in the document signing process. - Enhanced email templates to include recipient roles, providing more context in email notifications. - Improvements - More descriptive actions in email templates based on recipient roles, improving clarity for recipients. <!-- end of auto-generated comment: release notes by coderabbit.ai -->	2024-06-05 14:40:45 +10:00
Ephraim Atta-Duncan	f363dee761	fix: downloaded files should have _signed	2024-05-07 10:19:09 +00:00