@funnelsgrove/payments 0.1.0 → 0.1.2

package/dist/components/shared/StripeExpressCheckoutButton.d.ts

@@ -0,0 +1,18 @@
+import type { AvailablePaymentMethods, StripeExpressCheckoutElementOptions } from '@stripe/stripe-js';
+export type StripeExpressCheckoutButtonProps = {
+    amountCents: number;
+    beforeConfirm?: () => Promise<string | null>;
+    summaryLabel: string;
+    returnUrl: string;
+    customerEmail?: string | null;
+    customerName?: string | null;
+    className?: string;
+    options?: StripeExpressCheckoutElementOptions;
+    availabilityPaymentMethods?: readonly (keyof AvailablePaymentMethods)[];
+    initialAvailable?: boolean | null;
+    keepInitialAvailableOnReady?: boolean;
+    onAvailabilityChange?: (available: boolean) => void;
+    onError?: (message: string | null) => void;
+    onSuccess?: () => void;
+};
+export declare function StripeExpressCheckoutButton({ amountCents, beforeConfirm, summaryLabel, returnUrl, customerEmail, customerName, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, onAvailabilityChange, onError, onSuccess, }: StripeExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/StripeExpressCheckoutButton.js

@@ -0,0 +1,164 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ExpressCheckoutElement, useElements, useStripe } from '@stripe/react-stripe-js';
+const normalizeBillingName = (input) => {
+    var _a, _b, _c;
+    const normalizedName = (_a = input.name) === null || _a === void 0 ? void 0 : _a.trim();
+    if (normalizedName) {
+        return normalizedName;
+    }
+    const normalizedEmail = (_b = input.email) === null || _b === void 0 ? void 0 : _b.trim();
+    if (normalizedEmail) {
+        const localPart = (_c = normalizedEmail
+            .split('@')[0]) === null || _c === void 0 ? void 0 : _c.replace(/[._-]+/g, ' ').trim();
+        if (localPart) {
+            return localPart;
+        }
+    }
+    return 'Customer';
+};
+const buildDefaultOptions = (input) => {
+    return {
+        buttonHeight: 55,
+        buttonTheme: {
+            applePay: 'black',
+        },
+        buttonType: {
+            applePay: 'subscribe',
+        },
+        emailRequired: true,
+        layout: {
+            maxColumns: 1,
+            maxRows: 1,
+            overflow: 'auto',
+        },
+        lineItems: [
+            {
+                name: input.summaryLabel.trim() || 'Selected plan',
+                amount: input.amountCents,
+            },
+        ],
+        paymentMethodOrder: ['apple_pay'],
+        paymentMethods: {
+            amazonPay: 'never',
+            applePay: 'always',
+            googlePay: 'never',
+            klarna: 'never',
+            link: 'never',
+            paypal: 'never',
+        },
+    };
+};
+const isSuccessfulIntentStatus = (status) => {
+    return status === 'succeeded' || status === 'processing' || status === 'requires_capture';
+};
+export function StripeExpressCheckoutButton({ amountCents, beforeConfirm, summaryLabel, returnUrl, customerEmail, customerName, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, onAvailabilityChange, onError, onSuccess, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [walletAvailable, setWalletAvailable] = useState(initialAvailable !== null && initialAvailable !== void 0 ? initialAvailable : null);
+    const effectiveWalletAvailable = initialAvailable === true && walletAvailable !== false
+        ? true
+        : walletAvailable;
+    const baseOptions = useMemo(() => buildDefaultOptions({
+        amountCents,
+        summaryLabel,
+    }), [amountCents, summaryLabel]);
+    const resolvedOptions = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), lineItems: (_j = options === null || options === void 0 ? void 0 : options.lineItems) !== null && _j !== void 0 ? _j : baseOptions.lineItems, paymentMethodOrder: (_k = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _k !== void 0 ? _k : baseOptions.paymentMethodOrder });
+    }, [baseOptions, options]);
+    const handleConfirm = async (event) => {
+        var _a;
+        if (!stripe || !elements) {
+            const message = 'Wallet checkout is not ready yet.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'fail', message });
+            return;
+        }
+        onError === null || onError === void 0 ? void 0 : onError(null);
+        let preparedCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || null;
+        if (beforeConfirm) {
+            try {
+                preparedCustomerEmail = await beforeConfirm();
+            }
+            catch (confirmError) {
+                const message = confirmError instanceof Error && confirmError.message
+                    ? confirmError.message
+                    : 'Unable to prepare wallet checkout.';
+                onError === null || onError === void 0 ? void 0 : onError(message);
+                event.paymentFailed({ reason: 'invalid_payment_data', message });
+                return;
+            }
+        }
+        if (beforeConfirm && !preparedCustomerEmail) {
+            const message = 'Email is required to continue.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'invalid_payment_data', message });
+            return;
+        }
+        const submitResult = await elements.submit();
+        if (submitResult.error) {
+            const message = submitResult.error.message || 'Unable to start wallet checkout.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'invalid_payment_data', message });
+            return;
+        }
+        const result = await stripe.confirmPayment({
+            elements,
+            confirmParams: {
+                payment_method_data: {
+                    billing_details: {
+                        email: preparedCustomerEmail || (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || undefined,
+                        name: normalizeBillingName({
+                            email: preparedCustomerEmail || customerEmail,
+                            name: customerName,
+                        }),
+                    },
+                },
+                return_url: returnUrl,
+            },
+            redirect: 'if_required',
+        });
+        if (result.error) {
+            const message = result.error.message || 'Wallet checkout failed.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'fail', message });
+            return;
+        }
+        onError === null || onError === void 0 ? void 0 : onError(null);
+        if (typeof window !== 'undefined' &&
+            isSuccessfulIntentStatus((_a = result.paymentIntent) === null || _a === void 0 ? void 0 : _a.status)) {
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+            window.location.assign(returnUrl);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: [
+                    'stripe-express-checkout-button',
+                    className !== null && className !== void 0 ? className : '',
+                    effectiveWalletAvailable === false ? 'is-hidden' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: _jsx(ExpressCheckoutElement, { options: resolvedOptions, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
+                        setWalletAvailable(false);
+                        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
+                        onError === null || onError === void 0 ? void 0 : onError(error.message || 'Unable to load wallet checkout.');
+                    }, onReady: ({ availablePaymentMethods: availablePaymentMethodsMap }) => {
+                        const available = Boolean(availabilityPaymentMethods.some((paymentMethod) => availablePaymentMethodsMap === null || availablePaymentMethodsMap === void 0 ? void 0 : availablePaymentMethodsMap[paymentMethod]));
+                        const resolvedAvailable = available || (keepInitialAvailableOnReady && initialAvailable === true);
+                        setWalletAvailable(resolvedAvailable);
+                        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(resolvedAvailable);
+                        if (resolvedAvailable) {
+                            onError === null || onError === void 0 ? void 0 : onError(null);
+                        }
+                    } }) }), _jsx("style", { children: stripeExpressCheckoutButtonStyles })] }));
+}
+const stripeExpressCheckoutButtonStyles = `
+.stripe-express-checkout-button {
+  width: 100%;
+}
+
+.stripe-express-checkout-button.is-hidden {
+  display: none;
+}
+`;

package/dist/components/shared/StripeExpressCheckoutElement.d.ts

@@ -0,0 +1,8 @@
+import type { Appearance, Stripe } from '@stripe/stripe-js';
+import { type StripeExpressCheckoutButtonProps } from './StripeExpressCheckoutButton.js';
+export type StripeExpressCheckoutElementProps = StripeExpressCheckoutButtonProps & {
+    appearance?: Appearance;
+    clientSecret: string;
+    stripePromise: Promise<Stripe | null>;
+};
+export declare function StripeExpressCheckoutElement({ appearance, clientSecret, stripePromise, ...buttonProps }: StripeExpressCheckoutElementProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/StripeExpressCheckoutElement.js

@@ -0,0 +1,19 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Elements } from '@stripe/react-stripe-js';
+import { StripeExpressCheckoutButton, } from './StripeExpressCheckoutButton.js';
+export function StripeExpressCheckoutElement(_a) {
+    var { appearance, clientSecret, stripePromise } = _a, buttonProps = __rest(_a, ["appearance", "clientSecret", "stripePromise"]);
+    return (_jsx(Elements, { stripe: stripePromise, options: Object.assign({ clientSecret }, (appearance ? { appearance } : {})), children: _jsx(StripeExpressCheckoutButton, Object.assign({}, buttonProps)) }));
+}

package/dist/components/shared/StripePlanSelector.d.ts

@@ -1,13 +1,11 @@
 import type { ReactNode } from 'react';
-import type { BillingFallbackPlanConfig, BillingPlanCatalog } from '../../config/billing.config';
-import { type PaywallPlan } from '../../services/stripe.service';
-import type { RuntimeMode } from '@funnelsgrove/runtime';
+import { type PaywallPlan } from '../../services/stripe.service.js';
 type StripePlanSelectorProps = {
-    planCatalog?: BillingPlanCatalog | readonly BillingFallbackPlanConfig[];
-    runtimeMode: RuntimeMode;
+    plans?: readonly PaywallPlan[] | null;
     selectedPlanId: string | null;
     onSelectPlan: (planId: string) => void;
-    onPlansLoaded?: (plans: readonly PaywallPlan[]) => void;
+    loading?: boolean;
+    error?: string | null;
     className?: string;
     loadingClassName?: string;
     errorClassName?: string;
@@ -18,5 +16,5 @@ type StripePlanSelectorProps = {
         onSelect: () => void;
     }) => ReactNode;
 };
-export declare function StripePlanSelector({ planCatalog, runtimeMode, selectedPlanId, onSelectPlan, onPlansLoaded, className, loadingClassName, errorClassName, renderPlan, }: StripePlanSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripePlanSelector({ plans, selectedPlanId, onSelectPlan, loading, error, className, loadingClassName, errorClassName, renderPlan, }: StripePlanSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/shared/StripePlanSelector.js

@@ -1,74 +1,33 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { getDefaultPlanId, getPaywallPlans, getFallbackPlans, } from '../../services/stripe.service';
-import { isPreviewFrameRuntime } from '@funnelsgrove/runtime';
-export function StripePlanSelector({ planCatalog, runtimeMode, selectedPlanId, onSelectPlan, onPlansLoaded, className, loadingClassName, errorClassName, renderPlan, }) {
-    const [plans, setPlans] = useState(() => getFallbackPlans(planCatalog));
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
+import { useEffect, useMemo } from 'react';
+import { findPaywallPlan, getDefaultPlanSelectionValue, } from '../../services/stripe.service.js';
+export function StripePlanSelector({ plans, selectedPlanId, onSelectPlan, loading = false, error = null, className, loadingClassName, errorClassName, renderPlan, }) {
+    const safePlans = useMemo(() => {
+        return Array.isArray(plans) ? plans : [];
+    }, [plans]);
     useEffect(() => {
-        let isActive = true;
-        const load = async () => {
-            setLoading(true);
-            setError(null);
-            if (isPreviewFrameRuntime()) {
-                const fallbackPlans = getFallbackPlans(planCatalog);
-                setPlans(fallbackPlans);
-                onPlansLoaded === null || onPlansLoaded === void 0 ? void 0 : onPlansLoaded(fallbackPlans);
-                setLoading(false);
-                return;
-            }
-            try {
-                const nextPlans = await getPaywallPlans(runtimeMode, planCatalog);
-                if (!isActive) {
-                    return;
-                }
-                setPlans(nextPlans);
-                onPlansLoaded === null || onPlansLoaded === void 0 ? void 0 : onPlansLoaded(nextPlans);
-            }
-            catch (nextError) {
-                if (!isActive) {
-                    return;
-                }
-                const fallbackPlans = getFallbackPlans(planCatalog);
-                setPlans(fallbackPlans);
-                onPlansLoaded === null || onPlansLoaded === void 0 ? void 0 : onPlansLoaded(fallbackPlans);
-                setError(nextError instanceof Error ? nextError.message : 'Unable to load plans');
-            }
-            finally {
-                if (isActive) {
-                    setLoading(false);
-                }
-            }
-        };
-        void load();
-        return () => {
-            isActive = false;
-        };
-    }, [onPlansLoaded, planCatalog, runtimeMode]);
-    useEffect(() => {
-        if (plans.length === 0) {
+        if (safePlans.length === 0) {
             return;
         }
-        if (selectedPlanId && plans.some((plan) => plan.id === selectedPlanId)) {
+        if (findPaywallPlan(safePlans, selectedPlanId)) {
             return;
         }
-        const defaultPlanId = getDefaultPlanId(plans);
-        if (defaultPlanId) {
-            onSelectPlan(defaultPlanId);
+        const defaultPlanSelectionValue = getDefaultPlanSelectionValue(safePlans);
+        if (defaultPlanSelectionValue) {
+            onSelectPlan(defaultPlanSelectionValue);
         }
-    }, [onSelectPlan, plans, selectedPlanId]);
+    }, [onSelectPlan, safePlans, selectedPlanId]);
     const renderedPlans = useMemo(() => {
-        return plans.map((plan, index) => {
-            const isSelected = selectedPlanId === plan.id;
+        return safePlans.map((plan, index) => {
+            const isSelected = findPaywallPlan([plan], selectedPlanId) !== null;
             return renderPlan({
                 plan,
                 index,
                 isSelected,
-                onSelect: () => onSelectPlan(plan.id),
+                onSelect: () => { var _a; return onSelectPlan(((_a = plan.providerPlanId) === null || _a === void 0 ? void 0 : _a.trim()) || plan.id); },
             });
         });
-    }, [onSelectPlan, plans, renderPlan, selectedPlanId]);
+    }, [onSelectPlan, renderPlan, safePlans, selectedPlanId]);
     return (_jsxs(_Fragment, { children: [loading ? _jsx("p", { className: loadingClassName, children: "Loading plans..." }) : null, error ? _jsx("p", { className: errorClassName, children: error }) : null, _jsx("div", { className: className, children: renderedPlans })] }));
 }

package/dist/components/shared/walletPlatform.d.ts

@@ -0,0 +1,11 @@
+export type WalletPlatform = 'android' | 'ios' | 'web';
+export type PlatformWalletPaymentMethod = 'applePay' | 'googlePay';
+type WalletPlatformInput = {
+    maxTouchPoints?: number;
+    userAgent?: string | null;
+};
+export declare function resolveWalletPlatform({ maxTouchPoints, userAgent, }: WalletPlatformInput): WalletPlatform;
+export declare function getPlatformWalletPaymentMethods(platform: WalletPlatform): readonly PlatformWalletPaymentMethod[];
+export declare function getStripeWalletPaymentMethodOrder(walletPaymentMethods: readonly PlatformWalletPaymentMethod[]): string[];
+export declare function usePlatformWalletPaymentMethods(): readonly PlatformWalletPaymentMethod[];
+export {};

package/dist/components/shared/walletPlatform.js

@@ -0,0 +1,39 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+export function resolveWalletPlatform({ maxTouchPoints = 0, userAgent, }) {
+    var _a;
+    const normalizedUserAgent = (_a = userAgent === null || userAgent === void 0 ? void 0 : userAgent.toLowerCase()) !== null && _a !== void 0 ? _a : '';
+    if (normalizedUserAgent.includes('android')) {
+        return 'android';
+    }
+    if (/iphone|ipad|ipod/.test(normalizedUserAgent) ||
+        (normalizedUserAgent.includes('macintosh') && maxTouchPoints > 1)) {
+        return 'ios';
+    }
+    return 'web';
+}
+export function getPlatformWalletPaymentMethods(platform) {
+    if (platform === 'android') {
+        return ['googlePay'];
+    }
+    if (platform === 'ios') {
+        return ['applePay'];
+    }
+    return ['applePay', 'googlePay'];
+}
+export function getStripeWalletPaymentMethodOrder(walletPaymentMethods) {
+    return walletPaymentMethods.map((method) => method === 'applePay' ? 'apple_pay' : 'google_pay');
+}
+function getCurrentWalletPlatform() {
+    if (typeof window === 'undefined') {
+        return 'web';
+    }
+    return resolveWalletPlatform({
+        maxTouchPoints: window.navigator.maxTouchPoints,
+        userAgent: window.navigator.userAgent,
+    });
+}
+export function usePlatformWalletPaymentMethods() {
+    const walletPlatform = useSyncExternalStore(() => () => undefined, getCurrentWalletPlatform, () => 'web');
+    return getPlatformWalletPaymentMethods(walletPlatform);
+}

package/dist/config/billing.config.d.ts

@@ -4,25 +4,62 @@ export type BillingPlanComparison = {
     perMonth: string;
     perYear: string;
 };
-export type BillingFallbackPlanConfig = {
-    id: string;
+export type BillingPlanInterval = 'day' | 'week' | 'month' | 'year';
+export type BillingPlanConfig = {
+    projectPlanId: string;
     title: string;
     description?: string;
     providerPlanId?: string;
     priceLabel: string;
-    oldPriceLabel?: string;
     featuredTag?: string;
     perDayAmount: string;
-    perDayLabel: string;
     amountCents: number;
+    checkoutSummaryLabel?: string;
+};
+export type BillingFallbackPlanConfig = BillingPlanConfig & {
+    id?: string;
+    oldPriceLabel?: string;
+    perDayLabel?: string;
     comparison?: BillingPlanComparison;
     checkoutOriginalAmountCents?: number;
-    checkoutSummaryLabel?: string;
+    billingInterval?: BillingPlanInterval;
+    billingIntervalCount?: number;
+    isDefault?: boolean;
 };
 export type BillingPlanCatalog = Record<string, BillingFallbackPlanConfig>;
+export type BillingPlanMappingConfig = {
+    projectPlanId: string;
+};
+export type BillingPlanMappingCatalog = Record<string, BillingPlanMappingConfig>;
+export type BillingPlanInputCatalog = BillingPlanCatalog | BillingPlanMappingCatalog;
+export type BillingFirstDiscountConfig = {
+    stage: 'first';
+    couponId: string;
+    discountPercent: number;
+    durationSeconds: number;
+    previousDiscountPercent?: null;
+};
+export type BillingSecondDiscountConfig = {
+    stage: 'second';
+    couponId: string;
+    discountPercent: number;
+    durationSeconds: number;
+    previousDiscountPercent: number;
+};
+export type BillingDiscountCatalog = {
+    first: BillingFirstDiscountConfig;
+    second: BillingSecondDiscountConfig;
+};
+export type BillingDiscountConfig = BillingFirstDiscountConfig | BillingSecondDiscountConfig;
+export type BillingDiscountList = readonly BillingDiscountConfig[];
+export type BillingConfig = {
+    plans: BillingPlanCatalog;
+    discounts?: BillingDiscountCatalog | BillingDiscountList;
+};
 export declare const billing: {
     readonly plans: {
-        firstPlan: {
+        primary: {
+            projectPlanId: string;
             id: string;
             title: string;
             providerPlanId: string;
@@ -31,14 +68,17 @@ export declare const billing: {
             perDayAmount: string;
             perDayLabel: string;
             amountCents: number;
+            billingInterval: "month";
             comparison: {
                 perDay: string;
                 perWeek: string;
                 perMonth: string;
                 perYear: string;
             };
+            isDefault: true;
         };
-        secondPlan: {
+        secondary: {
+            projectPlanId: string;
             id: string;
             title: string;
             providerPlanId: string;
@@ -47,6 +87,7 @@ export declare const billing: {
             perDayAmount: string;
             perDayLabel: string;
             amountCents: number;
+            billingInterval: "year";
             comparison: {
                 perDay: string;
                 perWeek: string;
@@ -57,7 +98,8 @@ export declare const billing: {
     };
 };
 export declare const billingPlans: {
-    firstPlan: {
+    primary: {
+        projectPlanId: string;
         id: string;
         title: string;
         providerPlanId: string;
@@ -66,14 +108,17 @@ export declare const billingPlans: {
         perDayAmount: string;
         perDayLabel: string;
         amountCents: number;
+        billingInterval: "month";
         comparison: {
             perDay: string;
             perWeek: string;
             perMonth: string;
             perYear: string;
         };
+        isDefault: true;
     };
-    secondPlan: {
+    secondary: {
+        projectPlanId: string;
         id: string;
         title: string;
         providerPlanId: string;
@@ -82,6 +127,7 @@ export declare const billingPlans: {
         perDayAmount: string;
         perDayLabel: string;
         amountCents: number;
+        billingInterval: "year";
         comparison: {
             perDay: string;
             perWeek: string;
@@ -91,6 +137,7 @@ export declare const billingPlans: {
     };
 };
 export declare const billingPlanList: ({
+    projectPlanId: string;
     id: string;
     title: string;
     providerPlanId: string;
@@ -99,13 +146,16 @@ export declare const billingPlanList: ({
     perDayAmount: string;
     perDayLabel: string;
     amountCents: number;
+    billingInterval: "month";
     comparison: {
         perDay: string;
         perWeek: string;
         perMonth: string;
         perYear: string;
     };
+    isDefault: true;
 } | {
+    projectPlanId: string;
     id: string;
     title: string;
     providerPlanId: string;
@@ -114,6 +164,7 @@ export declare const billingPlanList: ({
     perDayAmount: string;
     perDayLabel: string;
     amountCents: number;
+    billingInterval: "year";
     comparison: {
         perDay: string;
         perWeek: string;

package/dist/config/billing.config.js

@@ -1,6 +1,7 @@
 export const billing = {
     plans: {
-        firstPlan: {
+        primary: {
+            projectPlanId: 'price_monthly',
             id: 'monthly',
             title: '1-Month Plan',
             providerPlanId: 'price_monthly',
@@ -9,14 +10,17 @@ export const billing = {
             perDayAmount: '$0.99',
             perDayLabel: 'per day',
             amountCents: 2995,
+            billingInterval: 'month',
             comparison: {
                 perDay: '$0.99/day',
                 perWeek: '$6.99/week',
                 perMonth: '$29.95/month',
                 perYear: '$363.34/year',
             },
+            isDefault: true,
         },
-        secondPlan: {
+        secondary: {
+            projectPlanId: 'price_yearly',
             id: 'yearly',
             title: '1-Year Plan',
             providerPlanId: 'price_yearly',
@@ -25,6 +29,7 @@ export const billing = {
             perDayAmount: '$0.53',
             perDayLabel: 'per day',
             amountCents: 19140,
+            billingInterval: 'year',
             comparison: {
                 perDay: '$0.53/day',
                 perWeek: '$3.67/week',

package/dist/hooks/useResolvedPaywallPlans.d.ts

@@ -0,0 +1,15 @@
+import { type RuntimeMode } from '@funnelsgrove/runtime';
+import type { BillingFallbackPlanConfig, BillingPlanInputCatalog } from '../config/billing.config.js';
+import { type PaywallPlan, type PaywallPlanResolutionOptions } from '../services/stripe.service.js';
+type UseResolvedPaywallPlansInput = {
+    runtimeMode: RuntimeMode;
+    planCatalog?: BillingPlanInputCatalog | readonly BillingFallbackPlanConfig[];
+    resolutionOptions?: PaywallPlanResolutionOptions;
+    previewPlans?: readonly PaywallPlan[] | null;
+};
+export declare const useResolvedPaywallPlans: ({ runtimeMode, planCatalog, resolutionOptions, previewPlans, }: UseResolvedPaywallPlansInput) => {
+    plans: readonly PaywallPlan[];
+    loading: boolean;
+    error: string | null;
+};
+export {};

package/dist/hooks/useResolvedPaywallPlans.js

@@ -0,0 +1,68 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { isPreviewFrameRuntime } from '@funnelsgrove/runtime';
+import { getFallbackPlans, getPaywallPlans, } from '../services/stripe.service.js';
+import { isBillingPlanMappingCatalog } from '../services/planCatalog.service.js';
+export const useResolvedPaywallPlans = ({ runtimeMode, planCatalog, resolutionOptions, previewPlans, }) => {
+    const fallbackPlans = useMemo(() => getFallbackPlans(planCatalog, resolutionOptions), [planCatalog, resolutionOptions]);
+    const isMappingCatalog = Boolean(planCatalog) && !Array.isArray(planCatalog) && isBillingPlanMappingCatalog(planCatalog);
+    const shouldLoadRemotePlans = !planCatalog || isMappingCatalog;
+    const [plans, setPlans] = useState(() => (previewPlans === null || previewPlans === void 0 ? void 0 : previewPlans.length) ? previewPlans : fallbackPlans);
+    const [loading, setLoading] = useState(shouldLoadRemotePlans);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (previewPlans === null || previewPlans === void 0 ? void 0 : previewPlans.length) {
+            setPlans(previewPlans);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        if (!shouldLoadRemotePlans || (isPreviewFrameRuntime() && !isMappingCatalog)) {
+            setPlans(fallbackPlans);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        let isActive = true;
+        const load = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const nextPlans = await getPaywallPlans(runtimeMode, planCatalog, resolutionOptions);
+                if (!isActive) {
+                    return;
+                }
+                setPlans(nextPlans);
+            }
+            catch (nextError) {
+                if (!isActive) {
+                    return;
+                }
+                setPlans(fallbackPlans);
+                setError(nextError instanceof Error ? nextError.message : 'Unable to load plans');
+            }
+            finally {
+                if (isActive) {
+                    setLoading(false);
+                }
+            }
+        };
+        void load();
+        return () => {
+            isActive = false;
+        };
+    }, [
+        fallbackPlans,
+        isMappingCatalog,
+        planCatalog,
+        previewPlans,
+        resolutionOptions,
+        runtimeMode,
+        shouldLoadRemotePlans,
+    ]);
+    return {
+        plans,
+        loading,
+        error,
+    };
+};