magic-editor-x 1.0.0

package/dist/_chunks/LicensePage-BnyWSrWs.js

@@ -0,0 +1,375 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const admin = require("@strapi/strapi/admin");
+const getTranslation = require("./getTranslation-D35vbDap.js");
+const styled = require("styled-components");
+const index = require("./index-BiLy_f7C.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const Container = styled__default.default(getTranslation.Box)`
+  padding: 32px;
+  max-width: 1400px;
+  margin: 0 auto;
+`;
+const Header = styled__default.default(getTranslation.Box)`
+  text-align: center;
+  margin-bottom: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const Title = styled__default.default(getTranslation.Typography)`
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  background: linear-gradient(135deg, #7C3AED, #6d28d9);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: block;
+`;
+const Subtitle = styled__default.default(getTranslation.Typography)`
+  font-size: 1.125rem;
+  color: ${(props) => props.theme.colors.neutral600};
+  line-height: 1.6;
+  display: block;
+`;
+const TierGrid = styled__default.default(getTranslation.Flex)`
+  gap: 32px;
+  margin: 0 auto 48px;
+  max-width: 1080px;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: stretch;
+`;
+const TierWrapper = styled__default.default(getTranslation.Box)`
+  flex: 1;
+  min-width: 280px;
+  max-width: 340px;
+  display: flex;
+`;
+const TierCard = styled__default.default(getTranslation.Box)`
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: 16px;
+  padding: 32px;
+  border: 2px solid ${(props) => props.$featured ? "#7C3AED" : props.theme.colors.neutral200};
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(124, 58, 237, 0.25), 0 8px 10px -6px rgba(124, 58, 237, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
+  }
+`;
+const PopularBadge = styled__default.default(getTranslation.Badge)`
+  position: absolute;
+  top: -12px;
+  right: 24px;
+  background: linear-gradient(135deg, #7C3AED, #6d28d9);
+  color: white;
+  padding: 4px 16px;
+  font-size: 12px;
+  font-weight: 600;
+`;
+const TierIcon = styled__default.default(getTranslation.Box)`
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  background: ${(props) => props.$color};
+  
+  svg {
+    width: 28px;
+    height: 28px;
+    color: white;
+  }
+`;
+const TierName = styled__default.default(getTranslation.Typography)`
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+`;
+const TierPrice = styled__default.default(getTranslation.Typography)`
+  font-size: 2rem;
+  font-weight: 800;
+  margin-bottom: 4px;
+`;
+const TierDescription = styled__default.default(getTranslation.Typography)`
+  color: ${(props) => props.theme.colors.neutral600};
+  margin-bottom: 24px;
+`;
+const FeatureList = styled__default.default(getTranslation.Box)`
+  margin-bottom: 24px;
+  flex: 1;
+`;
+const Feature = styled__default.default(getTranslation.Flex)`
+  gap: 12px;
+  margin-bottom: 12px;
+  align-items: flex-start;
+`;
+const FeatureIcon = styled__default.default(getTranslation.Box)`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+  
+  ${(props) => props.$included ? `
+    background: #DCFCE7;
+    svg { color: #16A34A; }
+  ` : `
+    background: #FEE2E2;
+    svg { color: #DC2626; }
+  `}
+`;
+const UpgradeButton = styled__default.default(getTranslation.Button)`
+  width: 100%;
+  height: 48px;
+  font-weight: 600;
+  font-size: 15px;
+  background: ${(props) => props.$gradient};
+  border: none;
+  color: white;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+`;
+const CurrentPlanBadge = styled__default.default(getTranslation.Badge)`
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(props) => props.theme.colors.neutral100};
+  color: ${(props) => props.theme.colors.neutral600};
+  font-weight: 600;
+  font-size: 15px;
+`;
+const UsageBox = styled__default.default(getTranslation.Box)`
+  background: ${(props) => props.theme.colors.neutral100};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 32px;
+`;
+const UsageBar = styled__default.default.div`
+  height: 8px;
+  background: ${(props) => props.theme.colors.neutral200};
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 8px;
+`;
+const UsageProgress = styled__default.default.div`
+  height: 100%;
+  background: ${(props) => props.$percentage > 80 ? "#ef4444" : props.$percentage > 50 ? "#f59e0b" : "#10b981"};
+  width: ${(props) => Math.min(props.$percentage, 100)}%;
+  transition: width 0.3s ease;
+`;
+const LicensePage = () => {
+  const { formatMessage } = getTranslation.useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage }, values);
+  const { get } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const [currentTier, setCurrentTier] = React.useState("free");
+  const [limits, setLimits] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    fetchLicenseInfo();
+  }, []);
+  const fetchLicenseInfo = async () => {
+    try {
+      const response = await get("/magic-editor-x/license/limits");
+      const licenseData = response.data || {};
+      setCurrentTier(licenseData.tier || "free");
+      setLimits(licenseData.limits);
+      setLoading(false);
+    } catch (error) {
+      console.error("Failed to fetch license info:", error);
+      setLoading(false);
+    }
+  };
+  const getTierRank = (tierId) => {
+    const ranks = {
+      "free": 0,
+      "premium": 1,
+      "advanced": 2,
+      "enterprise": 3
+    };
+    return ranks[tierId] || 0;
+  };
+  const getButtonText = (tierId) => {
+    const currentRank = getTierRank(currentTier);
+    const targetRank = getTierRank(tierId);
+    if (currentRank === targetRank) {
+      return t("upgradePage.currentPlan", "Current Plan");
+    } else if (targetRank > currentRank) {
+      return t("upgradePage.upgradeNow", "Upgrade Now");
+    } else {
+      return t("upgradePage.downgrade", "Downgrade");
+    }
+  };
+  const tiers = [
+    {
+      id: "free",
+      name: "FREE",
+      price: "$0",
+      period: "forever",
+      description: "Perfect for small projects and testing",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$o, {}),
+      color: "linear-gradient(135deg, #6B7280, #4B5563)",
+      features: [
+        { name: "Full Editor Access", included: true },
+        { name: "All Editor Tools", included: true },
+        { name: "2 Collaborators", included: true },
+        { name: "Real-time Sync", included: true },
+        { name: "AI Grammar Check (3/day)", included: true },
+        { name: "AI Style + Rewrite", included: false },
+        { name: "Version History", included: false },
+        { name: "Priority Support", included: false }
+      ],
+      limits: {
+        collaborators: "2"
+      }
+    },
+    {
+      id: "premium",
+      name: "PREMIUM",
+      price: "$9.90",
+      period: "/month",
+      description: "Enhanced collaboration for teams",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$1g, {}),
+      color: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
+      featured: true,
+      features: [
+        { name: "Full Editor Access", included: true },
+        { name: "All Editor Tools", included: true },
+        { name: "10 Collaborators", included: true },
+        { name: "Real-time Sync", included: true },
+        { name: "AI Grammar + Style (10/day)", included: true },
+        { name: "Version History", included: true },
+        { name: "Priority Support", included: true }
+      ],
+      limits: {
+        collaborators: "10"
+      }
+    },
+    {
+      id: "advanced",
+      name: "ADVANCED",
+      price: "$24.90",
+      period: "/month",
+      description: "Unlimited collaboration for enterprises",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$y, {}),
+      color: "linear-gradient(135deg, #7C3AED, #6d28d9)",
+      features: [
+        { name: "Full Editor Access", included: true },
+        { name: "All Editor Tools", included: true },
+        { name: "Unlimited Collaborators", included: true },
+        { name: "Real-time Sync", included: true },
+        { name: "AI All Types (Unlimited)", included: true },
+        { name: "Version History", included: true },
+        { name: "Priority Support", included: true }
+      ],
+      limits: {
+        collaborators: "Unlimited"
+      }
+    }
+  ];
+  const handleUpgrade = (tierId) => {
+    window.open("https://store.magicdx.dev/", "_blank");
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Loader, { children: t("license.loading", "Loading license information...") }) }) });
+  }
+  const collaboratorUsage = limits?.collaborators ? {
+    current: limits.collaborators.current || 0,
+    max: limits.collaborators.max,
+    unlimited: limits.collaborators.unlimited,
+    percentage: limits.collaborators.unlimited ? 0 : limits.collaborators.current / limits.collaborators.max * 100
+  } : { current: 0, max: 2, unlimited: false, percentage: 0 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title, { variant: "alpha", children: t("upgradePage.title", "Magic Editor X") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { variant: "omega", children: t("upgradePage.subtitle", "Choose your plan for collaborative editing") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(UsageBox, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "beta", fontWeight: "bold", children: t("upgradePage.currentUsage", "Current Usage") }),
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Badge, { style: { background: currentTier === "free" ? "#6B7280" : "#7C3AED", color: "white" }, children: currentTier.toUpperCase() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { marginTop: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", children: t("upgradePage.collaborators", "Collaborators") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", fontWeight: "bold", children: [
+            collaboratorUsage.current,
+            " / ",
+            collaboratorUsage.unlimited ? t("license.unlimited", "Unlimited") : collaboratorUsage.max
+          ] })
+        ] }),
+        !collaboratorUsage.unlimited && /* @__PURE__ */ jsxRuntime.jsx(UsageBar, { children: /* @__PURE__ */ jsxRuntime.jsx(UsageProgress, { $percentage: collaboratorUsage.percentage }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TierGrid, { children: tiers.map((tier) => /* @__PURE__ */ jsxRuntime.jsx(TierWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(TierCard, { $featured: tier.featured, children: [
+      tier.featured && /* @__PURE__ */ jsxRuntime.jsx(PopularBadge, { children: t("upgradePage.mostPopular", "MOST POPULAR") }),
+      /* @__PURE__ */ jsxRuntime.jsx(TierIcon, { $color: tier.color, children: tier.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(TierName, { variant: "beta", children: tier.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { alignItems: "baseline", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TierPrice, { variant: "alpha", children: tier.price }),
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        getTranslation.Box,
+        {
+          background: "neutral100",
+          hasRadius: true,
+          padding: 3,
+          marginBottom: 5,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Collaborators:" }),
+            " ",
+            tier.limits.collaborators
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(FeatureList, { children: tier.features.map((feature, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(Feature, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$2o, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$26, { style: { width: 14, height: 14 } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          getTranslation.Typography,
+          {
+            variant: "omega",
+            textColor: feature.included ? "neutral800" : "neutral500",
+            style: {
+              fontSize: "14px",
+              textDecoration: feature.included ? "none" : "line-through"
+            },
+            children: feature.name
+          }
+        )
+      ] }, index$1)) }),
+      currentTier === tier.id ? /* @__PURE__ */ jsxRuntime.jsx(CurrentPlanBadge, { children: t("upgradePage.currentPlan", "Current Plan") }) : /* @__PURE__ */ jsxRuntime.jsx(
+        UpgradeButton,
+        {
+          $gradient: tier.color,
+          onClick: () => handleUpgrade(tier.id),
+          children: getButtonText(tier.id)
+        }
+      )
+    ] }) }, tier.id)) })
+  ] });
+};
+exports.default = LicensePage;