@powerhousedao/service-offering 0.0.1

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/service-offering/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,EAClB,MAAM,kEAAkE,CAAC;AAQ1E,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,2CAyK9B"}

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

@@ -0,0 +1,391 @@
+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 { formatPrice } 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({
+        amount: "",
+    });
+    const handleAddOption = () => {
+        if (!newOption.amount)
+            return;
+        dispatch(addTierPricingOption({
+            tierId,
+            pricingOptionId: generateId(),
+            amount: parseFloat(newOption.amount),
+            currency: "USD",
+            isDefault: pricingOptions.length === 0,
+            lastModified: new Date().toISOString(),
+        }));
+        setNewOption({ 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" }) }), "Pricing Options"] }), !isAdding && (_jsxs("button", { onClick: () => {
+                                    setNewOption({ amount: "" });
+                                    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 Option"] }))] }), _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: [_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({ 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 priceDisplay = formatPrice(option.amount ?? 0, 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: "Option" }), _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: priceDisplay }), _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

@@ -0,0 +1,9 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
+interface TiersListProps {
+    document: ServiceOfferingDocument;
+    dispatch: DocumentDispatch<ServiceOfferingAction>;
+}
+export declare function TiersList({ document, dispatch }: TiersListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TiersList.d.ts.map

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

@@ -0,0 +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,kEAAkE,CAAC;AAW1E,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,2CA6c/D"}

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

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateId } from "document-model/core";
+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;
+    const tiers = globalState.tiers ?? [];
+    const services = globalState.services ?? [];
+    const [isAdding, setIsAdding] = useState(false);
+    const [expandedTierId, setExpandedTierId] = useState(null);
+    const [formData, setFormData] = useState({
+        name: "",
+        description: "",
+        amount: "",
+        currency: "USD",
+    });
+    const handleAddTier = () => {
+        if (!formData.name || !formData.amount)
+            return;
+        dispatch(addTier({
+            id: generateId(),
+            name: formData.name,
+            description: formData.description || undefined,
+            amount: parseFloat(formData.amount),
+            currency: formData.currency,
+            lastModified: new Date().toISOString(),
+        }));
+        setFormData({
+            name: "",
+            description: "",
+            amount: "",
+            currency: "USD",
+        });
+        setIsAdding(false);
+    };
+    const handleDeleteTier = (tierId) => {
+        if (confirm("Are you sure you want to delete this tier?")) {
+            dispatch(deleteTier({
+                id: tierId,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+    };
+    const handleAddServiceLevel = (tierId, serviceId) => {
+        dispatch(addServiceLevel({
+            tierId,
+            serviceLevelId: generateId(),
+            serviceId,
+            level: "INCLUDED",
+            optionGroupId: undefined,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleUpdateServiceLevel = (tierId, serviceLevelId, level) => {
+        dispatch(updateServiceLevel({
+            tierId,
+            serviceLevelId,
+            level: level,
+            optionGroupId: undefined,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleRemoveServiceLevel = (tierId, serviceLevelId) => {
+        dispatch(removeServiceLevel({
+            tierId,
+            serviceLevelId,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleAddUsageLimit = (tierId) => {
+        const metric = prompt("Enter metric name (e.g., 'Number of Contributors'):");
+        if (!metric)
+            return;
+        const serviceId = services[0]?.id || "";
+        if (!serviceId) {
+            alert("Please add a service first before adding usage limits.");
+            return;
+        }
+        const limitStr = prompt("Enter limit (leave empty for unlimited):");
+        const limit = limitStr ? parseInt(limitStr) : undefined;
+        dispatch(addUsageLimit({
+            tierId,
+            limitId: generateId(),
+            serviceId,
+            metric,
+            freeLimit: limit,
+            resetCycle: "MONTHLY",
+            notes: undefined,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleRemoveUsageLimit = (tierId, limitId) => {
+        dispatch(removeUsageLimit({
+            tierId,
+            limitId,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const getServiceLevelColor = (level) => {
+        switch (level) {
+            case "INCLUDED":
+                return "bg-green-100 text-green-800";
+            case "OPTIONAL":
+                return "bg-blue-100 text-blue-800";
+            case "NOT_INCLUDED":
+                return "bg-gray-100 text-gray-800";
+            default:
+                return "bg-gray-100 text-gray-800";
+        }
+    };
+    return (_jsxs("div", { className: "bg-white rounded-lg shadow-sm p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h2", { className: "text-2xl font-semibold text-gray-900", children: "Subscription Tiers" }), !isAdding && (_jsx("button", { onClick: () => setIsAdding(true), className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors", children: "+ Add Tier" }))] }), isAdding && (_jsxs("div", { className: "mb-4 p-4 bg-gray-50 rounded-md border border-gray-200", children: [_jsx("h3", { className: "text-lg font-medium text-gray-900 mb-3", children: "New Tier" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Name *" }), _jsx("input", { type: "text", value: formData.name, onChange: (e) => setFormData({ ...formData, name: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "e.g., Basic, Professional, Enterprise" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Amount *" }), _jsx("input", { type: "number", value: formData.amount, onChange: (e) => setFormData({ ...formData, amount: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "200", step: "0.01" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Currency" }), _jsxs("select", { value: formData.currency, onChange: (e) => setFormData({ ...formData, currency: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", children: [_jsx("option", { value: "USD", children: "USD" }), _jsx("option", { value: "EUR", children: "EUR" }), _jsx("option", { value: "GBP", children: "GBP" })] })] }), _jsxs("div", { className: "col-span-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Description" }), _jsx("textarea", { value: formData.description, onChange: (e) => setFormData({ ...formData, description: e.target.value }), rows: 2, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "Tier description..." })] })] }), _jsxs("div", { className: "flex items-center gap-2 mt-4", children: [_jsx("button", { onClick: handleAddTier, disabled: !formData.name || !formData.amount, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed", children: "Add Tier" }), _jsx("button", { onClick: () => {
+                                    setIsAdding(false);
+                                    setFormData({
+                                        name: "",
+                                        description: "",
+                                        amount: "",
+                                        currency: "USD",
+                                    });
+                                }, className: "px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors", children: "Cancel" })] })] })), tiers.length === 0 ? (_jsxs("div", { className: "text-center py-8 text-gray-500", children: [_jsx("p", { children: "No tiers added yet" }), _jsx("p", { className: "text-sm", children: "Click \"Add Tier\" to create your first tier" })] })) : (_jsx("div", { className: "space-y-4", children: tiers.map((tier) => (_jsxs("div", { className: "border border-gray-200 rounded-md overflow-hidden", children: [_jsx("div", { className: "bg-gray-50 p-4", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-xl font-semibold text-gray-900", children: tier.name }), tier.description && (_jsx("p", { className: "text-gray-600 text-sm mt-1", children: tier.description })), _jsx("div", { className: "mt-2 flex items-center gap-4", children: _jsxs("span", { className: "text-2xl font-bold text-gray-900", children: [tier.pricing.currency, " ", tier.pricing.amount] }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => setExpandedTierId(expandedTierId === tier.id ? null : tier.id), className: "px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded-md transition-colors", children: expandedTierId === tier.id ? "Collapse" : "Expand" }), _jsx("button", { onClick: () => handleDeleteTier(tier.id), className: "px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors", children: "Delete" })] })] }) }), expandedTierId === tier.id && (_jsxs("div", { className: "p-4 space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Service Levels" }), services.length > 0 && (_jsxs("select", { onChange: (e) => {
+                                                        if (e.target.value) {
+                                                            handleAddServiceLevel(tier.id, e.target.value);
+                                                            e.target.value = "";
+                                                        }
+                                                    }, className: "text-sm px-2 py-1 border border-gray-300 rounded-md", defaultValue: "", children: [_jsx("option", { value: "", children: "+ Add Service" }), services
+                                                            .filter((s) => !(tier.serviceLevels ?? []).some((sl) => sl.serviceId === s.id))
+                                                            .map((service) => (_jsx("option", { value: service.id, children: service.title }, service.id)))] }))] }), (tier.serviceLevels ?? []).length === 0 ? (_jsx("p", { className: "text-sm text-gray-500", children: "No services configured for this tier" })) : (_jsx("div", { className: "space-y-2", children: (tier.serviceLevels ?? []).map((sl) => {
+                                                const service = services.find((s) => s.id === sl.serviceId);
+                                                return (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded-md", children: [_jsx("div", { className: "flex-1", children: _jsx("span", { className: "text-sm font-medium text-gray-900", children: service?.title || "Unknown Service" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { value: sl.level, onChange: (e) => handleUpdateServiceLevel(tier.id, sl.id, e.target.value), className: `text-sm px-2 py-1 rounded-md border-0 ${getServiceLevelColor(sl.level)}`, children: [_jsx("option", { value: "INCLUDED", children: "Included" }), _jsx("option", { value: "OPTIONAL", children: "Optional" }), _jsx("option", { value: "NOT_INCLUDED", children: "Not Included" })] }), _jsx("button", { onClick: () => handleRemoveServiceLevel(tier.id, sl.id), className: "text-sm text-red-600 hover:bg-red-50 px-2 py-1 rounded-md", children: "Remove" })] })] }, sl.id));
+                                            }) }))] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Usage Limits" }), _jsx("button", { onClick: () => handleAddUsageLimit(tier.id), className: "text-sm text-blue-600 hover:bg-blue-50 px-2 py-1 rounded-md", children: "+ Add Limit" })] }), (tier.usageLimits ?? []).length === 0 ? (_jsx("p", { className: "text-sm text-gray-500", children: "No usage limits configured" })) : (_jsx("div", { className: "space-y-2", children: (tier.usageLimits ?? []).map((limit) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded-md", children: [_jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-sm font-medium text-gray-900", children: limit.metric }), _jsx("span", { className: "text-sm text-gray-600 ml-2", children: limit.freeLimit
+                                                                    ? `Up to ${limit.freeLimit}`
+                                                                    : "Unlimited" }), limit.resetCycle && (_jsxs("span", { className: "text-xs text-gray-500 ml-2", children: ["/ ", limit.resetCycle] }))] }), _jsx("button", { onClick: () => handleRemoveUsageLimit(tier.id, limit.id), className: "text-sm text-red-600 hover:bg-red-50 px-2 py-1 rounded-md", children: "Remove" })] }, limit.id))) }))] })] }))] }, tier.id))) }))] }));
+}

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

@@ -0,0 +1,10 @@
+import type { BillingCycle } from "@powerhousedao/service-offering/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,kEAAkE,CAAC;AAGrG,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

@@ -0,0 +1,2 @@
+export default function ServiceOfferingEditor(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

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

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