@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/components/webhook-logs/webhook-delivery-list-table.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { getClientHeaders } from "@spaceinvoices/js-sdk";
+import { formatDistanceToNow } from "date-fns";
+import { useCallback, useMemo } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/ui/components/ui/sheet";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { AUTH_COOKIES } from "@/ui/lib/auth";
+import { getCookie } from "@/ui/lib/browser-cookies";
+import { getDateFnsLocale } from "@/ui/lib/date-fns-locale";
+import { createTranslation } from "@/ui/lib/translation";
+import { cn } from "@/ui/lib/utils";
+import { DataTable } from "../table/data-table";
+import { withTableTranslations } from "../table/locales";
+import type { Column, FilterConfig, ListTableProps, TableQueryParams, TableQueryResponse } from "../table/types";
+import translations from "./locales";
+import { WebhookDeliveryDetail } from "./webhook-delivery-detail";
+
+export interface WebhookDeliveryResponse {
+  id: string;
+  webhook_id: string;
+  entity_id: string;
+  event_type: string;
+  status: string;
+  request_body: Record<string, unknown>;
+  response_status: number | null;
+  response_body: string | null;
+  error_message: string | null;
+  attempt: number;
+  max_attempts: number;
+  next_retry_at: string | null;
+  duration_ms: number | null;
+  created_at: string;
+  completed_at: string | null;
+  webhook_url: string | null;
+}
+
+const getApiBaseUrl = () => {
+  if (typeof import.meta !== "undefined" && import.meta.env) {
+    return import.meta.env.VITE_API_URL || import.meta.env.BUN_PUBLIC_API_URL || "";
+  }
+  return "";
+};
+
+export const WEBHOOK_LOGS_CACHE_KEY = "webhook-logs";
+const mergedTranslations = withTableTranslations(translations);
+
+const STATUS_COLORS: Record<string, string> = {
+  success: "bg-green-500",
+  failed: "bg-red-500",
+  pending: "bg-yellow-500",
+};
+
+const STATUS_BADGE_COLORS: Record<string, string> = {
+  success: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+  failed: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+  pending: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+};
+
+function StatusDot({ status }: { status: string }) {
+  return <span className={cn("inline-block h-2.5 w-2.5 rounded-full", STATUS_COLORS[status] || "bg-gray-400")} />;
+}
+
+function StatusBadge({ status, t }: { status: string; t: (key: string) => string }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-1.5 py-0.5 font-medium text-xs capitalize",
+        STATUS_BADGE_COLORS[status] || "bg-gray-100 text-gray-700",
+      )}
+    >
+      {t(status)}
+    </span>
+  );
+}
+
+type WebhookDeliveryListTableProps = ListTableProps<WebhookDeliveryResponse> & {
+  environment?: "live" | "sandbox";
+  showEntityColumn?: boolean;
+  selectedDelivery?: WebhookDeliveryResponse | null;
+  onSelectDelivery?: (delivery: WebhookDeliveryResponse | null) => void;
+  /** Translation function */
+  t?: (key: string) => string;
+  /** Locale used for relative date formatting */
+  locale?: string;
+};
+
+export function WebhookDeliveryListTable({
+  queryParams,
+  onChangeParams,
+  entityId,
+  environment,
+  showEntityColumn = false,
+  selectedDelivery,
+  onSelectDelivery,
+  t = (key) => key,
+  locale,
+}: WebhookDeliveryListTableProps) {
+  const translate = createTranslation({ t, locale, translations: mergedTranslations });
+
+  const handleFetch = useCallback(
+    async (params: TableQueryParams): Promise<TableQueryResponse<WebhookDeliveryResponse>> => {
+      const token = getCookie(AUTH_COOKIES.TOKEN);
+      if (!token) throw new Error("Not authenticated");
+
+      const queryParamsUrl = new URLSearchParams();
+
+      if (entityId) {
+        queryParamsUrl.set("entity_id", entityId);
+      } else {
+        queryParamsUrl.set("environment", environment || "live");
+      }
+
+      if (params.limit) queryParamsUrl.set("limit", String(params.limit));
+      if (params.next_cursor) queryParamsUrl.set("next_cursor", params.next_cursor);
+      if (params.prev_cursor) queryParamsUrl.set("prev_cursor", params.prev_cursor);
+
+      // Search maps to event_type filter
+      if (params.search) queryParamsUrl.set("event_type", params.search);
+
+      // Status filter (reuse http_status field for webhook status)
+      if (params.filter_http_status) queryParamsUrl.set("status", params.filter_http_status);
+
+      // Date filters
+      if (params.filter_date_from) queryParamsUrl.set("date_from", params.filter_date_from);
+      if (params.filter_date_to) queryParamsUrl.set("date_to", params.filter_date_to);
+
+      const apiBaseUrl = getApiBaseUrl();
+      const response = await fetch(`${apiBaseUrl}/webhook-logs?${queryParamsUrl.toString()}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          ...getClientHeaders("ui"),
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch webhook logs: ${response.status}`);
+      }
+
+      return (await response.json()) as TableQueryResponse<WebhookDeliveryResponse>;
+    },
+    [entityId, environment],
+  );
+
+  const columns: Column<WebhookDeliveryResponse>[] = useMemo(() => {
+    const dateLocale = getDateFnsLocale(locale);
+    const cols: Column<WebhookDeliveryResponse>[] = [
+      {
+        id: "status_dot",
+        header: "",
+        className: "w-8",
+        cell: (d) => <StatusDot status={d.status} />,
+      },
+      {
+        id: "status",
+        header: translate("Status"),
+        className: "w-24",
+        cell: (d) => <StatusBadge status={d.status} t={translate} />,
+      },
+      {
+        id: "event_type",
+        header: translate("Event"),
+        cell: (d) => <span className="truncate font-mono text-sm">{d.event_type}</span>,
+      },
+      {
+        id: "webhook_url",
+        header: translate("URL"),
+        className: "hidden md:table-cell",
+        cell: (d) => (
+          <span className="truncate text-muted-foreground text-sm" title={d.webhook_url ?? undefined}>
+            {d.webhook_url ? truncateUrl(d.webhook_url) : "—"}
+          </span>
+        ),
+      },
+    ];
+
+    if (showEntityColumn) {
+      cols.push({
+        id: "entity_id",
+        header: translate("Entity"),
+        className: "hidden lg:table-cell",
+        cell: (d) => (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="cursor-pointer rounded bg-muted px-1.5 py-0.5 font-mono text-muted-foreground text-xs hover:bg-muted/80"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigator.clipboard.writeText(d.entity_id);
+                }}
+              >
+                {d.entity_id}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{translate("Copy")}</TooltipContent>
+          </Tooltip>
+        ),
+      });
+    }
+
+    cols.push(
+      {
+        id: "duration_ms",
+        header: translate("Duration"),
+        className: "hidden sm:table-cell w-20",
+        align: "right",
+        cell: (d) => (
+          <span className="text-muted-foreground text-xs">{d.duration_ms != null ? `${d.duration_ms}ms` : "—"}</span>
+        ),
+      },
+      {
+        id: "created_at",
+        header: translate("Time"),
+        align: "right",
+        cell: (d) => (
+          <span className="text-muted-foreground text-xs">
+            {formatDistanceToNow(new Date(d.created_at), { addSuffix: true, locale: dateLocale })}
+          </span>
+        ),
+      },
+    );
+
+    return cols;
+  }, [locale, showEntityColumn, translate]);
+
+  const filterConfig: FilterConfig = {
+    dateFields: [{ id: "created_at", label: translate("Date") }],
+  };
+
+  const cacheKey = entityId
+    ? `${WEBHOOK_LOGS_CACHE_KEY}-${entityId}`
+    : `${WEBHOOK_LOGS_CACHE_KEY}-account-${environment || "live"}`;
+
+  return (
+    <>
+      <DataTable
+        columns={columns}
+        cacheKey={cacheKey}
+        resourceName="webhook delivery"
+        onFetch={handleFetch}
+        queryParams={queryParams}
+        onChangeParams={onChangeParams}
+        entityId={entityId}
+        filterConfig={filterConfig}
+        onRowClick={(d) => onSelectDelivery?.(d)}
+        t={translate}
+      />
+
+      <Sheet open={!!selectedDelivery} onOpenChange={(open) => !open && onSelectDelivery?.(null)}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+          <SheetHeader>
+            <SheetTitle className="flex items-center gap-2">
+              {selectedDelivery && (
+                <>
+                  <StatusBadge status={selectedDelivery.status} t={translate} />
+                  <span className="font-mono text-sm">{selectedDelivery.event_type}</span>
+                </>
+              )}
+            </SheetTitle>
+          </SheetHeader>
+          {selectedDelivery && <WebhookDeliveryDetail delivery={selectedDelivery} t={translate} locale={locale} />}
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+function truncateUrl(url: string, maxLength = 40): string {
+  try {
+    const parsed = new URL(url);
+    const display = parsed.hostname + parsed.pathname;
+    return display.length > maxLength ? `${display.slice(0, maxLength)}…` : display;
+  } catch {
+    return url.length > maxLength ? `${url.slice(0, maxLength)}…` : url;
+  }
+}

package/src/components/wl-subscription/index.ts

@@ -1,2 +1,3 @@
 export { LockedBadge, LockedFeature, UsageBadge } from "./locked-feature";
+export { Paywall } from "./paywall";
 export { UpgradeModal } from "./upgrade-modal";

package/src/components/wl-subscription/locked-feature.tsx

@@ -168,6 +168,7 @@ function getDefaultLockedMessage(feature: GatedFeature): string {
     api_access: "API access requires an Advanced plan",
     webhooks: "Webhooks require an Advanced plan",
     priority_support: "Priority support requires an Advanced plan",
+    e_invoicing: "E-Invoicing requires a Starter or Advanced plan",
   };
 
   return messages[feature] || "This feature requires a plan upgrade";

package/src/components/wl-subscription/paywall.tsx

@@ -0,0 +1,193 @@
+import { Check, Crown, Loader2, Sparkles, Zap } from "lucide-react";
+import { useState } from "react";
+
+import { useWLSubscription, type WhiteLabelPlan } from "../../providers/wl-subscription-provider";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
+import { Switch } from "../ui/switch";
+
+/**
+ * Paywall component
+ *
+ * Shown when `needsPayment` is true — either after trial expiry
+ * or for paid-only configs with no active subscription.
+ * Displays plan cards with monthly/yearly toggle and checkout buttons.
+ */
+export function Paywall() {
+  const { isTrialExpired, availablePlans, createCheckout } = useWLSubscription();
+  const [isYearly, setIsYearly] = useState(false);
+  const [isRedirecting, setIsRedirecting] = useState<string | null>(null);
+  const [checkoutError, setCheckoutError] = useState<string | null>(null);
+
+  // Only show paid plans
+  const paidPlans = [...availablePlans].filter((p) => !p.is_free).sort((a, b) => a.display_order - b.display_order);
+
+  const handleCheckout = async (planSlug: string) => {
+    try {
+      setIsRedirecting(planSlug);
+      setCheckoutError(null);
+      const billingInterval = isYearly ? "yearly" : "monthly";
+      const checkoutUrl = await createCheckout(planSlug, billingInterval);
+      window.location.href = checkoutUrl;
+    } catch (err) {
+      setCheckoutError(err instanceof Error ? err.message : "Failed to start checkout");
+      setIsRedirecting(null);
+    }
+  };
+
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 py-12">
+      <div className="mx-auto max-w-3xl text-center">
+        <Sparkles className="mx-auto mb-4 h-10 w-10 text-primary" />
+        <h1 className="mb-2 font-bold text-3xl tracking-tight">
+          {isTrialExpired ? "Your trial has expired" : "Choose a plan to get started"}
+        </h1>
+        <p className="mb-8 text-muted-foreground">
+          {isTrialExpired
+            ? "Subscribe to a plan to continue using all features."
+            : "Pick the plan that works best for your business."}
+        </p>
+
+        {/* Monthly/Yearly toggle */}
+        <div className="mb-8 flex items-center justify-center gap-3">
+          <span className={`text-sm ${!isYearly ? "font-medium" : "text-muted-foreground"}`}>Monthly</span>
+          <Switch checked={isYearly} onCheckedChange={setIsYearly} />
+          <span className={`text-sm ${isYearly ? "font-medium" : "text-muted-foreground"}`}>Yearly</span>
+          {isYearly && (
+            <Badge variant="secondary" className="ml-1">
+              Save 20%
+            </Badge>
+          )}
+        </div>
+
+        {checkoutError && (
+          <p className="mb-4 rounded-md bg-destructive/10 px-3 py-2 text-destructive text-sm">{checkoutError}</p>
+        )}
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {paidPlans.map((plan, index) => (
+            <PaywallPlanCard
+              key={plan.id}
+              plan={plan}
+              isYearly={isYearly}
+              isPopular={index === paidPlans.length - 1}
+              isLoading={isRedirecting === plan.slug}
+              isDisabled={isRedirecting !== null}
+              onSelect={() => handleCheckout(plan.slug)}
+            />
+          ))}
+        </div>
+
+        {paidPlans.length === 0 && (
+          <p className="py-8 text-muted-foreground">No plans available. Contact support for more information.</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// PLAN CARD
+// ============================================
+
+type PaywallPlanCardProps = {
+  plan: WhiteLabelPlan;
+  isYearly: boolean;
+  isPopular: boolean;
+  isLoading: boolean;
+  isDisabled: boolean;
+  onSelect: () => void;
+};
+
+function PaywallPlanCard({ plan, isYearly, isPopular, isLoading, isDisabled, onSelect }: PaywallPlanCardProps) {
+  const monthlyPrice = plan.base_price_cents ? plan.base_price_cents / 100 : 0;
+  const yearlyTotal = Math.round(monthlyPrice * 12 * 0.8 * 100) / 100;
+  const yearlyMonthly = Math.round((yearlyTotal / 12) * 100) / 100;
+
+  const displayPrice = isYearly ? yearlyMonthly : monthlyPrice;
+  const documentsLimit = plan.limits?.documents_per_month ?? "Unlimited";
+
+  return (
+    <Card className={`relative flex flex-col ${isPopular ? "border-primary ring-2 ring-primary" : ""}`}>
+      {isPopular && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <Badge className="bg-primary text-primary-foreground">Most Popular</Badge>
+        </div>
+      )}
+      <CardHeader className="pb-2">
+        <div className="flex items-center gap-2">
+          <PaywallPlanIcon slug={plan.slug} />
+          <CardTitle className="text-xl">{plan.name}</CardTitle>
+        </div>
+        <CardDescription>{documentsLimit} documents/month</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <div className="mb-4">
+          <span className="font-bold text-4xl">&euro;{displayPrice.toFixed(0)}</span>
+          <span className="text-muted-foreground">/mo</span>
+          {isYearly && (
+            <p className="mt-1 text-muted-foreground text-sm">&euro;{yearlyTotal.toFixed(0)} billed yearly</p>
+          )}
+        </div>
+
+        <ul className="space-y-2">
+          {getPaywallFeatures(plan.slug).map((feature) => (
+            <li key={feature} className="flex items-center gap-2 text-sm">
+              <Check className="h-4 w-4 flex-shrink-0 text-green-500" />
+              {feature}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" variant={isPopular ? "default" : "outline"} disabled={isDisabled} onClick={onSelect}>
+          {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+          {isLoading ? "Redirecting..." : `Get ${plan.name}`}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+function PaywallPlanIcon({ slug }: { slug: string }) {
+  switch (slug) {
+    case "basic":
+      return <Zap className="h-5 w-5 text-blue-500" />;
+    case "advanced":
+      return <Crown className="h-5 w-5 text-amber-500" />;
+    default:
+      return <Sparkles className="h-5 w-5 text-primary" />;
+  }
+}
+
+function getPaywallFeatures(slug: string): string[] {
+  switch (slug) {
+    case "basic":
+      return [
+        "Invoices & estimates",
+        "Customer management",
+        "PDF export",
+        "FURS fiscalization",
+        "eSlog export",
+        "Recurring invoices",
+        "Email sending",
+      ];
+    case "advanced":
+      return [
+        "Everything in Basic",
+        "All features unlocked",
+        "Custom templates",
+        "API access",
+        "Webhooks",
+        "Priority support",
+        "Overage billing (pay per doc)",
+      ];
+    default:
+      return [];
+  }
+}