@powerhousedao/service-offering 1.0.0-dev.4 → 1.0.0-dev.6

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

@@ -107,6 +107,7 @@ export function ServiceCatalog({ document, dispatch }) {
         QUARTERLY: "",
         SEMI_ANNUAL: "",
         ANNUAL: "",
+        ONE_TIME: "",
     });
     // Per-tier pricing state for edit modal
     const [editTierTab, setEditTierTab] = useState(null);
@@ -148,6 +149,8 @@ export function ServiceCatalog({ document, dispatch }) {
             name: "New Group",
             isAddOn: false,
             defaultSelected: true,
+            costType: "RECURRING",
+            availableBillingCycles: inheritedCycles,
             lastModified: new Date().toISOString(),
         }));
         // Construct minimal group shape to open Edit modal immediately
@@ -194,6 +197,7 @@ export function ServiceCatalog({ document, dispatch }) {
                 : "recurring";
         setEditGroupType(groupType);
         setEditGroupPrice(group.price?.toString() || "");
+        // Initialize per-tier setup fee discounts from tier-dependent pricing
         const SUBSCRIPTION_CYCLES = [
             "MONTHLY",
             "QUARTERLY",
@@ -206,6 +210,17 @@ export function ServiceCatalog({ document, dispatch }) {
                 c,
                 { discountType: "PERCENTAGE", discountValue: "" },
             ]));
+            const tierPricingEntry = group.tierDependentPricing?.find((tp) => tp.tierId === tier.id);
+            if (tierPricingEntry?.setupCostDiscounts) {
+                tierPricingEntry.setupCostDiscounts.forEach((d) => {
+                    if (d.billingCycle && d.discountRule) {
+                        emptyDiscounts[d.billingCycle] = {
+                            discountType: d.discountRule.discountType,
+                            discountValue: d.discountRule.discountValue?.toString() || "",
+                        };
+                    }
+                });
+            }
             setupTierDiscounts[tier.id] = emptyDiscounts;
         }
         setEditSetupTierDiscounts(setupTierDiscounts);
@@ -223,17 +238,21 @@ export function ServiceCatalog({ document, dispatch }) {
         else {
             setEditGroupPricingMode("STANDALONE");
         }
-        setEditGroupSetupCost("");
-        setEditGroupBasePrice(group.standalonePricing?.amount?.toString() || "");
+        // Initialize standalone pricing (for add-ons in STANDALONE mode or fallback)
+        setEditGroupSetupCost(group.standalonePricing?.setupCost?.amount?.toString() || "");
+        const monthlyPricing = group.standalonePricing?.recurringPricing?.find((p) => p.billingCycle === "MONTHLY");
+        setEditGroupBasePrice(monthlyPricing?.amount?.toString() || "");
+        // Initialize per-group billing cycle discounts (flat amount only)
         const discounts = {
             MONTHLY: "",
             QUARTERLY: "",
             SEMI_ANNUAL: "",
             ANNUAL: "",
+            ONE_TIME: "",
         };
         group.billingCycleDiscounts?.forEach((d) => {
-            if (d.cycle && d.discountValue) {
-                discounts[d.cycle] = d.discountValue.toString();
+            if (d.billingCycle && d.discountRule?.discountValue) {
+                discounts[d.billingCycle] = d.discountRule.discountValue.toString();
             }
         });
         setEditGroupDiscounts(discounts);
@@ -243,22 +262,39 @@ export function ServiceCatalog({ document, dispatch }) {
         const tierDiscounts = {};
         for (const tier of tiers) {
             const tierPricingEntry = group.tierDependentPricing?.find((tp) => tp.tierId === tier.id);
+            const tierMonthlyPricing = tierPricingEntry?.recurringPricing?.find((p) => p.billingCycle === "MONTHLY");
+            // If no tier pricing exists but group has standalone pricing, use standalone as starting point
             if (tierPricingEntry) {
-                tierPrices[tier.id] = tierPricingEntry.amount?.toString() || "";
+                tierPrices[tier.id] = tierMonthlyPricing?.amount?.toString() || "";
+                tierSetupCosts[tier.id] =
+                    tierPricingEntry.setupCost?.amount?.toString() || "";
             }
-            else if (group.standalonePricing) {
-                tierPrices[tier.id] = group.standalonePricing.amount?.toString() || "";
+            else if (monthlyPricing) {
+                // Pre-fill from standalone as migration aid
+                tierPrices[tier.id] = monthlyPricing.amount?.toString() || "";
+                tierSetupCosts[tier.id] =
+                    group.standalonePricing?.setupCost?.amount?.toString() || "";
             }
             else {
                 tierPrices[tier.id] = "";
+                tierSetupCosts[tier.id] = "";
             }
-            tierSetupCosts[tier.id] = "";
+            // Per-tier discounts: populate from tierDependentPricing[].recurringPricing[].discount
             const tierDiscountValues = {
                 MONTHLY: "",
                 QUARTERLY: "",
                 SEMI_ANNUAL: "",
                 ANNUAL: "",
+                ONE_TIME: "",
             };
+            if (tierPricingEntry) {
+                tierPricingEntry.recurringPricing?.forEach((rp) => {
+                    if (rp.discount && rp.discount.discountValue > 0) {
+                        tierDiscountValues[rp.billingCycle] =
+                            rp.discount.discountValue.toString();
+                    }
+                });
+            }
             tierDiscounts[tier.id] = tierDiscountValues;
         }
         setEditTierPrices(tierPrices);
@@ -271,56 +307,153 @@ export function ServiceCatalog({ document, dispatch }) {
             return;
         const isSetup = editGroupType === "setup";
         const isAddOn = editGroupType === "addon";
+        const costType = isSetup ? "SETUP" : "RECURRING";
         const price = editGroupPrice ? parseFloat(editGroupPrice) : null;
+        // Update the option group in the document
         dispatch(updateOptionGroup({
             id: editingGroup.id,
             name: editGroupName.trim(),
             isAddOn,
             defaultSelected: !isAddOn,
+            costType,
+            availableBillingCycles: isSetup ? ["ONE_TIME"] : editGroupBillingCycles,
+            price: price ?? undefined,
+            currency: price ? "USD" : undefined,
             lastModified: new Date().toISOString(),
         }));
+        // Save setup pricing: base cost via standalone, per-tier discounts via tier pricing
         if (isSetup && price && price > 0) {
             const now = new Date().toISOString();
+            // Store base setup cost via standalone pricing
             dispatch(setOptionGroupStandalonePricing({
                 optionGroupId: editingGroup.id,
-                amount: price,
-                currency: "USD",
+                setupCost: { amount: price, currency: "USD" },
+                recurringPricing: [],
                 lastModified: now,
             }));
+            // Store per-tier setup fee discounts
+            for (const tier of tiers) {
+                if (tier.isCustomPricing)
+                    continue;
+                const tierDiscountEntries = editSetupTierDiscounts[tier.id];
+                const setupCostDiscounts = Object.entries(tierDiscountEntries || {})
+                    .filter(([, d]) => parseFloat(d.discountValue) > 0)
+                    .map(([cycle, d]) => ({
+                    billingCycle: cycle,
+                    discountRule: {
+                        discountType: "PERCENTAGE",
+                        discountValue: parseFloat(d.discountValue),
+                    },
+                }));
+                const existingTierPricing = editingGroup.tierDependentPricing?.find((tp) => tp.tierId === tier.id);
+                if (existingTierPricing) {
+                    dispatch(updateOptionGroupTierPricing({
+                        optionGroupId: editingGroup.id,
+                        tierId: tier.id,
+                        setupCost: { amount: price, currency: "USD" },
+                        setupCostDiscounts,
+                        recurringPricing: [],
+                        lastModified: now,
+                    }));
+                }
+                else {
+                    dispatch(addOptionGroupTierPricing({
+                        optionGroupId: editingGroup.id,
+                        tierPricingId: generateId(),
+                        tierId: tier.id,
+                        setupCost: { amount: price, currency: "USD" },
+                        setupCostDiscounts,
+                        recurringPricing: [],
+                        lastModified: now,
+                    }));
+                }
+            }
         }
+        // Save pricing based on mode
         if (!isSetup && editGroupPricingMode === "TIER_DEPENDENT") {
+            // Per-tier pricing: dispatch addOptionGroupTierPricing or updateOptionGroupTierPricing per tier
             const now = new Date().toISOString();
             for (const tier of tiers) {
                 if (tier.isCustomPricing)
-                    continue;
+                    continue; // Skip custom tiers
                 const baseMonthly = parseFloat(editTierPrices[tier.id]) || 0;
+                const setupCostVal = parseFloat(editTierSetupCosts[tier.id]) || 0;
+                const setupCost = setupCostVal > 0
+                    ? { amount: setupCostVal, currency: "USD" }
+                    : undefined;
+                const recurringPricing = editGroupBillingCycles
+                    .filter(() => baseMonthly > 0)
+                    .map((cycle) => {
+                    const discountPct = parseFloat(editTierDiscounts[tier.id]?.[cycle] || "0") || 0;
+                    return {
+                        id: generateId(),
+                        billingCycle: cycle,
+                        amount: baseMonthly,
+                        currency: "USD",
+                        discount: discountPct > 0
+                            ? {
+                                discountType: "PERCENTAGE",
+                                discountValue: discountPct,
+                            }
+                            : undefined,
+                    };
+                });
                 const existingTierPricing = editingGroup.tierDependentPricing?.find((tp) => tp.tierId === tier.id);
                 if (existingTierPricing) {
                     dispatch(updateOptionGroupTierPricing({
                         optionGroupId: editingGroup.id,
                         tierId: tier.id,
-                        amount: baseMonthly,
-                        currency: "USD",
+                        setupCost,
+                        recurringPricing,
                         lastModified: now,
                     }));
                 }
                 else {
                     dispatch(addOptionGroupTierPricing({
                         optionGroupId: editingGroup.id,
+                        tierPricingId: generateId(),
                         tierId: tier.id,
-                        amount: baseMonthly,
-                        currency: "USD",
+                        setupCost,
+                        recurringPricing,
                         lastModified: now,
                     }));
                 }
             }
         }
         else if (!isSetup && editGroupPricingMode === "STANDALONE") {
+            // Standalone pricing (add-ons or groups with no tiers)
+            const setupCost = editGroupSetupCost && parseFloat(editGroupSetupCost) > 0
+                ? {
+                    amount: parseFloat(editGroupSetupCost),
+                    currency: "USD",
+                }
+                : undefined;
             const baseMonthly = parseFloat(editGroupBasePrice) || 0;
-            dispatch(setOptionGroupStandalonePricing({
-                optionGroupId: editingGroup.id,
+            const recurringPricing = editGroupBillingCycles
+                .filter(() => baseMonthly > 0)
+                .map((cycle) => ({
+                id: generateId(),
+                billingCycle: cycle,
                 amount: baseMonthly,
                 currency: "USD",
+            }));
+            const billingCycleDiscounts = editGroupBillingCycles
+                .map((cycle) => {
+                const discountPct = parseFloat(editGroupDiscounts[cycle]) || 0;
+                return {
+                    billingCycle: cycle,
+                    discountRule: {
+                        discountType: "PERCENTAGE",
+                        discountValue: discountPct,
+                    },
+                };
+            })
+                .filter((d) => d.discountRule.discountValue > 0);
+            dispatch(setOptionGroupStandalonePricing({
+                optionGroupId: editingGroup.id,
+                setupCost,
+                recurringPricing,
+                billingCycleDiscounts,
                 lastModified: new Date().toISOString(),
             }));
         }
@@ -353,12 +486,14 @@ export function ServiceCatalog({ document, dispatch }) {
             optionGroupId: selectedGroupId || undefined,
             lastModified: now,
         }));
+        // Create ServiceLevelBindings for each selected tier
         selectedTierIds.forEach((tierId) => {
             dispatch(addServiceLevel({
-                id: generateId(),
+                serviceLevelId: generateId(),
                 serviceId,
                 tierId,
                 level: "INCLUDED",
+                optionGroupId: selectedGroupId || undefined,
                 lastModified: now,
             }));
         });
@@ -366,6 +501,7 @@ export function ServiceCatalog({ document, dispatch }) {
         setSelectedTierIds(new Set());
         setIsAddingService(false);
     };
+    // Quick-add service from template (reduces activation energy)
     const handleAddFromTemplate = (template) => {
         if (!selectedGroupId)
             return;
@@ -380,12 +516,14 @@ export function ServiceCatalog({ document, dispatch }) {
             optionGroupId: selectedGroupId,
             lastModified: now,
         }));
+        // Auto-include in all tiers for convenience (can be changed later)
         tiers.forEach((tier) => {
             dispatch(addServiceLevel({
-                id: generateId(),
+                serviceLevelId: generateId(),
                 serviceId,
                 tierId: tier.id,
                 level: "INCLUDED",
+                optionGroupId: selectedGroupId,
                 lastModified: now,
             }));
         });
@@ -406,20 +544,29 @@ export function ServiceCatalog({ document, dispatch }) {
         // Find existing service level binding for this service-tier combo
         const existingBinding = tier.serviceLevels.find((sl) => sl.serviceId === serviceId);
         if (isIncluded) {
-            if (!existingBinding) {
+            // Add or update service level binding
+            if (existingBinding) {
+                // Service level exists, might need to update it if level changed
+                // (for now we just use INCLUDED)
+            }
+            else {
+                // Create new service level binding
+                const service = services.find((s) => s.id === serviceId);
                 dispatch(addServiceLevel({
-                    id: generateId(),
+                    serviceLevelId: generateId(),
                     serviceId,
                     tierId,
                     level: "INCLUDED",
+                    optionGroupId: service?.optionGroupId || undefined,
                     lastModified: now,
                 }));
             }
         }
         else {
+            // Remove service level binding
             if (existingBinding) {
                 dispatch(removeServiceLevel({
-                    id: existingBinding.id,
+                    serviceLevelId: existingBinding.id,
                     tierId,
                     lastModified: now,
                 }));
@@ -467,7 +614,9 @@ export function ServiceCatalog({ document, dispatch }) {
                                                         : color === "emerald"
                                                             ? "border-emerald-500 bg-emerald-50 text-emerald-700"
                                                             : "border-violet-500 bg-violet-50 text-violet-700"
-                                                    : "border-slate-200 bg-white text-slate-600 hover:border-slate-300"}`, style: fontSans, children: label }, type))) })] }), editGroupType !== "setup" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-slate-500", style: fontSans, children: "Available Billing Cycles" }), _jsx("div", { className: "flex flex-col gap-2.5 p-3 bg-slate-50 rounded-[10px]", children: Object.entries(BILLING_CYCLE_SHORT_LABELS).map(([value, label]) => (_jsxs("label", { className: "flex items-center gap-2.5 cursor-pointer text-sm text-slate-700", children: [_jsx("input", { type: "checkbox", checked: editGroupBillingCycles.includes(value), onChange: (e) => {
+                                                    : "border-slate-200 bg-white text-slate-600 hover:border-slate-300"}`, style: fontSans, children: label }, type))) })] }), editGroupType !== "setup" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-slate-500", style: fontSans, children: "Available Billing Cycles" }), _jsx("div", { className: "flex flex-col gap-2.5 p-3 bg-slate-50 rounded-[10px]", children: Object.entries(BILLING_CYCLE_SHORT_LABELS)
+                                                .filter(([value]) => value !== "ONE_TIME")
+                                                .map(([value, label]) => (_jsxs("label", { className: "flex items-center gap-2.5 cursor-pointer text-sm text-slate-700", children: [_jsx("input", { type: "checkbox", checked: editGroupBillingCycles.includes(value), onChange: (e) => {
                                                             if (e.target.checked) {
                                                                 setEditGroupBillingCycles([
                                                                     ...editGroupBillingCycles,
@@ -495,20 +644,25 @@ export function ServiceCatalog({ document, dispatch }) {
                                                     return (_jsxs("div", { className: "flex items-center gap-2 p-3 bg-slate-50 border border-dashed border-slate-300 rounded-md text-xs text-slate-500 italic", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: _jsx("path", { d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { children: "Price negotiated per customer. No group-level price input for custom tiers." })] }));
                                                 }
                                                 const tierBase = parseFloat(editTierPrices[activeTier.id]) || 0;
-                                                const tierAmount = activeTier.pricing?.amount ?? 0;
+                                                const tierAmount = activeTier.pricing.amount ?? 0;
+                                                // Budget: sum of other groups' prices for this tier
                                                 const otherGroupsTotal = regularGroups
                                                     .filter((g) => editingGroup && g.id !== editingGroup.id)
                                                     .reduce((sum, g) => {
                                                     const tp = g.tierDependentPricing?.find((p) => p.tierId === activeTier.id);
-                                                    if (tp)
-                                                        return sum + (tp.amount ?? 0);
-                                                    return sum + (g.standalonePricing?.amount ?? 0);
+                                                    const mp = tp?.recurringPricing?.find((p) => p.billingCycle === "MONTHLY");
+                                                    if (mp)
+                                                        return sum + (mp.amount ?? 0);
+                                                    // Fallback to standalone
+                                                    const sp = g.standalonePricing?.recurringPricing?.find((p) => p.billingCycle === "MONTHLY");
+                                                    return sum + (sp?.amount ?? 0);
                                                 }, 0);
                                                 const projectedTotal = otherGroupsTotal + tierBase;
                                                 return (_jsxs("div", { style: { animation: "catalog__fade-in 0.15s ease" }, children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("label", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-slate-500", style: fontSans, children: ["Recurring Price (", activeTier.name, ")"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-slate-500", children: "$" }), _jsx("input", { type: "number", value: editTierPrices[activeTier.id] || "", onChange: (e) => setEditTierPrices({
                                                                                 ...editTierPrices,
                                                                                 [activeTier.id]: e.target.value,
-                                                                            }), placeholder: "0.00", className: "flex-1 px-2.5 py-2 text-sm text-slate-800 bg-white border-[1.5px] border-slate-200 rounded-md focus:outline-none focus:border-violet-500 focus:shadow-[0_0_0_2px_rgb(237,233,254)]", style: fontSans, step: "0.01" })] })] }), tierAmount > 0 && (_jsxs("div", { className: "mt-2 p-2 px-2.5 bg-slate-50 border border-slate-200 rounded-md", children: [_jsxs("span", { className: "block text-[0.6875rem] font-semibold text-slate-700 mb-1.5", children: [activeTier.name, " budget:", " ", formatPrice(projectedTotal), "/mo of", " ", formatPrice(tierAmount), "/mo"] }), _jsxs("div", { className: "flex items-center gap-1.5 py-[3px]", children: [_jsx("div", { className: "flex-1 h-[5px] bg-slate-200 rounded-full overflow-hidden", children: _jsx("div", { className: `h-full rounded-full transition-[width] duration-200 ease-linear ${projectedTotal > tierAmount ? "bg-rose-500" : "bg-emerald-500"}`, style: {
+                                                                            }), placeholder: "0.00", className: "flex-1 px-2.5 py-2 text-sm text-slate-800 bg-white border-[1.5px] border-slate-200 rounded-md focus:outline-none focus:border-violet-500 focus:shadow-[0_0_0_2px_rgb(237,233,254)]", style: fontSans, step: "0.01" })] })] }), tierAmount > 0 &&
+                                                            activeTier.pricingMode !== "CALCULATED" && (_jsxs("div", { className: "mt-2 p-2 px-2.5 bg-slate-50 border border-slate-200 rounded-md", children: [_jsxs("span", { className: "block text-[0.6875rem] font-semibold text-slate-700 mb-1.5", children: [activeTier.name, " budget:", " ", formatPrice(projectedTotal), "/mo of", " ", formatPrice(tierAmount), "/mo"] }), _jsxs("div", { className: "flex items-center gap-1.5 py-[3px]", children: [_jsx("div", { className: "flex-1 h-[5px] bg-slate-200 rounded-full overflow-hidden", children: _jsx("div", { className: `h-full rounded-full transition-[width] duration-200 ease-linear ${projectedTotal > tierAmount ? "bg-rose-500" : "bg-emerald-500"}`, style: {
                                                                                     width: `${Math.min((projectedTotal / tierAmount) * 100, 100)}%`,
                                                                                 } }) }), _jsxs("span", { className: `shrink-0 text-[0.625rem] ${projectedTotal > tierAmount ? "text-rose-600 font-semibold" : "text-slate-600"}`, style: fontMono, children: [formatPrice(projectedTotal), " /", " ", formatPrice(tierAmount), projectedTotal > tierAmount && (_jsxs("span", { className: "text-rose-500 font-bold", children: [" ", "+", formatPrice(projectedTotal - tierAmount)] }))] })] })] })), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-xs font-semibold uppercase tracking-[0.05em] text-slate-500", style: fontSans, children: "Setup Cost (one-time)" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-slate-500", children: "$" }), _jsx("input", { type: "number", value: editTierSetupCosts[activeTier.id] || "", onChange: (e) => setEditTierSetupCosts({
                                                                                 ...editTierSetupCosts,
@@ -523,7 +677,9 @@ export function ServiceCatalog({ document, dispatch }) {
                                                                             QUARTERLY: "Quarterly",
                                                                             SEMI_ANNUAL: "Semi-Annual",
                                                                             ANNUAL: "Annual",
+                                                                            ONE_TIME: "One-Time",
                                                                         }[cycle];
+                                                                        // Percentage discount from user input (always editable)
                                                                         const discountPct = parseFloat(editTierDiscounts[activeTier.id]?.[cycle] || "0") || 0;
                                                                         let effective = null;
                                                                         let savingsPct = 0;
@@ -559,6 +715,7 @@ export function ServiceCatalog({ document, dispatch }) {
                                                             QUARTERLY: "Quarterly",
                                                             SEMI_ANNUAL: "Semi-Annual",
                                                             ANNUAL: "Annual",
+                                                            ONE_TIME: "One-Time",
                                                         }[cycle];
                                                         const shortLabel = `${months}mo`;
                                                         return (_jsxs("div", { className: `border border-slate-200 rounded-[10px] px-3.5 py-2.5 transition-[150ms] ${base > 0 ? "bg-white" : "bg-slate-50"}`, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-sm font-semibold text-slate-700", children: cycleLabel }), total !== null ? (_jsx("span", { className: "text-[0.9375rem] font-bold text-slate-800", style: fontMono, children: formatPrice(total, "USD") })) : (_jsx("span", { className: "text-sm text-slate-400", children: "--" }))] }), base > 0 && (_jsxs("div", { className: "flex gap-4 mt-2 pt-2 border-t border-dashed border-slate-200", children: [!isMonthly && (_jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [_jsx("span", { className: "text-[0.625rem] font-medium uppercase tracking-[0.06em] text-violet-500", style: fontMono, children: "Standard Price" }), _jsxs("span", { className: "text-[0.8125rem] text-slate-600 flex items-baseline gap-1.5", children: ["$", base, " \u00D7 ", shortLabel, _jsx("span", { className: "font-semibold text-slate-700", children: formatPrice(total ?? 0, "USD") })] })] })), _jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [_jsx("span", { className: "text-[0.625rem] font-medium uppercase tracking-[0.06em] text-violet-500", style: fontMono, children: "Discount" }), _jsxs("div", { className: "flex items-center border border-slate-200 rounded-[10px] overflow-hidden transition-all duration-150 h-[34px] focus-within:border-violet-400 focus-within:shadow-[0_0_0_3px_rgba(124,58,237,0.1)]", children: [_jsx("input", { type: "number", value: editGroupDiscounts[cycle], onChange: (e) => setEditGroupDiscounts({
@@ -661,7 +818,7 @@ export function ServiceCatalog({ document, dispatch }) {
                                                                         newSet.delete(tier.id);
                                                                     }
                                                                     setSelectedTierIds(newSet);
-                                                                }, className: "w-[18px] h-[18px] shrink-0 accent-emerald-600 cursor-pointer" }), _jsx("span", { className: `flex-1 text-sm font-medium ${isSelected ? "text-emerald-800" : "text-slate-800"}`, children: tier.name }), tier.pricing?.amount != null && (_jsxs("span", { className: `text-xs font-medium whitespace-nowrap ${isSelected ? "text-emerald-600" : "text-slate-500"}`, children: ["$", tier.pricing.amount] }))] }, tier.id));
+                                                                }, className: "w-[18px] h-[18px] shrink-0 accent-emerald-600 cursor-pointer" }), _jsx("span", { className: `flex-1 text-sm font-medium ${isSelected ? "text-emerald-800" : "text-slate-800"}`, children: tier.name }), tier.pricing.amount !== null && (_jsxs("span", { className: `text-xs font-medium whitespace-nowrap ${isSelected ? "text-emerald-600" : "text-slate-500"}`, children: ["$", tier.pricing.amount] }))] }, tier.id));
                                                 }) }), selectedTierIds.size === 0 && (_jsx("p", { className: "text-xs text-slate-500 mt-2 m-0 italic", children: "Select at least one tier to include this service" }))] })), tiers.length === 0 && (_jsxs("div", { className: "flex items-start gap-3 px-4 py-3.5 rounded-[10px] mb-5 bg-amber-50 border border-amber-200 text-amber-700", children: [_jsx("svg", { className: "w-5 h-5 shrink-0 mt-px", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), _jsx("p", { className: "text-[0.8125rem] m-0 leading-relaxed", children: "No tiers defined yet. Define tiers in the Tier Definition tab first to specify which tiers include this service." })] })), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: handleAddService, disabled: !newService.title.trim(), className: "flex-1 px-4 py-2.5 text-[0.8125rem] font-semibold rounded-[10px] border-none cursor-pointer flex items-center justify-center gap-1.5 transition-all duration-150 text-white hover:enabled:-translate-y-px disabled:opacity-50 disabled:cursor-not-allowed", style: {
                                                     ...fontSans,
                                                     background: "linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%)",
@@ -695,8 +852,8 @@ function GroupButton({ group, serviceCount, isSelected, onSelect, onEdit, onDele
                                     .join(", ") }))] }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-slate-500 mt-0.5", children: [_jsxs("span", { children: [serviceCount, " services", serviceCount === 0 && (_jsxs("span", { className: "text-[0.6875rem] text-amber-600", children: [" ", "\u2014 add services"] }))] }), group.costType === "SETUP" && group.price != null && (_jsx("span", { className: "text-amber-600", children: formatPrice(group.price, "USD") })), group.isAddOn && group.price != null && (_jsx("span", { className: "text-amber-600", children: formatPrice(group.price, "USD") })), !isSetup &&
                                 !group.isAddOn &&
                                 (() => {
-                                    const monthlyPrice = group.tierDependentPricing?.[0]?.amount ??
-                                        group.standalonePricing?.amount;
+                                    const monthlyPrice = group.tierDependentPricing?.[0]?.recurringPricing?.find((p) => p.billingCycle === "MONTHLY")?.amount ??
+                                        group.standalonePricing?.recurringPricing?.find((p) => p.billingCycle === "MONTHLY")?.amount;
                                     return monthlyPrice != null && monthlyPrice > 0 ? (_jsxs("span", { className: "text-amber-600", children: [formatPrice(monthlyPrice, "USD"), "/mo"] })) : null;
                                 })()] })] }), isHovered && (_jsxs("div", { className: "absolute right-2.5 top-1/2 -translate-y-1/2 flex gap-0.5", style: { animation: "so-fade-in 150ms ease-out" }, children: [_jsx("button", { onClick: (e) => {
                             e.stopPropagation();
@@ -763,6 +920,6 @@ function ServiceCard({ service, tiers, optionGroups, onUpdate, onDelete, onToggl
                                             ? "border-emerald-500 bg-emerald-50 hover:border-emerald-600"
                                             : "border-slate-200 hover:border-slate-300 hover:bg-slate-50"}`, children: [_jsx("input", { type: "checkbox", checked: isIncluded, onChange: (e) => {
                                                     onToggleTier(service.id, tier.id, e.target.checked);
-                                                }, className: "w-[18px] h-[18px] shrink-0 accent-emerald-600 cursor-pointer" }), _jsx("span", { className: `flex-1 text-sm font-medium ${isIncluded ? "text-emerald-800" : "text-slate-800"}`, children: tier.name }), tier.pricing?.amount != null && (_jsxs("span", { className: `text-xs font-medium whitespace-nowrap ${isIncluded ? "text-emerald-600" : "text-slate-500"}`, children: ["$", tier.pricing.amount] }))] }, tier.id));
+                                                }, className: "w-[18px] h-[18px] shrink-0 accent-emerald-600 cursor-pointer" }), _jsx("span", { className: `flex-1 text-sm font-medium ${isIncluded ? "text-emerald-800" : "text-slate-800"}`, children: tier.name }), tier.pricing.amount !== null && (_jsxs("span", { className: `text-xs font-medium whitespace-nowrap ${isIncluded ? "text-emerald-600" : "text-slate-500"}`, children: ["$", tier.pricing.amount] }))] }, tier.id));
                                 }) })] }))] }))] }));
 }

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

@@ -1,5 +1,5 @@
 import { type DocumentDispatch } from "@powerhousedao/reactor-browser";
-import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
+import { type ServiceOfferingDocument, type ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
 interface TheMatrixProps {
     document: ServiceOfferingDocument;
     dispatch: DocumentDispatch<ServiceOfferingAction>;

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

@@ -1 +1 @@
-{"version":3,"file":"TheMatrix.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TheMatrix.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAQtB,MAAM,kEAAkE,CAAC;AAqB1E,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAgDD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAsvE/D"}
+{"version":3,"file":"TheMatrix.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TheMatrix.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAS3B,MAAM,kEAAkE,CAAC;AA2B1E,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAgDD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAy7E/D"}