@spaceinvoices/react-ui 0.4.11 → 0.4.31

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

@@ -1,12 +1,74 @@
 import { Check, Crown, Loader2, Sparkles, Zap } from "lucide-react";
 import { useState } from "react";
 
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
 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";
 
+type TranslateValues = Record<string, string | number>;
+
+function interpolateTranslation(template: string, values?: TranslateValues) {
+  if (!values) return template;
+
+  return Object.entries(values).reduce(
+    (result, [key, value]) => result.replaceAll(`{{${key}}}`, String(value)),
+    template,
+  );
+}
+
+function createPaywallTranslation({ t, namespace, locale, translationLocale }: ComponentTranslationProps) {
+  const fallbackTranslation = createTranslation({ t, namespace, locale, translationLocale });
+
+  return (key: string, options?: { defaultValue?: string } & TranslateValues) => {
+    const fullKey = namespace ? `${namespace}.${key}` : key;
+
+    if (t) {
+      const translated = (t as (key: string, options?: Record<string, unknown>) => string)(fullKey, options);
+      if (translated !== fullKey && translated !== key) {
+        return translated;
+      }
+    }
+
+    const fallback = fallbackTranslation(key);
+    if (fallback !== key) {
+      return interpolateTranslation(fallback, options);
+    }
+
+    return options?.defaultValue ? interpolateTranslation(options.defaultValue, options) : fallback;
+  };
+}
+
+function getPaywallFeatureKeys(slug: string): string[] {
+  switch (slug) {
+    case "simple":
+      return ["simple.estimates-and-delivery-notes", "simple.email-sending", "simple.users", "simple.templates"];
+    case "advanced":
+      return [
+        "advanced.fiscalization",
+        "advanced.e-invoicing",
+        "advanced.recurring",
+        "advanced.email-sending",
+        "advanced.priority-support",
+        "advanced.users",
+      ];
+    case "pro":
+      return [
+        "pro.connected-store",
+        "pro.extra-stores",
+        "pro.integrations",
+        "pro.api-and-webhooks",
+        "pro.custom-templates",
+        "pro.overage",
+      ];
+    default:
+      return [];
+  }
+}
+
 /**
  * Paywall component
  *
@@ -14,14 +76,16 @@ import { Switch } from "../ui/switch";
  * 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();
+export function Paywall({ t: translateFn, namespace, locale, translationLocale, onCheckoutRequested }: PaywallProps) {
+  const t = createPaywallTranslation({ t: translateFn, namespace, locale, translationLocale });
+  const { subscription, 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 popularPlanIndex = paidPlans.length > 0 ? Math.ceil(paidPlans.length / 2) - 1 : -1;
 
   const handleCheckout = async (planSlug: string) => {
     try {
@@ -29,34 +93,51 @@ export function Paywall() {
       setCheckoutError(null);
       const billingInterval = isYearly ? "yearly" : "monthly";
       const checkoutUrl = await createCheckout(planSlug, billingInterval);
+      const handled = await onCheckoutRequested?.({
+        planSlug,
+        billingInterval,
+        checkoutUrl,
+        needsCard: !subscription?.payment_method?.has_card,
+      });
+      if (handled) {
+        setIsRedirecting(null);
+        return;
+      }
+
       window.location.href = checkoutUrl;
     } catch (err) {
-      setCheckoutError(err instanceof Error ? err.message : "Failed to start checkout");
+      setCheckoutError(err instanceof Error ? err.message : t("entity-billing-page.paywall.checkout-failed"));
       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"}
+    <div className="flex w-full flex-col items-center px-4 py-6 lg:py-8">
+      <div className="mx-auto w-full max-w-5xl text-center">
+        <Sparkles className="mx-auto mb-3 h-8 w-8 text-primary/80" />
+        <h1 className="mb-2 font-semibold text-2xl tracking-tight">
+          {isTrialExpired
+            ? t("entity-billing-page.paywall.title.expired")
+            : t("entity-billing-page.paywall.title.choose")}
         </h1>
-        <p className="mb-8 text-muted-foreground">
+        <p className="mx-auto mb-8 max-w-2xl text-foreground/70 text-sm">
           {isTrialExpired
-            ? "Subscribe to a plan to continue using all features."
-            : "Pick the plan that works best for your business."}
+            ? t("entity-billing-page.paywall.description.expired")
+            : t("entity-billing-page.paywall.description.choose")}
         </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>
+          <span className={`text-sm ${!isYearly ? "font-medium text-foreground" : "text-foreground/70"}`}>
+            {t("entity-billing-page.plans.monthly")}
+          </span>
           <Switch checked={isYearly} onCheckedChange={setIsYearly} />
-          <span className={`text-sm ${isYearly ? "font-medium" : "text-muted-foreground"}`}>Yearly</span>
+          <span className={`text-sm ${isYearly ? "font-medium text-foreground" : "text-foreground/70"}`}>
+            {t("entity-billing-page.plans.yearly")}
+          </span>
           {isYearly && (
             <Badge variant="secondary" className="ml-1">
-              Save 20%
+              {t("entity-billing-page.paywall.yearly-discount")}
             </Badge>
           )}
         </div>
@@ -65,13 +146,17 @@ export function Paywall() {
           <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">
+        <div className="grid gap-6 pt-3 lg:grid-cols-3">
           {paidPlans.map((plan, index) => (
             <PaywallPlanCard
               key={plan.id}
               plan={plan}
+              t={translateFn}
+              namespace={namespace}
+              locale={locale}
+              translationLocale={translationLocale}
               isYearly={isYearly}
-              isPopular={index === paidPlans.length - 1}
+              isPopular={index === popularPlanIndex}
               isLoading={isRedirecting === plan.slug}
               isDisabled={isRedirecting !== null}
               onSelect={() => handleCheckout(plan.slug)}
@@ -80,13 +165,22 @@ export function Paywall() {
         </div>
 
         {paidPlans.length === 0 && (
-          <p className="py-8 text-muted-foreground">No plans available. Contact support for more information.</p>
+          <p className="py-8 text-foreground/70 text-sm">{t("entity-billing-page.paywall.no-plans")}</p>
         )}
       </div>
     </div>
   );
 }
 
+type PaywallProps = ComponentTranslationProps & {
+  onCheckoutRequested?: (selection: {
+    planSlug: string;
+    billingInterval: "monthly" | "yearly";
+    checkoutUrl: string;
+    needsCard: boolean;
+  }) => boolean | Promise<boolean>;
+};
+
 // ============================================
 // PLAN CARD
 // ============================================
@@ -98,52 +192,95 @@ type PaywallPlanCardProps = {
   isLoading: boolean;
   isDisabled: boolean;
   onSelect: () => void;
-};
+} & ComponentTranslationProps;
 
-function PaywallPlanCard({ plan, isYearly, isPopular, isLoading, isDisabled, onSelect }: PaywallPlanCardProps) {
+function PaywallPlanCard({
+  plan,
+  isYearly,
+  isPopular,
+  isLoading,
+  isDisabled,
+  onSelect,
+  t: translateFn,
+  namespace,
+  locale,
+  translationLocale,
+}: PaywallPlanCardProps) {
+  const t = createPaywallTranslation({ t: translateFn, namespace, locale, translationLocale });
   const monthlyPrice = plan.base_price_cents ? plan.base_price_cents / 100 : 0;
-  const yearlyTotal = Math.round(monthlyPrice * 12 * 0.8 * 100) / 100;
+  const annualPriceCents = plan.limits?.annual_price_cents;
+  const yearlyTotal =
+    annualPriceCents != null ? annualPriceCents / 100 : 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";
+  const planName = t(`entity-billing-page.plan-names.${plan.slug}`, { defaultValue: plan.name });
+  const invoiceLimit = plan.limits?.invoices_per_month ?? plan.limits?.documents_per_month;
+  const includedStores = plan.limits?.included_store_count ?? null;
+  let planDescription = t("entity-billing-page.plan-description.unlimited");
+
+  if (invoiceLimit != null && includedStores != null) {
+    planDescription = t("entity-billing-page.plan-description.invoices-and-stores", {
+      invoices: invoiceLimit,
+      stores: includedStores,
+    });
+  } else if (invoiceLimit != null) {
+    planDescription = t("entity-billing-page.plan-description.invoices-only", { invoices: invoiceLimit });
+  } else if (includedStores != null) {
+    planDescription = t("entity-billing-page.plan-description.stores-only", { stores: includedStores });
+  }
+  const featureItems = getPaywallFeatureKeys(plan.slug).map((featureKey) =>
+    t(`entity-billing-page.paywall.features.${featureKey}`),
+  );
 
   return (
-    <Card className={`relative flex flex-col ${isPopular ? "border-primary ring-2 ring-primary" : ""}`}>
+    <Card
+      className={`relative flex h-full flex-col overflow-visible text-left ${
+        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>
+          <Badge className="bg-primary text-primary-foreground">{t("entity-billing-page.paywall.popular")}</Badge>
         </div>
       )}
-      <CardHeader className="pb-2">
+      <CardHeader className="pb-3">
         <div className="flex items-center gap-2">
           <PaywallPlanIcon slug={plan.slug} />
-          <CardTitle className="text-xl">{plan.name}</CardTitle>
+          <CardTitle className="font-semibold text-lg">{planName}</CardTitle>
         </div>
-        <CardDescription>{documentsLimit} documents/month</CardDescription>
+        <CardDescription className="text-foreground/70 text-sm">{planDescription}</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>
+        <div className="space-y-4">
+          <div>
+            <span className="font-semibold text-3xl">&euro;{displayPrice.toFixed(2)}</span>
+            <span className="text-foreground/70 text-sm">{t("entity-billing-page.pricing.per-month")}</span>
+          </div>
+          {isYearly ? (
+            <p className="text-foreground/70 text-sm">
+              &euro;{yearlyTotal.toFixed(2)} {t("entity-billing-page.paywall.billed-yearly")}
+            </p>
+          ) : null}
 
-        <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>
+          {featureItems.length > 0 ? (
+            <ul className="space-y-2 pt-1">
+              {featureItems.map((featureText) => (
+                <li key={featureText} className="flex items-start gap-2 text-foreground/80 text-sm">
+                  <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-600" />
+                  <span>{featureText}</span>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
       </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}`}
+          {isLoading
+            ? t("entity-billing-page.paywall.redirecting")
+            : t("entity-billing-page.paywall.get-plan", { plan: planName })}
         </Button>
       </CardFooter>
     </Card>
@@ -156,38 +293,13 @@ function PaywallPlanCard({ plan, isYearly, isPopular, isLoading, isDisabled, onS
 
 function PaywallPlanIcon({ slug }: { slug: string }) {
   switch (slug) {
-    case "basic":
-      return <Zap className="h-5 w-5 text-blue-500" />;
+    case "simple":
+      return <Sparkles className="h-5 w-5 text-blue-500" />;
     case "advanced":
       return <Crown className="h-5 w-5 text-amber-500" />;
+    case "pro":
+      return <Zap className="h-5 w-5 text-primary" />;
     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 [];
+      return <Zap className="h-5 w-5 text-muted-foreground" />;
   }
 }

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

@@ -21,7 +21,7 @@ type UpgradeModalProps = {
  *
  * Shows available plans and allows users to upgrade their subscription.
  * Highlights the feature that triggered the modal and which plans include it.
- * Includes monthly/yearly toggle with 20% yearly discount.
+ * Includes monthly/yearly toggle for white-label pricing.
  */
 export function UpgradeModal({ isOpen, onClose, feature, onUpgrade }: UpgradeModalProps) {
   const { plan: currentPlan, availablePlans, createCheckout } = useWLSubscription();
@@ -76,7 +76,7 @@ export function UpgradeModal({ isOpen, onClose, feature, onUpgrade }: UpgradeMod
           <span className={`text-sm ${isYearly ? "font-medium" : "text-muted-foreground"}`}>Yearly</span>
           {isYearly && (
             <Badge variant="secondary" className="ml-1">
-              Save 20%
+              2 months free
             </Badge>
           )}
         </div>
@@ -139,11 +139,13 @@ function PlanCard({
   onSelect,
 }: PlanCardProps) {
   const monthlyPrice = plan.base_price_cents ? plan.base_price_cents / 100 : 0;
-  const yearlyTotal = Math.round(monthlyPrice * 12 * 0.8 * 100) / 100;
+  const annualPriceCents = plan.limits?.annual_price_cents;
+  const yearlyTotal =
+    annualPriceCents != null ? annualPriceCents / 100 : 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";
+  const documentsLimit = plan.limits?.invoices_per_month ?? plan.limits?.documents_per_month ?? "Unlimited";
 
   return (
     <div
@@ -169,7 +171,7 @@ function PlanCard({
 
       {isYearly && <p className="mb-1 text-muted-foreground text-xs">&euro;{yearlyTotal.toFixed(0)} billed yearly</p>}
 
-      <p className="mb-4 text-muted-foreground text-sm">{documentsLimit} documents/month</p>
+      <p className="mb-4 text-muted-foreground text-sm">{documentsLimit} invoices/month</p>
 
       <ul className="mb-4 flex-1 space-y-2">
         {getPlanFeatures(plan.slug).map((featureText) => (
@@ -206,14 +208,12 @@ function PlanCard({
 
 function PlanIcon({ slug }: { slug: string }) {
   switch (slug) {
-    case "free":
-      return <Zap className="h-5 w-5 text-muted-foreground" />;
-    case "basic":
-      return <Zap className="h-5 w-5 text-blue-500" />;
-    case "starter":
+    case "simple":
       return <Sparkles className="h-5 w-5 text-blue-500" />;
     case "advanced":
       return <Crown className="h-5 w-5 text-amber-500" />;
+    case "pro":
+      return <Zap className="h-5 w-5 text-primary" />;
     default:
       return <Zap className="h-5 w-5 text-muted-foreground" />;
   }
@@ -237,36 +237,33 @@ function getFeatureDisplayName(feature: GatedFeature): string {
 
 function getPlanFeatures(slug: string): string[] {
   switch (slug) {
-    case "free":
-      return ["Basic invoicing", "Estimates & quotes", "Customer management", "PDF export"];
-    case "basic":
+    case "simple":
       return [
-        "Invoices & estimates",
-        "Customer management",
-        "PDF export",
-        "FURS fiscalization",
-        "eSlog export",
-        "Recurring invoices",
+        "15 invoices per month",
+        "Unlimited estimates and delivery notes",
         "Email sending",
+        "1 user",
+        "Clean invoice templates",
       ];
-    case "starter":
+    case "advanced":
       return [
-        "Everything in Free",
-        "FURS fiscalization",
-        "eSlog export",
+        "500 invoices per month",
+        "FURS and FINA fiscalization",
+        "eSlog and Peppol e-invoicing",
         "Recurring invoices",
         "Email sending",
-        "100 docs/month",
+        "Priority support",
+        "3 users",
       ];
-    case "advanced":
+    case "pro":
       return [
-        "Everything in Basic",
-        "All features unlocked",
+        "1,000 invoices per month",
+        "1 connected store included",
+        "Extra stores at €5.99/month",
+        "Shopify and WooCommerce integrations",
+        "API access and webhooks",
         "Custom templates",
-        "API access",
-        "Webhooks",
-        "Priority support",
-        "2,500 docs/month",
+        "Overage billed at €0.01/invoice",
       ];
     default:
       return [];