@zuplo/zudoku-plugin-monetization 0.0.33 → 0.0.35

package/dist/index.mjs

@@ -811,14 +811,14 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 				})
 			}),
 			isSubscribed ? /* @__PURE__ */ jsx(Button, {
-				variant: isPopular ? "default" : "secondary",
+				variant: isPopular ? "default" : "outline",
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Link$1, {
 					to: `/subscriptions#manage`,
 					children: "Manage Subscriptions"
 				})
 			}) : /* @__PURE__ */ jsx(Button, {
-				variant: isPopular ? "default" : "secondary",
+				variant: isPopular ? "default" : "outline",
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Link$1, {
 					to: `/checkout?planId=${encodeURIComponent(plan.id)}`,
@@ -836,7 +836,8 @@ const PricingPage = () => {
 	const deploymentName = useDeploymentName();
 	const auth = useAuth();
 	const { data: pricingTable } = usePlans();
-	const taxLegendSentence = taxBehaviorLegendSentence(collectDefaultTaxBehaviors(pricingTable.items[0]));
+	const firstPlan = pricingTable.items[0];
+	const taxLegendSentence = firstPlan ? taxBehaviorLegendSentence(collectDefaultTaxBehaviors(firstPlan)) : void 0;
 	const { data: subscriptions = { items: [] } } = useQuery({
 		meta: { context: zudoku },
 		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
@@ -1094,6 +1095,17 @@ const useSubscriptions = (environmentName) => {
 	});
 };
 //#endregion
+//#region src/utils/billables.ts
+const getActivePhase = (sub) => {
+	const now = Date.now();
+	return sub.phases.filter((p) => new Date(p.activeFrom).getTime() <= now && (!p.activeTo || new Date(p.activeTo).getTime() >= now)).sort((a, b) => new Date(b.activeFrom).getTime() - new Date(a.activeFrom).getTime())[0];
+};
+const activePhaseHasBillables = (sub) => getActivePhase(sub)?.items.some((i) => i.price != null) ?? false;
+const hasFutureBillables = (sub) => {
+	const now = Date.now();
+	return sub.phases.filter((p) => new Date(p.activeFrom).getTime() > now).some((p) => p.items.some((i) => i.price != null));
+};
+//#endregion
 //#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
 const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
 	return /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
@@ -1386,19 +1398,22 @@ const ApiKeysList = ({ isPendingFirstPayment, apiKeys, deploymentName, consumerI
 };
 //#endregion
 //#region src/pages/subscriptions/CancelSubscriptionDialog.tsx
-const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
+const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd, hasCurrentBillables, hasFutureBillables }) => {
 	const [confirmationText, setConfirmationText] = useState("");
 	const isConfirmed = planName.startsWith(confirmationText);
 	const deploymentName = useDeploymentName();
 	const context = useZudoku();
 	const queryClient = useQueryClient();
+	const cancelTiming = hasCurrentBillables ? "next_billing_cycle" : "immediate";
+	const isImmediateCancel = !hasCurrentBillables;
+	const isTrialCancel = isImmediateCancel && hasFutureBillables;
 	const cancelSubscriptionMutation = useMutation({
 		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/cancel`],
 		meta: {
 			context,
 			request: {
 				method: "POST",
-				body: JSON.stringify({ timing: "next_billing_cycle" })
+				body: JSON.stringify({ timing: cancelTiming })
 			}
 		},
 		onSuccess: async () => {
@@ -1418,28 +1433,32 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 					children: [
 						/* @__PURE__ */ jsxs(Alert, {
 							variant: "warning",
-							children: [
-								/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }),
-								/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }),
-								/* @__PURE__ */ jsxs(AlertDescription, { children: [
-									"You'll retain access until ",
-									formatDate$2(billingPeriodEnd),
-									". After your billing period ends, this plan will not renew and you would need to subscribe again to continue."
-								] })
-							]
+							children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }), isTrialCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AlertTitle, { children: [
+								"Cancel your trial of ",
+								planName,
+								"?"
+							] }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
+								"Your subscription will end now and you won't be charged when the trial would have converted to ",
+								planName,
+								"."
+							] })] }) : isImmediateCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AlertTitle, { children: [
+								"Cancel your ",
+								planName,
+								" subscription?"
+							] }), /* @__PURE__ */ jsx(AlertDescription, { children: "Your subscription will end immediately. You'll lose access to its entitlements right away." })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
+								"You'll retain access until ",
+								formatDate$2(billingPeriodEnd),
+								". After your billing period ends, this plan will not renew and you would need to subscribe again to continue."
+							] })] })]
 						}),
 						/* @__PURE__ */ jsxs(Alert, {
 							variant: "info",
-							children: [
-								/* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
-								/* @__PURE__ */ jsx(AlertTitle, { children: "You can still resume before then" }),
-								/* @__PURE__ */ jsxs(AlertDescription, { children: [
-									"If you change your mind you have until",
-									" ",
-									formatDate$2(billingPeriodEnd),
-									" to remove this cancellation from Manage subscription."
-								] })
-							]
+							children: [/* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }), isImmediateCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can subscribe again at any time" }), /* @__PURE__ */ jsx(AlertDescription, { children: "After canceling, you can return to the pricing page and start a new subscription whenever you're ready." })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can still resume before then" }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
+								"If you change your mind you have until",
+								" ",
+								formatDate$2(billingPeriodEnd),
+								" to remove this cancellation from Manage subscription."
+							] })] })]
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: "space-y-2",
@@ -2074,7 +2093,9 @@ const ManageSubscription = ({ subscription, planName }) => {
 			onOpenChange: setCancelDialogOpen,
 			planName,
 			subscriptionId: subscription.id,
-			billingPeriodEnd
+			billingPeriodEnd,
+			hasCurrentBillables: activePhaseHasBillables(subscription),
+			hasFutureBillables: hasFutureBillables(subscription)
 		}),
 		/* @__PURE__ */ jsx(RestoreSubscriptionDialog, {
 			open: restoreDialogOpen,
@@ -2579,7 +2600,7 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 		meta: { context: zudoku }
 	});
 	const isPendingFirstPayment = usageQuery.data.paymentStatus.isFirstPayment === true && usageQuery.data.paymentStatus.status !== "paid" && usageQuery.data.paymentStatus.status !== "not_required";
-	const activePhase = subscription?.phases.find((p) => new Date(p.activeFrom) <= /* @__PURE__ */ new Date() && (!p.activeTo || new Date(p.activeTo) >= /* @__PURE__ */ new Date()));
+	const activePhase = getActivePhase(subscription);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		planSwitched && /* @__PURE__ */ jsxs(DismissibleAlert, {
 			variant: "info",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -30,8 +30,8 @@
     "happy-dom": "20.9.0",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "tsdown": "0.21.9",
-    "zudoku": "0.76.0"
+    "tsdown": "0.21.10",
+    "zudoku": "0.77.0"
   },
   "peerDependencies": {
     "react": ">=19.2.0",