Add export document pdf options

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
2025-09-30 10:49:34 +02:00
parent f61ad48b59
commit 56a666b7e8
16 changed files with 814 additions and 61 deletions
--- a/apps/console/src/components/documents/PdfDownloadDialog.tsx
+++ b/apps/console/src/components/documents/PdfDownloadDialog.tsx
@@ -0,0 +1,141 @@
+import { useTranslate } from "@probo/i18n";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Field,
+  useDialogRef,
+  Spinner,
+  Checkbox,
+} from "@probo/ui";
+import { type ReactNode, useImperativeHandle, forwardRef } from "react";
+import { z } from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+
+const pdfDownloadSchema = z.object({
+  withWatermark: z.boolean(),
+  watermarkEmail: z.string().email("Please enter a valid email address").optional().or(z.literal("")),
+  withSignatures: z.boolean(),
+});
+
+type PdfDownloadFormData = z.infer<typeof pdfDownloadSchema>;
+
+type Props = {
+  children: ReactNode;
+  onDownload: (options: PdfDownloadFormData) => void;
+  isLoading?: boolean;
+  defaultEmail?: string;
+};
+
+export type PdfDownloadDialogRef = {
+  open: () => void;
+  close: () => void;
+};
+
+export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
+  ({ children, onDownload, isLoading = false, defaultEmail = "" }, ref) => {
+    const { __ } = useTranslate();
+    const dialogRef = useDialogRef();
+
+    const { register, handleSubmit, formState, watch, setValue } = useFormWithSchema(
+      pdfDownloadSchema,
+      {
+        defaultValues: {
+          withWatermark: false,
+          watermarkEmail: defaultEmail,
+          withSignatures: true,
+        },
+      }
+    );
+
+    const watchWatermark = watch("withWatermark");
+    const watchSignatures = watch("withSignatures");
+
+    useImperativeHandle(ref, () => ({
+      open: () => dialogRef.current?.open(),
+      close: () => dialogRef.current?.close(),
+    }));
+
+    const onSubmit = handleSubmit((data) => {
+      const options = {
+        ...data,
+        watermarkEmail: data.withWatermark ? data.watermarkEmail : undefined,
+      };
+      onDownload(options);
+      dialogRef.current?.close();
+    });
+
+    return (
+      <>
+        <div onClick={() => dialogRef.current?.open()}>{children}</div>
+        <Dialog className="max-w-md" ref={dialogRef} title={__("Download PDF Options")}>
+          <form onSubmit={onSubmit}>
+            <DialogContent className="space-y-4" padded>
+              <div className="space-y-4">
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    checked={watchSignatures}
+                    onChange={(checked) => setValue("withSignatures", checked)}
+                  />
+                  <div className="flex-1">
+                    <label className="text-sm font-medium text-txt-primary cursor-pointer">
+                      {__("Include signatures")}
+                    </label>
+                    <p className="text-xs text-txt-secondary mt-1">
+                      {__("Show signature information and approval details in the PDF")}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    checked={watchWatermark}
+                    onChange={(checked) => setValue("withWatermark", checked)}
+                  />
+                  <div className="flex-1">
+                    <label className="text-sm font-medium text-txt-primary cursor-pointer">
+                      {__("Add watermark")}
+                    </label>
+                    <p className="text-xs text-txt-secondary mt-1">
+                      {__("Add confidential watermark with email and timestamp")}
+                    </p>
+                  </div>
+                </div>
+
+                {watchWatermark && (
+                  <div className="ml-6">
+                    <Field
+                      label={__("Watermark email")}
+                      {...register("watermarkEmail")}
+                      type="email"
+                      placeholder={__("Enter email address")}
+                      error={formState.errors.watermarkEmail?.message}
+                      autoComplete="off"
+                      required
+                    />
+                  </div>
+                )}
+              </div>
+            </DialogContent>
+            <DialogFooter>
+              <Button
+                type="submit"
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <>
+                    <Spinner size={16} />
+                    {__("Downloading...")}
+                  </>
+                ) : (
+                  __("Download PDF")
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Dialog>
+      </>
+    );
+  }
+);