@powerhousedao/service-offering 0.0.1

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

@@ -0,0 +1,327 @@
+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 { OfferingProgress } from "./components/OfferingProgress.js";
+import { ResourceTemplateSelector } from "./components/ResourceTemplateSelector.js";
+import { ServiceCatalog } from "./components/ServiceCatalog.js";
+import { TierDefinition } from "./components/TierDefinition.js";
+import { TheMatrix } from "./components/TheMatrix.js";
+export default function ServiceOfferingEditor() {
+    const [document, dispatch] = useSelectedServiceOfferingDocument();
+    const [activeTab, setActiveTab] = useState("scope-facets");
+    if (!document) {
+        return (_jsxs("div", { className: "so-editor", children: [_jsx("style", { children: editorStyles }), _jsxs("div", { className: "so-empty-state", children: [_jsx("div", { className: "so-empty-state__icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }), _jsx("h2", { className: "so-empty-state__title", children: "No service offering selected" }), _jsx("p", { className: "so-empty-state__subtitle", children: "Select a document to start editing" })] })] }));
+    }
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case "scope-facets":
+                return (_jsx(ResourceTemplateSelector, { document: document, dispatch: dispatch }));
+            case "service-catalog":
+                return _jsx(ServiceCatalog, { document: document, dispatch: dispatch });
+            case "tier-definition":
+                return _jsx(TierDefinition, { document: document, dispatch: dispatch });
+            case "the-matrix":
+                return _jsx(TheMatrix, { document: document, dispatch: dispatch });
+            default:
+                return null;
+        }
+    };
+    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');
+
+  .so-editor {
+    --so-font-sans: 'DM Sans', system-ui, sans-serif;
+    --so-font-mono: 'DM Mono', 'SF Mono', monospace;
+
+    --so-slate-50: #f8fafc;
+    --so-slate-100: #f1f5f9;
+    --so-slate-200: #e2e8f0;
+    --so-slate-300: #cbd5e1;
+    --so-slate-400: #94a3b8;
+    --so-slate-500: #64748b;
+    --so-slate-600: #475569;
+    --so-slate-700: #334155;
+    --so-slate-800: #1e293b;
+    --so-slate-900: #0f172a;
+
+    --so-amber-50: #fffbeb;
+    --so-amber-100: #fef3c7;
+    --so-amber-200: #fde68a;
+    --so-amber-500: #f59e0b;
+    --so-amber-600: #d97706;
+    --so-amber-700: #b45309;
+
+    --so-emerald-50: #ecfdf5;
+    --so-emerald-100: #d1fae5;
+    --so-emerald-500: #10b981;
+    --so-emerald-600: #059669;
+    --so-emerald-700: #047857;
+
+    --so-violet-50: #f5f3ff;
+    --so-violet-100: #ede9fe;
+    --so-violet-200: #ddd6fe;
+    --so-violet-500: #8b5cf6;
+    --so-violet-600: #7c3aed;
+    --so-violet-700: #6d28d9;
+
+    --so-rose-50: #fff1f2;
+    --so-rose-100: #ffe4e6;
+    --so-rose-500: #f43f5e;
+    --so-rose-600: #e11d48;
+
+    --so-sky-50: #f0f9ff;
+    --so-sky-100: #e0f2fe;
+    --so-sky-500: #0ea5e9;
+    --so-sky-600: #0284c7;
+
+    --so-radius-sm: 6px;
+    --so-radius-md: 10px;
+    --so-radius-lg: 14px;
+    --so-radius-xl: 20px;
+
+    --so-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+    --so-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+    --so-shadow-lg: 0 10px 40px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
+    --so-shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(15, 23, 42, 0.06);
+
+    --so-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --so-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --so-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    font-family: var(--so-font-sans);
+    background: linear-gradient(135deg, var(--so-slate-100) 0%, var(--so-slate-50) 50%, #f0f4f8 100%);
+    min-height: 100%;
+    overflow-y: auto;
+  }
+
+  .so-editor__container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 24px 32px 48px;
+  }
+
+  .so-editor__content {
+    min-height: 500px;
+    animation: so-fade-in var(--so-transition-slow) ease-out;
+  }
+
+  @keyframes so-fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes so-scale-in {
+    from { opacity: 0; transform: scale(0.96); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  .so-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    text-align: center;
+    padding: 48px;
+  }
+
+  .so-empty-state__icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 24px;
+    color: var(--so-slate-300);
+    animation: so-float 3s ease-in-out infinite;
+  }
+
+  .so-empty-state__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  @keyframes so-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+  }
+
+  .so-empty-state__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+    margin: 0 0 8px;
+    letter-spacing: -0.02em;
+  }
+
+  .so-empty-state__subtitle {
+    font-size: 1rem;
+    color: var(--so-slate-500);
+    margin: 0;
+  }
+
+  /* Shared component styles */
+  .so-card {
+    background: white;
+    border-radius: var(--so-radius-lg);
+    box-shadow: var(--so-shadow-md);
+    border: 1px solid var(--so-slate-100);
+    transition: box-shadow var(--so-transition-base), transform var(--so-transition-base);
+  }
+
+  .so-card:hover {
+    box-shadow: var(--so-shadow-lg);
+  }
+
+  .so-card--interactive:hover {
+    transform: translateY(-2px);
+  }
+
+  .so-section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    letter-spacing: -0.02em;
+    margin: 0 0 20px;
+  }
+
+  .so-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--so-slate-500);
+    margin-bottom: 8px;
+  }
+
+  .so-input {
+    width: 100%;
+    padding: 12px 16px;
+    font-family: var(--so-font-sans);
+    font-size: 0.9375rem;
+    color: var(--so-slate-800);
+    background: var(--so-slate-50);
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    transition: all var(--so-transition-fast);
+  }
+
+  .so-input:hover {
+    border-color: var(--so-slate-300);
+    background: white;
+  }
+
+  .so-input:focus {
+    outline: none;
+    border-color: var(--so-violet-500);
+    background: white;
+    box-shadow: 0 0 0 3px var(--so-violet-100);
+  }
+
+  .so-input::placeholder {
+    color: var(--so-slate-400);
+  }
+
+  .so-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 20px;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: var(--so-radius-md);
+    border: none;
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .so-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .so-btn--primary {
+    background: linear-gradient(135deg, var(--so-violet-600) 0%, var(--so-violet-700) 100%);
+    color: white;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+  }
+
+  .so-btn--primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+  }
+
+  .so-btn--primary:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  .so-btn--secondary {
+    background: var(--so-slate-100);
+    color: var(--so-slate-700);
+  }
+
+  .so-btn--secondary:hover:not(:disabled) {
+    background: var(--so-slate-200);
+  }
+
+  .so-btn--ghost {
+    background: transparent;
+    color: var(--so-slate-600);
+  }
+
+  .so-btn--ghost:hover:not(:disabled) {
+    background: var(--so-slate-100);
+  }
+
+  .so-btn--danger {
+    background: var(--so-rose-50);
+    color: var(--so-rose-600);
+  }
+
+  .so-btn--danger:hover:not(:disabled) {
+    background: var(--so-rose-100);
+  }
+
+  .so-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 100px;
+  }
+
+  .so-badge--amber {
+    background: var(--so-amber-100);
+    color: var(--so-amber-700);
+  }
+
+  .so-badge--emerald {
+    background: var(--so-emerald-100);
+    color: var(--so-emerald-700);
+  }
+
+  .so-badge--violet {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
+  }
+
+  .so-badge--sky {
+    background: var(--so-sky-100);
+    color: var(--so-sky-600);
+  }
+
+  .so-badge--slate {
+    background: var(--so-slate-100);
+    color: var(--so-slate-600);
+  }
+
+  .so-mono {
+    font-family: var(--so-font-mono);
+  }
+`;

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

@@ -0,0 +1,4 @@
+import type { EditorModule } from "document-model";
+/** 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

@@ -0,0 +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,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,EAAE,YAOnC,CAAC"}

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

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

package/dist/editors/subscription-instance-editor/components/BillingPanel.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { SubscriptionInstanceAction, SubscriptionInstanceDocument } from "@powerhousedao/service-offering/document-models/subscription-instance";
+import type { ViewMode } from "../types.js";
+interface BillingPanelProps {
+    document: SubscriptionInstanceDocument;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+    mode: ViewMode;
+}
+export declare function BillingPanel({ document }: BillingPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BillingPanel.d.ts.map

package/dist/editors/subscription-instance-editor/components/BillingPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingPanel.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/BillingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uEAAuE,CAAC;AAC/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,iBAAiB;IACzB,QAAQ,EAAE,4BAA4B,CAAC;IACvC,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;IACvD,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAqQ3D"}

package/dist/editors/subscription-instance-editor/components/BillingPanel.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function BillingPanel({ document }) {
+    const state = document.state.global;
+    const formatCurrency = (amount, currency) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: currency || "USD",
+        }).format(amount);
+    };
+    const formatDate = (date) => {
+        if (!date)
+            return "—";
+        return new Date(date).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+        });
+    };
+    // Compute service-level billing breakdown from services
+    const serviceLines = [];
+    for (const svc of state.services) {
+        if (svc.recurringCost) {
+            serviceLines.push({
+                name: svc.name || "Unnamed Service",
+                amount: svc.recurringCost.amount,
+                currency: svc.recurringCost.currency,
+                cycle: svc.recurringCost.billingCycle || null,
+            });
+        }
+    }
+    // Include group services
+    for (const group of state.serviceGroups) {
+        for (const svc of group.services) {
+            if (svc.recurringCost) {
+                serviceLines.push({
+                    name: `${svc.name || "Unnamed"} (${group.name || "Group"})`,
+                    amount: svc.recurringCost.amount,
+                    currency: svc.recurringCost.currency,
+                    cycle: svc.recurringCost.billingCycle || null,
+                });
+            }
+        }
+    }
+    // Compute overage estimates from metrics
+    const overageLines = [];
+    for (const svc of state.services) {
+        for (const metric of svc.metrics) {
+            if (metric.limit != null &&
+                metric.currentUsage > metric.limit &&
+                metric.unitCost) {
+                const excess = metric.currentUsage - metric.limit;
+                const total = excess * metric.unitCost.amount;
+                overageLines.push({
+                    name: `${metric.name} overage`,
+                    excess,
+                    unitCost: metric.unitCost.amount,
+                    currency: metric.unitCost.currency,
+                    total,
+                });
+            }
+        }
+    }
+    const computedTotal = serviceLines.reduce((sum, l) => sum + l.amount, 0);
+    const overageTotal = overageLines.reduce((sum, l) => sum + l.total, 0);
+    const projectedTotal = state.projectedBillAmount != null
+        ? state.projectedBillAmount
+        : computedTotal + overageTotal;
+    const projectedCurrency = state.projectedBillCurrency || serviceLines[0]?.currency || "USD";
+    const hasAnyData = state.nextBillingDate ||
+        state.projectedBillAmount != null ||
+        serviceLines.length > 0;
+    return (_jsxs("div", { className: "si-panel", children: [_jsx("div", { className: "si-panel__header", children: _jsx("h3", { className: "si-panel__title", children: "Billing Projection" }) }), !hasAnyData ? (_jsxs("div", { className: "si-empty", children: [_jsx("svg", { className: "si-empty__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z" }) }), _jsx("p", { className: "si-empty__text", children: "No billing data yet" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "si-billing-summary", children: [_jsxs("div", { className: "si-billing-summary__item", children: [_jsx("span", { className: "si-billing-summary__label", children: "Next Payment" }), _jsx("span", { className: "si-billing-summary__value", children: formatDate(state.nextBillingDate) })] }), _jsxs("div", { className: "si-billing-summary__item", children: [_jsx("span", { className: "si-billing-summary__label", children: "Projected Amount" }), _jsx("span", { className: "si-billing-summary__value si-billing-summary__value--warning", children: formatCurrency(projectedTotal, projectedCurrency) })] }), _jsxs("div", { className: "si-billing-summary__item", children: [_jsx("span", { className: "si-billing-summary__label", children: "Currency" }), _jsx("span", { className: "si-billing-summary__value", children: projectedCurrency })] })] }), serviceLines.length > 0 && (_jsxs("div", { style: { marginBottom: overageLines.length > 0 ? 16 : 0 }, children: [_jsx("div", { style: {
+                                    fontSize: "0.75rem",
+                                    fontWeight: 600,
+                                    textTransform: "uppercase",
+                                    letterSpacing: "0.05em",
+                                    color: "var(--si-slate-500)",
+                                    marginBottom: 8,
+                                }, children: "Recurring Services" }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: serviceLines.map((line, idx) => (_jsxs("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "space-between",
+                                        alignItems: "center",
+                                        padding: "8px 12px",
+                                        background: "var(--si-slate-50)",
+                                        borderRadius: "var(--si-radius-sm)",
+                                        fontSize: "0.875rem",
+                                    }, children: [_jsxs("span", { style: { color: "var(--si-slate-700)" }, children: [line.name, line.cycle && (_jsxs("span", { style: {
+                                                        color: "var(--si-slate-400)",
+                                                        fontSize: "0.75rem",
+                                                        marginLeft: 6,
+                                                    }, children: ["/ ", line.cycle.toLowerCase().replace("_", " ")] }))] }), _jsx("span", { style: {
+                                                fontWeight: 600,
+                                                color: "var(--si-slate-800)",
+                                            }, children: formatCurrency(line.amount, line.currency) })] }, idx))) })] })), overageLines.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                                    fontSize: "0.75rem",
+                                    fontWeight: 600,
+                                    textTransform: "uppercase",
+                                    letterSpacing: "0.05em",
+                                    color: "var(--si-amber-600)",
+                                    marginBottom: 8,
+                                }, children: "Overage Estimates" }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: overageLines.map((line, idx) => (_jsxs("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "space-between",
+                                        alignItems: "center",
+                                        padding: "8px 12px",
+                                        background: "var(--si-amber-50)",
+                                        borderRadius: "var(--si-radius-sm)",
+                                        fontSize: "0.875rem",
+                                        border: "1px solid var(--si-amber-100)",
+                                    }, children: [_jsxs("span", { style: { color: "var(--si-amber-700)" }, children: [line.name, _jsxs("span", { style: {
+                                                        color: "var(--si-amber-500)",
+                                                        fontSize: "0.75rem",
+                                                        marginLeft: 6,
+                                                    }, children: [line.excess, " x", " ", formatCurrency(line.unitCost, line.currency)] })] }), _jsx("span", { style: {
+                                                fontWeight: 600,
+                                                color: "var(--si-amber-700)",
+                                            }, children: formatCurrency(line.total, line.currency) })] }, idx))) })] }))] }))] }));
+}

package/dist/editors/subscription-instance-editor/components/CustomerInfo.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { SubscriptionInstanceAction, SubscriptionInstanceDocument } from "@powerhousedao/service-offering/document-models/subscription-instance";
+import type { ViewMode } from "../types.js";
+interface CustomerInfoProps {
+    document: SubscriptionInstanceDocument;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+    mode: ViewMode;
+}
+export declare function CustomerInfo({ document, dispatch, mode }: CustomerInfoProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CustomerInfo.d.ts.map

package/dist/editors/subscription-instance-editor/components/CustomerInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerInfo.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/CustomerInfo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAE7B,MAAM,uEAAuE,CAAC;AAC/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAI5C,UAAU,iBAAiB;IACzB,QAAQ,EAAE,4BAA4B,CAAC;IACvC,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;IACvD,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAoQ3E"}

package/dist/editors/subscription-instance-editor/components/CustomerInfo.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { setCustomerType } from "../../../document-models/subscription-instance/gen/customer/creators.js";
+import { updateCustomerInfo } from "../../../document-models/subscription-instance/gen/subscription/creators.js";
+export function CustomerInfo({ document, dispatch, mode }) {
+    const state = document.state.global;
+    // Edit states for different fields
+    const [isEditingName, setIsEditingName] = useState(false);
+    const [editName, setEditName] = useState(state.customerName || "");
+    const [isEditingEmail, setIsEditingEmail] = useState(false);
+    const [editEmail, setEditEmail] = useState(state.customerEmail || "");
+    const [isEditingType, setIsEditingType] = useState(false);
+    const [editType, setEditType] = useState(state.customerType || "INDIVIDUAL");
+    const [editMemberCount, setEditMemberCount] = useState(state.teamMemberCount || 1);
+    // Name handlers
+    const handleSaveName = useCallback(() => {
+        dispatch(updateCustomerInfo({
+            customerName: editName || undefined,
+        }));
+        setIsEditingName(false);
+    }, [dispatch, editName]);
+    const handleCancelName = useCallback(() => {
+        setEditName(state.customerName || "");
+        setIsEditingName(false);
+    }, [state.customerName]);
+    // Email handlers
+    const handleSaveEmail = useCallback(() => {
+        dispatch(updateCustomerInfo({
+            customerEmail: editEmail || undefined,
+        }));
+        setIsEditingEmail(false);
+    }, [dispatch, editEmail]);
+    const handleCancelEmail = useCallback(() => {
+        setEditEmail(state.customerEmail || "");
+        setIsEditingEmail(false);
+    }, [state.customerEmail]);
+    // Type handlers
+    const handleSaveType = useCallback(() => {
+        dispatch(setCustomerType({
+            customerType: editType,
+            teamMemberCount: editType === "TEAM" ? editMemberCount : undefined,
+        }));
+        setIsEditingType(false);
+    }, [dispatch, editType, editMemberCount]);
+    const handleCancelType = useCallback(() => {
+        setEditType(state.customerType || "INDIVIDUAL");
+        setEditMemberCount(state.teamMemberCount || 1);
+        setIsEditingType(false);
+    }, [state.customerType, state.teamMemberCount]);
+    const isValidEmail = (email) => {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    };
+    // Edit button component for reuse
+    const EditButton = ({ onClick }) => (_jsx("button", { type: "button", className: "si-customer-info__edit-btn", onClick: onClick, "aria-label": "Edit", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" }) }) }));
+    return (_jsxs("div", { className: "si-panel si-panel--compact", children: [_jsx("div", { className: "si-panel__header", children: _jsx("h3", { className: "si-panel__title", children: mode === "client" ? "Your Information" : "Customer Information" }) }), _jsxs("div", { className: "si-customer-info", children: [_jsxs("div", { className: "si-customer-info__section", children: [_jsxs("div", { className: "si-customer-info__row", children: [_jsx("span", { className: "si-customer-info__label", children: "Name" }), isEditingName ? (_jsxs("div", { className: "si-customer-info__edit-field", children: [_jsx("input", { type: "text", className: "si-input si-input--sm", value: editName, onChange: (e) => setEditName(e.target.value), placeholder: "Enter name..." }), _jsxs("div", { className: "si-customer-info__edit-actions", children: [_jsx("button", { type: "button", className: "si-btn si-btn--xs si-btn--ghost", onClick: handleCancelName, children: "Cancel" }), _jsx("button", { type: "button", className: "si-btn si-btn--xs si-btn--primary", onClick: handleSaveName, children: "Save" })] })] })) : (_jsxs("span", { className: "si-customer-info__value", children: [state.customerName || (_jsx("span", { className: "si-customer-info__value--empty", children: "Not set" })), _jsx(EditButton, { onClick: () => setIsEditingName(true) })] }))] }), _jsxs("div", { className: "si-customer-info__row", children: [_jsx("span", { className: "si-customer-info__label", children: "Email" }), isEditingEmail ? (_jsxs("div", { className: "si-customer-info__edit-field", children: [_jsx("input", { type: "email", className: "si-input si-input--sm", value: editEmail, onChange: (e) => setEditEmail(e.target.value), placeholder: "email@example.com" }), _jsxs("div", { className: "si-customer-info__edit-actions", children: [_jsx("button", { type: "button", className: "si-btn si-btn--xs si-btn--ghost", onClick: handleCancelEmail, children: "Cancel" }), _jsx("button", { type: "button", className: "si-btn si-btn--xs si-btn--primary", onClick: handleSaveEmail, disabled: editEmail !== "" && !isValidEmail(editEmail), children: "Save" })] })] })) : (_jsxs("span", { className: "si-customer-info__value", children: [state.customerEmail || (_jsx("span", { className: "si-customer-info__value--empty", children: "Not set" })), _jsx(EditButton, { onClick: () => setIsEditingEmail(true) })] }))] }), _jsxs("div", { className: "si-customer-info__row", children: [_jsx("span", { className: "si-customer-info__label", children: "Type" }), isEditingType ? (_jsxs("div", { className: "si-customer-info__edit-field", children: [_jsxs("div", { className: "si-customer-info__type-edit", children: [_jsxs("select", { className: "si-input si-input--sm si-select", value: editType, onChange: (e) => setEditType(e.target.value), children: [_jsx("option", { value: "INDIVIDUAL", children: "Individual" }), _jsx("option", { value: "TEAM", children: "Team" })] }), editType === "TEAM" && (_jsx("input", { type: "number", className: "si-input si-input--sm si-input--number", value: editMemberCount, onChange: (e) => setEditMemberCount(parseInt(e.target.value) || 1), min: "1", placeholder: "Members" }))] }), _jsxs("div", { className: "si-customer-info__edit-actions", children: [_jsx("button", { type: "button", className: "si-btn si-btn--xs si-btn--ghost", onClick: handleCancelType, children: "Cancel" }), _jsx("button", { type: "button", className: "si-btn si-btn--xs si-btn--primary", onClick: handleSaveType, children: "Save" })] })] })) : (_jsxs("span", { className: "si-customer-info__value", children: [state.customerType ? (_jsxs(_Fragment, { children: [state.customerType === "TEAM" ? "Team" : "Individual", state.customerType === "TEAM" && state.teamMemberCount && (_jsxs("span", { className: "si-customer-info__detail", children: [" ", "(", state.teamMemberCount, " members)"] }))] })) : (_jsx("span", { className: "si-customer-info__value--empty", children: "Not set" })), _jsx(EditButton, { onClick: () => setIsEditingType(true) })] }))] })] }), mode === "operator" && state.budget && (_jsx("div", { className: "si-customer-info__section", children: _jsxs("div", { className: "si-customer-info__row", children: [_jsx("span", { className: "si-customer-info__label", children: "Budget Category" }), _jsx("span", { className: "si-customer-info__value", children: state.budget.label })] }) }))] })] }));
+}

package/dist/editors/subscription-instance-editor/components/ImportServiceConfigButton.d.ts

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

package/dist/editors/subscription-instance-editor/components/ImportServiceConfigButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImportServiceConfigButton.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/ImportServiceConfigButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uEAAuE,CAAC;AA0H/E,UAAU,8BAA8B;IACtC,QAAQ,EAAE,4BAA4B,CAAC;IACvC,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;CACxD;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,QAAQ,GACT,EAAE,8BAA8B,2CAmFhC"}