subos-frontend 1.0.15 → 1.0.16

package/dist/index.js

@@ -1048,7 +1048,8 @@ var PlanCard = ({
   isSelected,
   billingCycle,
   onSelect,
-  isActive = false
+  isActive = false,
+  comparisonUrl = "https://knovator.com/products/job-board/pricing/"
 }) => {
   const features = getPlanFeatures(plan);
   const description = getPlanDescription(plan);
@@ -1081,11 +1082,19 @@ var PlanCard = ({
             children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4" })
           }
         ) }),
+        isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "text-white rounded-full p-1",
+            style: { backgroundColor: "var(--subos-muted-foreground, #6c757d)" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4" })
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xl font-bold mb-2", style: { color: "var(--subos-foreground, inherit)" }, children: plan.name }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mb-4", style: { color: "var(--subos-muted-foreground, #6c757d)" }, children: description }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: isFree ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold", style: { color: "var(--subos-foreground, inherit)" }, children: "Free" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-bold", style: { color: "var(--subos-foreground, inherit)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: isFree ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold", style: { color: "var(--subos-primary-500, #3f51b5)" }, children: "Free" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-bold", style: { color: "var(--subos-primary-500, #3f51b5)" }, children: [
               "$",
               plan.fixedCost
             ] }),
@@ -1095,52 +1104,73 @@ var PlanCard = ({
             ] })
           ] }) })
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { borderColor: "var(--subos-border,rgb(3, 39, 75))" } }) }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 mb-6 flex-grow", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center text-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            CheckIcon,
+            "div",
             {
-              className: "w-4 h-4 mr-2 flex-shrink-0",
-              style: { color: "var(--subos-primary-500, #3f51b5)" }
+              className: "mr-2 flex-shrink-0 rounded-full p-0.5",
+              style: { backgroundColor: isActive ? "var(--subos-muted-foreground, #6c757d)" : "var(--subos-primary-500, #3f51b5)" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-3 h-3 text-white" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--subos-foreground, inherit)" }, children: feature })
         ] }, index)) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children: !isFree && (isActive ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            className: "w-full border py-2 px-4 rounded-md font-medium cursor-default",
-            style: {
-              backgroundColor: "var(--subos-muted, #f8f9fa)",
-              borderColor: "var(--subos-border, #dee2e6)",
-              color: "var(--subos-muted-foreground, #6c757d)"
-            },
-            disabled: true,
-            children: "Active"
-          }
-        ) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            className: "w-full subos-btn-primary text-white py-2 px-4 rounded-md font-medium",
-            children: "Selected"
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            className: "w-full border py-2 px-4 rounded-md font-medium transition-colors",
-            style: {
-              backgroundColor: "var(--subos-background, #ffffff)",
-              borderColor: "var(--subos-border, #dee2e6)",
-              color: "var(--subos-foreground, inherit)"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "var(--subos-muted, #f8f9fa)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "var(--subos-background, #ffffff)";
-            },
-            children: "Select"
-          }
-        )) })
+        isFree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mb-4", style: { color: "var(--subos-muted-foreground, #6c757d)" }, children: "The mentioned plan will become the default once the current subscription expires, provided the tier requirement is met." }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto space-y-3", children: [
+          !isFree && (isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "w-full border py-2 px-4 rounded-md font-medium cursor-default",
+              style: {
+                backgroundColor: "var(--subos-muted, #f8f9fa)",
+                borderColor: "var(--subos-border, #dee2e6)",
+                color: "var(--subos-muted-foreground, #6c757d)"
+              },
+              disabled: true,
+              children: "Active"
+            }
+          ) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "w-full subos-btn-primary text-white py-2 px-4 rounded-md font-medium",
+              children: "Selected"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "w-full border py-2 px-4 rounded-md font-medium transition-colors",
+              style: {
+                backgroundColor: "var(--subos-background, #ffffff)",
+                borderColor: "var(--subos-border, #dee2e6)",
+                color: "var(--subos-foreground, inherit)"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--subos-muted, #f8f9fa)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--subos-background, #ffffff)";
+              },
+              children: "Select"
+            }
+          )),
+          comparisonUrl && !isFree && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "w-full py-2 px-4 font-medium text-sm transition-colors",
+              style: {
+                backgroundColor: "transparent",
+                border: "none",
+                color: "var(--subos-primary-500, #3f51b5)"
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                window.open(comparisonUrl, "_blank");
+              },
+              children: "Show Plan Comparision"
+            }
+          )
+        ] })
       ]
     }
   );