@zuplo/zudoku-plugin-monetization 0.0.7 → 0.0.9

package/dist/index.d.mts

@@ -1,47 +1,14 @@
-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";
-import * as zudoku_plugins0 from "zudoku/plugins";
+import { ApiIdentityPlugin, CommonPlugin, NavigationPlugin, ProfileMenuPlugin } from "zudoku";
+import { TransformConfigPlugin } from "zudoku/plugins";
 
 //#region src/ZuploMonetizationPlugin.d.ts
 type ZudokuMonetizationPluginOptions = {
-  environmentName: string;
+  environmentName?: string;
+  pricing?: {
+    subtitle?: string;
+    title?: string;
+  };
 };
-declare const enableMonetization: (config: ZudokuConfig, options: ZudokuMonetizationPluginOptions) => ZudokuConfig;
-declare const zuploMonetizationPlugin: (options: ZudokuMonetizationPluginOptions) => {
-  getIdentities: (context: zudoku0.ZudokuContext) => Promise<{
-    label: string;
-    id: string;
-    authorizeRequest: (request: Request) => Promise<Request>;
-    authorizationFields: {
-      headers: string[];
-    };
-  }[]>;
-  getProfileMenuItems: () => {
-    label: string;
-    path: string;
-    icon: react0.ForwardRefExoticComponent<Omit<zudoku_icons0.LucideProps, "ref"> & react0.RefAttributes<SVGSVGElement>>;
-  }[];
-  getRoutes: () => ({
-    Component: () => react_jsx_runtime0.JSX.Element;
-    handle: {
-      layout: string;
-    };
-    children: {
-      path: string;
-      element: react_jsx_runtime0.JSX.Element;
-    }[];
-  } | {
-    Component: () => react_jsx_runtime0.JSX.Element;
-    children: {
-      path: string;
-      element: react_jsx_runtime0.JSX.Element;
-    }[];
-    handle?: undefined;
-  })[];
-  getProtectedRoutes: () => string[];
-} & zudoku_plugins0.TransformConfigPlugin;
+declare const zuploMonetizationPlugin: (options?: ZudokuMonetizationPluginOptions | undefined) => NavigationPlugin & ProfileMenuPlugin & ApiIdentityPlugin & CommonPlugin & TransformConfigPlugin;
 //#endregion
-export { enableMonetization, zuploMonetizationPlugin };
+export { zuploMonetizationPlugin };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { cn, createPlugin, joinUrl } from "zudoku";
+import { Button, ClientOnly, Heading } from "zudoku/components";
 import { AlertTriangleIcon, ArrowLeftIcon, ArrowUpIcon, CheckIcon, ClockIcon, InfoIcon, LockIcon, RefreshCwIcon, ShieldIcon, StarsIcon, Trash2Icon } from "zudoku/icons";
 import { Link, Outlet, useNavigate, useParams, useSearchParams } from "zudoku/router";
-import { Button, ClientOnly, Heading } from "zudoku/components";
 import { useAuth, useZudoku } from "zudoku/hooks";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useSuspenseQuery } from "zudoku/react-query";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
@@ -235,19 +235,19 @@ const formatBillingCycle = (duration) => {
 	if (duration.includes(" ")) return `every ${duration}`;
 	return `every ${duration}`;
 };
-const CheckoutConfirmPage = ({ environmentName }) => {
+const CheckoutConfirmPage = () => {
 	const [search] = useSearchParams();
 	const planId = search.get("plan");
 	const zudoku = useZudoku();
 	const navigate = useNavigate();
-	const { data: plans } = usePlans(environmentName);
+	const { data: plans } = usePlans(zudoku.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME ?? "");
 	const selectedPlan = plans?.items?.find((plan) => plan.id === planId);
 	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
 	const { quotas, features } = categorizeRateCards(rateCards ?? []);
 	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
 	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
 	const createSubscriptionMutation = useMutation({
-		mutationFn: createMutationFn(`/v3/zudoku-metering/${environmentName}/subscriptions`, zudoku, {
+		mutationFn: createMutationFn(`/v3/zudoku-metering/${zudoku.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME}/subscriptions`, zudoku, {
 			method: "POST",
 			body: JSON.stringify({ planId })
 		}),
@@ -402,17 +402,16 @@ const useUrlUtils = () => {
 
 //#endregion
 //#region src/pages/CheckoutPage.tsx
-const CheckoutPage = ({ environmentName }) => {
-	const [search] = useSearchParams();
+const CheckoutPage = () => {
+	const { planId } = useParams();
 	const zudoku = useZudoku();
-	const planId = search.get("plan");
 	const auth = useAuth();
 	const { generateUrl } = useUrlUtils();
 	const { data: _data } = useQuery({
 		queryKey: ["plan", planId],
 		queryFn: async () => {
 			if (!auth.profile?.email) throw new Error("No email found for user. Make sure your Authentication Provider exposes the email address.");
-			const request = await zudoku.signRequest(new Request(`https://api.zuploedge.com/v3/zudoku-metering/${environmentName}/stripe/checkout`, {
+			const request = await zudoku.signRequest(new Request(`https://api.zuploedge.com/v3/zudoku-metering/${zudoku.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME}/stripe/checkout`, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({
@@ -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 = ({ subtitle = "See our pricing options and choose the one that best suits your needs.", title = "Pricing" }) => {
+	const zudoku = useZudoku();
+	const { data: pricingTable } = useSuspenseQuery({ queryKey: [`/v3/zudoku-metering/${zudoku.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME}/pricing-page`] });
+	const auth = useAuth();
+	const { data: subscriptions = { items: [] } } = useQuery({
+		meta: { context: zudoku },
+		queryKey: [`/v3/zudoku-metering/${zudoku.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME}/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,7 +950,6 @@ const Usage = ({ subscriptionId, environmentName, currentItems }) => {
 		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions/${subscriptionId}/usage`],
 		meta: { context: zudoku }
 	});
-	console.log("currentItems", currentItems);
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Heading, {
 		level: 3,
 		className: "mb-4",
@@ -965,8 +965,9 @@ const Usage = ({ subscriptionId, environmentName, currentItems }) => {
 
 //#endregion
 //#region src/pages/SubscriptionsPage.tsx
-const SubscriptionsPage = ({ environmentName }) => {
-	const { data } = useSubscriptions(environmentName);
+const SubscriptionsPage = () => {
+	const deploymentName = useZudoku().env.ZUPLO_PUBLIC_DEPLOYMENT_NAME ?? "";
+	const { data } = useSubscriptions(deploymentName);
 	const { subscriptionId } = useParams();
 	const subscriptions = data?.items ?? [];
 	const activeSubscription = useMemo(() => {
@@ -975,7 +976,6 @@ const SubscriptionsPage = ({ environmentName }) => {
 		return subscriptions[0];
 	}, [subscriptions, subscriptionId]);
 	const activePhase = activeSubscription?.phases.find((p) => new Date(p.activeFrom) <= /* @__PURE__ */ new Date() && (!p.activeTo || new Date(p.activeTo) >= /* @__PURE__ */ new Date()));
-	console.log("activePhase", activePhase);
 	return /* @__PURE__ */ jsx("div", {
 		className: "w-full py-12",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -994,11 +994,11 @@ const SubscriptionsPage = ({ environmentName }) => {
 				}),
 				activeSubscription && /* @__PURE__ */ jsx(Usage, {
 					subscriptionId: activeSubscription?.id,
-					environmentName,
+					environmentName: deploymentName,
 					currentItems: activePhase?.items
 				}),
 				activeSubscription?.consumer?.apiKeys && /* @__PURE__ */ jsx(ApiKeysList, {
-					deploymentName: environmentName,
+					deploymentName,
 					consumerId: activeSubscription.consumer.id,
 					apiKeys: activeSubscription.consumer.apiKeys
 				}),
@@ -1018,28 +1018,28 @@ 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": () => {
-			return /* @__PURE__ */ jsx(Link, {
-				to: PRICING_PATH,
-				children: "Pricing"
-			});
-		} }
-	};
-};
 const zuploMonetizationPlugin = createPlugin((options) => ({
+	transformConfig: ({ merge }) => merge({ slots: { "head-navigation-start": () => /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		variant: "ghost",
+		children: /* @__PURE__ */ jsx(Link, {
+			to: PRICING_PATH,
+			children: "Pricing"
+		})
+	}) } }),
+	initialize: (context) => {
+		if (!context.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME || options?.environmentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
+	},
 	getIdentities: async (context) => {
 		return (await queryClient.fetchQuery({
-			queryKey: [`/v3/zudoku-metering/${options.environmentName}/subscriptions`],
+			queryKey: [`/v3/zudoku-metering/${context.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME}/subscriptions`],
 			meta: { context }
 		})).items.flatMap((item) => item.consumer.apiKeys.map((apiKey) => ({
 			label: item.name,
 			id: apiKey.id,
 			authorizeRequest: async (request) => {
-				return new Request(request, { headers: { Authorization: `Bearer ${apiKey.key}` } });
+				request.headers.set("Authorization", `Bearer ${apiKey.key}`);
+				return request;
 			},
 			authorizationFields: { headers: ["Authorization"] }
 		})));
@@ -1049,41 +1049,46 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 		path: "/subscriptions",
 		icon: StarsIcon
 	}],
-	getRoutes: () => [{
-		Component: ZuploMonetizationWrapper_default,
-		handle: { layout: "none" },
-		children: [{
-			path: "/checkout",
-			element: /* @__PURE__ */ jsx(CheckoutPage_default, { environmentName: options.environmentName })
+	getRoutes: () => {
+		return [{
+			Component: ZuploMonetizationWrapper_default,
+			handle: { layout: "none" },
+			children: [{
+				path: "/checkout/:planId?",
+				element: /* @__PURE__ */ jsx(CheckoutPage_default, {})
+			}, {
+				path: "/checkout-confirm",
+				element: /* @__PURE__ */ jsx(CheckoutConfimPage_default, {})
+			}]
 		}, {
-			path: "/checkout-confirm",
-			element: /* @__PURE__ */ jsx(CheckoutConfimPage_default, { environmentName: options.environmentName })
-		}]
-	}, {
-		Component: ZuploMonetizationWrapper_default,
-		children: [
-			{
-				path: "/pricing",
-				element: /* @__PURE__ */ jsx(PricingPage_default, { environmentName: options.environmentName })
-			},
-			{
-				path: "/checkout-failed",
-				element: /* @__PURE__ */ jsx(CheckoutFailedPage_default, {})
-			},
-			{
-				path: "/subscriptions/:subscriptionId?",
-				element: /* @__PURE__ */ jsx(SubscriptionsPage_default, { environmentName: options.environmentName })
-			}
-		]
-	}],
+			Component: ZuploMonetizationWrapper_default,
+			children: [
+				{
+					path: "/pricing",
+					element: /* @__PURE__ */ jsx(PricingPage_default, {
+						subtitle: options?.pricing?.subtitle,
+						title: options?.pricing?.title
+					})
+				},
+				{
+					path: "/checkout-failed",
+					element: /* @__PURE__ */ jsx(CheckoutFailedPage_default, {})
+				},
+				{
+					path: "/subscriptions/:subscriptionId?",
+					element: /* @__PURE__ */ jsx(SubscriptionsPage_default, {})
+				}
+			]
+		}];
+	},
 	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.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",