@spaceinvoices/react-ui 0.1.1

package/src/components/invoices/send-email-dialog/locales/de.ts

@@ -0,0 +1,18 @@
+export default {
+  "Send Invoice by Email": "Rechnung per E-Mail senden",
+  "Send invoice by email description":
+    "Senden Sie Rechnung #{number} per E-Mail an einen Kunden. Markdown-Formatierung wird im Text unterstützt.",
+  "Recipient Email": "Empfänger E-Mail",
+  "Subject (Optional)": "Betreff (Optional)",
+  "Invoice Subject": "Rechnungsbetreff",
+  "Leave empty to use default": "Leer lassen für Standardwert",
+  "Message (Optional)": "Nachricht (Optional)",
+  "Email message placeholder": "E-Mail-Nachricht... Unterstützt **fett**, *kursiv*, [Links](url) und Listen",
+  Cancel: "Abbrechen",
+  "Send Email": "E-Mail senden",
+  "Email sent": "E-Mail gesendet",
+  "Invoice sent to": "Rechnung gesendet an",
+  "Failed to send email": "E-Mail konnte nicht gesendet werden",
+  "Sandbox email warning":
+    "Im Sandbox-Modus können E-Mails nur an verifizierte Teammitglieder dieses Kontos gesendet werden.",
+} as const;

package/src/components/invoices/send-email-dialog/locales/sl.ts

@@ -0,0 +1,17 @@
+export default {
+  "Send Invoice by Email": "Pošlji račun po e-pošti",
+  "Send invoice by email description":
+    "Pošljite račun #{number} stranki po e-pošti. V besedilu je podprto oblikovanje Markdown.",
+  "Recipient Email": "E-pošta prejemnika",
+  "Subject (Optional)": "Zadeva (neobvezno)",
+  "Invoice Subject": "Zadeva računa",
+  "Leave empty to use default": "Pustite prazno za privzeto vrednost",
+  "Message (Optional)": "Sporočilo (neobvezno)",
+  "Email message placeholder": "E-poštno sporočilo... Podpira **krepko**, *ležeče*, [povezave](url) in sezname",
+  Cancel: "Prekliči",
+  "Send Email": "Pošlji e-pošto",
+  "Email sent": "E-pošta poslana",
+  "Invoice sent to": "Račun poslan na",
+  "Failed to send email": "Pošiljanje e-pošte ni uspelo",
+  "Sandbox email warning": "V testnem načinu lahko pošiljate e-pošto samo verificiranim članom ekipe tega računa.",
+} as const;

package/src/components/invoices/send-email-dialog/send-email-dialog.tsx

@@ -0,0 +1,289 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Invoice } from "@spaceinvoices/js-sdk";
+import { AlertCircle, Mail } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { Resolver } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { InputWithPreview } from "@/ui/components/entities/entity-settings-form/input-with-preview";
+import { Alert, AlertDescription } from "@/ui/components/ui/alert";
+import { Button } from "@/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/ui/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/ui/components/ui/form";
+import { Input } from "@/ui/components/ui/input";
+import { Spinner } from "@/ui/components/ui/spinner";
+import { type SendEmailSchema, sendEmailSchema } from "@/ui/generated/schemas";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = { de, sl } as const;
+
+type SendEmailDialogProps = {
+  invoice: Invoice;
+  defaultEmail?: string;
+  defaultSubject?: string;
+  defaultBody?: string;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+  ButtonLoader?: React.ComponentType;
+  /** When true, only renders a DropdownMenuItem trigger (deprecated - use controlled mode instead) */
+  renderAsDropdownItem?: boolean;
+  /** @deprecated Use locale prop instead */
+  translationFn?: (key: string) => string;
+  /** Controlled mode: externally control dialog open state */
+  open?: boolean;
+  /** Controlled mode: callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+} & ComponentTranslationProps;
+
+export function SendEmailDialog({
+  invoice,
+  defaultEmail = "",
+  defaultSubject = "",
+  defaultBody = "",
+  onSuccess,
+  onError,
+  ButtonLoader,
+  renderAsDropdownItem = false,
+  translationFn,
+  open: controlledOpen,
+  onOpenChange,
+  locale = "en",
+  ...i18nProps
+}: SendEmailDialogProps) {
+  const t = translationFn || createTranslation({ translations, locale, ...i18nProps });
+
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  // Support both controlled and uncontrolled modes
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  // biome-ignore lint/suspicious/noEmptyBlockStatements: noop fallback for controlled mode
+  const setOpen = isControlled ? onOpenChange || (() => {}) : setInternalOpen;
+  const [isLoading, setIsLoading] = useState(false);
+  const { sdk } = useSDK();
+  const { activeEntity } = useEntities();
+
+  // Get entity email defaults if not provided
+  const entitySettings = (activeEntity?.settings as Record<string, any>) || {};
+  const emailDefaults = entitySettings.email_defaults || {};
+
+  const finalSubject = defaultSubject || emailDefaults.invoice_subject || `Invoice #${invoice.number}`;
+  const finalBody =
+    defaultBody || emailDefaults.invoice_body || `Please find your invoice #${invoice.number} attached.`;
+
+  const form = useForm<SendEmailSchema>({
+    resolver: zodResolver(sendEmailSchema) as Resolver<SendEmailSchema>,
+    defaultValues: {
+      to: defaultEmail,
+      subject: finalSubject,
+      bodyText: finalBody,
+      attachPdf: false,
+    },
+  });
+
+  // Reset form and fetch customer email when dialog opens
+  useEffect(() => {
+    if (!open) return;
+
+    // Reset form to defaults when dialog opens
+    form.reset({
+      to: defaultEmail,
+      subject: finalSubject,
+      bodyText: finalBody,
+      attachPdf: false,
+    });
+
+    // Fetch customer email from linked customer if not in invoice snapshot
+    const fetchCustomerEmail = async () => {
+      if (defaultEmail || !invoice.customer_id || !sdk || !activeEntity?.id) {
+        return;
+      }
+
+      try {
+        const response = await sdk.customers.list(
+          { query: JSON.stringify({ id: invoice.customer_id }), limit: 1 },
+          { entity_id: activeEntity.id },
+        );
+
+        const customer = response.data[0];
+        if (customer?.email) {
+          form.setValue("to", customer.email);
+        }
+      } catch {
+        // Silently fail - customer might not exist or not have email
+      }
+    };
+
+    fetchCustomerEmail();
+  }, [open, defaultEmail, invoice.customer_id, sdk, activeEntity?.id, form, finalSubject, finalBody]);
+
+  const onSubmit = async (values: SendEmailSchema) => {
+    setIsLoading(true);
+    try {
+      if (!sdk) throw new Error("SDK not initialized");
+
+      // Ensure we have an active entity
+      if (!activeEntity?.id) throw new Error("Entity context required");
+
+      // Call the email API endpoint using SDK
+      await (sdk.email as any).send(
+        {
+          to: values.to,
+          subject: values.subject,
+          bodyText: values.bodyText,
+          documentId: invoice.id,
+        },
+        { entity_id: activeEntity.id },
+      );
+
+      toast.success(t("Email sent"), {
+        description: `${t("Invoice sent to")} ${values.to}`,
+      });
+
+      setOpen(false);
+      form.reset();
+      onSuccess?.();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : t("Failed to send email");
+      toast.error(t("Failed to send email"), {
+        description: errorMessage,
+      });
+      onError?.(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // In controlled mode, no trigger is rendered - parent controls the dialog
+  const showTrigger = !isControlled && !renderAsDropdownItem;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {showTrigger && (
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="sm" className="h-8 w-8 cursor-pointer p-0">
+            <Mail className="h-4 w-4" />
+            <span className="sr-only">{t("Send Email")}</span>
+          </Button>
+        </DialogTrigger>
+      )}
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("Send Invoice by Email")}</DialogTitle>
+          <DialogDescription>
+            {t("Send invoice by email description").replace("{number}", invoice.number)}
+          </DialogDescription>
+        </DialogHeader>
+
+        {activeEntity?.environment === "sandbox" && (
+          <Alert className="border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950">
+            <AlertCircle className="h-4 w-4 text-amber-600" />
+            <AlertDescription className="text-amber-800 dark:text-amber-200">
+              {t("Sandbox email warning")}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="to"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("Recipient Email")}</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="customer@example.com" {...field} disabled={isLoading} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("Subject (Optional)")}</FormLabel>
+                  <FormControl>
+                    <InputWithPreview
+                      value={field.value || ""}
+                      onChange={field.onChange}
+                      placeholder={t("Invoice Subject")}
+                      entity={activeEntity!}
+                      document={invoice}
+                      disabled={isLoading}
+                      className="h-10"
+                    />
+                  </FormControl>
+                  <FormDescription>{t("Leave empty to use default")}</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="bodyText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("Message (Optional)")}</FormLabel>
+                  <FormControl>
+                    <InputWithPreview
+                      value={field.value || ""}
+                      onChange={field.onChange}
+                      placeholder={t("Email message placeholder")}
+                      entity={activeEntity!}
+                      document={invoice}
+                      disabled={isLoading}
+                      multiline
+                      rows={4}
+                    />
+                  </FormControl>
+                  <FormDescription>{t("Leave empty to use default")}</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                className="cursor-pointer"
+                onClick={() => setOpen(false)}
+                disabled={isLoading}
+              >
+                {t("Cancel")}
+              </Button>
+              <Button type="submit" className="min-w-[100px] cursor-pointer" disabled={isLoading}>
+                {isLoading ? ButtonLoader ? <ButtonLoader /> : <Spinner /> : t("Send Email")}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/invoices/send-email-dialog.tsx

@@ -0,0 +1,2 @@
+// Re-export from new location for backwards compatibility
+export { SendEmailDialog } from "./send-email-dialog/send-email-dialog";

package/src/components/invoices/shared/index.ts

@@ -0,0 +1,2 @@
+export { ScaledDocumentPreview } from "./scaled-document-preview";
+export { useA4Scaling } from "./use-a4-scaling";

package/src/components/invoices/shared/scaled-document-preview.tsx

@@ -0,0 +1,32 @@
+// Stub file - TODO: implement properly
+import type { RefObject } from "react";
+
+type ScaledDocumentPreviewProps = {
+  htmlContent: string;
+  scale: number;
+  contentHeight: number;
+  A4_WIDTH_PX: number;
+  contentRef: RefObject<HTMLDivElement>;
+  entityUpdatedAt?: string;
+};
+
+export function ScaledDocumentPreview({
+  htmlContent,
+  scale,
+  contentHeight,
+  A4_WIDTH_PX,
+  contentRef,
+}: ScaledDocumentPreviewProps) {
+  return (
+    <div
+      ref={contentRef}
+      style={{
+        width: A4_WIDTH_PX,
+        transform: `scale(${scale})`,
+        transformOrigin: "top left",
+        height: contentHeight,
+      }}
+      dangerouslySetInnerHTML={{ __html: htmlContent }}
+    />
+  );
+}

package/src/components/invoices/shared/use-a4-scaling.tsx

@@ -0,0 +1,39 @@
+// Stub file - TODO: implement properly
+import { useEffect, useRef, useState } from "react";
+
+const A4_WIDTH_PX = 794; // A4 width at 96 DPI
+
+export function useA4Scaling(content: string) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  useEffect(() => {
+    if (!containerRef.current || !content) return;
+
+    const updateScale = () => {
+      const containerWidth = containerRef.current?.clientWidth || A4_WIDTH_PX;
+      const newScale = Math.min(1, containerWidth / A4_WIDTH_PX);
+      setScale(newScale);
+    };
+
+    updateScale();
+    window.addEventListener("resize", updateScale);
+    return () => window.removeEventListener("resize", updateScale);
+  }, [content]);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight * scale);
+    }
+  }, [scale]);
+
+  return {
+    containerRef,
+    contentRef,
+    scale,
+    contentHeight,
+    A4_WIDTH_PX,
+  };
+}

package/src/components/invoices/view/eslog-info-display.tsx

@@ -0,0 +1,160 @@
+import type { Entity, Invoice } from "@spaceinvoices/js-sdk";
+import { AlertCircle, CheckCircle2, Download, FileCode2, XCircle } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
+import { Badge } from "@/ui/components/ui/badge";
+import { Button } from "@/ui/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+
+// Type for eslog data
+interface EslogData {
+  validation_enabled?: boolean | null;
+  validation_status?: "valid" | "invalid" | "not_validated" | null;
+  validation_errors?: string[] | null;
+  validated_at?: string | null;
+}
+
+interface EslogInfoDisplayProps extends ComponentTranslationProps {
+  invoice: Invoice;
+  /** Entity is used to determine if e-SLOG should be shown (for SI entities) */
+  entity?: Entity | null;
+  onDownload?: () => void;
+  isDownloading?: boolean;
+  showDownloadButton?: boolean;
+  /** When true, force show the component even if no eslog data exists (for SI entities with validation enabled) */
+  forceShow?: boolean;
+}
+
+/**
+ * e-SLOG Info Display Component
+ *
+ * Shows e-SLOG validation status, errors, and download button for valid documents
+ */
+export function EslogInfoDisplay({
+  invoice,
+  entity,
+  onDownload,
+  isDownloading,
+  showDownloadButton = true,
+  forceShow = false,
+  t: translateFn,
+  namespace,
+  locale,
+}: EslogInfoDisplayProps) {
+  const t = createTranslation({
+    t: translateFn,
+    namespace,
+    locale,
+    translations: {},
+  });
+
+  // Cast eslog to the proper type
+  const eslog = invoice.eslog as EslogData | undefined | null;
+
+  // Check if entity is Slovenian and has e-SLOG validation enabled in settings
+  const isSlovenianEntity = entity?.country_code === "SI";
+  const entityEslogEnabled = !!(entity?.settings as any)?.eslog_validation_enabled;
+
+  // Show component if:
+  // 1. Document has eslog data, OR
+  // 2. Entity is Slovenian with eslog enabled (forceShow), OR
+  // 3. forceShow is explicitly true
+  const shouldShow = eslog || (forceShow && isSlovenianEntity && entityEslogEnabled);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  // If no eslog data but we should show (SI entity with setting enabled), treat as not_validated
+  const effectiveEslog: EslogData = eslog || {
+    validation_status: "not_validated",
+    validation_enabled: null,
+    validation_errors: null,
+    validated_at: null,
+  };
+
+  const getStatusBadge = () => {
+    switch (effectiveEslog.validation_status) {
+      case "valid":
+        return (
+          <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">
+            <CheckCircle2 className="mr-1 h-3 w-3" />
+            {t("Valid")}
+          </Badge>
+        );
+      case "invalid":
+        return (
+          <Badge className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100">
+            <XCircle className="mr-1 h-3 w-3" />
+            {t("Invalid")}
+          </Badge>
+        );
+      case "not_validated":
+        return (
+          <Badge className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100">{t("Not validated")}</Badge>
+        );
+      default:
+        return (
+          <Badge className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100">{t("Not validated")}</Badge>
+        );
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <FileCode2 className="h-5 w-5" />
+          {t("e-SLOG 2.0")}
+          {getStatusBadge()}
+        </CardTitle>
+        <CardDescription>{t("Slovenian electronic invoice format (EN 16931)")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Validation Errors */}
+        {effectiveEslog.validation_status === "invalid" &&
+          effectiveEslog.validation_errors &&
+          effectiveEslog.validation_errors.length > 0 && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>{t("Validation Errors")}</AlertTitle>
+              <AlertDescription>
+                <ul className="mt-2 list-disc space-y-1 pl-4">
+                  {effectiveEslog.validation_errors.map((error, index) => (
+                    <li key={index} className="text-sm">
+                      {error}
+                    </li>
+                  ))}
+                </ul>
+              </AlertDescription>
+            </Alert>
+          )}
+
+        {/* Download Button for valid documents */}
+        {showDownloadButton && effectiveEslog.validation_status === "valid" && onDownload && (
+          <Button onClick={onDownload} disabled={isDownloading} className="w-full" variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            {isDownloading ? t("Downloading...") : t("Download e-SLOG XML")}
+          </Button>
+        )}
+
+        {/* Not validated info */}
+        {(effectiveEslog.validation_status === "not_validated" || !effectiveEslog.validation_status) && (
+          <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-gray-600 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+            {t(
+              "This document has not been validated for e-SLOG. Enable validation in entity settings or on the document to validate.",
+            )}
+          </div>
+        )}
+
+        {/* Validation timestamp */}
+        {effectiveEslog.validated_at && (
+          <div className="pt-2 text-muted-foreground text-sm">
+            {t("Validated at")}: {new Date(effectiveEslog.validated_at).toLocaleString()}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}