chore: [INCOMPLETE] checkbox ui for all fields

2025-11-16 09:41:35 +10:00 · 2024-04-13 17:53:39 +00:00
parent aa951c1608
commit 507e8482dc
6 changed files with 142 additions and 121 deletions
--- a/apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx
@ -1,11 +1,10 @@
 'use client';

-import { useState, useTransition } from 'react';
+import { useCallback, useTransition } from 'react';

 import { useRouter } from 'next/navigation';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

@ -49,56 +48,41 @@ export const CheckboxField = ({ field, recipient }: CheckboxFieldProps) => {

  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;

-  const [localText, setLocalCustomText] = useState('');
-
  const form = useForm<z.infer<typeof CheckBoxSchema>>({
    resolver: zodResolver(CheckBoxSchema),
    defaultValues: {
-      check: true,
+      check: false,
    },
  });

-  const onPreSign = () => {
-    if (!localText) {
-      return false;
-    }
+  const onSign = useCallback(
+    async (authOptions?: TRecipientActionAuth) => {
+      try {
+        await signFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+          value: 'checked',
+          isBase64: true,
+          authOptions,
+        });

-    return true;
-  };
+        startTransition(() => router.refresh());
+      } catch (err) {
+        const error = AppError.parseError(err);

-  const onSign = async (authOptions?: TRecipientActionAuth) => {
-    try {
-      if (!localText) {
-        return;
+        if (error.code === AppErrorCode.UNAUTHORIZED) {
+          throw error;
+        }
+
+        toast({
+          title: 'Error',
+          description: 'An error occurred while signing the document.',
+          variant: 'destructive',
+        });
      }
-
-      await signFieldWithToken({
-        token: recipient.token,
-        fieldId: field.id,
-        value: localText,
-        isBase64: true,
-        authOptions,
-      });
-
-      setLocalCustomText('');
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      const error = AppError.parseError(err);
-
-      if (error.code === AppErrorCode.UNAUTHORIZED) {
-        throw error;
-      }
-
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while signing the document.',
-        variant: 'destructive',
-      });
-    }
-  };
+    },
+    [field.id, recipient.token, router, signFieldWithToken, toast],
+  );

  const onRemove = async () => {
    try {
@ -119,52 +103,26 @@ export const CheckboxField = ({ field, recipient }: CheckboxFieldProps) => {
    }
  };

-  const onSubmit = (data: z.infer<typeof CheckBoxSchema>) => {
-    console.log(data);
-  };
-
  return (
    <SigningFieldContainer
      field={field}
-      onPreSign={onPreSign}
      onSign={onSign}
      onRemove={onRemove}
      type="Checkbox"
      raw={true}
    >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
-
-      {!field.inserted && (
-        // TODO: span with a box
-        // <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">
-        //   Checkbox
-        // </p>
-
-        <Checkbox
-          id={`field-${field.id}`}
-          onClick={() => {
-            console.log('clicked checkbox');
-          }}
-          onCheckedChange={(checked) => {
-            setLocalCustomText(checked ? '✓' : '𐄂');
-          }}
-        />
-      )}
-
-      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
-
      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
+        <form>
          <FormField
            control={form.control}
            name="check"
            render={({ field }) => (
              <FormControl>
-                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                <Checkbox
+                  checked={field.value}
+                  className="h-8 w-8"
+                  onCheckedChange={field.onChange}
+                />
              </FormControl>
            )}
          />
--- a/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx
@ -107,7 +107,7 @@ export const SigningFieldContainer = ({

  return (
    <FieldRootContainer raw={raw} field={field}>
-      {!field.inserted && !loading && (
+      {!field.inserted && !loading && !raw && (
        <button
          type="submit"
          className="absolute inset-0 z-10 h-full w-full"
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@ -92,16 +92,10 @@ export function FieldRootContainer({ field, children, raw = false }: FieldContai

      {raw && (
        <div
-          onClick={() => {
-            console.log('clickeddd');
-          }}
          id={`field-${field.id}`}
-          className={cn(
-            'field-card-container bg-background relative z-20 h-full w-full transition-all',
-            {
-              'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
-            },
-          )}
+          className={cn('field-card-container bg-background relative z-20 transition-all', {
+            'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
+          })}
          ref={ref}
          data-inserted={field.inserted ? 'true' : 'false'}
        >
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -19,6 +19,7 @@ import { FieldType, SendStatus } from '@documenso/prisma/client';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useStep } from '../stepper';
@ -135,11 +136,17 @@ export const AddFieldsFormPartial = ({
      );

      setCoords({
-        x: event.clientX - fieldBounds.current.width / 2,
-        y: event.clientY - fieldBounds.current.height / 2,
+        x:
+          selectedField === FieldType.CHECKBOX
+            ? event.clientX - 16
+            : event.clientX - fieldBounds.current.width / 2,
+        y:
+          selectedField === FieldType.CHECKBOX
+            ? event.clientY - 16
+            : event.clientY - fieldBounds.current.height / 2,
      });
    },
-    [isWithinPageBounds],
+    [isWithinPageBounds, selectedField],
  );

  const onMouseClick = useCallback(
@ -149,6 +156,7 @@ export const AddFieldsFormPartial = ({
      }

      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
+      const isCheckboxField = selectedField === FieldType.CHECKBOX;

      if (
        !$page ||
@ -172,8 +180,8 @@ export const AddFieldsFormPartial = ({
      let pageY = ((event.pageY - top) / height) * 100;

      // Get the bounds as a percentage of the page width and height
-      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
-      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
+      const fieldPageWidth = ((isCheckboxField ? 32 : fieldBounds.current.width) / width) * 100;
+      const fieldPageHeight = ((isCheckboxField ? 32 : fieldBounds.current.height) / height) * 100;

      // And center it based on the bounds
      pageX -= fieldPageWidth / 2;
@ -322,7 +330,8 @@ export const AddFieldsFormPartial = ({

      <DocumentFlowFormContainerContent>
        <div className="flex flex-col">
-          {selectedField && (
+          {/* When it is not a checkbox field */}
+          {selectedField && selectedField !== FieldType.CHECKBOX && (
            <Card
              className={cn(
                'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
@ -344,6 +353,27 @@ export const AddFieldsFormPartial = ({
            </Card>
          )}

+          {/* Checkbox Field */}
+          {selectedField && selectedField === FieldType.CHECKBOX && (
+            <div
+              className="pointer-events-none fixed z-50"
+              style={{
+                top: coords.y,
+                left: coords.x,
+                height: 6 * 4,
+                width: 6 * 4,
+              }}
+            >
+              <Checkbox
+                className={cn(
+                  'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
+                  'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
+                  'border-field-card-border',
+                )}
+              />
+            </div>
+          )}
+
          {isDocumentPdfLoaded &&
            localFields.map((field, index) => (
              <FieldItem
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@ -10,8 +10,10 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';

 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import type { TDocumentFlowFormSchema } from './types';
 import { FRIENDLY_FIELD_TYPE } from './types';
+import { FieldType } from '.prisma/client';

 type Field = TDocumentFlowFormSchema['fields'][0];

@ -44,6 +46,8 @@ export const FieldItem = ({
    pageWidth: 0,
  });

+  const isCheckboxField = field.type === FieldType.CHECKBOX;
+
  const calculateCoords = useCallback(() => {
    const $page = document.querySelector<HTMLElement>(
      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
@ -102,8 +106,8 @@ export const FieldItem = ({
      default={{
        x: coords.pageX,
        y: coords.pageY,
-        height: coords.pageHeight,
-        width: coords.pageWidth,
+        height: isCheckboxField ? 32 : coords.pageHeight,
+        width: isCheckboxField ? 32 : coords.pageWidth,
      }}
      bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
      onDragStart={() => setActive(true)}
@ -119,7 +123,13 @@ export const FieldItem = ({
    >
      {!disabled && (
        <button
-          className="text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border"
+          className={cn(
+            'text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex  items-center justify-center rounded-full border',
+            {
+              'h-8 w-8': !isCheckboxField,
+              'h-6 w-6': isCheckboxField,
+            },
+          )}
          onClick={() => onRemove?.()}
          onTouchEnd={() => onRemove?.()}
        >
@ -127,25 +137,40 @@ export const FieldItem = ({
        </button>
      )}

-      <Card
-        className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
-          'border-field-card-border': !disabled,
-          'border-field-card-border/80': active,
-        })}
-      >
-        <CardContent
+      {!isCheckboxField && (
+        <Card
+          className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
+            'border-field-card-border': !disabled,
+            'border-field-card-border/80': active,
+          })}
+        >
+          <CardContent
+            className={cn(
+              'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
+              {
+                'text-field-card-foreground/50': disabled,
+              },
+            )}
+          >
+            {FRIENDLY_FIELD_TYPE[field.type]}
+
+            <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {isCheckboxField && (
+        <Checkbox
          className={cn(
-            'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
+            'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
+            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
            {
-              'text-field-card-foreground/50': disabled,
+              'border-field-card-border': !disabled,
+              'border-field-card-border/80': active,
            },
          )}
-        >
-          {FRIENDLY_FIELD_TYPE[field.type]}
-
-          <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
-        </CardContent>
-      </Card>
+        />
+      )}
    </Rnd>,
    document.body,
  );
--- a/packages/ui/primitives/document-flow/show-field-item.tsx
+++ b/packages/ui/primitives/document-flow/show-field-item.tsx
@ -4,9 +4,11 @@ import type { Prisma } from '@prisma/client';
 import { createPortal } from 'react-dom';

 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import { FieldType } from '@documenso/prisma/client';

 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
+import { Checkbox } from '../checkbox';
 import { FRIENDLY_FIELD_TYPE } from './types';

 export type ShowFieldItemProps = {
@ -19,6 +21,7 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {

  const signerEmail =
    recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '';
+  const isCheckboxField = field.type === FieldType.CHECKBOX;

  return createPortal(
    <div
@ -30,19 +33,30 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
        width: `${coords.width}px`,
      }}
    >
-      <Card className={cn('bg-background h-full w-full')}>
-        <CardContent
-          className={cn(
-            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
-          )}
-        >
-          {FRIENDLY_FIELD_TYPE[field.type]}
+      {!isCheckboxField && (
+        <Card className={cn('bg-background h-full w-full')}>
+          <CardContent
+            className={cn(
+              'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
+            )}
+          >
+            {FRIENDLY_FIELD_TYPE[field.type]}

-          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
-            {signerEmail}
-          </p>
-        </CardContent>
-      </Card>
+            <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
+              {signerEmail}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {isCheckboxField && (
+        <Checkbox
+          className={cn(
+            'h-8 w-8',
+            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
+          )}
+        />
+      )}
    </div>,
    document.body,
  );