@powerhousedao/contributor-billing 0.1.41 → 0.1.43

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"}

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

@@ -0,0 +1,405 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateId } from "document-model/core";
+import { addTierPricingOption, updateTierPricingOption, removeTierPricingOption, } from "../../../document-models/service-offering/gen/creators.js";
+import { formatMonthlyEquivalentDisplay, RECURRING_BILLING_CYCLES, BILLING_CYCLE_SHORT_LABELS, } from "./pricing-utils.js";
+const panelStyles = `
+  .pricing-options-panel {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--so-slate-200);
+  }
+
+  .pricing-options-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+  }
+
+  .pricing-options-panel__title {
+    font-family: var(--so-font-mono);
+    font-size: 0.625rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--so-slate-500);
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .pricing-options-panel__title svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--so-violet-500);
+  }
+
+  .pricing-options-panel__add-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--so-violet-600);
+    background: var(--so-violet-50);
+    border: 1px solid var(--so-violet-200);
+    border-radius: var(--so-radius-sm);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .pricing-options-panel__add-btn:hover {
+    background: var(--so-violet-100);
+    border-color: var(--so-violet-300);
+  }
+
+  .pricing-options-panel__add-btn svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .pricing-options-panel__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  /* Individual Pricing Option Row */
+  .pricing-option-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+    background: var(--so-slate-50);
+    border: 1px solid var(--so-slate-100);
+    border-radius: var(--so-radius-md);
+    transition: all 0.15s ease;
+  }
+
+  .pricing-option-row:hover {
+    border-color: var(--so-slate-200);
+  }
+
+  .pricing-option-row--default {
+    background: var(--so-violet-50);
+    border-color: var(--so-violet-200);
+  }
+
+  .pricing-option-row__cycle {
+    flex-shrink: 0;
+    font-family: var(--so-font-mono);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--so-slate-600);
+    padding: 0.25rem 0.5rem;
+    background: var(--so-white);
+    border-radius: var(--so-radius-sm);
+    min-width: 4rem;
+    text-align: center;
+  }
+
+  .pricing-option-row--default .pricing-option-row__cycle {
+    color: var(--so-violet-700);
+    background: var(--so-violet-100);
+  }
+
+  .pricing-option-row__amount-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 1;
+  }
+
+  .pricing-option-row__currency {
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    color: var(--so-slate-400);
+  }
+
+  .pricing-option-row__amount-input {
+    width: 5rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    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;
+  }
+
+  .pricing-option-row__amount-input:focus {
+    border-color: var(--so-violet-400);
+  }
+
+  .pricing-option-row__monthly {
+    flex: 1;
+    font-family: var(--so-font-sans);
+    font-size: 0.6875rem;
+    color: var(--so-emerald-600);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .pricing-option-row__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+
+  .pricing-option-row__default-badge {
+    font-family: var(--so-font-mono);
+    font-size: 0.5625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--so-violet-600);
+    padding: 0.125rem 0.375rem;
+    background: var(--so-violet-100);
+    border-radius: var(--so-radius-sm);
+  }
+
+  .pricing-option-row__action-btn {
+    padding: 0.25rem;
+    color: var(--so-slate-400);
+    background: transparent;
+    border: none;
+    border-radius: var(--so-radius-sm);
+    cursor: pointer;
+    transition: all 0.1s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pricing-option-row__action-btn:hover {
+    color: var(--so-slate-600);
+    background: var(--so-slate-100);
+  }
+
+  .pricing-option-row__action-btn--make-default:hover {
+    color: var(--so-violet-600);
+    background: var(--so-violet-50);
+  }
+
+  .pricing-option-row__action-btn--delete:hover {
+    color: var(--so-rose-500);
+    background: var(--so-rose-50);
+  }
+
+  .pricing-option-row__action-btn svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* Add New Option Form */
+  .pricing-option-add-form {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--so-violet-50);
+    border: 2px dashed var(--so-violet-200);
+    border-radius: var(--so-radius-md);
+    animation: pricing-option-fade-in 0.2s ease-out;
+  }
+
+  @keyframes pricing-option-fade-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .pricing-option-add-form__cycle-select {
+    font-family: var(--so-font-sans);
+    font-size: 0.75rem;
+    color: var(--so-slate-700);
+    background: var(--so-white);
+    border: 1px solid var(--so-violet-200);
+    border-radius: var(--so-radius-sm);
+    padding: 0.375rem 0.5rem;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .pricing-option-add-form__cycle-select:focus {
+    border-color: var(--so-violet-400);
+  }
+
+  .pricing-option-add-form__amount-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 1;
+  }
+
+  .pricing-option-add-form__currency {
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    color: var(--so-slate-400);
+  }
+
+  .pricing-option-add-form__amount-input {
+    width: 5rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--so-slate-800);
+    background: var(--so-white);
+    border: 1px solid var(--so-violet-200);
+    border-radius: var(--so-radius-sm);
+    padding: 0.375rem 0.5rem;
+    outline: none;
+  }
+
+  .pricing-option-add-form__amount-input:focus {
+    border-color: var(--so-violet-400);
+  }
+
+  .pricing-option-add-form__actions {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .pricing-option-add-form__btn {
+    padding: 0.375rem 0.625rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    border-radius: var(--so-radius-sm);
+    cursor: pointer;
+    transition: all 0.1s ease;
+  }
+
+  .pricing-option-add-form__btn--add {
+    color: var(--so-white);
+    background: var(--so-violet-600);
+    border: none;
+  }
+
+  .pricing-option-add-form__btn--add:hover:not(:disabled) {
+    background: var(--so-violet-700);
+  }
+
+  .pricing-option-add-form__btn--add:disabled {
+    background: var(--so-slate-300);
+    cursor: not-allowed;
+  }
+
+  .pricing-option-add-form__btn--cancel {
+    color: var(--so-slate-600);
+    background: var(--so-white);
+    border: 1px solid var(--so-slate-200);
+  }
+
+  .pricing-option-add-form__btn--cancel:hover {
+    background: var(--so-slate-50);
+  }
+
+  /* Empty State */
+  .pricing-options-panel__empty {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: var(--so-slate-50);
+    border-radius: var(--so-radius-md);
+    color: var(--so-slate-500);
+    font-size: 0.75rem;
+  }
+
+  .pricing-options-panel__empty svg {
+    width: 1rem;
+    height: 1rem;
+    color: var(--so-slate-400);
+  }
+`;
+export function TierPricingOptionsPanel({ tierId, pricingOptions, dispatch, }) {
+    const [isAdding, setIsAdding] = useState(false);
+    const [newOption, setNewOption] = useState({
+        billingCycle: "MONTHLY",
+        amount: "",
+    });
+    // Get cycles that are not already used
+    const usedCycles = new Set(pricingOptions.map((po) => po.billingCycle));
+    const availableCycles = RECURRING_BILLING_CYCLES.filter((cycle) => !usedCycles.has(cycle));
+    const handleAddOption = () => {
+        if (!newOption.amount || !newOption.billingCycle)
+            return;
+        dispatch(addTierPricingOption({
+            tierId,
+            pricingOptionId: generateId(),
+            billingCycle: newOption.billingCycle,
+            amount: parseFloat(newOption.amount),
+            currency: "USD",
+            isDefault: pricingOptions.length === 0,
+            lastModified: new Date().toISOString(),
+        }));
+        setNewOption({ billingCycle: availableCycles[0] ?? "MONTHLY", amount: "" });
+        setIsAdding(false);
+    };
+    const handleUpdateAmount = (optionId, amount) => {
+        const parsedAmount = parseFloat(amount);
+        if (isNaN(parsedAmount))
+            return;
+        dispatch(updateTierPricingOption({
+            tierId,
+            pricingOptionId: optionId,
+            amount: parsedAmount,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleMakeDefault = (optionId) => {
+        dispatch(updateTierPricingOption({
+            tierId,
+            pricingOptionId: optionId,
+            isDefault: true,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleRemoveOption = (optionId) => {
+        if (pricingOptions.length <= 1) {
+            alert("Cannot remove the last pricing option");
+            return;
+        }
+        dispatch(removeTierPricingOption({
+            tierId,
+            pricingOptionId: optionId,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: panelStyles }), _jsxs("div", { className: "pricing-options-panel", children: [_jsxs("div", { className: "pricing-options-panel__header", children: [_jsxs("span", { className: "pricing-options-panel__title", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), "Billing Cycle Options"] }), availableCycles.length > 0 && !isAdding && (_jsxs("button", { onClick: () => {
+                                    setNewOption((prev) => ({
+                                        ...prev,
+                                        billingCycle: availableCycles[0],
+                                    }));
+                                    setIsAdding(true);
+                                }, className: "pricing-options-panel__add-btn", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }), "Add Cycle"] }))] }), _jsxs("div", { className: "pricing-options-panel__list", children: [pricingOptions.length === 0 && !isAdding && (_jsxs("div", { className: "pricing-options-panel__empty", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", 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" }) }), "No pricing options configured. Add billing cycle options to offer flexible pricing."] })), pricingOptions.map((option) => (_jsx(PricingOptionRow, { option: option, canDelete: pricingOptions.length > 1, onUpdateAmount: (amount) => handleUpdateAmount(option.id, amount), onMakeDefault: () => handleMakeDefault(option.id), onRemove: () => handleRemoveOption(option.id) }, option.id))), isAdding && (_jsxs("div", { className: "pricing-option-add-form", children: [_jsx("select", { value: newOption.billingCycle, onChange: (e) => setNewOption({
+                                            ...newOption,
+                                            billingCycle: e.target.value,
+                                        }), className: "pricing-option-add-form__cycle-select", children: availableCycles.map((cycle) => (_jsx("option", { value: cycle, children: BILLING_CYCLE_SHORT_LABELS[cycle] }, cycle))) }), _jsxs("div", { className: "pricing-option-add-form__amount-group", children: [_jsx("span", { className: "pricing-option-add-form__currency", children: "$" }), _jsx("input", { type: "number", value: newOption.amount, onChange: (e) => setNewOption({ ...newOption, amount: e.target.value }), placeholder: "0.00", step: "0.01", className: "pricing-option-add-form__amount-input", autoFocus: true })] }), _jsxs("div", { className: "pricing-option-add-form__actions", children: [_jsx("button", { onClick: handleAddOption, disabled: !newOption.amount || parseFloat(newOption.amount) <= 0, className: "pricing-option-add-form__btn pricing-option-add-form__btn--add", children: "Add" }), _jsx("button", { onClick: () => {
+                                                    setIsAdding(false);
+                                                    setNewOption({
+                                                        billingCycle: availableCycles[0] ?? "MONTHLY",
+                                                        amount: "",
+                                                    });
+                                                }, className: "pricing-option-add-form__btn pricing-option-add-form__btn--cancel", children: "Cancel" })] })] }))] })] })] }));
+}
+function PricingOptionRow({ option, canDelete, onUpdateAmount, onMakeDefault, onRemove, }) {
+    const [localAmount, setLocalAmount] = useState(option.amount?.toString() ?? "");
+    const monthlyDisplay = formatMonthlyEquivalentDisplay(option.amount ?? 0, option.billingCycle, option.currency ?? "USD");
+    return (_jsxs("div", { className: `pricing-option-row ${option.isDefault ? "pricing-option-row--default" : ""}`, children: [_jsx("span", { className: "pricing-option-row__cycle", children: BILLING_CYCLE_SHORT_LABELS[option.billingCycle] }), _jsxs("div", { className: "pricing-option-row__amount-group", children: [_jsx("span", { className: "pricing-option-row__currency", children: "$" }), _jsx("input", { type: "number", value: localAmount, onChange: (e) => setLocalAmount(e.target.value), onBlur: () => {
+                            if (localAmount && parseFloat(localAmount) !== option.amount) {
+                                onUpdateAmount(localAmount);
+                            }
+                        }, step: "0.01", className: "pricing-option-row__amount-input" })] }), _jsx("span", { className: "pricing-option-row__monthly", children: monthlyDisplay }), _jsxs("div", { className: "pricing-option-row__actions", children: [option.isDefault ? (_jsx("span", { className: "pricing-option-row__default-badge", children: "Default" })) : (_jsx("button", { onClick: onMakeDefault, className: "pricing-option-row__action-btn pricing-option-row__action-btn--make-default", title: "Make default", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" }) }) })), canDelete && (_jsx("button", { onClick: onRemove, className: "pricing-option-row__action-btn pricing-option-row__action-btn--delete", title: "Remove", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] })] }));
+}

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

@@ -1,5 +1,5 @@
 import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
-import type { ServiceOfferingDocument, ServiceOfferingAction } from "../../../document-models/service-offering/gen/types.js";
+import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/contributor-billing/document-models/service-offering";
 interface TiersListProps {
     document: ServiceOfferingDocument;
     dispatch: DocumentDispatch<ServiceOfferingAction>;

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

@@ -1 +1 @@
-{"version":3,"file":"TiersList.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TiersList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAKtB,MAAM,wDAAwD,CAAC;AAchE,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAue/D"}
+{"version":3,"file":"TiersList.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TiersList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAKtB,MAAM,qEAAqE,CAAC;AAW7E,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAue/D"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { generateId } from "document-model/core";
-import { addTier, updateTier, updateTierPricing, deleteTier, addServiceLevel, updateServiceLevel, removeServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, } from "../../../document-models/service-offering/gen/creators.js";
+import { addTier, deleteTier, addServiceLevel, updateServiceLevel, removeServiceLevel, addUsageLimit, removeUsageLimit, } from "../../../document-models/service-offering/gen/creators.js";
 export function TiersList({ document, dispatch }) {
     const { state } = document;
     const globalState = state.global;

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

@@ -0,0 +1,10 @@
+import type { BillingCycle } from "@powerhousedao/contributor-billing/document-models/service-offering";
+export declare const BILLING_CYCLE_MONTHS: Record<BillingCycle, number>;
+export declare const BILLING_CYCLE_LABELS: Record<BillingCycle, string>;
+export declare const BILLING_CYCLE_SHORT_LABELS: Record<BillingCycle, string>;
+export declare function getMonthlyEquivalent(amount: number, billingCycle: BillingCycle): number;
+export declare function formatPrice(amount: number, currency?: string): string;
+export declare function formatMonthlyEquivalentDisplay(amount: number, billingCycle: BillingCycle, currency?: string): string;
+export declare const RECURRING_BILLING_CYCLES: BillingCycle[];
+export declare const ALL_BILLING_CYCLES: BillingCycle[];
+//# sourceMappingURL=pricing-utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-utils.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/pricing-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qEAAqE,CAAC;AAGxG,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM7D,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM7D,CAAC;AAGF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAMnE,CAAC;AAGF,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,GACzB,MAAM,CAGR;AAGD,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAc,GAAG,MAAM,CAM5E;AAID,wBAAgB,8BAA8B,CAC5C,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,QAAQ,GAAE,MAAc,GACvB,MAAM,CAaR;AAGD,eAAO,MAAM,wBAAwB,EAAE,YAAY,EAKlD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAM5C,CAAC"}

package/dist/editors/service-offering-editor/components/pricing-utils.js

@@ -0,0 +1,65 @@
+// Billing cycle months for monthly-equivalent calculation
+export const BILLING_CYCLE_MONTHS = {
+    MONTHLY: 1,
+    QUARTERLY: 3,
+    SEMI_ANNUAL: 6,
+    ANNUAL: 12,
+    ONE_TIME: 1,
+};
+// Human-readable billing cycle labels
+export const BILLING_CYCLE_LABELS = {
+    MONTHLY: "monthly",
+    QUARTERLY: "quarterly",
+    SEMI_ANNUAL: "semi-annually",
+    ANNUAL: "annually",
+    ONE_TIME: "one-time",
+};
+// Short labels for dropdowns
+export const BILLING_CYCLE_SHORT_LABELS = {
+    MONTHLY: "Month",
+    QUARTERLY: "Quarter",
+    SEMI_ANNUAL: "6 Months",
+    ANNUAL: "Year",
+    ONE_TIME: "One Time",
+};
+// Calculate monthly equivalent price
+export function getMonthlyEquivalent(amount, billingCycle) {
+    if (billingCycle === "ONE_TIME")
+        return amount;
+    return amount / BILLING_CYCLE_MONTHS[billingCycle];
+}
+// Format price with currency symbol
+export function formatPrice(amount, currency = "USD") {
+    const symbol = currency === "USD" ? "$" : currency;
+    return `${symbol}${amount.toLocaleString("en-US", {
+        minimumFractionDigits: amount % 1 === 0 ? 0 : 2,
+        maximumFractionDigits: 2,
+    })}`;
+}
+// Format monthly equivalent display: "$X/mo billed [cycle] at $Y"
+// For monthly: just "$X/mo"
+export function formatMonthlyEquivalentDisplay(amount, billingCycle, currency = "USD") {
+    if (billingCycle === "MONTHLY") {
+        return `${formatPrice(amount, currency)}/mo`;
+    }
+    if (billingCycle === "ONE_TIME") {
+        return formatPrice(amount, currency);
+    }
+    const monthlyEquivalent = getMonthlyEquivalent(amount, billingCycle);
+    const cycleLabel = BILLING_CYCLE_LABELS[billingCycle];
+    return `${formatPrice(monthlyEquivalent, currency)}/mo billed ${cycleLabel} at ${formatPrice(amount, currency)}`;
+}
+// Get available billing cycles (excluding ONE_TIME for most cases)
+export const RECURRING_BILLING_CYCLES = [
+    "MONTHLY",
+    "QUARTERLY",
+    "SEMI_ANNUAL",
+    "ANNUAL",
+];
+export const ALL_BILLING_CYCLES = [
+    "MONTHLY",
+    "QUARTERLY",
+    "SEMI_ANNUAL",
+    "ANNUAL",
+    "ONE_TIME",
+];

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

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/service-offering-editor/editor.tsx"],"names":[],"mappings":"AAYA,MAAM,CAAC,OAAO,UAAU,qBAAqB,4CAuF5C"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/service-offering-editor/editor.tsx"],"names":[],"mappings":"AAaA,MAAM,CAAC,OAAO,UAAU,qBAAqB,4CA6F5C"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { DocumentToolbar } from "@powerhousedao/design-system/connect";
 import { useSelectedServiceOfferingDocument } from "../../document-models/service-offering/hooks.js";
-import { TabNavigation } from "./components/TabNavigation.js";
+import { OfferingProgress } from "./components/OfferingProgress.js";
 import { ResourceTemplateSelector } from "./components/ResourceTemplateSelector.js";
 import { ServiceCatalog, } from "./components/ServiceCatalog.js";
 import { TierDefinition } from "./components/TierDefinition.js";
@@ -36,7 +36,7 @@ export default function ServiceOfferingEditor() {
                 return null;
         }
     };
-    return (_jsxs("div", { className: "so-editor", children: [_jsx("style", { children: editorStyles }), _jsx(DocumentToolbar, {}), _jsxs("div", { className: "so-editor__container", children: [_jsx(TabNavigation, { activeTab: activeTab, onTabChange: setActiveTab }), _jsx("div", { className: "so-editor__content", children: renderTabContent() })] })] }));
+    return (_jsxs("div", { className: "so-editor", children: [_jsx("style", { children: editorStyles }), _jsx(DocumentToolbar, {}), _jsxs("div", { className: "so-editor__container", children: [_jsx(OfferingProgress, { document: document, activeTab: activeTab, onTabChange: setActiveTab }), _jsx("div", { className: "so-editor__content", children: renderTabContent() })] })] }));
 }
 const editorStyles = `
   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

package/dist/editors/service-offering-editor/module.d.ts

@@ -1,4 +1,4 @@
 import type { EditorModule } from "document-model";
-/** Document editor module for the Service Offering document type */
+/** Document editor module for the "["powerhouse/service-offering"]" document type */
 export declare const ServiceOfferingEditor: EditorModule;
 //# sourceMappingURL=module.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../editors/service-offering-editor/module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,oEAAoE;AACpE,eAAO,MAAM,qBAAqB,EAAE,YAOnC,CAAC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../editors/service-offering-editor/module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,EAAE,YAOnC,CAAC"}

package/dist/editors/service-offering-editor/module.js

@@ -1,5 +1,5 @@
 import { lazy } from "react";
-/** Document editor module for the Service Offering document type */
+/** Document editor module for the "["powerhouse/service-offering"]" document type */
 export const ServiceOfferingEditor = {
     Component: lazy(() => import("./editor.js")),
     documentTypes: ["powerhouse/service-offering"],

package/dist/editors/service-subscriptions-editor/components/SubscriptionsList.js

@@ -55,7 +55,7 @@ function SubscriptionCard({ subscription, vendor, category, isDarkMode, }) {
     const cardClass = `p-4 rounded-lg border transition-colors ${isDarkMode
         ? "bg-gray-800 border-gray-700 hover:border-indigo-500"
         : "bg-white border-gray-200 hover:border-indigo-500 shadow-sm"}`;
-    return (_jsxs("div", { className: cardClass, children: [_jsxs("div", { className: "flex justify-between items-start mb-3", children: [_jsxs("div", { children: [_jsx("h3", { className: `text-base font-semibold ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: subscription.name }), _jsxs("div", { className: `text-sm mt-1 ${isDarkMode ? "text-gray-400" : "text-gray-500"}`, children: [vendor?.name ?? "Unknown vendor", category && ` • ${category.name}`] })] }), _jsxs("div", { className: getStatusClasses(subscription.status), children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }), subscription.status] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Plan" }), _jsx("span", { className: `font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: subscription.planName ?? "—" })] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Cost" }), _jsxs("span", { className: `font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: [formatCurrency(subscription.amount, subscription.currency), subscription.amount && (_jsxs("span", { className: `font-normal ${isDarkMode ? "text-gray-400" : "text-gray-500"}`, children: [" ", billingCycleLabels[subscription.billingCycle]] }))] })] }), subscription.nextBillingDate && (_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Next billing" }), _jsx("span", { className: `font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: subscription.nextBillingDate })] })), subscription.loginUrl && (_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Login" }), _jsx("a", { href: subscription.loginUrl, target: "_blank", rel: "noopener noreferrer", className: "text-indigo-500 hover:underline", children: "Open \u2192" })] }))] }), subscription.seats && (_jsxs("div", { className: `mt-3 pt-3 border-t ${isDarkMode ? "border-gray-700" : "border-gray-200"}`, children: [_jsxs("div", { className: "flex justify-between items-center mb-2", children: [_jsx("span", { className: `text-xs ${isDarkMode ? "text-gray-400" : "text-gray-500"}`, children: "Seats" }), _jsxs("span", { className: `text-xs font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: [subscription.seats.assignedMembers.length, " /", " ", subscription.seats.total] })] }), _jsx("div", { className: `h-1.5 rounded-full overflow-hidden ${isDarkMode ? "bg-gray-700" : "bg-gray-200"}`, children: _jsx("div", { className: "h-full bg-indigo-500 rounded-full transition-all duration-300", style: {
+    return (_jsxs("div", { className: cardClass, children: [_jsxs("div", { className: "flex justify-between items-start mb-3", children: [_jsxs("div", { children: [_jsx("h3", { className: `text-base font-semibold ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: subscription.name }), _jsxs("div", { className: `text-sm mt-1 ${isDarkMode ? "text-gray-400" : "text-gray-500"}`, children: [vendor?.name ?? "Unknown vendor", category && ` • ${category.name}`] })] }), _jsxs("div", { className: getStatusClasses(subscription.status), children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }), subscription.status] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Plan" }), _jsx("span", { className: `font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: subscription.planName ?? "—" })] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Cost" }), _jsxs("span", { className: `font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: [formatCurrency(subscription.amount ?? null, subscription.currency ?? null), subscription.amount && (_jsxs("span", { className: `font-normal ${isDarkMode ? "text-gray-400" : "text-gray-500"}`, children: [" ", billingCycleLabels[subscription.billingCycle]] }))] })] }), subscription.nextBillingDate && (_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Next billing" }), _jsx("span", { className: `font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: subscription.nextBillingDate })] })), subscription.loginUrl && (_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: isDarkMode ? "text-gray-400" : "text-gray-500", children: "Login" }), _jsx("a", { href: subscription.loginUrl, target: "_blank", rel: "noopener noreferrer", className: "text-indigo-500 hover:underline", children: "Open \u2192" })] }))] }), subscription.seats && (_jsxs("div", { className: `mt-3 pt-3 border-t ${isDarkMode ? "border-gray-700" : "border-gray-200"}`, children: [_jsxs("div", { className: "flex justify-between items-center mb-2", children: [_jsx("span", { className: `text-xs ${isDarkMode ? "text-gray-400" : "text-gray-500"}`, children: "Seats" }), _jsxs("span", { className: `text-xs font-medium ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: [subscription.seats.assignedMembers.length, " /", " ", subscription.seats.total] })] }), _jsx("div", { className: `h-1.5 rounded-full overflow-hidden ${isDarkMode ? "bg-gray-700" : "bg-gray-200"}`, children: _jsx("div", { className: "h-full bg-indigo-500 rounded-full transition-all duration-300", style: {
                                 width: `${(subscription.seats.assignedMembers.length / subscription.seats.total) * 100}%`,
                             } }) }), subscription.seats.assignedMembers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: subscription.seats.assignedMembers.map((memberId) => (_jsxs("span", { className: `text-xs px-2 py-0.5 rounded cursor-pointer ${isDarkMode
                                 ? "bg-gray-900 text-gray-400"

package/dist/editors/snapshot-report-editor/components/AddReportToRemoteDrive.js

@@ -5,7 +5,7 @@ import { useSelectedSnapshotReportDocument } from "../../hooks/useSnapshotReport
 export function useAddReportToRemoteDrive(ownerIdOverride) {
     const [selectedDocument] = useSelectedSnapshotReportDocument();
     const drives = useDrives();
-    const ownerId = ownerIdOverride ?? selectedDocument?.state?.global?.ownerId ?? "";
+    const ownerId = ownerIdOverride ?? selectedDocument?.state?.global?.ownerIds?.[0] ?? "";
     const ownerDrive = useMemo(() => {
         if (!drives || !ownerId)
             return undefined;

package/dist/editors/snapshot-report-editor/components/SetOwner.d.ts

@@ -1,8 +1,8 @@
-import { setOwnerId } from "../../../document-models/snapshot-report/gen/configuration/creators.js";
+import { addOwnerId, removeOwnerId } from "../../../document-models/snapshot-report/gen/configuration/creators.js";
 type SetOwnerProps = {
-    ownerId?: string | null;
-    dispatch: (action: ReturnType<typeof setOwnerId>) => void;
+    ownerIds: string[];
+    dispatch: (action: ReturnType<typeof addOwnerId> | ReturnType<typeof removeOwnerId>) => void;
 };
-export declare function SetOwner({ ownerId, dispatch }: SetOwnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SetOwner({ ownerIds, dispatch }: SetOwnerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SetOwner.d.ts.map

package/dist/editors/snapshot-report-editor/components/SetOwner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SetOwner.d.ts","sourceRoot":"","sources":["../../../../editors/snapshot-report-editor/components/SetOwner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,wEAAwE,CAAC;AAapG,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,aAAa,2CA4K5D"}
+{"version":3,"file":"SetOwner.d.ts","sourceRoot":"","sources":["../../../../editors/snapshot-report-editor/components/SetOwner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,EACV,aAAa,EACd,MAAM,wEAAwE,CAAC;AAahF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,CACR,MAAM,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,KACrE,IAAI,CAAC;CACX,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAsJ7D"}