@zuplo/zudoku-plugin-monetization 0.0.6 → 0.0.8

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import * as zudoku0 from "zudoku";
-import { ZudokuConfig } from "zudoku";
 import * as zudoku_icons0 from "zudoku/icons";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as react0 from "react";
@@ -8,9 +7,17 @@ import * as zudoku_plugins0 from "zudoku/plugins";
 //#region src/ZuploMonetizationPlugin.d.ts
 type ZudokuMonetizationPluginOptions = {
   environmentName: string;
+  pricing?: {
+    subtitle?: string;
+    title?: string;
+  };
 };
-declare const enableMonetization: (config: ZudokuConfig, options: ZudokuMonetizationPluginOptions) => ZudokuConfig;
 declare const zuploMonetizationPlugin: (options: ZudokuMonetizationPluginOptions) => {
+  transformConfig: (config: zudoku0.ZudokuConfig) => {
+    slots: {
+      "head-navigation-start": () => react_jsx_runtime0.JSX.Element;
+    };
+  };
   getIdentities: (context: zudoku0.ZudokuContext) => Promise<{
     label: string;
     id: string;
@@ -44,4 +51,4 @@ declare const zuploMonetizationPlugin: (options: ZudokuMonetizationPluginOptions
   getProtectedRoutes: () => string[];
 } & zudoku_plugins0.TransformConfigPlugin;
 //#endregion
-export { enableMonetization, zuploMonetizationPlugin };
+export { zuploMonetizationPlugin };

package/dist/index.mjs

@@ -403,9 +403,8 @@ const useUrlUtils = () => {
 //#endregion
 //#region src/pages/CheckoutPage.tsx
 const CheckoutPage = ({ environmentName }) => {
-	const [search] = useSearchParams();
+	const { planId } = useParams();
 	const zudoku = useZudoku();
-	const planId = search.get("plan");
 	const auth = useAuth();
 	const { generateUrl } = useUrlUtils();
 	const { data: _data } = useQuery({
@@ -472,7 +471,7 @@ var CheckoutPage_default = CheckoutPage;
 
 //#endregion
 //#region src/pages/pricing/PricingCard.tsx
-const PricingCard = ({ plan, isPopular = false }) => {
+const PricingCard = ({ plan, isPopular = false, disabled = false }) => {
 	const defaultPhase = plan.phases.at(-1);
 	if (!defaultPhase) return null;
 	const { quotas, features } = categorizeRateCards(defaultPhase.rateCards);
@@ -526,7 +525,7 @@ const PricingCard = ({ plan, isPopular = false }) => {
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-4 mb-6 flex-grow",
+				className: "space-y-4 mb-6  grow",
 				children: [quotas.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "space-y-2",
 					children: quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, { quota }, quota.key))
@@ -535,11 +534,15 @@ const PricingCard = ({ plan, isPopular = false }) => {
 					children: features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, { feature }, feature.key))
 				})]
 			}),
-			/* @__PURE__ */ jsx(Button, {
+			disabled ? /* @__PURE__ */ jsx(Button, {
+				disabled: true,
+				variant: isPopular ? "default" : "secondary",
+				children: "Already subscribed"
+			}) : /* @__PURE__ */ jsx(Button, {
 				variant: isPopular ? "default" : "secondary",
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Link, {
-					to: `/checkout?plan=${plan.id}`,
+					to: `/checkout/${plan.id}`,
 					children: "Subscribe"
 				})
 			})
@@ -549,17 +552,14 @@ const PricingCard = ({ plan, isPopular = false }) => {
 
 //#endregion
 //#region src/pages/PricingPage.tsx
-const PricingPage = ({ environmentName }) => {
-	const { data: pricingTableData } = useSuspenseQuery({ queryKey: [`/v3/zudoku-metering/${environmentName}/pricing-page`] });
-	const planOrder = [
-		"developer",
-		"startup",
-		"pro",
-		"business",
-		"enterprise"
-	];
-	const sortedPlans = [...pricingTableData.items].sort((a, b) => {
-		return planOrder.indexOf(a.key) - planOrder.indexOf(b.key);
+const PricingPage = ({ environmentName, subtitle = "See our pricing options and choose the one that best suits your needs.", title = "Pricing" }) => {
+	const { data: pricingTable } = useSuspenseQuery({ queryKey: [`/v3/zudoku-metering/${environmentName}/pricing-page`] });
+	const zudoku = useZudoku();
+	const auth = useAuth();
+	const { data: subscriptions = { items: [] } } = useQuery({
+		meta: { context: zudoku },
+		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions`],
+		enabled: auth.isAuthenticated
 	});
 	const getGridCols = (count) => {
 		if (count === 1) return "lg:grid-cols-1";
@@ -574,18 +574,19 @@ const PricingPage = ({ environmentName }) => {
 			className: "text-center mb-12",
 			children: [/* @__PURE__ */ jsx(Heading, {
 				level: 1,
-				children: "Pricing"
+				children: title
 			}), /* @__PURE__ */ jsx("p", {
 				className: "text-lg text-gray-600 dark:text-gray-400",
-				children: "Global live music data, flexible plans for every scale"
+				children: subtitle
 			})]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex justify-center",
 			children: /* @__PURE__ */ jsx("div", {
-				className: cn("w-full md:w-auto grid grid-cols-1 md:grid-cols-2 gap-6 md:max-w-fit", getGridCols(sortedPlans.length)),
-				children: sortedPlans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
+				className: cn("w-full md:w-auto grid grid-cols-1 md:grid-cols-2 gap-6 md:max-w-fit", getGridCols(pricingTable?.items?.length ?? 0)),
+				children: pricingTable?.items?.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
 					plan,
-					isPopular: plan.key === "pro"
+					isPopular: plan.key === "pro",
+					disabled: subscriptions.items.some((subscription) => subscription.plan.id === plan.id)
 				}, plan.id))
 			})
 		})]
@@ -949,15 +950,17 @@ const Usage = ({ subscriptionId, environmentName, currentItems }) => {
 		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions/${subscriptionId}/usage`],
 		meta: { context: zudoku }
 	});
-	const meteredEntitlements = currentItems?.filter((item) => item.included.entitlement?.type === "metered") ?? [];
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Heading, {
 		level: 3,
 		className: "mb-4",
 		children: "Usage"
-	}), Object.entries(usage.entitlements).filter((entry) => isMeteredEntitlement(entry[1])).map(([key, metric]) => /* @__PURE__ */ jsx(UsageItem, {
-		meter: { ...metric },
-		item: meteredEntitlements.find((item) => item.included.entitlement?.featureKey === key)
-	}, key))] });
+	}), /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: Object.entries(usage.entitlements).filter((entry) => isMeteredEntitlement(entry[1])).map(([key, metric]) => /* @__PURE__ */ jsx(UsageItem, {
+			meter: { ...metric },
+			item: currentItems?.find((item) => item.featureKey === key)
+		}, key))
+	})] });
 };
 
 //#endregion
@@ -971,7 +974,7 @@ const SubscriptionsPage = ({ environmentName }) => {
 		if (subscriptionId) return subscriptions.find((s) => s.id === subscriptionId) ?? subscriptions[0];
 		return subscriptions[0];
 	}, [subscriptions, subscriptionId]);
-	const activePhase = activeSubscription.phases.find((p) => new Date(p.activeFrom) <= /* @__PURE__ */ new Date() && new Date(p.activeTo) >= /* @__PURE__ */ new Date());
+	const activePhase = activeSubscription?.phases.find((p) => new Date(p.activeFrom) <= /* @__PURE__ */ new Date() && (!p.activeTo || new Date(p.activeTo) >= /* @__PURE__ */ new Date()));
 	return /* @__PURE__ */ jsx("div", {
 		className: "w-full py-12",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -1014,19 +1017,15 @@ var SubscriptionsPage_default = SubscriptionsPage;
 //#endregion
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
-const enableMonetization = (config, options) => {
-	return {
-		...config,
-		plugins: [...config.plugins ?? [], zuploMonetizationPlugin(options)],
-		slots: { "head-navigation-start": () => {
+const zuploMonetizationPlugin = createPlugin((options) => ({
+	transformConfig: (config) => {
+		return { slots: { "head-navigation-start": () => {
 			return /* @__PURE__ */ jsx(Link, {
 				to: PRICING_PATH,
 				children: "Pricing"
 			});
-		} }
-	};
-};
-const zuploMonetizationPlugin = createPlugin((options) => ({
+		} } };
+	},
 	getIdentities: async (context) => {
 		return (await queryClient.fetchQuery({
 			queryKey: [`/v3/zudoku-metering/${options.environmentName}/subscriptions`],
@@ -1049,7 +1048,7 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 		Component: ZuploMonetizationWrapper_default,
 		handle: { layout: "none" },
 		children: [{
-			path: "/checkout",
+			path: "/checkout/:planId?",
 			element: /* @__PURE__ */ jsx(CheckoutPage_default, { environmentName: options.environmentName })
 		}, {
 			path: "/checkout-confirm",
@@ -1060,7 +1059,11 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 		children: [
 			{
 				path: "/pricing",
-				element: /* @__PURE__ */ jsx(PricingPage_default, { environmentName: options.environmentName })
+				element: /* @__PURE__ */ jsx(PricingPage_default, {
+					environmentName: options.environmentName,
+					subtitle: options.pricing?.subtitle,
+					title: options.pricing?.title
+				})
 			},
 			{
 				path: "/checkout-failed",
@@ -1074,12 +1077,12 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 	}],
 	getProtectedRoutes: () => {
 		return [
-			"/checkout",
+			"/checkout/*",
 			"/checkout-success",
 			"/checkout-failed"
 		];
 	}
-}), import.meta.url);
+}));
 
 //#endregion
-export { enableMonetization, zuploMonetizationPlugin };
+export { zuploMonetizationPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",