@powerhousedao/contributor-billing 0.1.41 → 0.1.43

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

@@ -1,7 +1,25 @@
 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";
+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,
+};
+// Determine which tier should show "Most Popular" badge
+// Uses middle-tier heuristic (Good-Better-Best psychology)
+function getRecommendedTierIndex(tiers) {
+    if (tiers.length < 2)
+        return -1;
+    if (tiers.length === 2)
+        return 1; // Second tier for 2-tier setup
+    // For 3+ tiers, recommend the middle tier (or middle-right for even counts)
+    return Math.floor(tiers.length / 2);
+}
 const BILLING_CYCLES = [
     { value: "MONTHLY", label: "Month" },
     { value: "QUARTERLY", label: "Quarter" },
@@ -20,6 +38,102 @@ const TIER_ACCENTS = [
     { color: "var(--so-sky-500)", bg: "var(--so-sky-50)", name: "sky" },
     { color: "var(--so-rose-500)", bg: "var(--so-rose-50)", name: "rose" },
 ];
+const TIER_PRESETS = [
+    {
+        name: "Standard 3-Tier",
+        description: "Basic → Professional → Enterprise",
+        icon: "📊",
+        tiers: [
+            {
+                name: "Basic",
+                amount: 99,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Professional",
+                amount: 299,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Enterprise",
+                amount: null,
+                billingCycle: "MONTHLY",
+                isCustomPricing: true,
+            },
+        ],
+    },
+    {
+        name: "Freemium Model",
+        description: "Free → Pro → Business",
+        icon: "🚀",
+        tiers: [
+            {
+                name: "Free",
+                amount: 0,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Pro",
+                amount: 49,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Business",
+                amount: 149,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+        ],
+    },
+    {
+        name: "Simple 2-Tier",
+        description: "Starter → Growth",
+        icon: "⚡",
+        tiers: [
+            {
+                name: "Starter",
+                amount: 79,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Growth",
+                amount: 199,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+        ],
+    },
+    {
+        name: "Annual Focus",
+        description: "Annual pricing with discounts",
+        icon: "📅",
+        tiers: [
+            {
+                name: "Essential",
+                amount: 990,
+                billingCycle: "ANNUAL",
+                isCustomPricing: false,
+            },
+            {
+                name: "Professional",
+                amount: 2990,
+                billingCycle: "ANNUAL",
+                isCustomPricing: false,
+            },
+            {
+                name: "Enterprise",
+                amount: null,
+                billingCycle: "ANNUAL",
+                isCustomPricing: true,
+            },
+        ],
+    },
+];
 const tierStyles = `
   .tier-def {
     display: flex;
@@ -42,6 +156,7 @@ const tierStyles = `
     overflow: hidden;
     transition: var(--so-transition-base);
     animation: tier-slide-up 0.3s ease-out;
+    position: relative;
   }
 
   .tier-card:hover {
@@ -49,6 +164,42 @@ const tierStyles = `
     transform: translateY(-2px);
   }
 
+  /* Popular/Recommended Tier - Social Proof */
+  .tier-card--popular {
+    border: 2px solid var(--so-violet-300);
+    transform: scale(1.02);
+    z-index: 1;
+  }
+
+  .tier-card--popular:hover {
+    transform: scale(1.02) translateY(-2px);
+  }
+
+  .tier-card__popular-banner {
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.875rem;
+    background: linear-gradient(135deg, var(--so-violet-600) 0%, var(--so-violet-700) 100%);
+    color: white;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+    z-index: 2;
+  }
+
+  .tier-card__popular-banner svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
   @keyframes tier-slide-up {
     from {
       opacity: 0;
@@ -167,6 +318,8 @@ const tierStyles = `
     margin-bottom: 1rem;
   }
 
+
+  /* Pricing Box with Dropdown */
   .tier-card__pricing-box {
     display: flex;
     align-items: center;
@@ -204,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);
@@ -213,14 +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;
+  }
+
+  .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;
+    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__cycle-price-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .tier-card__cycle-currency-small {
+    font-family: var(--so-font-mono);
+    font-size: 0.75rem;
+    color: var(--so-slate-400);
+  }
+
+  .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__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);
+    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);
+  }
+
+  /* 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__per-month {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+  }
+
+  .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__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__cycle-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.625rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    background: var(--so-slate-100);
+    color: var(--so-slate-600);
+    border-radius: var(--so-radius-sm);
+  }
+
+  .tier-card__cycle-tag--default {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
   }
 
+  .tier-card__cycle-tag-price {
+    color: var(--so-slate-500);
+  }
+
+
   /* Description */
   .tier-card__description {
     margin-top: 1rem;
@@ -506,6 +841,109 @@ const tierStyles = `
     background: var(--so-slate-200);
   }
 
+  /* Tier Presets - Quick Start Templates */
+  .tier-presets {
+    background: linear-gradient(135deg, var(--so-violet-50) 0%, var(--so-sky-50) 100%);
+    border-radius: var(--so-radius-lg);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--so-violet-100);
+  }
+
+  .tier-presets__header {
+    margin-bottom: 1.25rem;
+  }
+
+  .tier-presets__title {
+    font-family: var(--so-font-sans);
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--so-slate-800);
+    margin: 0 0 0.375rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .tier-presets__title::before {
+    content: '⚡';
+  }
+
+  .tier-presets__subtitle {
+    font-size: 0.875rem;
+    color: var(--so-slate-600);
+    margin: 0;
+  }
+
+  .tier-presets__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1rem;
+  }
+
+  .tier-preset-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.25rem;
+    background: white;
+    border: 2px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-align: left;
+  }
+
+  .tier-preset-card:hover {
+    border-color: var(--so-violet-400);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
+    transform: translateY(-2px);
+  }
+
+  .tier-preset-card__icon {
+    font-size: 1.5rem;
+  }
+
+  .tier-preset-card__content {
+    flex: 1;
+  }
+
+  .tier-preset-card__name {
+    font-family: var(--so-font-sans);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    margin: 0 0 0.25rem;
+  }
+
+  .tier-preset-card__desc {
+    font-size: 0.8125rem;
+    color: var(--so-slate-500);
+    margin: 0;
+  }
+
+  .tier-preset-card__preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--so-slate-100);
+  }
+
+  .tier-preset-card__tier {
+    font-family: var(--so-font-mono);
+    font-size: 0.6875rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--so-slate-100);
+    color: var(--so-slate-600);
+    border-radius: var(--so-radius-sm);
+  }
+
+  .tier-preset-card:hover .tier-preset-card__tier {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
+  }
+
   /* Info Notice */
   .tier-notice {
     display: flex;
@@ -585,8 +1023,26 @@ export function TierDefinition({ document, dispatch }) {
             lastModified: new Date().toISOString(),
         }));
     };
+    // Apply a preset tier configuration - Default Effect
+    const handleApplyPreset = (preset) => {
+        const now = new Date().toISOString();
+        preset.tiers.forEach((tierConfig) => {
+            dispatch(addTier({
+                id: generateId(),
+                name: tierConfig.name,
+                amount: tierConfig.isCustomPricing
+                    ? undefined
+                    : (tierConfig.amount ?? undefined),
+                currency: "USD",
+                billingCycle: tierConfig.billingCycle,
+                isCustomPricing: tierConfig.isCustomPricing,
+                lastModified: now,
+            }));
+        });
+    };
     const getTierAccent = (index) => TIER_ACCENTS[index % TIER_ACCENTS.length];
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: tierStyles }), _jsxs("div", { className: "tier-def", children: [_jsxs("div", { className: "tier-def__grid", children: [tiers.map((tier, index) => (_jsx(TierCard, { tier: tier, accent: getTierAccent(index), dispatch: dispatch, onDelete: () => handleDeleteTier(tier.id) }, tier.id))), isAddingTier ? (_jsxs("div", { className: "tier-form-card", children: [_jsx("h3", { className: "tier-form-card__title", children: "New Subscription Tier" }), _jsxs("div", { className: "tier-form-card__field", children: [_jsx("label", { className: "tier-form-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: newTier.name, onChange: (e) => setNewTier({ ...newTier, name: e.target.value }), placeholder: "e.g., Basic, Professional", className: "tier-form-card__input", autoFocus: true })] }), _jsxs("label", { className: "tier-form-card__toggle", children: [_jsx("input", { type: "checkbox", checked: newTier.isCustomPricing, onChange: (e) => setNewTier({
+    const recommendedTierIndex = getRecommendedTierIndex(tiers);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: tierStyles }), _jsxs("div", { className: "tier-def", children: [tiers.length === 0 && (_jsxs("div", { className: "tier-presets", children: [_jsxs("div", { className: "tier-presets__header", children: [_jsx("h3", { className: "tier-presets__title", children: "Quick Start with a Template" }), _jsx("p", { className: "tier-presets__subtitle", children: "Choose a pricing structure to get started quickly, or create custom tiers below" })] }), _jsx("div", { className: "tier-presets__grid", children: TIER_PRESETS.map((preset) => (_jsxs("button", { onClick: () => handleApplyPreset(preset), className: "tier-preset-card", children: [_jsx("span", { className: "tier-preset-card__icon", children: preset.icon }), _jsxs("div", { className: "tier-preset-card__content", children: [_jsx("h4", { className: "tier-preset-card__name", children: preset.name }), _jsx("p", { className: "tier-preset-card__desc", children: preset.description })] }), _jsx("div", { className: "tier-preset-card__preview", children: preset.tiers.map((t, i) => (_jsxs("span", { className: "tier-preset-card__tier", children: [t.name, t.isCustomPricing ? "" : ` $${t.amount}`] }, i))) })] }, preset.name))) })] })), _jsxs("div", { className: "tier-def__grid", children: [tiers.map((tier, index) => (_jsx(TierCard, { tier: tier, accent: getTierAccent(index), dispatch: dispatch, onDelete: () => handleDeleteTier(tier.id), isRecommended: index === recommendedTierIndex }, tier.id))), isAddingTier ? (_jsxs("div", { className: "tier-form-card", children: [_jsx("h3", { className: "tier-form-card__title", children: "New Subscription Tier" }), _jsxs("div", { className: "tier-form-card__field", children: [_jsx("label", { className: "tier-form-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: newTier.name, onChange: (e) => setNewTier({ ...newTier, name: e.target.value }), placeholder: "e.g., Basic, Professional", className: "tier-form-card__input", autoFocus: true })] }), _jsxs("label", { className: "tier-form-card__toggle", children: [_jsx("input", { type: "checkbox", checked: newTier.isCustomPricing, onChange: (e) => setNewTier({
                                                     ...newTier,
                                                     isCustomPricing: e.target.checked,
                                                     amount: "",
@@ -605,12 +1061,49 @@ export function TierDefinition({ document, dispatch }) {
                                                     });
                                                 }, className: "tier-form-card__btn tier-form-card__btn--secondary", children: "Cancel" })] })] })) : (_jsxs("button", { onClick: () => setIsAddingTier(true), className: "tier-add-card", children: [_jsx("div", { className: "tier-add-card__icon-wrap", children: _jsx("svg", { className: "tier-add-card__icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }), _jsx("span", { className: "tier-add-card__text", children: "Add Subscription Tier" })] }))] }), _jsxs("div", { className: "tier-notice", children: [_jsx("svg", { className: "tier-notice__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" }) }), _jsxs("div", { className: "tier-notice__content", children: [_jsx("p", { className: "tier-notice__title", children: "Setup fees are managed at the service group level" }), _jsx("p", { className: "tier-notice__text", children: "Configure setup fees for \"Setup & Formation\" service groups in the Service Catalog. The setup fee applies to all tiers when those services are included." })] })] })] })] }));
 }
-function TierCard({ tier, accent, dispatch, onDelete }) {
+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({
@@ -629,25 +1122,119 @@ function TierCard({ tier, accent, dispatch, onDelete }) {
             }));
         }
     };
-    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;
+        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(updateTierPricing({
+        dispatch(updateTierPricingOption({
             tierId: tier.id,
-            amount: newAmount,
-            billingCycle: newCycle,
+            pricingOptionId: option.id,
+            isDefault: true,
             lastModified: new Date().toISOString(),
         }));
     };
-    return (_jsxs("div", { className: "tier-card", children: [_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))) })] })] })), _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" })] })] }));
 }