@taskforcehq/taskforce 0.3.169 → 0.3.300

package/dist/components/views/PlansPage.js

@@ -0,0 +1,355 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { User } from 'lucide-react';
+import styles from './PlansPage.module.css';
+import { PlanComparisonPage } from './PlanComparisonPage';
+import { AppShellHeader } from './AppShellHeader';
+import { resolveTaskforceCloudEnvironmentFromBaseUrl } from '../../config/cloudEnvironment';
+const TRANSIENT_CHECKOUT_QUERY_CLEAR_DELAY_MS = 1600;
+const ACTIVE_ENTITLEMENT_STATES = new Set(['active', 'trialing', 'grace']);
+const GATE_MESSAGES = {
+    planSelectionRequired: 'Choose a plan to continue.',
+    misconfigured: 'Signup monetization is misconfigured. Contact support or a system administrator.',
+    missingEntitlement: 'No entitlement is linked to this account.'
+};
+function parseInterval(raw) {
+    return raw === 'year' ? 'year' : 'month';
+}
+function normalizeApiBaseUrl(raw) {
+    const trimmed = String(raw || '').trim();
+    if (!trimmed)
+        return '';
+    return trimmed.replace(/\/+$/, '');
+}
+function buildEmbeddedPlansPath(params = {}) {
+    const query = new URLSearchParams();
+    query.set('screen', 'plans');
+    for (const [key, value] of Object.entries(params)) {
+        const normalized = String(value || '').trim();
+        if (normalized)
+            query.set(key, normalized);
+    }
+    return `/?${query.toString()}`;
+}
+export function PlansPage({ isAuthenticated, runtimeMode, authSessionResolved, currentTheme = 'dark', projectName, currentWorkspaceId, apiBaseUrl, connectedEnvironmentSource, embedded = false, shellOwnsScroll = false }) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [billingStatus, setBillingStatus] = useState(null);
+    const [actionBusy, setActionBusy] = useState(false);
+    const [feedback, setFeedback] = useState(null);
+    const checkoutStartRan = useRef(false);
+    const transientQueryClearTimeoutRef = useRef(null);
+    const query = useMemo(() => new URLSearchParams(location.search), [location.search]);
+    const checkoutState = String(query.get('checkout') || '').trim().toLowerCase();
+    const gateState = String(query.get('gate') || '').trim().toLowerCase();
+    const queryPlanId = String(query.get('planId') || '').trim();
+    const queryPlanVersionId = String(query.get('planVersionId') || '').trim();
+    const queryInterval = parseInterval(query.get('interval'));
+    const querySessionId = String(query.get('session_id') || '').trim();
+    const normalizedApiBaseUrl = useMemo(() => normalizeApiBaseUrl(apiBaseUrl), [apiBaseUrl]);
+    const normalizedConnectedEnvironmentSource = useMemo(() => normalizeApiBaseUrl(connectedEnvironmentSource), [connectedEnvironmentSource]);
+    const fallbackPricingSource = useMemo(() => {
+        const environment = resolveTaskforceCloudEnvironmentFromBaseUrl(normalizedConnectedEnvironmentSource || normalizedApiBaseUrl);
+        return {
+            environment,
+            runtimeMode: runtimeMode === 'cloud' ? 'cloud' : 'local'
+        };
+    }, [normalizedApiBaseUrl, normalizedConnectedEnvironmentSource, runtimeMode]);
+    const buildApiUrl = useCallback((path) => {
+        const normalizedPath = String(path || '').trim();
+        if (!normalizedApiBaseUrl)
+            return normalizedPath;
+        return `${normalizedApiBaseUrl}${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`;
+    }, [normalizedApiBaseUrl]);
+    const closeEmbeddedPlansScreen = useCallback(() => {
+        const params = new URLSearchParams(location.search);
+        params.delete('screen');
+        params.delete('gate');
+        params.delete('checkout');
+        params.delete('planId');
+        params.delete('planVersionId');
+        params.delete('interval');
+        const nextQuery = params.toString();
+        navigate(`/${nextQuery ? `?${nextQuery}` : ''}${location.hash || ''}`);
+    }, [location.hash, location.search, navigate]);
+    const pricingEndpoints = useMemo(() => {
+        const endpoints = [
+            normalizedApiBaseUrl ? `${normalizedApiBaseUrl}/api/taskforce/public/pricing` : '',
+            '/api/taskforce/public/pricing'
+        ].map((value) => String(value || '').trim()).filter((value, index, all) => value && all.indexOf(value) === index);
+        return endpoints;
+    }, [normalizedApiBaseUrl]);
+    const hasResolvedActiveEntitlement = useMemo(() => {
+        const entitlementState = String(billingStatus?.entitlementState || '').trim().toLowerCase();
+        return ACTIVE_ENTITLEMENT_STATES.has(entitlementState);
+    }, [billingStatus?.entitlementState]);
+    const gateMessage = useMemo(() => {
+        if (hasResolvedActiveEntitlement)
+            return null;
+        if (gateState === 'plan_selection_required')
+            return GATE_MESSAGES.planSelectionRequired;
+        if (gateState === 'misconfigured')
+            return GATE_MESSAGES.misconfigured;
+        if (gateState === 'missing_entitlement')
+            return GATE_MESSAGES.missingEntitlement;
+        return null;
+    }, [gateState, hasResolvedActiveEntitlement]);
+    const clearTransientQueryState = useCallback(() => {
+        const next = new URLSearchParams(location.search);
+        next.delete('checkout');
+        next.delete('session_id');
+        next.delete('gate');
+        next.delete('planId');
+        next.delete('planVersionId');
+        next.delete('interval');
+        const search = next.toString();
+        navigate(`${location.pathname}${search ? `?${search}` : ''}${location.hash || ''}`, { replace: true });
+    }, [location.hash, location.pathname, location.search, navigate]);
+    const scheduleTransientQueryClear = useCallback(() => {
+        if (transientQueryClearTimeoutRef.current != null) {
+            window.clearTimeout(transientQueryClearTimeoutRef.current);
+        }
+        transientQueryClearTimeoutRef.current = window.setTimeout(() => {
+            clearTransientQueryState();
+            transientQueryClearTimeoutRef.current = null;
+        }, TRANSIENT_CHECKOUT_QUERY_CLEAR_DELAY_MS);
+    }, [clearTransientQueryState]);
+    const loadBillingStatus = useCallback(async () => {
+        if (!isAuthenticated) {
+            setBillingStatus(null);
+            return;
+        }
+        try {
+            const res = await fetch(buildApiUrl('/api/taskforce/billing/status'), {
+                method: 'GET',
+                credentials: 'include'
+            });
+            if (!res.ok)
+                return;
+            const payload = await res.json().catch(() => ({}));
+            setBillingStatus(payload || null);
+        }
+        catch {
+            // best effort only
+        }
+    }, [buildApiUrl, isAuthenticated]);
+    const startCheckout = useCallback(async (planVersionId, interval) => {
+        if (!planVersionId) {
+            setFeedback({ type: 'error', message: 'Selected plan is missing a default plan version.' });
+            return;
+        }
+        setActionBusy(true);
+        setFeedback(null);
+        try {
+            const res = await fetch(buildApiUrl('/api/taskforce/billing/checkout-session'), {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ planVersionId, interval })
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setFeedback({ type: 'error', message: String(payload?.error || 'Unable to start checkout for selected plan.') });
+                return;
+            }
+            const checkoutState = String(payload?.checkoutState || '').trim().toLowerCase();
+            if (checkoutState === 'free') {
+                setFeedback({ type: 'success', message: 'Plan selected. Your access is ready.' });
+                await loadBillingStatus();
+                return;
+            }
+            if (checkoutState === 'updated') {
+                setFeedback({ type: 'success', message: String(payload?.message || 'Your subscription was updated successfully.') });
+                await loadBillingStatus();
+                return;
+            }
+            if (checkoutState === 'already_current_plan') {
+                setFeedback({ type: 'success', message: String(payload?.message || 'You are already on this plan.') });
+                await loadBillingStatus();
+                return;
+            }
+            const returnBaseUrl = String(payload?.returnBaseUrl || '').trim();
+            if (runtimeMode === 'local' && returnBaseUrl) {
+                try {
+                    const currentOrigin = window.location.origin;
+                    const resolvedReturnOrigin = new URL(returnBaseUrl, currentOrigin).origin;
+                    if (resolvedReturnOrigin !== currentOrigin) {
+                        setFeedback({
+                            type: 'error',
+                            message: `Checkout return is misconfigured for this runtime. Expected ${currentOrigin} but got ${resolvedReturnOrigin}.`
+                        });
+                        return;
+                    }
+                }
+                catch {
+                    setFeedback({ type: 'error', message: 'Checkout return URL is invalid for this runtime.' });
+                    return;
+                }
+            }
+            const nextUrl = String(payload?.url || '').trim();
+            if (!nextUrl) {
+                setFeedback({ type: 'error', message: 'Checkout did not return a redirect URL.' });
+                return;
+            }
+            window.location.assign(nextUrl);
+        }
+        catch {
+            setFeedback({ type: 'error', message: 'Unable to start checkout for selected plan.' });
+        }
+        finally {
+            setActionBusy(false);
+        }
+    }, [buildApiUrl, loadBillingStatus]);
+    const confirmCheckoutSession = useCallback(async (sessionId) => {
+        if (!sessionId)
+            return false;
+        try {
+            const res = await fetch(buildApiUrl('/api/taskforce/billing/checkout-session/confirm'), {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sessionId })
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setFeedback({ type: 'error', message: String(payload?.error || 'Unable to confirm checkout completion.') });
+                return false;
+            }
+            await loadBillingStatus();
+            return true;
+        }
+        catch {
+            setFeedback({ type: 'error', message: 'Unable to confirm checkout completion.' });
+            return false;
+        }
+    }, [buildApiUrl, loadBillingStatus]);
+    const openBillingPortal = useCallback(async () => {
+        if (!isAuthenticated) {
+            navigate(`/login?mode=login&next=${encodeURIComponent(buildEmbeddedPlansPath())}`);
+            return;
+        }
+        setActionBusy(true);
+        setFeedback(null);
+        try {
+            const res = await fetch(buildApiUrl('/api/taskforce/billing/portal-session'), {
+                method: 'POST',
+                credentials: 'include'
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setFeedback({ type: 'error', message: String(payload?.error || 'Failed to open billing portal.') });
+                return;
+            }
+            const nextUrl = String(payload?.url || '').trim();
+            if (!nextUrl) {
+                setFeedback({ type: 'error', message: 'Portal session did not return a redirect URL.' });
+                return;
+            }
+            window.location.assign(nextUrl);
+        }
+        catch {
+            setFeedback({ type: 'error', message: 'Failed to open billing portal.' });
+        }
+        finally {
+            setActionBusy(false);
+        }
+    }, [buildApiUrl, isAuthenticated, navigate]);
+    useEffect(() => {
+        void loadBillingStatus();
+    }, [loadBillingStatus]);
+    useEffect(() => {
+        if (!hasResolvedActiveEntitlement)
+            return;
+        if (gateState !== 'missing_entitlement')
+            return;
+        clearTransientQueryState();
+    }, [clearTransientQueryState, gateState, hasResolvedActiveEntitlement]);
+    useEffect(() => () => {
+        if (transientQueryClearTimeoutRef.current != null) {
+            window.clearTimeout(transientQueryClearTimeoutRef.current);
+        }
+    }, []);
+    useEffect(() => {
+        if (checkoutState === 'success') {
+            checkoutStartRan.current = true;
+            setFeedback({ type: 'success', message: 'Checkout completed successfully. Finalizing your plan...' });
+            void (async () => {
+                const confirmed = querySessionId
+                    ? await confirmCheckoutSession(querySessionId)
+                    : false;
+                if (!confirmed) {
+                    await loadBillingStatus();
+                }
+                setFeedback({ type: 'success', message: 'Checkout completed successfully.' });
+                scheduleTransientQueryClear();
+            })();
+            return;
+        }
+        if (checkoutState === 'cancel') {
+            setFeedback({ type: 'error', message: 'Checkout was canceled. No charge was made.' });
+            scheduleTransientQueryClear();
+            return;
+        }
+        if ((checkoutState === 'start' || checkoutState === 'free') && isAuthenticated && queryPlanVersionId && !checkoutStartRan.current) {
+            checkoutStartRan.current = true;
+            void startCheckout(queryPlanVersionId, queryInterval);
+            return;
+        }
+        if (gateMessage) {
+            setFeedback({ type: 'error', message: gateMessage });
+            return;
+        }
+        setFeedback((current) => {
+            if (!current || current.type !== 'error')
+                return current;
+            if (current.message === GATE_MESSAGES.planSelectionRequired)
+                return null;
+            if (current.message === GATE_MESSAGES.misconfigured)
+                return null;
+            if (current.message === GATE_MESSAGES.missingEntitlement)
+                return null;
+            return current;
+        });
+    }, [checkoutState, confirmCheckoutSession, gateMessage, isAuthenticated, loadBillingStatus, queryInterval, queryPlanVersionId, querySessionId, scheduleTransientQueryClear, startCheckout]);
+    const handleSelectPlan = useCallback(async (intent) => {
+        if (!isAuthenticated) {
+            const nextCheckoutState = intent.pricingType === 'free' ? 'free' : 'start';
+            const nextPath = buildEmbeddedPlansPath({
+                checkout: nextCheckoutState,
+                planId: intent.planId,
+                planVersionId: intent.planVersionId,
+                interval: intent.interval
+            });
+            navigate(`/login?mode=register&planId=${encodeURIComponent(intent.planId)}&planVersionId=${encodeURIComponent(intent.planVersionId)}&interval=${encodeURIComponent(intent.interval)}&next=${encodeURIComponent(nextPath)}`);
+            return;
+        }
+        if (intent.isCurrentPlan) {
+            if (!billingStatus?.stripeCustomerId) {
+                setFeedback({ type: 'success', message: 'Your current plan does not use Stripe billing.' });
+                return;
+            }
+            await openBillingPortal();
+            return;
+        }
+        if (intent.pricingType === 'free') {
+            await startCheckout(intent.planVersionId, intent.interval);
+            return;
+        }
+        await startCheckout(intent.planVersionId, intent.interval);
+    }, [isAuthenticated, navigate, openBillingPortal, startCheckout]);
+    const handleBack = useCallback(() => {
+        if (embedded) {
+            closeEmbeddedPlansScreen();
+            return;
+        }
+        if (window.history.length > 1) {
+            navigate(-1);
+            return;
+        }
+        navigate('/');
+    }, [closeEmbeddedPlansScreen, embedded, navigate]);
+    const topActions = embedded ? (_jsx(_Fragment, { children: isAuthenticated && billingStatus?.stripeCustomerId && (_jsx("button", { className: styles.navAction, onClick: () => { void openBillingPortal(); }, disabled: actionBusy, children: "Manage billing" })) })) : (_jsxs(_Fragment, { children: [_jsx("button", { className: styles.navAction, onClick: handleBack, children: "Back" }), isAuthenticated && billingStatus?.stripeCustomerId && (_jsx("button", { className: styles.navAction, onClick: () => { void openBillingPortal(); }, disabled: actionBusy, children: "Manage billing" })), !isAuthenticated && (_jsxs("button", { className: styles.navAction, onClick: () => navigate(`/login?mode=login&next=${encodeURIComponent(buildEmbeddedPlansPath())}`), children: [_jsx(User, { size: 16, style: { marginRight: '8px', verticalAlign: 'text-bottom' } }), "Sign In"] }))] }));
+    const chrome = embedded ? null : (_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode === 'cloud' ? 'cloud' : 'local', theme: currentTheme, actions: topActions }));
+    return (_jsx(PlanComparisonPage, { chrome: chrome, heading: "Subscription Plans", subtitle: "Manage your subscription and explore available features. Your current plan is highlighted below.", isAuthenticated: isAuthenticated, authSessionResolved: authSessionResolved, currentPlanId: String(billingStatus?.planId || queryPlanId || '').trim() || null, currentPlanVersionId: String(billingStatus?.planVersionId || queryPlanVersionId || '').trim() || null, currentEntitlementState: String(billingStatus?.entitlementState || '').trim() || null, canManageCurrentPlan: Boolean(billingStatus?.stripeCustomerId), pricingEndpoint: pricingEndpoints[0], statusBanner: feedback, onBack: handleBack, backLabel: embedded ? 'Back to Board' : 'Back to App', topActions: embedded ? topActions : null, shellOwnsScroll: shellOwnsScroll, showPageBackButton: !embedded, fallbackPricingSource: fallbackPricingSource, onSelectPlan: handleSelectPlan }));
+}

package/dist/components/views/StandaloneLayout.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useTaskforce } from '../../hooks/useTaskforce';
-export type StandaloneLayoutProps = ReturnType<typeof useTaskforce> & {
+import { type UseTaskforceResult } from '../../hooks/useTaskforce';
+export type StandaloneLayoutProps = UseTaskforceResult & {
     onHeaderMouseDown?: (e: React.MouseEvent) => void;
     isDragging?: boolean;
     onClose?: () => void;