pixelize-design-library 2.1.68 → 2.1.69

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PaymentCardProps } from "./PaymentCardProps";
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, }: PaymentCardProps) => React.JSX.Element;
+export default PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var PaymentCard = function (_a) {
+    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var badgeText = "";
+    var badgeColor = "";
+    var buttonColor = "";
+    var buttonColor50 = "";
+    if (isActive) {
+        badgeText = "Active Plan";
+        badgeColor = "0.125rem solid ".concat(theme.colors.green[500]);
+        buttonColor = theme.colors.green[500];
+        buttonColor50 = theme.colors.green[50];
+    }
+    else if (isNextUpgrade) {
+        badgeText = "Upgrade Your Plan";
+        badgeColor = "0.125rem solid ".concat(theme.colors.primary[500]);
+        buttonColor = theme.colors.primary[500];
+        buttonColor50 = theme.colors.primary[50];
+    }
+    else if (plan.popular) {
+        badgeText = "Most Popular";
+        badgeColor = "0.125rem solid ".concat(theme.colors.primary[500]);
+        buttonColor = theme.colors.primary[500];
+        buttonColor50 = theme.colors.primary[50];
+    }
+    else {
+        buttonColor = theme.colors.primary[500];
+        buttonColor50 = theme.colors.primary[50];
+    }
+    return (react_1.default.createElement(react_2.GridItem, null,
+        react_1.default.createElement(react_2.Box, { bg: "white", minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.id, "card", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.id, "card", false); } },
+            badgeText && (react_1.default.createElement(react_2.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: theme.colors.white, fontSize: "sm", px: 4, py: 1, borderRadius: "full" }, badgeText)),
+            react_1.default.createElement(react_2.Box, { textAlign: "center", mb: 6 },
+                react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4 }, plan.icon),
+                react_1.default.createElement(react_2.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800] }, plan.name),
+                react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
+                    react_1.default.createElement(react_2.Box, { fontSize: "1.5rem" }, "\u20B9"),
+                    billingCycle === "yearly" ? plan.yearlyPrice : plan.monthlyPrice,
+                    react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
+                        react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
+                        react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax))),
+                react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 3 }, plan.description)),
+            !isActive && (react_1.default.createElement(react_2.Button, { w: "full", colorScheme: plan.buttonVariant === "outline" ? undefined : "primary", variant: plan.buttonVariant, mb: 6, onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.id, "button", false); }, _hover: {
+                    bg: plan.buttonVariant === "outline" ? buttonColor50 : undefined,
+                }, sx: {
+                    "&.chakra-button": {
+                        backgroundColor: plan.buttonVariant === "solid" ? buttonColor : undefined,
+                        borderColor: plan.buttonVariant === "outline" ? buttonColor : undefined,
+                        color: plan.buttonVariant === "outline" ? buttonColor : "white",
+                    },
+                } }, plan.buttonText)),
+            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
+                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))));
+};
+exports.default = PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export type PaymentCardProps = {
+    plan: Plan;
+    isActive?: boolean;
+    isNextUpgrade?: boolean;
+    billingCycle: "monthly" | "yearly";
+    onSelect?: (planId: number) => void;
+    onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+};
+export type Plan = {
+    id: number;
+    name: string;
+    description: string;
+    monthlyPrice: number;
+    yearlyPrice: number;
+    billing: string;
+    tax: string;
+    features: string[];
+    icon: React.ReactNode;
+    buttonText: string;
+    buttonVariant: "solid" | "outline";
+    popular?: boolean;
+};

package/dist/Pages/card.js

@@ -30,7 +30,59 @@ var react_1 = __importDefault(require("react"));
 var Card_1 = __importDefault(require("../Components/Card/Card"));
 var ProfileCard_1 = __importStar(require("../Components/ProfileCard/ProfileCard"));
 var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var PaymentCard_1 = __importDefault(require("../Components/Card/PaymentCard/PaymentCard"));
+var plans = [
+    {
+        id: 1,
+        name: "Free",
+        description: "Basic features for small teams",
+        monthlyPrice: 0,
+        yearlyPrice: 0,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (1 User)", "Single Pipeline", "500 Records", "Contacts, Products & Activities Management", "Automations (3)"],
+        icon: react_1.default.createElement(lucide_react_1.Star, { size: 20 }),
+        buttonText: "Choose Starter",
+        buttonVariant: "solid",
+    },
+    {
+        id: 2,
+        name: "Pro",
+        description: "Perfect for small teams and growing businesses.",
+        monthlyPrice: 499,
+        yearlyPrice: 399,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (5 User)", "Everything in Free Edition +", "Team Pipelines (3)", "50,000 Records", "Email & WhatsApp Business Integration", "Automations (30)", "Mass emails with email insights", "10 custom fields/module"],
+        icon: react_1.default.createElement(lucide_react_1.Zap, { size: 20 }),
+        buttonText: "Choose Pro",
+        buttonVariant: "outline",
+        popular: true,
+    },
+    {
+        id: 3,
+        name: "Enterprise",
+        description: "Unlimited access for large organizations",
+        monthlyPrice: 1499,
+        yearlyPrice: 1399,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (Unlimited Users)", "Everything in Premier Edition +", "Team Pipelines (15)", "1 Million Records", "Advanced Automation Rules (100)", "File Cabinet pre-installed with 5 GB storage", "50 custom fields/module", "1000 mass mails/day", "Highest limits for features"],
+        icon: react_1.default.createElement(lucide_react_1.Gem, { size: 20 }),
+        buttonText: "Contact Sales",
+        buttonVariant: "solid",
+    },
+];
 var CardPage = function () {
+    var activePlanId = 2; // Example: current active plan
+    var nextUpgradeId = 3; // Example: suggest upgrade
+    var handleSelect = function (planId) {
+        console.log("Selected plan:", planId);
+    };
+    var handleHover = function (planId, type, state) {
+        console.log("".concat(type, " hover ").concat(state ? "enter" : "leave", " on plan"), planId);
+    };
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(Card_1.default, null,
             react_1.default.createElement("div", null, "hello")),
@@ -43,6 +95,10 @@ var CardPage = function () {
             react_1.default.createElement(ProfileCard_1.ProfileCardBody, null,
                 react_1.default.createElement(react_2.Text, null, "View a summary of all your customers over the last month.")),
             react_1.default.createElement(ProfileCard_1.ProfileCardFooter, null,
-                react_1.default.createElement(react_2.Button, { color: "blue" }, "View here")))));
+                react_1.default.createElement(react_2.Button, { color: "blue" }, "View here"))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 3 }, spacing: 6 }, plans.map(function (plan) { return (react_1.default.createElement(PaymentCard_1.default, { key: plan.id, plan: plan, billingCycle: "monthly", isActive: plan.id === activePlanId, isNextUpgrade: plan.id === nextUpgradeId, onSelect: handleSelect, onHover: handleHover })); }))));
 };
 exports.default = CardPage;

package/dist/Utils/table.js

@@ -60,37 +60,6 @@ var calculateLeftOffset = function (columns, index) {
     return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
 };
 exports.calculateLeftOffset = calculateLeftOffset;
-// export const searchAndSortData = (
-//   data: DataObject[],
-//   searchValues: Record<string, string>
-// ) => {
-//   const filteredData = data.filter((item) => {
-//     return Object.keys(searchValues).every((key) => {
-//       const searchValue = searchValues[key].toLowerCase();
-//       return item[key].toString().toLowerCase().includes(searchValue);
-//     });
-//   });
-//   return filteredData.sort((a, b) => {
-//     let aMatchCount = 0;
-//     let bMatchCount = 0;
-//     Object.keys(searchValues).forEach((key) => {
-//       const searchValue = searchValues[key].toLowerCase();
-//       if (a[key] && a[key].toString().toLowerCase() === searchValue) {
-//         aMatchCount++;
-//       }
-//       if (b[key] && b[key].toString().toLowerCase() === searchValue) {
-//         bMatchCount++;
-//       }
-//       if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
-//         aMatchCount += 0.5;
-//       }
-//       if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
-//         bMatchCount += 0.5;
-//       }
-//     });
-//     return bMatchCount - aMatchCount;
-//   });
-// };
 var extractTextFromReactNode = function (node) {
     if (typeof node === "string" || typeof node === "number") {
         return String(node);