https://app.zellsy.ai/assets/PlanSelector-KV4BEUFf.js

1import { j as jsxRuntimeExports } from "./vendor-react-CBUOmk1-.js";
2import { e as CheckLineIcon } from "./index-D6IGKdZD.js";
3import { I as Icon } from "./iconify-B5a9wRP5.js";
4import { B as Badge } from "./Badge-COBa8EPo.js";
5function formatPrice(price, period) {
6  if (price === 0 && period === "por viaje") {
7    return "Variable";
8  }
9  if (price === 0 && period === "Configuración") {
10    return "$0";
11  }
12  return `$${price}`;
13}
14function getPlanIcon(planName) {
15  const iconMap = {
16    Básico: "heroicons:user",
17    Alfa: "heroicons:alpha",
18    Pro: "heroicons:briefcase",
19    Premium: "heroicons:star",
20    Omega: "heroicons:omega",
21    "Pago por uso": "heroicons:cash-multiple",
22    "Pay per use": "heroicons:cash-multiple"
23  };
24  return iconMap[planName] || "heroicons:help-circle";
25}
26function PlanSelector({
27  plans,
28  selectedPlan,
29  onSelectPlan,
30  renderActionButton,
31  previousPlanId,
32  currentPlanId
33}) {
34  const desktopColsClass = plans.length >= 4 ? "xl:grid-cols-4" : plans.length === 3 ? "xl:grid-cols-3" : plans.length === 2 ? "xl:grid-cols-2" : "xl:grid-cols-1";
35  const maxWidthClass = plans.length >= 4 ? "max-w-[1480px]" : plans.length === 3 ? "max-w-[1120px]" : plans.length === 2 ? "max-w-[760px]" : "max-w-[380px]";
36  return /* @__PURE__ */ jsxRuntimeExports.jsx(
37    "div",
38    {
39      className: `grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${desktopColsClass} xl:gap-6 w-full mx-auto ${maxWidthClass}`,
40      children: plans.map((plan) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
41        "div",
42        {
43          className: `rounded-2xl border relative ${selectedPlan === plan.id ? "border-primary-500 ring-primary-500/20" : "border-gray-200 dark:border-gray-800 bg-white dark:bg-white/3"} p-6 transition-all duration-200 cursor-pointer xl:p-8 flex flex-col ${plan.disabled ? "opacity-50 cursor-not-allowed" : "hover:shadow-lg hover:border-primary-300"}`,
44          onClick: () => !plan.disabled && onSelectPlan(plan.id),
45          children: [

46            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grow", children: [
47              currentPlanId === plan.id && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute -top-3 right-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "solid", color: "warning", size: "sm", noDarkBorder: true, children: "Mi Plan Actual" }) }),
48              previousPlanId === plan.id && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute -top-3 left-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "solid", color: "info", size: "sm", children: "Tu plan anterior" }) }),
49              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between -mb-4", children: [
50                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block font-semibold text-primary-500 text-theme-xl dark:text-gray-400", children: plan.name }),
51                /* @__PURE__ */ jsxRuntimeExports.jsx(
52                  Icon,
53                  {
54                    icon: getPlanIcon(plan.name),
55                    className: "w-6 h-6 text-primary-500"
56                  }
57                )
58              ] }),

59              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-end mt-4", children: [
60                /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "font-bold text-primary-500 text-title-md dark:text-gray-400", children: formatPrice(plan.price, plan.period) }),
61                plan.period !== "Configuración" && plan.period !== "por viaje" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-block mb-1 text-sm text-gray-500 dark:text-gray-400", children: [
62                  "/ ",
63                  plan.period
64                ] })
65              ] }),
66              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: plan.description }),
67              /* @__PURE__ */ jsxRuntimeExports.jsx(
68                "div",
69                {
70                  className: `w-full h-px my-6 ${selectedPlan === plan.id ? "bg-primary-200 dark:bg-primary-800" : "bg-gray-200 dark:bg-gray-800"}`
71                }
72              ),

73              /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mb-8 space-y-3", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
74                "li",
75                {
76                  className: "flex items-start gap-3 text-sm text-gray-500 dark:text-gray-400",
77                  children: [
78                    /* @__PURE__ */ jsxRuntimeExports.jsx(CheckLineIcon, { className: "text-success-500 mt-0.5 shrink-0" }),
79                    feature
80                  ]
81                },
82                index
83              )) }),
84              plan.disabled && plan.disabledReason && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-red-600 dark:text-gray-400", children: plan.disabledReason }) })
85            ] }),
86            renderActionButton && renderActionButton(plan, selectedPlan === plan.id),
87            !renderActionButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
88              "button",
89              {
90                className: `flex w-full items-center justify-center rounded-lg p-3.5 text-sm font-medium shadow-theme-xs transition-colors ${selectedPlan === plan.id ? "bg-primary-500 text-white cursor-not-allowed" : "bg-gray-100 dark:bg-white/10 text-primary-500 dark:text-gray-400 hover:bg-primary-500 hover:text-white"}`,
91                disabled: plan.disabled || selectedPlan === plan.id,
92                onClick: (e) => {
93                  e.stopPropagation();
94                  if (!plan.disabled && selectedPlan !== plan.id) {
95                    onSelectPlan(plan.id);
96                  }
97                },
98                children: selectedPlan === plan.id ? "Seleccionado" : "Seleccionar Plan"
99              }
100            )
101          ]
102        },
103        plan.id
104      ))
105    }
106  );
107}
108export {
109  PlanSelector as P
110};