@powerhousedao/contributor-billing 0.1.42 → 0.1.43

package/dist/editors/service-offering-editor/components/TierDefinition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TierDefinition.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TierDefinition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAGtB,MAAM,qEAAqE,CAAC;AAQ7E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAi7BD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA+RzE"}
+{"version":3,"file":"TierDefinition.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TierDefinition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAGtB,MAAM,qEAAqE,CAAC;AAU7E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAs+BD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA+RzE"}

package/dist/editors/service-offering-editor/components/TierDefinition.js

@@ -1,21 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { generateId } from "document-model/core";
-import { addTier, updateTier, updateTierPricing, deleteTier, } from "../../../document-models/service-offering/gen/creators.js";
-// Calculate price per day for mental accounting display
-const BILLING_CYCLE_DAYS = {
-    MONTHLY: 30,
-    QUARTERLY: 90,
-    SEMI_ANNUAL: 180,
-    ANNUAL: 365,
+import { addTier, updateTier, deleteTier, addTierPricingOption, updateTierPricingOption, removeTierPricingOption, } from "../../../document-models/service-offering/gen/creators.js";
+// Calculate price per month for mental accounting display
+const BILLING_CYCLE_MONTHS = {
+    MONTHLY: 1,
+    QUARTERLY: 3,
+    SEMI_ANNUAL: 6,
+    ANNUAL: 12,
     ONE_TIME: 1,
 };
-function getPricePerDay(amount, billingCycle) {
-    if (billingCycle === "ONE_TIME")
-        return "";
-    const perDay = amount / BILLING_CYCLE_DAYS[billingCycle];
-    return perDay.toFixed(2);
-}
 // Determine which tier should show "Most Popular" badge
 // Uses middle-tier heuristic (Good-Better-Best psychology)
 function getRecommendedTierIndex(tiers) {
@@ -26,33 +20,6 @@ function getRecommendedTierIndex(tiers) {
     // For 3+ tiers, recommend the middle tier (or middle-right for even counts)
     return Math.floor(tiers.length / 2);
 }
-// Charm Pricing - Left-digit bias pricing suggestions
-// Convert any price to nearest charm prices (ending in .99 or .97)
-function getCharmPriceSuggestions(currentPrice) {
-    if (currentPrice <= 0)
-        return [9.99, 19.99, 29.99];
-    const suggestions = [];
-    const roundedDown = Math.floor(currentPrice);
-    const roundedUp = Math.ceil(currentPrice);
-    // Lower charm price (X9.99 below current)
-    const lowerCharm = Math.max(0, roundedDown - (roundedDown % 10) - 1) + 9.99;
-    if (lowerCharm > 0 && lowerCharm !== currentPrice) {
-        suggestions.push(lowerCharm);
-    }
-    // Nearest .99 at current level
-    const nearestCharm = roundedUp - 0.01;
-    if (nearestCharm > 0 &&
-        nearestCharm !== currentPrice &&
-        !suggestions.includes(nearestCharm)) {
-        suggestions.push(nearestCharm);
-    }
-    // Higher charm price (X9.99 above current)
-    const higherCharm = roundedUp + (10 - (roundedUp % 10)) - 0.01;
-    if (higherCharm !== currentPrice && !suggestions.includes(higherCharm)) {
-        suggestions.push(higherCharm);
-    }
-    return suggestions.slice(0, 3).sort((a, b) => a - b);
-}
 const BILLING_CYCLES = [
     { value: "MONTHLY", label: "Month" },
     { value: "QUARTERLY", label: "Quarter" },
@@ -351,6 +318,8 @@ const tierStyles = `
     margin-bottom: 1rem;
   }
 
+
+  /* Pricing Box with Dropdown */
   .tier-card__pricing-box {
     display: flex;
     align-items: center;
@@ -388,8 +357,17 @@ const tierStyles = `
     font-size: 1rem;
   }
 
-  .tier-card__cycle-select {
+  /* Dropdown with checkboxes */
+  .tier-card__cycle-dropdown {
+    position: relative;
     flex: 1;
+  }
+
+  .tier-card__cycle-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
     font-family: var(--so-font-sans);
     font-size: 0.875rem;
     color: var(--so-slate-600);
@@ -397,105 +375,187 @@ const tierStyles = `
     border: none;
     cursor: pointer;
     outline: none;
-    appearance: none;
-    padding-right: 1.25rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 0 center;
-    background-size: 1rem;
+    padding: 0.25rem 0;
+    text-align: left;
   }
 
-  /* Price Per Day Breakdown - Mental Accounting */
-  .tier-card__price-breakdown {
-    margin-top: 0.625rem;
-    padding-top: 0.625rem;
-    border-top: 1px dashed var(--so-slate-200);
+  .tier-card__cycle-dropdown-trigger svg {
+    width: 1rem;
+    height: 1rem;
+    color: var(--so-slate-400);
+    transition: transform 0.15s ease;
+  }
+
+  .tier-card__cycle-dropdown-trigger--open svg {
+    transform: rotate(180deg);
+  }
+
+  .tier-card__cycle-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: -1rem;
+    right: -1rem;
+    background: var(--so-white);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    box-shadow: var(--so-shadow-lg);
+    z-index: 50;
+    padding: 0.5rem;
+    animation: dropdown-fade-in 0.15s ease-out;
+  }
+
+  @keyframes dropdown-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .tier-card__cycle-dropdown-item {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: 0.625rem;
+    padding: 0.5rem 0.625rem;
+    border-radius: var(--so-radius-sm);
+    cursor: pointer;
+    transition: background 0.1s ease;
+  }
+
+  .tier-card__cycle-dropdown-item:hover {
+    background: var(--so-slate-50);
+  }
+
+  .tier-card__cycle-dropdown-item--active {
+    background: var(--so-violet-50);
+  }
+
+  .tier-card__cycle-checkbox {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--so-violet-600);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .tier-card__cycle-name {
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--so-slate-700);
+    flex: 1;
   }
 
-  .tier-card__per-day {
+  .tier-card__cycle-price-inline {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: 0.25rem;
   }
 
-  .tier-card__per-day-amount {
+  .tier-card__cycle-currency-small {
     font-family: var(--so-font-mono);
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--so-emerald-600);
+    font-size: 0.75rem;
+    color: var(--so-slate-400);
   }
 
-  .tier-card__per-day-label {
-    font-size: 0.6875rem;
-    color: var(--so-slate-500);
+  .tier-card__cycle-price-input {
+    width: 4rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--so-slate-800);
+    background: var(--so-white);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    padding: 0.25rem 0.5rem;
+    outline: none;
+    transition: border-color 0.15s ease;
   }
 
-  .tier-card__comparison {
-    font-size: 0.625rem;
+  .tier-card__cycle-price-input:focus {
+    border-color: var(--so-violet-400);
+  }
+
+  .tier-card__cycle-price-input:disabled {
+    background: var(--so-slate-100);
     color: var(--so-slate-400);
-    font-style: italic;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
+    cursor: not-allowed;
+  }
+
+  .tier-card__cycle-default-badge {
+    font-family: var(--so-font-mono);
+    font-size: 0.5625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--so-violet-600);
+    background: var(--so-violet-100);
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--so-radius-sm);
   }
 
-  /* Charm Pricing Suggestions */
-  .tier-card__charm-pricing {
+  /* Price Per Month - Mental Accounting */
+  .tier-card__price-breakdown {
     margin-top: 0.625rem;
     padding-top: 0.625rem;
     border-top: 1px dashed var(--so-slate-200);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
-  .tier-card__charm-label {
+  .tier-card__per-month {
     display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-size: 0.625rem;
-    font-weight: 500;
-    color: var(--so-violet-600);
-    margin-bottom: 0.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+    align-items: baseline;
+    gap: 0.25rem;
   }
 
-  .tier-card__charm-label svg {
-    width: 0.75rem;
-    height: 0.75rem;
+  .tier-card__per-month-amount {
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--so-emerald-600);
   }
 
-  .tier-card__charm-options {
+  .tier-card__per-month-label {
+    font-size: 0.6875rem;
+    color: var(--so-slate-500);
+  }
+
+  /* Active cycles summary */
+  .tier-card__cycles-summary {
+    margin-top: 0.5rem;
     display: flex;
+    flex-wrap: wrap;
     gap: 0.375rem;
   }
 
-  .tier-card__charm-btn {
-    padding: 0.25rem 0.625rem;
+  .tier-card__cycle-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
     font-family: var(--so-font-mono);
-    font-size: 0.75rem;
+    font-size: 0.625rem;
     font-weight: 500;
-    color: var(--so-slate-600);
+    padding: 0.25rem 0.5rem;
     background: var(--so-slate-100);
-    border: 1px solid var(--so-slate-200);
+    color: var(--so-slate-600);
     border-radius: var(--so-radius-sm);
-    cursor: pointer;
-    transition: all var(--so-transition-fast);
   }
 
-  .tier-card__charm-btn:hover {
-    background: var(--so-violet-50);
-    border-color: var(--so-violet-300);
+  .tier-card__cycle-tag--default {
+    background: var(--so-violet-100);
     color: var(--so-violet-700);
   }
 
-  .tier-card__charm-btn--active {
-    background: var(--so-violet-100);
-    border-color: var(--so-violet-400);
-    color: var(--so-violet-700);
+  .tier-card__cycle-tag-price {
+    color: var(--so-slate-500);
   }
 
+
   /* Description */
   .tier-card__description {
     margin-top: 1rem;
@@ -1003,10 +1063,47 @@ export function TierDefinition({ document, dispatch }) {
 }
 function TierCard({ tier, accent, dispatch, onDelete, isRecommended, }) {
     const [localName, setLocalName] = useState(tier.name);
-    const [localAmount, setLocalAmount] = useState(tier.pricing.amount?.toString() || "");
-    const [localBillingCycle, setLocalBillingCycle] = useState(tier.pricing.billingCycle);
     const [localDescription, setLocalDescription] = useState(tier.description || "");
+    const [dropdownOpen, setDropdownOpen] = useState(false);
     const isCustomPricing = tier.isCustomPricing ?? false;
+    // Track local prices for each billing cycle
+    const [cyclePrices, setCyclePrices] = useState(() => {
+        const prices = {
+            MONTHLY: "",
+            QUARTERLY: "",
+            SEMI_ANNUAL: "",
+            ANNUAL: "",
+            ONE_TIME: "",
+        };
+        // Initialize from existing pricing options
+        (tier.pricingOptions ?? []).forEach((opt) => {
+            prices[opt.billingCycle] = opt.amount?.toString() ?? "";
+        });
+        return prices;
+    });
+    // Update local state when tier.pricingOptions changes
+    useEffect(() => {
+        setCyclePrices((prev) => {
+            const prices = { ...prev };
+            (tier.pricingOptions ?? []).forEach((opt) => {
+                prices[opt.billingCycle] = opt.amount?.toString() ?? "";
+            });
+            // Clear prices for cycles that are no longer in pricingOptions
+            const activeCyclesSet = new Set((tier.pricingOptions ?? []).map((opt) => opt.billingCycle));
+            BILLING_CYCLES.forEach((cycle) => {
+                if (!activeCyclesSet.has(cycle.value)) {
+                    prices[cycle.value] = "";
+                }
+            });
+            return prices;
+        });
+    }, [tier.pricingOptions]);
+    // Get the set of active billing cycles from pricingOptions
+    const activeCycles = new Set((tier.pricingOptions ?? []).map((opt) => opt.billingCycle));
+    // Get default option
+    const defaultOption = (tier.pricingOptions ?? []).find((opt) => opt.isDefault);
+    const defaultCycle = defaultOption?.billingCycle ?? "MONTHLY";
+    const defaultAmount = defaultOption?.amount ?? 0;
     const handleNameBlur = () => {
         if (localName !== tier.name && localName.trim()) {
             dispatch(updateTier({
@@ -1025,31 +1122,119 @@ function TierCard({ tier, accent, dispatch, onDelete, isRecommended, }) {
             }));
         }
     };
-    const handlePricingChange = (amount, billingCycle) => {
-        const newAmount = amount !== undefined
-            ? amount
-                ? parseFloat(amount)
-                : null
-            : tier.pricing.amount;
-        const newCycle = billingCycle || tier.pricing.billingCycle;
-        if (!isCustomPricing && (newAmount === null || isNaN(newAmount)))
+    // Toggle a billing cycle on/off
+    const handleCycleToggle = (cycle, checked) => {
+        const now = new Date().toISOString();
+        if (checked) {
+            // Add this billing cycle
+            const isFirst = (tier.pricingOptions ?? []).length === 0;
+            dispatch(addTierPricingOption({
+                tierId: tier.id,
+                pricingOptionId: generateId(),
+                billingCycle: cycle,
+                amount: 0,
+                currency: "USD",
+                isDefault: isFirst,
+                lastModified: now,
+            }));
+        }
+        else {
+            // Remove this billing cycle
+            const option = (tier.pricingOptions ?? []).find((opt) => opt.billingCycle === cycle);
+            if (option) {
+                // Don't allow removing if it's the only one
+                if ((tier.pricingOptions ?? []).length <= 1) {
+                    return;
+                }
+                dispatch(removeTierPricingOption({
+                    tierId: tier.id,
+                    pricingOptionId: option.id,
+                    lastModified: now,
+                }));
+            }
+        }
+    };
+    // Update the price for a billing cycle
+    const handleCyclePriceChange = (cycle, value) => {
+        setCyclePrices((prev) => ({ ...prev, [cycle]: value }));
+    };
+    const handleCyclePriceBlur = (cycle) => {
+        const option = (tier.pricingOptions ?? []).find((opt) => opt.billingCycle === cycle);
+        if (!option)
             return;
-        dispatch(updateTierPricing({
+        const amount = parseFloat(cyclePrices[cycle]);
+        if (!isNaN(amount) && amount !== option.amount) {
+            dispatch(updateTierPricingOption({
+                tierId: tier.id,
+                pricingOptionId: option.id,
+                amount,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+    };
+    // Set a billing cycle as default (clicking it in the dropdown)
+    const handleSetDefault = (cycle) => {
+        const option = (tier.pricingOptions ?? []).find((opt) => opt.billingCycle === cycle);
+        if (!option || option.isDefault)
+            return;
+        dispatch(updateTierPricingOption({
             tierId: tier.id,
-            amount: newAmount,
-            billingCycle: newCycle,
+            pricingOptionId: option.id,
+            isDefault: true,
             lastModified: new Date().toISOString(),
         }));
     };
-    return (_jsxs("div", { className: `tier-card ${isRecommended ? "tier-card--popular" : ""}`, children: [isRecommended && (_jsxs("div", { className: "tier-card__popular-banner", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Most Popular"] })), _jsx("div", { className: "tier-card__accent", style: { background: accent.color } }), _jsxs("div", { className: "tier-card__body", children: [_jsxs("div", { className: "tier-card__header", children: [_jsxs("div", { className: "tier-card__name-group", children: [_jsx("span", { className: "tier-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: localName, onChange: (e) => setLocalName(e.target.value), onBlur: handleNameBlur, className: "tier-card__name-input" })] }), _jsx("button", { onClick: onDelete, className: "tier-card__delete-btn", children: _jsx("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), isCustomPricing && (_jsxs("div", { className: "tier-card__custom-badge", children: [_jsx("svg", { className: "tier-card__custom-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "tier-card__custom-text", children: [_jsx("span", { className: "tier-card__custom-title", children: "Custom Pricing" }), _jsx("span", { className: "tier-card__custom-desc", children: "Price varies per client" })] })] })), !isCustomPricing && (_jsxs("div", { className: "tier-card__pricing", children: [_jsx("span", { className: "tier-card__label", children: "Recurring Price" }), _jsxs("div", { className: "tier-card__pricing-box", children: [_jsx("span", { className: "tier-card__currency", children: "$" }), _jsx("input", { type: "number", value: localAmount, onChange: (e) => setLocalAmount(e.target.value), onBlur: () => handlePricingChange(localAmount), className: "tier-card__amount-input", step: "0.01" }), _jsx("span", { className: "tier-card__divider", children: "/" }), _jsx("select", { value: localBillingCycle, onChange: (e) => {
-                                            const newCycle = e.target.value;
-                                            setLocalBillingCycle(newCycle);
-                                            handlePricingChange(undefined, newCycle);
-                                        }, className: "tier-card__cycle-select", children: BILLING_CYCLES.map((cycle) => (_jsx("option", { value: cycle.value, children: cycle.label }, cycle.value))) })] }), localAmount &&
-                                parseFloat(localAmount) > 0 &&
-                                localBillingCycle !== "ONE_TIME" && (_jsxs("div", { className: "tier-card__price-breakdown", children: [_jsxs("div", { className: "tier-card__per-day", children: [_jsxs("span", { className: "tier-card__per-day-amount", children: ["$", getPricePerDay(parseFloat(localAmount), localBillingCycle)] }), _jsx("span", { className: "tier-card__per-day-label", children: "/day" })] }), parseFloat(localAmount) > 0 &&
-                                        parseFloat(getPricePerDay(parseFloat(localAmount), localBillingCycle)) < 10 && (_jsx("span", { className: "tier-card__comparison", children: "Less than a coffee" }))] })), localAmount && parseFloat(localAmount) > 0 && (_jsxs("div", { className: "tier-card__charm-pricing", children: [_jsxs("span", { className: "tier-card__charm-label", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Charm prices:"] }), _jsx("div", { className: "tier-card__charm-options", children: getCharmPriceSuggestions(parseFloat(localAmount)).map((price) => (_jsxs("button", { type: "button", onClick: () => {
-                                                setLocalAmount(price.toFixed(2));
-                                                handlePricingChange(price.toFixed(2));
-                                            }, className: `tier-card__charm-btn ${parseFloat(localAmount) === price ? "tier-card__charm-btn--active" : ""}`, children: ["$", price.toFixed(2).replace(/\.00$/, "")] }, price))) })] }))] })), _jsxs("div", { className: "tier-card__description", children: [_jsx("span", { className: "tier-card__label", children: "Description" }), _jsx("textarea", { value: localDescription, onChange: (e) => setLocalDescription(e.target.value), onBlur: handleDescriptionBlur, placeholder: "Add a description...", rows: 2, className: "tier-card__desc-textarea" })] })] }), _jsxs("div", { className: "tier-card__footer", children: [_jsx("svg", { className: "tier-card__footer-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { className: "tier-card__footer-text", children: "Configure service levels in the Matrix view" })] })] }));
+    // Helper to get monthly equivalent
+    const getMonthlyEquivalent = (amount, cycle) => {
+        if (cycle === "ONE_TIME" || cycle === "MONTHLY" || amount <= 0)
+            return "";
+        const months = BILLING_CYCLE_MONTHS[cycle];
+        const monthly = amount / months;
+        return `$${monthly.toFixed(2)}`;
+    };
+    // Get the label for the currently selected default cycle
+    const getDefaultCycleLabel = () => {
+        const cycleInfo = BILLING_CYCLES.find((c) => c.value === defaultCycle);
+        return cycleInfo?.label ?? "Month";
+    };
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!target.closest(".tier-card__cycle-dropdown")) {
+                setDropdownOpen(false);
+            }
+        };
+        if (dropdownOpen) {
+            document.addEventListener("click", handleClickOutside);
+        }
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [dropdownOpen]);
+    return (_jsxs("div", { className: `tier-card ${isRecommended ? "tier-card--popular" : ""}`, children: [isRecommended && (_jsxs("div", { className: "tier-card__popular-banner", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Most Popular"] })), _jsx("div", { className: "tier-card__accent", style: { background: accent.color } }), _jsxs("div", { className: "tier-card__body", children: [_jsxs("div", { className: "tier-card__header", children: [_jsxs("div", { className: "tier-card__name-group", children: [_jsx("span", { className: "tier-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: localName, onChange: (e) => setLocalName(e.target.value), onBlur: handleNameBlur, className: "tier-card__name-input" })] }), _jsx("button", { onClick: onDelete, className: "tier-card__delete-btn", children: _jsx("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), isCustomPricing && (_jsxs("div", { className: "tier-card__custom-badge", children: [_jsx("svg", { className: "tier-card__custom-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "tier-card__custom-text", children: [_jsx("span", { className: "tier-card__custom-title", children: "Custom Pricing" }), _jsx("span", { className: "tier-card__custom-desc", children: "Price varies per client" })] })] })), !isCustomPricing && (_jsxs("div", { className: "tier-card__pricing", children: [_jsx("span", { className: "tier-card__label", children: "Recurring Price" }), _jsxs("div", { className: "tier-card__pricing-box", children: [_jsx("span", { className: "tier-card__currency", children: "$" }), _jsx("input", { type: "number", value: cyclePrices[defaultCycle] || "", onChange: (e) => handleCyclePriceChange(defaultCycle, e.target.value), onBlur: () => handleCyclePriceBlur(defaultCycle), className: "tier-card__amount-input", placeholder: "0", step: "0.01" }), _jsx("span", { className: "tier-card__divider", children: "/" }), _jsxs("div", { className: "tier-card__cycle-dropdown", children: [_jsxs("button", { type: "button", onClick: () => setDropdownOpen(!dropdownOpen), className: `tier-card__cycle-dropdown-trigger ${dropdownOpen ? "tier-card__cycle-dropdown-trigger--open" : ""}`, children: [_jsx("span", { children: getDefaultCycleLabel() }), _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), dropdownOpen && (_jsx("div", { className: "tier-card__cycle-dropdown-menu", children: BILLING_CYCLES.filter((c) => c.value !== "ONE_TIME").map((cycle) => {
+                                                    const isActive = activeCycles.has(cycle.value);
+                                                    const option = (tier.pricingOptions ?? []).find((opt) => opt.billingCycle === cycle.value);
+                                                    const isDefault = option?.isDefault ?? false;
+                                                    const price = cyclePrices[cycle.value];
+                                                    return (_jsxs("div", { className: `tier-card__cycle-dropdown-item ${isActive ? "tier-card__cycle-dropdown-item--active" : ""}`, children: [_jsx("input", { type: "checkbox", checked: isActive, onChange: (e) => {
+                                                                    e.stopPropagation();
+                                                                    handleCycleToggle(cycle.value, e.target.checked);
+                                                                }, className: "tier-card__cycle-checkbox", disabled: isActive &&
+                                                                    (tier.pricingOptions ?? []).length <= 1 }), _jsx("span", { className: "tier-card__cycle-name", onClick: () => {
+                                                                    if (isActive && !isDefault) {
+                                                                        handleSetDefault(cycle.value);
+                                                                    }
+                                                                }, style: {
+                                                                    cursor: isActive && !isDefault
+                                                                        ? "pointer"
+                                                                        : "default",
+                                                                }, children: cycle.label }), isActive && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tier-card__cycle-price-inline", children: [_jsx("span", { className: "tier-card__cycle-currency-small", children: "$" }), _jsx("input", { type: "number", value: price, onChange: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    handleCyclePriceChange(cycle.value, e.target.value);
+                                                                                }, onBlur: () => handleCyclePriceBlur(cycle.value), placeholder: "0", step: "0.01", className: "tier-card__cycle-price-input", onClick: (e) => e.stopPropagation() })] }), isDefault && (_jsx("span", { className: "tier-card__cycle-default-badge", children: "Default" }))] }))] }, cycle.value));
+                                                }) }))] })] }), defaultAmount > 0 &&
+                                defaultCycle !== "ONE_TIME" &&
+                                defaultCycle !== "MONTHLY" && (_jsx("div", { className: "tier-card__price-breakdown", children: _jsxs("div", { className: "tier-card__per-month", children: [_jsx("span", { className: "tier-card__per-month-amount", children: getMonthlyEquivalent(defaultAmount, defaultCycle) }), _jsx("span", { className: "tier-card__per-month-label", children: "/month" })] }) })), activeCycles.size > 1 && (_jsx("div", { className: "tier-card__cycles-summary", children: (tier.pricingOptions ?? []).map((opt) => {
+                                    const cycleInfo = BILLING_CYCLES.find((c) => c.value === opt.billingCycle);
+                                    return (_jsxs("span", { className: `tier-card__cycle-tag ${opt.isDefault ? "tier-card__cycle-tag--default" : ""}`, children: [cycleInfo?.label, _jsxs("span", { className: "tier-card__cycle-tag-price", children: ["$", opt.amount] })] }, opt.id));
+                                }) }))] })), _jsxs("div", { className: "tier-card__description", children: [_jsx("span", { className: "tier-card__label", children: "Description" }), _jsx("textarea", { value: localDescription, onChange: (e) => setLocalDescription(e.target.value), onBlur: handleDescriptionBlur, placeholder: "Add a description...", rows: 2, className: "tier-card__desc-textarea" })] })] }), _jsxs("div", { className: "tier-card__footer", children: [_jsx("svg", { className: "tier-card__footer-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { className: "tier-card__footer-text", children: "Configure service levels in the Matrix view" })] })] }));
 }

package/dist/editors/service-offering-editor/components/TierPricingOptionsPanel.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { ServiceOfferingAction, TierPricingOption } from "@powerhousedao/contributor-billing/document-models/service-offering";
+interface TierPricingOptionsPanelProps {
+    tierId: string;
+    pricingOptions: TierPricingOption[];
+    dispatch: DocumentDispatch<ServiceOfferingAction>;
+    accentColor?: string;
+}
+export declare function TierPricingOptionsPanel({ tierId, pricingOptions, dispatch, }: TierPricingOptionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TierPricingOptionsPanel.d.ts.map

package/dist/editors/service-offering-editor/components/TierPricingOptionsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TierPricingOptionsPanel.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TierPricingOptionsPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,qBAAqB,EACrB,iBAAiB,EAElB,MAAM,qEAAqE,CAAC;AAY7E,UAAU,4BAA4B;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,iBAAiB,EAAE,CAAC;IACpC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmUD,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,cAAc,EACd,QAAQ,GACT,EAAE,4BAA4B,2CAuM9B"}