@fluid-app/portal-sdk 0.1.206 → 0.1.207

package/dist/{SubscriptionsScreen-Cx6u1tDv.cjs → SubscriptionsScreen-YUtsF_Eq.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_portal_tenant = require("./portal_tenant-DMF89PmN.cjs");
+const require_portal_tenant = require("./portal_tenant-dfv03Fyi.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-CVv-4rQ9.cjs");
 const require_src = require("./src-D57IFKXU.cjs");
 const require_ScreenHeaderContext = require("./ScreenHeaderContext-BXgWydjB.cjs");
@@ -2206,6 +2206,20 @@ function useReactivateSubscription(options) {
 	});
 }
 //#endregion
+//#region ../../subscriptions/core/src/hooks/use-update-subscription-info.ts
+function useUpdateSubscriptionInfo(options) {
+	const api = useSubscriptionsApi();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: (params) => api.updateSubscriptionInfo(params.subscriptionToken, params.body),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.();
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
 //#region ../../subscriptions/core/src/utils/subscription-helpers.ts
 function formatSubscriptionFrequency(frequency) {
 	if (frequency === "day") return "Daily";
@@ -2616,7 +2630,10 @@ function createPortalSubscriptionsAdapter(client) {
 			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_reactivate(client, subscriptionToken));
 		},
 		updateSubscriptionInfo: async (subscriptionToken, body) => {
-			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_update(client, subscriptionToken, { subscription: { payment_method_id: body.payment_method_id } }));
+			const subscription = {};
+			if (body.payment_method_id != null) subscription.payment_method_id = body.payment_method_id;
+			if (body.quantity != null) subscription.quantity = body.quantity;
+			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_update(client, subscriptionToken, { subscription }));
 		}
 	};
 }
@@ -3430,11 +3447,12 @@ function SubscriptionDetailSkeleton() {
 		})]
 	});
 }
-function SubscriptionItemsSection({ subscription }) {
+function SubscriptionItemsSection({ subscription, displayQuantity, canEditQuantity = false, onQuantityChange, isUpdatingQuantity = false }) {
 	const variant = subscription.variant;
 	const product = variant?.product;
-	const quantity = subscription.quantity;
+	const quantity = displayQuantity ?? subscription.quantity;
 	const totalPrice = formatCurrency(subscription.price * quantity);
+	const quantityInputId = `subscription-${subscription.subscription_token}-quantity`;
 	const discount = subscription.original_price != null ? subscription.original_price - subscription.price : 0;
 	const subtotal = discount > 0 ? formatCurrency(subscription.original_price * quantity) : totalPrice;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
@@ -3475,9 +3493,9 @@ function SubscriptionItemsSection({ subscription }) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "py-6",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-row items-center space-x-4",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex min-w-0 flex-1 flex-row space-x-4",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "relative shrink-0",
@@ -3515,7 +3533,28 @@ function SubscriptionItemsSection({ subscription }) {
 									}) })
 								]
 							})]
-						})
+						}), canEditQuantity && onQuantityChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex shrink-0 flex-col items-center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+								htmlFor: quantityInputId,
+								className: "text-muted-foreground mb-1 text-xs",
+								children: "Quantity"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+								id: quantityInputId,
+								type: "number",
+								min: 1,
+								step: 1,
+								value: quantity || "",
+								onChange: (e) => {
+									if (!e.target.value) return;
+									const next = parseInt(e.target.value, 10);
+									if (Number.isFinite(next) && next > 0) onQuantityChange(next);
+								},
+								disabled: isUpdatingQuantity,
+								className: require_src.cn("border-border bg-background h-10 w-16 border text-center", isUpdatingQuantity && "cursor-not-allowed opacity-50"),
+								"aria-label": "Quantity"
+							})]
+						})]
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3815,6 +3854,44 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 		onSuccess: () => onSuccess?.("Subscription reactivated"),
 		onError: (err) => onMutationError?.("Failed to reactivate subscription", err)
 	});
+	const [pendingQuantity, setPendingQuantity] = (0, react.useState)(null);
+	const quantityDebounceRef = (0, react.useRef)(null);
+	const quantityMutation = useUpdateSubscriptionInfo({
+		onSuccess: () => {
+			onSuccess?.("Quantity updated");
+		},
+		onError: (err) => {
+			setPendingQuantity(null);
+			onMutationError?.("Failed to update quantity", err);
+		}
+	});
+	const serverQuantity = data?.subscription.quantity;
+	(0, react.useEffect)(() => {
+		if (pendingQuantity != null && serverQuantity === pendingQuantity) setPendingQuantity(null);
+	}, [pendingQuantity, serverQuantity]);
+	(0, react.useEffect)(() => () => {
+		if (quantityDebounceRef.current) clearTimeout(quantityDebounceRef.current);
+	}, []);
+	const quantityMutate = quantityMutation.mutate;
+	const handleQuantityChange = (0, react.useCallback)((next) => {
+		const clamped = Math.max(1, next);
+		setPendingQuantity(clamped);
+		if (quantityDebounceRef.current) clearTimeout(quantityDebounceRef.current);
+		quantityDebounceRef.current = setTimeout(() => {
+			if (clamped === data?.subscription.quantity) {
+				setPendingQuantity(null);
+				return;
+			}
+			quantityMutate({
+				subscriptionToken: token,
+				body: { quantity: clamped }
+			});
+		}, 500);
+	}, [
+		data?.subscription.quantity,
+		quantityMutate,
+		token
+	]);
 	const onErrorRef = (0, react.useRef)(onError);
 	onErrorRef.current = onError;
 	const onNotFoundRef = (0, react.useRef)(onNotFound);
@@ -3879,7 +3956,13 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col lg:grid lg:grid-cols-8",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionItemsSection, { subscription }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionManagementSection, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionItemsSection, {
+				subscription,
+				displayQuantity: pendingQuantity ?? void 0,
+				canEditQuantity: isActive,
+				onQuantityChange: handleQuantityChange,
+				isUpdatingQuantity: quantityMutation.isPending
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionManagementSection, {
 				subscription,
 				isActive,
 				isPaused,
@@ -4034,4 +4117,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SubscriptionsScreen-Cx6u1tDv.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-YUtsF_Eq.cjs.map