@spaceinvoices/react-ui 0.1.1

package/src/components/entities/settings/pdf-template-selector/demo-invoice-data.ts

@@ -0,0 +1,164 @@
+import type { CreateInvoiceRequest } from "@spaceinvoices/js-sdk";
+
+type DemoInvoiceData = Partial<CreateInvoiceRequest>;
+
+interface LocaleDemoData {
+  customer: {
+    name: string;
+    address: string;
+    city: string;
+    post_code: string;
+    country: string;
+  };
+  items: Array<{
+    name: string;
+    description?: string;
+    quantity: number;
+    price: number;
+  }>;
+  note: string;
+}
+
+const demoDataByLocale: Record<string, LocaleDemoData> = {
+  "en-US": {
+    customer: {
+      name: "Acme Corporation",
+      address: "123 Business Avenue",
+      city: "New York",
+      post_code: "10001",
+      country: "United States",
+    },
+    items: [
+      {
+        name: "Professional Consulting",
+        description: "Strategic business consulting services",
+        quantity: 8,
+        price: 150.0,
+      },
+      { name: "Project Management", description: "End-to-end project coordination", quantity: 1, price: 500.0 },
+    ],
+    note: "Thank you for your business. Payment is due within 30 days.",
+  },
+  "sl-SI": {
+    customer: {
+      name: "Podjetje d.o.o.",
+      address: "Slovenska cesta 123",
+      city: "Ljubljana",
+      post_code: "1000",
+      country: "Slovenija",
+    },
+    items: [
+      { name: "Poslovno svetovanje", description: "Strateško poslovno svetovanje", quantity: 8, price: 120.0 },
+      { name: "Vodenje projekta", description: "Celostna koordinacija projekta", quantity: 1, price: 400.0 },
+    ],
+    note: "Hvala za zaupanje. Rok plačila je 30 dni.",
+  },
+  "de-DE": {
+    customer: {
+      name: "Musterfirma GmbH",
+      address: "Musterstraße 123",
+      city: "Berlin",
+      post_code: "10115",
+      country: "Deutschland",
+    },
+    items: [
+      { name: "Unternehmensberatung", description: "Strategische Geschäftsberatung", quantity: 8, price: 140.0 },
+      { name: "Projektmanagement", description: "Umfassende Projektkoordination", quantity: 1, price: 450.0 },
+    ],
+    note: "Vielen Dank für Ihr Vertrauen. Zahlungsziel: 30 Tage.",
+  },
+  "fr-FR": {
+    customer: {
+      name: "Société Exemple SARL",
+      address: "123 Rue du Commerce",
+      city: "Paris",
+      post_code: "75001",
+      country: "France",
+    },
+    items: [
+      { name: "Conseil professionnel", description: "Services de conseil stratégique", quantity: 8, price: 130.0 },
+      { name: "Gestion de projet", description: "Coordination de projet complète", quantity: 1, price: 480.0 },
+    ],
+    note: "Merci pour votre confiance. Paiement à 30 jours.",
+  },
+  "es-ES": {
+    customer: {
+      name: "Empresa Ejemplo S.L.",
+      address: "Calle Comercio 123",
+      city: "Madrid",
+      post_code: "28001",
+      country: "España",
+    },
+    items: [
+      {
+        name: "Consultoría profesional",
+        description: "Servicios de consultoría estratégica",
+        quantity: 8,
+        price: 125.0,
+      },
+      { name: "Gestión de proyectos", description: "Coordinación integral de proyectos", quantity: 1, price: 460.0 },
+    ],
+    note: "Gracias por su confianza. Pago a 30 días.",
+  },
+  "it-IT": {
+    customer: {
+      name: "Azienda Esempio S.r.l.",
+      address: "Via del Commercio 123",
+      city: "Roma",
+      post_code: "00100",
+      country: "Italia",
+    },
+    items: [
+      { name: "Consulenza professionale", description: "Servizi di consulenza strategica", quantity: 8, price: 135.0 },
+      { name: "Gestione progetti", description: "Coordinamento completo del progetto", quantity: 1, price: 470.0 },
+    ],
+    note: "Grazie per la fiducia. Pagamento entro 30 giorni.",
+  },
+};
+
+/**
+ * Get demo invoice data for template preview based on locale
+ */
+export function getDemoInvoiceData(locale: string): DemoInvoiceData {
+  // Normalize locale (e.g., "en" -> "en-US", "sl" -> "sl-SI")
+  const normalizedLocale = normalizeLocale(locale);
+  const data = demoDataByLocale[normalizedLocale] || demoDataByLocale["en-US"];
+
+  const today = new Date();
+  const dueDate = new Date(today);
+  dueDate.setDate(dueDate.getDate() + 30);
+
+  return {
+    date: today.toISOString(),
+    date_due: dueDate.toISOString(),
+    customer: data.customer,
+    items: data.items.map((item) => ({
+      name: item.name,
+      description: item.description,
+      quantity: item.quantity,
+      price: item.price,
+      taxes: [{ rate: 22 }],
+    })),
+    note: data.note,
+  };
+}
+
+function normalizeLocale(locale: string): string {
+  const mapping: Record<string, string> = {
+    en: "en-US",
+    sl: "sl-SI",
+    de: "de-DE",
+    fr: "fr-FR",
+    es: "es-ES",
+    it: "it-IT",
+  };
+
+  // If already full locale, return as-is if supported
+  if (demoDataByLocale[locale]) {
+    return locale;
+  }
+
+  // Try to match short code
+  const shortCode = locale.split("-")[0].toLowerCase();
+  return mapping[shortCode] || "en-US";
+}

package/src/components/entities/settings/pdf-template-selector/index.ts

@@ -0,0 +1,2 @@
+export { getDemoInvoiceData } from "./demo-invoice-data";
+export { PdfTemplateCards, type PdfTemplateCardsProps } from "./pdf-template-cards";

package/src/components/entities/settings/pdf-template-selector/locales/de.ts

@@ -0,0 +1,18 @@
+export default {
+  "PDF Template": "PDF-Vorlage",
+  "Choose the design template for your invoices and documents":
+    "Wählen Sie die Design-Vorlage für Ihre Rechnungen und Dokumente",
+  Preview: "Vorschau",
+  Template: "Vorlage",
+  Modern: "Modern",
+  "Modern template description": "Klares, professionelles Design für die meisten Unternehmen geeignet",
+  Classic: "Klassisch",
+  "Classic template description": "Traditioneller Rechnungsstil mit Serifenschriften und Rahmen",
+  Minimal: "Minimal",
+  "Minimal template description": "Typografie-fokussiertes Design mit klarer Ästhetik",
+  Fashion: "Mode",
+  "Fashion template description": "Redaktioneller Stil mit eleganten Überschriften für kreative Unternehmen",
+  "Save Template": "Vorlage speichern",
+  "Template saved successfully": "Vorlage erfolgreich gespeichert",
+  "Failed to save template": "Vorlage konnte nicht gespeichert werden",
+} as const;

package/src/components/entities/settings/pdf-template-selector/locales/sl.ts

@@ -0,0 +1,18 @@
+export default {
+  "PDF Template": "PDF predloga",
+  "Choose the design template for your invoices and documents":
+    "Izberite oblikovno predlogo za vaše račune in dokumente",
+  Preview: "Predogled",
+  Template: "Predloga",
+  Modern: "Moderna",
+  "Modern template description": "Čista, profesionalna oblika primerna za večino podjetij",
+  Classic: "Klasična",
+  "Classic template description": "Tradicionalna oblika računa s serifnimi pisavami in okvirji",
+  Minimal: "Minimalistična",
+  "Minimal template description": "Tipografsko osredotočena oblika s čisto estetiko",
+  Fashion: "Modna",
+  "Fashion template description": "Uredniški slog z elegantnimi naslovi za kreativna podjetja",
+  "Save Template": "Shrani predlogo",
+  "Template saved successfully": "Predloga uspešno shranjena",
+  "Failed to save template": "Shranjevanje predloge ni uspelo",
+} as const;

package/src/components/entities/settings/pdf-template-selector/pdf-template-cards.tsx

@@ -0,0 +1,49 @@
+import { Check } from "lucide-react";
+import type { PdfTemplateId } from "@/ui/components/documents/create/live-preview";
+import { cn } from "@/ui/lib/utils";
+
+const TEMPLATES: Array<{
+  id: PdfTemplateId;
+  nameKey: string;
+  descriptionKey: string;
+}> = [
+  { id: "modern", nameKey: "Modern", descriptionKey: "Modern template description" },
+  { id: "classic", nameKey: "Classic", descriptionKey: "Classic template description" },
+  { id: "minimal", nameKey: "Minimal", descriptionKey: "Minimal template description" },
+  { id: "fashion", nameKey: "Fashion", descriptionKey: "Fashion template description" },
+];
+
+export type PdfTemplateCardsProps = {
+  selectedTemplate: PdfTemplateId;
+  onTemplateChange: (template: PdfTemplateId) => void;
+  t: (key: string) => string;
+};
+
+export function PdfTemplateCards({ selectedTemplate, onTemplateChange, t }: PdfTemplateCardsProps) {
+  return (
+    <div className="space-y-3">
+      <h3 className="font-medium text-muted-foreground text-sm">{t("Template")}</h3>
+      <div className="grid gap-3">
+        {TEMPLATES.map((template) => (
+          <button
+            key={template.id}
+            type="button"
+            onClick={() => onTemplateChange(template.id)}
+            className={cn(
+              "relative flex cursor-pointer flex-col items-start rounded-lg border-2 p-4 text-left transition-all hover:border-primary/50",
+              selectedTemplate === template.id ? "border-primary bg-primary/5" : "border-border bg-background",
+            )}
+          >
+            {selectedTemplate === template.id && (
+              <div className="absolute top-3 right-3">
+                <Check className="h-5 w-5 text-primary" />
+              </div>
+            )}
+            <span className="font-semibold">{t(template.nameKey)}</span>
+            <span className="mt-1 text-muted-foreground text-sm">{t(template.descriptionKey)}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/entities/settings/settings-footer.tsx

@@ -0,0 +1,16 @@
+import { Button } from "@/ui/components/ui/button";
+import ButtonLoader from "../../button-loader";
+
+type SettingsFooterProps = {
+  isPending: boolean;
+  isDirty: boolean;
+  label: string;
+};
+
+export function SettingsFooter({ isPending, isDirty, label }: SettingsFooterProps) {
+  return (
+    <Button type="submit" className="cursor-pointer px-8" disabled={isPending || !isDirty}>
+      {isPending ? <ButtonLoader /> : label}
+    </Button>
+  );
+}

package/src/components/entities/settings/tax-rules-settings-form.tsx

@@ -0,0 +1,346 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type {
+  Entity,
+  EntitySettings,
+  EntitySettingsTaxClauseDefaultsAnyOf,
+  GetEntities200DataItem,
+  TaxRulesAnyOf,
+} from "@spaceinvoices/js-sdk";
+import { ChevronDown, Globe, MessageSquareText } from "lucide-react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/ui/components/ui/collapsible";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/ui/components/ui/form";
+import { Switch } from "@/ui/components/ui/switch";
+import { Textarea } from "@/ui/components/ui/textarea";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { cn } from "@/ui/lib/utils";
+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 taxRulesSettingsSchema = z.object({
+  vies_validate_vat: z.boolean(),
+  auto_reverse_charge: z.boolean(),
+  auto_remove_tax_export: z.boolean(),
+  require_gross_prices: z.boolean(),
+  // Tax clause defaults per transaction type
+  tax_clause_intra_eu_b2b: z.string().optional(),
+  tax_clause_export: z.string().optional(),
+  tax_clause_domestic: z.string().optional(),
+  tax_clause_intra_eu_b2c: z.string().optional(),
+});
+
+type TaxRulesSettingsSchema = z.infer<typeof taxRulesSettingsSchema>;
+
+type SectionType = "tax-rules" | "tax-clauses";
+
+/** Entity type with country_rules included (from getEntities response) */
+type EntityWithRules = GetEntities200DataItem;
+
+export type TaxRulesSettingsFormProps = {
+  entity: EntityWithRules;
+  onSuccess?: (data: Entity) => void;
+  onError?: (error: unknown) => void;
+  /** Optional render prop to wrap each section with help content */
+  renderSection?: (section: SectionType, content: ReactNode) => ReactNode;
+} & ComponentTranslationProps;
+
+export function TaxRulesSettingsForm({
+  entity,
+  t: translateProp,
+  namespace,
+  locale,
+  onSuccess,
+  onError,
+  renderSection,
+}: TaxRulesSettingsFormProps) {
+  const t = createTranslation({ t: translateProp, namespace, locale, translations });
+  const [taxClausesOpen, setTaxClausesOpen] = useState(false);
+
+  // Helper to wrap section content with render prop if provided
+  const wrapSection = (section: SectionType, content: ReactNode) => {
+    return renderSection ? renderSection(section, content) : content;
+  };
+
+  // Check if tax clause defaults feature is available for this entity's country
+  const showTaxClauseDefaults = entity.country_rules?.features?.includes("tax_clause_defaults") ?? false;
+
+  const currentSettings = (entity.settings as EntitySettings) || {};
+  const currentTaxRules = (currentSettings.tax_rules as TaxRulesAnyOf | null)?.eu || {};
+  const currentTaxClauseDefaults =
+    (currentSettings.tax_clause_defaults as EntitySettingsTaxClauseDefaultsAnyOf | null) || {};
+
+  const form = useForm<TaxRulesSettingsSchema>({
+    resolver: zodResolver(taxRulesSettingsSchema),
+    defaultValues: {
+      vies_validate_vat: currentTaxRules.vies_validate_vat ?? true,
+      auto_reverse_charge: currentTaxRules.auto_reverse_charge ?? false,
+      auto_remove_tax_export: currentTaxRules.auto_remove_tax_export ?? false,
+      require_gross_prices: currentTaxRules.require_gross_prices ?? false,
+      tax_clause_intra_eu_b2b: currentTaxClauseDefaults.intra_eu_b2b ?? "",
+      tax_clause_export: currentTaxClauseDefaults.export ?? "",
+      tax_clause_domestic: currentTaxClauseDefaults.domestic ?? "",
+      tax_clause_intra_eu_b2c: currentTaxClauseDefaults.intra_eu_b2c ?? "",
+    },
+  });
+
+  const { mutate: updateEntity, isPending } = useUpdateEntity({
+    entityId: entity.id,
+    onSuccess: (data) => {
+      form.reset(form.getValues());
+      onSuccess?.(data);
+    },
+    onError,
+  });
+
+  useFormFooterRegistration({
+    formId: "tax-rules-settings-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: t("Save Settings"),
+  });
+
+  const onSubmit = (values: TaxRulesSettingsSchema) => {
+    const updatedSettings: EntitySettings = {
+      ...currentSettings,
+      tax_rules: {
+        eu: {
+          vies_validate_vat: values.vies_validate_vat,
+          auto_reverse_charge: values.auto_reverse_charge,
+          auto_remove_tax_export: values.auto_remove_tax_export,
+          require_gross_prices: values.require_gross_prices,
+        },
+      },
+      tax_clause_defaults: {
+        intra_eu_b2b: values.tax_clause_intra_eu_b2b || null,
+        export: values.tax_clause_export || null,
+        domestic: values.tax_clause_domestic || null,
+        intra_eu_b2c: values.tax_clause_intra_eu_b2c || null,
+      },
+    };
+
+    updateEntity({ id: entity.id, data: { settings: updatedSettings } });
+  };
+
+  // Tax rules header
+  const taxRulesHeader = (
+    <div className={cn("mb-4 flex items-center gap-3", showTaxClauseDefaults && "border-t pt-6")}>
+      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-500/10">
+        <Globe className="h-5 w-5 text-green-600 dark:text-green-400" />
+      </div>
+      <div>
+        <h3 className="font-semibold text-lg">{t("EU Tax Rules")}</h3>
+        <p className="text-muted-foreground text-sm">{t("Automatic tax handling for cross-border transactions")}</p>
+      </div>
+    </div>
+  );
+
+  // Tax rules section content (switches)
+  const taxRulesContent = (
+    <div className="space-y-4">
+      <FormField
+        control={form.control}
+        name="vies_validate_vat"
+        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("tax-rules.vies_validate_vat.label")}</FormLabel>
+              <FormDescription>{t("tax-rules.vies_validate_vat.description")}</FormDescription>
+            </div>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="auto_reverse_charge"
+        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("tax-rules.auto_reverse_charge.label")}</FormLabel>
+              <FormDescription>{t("tax-rules.auto_reverse_charge.description")}</FormDescription>
+            </div>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="auto_remove_tax_export"
+        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("tax-rules.auto_remove_tax_export.label")}</FormLabel>
+              <FormDescription>{t("tax-rules.auto_remove_tax_export.description")}</FormDescription>
+            </div>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="require_gross_prices"
+        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("tax-rules.require_gross_prices.label")}</FormLabel>
+              <FormDescription>{t("tax-rules.require_gross_prices.description")}</FormDescription>
+            </div>
+            <FormControl>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+
+  // Tax clauses header
+  const taxClausesHeader = showTaxClauseDefaults ? (
+    <div className="mb-4 flex items-center gap-3">
+      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10">
+        <MessageSquareText className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+      </div>
+      <div>
+        <h3 className="font-semibold text-lg">{t("Default Tax Clauses")}</h3>
+        <p className="text-muted-foreground text-sm">
+          {t("Set default tax clauses that are automatically added to documents based on transaction type")}
+        </p>
+      </div>
+    </div>
+  ) : null;
+
+  // Tax clauses section content
+  const taxClausesContent = showTaxClauseDefaults ? (
+    <div className="space-y-4">
+      {/* Default / Domestic - always visible */}
+      <FormField
+        control={form.control}
+        name="tax_clause_domestic"
+        render={({ field }) => (
+          <FormItem className="rounded-lg border p-4">
+            <FormLabel>{t("tax-clauses.domestic.label")}</FormLabel>
+            <FormDescription>{t("tax-clauses.domestic.description")}</FormDescription>
+            <FormControl>
+              <Textarea placeholder={t("Enter default tax clause...")} className="min-h-[80px] resize-y" {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      {/* Other tax clauses - collapsible */}
+      <Collapsible open={taxClausesOpen} onOpenChange={setTaxClausesOpen} className="space-y-2">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg border p-4 transition-colors hover:bg-muted/50">
+          <div className="text-left">
+            <div className="font-medium">{t("tax-clauses.other-title")}</div>
+            <div className="text-muted-foreground text-sm">{t("tax-clauses.other-description")}</div>
+          </div>
+          <ChevronDown
+            className={cn("h-5 w-5 text-muted-foreground transition-transform", taxClausesOpen && "rotate-180")}
+          />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-4 pt-2">
+          {/* Intra-EU B2B */}
+          <FormField
+            control={form.control}
+            name="tax_clause_intra_eu_b2b"
+            render={({ field }) => (
+              <FormItem className="rounded-lg border p-4">
+                <FormLabel>{t("tax-clauses.intra_eu_b2b.label")}</FormLabel>
+                <FormDescription>{t("tax-clauses.intra_eu_b2b.description")}</FormDescription>
+                <FormControl>
+                  <Textarea
+                    placeholder={t("Enter reverse charge clause...")}
+                    className="min-h-[80px] resize-y"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Export */}
+          <FormField
+            control={form.control}
+            name="tax_clause_export"
+            render={({ field }) => (
+              <FormItem className="rounded-lg border p-4">
+                <FormLabel>{t("tax-clauses.export.label")}</FormLabel>
+                <FormDescription>{t("tax-clauses.export.description")}</FormDescription>
+                <FormControl>
+                  <Textarea
+                    placeholder={t("Enter export exemption clause...")}
+                    className="min-h-[80px] resize-y"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Intra-EU B2C */}
+          <FormField
+            control={form.control}
+            name="tax_clause_intra_eu_b2c"
+            render={({ field }) => (
+              <FormItem className="rounded-lg border p-4">
+                <FormLabel>{t("tax-clauses.intra_eu_b2c.label")}</FormLabel>
+                <FormDescription>{t("tax-clauses.other.description")}</FormDescription>
+                <FormControl>
+                  <Textarea
+                    placeholder={t("Enter EU consumer sales clause...")}
+                    className="min-h-[80px] resize-y"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  ) : null;
+
+  return (
+    <Form {...form}>
+      <form id="tax-rules-settings-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        {taxClausesHeader}
+        {taxClausesContent && wrapSection("tax-clauses", taxClausesContent)}
+        {taxRulesHeader}
+        {wrapSection("tax-rules", taxRulesContent)}
+      </form>
+    </Form>
+  );
+}