@burdenoff/website-sdk 0.0.0-dev → 2026.511.1

package/dist/components/pricing.mjs

@@ -253,9 +253,9 @@ var Button = React.forwardRef(
   }
 );
 Button.displayName = "Button";
-var GET_PLANS_QUERY = `
-  query GetPublicPlans($productId: String!) {
-    publicPlans(productId: $productId) {
+var GET_ALL_PLANS_QUERY = `
+  query GetAllPlans {
+    getAllPlans {
       id
       name
       price
@@ -300,15 +300,11 @@ function formatInterval(duration, billingIntervals) {
   const intervals = billingIntervals || defaultIntervals;
   return intervals[duration] || `/${duration}`;
 }
-function isEnterprisePlan(planName) {
-  const name = planName.toLowerCase();
-  return name.includes("team") || name.includes("business") || name.includes("enterprise");
-}
 function detectPlanTier(planName) {
   const name = planName.toLowerCase();
-  if (name.includes("free") || name.includes("basic") || name.includes("starter") || name.includes("hobby")) {
+  if (name.includes("basic") || name.includes("starter")) {
     return "basic";
-  } else if (name.includes("pro") || name.includes("professional") || name.includes("premium") || name.includes("team")) {
+  } else if (name.includes("pro") || name.includes("professional") || name.includes("premium")) {
     return "professional";
   } else if (name.includes("enterprise") || name.includes("business")) {
     return "enterprise";
@@ -328,8 +324,7 @@ function getMetadataForPlan(planName, planMetadata) {
       defaultDescription: meta.defaultDescription || "Choose this plan",
       popular: meta.popular ?? false,
       ctaText: meta.ctaText || "Get Started",
-      ctaType: meta.ctaType || "signup",
-      features: meta.features
+      ctaType: meta.ctaType || "signup"
     };
   }
   const tier = detectPlanTier(planName);
@@ -352,54 +347,37 @@ function getMetadataForPlan(planName, planMetadata) {
     ctaType: "signup"
   };
 }
-function humanizeQuotaName(name) {
-  const parts = name.split(".");
-  const resource = parts.length >= 3 ? parts[parts.length - 2] : parts[parts.length - 1];
-  return resource.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-}
 function transformQuotaToFeature(quota) {
   const { name, limits } = quota;
   if (!limits || typeof limits !== "object") {
-    return humanizeQuotaName(name);
+    return name;
   }
   const limitsObj = limits;
   const value = limitsObj.value;
   const unit = limitsObj.unit;
   const type = limitsObj.type;
   const description = limitsObj.description;
-  if (typeof description === "string" && description) {
-    if (type === "number" && typeof value === "number") {
-      return `${value.toLocaleString()} ${description}`;
-    }
-    return description;
-  }
-  if (typeof unit === "string" && unit) {
-    if (typeof value === "number") {
-      return `${value.toLocaleString()} ${unit}`;
-    }
-    return `${unit}`;
-  }
-  const label = humanizeQuotaName(name);
-  if (type === "boolean") {
-    return label;
+  if (type === "number" && typeof value === "number") {
+    const formattedValue = value.toLocaleString();
+    return `${formattedValue} ${unit || ""}${description ? " - " + description : ""}`.trim();
+  } else if (type === "boolean") {
+    return typeof description === "string" && description || name;
   }
   if (typeof value === "number") {
-    return `${value.toLocaleString()} ${label}`;
+    const formattedValue = value.toLocaleString();
+    return `${name}: ${formattedValue} ${unit || ""}`.trim();
   }
-  return label;
+  return name;
 }
 function extractDisplayFeatures(features, planName, fallbackFeatures) {
-  const tier = detectPlanTier(planName);
-  if (tier) {
-    const tierFeatures = getFallbackFeaturesForTier(tier, fallbackFeatures);
-    if (tierFeatures.length > 0) {
-      return tierFeatures;
-    }
-  }
   const quotaFeatures = features.filter((f) => f.quota).map((f) => transformQuotaToFeature(f.quota));
   if (quotaFeatures.length > 0) {
     return quotaFeatures;
   }
+  const tier = detectPlanTier(planName);
+  if (tier) {
+    return getFallbackFeaturesForTier(tier, fallbackFeatures);
+  }
   return [];
 }
 function transformToDisplayCard(plan, props) {
@@ -410,7 +388,7 @@ function transformToDisplayCard(plan, props) {
     props.currencies
   );
   const interval = formatInterval(plan.duration, props.billingIntervals);
-  const features = metadata.features && metadata.features.length > 0 ? metadata.features : extractDisplayFeatures(
+  const features = extractDisplayFeatures(
     plan.features,
     plan.name,
     props.fallbackFeatures
@@ -448,25 +426,22 @@ function PricingSection(props) {
   const [billingCycle, setBillingCycle] = useState(
     "monthly"
   );
-  const [audience, setAudience] = useState(
-    "individual"
-  );
   useEffect(() => {
     let cancelled = false;
     async function loadPlans() {
       try {
         setLoading(true);
-        const response = await client.query(GET_PLANS_QUERY, {
-          productId: resolvedProductId
-        });
+        const response = await client.query(GET_ALL_PLANS_QUERY);
         if (cancelled) return;
         if (response.errors && response.errors.length > 0) {
           throw new Error(response.errors[0].message);
         }
-        if (!response.data?.publicPlans) {
+        if (!response.data?.getAllPlans) {
           throw new Error("No plans data received");
         }
-        const cards = response.data.publicPlans.filter((plan) => plan.isActive).map((plan) => transformToDisplayCard(plan, props)).sort((a, b) => a.priceRaw - b.priceRaw);
+        const cards = response.data.getAllPlans.filter(
+          (plan) => plan.isActive && (!resolvedProductId || plan.productID === resolvedProductId)
+        ).map((plan) => transformToDisplayCard(plan, props)).sort((a, b) => a.priceRaw - b.priceRaw);
         setAllPlans(cards);
         setError(null);
       } catch (err) {
@@ -484,56 +459,13 @@ function PricingSection(props) {
       cancelled = true;
     };
   }, [client, resolvedProductId]);
-  const individualAllPlans = allPlans.filter((p) => !isEnterprisePlan(p.name));
-  const enterpriseApiPlans = allPlans.filter((p) => isEnterprisePlan(p.name));
-  const individualPlans = individualAllPlans.filter(
+  const plans = allPlans.filter(
     (plan) => billingCycle === "monthly" ? plan.duration === "monthly" : plan.duration === "yearly"
   );
-  const enterpriseCards = enterpriseApiPlans.map((p) => {
-    if (p.priceRaw === 0 && p.name.toLowerCase().includes("enterprise")) {
-      return {
-        ...p,
-        price: "Custom",
-        interval: "",
-        ctaText: "Contact Sales",
-        ctaLink: props.contactUrl || "/contact"
-      };
-    }
-    return p;
-  });
-  const hasApiEnterprisePlans = enterpriseCards.length > 0;
-  const defaultEnterpriseCard = {
-    name: "Enterprise",
-    subtitle: "For organizations that need more",
-    description: "For organizations that need more",
-    price: "Custom",
-    period: "",
-    interval: "",
-    button: "Contact Sales",
-    buttonLink: props.contactUrl || "/contact",
-    ctaText: "Contact Sales",
-    ctaLink: props.contactUrl || "/contact",
-    popular: false,
-    features: props.fallbackFeatures?.enterprise || [
-      "Unlimited everything",
-      "SSO & SAML",
-      "Audit logs",
-      "Dedicated support",
-      "Self-hosted option"
-    ]
-  };
-  const resolvedEnterprisePlans = hasApiEnterprisePlans ? enterpriseCards : props.enterprisePlans ? props.enterprisePlans : [defaultEnterpriseCard];
-  const plans = props.showAudienceTabs && audience === "enterprise" ? [] : individualPlans;
   if (loading) {
     return /* @__PURE__ */ jsx("section", { id, className: `py-12 sm:py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 sm:px-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "text-center mb-8 sm:mb-12", children: [
-        sectionHeading ? /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4", children: sectionHeading }) : (
-          // Visually hidden but DOM-present heading so axe's heading-order
-          // rule still sees an h2 between the consumer's hero h1 and the
-          // h3 plan-card titles. See `getMetadataForPlan` for why a falsy
-          // sectionHeading is the canonical "no visible heading" signal.
-          /* @__PURE__ */ jsx("h2", { className: "sr-only", children: "Pricing" })
-        ),
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4", children: sectionHeading }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm sm:text-base md:text-lg", children: "Loading pricing information..." })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-3 gap-6 sm:gap-8", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
@@ -554,205 +486,90 @@ function PricingSection(props) {
   }
   if (error && plans.length === 0) {
     return /* @__PURE__ */ jsx("section", { id, className: `py-12 sm:py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 sm:px-6", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      sectionHeading ? /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-4", children: sectionHeading }) : /* @__PURE__ */ jsx("h2", { className: "sr-only", children: "Pricing" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-4", children: sectionHeading }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8", children: error }),
       /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: "Retry" })
     ] }) }) });
   }
   return /* @__PURE__ */ jsx("section", { id, className: `py-12 sm:py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 sm:px-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center mb-8 sm:mb-12", children: [
-      sectionHeading ? /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4", children: sectionHeading }) : /* @__PURE__ */ jsx("h2", { className: "sr-only", children: "Pricing" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4", children: sectionHeading }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm sm:text-base md:text-lg mb-6", children: sectionSubtitle }),
-      props.showAudienceTabs && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center bg-muted p-1.5 rounded-xl", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setAudience("individual"),
-            className: `px-6 sm:px-8 py-2.5 rounded-lg text-sm font-semibold transition-all ${audience === "individual" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: "Individual"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setAudience("enterprise"),
-            className: `px-6 sm:px-8 py-2.5 rounded-lg text-sm font-semibold transition-all ${audience === "enterprise" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: "Enterprise"
-          }
-        )
-      ] }) }),
-      (audience === "individual" || !props.showAudienceTabs) && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center bg-muted/60 p-1.5 rounded-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-3 bg-muted p-1.5 rounded-lg", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            type: "button",
             onClick: () => setBillingCycle("monthly"),
-            className: `px-5 sm:px-6 py-2 rounded-lg text-sm font-medium transition-all ${billingCycle === "monthly" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+            className: `px-6 py-2 rounded-md text-sm font-medium transition-all ${billingCycle === "monthly" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
             children: "Monthly"
           }
         ),
         /* @__PURE__ */ jsx(
           "button",
           {
-            type: "button",
             onClick: () => setBillingCycle("yearly"),
-            className: `px-5 sm:px-6 py-2 rounded-lg text-sm font-medium transition-all ${billingCycle === "yearly" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+            className: `px-6 py-2 rounded-md text-sm font-medium transition-all ${billingCycle === "yearly" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
             children: "Yearly"
           }
         )
-      ] }) })
-    ] }),
-    props.showAudienceTabs && audience === "enterprise" && /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center mb-8", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-xl sm:text-2xl font-bold text-foreground", children: props.enterpriseHeading || "Enterprise Solutions" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-3 text-muted-foreground", children: props.enterpriseSubtitle || "Built for teams, agencies, and organizations that need advanced collaboration, security, support, and scale." })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto items-stretch", children: props.showAudienceTabs && audience === "enterprise" ? (
-      /* Enterprise cards — from API, static prop, or built-in default */
-      resolvedEnterprisePlans.map((ep) => {
-        const subtitle = ep.subtitle || ep.description || "";
-        const btnText = ep.button || ep.ctaText || "Get Started";
-        const btnLink = ep.buttonLink || ep.ctaLink || props.appLoginUrl;
-        const period = ep.period || ep.interval || "";
-        const note = ep.note || "";
-        const badge = ep.badge || "";
-        const isPopular = ep.popular;
-        const features = ep.features || [];
-        const price = String(ep.price);
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `bg-card rounded-xl p-6 sm:p-8 transition-all duration-300 flex flex-col ${isPopular ? "border-2 border-primary shadow-xl ring-1 ring-primary/20" : "border hover:shadow-lg hover:border-primary/50"}`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
-                isPopular && badge && /* @__PURE__ */ jsx("span", { className: "inline-block bg-primary text-primary-foreground px-4 py-1 rounded-full text-xs font-semibold mb-3", children: badge }),
-                /* @__PURE__ */ jsx("h3", { className: "text-xl sm:text-2xl font-bold mb-2", children: ep.name }),
-                /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: subtitle })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "text-center mb-2", children: [
-                price === "Custom" ? /* @__PURE__ */ jsx("span", { className: "text-3xl sm:text-4xl font-bold", children: "Custom" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl font-extrabold", children: price }),
-                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-lg", children: period })
-                ] }),
-                note && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm font-medium text-primary", children: note })
-              ] }),
-              /* @__PURE__ */ jsx("ul", { className: "space-y-3 mb-8 mt-6 flex-1", children: features.map((feature) => /* @__PURE__ */ jsxs(
-                "li",
-                {
-                  className: "text-sm flex items-start gap-2",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-primary mt-0.5 flex-shrink-0", children: "\u2713" }),
-                    /* @__PURE__ */ jsx("span", { children: feature })
-                  ]
-                },
-                feature
-              )) }),
-              btnLink.startsWith("/") ? /* @__PURE__ */ jsx(
-                Button,
+    /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto items-stretch", children: plans.map((plan) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `bg-card rounded-xl p-6 sm:p-8 transition-all duration-300 flex flex-col ${plan.popular ? "border-2 border-primary shadow-xl ring-1 ring-primary/20" : "border hover:shadow-lg hover:border-primary/50"}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
+            plan.popular && /* @__PURE__ */ jsx("span", { className: "inline-block bg-primary text-primary-foreground px-4 py-1 rounded-full text-xs font-semibold mb-3", children: "Most Popular" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-xl sm:text-2xl font-bold mb-2", children: plan.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: plan.description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-center mb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl font-bold", children: plan.price }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-lg", children: plan.interval })
+          ] }) }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-3 mb-8 flex-1", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs("li", { className: "text-sm flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-primary mt-0.5 flex-shrink-0", children: "\u2713" }),
+            /* @__PURE__ */ jsx("span", { children: feature })
+          ] }, index)) }),
+          plan.ctaLink.startsWith("/") ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-full h-11",
+              variant: plan.popular ? "default" : "outline",
+              size: "lg",
+              asChild: true,
+              children: /* @__PURE__ */ jsx(
+                "a",
                 {
-                  className: "w-full h-11",
-                  variant: isPopular ? "default" : "outline",
-                  size: "lg",
-                  asChild: true,
-                  children: /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      href: btnLink,
-                      onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }),
-                      children: btnText
-                    }
-                  )
+                  href: plan.ctaLink,
+                  onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }),
+                  children: plan.ctaText
                 }
-              ) : /* @__PURE__ */ jsx(
-                Button,
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-full h-11",
+              variant: plan.popular ? "default" : "outline",
+              size: "lg",
+              asChild: true,
+              children: /* @__PURE__ */ jsx(
+                "a",
                 {
-                  className: "w-full h-11",
-                  variant: isPopular ? "default" : "outline",
-                  size: "lg",
-                  asChild: true,
-                  children: /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      href: btnLink,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      children: btnText
-                    }
-                  )
+                  href: plan.ctaLink,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: plan.ctaText
                 }
               )
-            ]
-          },
-          ep.name
-        );
-      })
-    ) : (
-      /* Individual API-fetched cards */
-      plans.map((plan) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `bg-card rounded-xl p-6 sm:p-8 transition-all duration-300 flex flex-col ${plan.popular ? "border-2 border-primary shadow-xl ring-1 ring-primary/20" : "border hover:shadow-lg hover:border-primary/50"}`,
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
-              plan.popular && /* @__PURE__ */ jsx("span", { className: "inline-block bg-primary text-primary-foreground px-4 py-1 rounded-full text-xs font-semibold mb-3", children: "Most Popular" }),
-              /* @__PURE__ */ jsx("h3", { className: "text-xl sm:text-2xl font-bold mb-2", children: plan.name }),
-              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: plan.description })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-center mb-8", children: plan.price === "Custom" ? /* @__PURE__ */ jsx("span", { className: "text-3xl sm:text-4xl font-bold", children: "Custom" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl font-bold", children: plan.price }),
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-lg", children: plan.interval })
-            ] }) }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-3 mb-8 flex-1", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs(
-              "li",
-              {
-                className: "text-sm flex items-start gap-2",
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-primary mt-0.5 flex-shrink-0", children: "\u2713" }),
-                  /* @__PURE__ */ jsx("span", { children: feature })
-                ]
-              },
-              index
-            )) }),
-            plan.ctaLink.startsWith("/") ? /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: "w-full h-11",
-                variant: plan.popular ? "default" : "outline",
-                size: "lg",
-                asChild: true,
-                children: /* @__PURE__ */ jsx(
-                  "a",
-                  {
-                    href: plan.ctaLink,
-                    onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }),
-                    children: plan.ctaText
-                  }
-                )
-              }
-            ) : /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: "w-full h-11",
-                variant: plan.popular ? "default" : "outline",
-                size: "lg",
-                asChild: true,
-                children: /* @__PURE__ */ jsx(
-                  "a",
-                  {
-                    href: plan.ctaLink,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    children: plan.ctaText
-                  }
-                )
-              }
-            )
-          ]
-        },
-        plan.id
-      ))
-    ) })
+            }
+          )
+        ]
+      },
+      plan.id
+    )) })
   ] }) });
 }
 function PricingPage(props) {