@zuplo/zudoku-plugin-monetization 0.0.8 → 0.0.9

package/dist/index.d.mts

@@ -1,54 +1,14 @@
-import * as zudoku0 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 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;
-    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 { 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,7 +402,7 @@ const useUrlUtils = () => {
 
 //#endregion
 //#region src/pages/CheckoutPage.tsx
-const CheckoutPage = ({ environmentName }) => {
+const CheckoutPage = () => {
 	const { planId } = useParams();
 	const zudoku = useZudoku();
 	const auth = useAuth();
@@ -411,7 +411,7 @@ const CheckoutPage = ({ environmentName }) => {
 		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({
@@ -552,13 +552,13 @@ const PricingCard = ({ plan, isPopular = false, disabled = false }) => {
 
 //#endregion
 //#region src/pages/PricingPage.tsx
-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 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/${environmentName}/subscriptions`],
+		queryKey: [`/v3/zudoku-metering/${zudoku.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME}/subscriptions`],
 		enabled: auth.isAuthenticated
 	});
 	const getGridCols = (count) => {
@@ -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(() => {
@@ -993,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,23 +1019,27 @@ var SubscriptionsPage_default = SubscriptionsPage;
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
 const zuploMonetizationPlugin = createPlugin((options) => ({
-	transformConfig: (config) => {
-		return { slots: { "head-navigation-start": () => {
-			return /* @__PURE__ */ jsx(Link, {
-				to: PRICING_PATH,
-				children: "Pricing"
-			});
-		} } };
+	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"] }
 		})));
@@ -1044,37 +1049,38 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 		path: "/subscriptions",
 		icon: StarsIcon
 	}],
-	getRoutes: () => [{
-		Component: ZuploMonetizationWrapper_default,
-		handle: { layout: "none" },
-		children: [{
-			path: "/checkout/:planId?",
-			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,
-					subtitle: options.pricing?.subtitle,
-					title: options.pricing?.title
-				})
-			},
-			{
-				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/*",

package/package.json

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