@spaceinvoices/react-ui 0.1.1

package/src/components/entities/settings/email-settings-form.tsx

@@ -0,0 +1,288 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Entity } from "@spaceinvoices/js-sdk";
+import { Mail, Sparkles } from "lucide-react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { SmartCodeInsertButton } from "@/ui/components/documents/create/smart-code-insert-button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/ui/components/ui/form";
+import { Input } from "@/ui/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
+import { useUpdateEntity } from "../entities.hooks";
+import { InputWithPreview } from "../entity-settings-form/input-with-preview";
+import de from "../entity-settings-form/locales/de";
+import sl from "../entity-settings-form/locales/sl";
+
+const translations = { sl, de } as const;
+
+const emailSettingsSchema = z.object({
+  email: z
+    .union([z.string(), z.null()])
+    .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
+      message: "Must be a valid email address",
+    })
+    .optional(),
+  invoice_email_subject: z.union([z.string(), z.null()]).optional(),
+  invoice_email_body: z.union([z.string(), z.null()]).optional(),
+  estimate_email_subject: z.union([z.string(), z.null()]).optional(),
+  estimate_email_body: z.union([z.string(), z.null()]).optional(),
+});
+
+type EmailSettingsSchema = z.infer<typeof emailSettingsSchema>;
+
+export type EmailSettingsFormProps = {
+  entity: Entity;
+  onSuccess?: (data: Entity) => void;
+  onError?: (error: unknown) => void;
+} & ComponentTranslationProps;
+
+export function EmailSettingsForm({
+  entity,
+  t: translateProp,
+  namespace,
+  locale,
+  onSuccess,
+  onError,
+}: EmailSettingsFormProps) {
+  const t = createTranslation({ t: translateProp, namespace, locale, translations });
+
+  const currentSettings = (entity.settings as any) || {};
+
+  const invoiceEmailSubjectRef = useRef<HTMLInputElement>(null);
+  const invoiceEmailBodyRef = useRef<HTMLTextAreaElement>(null);
+  const estimateEmailSubjectRef = useRef<HTMLInputElement>(null);
+  const estimateEmailBodyRef = useRef<HTMLTextAreaElement>(null);
+
+  const form = useForm<EmailSettingsSchema>({
+    resolver: zodResolver(emailSettingsSchema),
+    defaultValues: {
+      email: currentSettings.email || null,
+      invoice_email_subject: currentSettings.email_defaults?.invoice_subject || null,
+      invoice_email_body: currentSettings.email_defaults?.invoice_body || null,
+      estimate_email_subject: currentSettings.email_defaults?.estimate_subject || null,
+      estimate_email_body: currentSettings.email_defaults?.estimate_body || null,
+    },
+  });
+
+  const { mutate: updateEntity, isPending } = useUpdateEntity({
+    entityId: entity.id,
+    onSuccess: (data) => {
+      form.reset(form.getValues());
+      onSuccess?.(data);
+    },
+    onError,
+  });
+
+  useFormFooterRegistration({
+    formId: "email-settings-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: t("Save Settings"),
+  });
+
+  const onSubmit = (values: EmailSettingsSchema) => {
+    updateEntity({
+      id: entity.id,
+      data: {
+        settings: {
+          ...currentSettings,
+          email: values.email || undefined,
+          email_defaults: {
+            invoice_subject: values.invoice_email_subject || undefined,
+            invoice_body: values.invoice_email_body || undefined,
+            estimate_subject: values.estimate_email_subject || undefined,
+            estimate_body: values.estimate_email_body || undefined,
+          },
+        },
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form id="email-settings-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="font-medium text-sm">{t("Email Address")}</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Mail className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    type="email"
+                    {...field}
+                    value={field.value || ""}
+                    onChange={(e) => field.onChange(e.target.value)}
+                    placeholder="invoices@example.com"
+                    className="h-10 pl-10"
+                  />
+                </div>
+              </FormControl>
+              <FormDescription className="text-xs">{t("Email address to send invoices to")}</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="border-t pt-6">
+          <div className="mb-4 flex items-center gap-2">
+            <Sparkles className="h-4 w-4 text-muted-foreground" />
+            <p className="font-medium text-muted-foreground text-xs">Default Email Templates</p>
+          </div>
+
+          <Tabs defaultValue="invoice" className="w-full">
+            <TabsList className="w-full">
+              <TabsTrigger value="invoice" className="cursor-pointer">
+                {t("Invoice")}
+              </TabsTrigger>
+              <TabsTrigger value="estimate" className="cursor-pointer">
+                {t("Estimate")}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="invoice" className="mt-4 space-y-4">
+              <FormField
+                control={form.control}
+                name="invoice_email_subject"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center justify-between">
+                      <FormLabel className="font-medium text-sm">{t("Email Subject")}</FormLabel>
+                      <SmartCodeInsertButton
+                        textareaRef={invoiceEmailSubjectRef as React.RefObject<HTMLTextAreaElement | null>}
+                        value={field.value || ""}
+                        onInsert={(newValue) => field.onChange(newValue)}
+                        t={t}
+                      />
+                    </div>
+                    <FormControl>
+                      <InputWithPreview
+                        ref={invoiceEmailSubjectRef}
+                        value={field.value || ""}
+                        onChange={field.onChange}
+                        placeholder="Invoice {document_number} from {entity_name}"
+                        entity={entity}
+                        className="h-10"
+                      />
+                    </FormControl>
+                    <FormDescription className="text-xs">{t("Subject line for invoice emails")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="invoice_email_body"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center justify-between">
+                      <FormLabel className="font-medium text-sm">{t("Email Body")}</FormLabel>
+                      <SmartCodeInsertButton
+                        textareaRef={invoiceEmailBodyRef}
+                        value={field.value || ""}
+                        onInsert={(newValue) => field.onChange(newValue)}
+                        t={t}
+                      />
+                    </div>
+                    <FormControl>
+                      <InputWithPreview
+                        ref={invoiceEmailBodyRef}
+                        value={field.value || ""}
+                        onChange={field.onChange}
+                        placeholder="Please find your invoice attached."
+                        entity={entity}
+                        multiline
+                        className="min-h-[200px] resize-none"
+                        rows={8}
+                      />
+                    </FormControl>
+                    <FormDescription className="text-xs">{t("Body content for invoice emails")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </TabsContent>
+
+            <TabsContent value="estimate" className="mt-4 space-y-4">
+              <FormField
+                control={form.control}
+                name="estimate_email_subject"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center justify-between">
+                      <FormLabel className="font-medium text-sm">{t("Email Subject")}</FormLabel>
+                      <SmartCodeInsertButton
+                        textareaRef={estimateEmailSubjectRef as React.RefObject<HTMLTextAreaElement | null>}
+                        value={field.value || ""}
+                        onInsert={(newValue) => field.onChange(newValue)}
+                        t={t}
+                      />
+                    </div>
+                    <FormControl>
+                      <InputWithPreview
+                        ref={estimateEmailSubjectRef}
+                        value={field.value || ""}
+                        onChange={field.onChange}
+                        placeholder="Estimate {document_number} from {entity_name}"
+                        entity={entity}
+                        className="h-10"
+                      />
+                    </FormControl>
+                    <FormDescription className="text-xs">{t("Subject line for estimate emails")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="estimate_email_body"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center justify-between">
+                      <FormLabel className="font-medium text-sm">{t("Email Body")}</FormLabel>
+                      <SmartCodeInsertButton
+                        textareaRef={estimateEmailBodyRef}
+                        value={field.value || ""}
+                        onInsert={(newValue) => field.onChange(newValue)}
+                        t={t}
+                      />
+                    </div>
+                    <FormControl>
+                      <InputWithPreview
+                        ref={estimateEmailBodyRef}
+                        value={field.value || ""}
+                        onChange={field.onChange}
+                        placeholder="Please find your estimate attached."
+                        entity={entity}
+                        multiline
+                        className="min-h-[200px] resize-none"
+                        rows={8}
+                      />
+                    </FormControl>
+                    <FormDescription className="text-xs">{t("Body content for estimate emails")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/src/components/entities/settings/eslog-settings-form.tsx

@@ -0,0 +1,113 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Entity } from "@spaceinvoices/js-sdk";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/ui/components/ui/form";
+import { Switch } from "@/ui/components/ui/switch";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
+import { useUpdateEntity } from "../entities.hooks";
+
+const eslogSettingsSchema = z.object({
+  eslog_validation_enabled: z.boolean(),
+});
+
+type EslogSettingsSchema = z.infer<typeof eslogSettingsSchema>;
+
+export type EslogSettingsFormProps = {
+  entity: Entity;
+  onSuccess?: (data: Entity) => void;
+  onError?: (error: unknown) => void;
+} & ComponentTranslationProps;
+
+export function EslogSettingsForm({
+  entity,
+  t: translateProp,
+  namespace,
+  locale,
+  onSuccess,
+  onError,
+}: EslogSettingsFormProps) {
+  const t = createTranslation({ t: translateProp, namespace, locale, translations: {} });
+
+  const currentSettings = (entity.settings as Record<string, unknown>) || {};
+
+  const form = useForm<EslogSettingsSchema>({
+    resolver: zodResolver(eslogSettingsSchema),
+    defaultValues: {
+      eslog_validation_enabled: !!currentSettings.eslog_validation_enabled,
+    },
+  });
+
+  // Reset form when entity data changes (e.g., after refetch)
+  useEffect(() => {
+    form.reset({
+      eslog_validation_enabled: !!currentSettings.eslog_validation_enabled,
+    });
+  }, [currentSettings.eslog_validation_enabled, form]);
+
+  const { mutate: updateEntity, isPending } = useUpdateEntity({
+    entityId: entity.id,
+    onSuccess: (data) => {
+      form.reset(form.getValues());
+      onSuccess?.(data);
+    },
+    onError,
+  });
+
+  useFormFooterRegistration({
+    formId: "eslog-settings-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: t("Save Settings"),
+  });
+
+  const onSubmit = (values: EslogSettingsSchema) => {
+    updateEntity({
+      id: entity.id,
+      data: {
+        settings: {
+          ...currentSettings,
+          eslog_validation_enabled: values.eslog_validation_enabled,
+        },
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form id="eslog-settings-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="eslog_validation_enabled"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <FormLabel className="text-base">{t("Enable e-SLOG validation")}</FormLabel>
+                <FormDescription>
+                  {t(
+                    "When enabled, documents will be automatically validated against e-SLOG 2.0 requirements when created.",
+                  )}
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 text-blue-800 text-sm dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200">
+          <p className="font-medium">{t("About e-SLOG 2.0")}</p>
+          <p className="mt-1">
+            {t(
+              "e-SLOG 2.0 is the Slovenian electronic invoice standard based on the European EN 16931 specification. Valid documents can be downloaded in XML format and attached to emails.",
+            )}
+          </p>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/src/components/entities/settings/index.ts

@@ -0,0 +1,8 @@
+export { BrandingSettingsForm, type BrandingSettingsFormProps } from "./branding-settings-form";
+export { CompanySettingsForm, type CompanySettingsFormProps } from "./company-settings-form";
+export { DefaultsSettingsForm, type DefaultsSettingsFormProps } from "./defaults-settings-form";
+export { EmailSettingsForm, type EmailSettingsFormProps } from "./email-settings-form";
+export { EslogSettingsForm, type EslogSettingsFormProps } from "./eslog-settings-form";
+export { NumberFormatSettingsForm, type NumberFormatSettingsFormProps } from "./number-format-settings-form";
+export { SettingsFooter } from "./settings-footer";
+export { TaxRulesSettingsForm, type TaxRulesSettingsFormProps } from "./tax-rules-settings-form";

package/src/components/entities/settings/number-format-settings-form.tsx

@@ -0,0 +1,244 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Entity } from "@spaceinvoices/js-sdk";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/ui/components/ui/form";
+import { Input } from "@/ui/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
+import { useUpdateEntity } from "../entities.hooks";
+import de from "../entity-settings-form/locales/de";
+import sl from "../entity-settings-form/locales/sl";
+
+const translations = { sl, de } as const;
+
+const numberFormatSettingsSchema = z.object({
+  invoice_format: z.union([z.string(), z.null()]).optional(),
+  estimate_format: z.union([z.string(), z.null()]).optional(),
+  credit_note_format: z.union([z.string(), z.null()]).optional(),
+  advance_invoice_format: z.union([z.string(), z.null()]).optional(),
+});
+
+type NumberFormatSettingsSchema = z.infer<typeof numberFormatSettingsSchema>;
+
+export type NumberFormatSettingsFormProps = {
+  entity: Entity;
+  onSuccess?: (data: Entity) => void;
+  onError?: (error: unknown) => void;
+} & ComponentTranslationProps;
+
+/**
+ * Get a preview of what the document number will look like
+ */
+function getFormatPreview(format: string | null | undefined): string {
+  if (!format) return "";
+
+  const year = new Date().getFullYear();
+  const shortYear = year.toString().slice(-2);
+
+  // Replace format tokens with example values
+  let preview = format;
+  preview = preview.replace("{yyyy}", year.toString());
+  preview = preview.replace("{yy}", shortYear);
+  preview = preview.replace(/\{n+\}/g, (match) => {
+    const digits = match.length - 2; // subtract { and }
+    return "1".padStart(digits, "0");
+  });
+
+  return preview;
+}
+
+export function NumberFormatSettingsForm({
+  entity,
+  t: translateProp,
+  namespace,
+  locale,
+  onSuccess,
+  onError,
+}: NumberFormatSettingsFormProps) {
+  const t = createTranslation({ t: translateProp, namespace, locale, translations });
+
+  const currentSettings = (entity.settings as any) || {};
+  const numberFormats = currentSettings.number_formats || {};
+
+  const form = useForm<NumberFormatSettingsSchema>({
+    resolver: zodResolver(numberFormatSettingsSchema),
+    defaultValues: {
+      invoice_format: numberFormats.invoice || "{yyyy}-{nnnnn}",
+      estimate_format: numberFormats.estimate || "{yyyy}-{nnnnn}",
+      credit_note_format: numberFormats.credit_note || "{yyyy}-{nnnnn}",
+      advance_invoice_format: numberFormats.advance_invoice || "{yyyy}-{nnnnn}",
+    },
+  });
+
+  const { mutate: updateEntity, isPending } = useUpdateEntity({
+    entityId: entity.id,
+    onSuccess: (data) => {
+      form.reset(form.getValues());
+      onSuccess?.(data);
+    },
+    onError,
+  });
+
+  useFormFooterRegistration({
+    formId: "number-format-settings-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: t("Save Settings"),
+  });
+
+  const onSubmit = (values: NumberFormatSettingsSchema) => {
+    const updatePayload: any = {
+      settings: {
+        ...currentSettings,
+        number_formats: {
+          invoice: values.invoice_format || null,
+          estimate: values.estimate_format || null,
+          credit_note: values.credit_note_format || null,
+          advance_invoice: values.advance_invoice_format || null,
+        },
+      },
+    };
+
+    updateEntity({ id: entity.id, data: updatePayload });
+  };
+
+  // Watch values for live preview
+  const invoiceFormat = form.watch("invoice_format");
+  const estimateFormat = form.watch("estimate_format");
+  const creditNoteFormat = form.watch("credit_note_format");
+  const advanceInvoiceFormat = form.watch("advance_invoice_format");
+
+  return (
+    <Form {...form}>
+      <form id="number-format-settings-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <Tabs defaultValue="invoice" className="w-full">
+          <TabsList className="w-full">
+            <TabsTrigger value="invoice" className="cursor-pointer">
+              {t("Invoice")}
+            </TabsTrigger>
+            <TabsTrigger value="estimate" className="cursor-pointer">
+              {t("Estimate")}
+            </TabsTrigger>
+            <TabsTrigger value="credit_note" className="cursor-pointer">
+              {t("Credit Note")}
+            </TabsTrigger>
+            <TabsTrigger value="advance_invoice" className="cursor-pointer">
+              {t("Advance Invoice")}
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Invoice Tab */}
+          <TabsContent value="invoice" className="mt-4 space-y-4">
+            <FormField
+              control={form.control}
+              name="invoice_format"
+              render={({ field }) => (
+                <FormItem className="max-w-xs">
+                  <FormLabel className="font-medium text-sm">{t("Number Format")}</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      placeholder="{yyyy}-{nnnnn}"
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                    />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    {t("Preview")}: <span className="font-mono">{getFormatPreview(invoiceFormat)}</span>
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TabsContent>
+
+          {/* Estimate Tab */}
+          <TabsContent value="estimate" className="mt-4 space-y-4">
+            <FormField
+              control={form.control}
+              name="estimate_format"
+              render={({ field }) => (
+                <FormItem className="max-w-xs">
+                  <FormLabel className="font-medium text-sm">{t("Number Format")}</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      placeholder="{yyyy}-{nnnnn}"
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                    />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    {t("Preview")}: <span className="font-mono">{getFormatPreview(estimateFormat)}</span>
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TabsContent>
+
+          {/* Credit Note Tab */}
+          <TabsContent value="credit_note" className="mt-4 space-y-4">
+            <FormField
+              control={form.control}
+              name="credit_note_format"
+              render={({ field }) => (
+                <FormItem className="max-w-xs">
+                  <FormLabel className="font-medium text-sm">{t("Number Format")}</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      placeholder="{yyyy}-{nnnnn}"
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                    />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    {t("Preview")}: <span className="font-mono">{getFormatPreview(creditNoteFormat)}</span>
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TabsContent>
+
+          {/* Advance Invoice Tab */}
+          <TabsContent value="advance_invoice" className="mt-4 space-y-4">
+            <FormField
+              control={form.control}
+              name="advance_invoice_format"
+              render={({ field }) => (
+                <FormItem className="max-w-xs">
+                  <FormLabel className="font-medium text-sm">{t("Number Format")}</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      placeholder="{yyyy}-{nnnnn}"
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                    />
+                  </FormControl>
+                  <FormDescription className="text-xs">
+                    {t("Preview")}: <span className="font-mono">{getFormatPreview(advanceInvoiceFormat)}</span>
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TabsContent>
+        </Tabs>
+      </form>
+    </Form>
+  );
+}