@spaceinvoices/react-ui 0.1.1

package/src/components/wl-subscription/upgrade-modal.tsx

@@ -0,0 +1,209 @@
+import { Check, Crown, Sparkles, Zap } from "lucide-react";
+
+import { type GatedFeature, useWLSubscription, type WhiteLabelPlan } from "../../providers/wl-subscription-provider";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog";
+
+type UpgradeModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Optional feature that triggered the modal */
+  feature?: GatedFeature;
+  /** Optional callback when upgrade is clicked */
+  onUpgrade?: (planSlug: string) => void;
+};
+
+/**
+ * UpgradeModal component
+ *
+ * Shows available plans and allows users to upgrade their subscription.
+ * Highlights the feature that triggered the modal and which plans include it.
+ */
+export function UpgradeModal({ isOpen, onClose, feature, onUpgrade }: UpgradeModalProps) {
+  const { plan: currentPlan, availablePlans } = useWLSubscription();
+
+  // Sort plans by display order
+  const sortedPlans = [...availablePlans].sort((a, b) => a.display_order - b.display_order);
+
+  // Find the minimum plan that includes the requested feature
+  const minimumPlanForFeature = feature
+    ? sortedPlans.find((p) => p.features.length === 0 || p.features.includes(feature))
+    : null;
+
+  const handleUpgrade = (planSlug: string) => {
+    if (onUpgrade) {
+      onUpgrade(planSlug);
+    }
+    // In the future, this would redirect to Stripe Checkout
+    // For now, just close the modal
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            Upgrade Your Plan
+          </DialogTitle>
+          <DialogDescription>
+            {feature
+              ? `Unlock ${getFeatureDisplayName(feature)} and more with an upgraded plan.`
+              : "Get access to more features and higher limits."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4 md:grid-cols-3">
+          {sortedPlans.map((plan) => (
+            <PlanCard
+              key={plan.id}
+              plan={plan}
+              isCurrentPlan={plan.slug === currentPlan?.slug}
+              isRecommended={minimumPlanForFeature?.slug === plan.slug}
+              highlightFeature={feature}
+              onSelect={() => handleUpgrade(plan.slug)}
+            />
+          ))}
+        </div>
+
+        {sortedPlans.length === 0 && (
+          <p className="py-8 text-center text-muted-foreground">
+            No upgrade plans available. Contact support for more information.
+          </p>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ============================================
+// PLAN CARD
+// ============================================
+
+type PlanCardProps = {
+  plan: WhiteLabelPlan;
+  isCurrentPlan: boolean;
+  isRecommended: boolean;
+  highlightFeature?: GatedFeature;
+  onSelect: () => void;
+};
+
+function PlanCard({ plan, isCurrentPlan, isRecommended, highlightFeature, onSelect }: PlanCardProps) {
+  const priceDisplay = plan.is_free
+    ? "Free"
+    : plan.base_price_cents
+      ? `${(plan.base_price_cents / 100).toFixed(0)}/${plan.billing_interval === "yearly" ? "yr" : "mo"}`
+      : "Contact us";
+
+  const documentsLimit = plan.limits?.documents_per_month ?? "Unlimited";
+
+  return (
+    <div
+      className={`relative flex flex-col rounded-lg border p-4 ${
+        isRecommended ? "border-primary ring-2 ring-primary" : "border-border"
+      } ${isCurrentPlan ? "bg-muted/50" : ""}`}
+    >
+      {isRecommended && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-1 font-medium text-primary-foreground text-xs">
+          Recommended
+        </div>
+      )}
+
+      <div className="mb-2 flex items-center gap-2">
+        <PlanIcon slug={plan.slug} />
+        <h3 className="font-semibold">{plan.name}</h3>
+      </div>
+
+      <div className="mb-1 font-bold text-2xl">
+        {plan.is_free ? "" : "€"}
+        {priceDisplay}
+      </div>
+
+      <p className="mb-4 text-muted-foreground text-sm">{documentsLimit} documents/month</p>
+
+      <ul className="mb-4 flex-1 space-y-2">
+        {getPlanFeatures(plan.slug).map((featureText) => (
+          <li
+            key={featureText}
+            className={`flex items-center gap-2 text-sm ${
+              highlightFeature && featureText.toLowerCase().includes(highlightFeature.replace("_", " "))
+                ? "font-medium text-primary"
+                : ""
+            }`}
+          >
+            <Check className="h-4 w-4 flex-shrink-0 text-green-500" />
+            {featureText}
+          </li>
+        ))}
+      </ul>
+
+      <Button
+        variant={isCurrentPlan ? "outline" : isRecommended ? "default" : "secondary"}
+        className="w-full"
+        disabled={isCurrentPlan}
+        onClick={onSelect}
+      >
+        {isCurrentPlan ? "Current Plan" : `Upgrade to ${plan.name}`}
+      </Button>
+    </div>
+  );
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+function PlanIcon({ slug }: { slug: string }) {
+  switch (slug) {
+    case "free":
+      return <Zap className="h-5 w-5 text-muted-foreground" />;
+    case "starter":
+      return <Sparkles className="h-5 w-5 text-blue-500" />;
+    case "advanced":
+      return <Crown className="h-5 w-5 text-amber-500" />;
+    default:
+      return <Zap className="h-5 w-5 text-muted-foreground" />;
+  }
+}
+
+function getFeatureDisplayName(feature: GatedFeature): string {
+  const names: Record<GatedFeature, string> = {
+    furs: "FURS Fiscalization",
+    eslog: "eSlog Export",
+    recurring: "Recurring Invoices",
+    email_sending: "Email Sending",
+    custom_templates: "Custom Templates",
+    api_access: "API Access",
+    webhooks: "Webhooks",
+    priority_support: "Priority Support",
+  };
+  return names[feature] || feature;
+}
+
+function getPlanFeatures(slug: string): string[] {
+  switch (slug) {
+    case "free":
+      return ["Basic invoicing", "Estimates & quotes", "Customer management", "PDF export"];
+    case "starter":
+      return [
+        "Everything in Free",
+        "FURS fiscalization",
+        "eSlog export",
+        "Recurring invoices",
+        "Email sending",
+        "100 docs/month",
+      ];
+    case "advanced":
+      return [
+        "Everything in Starter",
+        "Custom templates",
+        "API access",
+        "Webhooks",
+        "Priority support",
+        "2,500 docs/month",
+      ];
+    default:
+      return [];
+  }
+}

package/src/frontend.tsx

@@ -0,0 +1,28 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `src/index.html`.
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { App } from "./app";
+
+const elem = document.getElementById("root")!;
+const app = (
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+
+if (import.meta.hot) {
+  // With hot module reloading, `import.meta.hot.data` is persisted.
+  import.meta.hot.data.root ??= createRoot(elem);
+  const root = import.meta.hot.data.root;
+  root.render(app);
+} else {
+  // The hot module reloading API is not available in production.
+  createRoot(elem).render(app);
+}

package/src/generate-schemas.ts

@@ -0,0 +1,265 @@
+import { execSync } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+const SCHEMAS_DIR = "./src/generated/schemas";
+const GENERATED_DIR = "./generated";
+
+type SchemaGroups = {
+  [key: string]: string[];
+};
+
+// Helper to get group name from schema name
+const getGroupName = (schemaName: string): string => {
+  // Remove _Body and extract the resource name (e.g., Customer from createCustomer)
+  return schemaName.replace(/(create|patch|update|delete)([A-Z][a-zA-Z]+)_Body/, "$2").toLowerCase();
+};
+
+// Helper to format operation name
+const formatOperationName = (operationType: string, resourceName: string): string => {
+  // Convert to proper case format (e.g., createCustomer)
+  return `${operationType}${resourceName}`;
+};
+
+async function main() {
+  // Ensure directories exist
+  await fs.mkdir(SCHEMAS_DIR, { recursive: true });
+  await fs.mkdir(GENERATED_DIR, { recursive: true });
+
+  // Generate initial schemas with openapi-zod-client
+  try {
+    const openApiPath = path.resolve(__dirname, "../../../apps/api/openapi.json");
+    execSync(
+      `bunx openapi-zod-client ${openApiPath} ` +
+        "--output " +
+        GENERATED_DIR +
+        "/schemas.ts " +
+        "--export-schemas " +
+        "--group-strategy none " +
+        "--with-docs",
+      { stdio: "inherit" },
+    );
+  } catch (_error) {
+    console.error("Failed to generate schemas.");
+    process.exit(1);
+  }
+
+  // Read and parse the generated file
+  let content = await fs.readFile("./generated/schemas.ts", "utf-8");
+
+  // Fix common generation issues
+  content = content.replace(/\.prefault\(/g, ".default(");
+
+  // Fix Zod v3 record syntax - z.record(z.string()) -> z.record(z.string(), z.any())
+  content = content.replace(/z\.record\(z\.string\(\)\)/g, "z.record(z.string(), z.any())");
+
+  // Remove .default({}) from metadata fields to keep them truly optional
+  // When using .optional().default({}), Zod infers the type as required since it always has a value after parsing
+  // We want metadata to be optional in the form type to match SDK types
+  // Handle both single-line and multi-line patterns (with optional whitespace/newlines between)
+  content = content.replace(/\.optional\(\)\s*\.default\(\{\}\)/gs, ".optional()");
+
+  // Keep nullable types as-is (z.union([z.string(), z.null()]) stays nullable)
+  // This matches SDK types which also use | null
+
+  // Replace undefined named schema references with z.any().optional()
+  // These are schemas referenced by name (like TaxRules, EntityBankAccount) that aren't defined in this file
+  content = content.replace(/: TaxRules,/g, ": z.any().optional(),");
+  content = content.replace(/: EuTaxRules,/g, ": z.any().optional(),");
+  content = content.replace(/z\.array\(EntityBankAccount\)/g, "z.array(z.any())");
+
+  // Extract just the schema definitions
+  const schemaMatch = content.match(/export const schemas = {([^}]+)}/s);
+  if (!schemaMatch) {
+    throw new Error("Could not find schema definitions in generated file");
+  }
+  const schemaSection = schemaMatch[1];
+
+  // Helper function to find schema dependencies (schemas referenced by other schemas)
+  function findSchemaDependencies(schemaName: string, fullContent: string): string[] {
+    const dependencies: string[] = [];
+    const schemaDefMatch = fullContent.match(new RegExp(`const ${schemaName} = ([^;]+);`, "s"));
+    if (schemaDefMatch) {
+      // Find references to other const schemas (e.g., CreateFursInvoiceData.optional())
+      const constRefs = schemaDefMatch[1].match(/\b([A-Z][a-zA-Z0-9]+)(?:\.optional\(\)|\.nullable\(\))?/g);
+      if (constRefs) {
+        for (const ref of constRefs) {
+          const cleanRef = ref.replace(/\.(optional|nullable)\(\)/, "");
+          // Check if it's actually a schema definition in the file
+          if (fullContent.includes(`const ${cleanRef} = z.`)) {
+            dependencies.push(cleanRef);
+          }
+        }
+      }
+    }
+    return dependencies;
+  }
+
+  // Parse schema names and group them
+  const schemasByGroup = schemaSection
+    .split(",\n")
+    .map((line) => line.trim())
+    .filter((line) => line.includes("_Body"))
+    .map((line) => line.split(":")[0].trim())
+    .reduce<SchemaGroups>((groups, schemaName) => {
+      const groupName = getGroupName(schemaName);
+      if (!groups[groupName]) {
+        groups[groupName] = [];
+      }
+
+      // Add the main schema
+      groups[groupName].push(schemaName);
+
+      // Find and add dependencies
+      const deps = findSchemaDependencies(schemaName, content);
+      const queue = [...deps];
+      const processed = new Set(deps);
+
+      while (queue.length > 0) {
+        const currentDep = queue.shift()!;
+        if (!groups[groupName].includes(currentDep)) {
+          groups[groupName].push(currentDep);
+        }
+
+        const nestedDeps = findSchemaDependencies(currentDep, content);
+        for (const nested of nestedDeps) {
+          if (!processed.has(nested)) {
+            processed.add(nested);
+            queue.push(nested);
+          }
+        }
+      }
+
+      return groups;
+    }, {});
+
+  // Create files for each group
+  for (const [groupName, schemaNames] of Object.entries(schemasByGroup)) {
+    // Separate dependencies from operation schemas
+    const dependencies = schemaNames.filter((name) => !name.includes("_Body")).reverse();
+    const operations = schemaNames.filter((name) => name.includes("_Body"));
+
+    // Process dependencies first, then operations
+    const orderedNames = [...dependencies, ...operations];
+
+    const schemas = orderedNames
+      .map((schemaName) => {
+        // Check if this is an operation schema or a dependency
+        const operationMatch = schemaName.match(/(create|patch|update|delete|register|upload|send|preview|render)/i);
+        const isOperationSchema = operationMatch && schemaName.includes("_Body");
+
+        if (!isOperationSchema) {
+          // This is a dependency schema, just extract its definition
+          const schemaDefinitionMatch = content.match(new RegExp(`const ${schemaName} = ([^;]+);`, "s"));
+          if (!schemaDefinitionMatch) {
+            console.warn(`Warning: Could not find dependency schema definition for ${schemaName}`);
+            return null;
+          }
+
+          return `
+// Dependency schema for ${groupName}
+const ${schemaName} = ${schemaDefinitionMatch[1]};
+`;
+        }
+
+        // Handle operation schemas
+        const resourceMatch = schemaName.match(/[A-Z][a-zA-Z]+_Body/);
+        if (!resourceMatch) {
+          console.warn(`Warning: Invalid schema name format: ${schemaName}`);
+          return null;
+        }
+
+        const operationType = operationMatch[1].toLowerCase();
+        const resourceName = resourceMatch[0].replace("_Body", "");
+        const operationName = formatOperationName(operationType, resourceName);
+
+        const schemaDefinitionMatch = content.match(new RegExp(`const ${schemaName} = ([^;]+);`, "s"));
+        if (!schemaDefinitionMatch) {
+          console.warn(`Warning: Could not find schema definition for ${schemaName}`);
+          return null;
+        }
+
+        let schemaDefinition = schemaDefinitionMatch[1];
+
+        // Post-process: Add character limits to name and description fields
+        // Add max length validation from API schema (only if not already present)
+        schemaDefinition = schemaDefinition.replace(
+          /name: z\.string\(\)\.min\(1\)\.max\(100\)(?!\.max)/g,
+          'name: z.string().min(1).max(100, "Name must not exceed 100 characters")',
+        );
+        // Add description character limit - handles both union and nullable variants
+        schemaDefinition = schemaDefinition.replace(
+          /description: z\.union\(\[z\.string\(\)(?!\.max)/g,
+          'description: z.union([z.string().max(4000, "Description must not exceed 4000 characters")',
+        );
+
+        // Add min length to country
+        schemaDefinition = schemaDefinition.replace(/country: z\.string\(\)(?!\.min)/g, "country: z.string().min(1)");
+
+        return `
+// Schema for ${operationType} ${resourceName.toLowerCase()} operation
+const ${operationName}SchemaDefinition = ${schemaDefinition};
+
+// Type for ${operationType} ${resourceName.toLowerCase()} operation
+export type ${operationName.slice(0, 1).toUpperCase() + operationName.slice(1)}Schema = z.infer<typeof ${operationName}SchemaDefinition>;
+`;
+      })
+      .filter((schema) => schema !== null) // Remove null entries
+      .join("\n");
+
+    const exports = schemaNames
+      .filter((schemaName) => {
+        // Only export operation schemas, not dependencies
+        const operationMatch = schemaName.match(/(create|patch|update|delete|register|upload|send|preview|render)/i);
+        return operationMatch !== null && schemaName.includes("_Body");
+      })
+      .map((schemaName) => {
+        const operationMatch = schemaName.match(/(create|patch|update|delete|register|upload|send|preview|render)/i);
+        const resourceMatch = schemaName.match(/[A-Z][a-zA-Z]+_Body/);
+
+        if (!operationMatch || !resourceMatch) {
+          throw new Error(`Invalid schema name format: ${schemaName}`);
+        }
+
+        const operationType = operationMatch[1].toLowerCase();
+        const resourceName = resourceMatch[0].replace("_Body", "");
+        const operationName = formatOperationName(operationType, resourceName);
+        return `export const ${operationName}Schema = ${operationName}SchemaDefinition;`;
+      })
+      .join("\n");
+
+    const schemaContent = `/**
+ * This file was automatically generated using 'bun generate-schemas'.
+ * Do not edit this file manually. To update, run the generator again.
+ * @generated
+ */
+
+import { z } from 'zod';
+
+// Schemas for ${groupName} endpoints
+${schemas}
+${exports}
+`;
+
+    await fs.writeFile(path.join(SCHEMAS_DIR, `${groupName}.ts`), schemaContent);
+  }
+
+  // Create index file
+  const indexContent = `/**
+ * This file was automatically generated using 'bun generate-schemas'.
+ * Do not edit this file manually. To update, run the generator again.
+ * @generated
+ */
+
+${Object.keys(schemasByGroup)
+  .map((groupName) => `export * from './${groupName}';`)
+  .join("\n")}
+`;
+
+  await fs.writeFile(path.join(SCHEMAS_DIR, "index.ts"), indexContent);
+
+  // Clean up temporary files
+  await fs.unlink(`${GENERATED_DIR}/schemas.ts`);
+}
+
+main().catch(console.error);

package/src/generated/schemas/advanceinvoice.ts

@@ -0,0 +1,177 @@
+/**
+ * This file was automatically generated using 'bun generate-schemas'.
+ * Do not edit this file manually. To update, run the generator again.
+ * @generated
+ */
+
+import { z } from 'zod';
+
+// Schemas for advanceinvoice endpoints
+
+// Dependency schema for advanceinvoice
+const LineDiscount = z.object({
+  value: z.number().gte(0),
+  type: z.enum(["percent", "amount"]).optional().default("percent"),
+});
+
+
+// Schema for create advanceinvoice operation
+const createAdvanceInvoiceSchemaDefinition = z.object({
+  is_draft: z.boolean().optional(),
+  date: z
+    .string()
+    .regex(/^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?)?$/)
+    .optional(),
+  issuer: z
+    .object({
+      name: z.union([z.string(), z.null()]),
+      email: z.union([z.string(), z.null()]),
+      address: z.union([z.string(), z.null()]),
+      address_2: z.union([z.string(), z.null()]),
+      post_code: z.union([z.string(), z.null()]),
+      city: z.union([z.string(), z.null()]),
+      state: z.union([z.string(), z.null()]),
+      country: z.union([z.string(), z.null()]),
+      country_code: z.union([z.string(), z.null()]),
+      tax_number: z.union([z.string(), z.null()]),
+      bank_account: z.union([
+        z
+          .object({
+            type: z
+              .enum(["iban", "us_domestic", "uk_domestic", "other"])
+              .default("iban"),
+            name: z.string(),
+            bank_name: z.string(),
+            iban: z.string(),
+            account_number: z.string(),
+            bic: z.string(),
+            routing_number: z.string(),
+            sort_code: z.string(),
+          })
+          .partial()
+          .passthrough(),
+        z.null(),
+      ]),
+    })
+    .partial()
+    .passthrough()
+    .optional(),
+  customer_id: z.union([z.string(), z.null()]).optional(),
+  customer: z
+    .union([
+      z
+        .object({
+          name: z.union([z.string(), z.null()]),
+          email: z.union([z.string(), z.null()]),
+          address: z.union([z.string(), z.null()]),
+          address_2: z.union([z.string(), z.null()]),
+          post_code: z.union([z.string(), z.null()]),
+          city: z.union([z.string(), z.null()]),
+          state: z.union([z.string(), z.null()]),
+          country: z.union([z.string(), z.null()]),
+          country_code: z.union([z.string(), z.null()]),
+          tax_number: z.union([z.string(), z.null()]),
+          bank_account: z.union([
+            z
+              .object({
+                type: z
+                  .enum(["iban", "us_domestic", "uk_domestic", "other"])
+                  .default("iban"),
+                name: z.string(),
+                bank_name: z.string(),
+                iban: z.string(),
+                account_number: z.string(),
+                bic: z.string(),
+                routing_number: z.string(),
+                sort_code: z.string(),
+              })
+              .partial()
+              .passthrough(),
+            z.null(),
+          ]),
+          save_customer: z.boolean().default(true),
+        })
+        .partial()
+        .passthrough(),
+      z.null(),
+    ])
+    .optional(),
+  note: z.union([z.string(), z.null()]).optional(),
+  payment_terms: z.union([z.string(), z.null()]).optional(),
+  currency_code: z.string().max(3).optional(),
+  metadata: z.union([z.record(z.string(), z.any()), z.null()]).optional(),
+  date_due: z.union([z.string(), z.null()]).optional(),
+  date_service: z.union([z.string(), z.null()]).optional(),
+  date_service_to: z.union([z.string(), z.null()]).optional(),
+  items: z
+    .array(
+      z.object({
+        name: z.string().min(1),
+        description: z.union([z.string().max(4000, "Description must not exceed 4000 characters"), z.null()]).optional(),
+        price: z.number().optional(),
+        gross_price: z.number().optional(),
+        quantity: z.number().gte(-140737488355328).lte(140737488355327),
+        unit: z.union([z.string(), z.null()]).optional(),
+        taxes: z
+          .array(
+            z
+              .object({
+                rate: z.number(),
+                tax_id: z.string(),
+                classification: z.string(),
+                reverse_charge: z.boolean(),
+                amount: z.number(),
+              })
+              .partial()
+          )
+          .optional(),
+        discounts: z.array(LineDiscount).max(5).optional(),
+        metadata: z
+          .union([
+            z.string(),
+            z.number(),
+            z.boolean(),
+            z.null(),
+            z.object({}).partial().passthrough(),
+            z.array(z.unknown()),
+            z.null(),
+          ])
+          .optional(),
+      })
+    )
+    .min(1),
+  linked_documents: z.array(z.string().min(1)).optional(),
+  payment: z
+    .union([
+      z.object({
+        advance_invoice_id: z.union([z.string(), z.null()]).optional(),
+        amount: z.number().gt(0).optional(),
+        type: z.string().max(20),
+        date: z.string().optional(),
+        reference: z.union([z.string(), z.null()]).optional(),
+        note: z.union([z.string(), z.null()]).optional(),
+        metadata: z.union([z.record(z.string(), z.any()), z.null()]).optional(),
+      }),
+      z.null(),
+    ])
+    .optional(),
+  furs: z
+    .union([
+      z
+        .object({
+          business_premise_name: z.string().min(1),
+          electronic_device_name: z.string().min(1),
+          operator_tax_number: z.string(),
+          operator_label: z.string(),
+          skip: z.boolean(),
+        })
+        .partial(),
+      z.null(),
+    ])
+    .optional(),
+});
+
+// Type for create advanceinvoice operation
+export type CreateAdvanceInvoiceSchema = z.infer<typeof createAdvanceInvoiceSchemaDefinition>;
+
+export const createAdvanceInvoiceSchema = createAdvanceInvoiceSchemaDefinition;