@powerhousedao/contributor-billing 0.1.40 → 0.1.42

package/dist/editors/service-offering-editor/components/TierDefinition.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 TierDefinitionProps {
     document: ServiceOfferingDocument;
     dispatch: DocumentDispatch<ServiceOfferingAction>;

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

@@ -1 +1 @@
-{"version":3,"file":"TierDefinition.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TierDefinition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAGtB,MAAM,wDAAwD,CAAC;AAQhE,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAkiBD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAgOzE"}
+{"version":3,"file":"TierDefinition.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TierDefinition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAGtB,MAAM,qEAAqE,CAAC;AAQ7E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAi7BD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA+RzE"}

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

@@ -2,6 +2,57 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import { generateId } from "document-model/core";
 import { addTier, updateTier, updateTierPricing, deleteTier, } from "../../../document-models/service-offering/gen/creators.js";
+// Calculate price per day for mental accounting display
+const BILLING_CYCLE_DAYS = {
+    MONTHLY: 30,
+    QUARTERLY: 90,
+    SEMI_ANNUAL: 180,
+    ANNUAL: 365,
+    ONE_TIME: 1,
+};
+function getPricePerDay(amount, billingCycle) {
+    if (billingCycle === "ONE_TIME")
+        return "";
+    const perDay = amount / BILLING_CYCLE_DAYS[billingCycle];
+    return perDay.toFixed(2);
+}
+// Determine which tier should show "Most Popular" badge
+// Uses middle-tier heuristic (Good-Better-Best psychology)
+function getRecommendedTierIndex(tiers) {
+    if (tiers.length < 2)
+        return -1;
+    if (tiers.length === 2)
+        return 1; // Second tier for 2-tier setup
+    // For 3+ tiers, recommend the middle tier (or middle-right for even counts)
+    return Math.floor(tiers.length / 2);
+}
+// Charm Pricing - Left-digit bias pricing suggestions
+// Convert any price to nearest charm prices (ending in .99 or .97)
+function getCharmPriceSuggestions(currentPrice) {
+    if (currentPrice <= 0)
+        return [9.99, 19.99, 29.99];
+    const suggestions = [];
+    const roundedDown = Math.floor(currentPrice);
+    const roundedUp = Math.ceil(currentPrice);
+    // Lower charm price (X9.99 below current)
+    const lowerCharm = Math.max(0, roundedDown - (roundedDown % 10) - 1) + 9.99;
+    if (lowerCharm > 0 && lowerCharm !== currentPrice) {
+        suggestions.push(lowerCharm);
+    }
+    // Nearest .99 at current level
+    const nearestCharm = roundedUp - 0.01;
+    if (nearestCharm > 0 &&
+        nearestCharm !== currentPrice &&
+        !suggestions.includes(nearestCharm)) {
+        suggestions.push(nearestCharm);
+    }
+    // Higher charm price (X9.99 above current)
+    const higherCharm = roundedUp + (10 - (roundedUp % 10)) - 0.01;
+    if (higherCharm !== currentPrice && !suggestions.includes(higherCharm)) {
+        suggestions.push(higherCharm);
+    }
+    return suggestions.slice(0, 3).sort((a, b) => a - b);
+}
 const BILLING_CYCLES = [
     { value: "MONTHLY", label: "Month" },
     { value: "QUARTERLY", label: "Quarter" },
@@ -20,6 +71,102 @@ const TIER_ACCENTS = [
     { color: "var(--so-sky-500)", bg: "var(--so-sky-50)", name: "sky" },
     { color: "var(--so-rose-500)", bg: "var(--so-rose-50)", name: "rose" },
 ];
+const TIER_PRESETS = [
+    {
+        name: "Standard 3-Tier",
+        description: "Basic → Professional → Enterprise",
+        icon: "📊",
+        tiers: [
+            {
+                name: "Basic",
+                amount: 99,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Professional",
+                amount: 299,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Enterprise",
+                amount: null,
+                billingCycle: "MONTHLY",
+                isCustomPricing: true,
+            },
+        ],
+    },
+    {
+        name: "Freemium Model",
+        description: "Free → Pro → Business",
+        icon: "🚀",
+        tiers: [
+            {
+                name: "Free",
+                amount: 0,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Pro",
+                amount: 49,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Business",
+                amount: 149,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+        ],
+    },
+    {
+        name: "Simple 2-Tier",
+        description: "Starter → Growth",
+        icon: "⚡",
+        tiers: [
+            {
+                name: "Starter",
+                amount: 79,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+            {
+                name: "Growth",
+                amount: 199,
+                billingCycle: "MONTHLY",
+                isCustomPricing: false,
+            },
+        ],
+    },
+    {
+        name: "Annual Focus",
+        description: "Annual pricing with discounts",
+        icon: "📅",
+        tiers: [
+            {
+                name: "Essential",
+                amount: 990,
+                billingCycle: "ANNUAL",
+                isCustomPricing: false,
+            },
+            {
+                name: "Professional",
+                amount: 2990,
+                billingCycle: "ANNUAL",
+                isCustomPricing: false,
+            },
+            {
+                name: "Enterprise",
+                amount: null,
+                billingCycle: "ANNUAL",
+                isCustomPricing: true,
+            },
+        ],
+    },
+];
 const tierStyles = `
   .tier-def {
     display: flex;
@@ -42,6 +189,7 @@ const tierStyles = `
     overflow: hidden;
     transition: var(--so-transition-base);
     animation: tier-slide-up 0.3s ease-out;
+    position: relative;
   }
 
   .tier-card:hover {
@@ -49,6 +197,42 @@ const tierStyles = `
     transform: translateY(-2px);
   }
 
+  /* Popular/Recommended Tier - Social Proof */
+  .tier-card--popular {
+    border: 2px solid var(--so-violet-300);
+    transform: scale(1.02);
+    z-index: 1;
+  }
+
+  .tier-card--popular:hover {
+    transform: scale(1.02) translateY(-2px);
+  }
+
+  .tier-card__popular-banner {
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.875rem;
+    background: linear-gradient(135deg, var(--so-violet-600) 0%, var(--so-violet-700) 100%);
+    color: white;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+    z-index: 2;
+  }
+
+  .tier-card__popular-banner svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
   @keyframes tier-slide-up {
     from {
       opacity: 0;
@@ -221,6 +405,97 @@ const tierStyles = `
     background-size: 1rem;
   }
 
+  /* Price Per Day Breakdown - Mental Accounting */
+  .tier-card__price-breakdown {
+    margin-top: 0.625rem;
+    padding-top: 0.625rem;
+    border-top: 1px dashed var(--so-slate-200);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .tier-card__per-day {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+  }
+
+  .tier-card__per-day-amount {
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--so-emerald-600);
+  }
+
+  .tier-card__per-day-label {
+    font-size: 0.6875rem;
+    color: var(--so-slate-500);
+  }
+
+  .tier-card__comparison {
+    font-size: 0.625rem;
+    color: var(--so-slate-400);
+    font-style: italic;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  /* Charm Pricing Suggestions */
+  .tier-card__charm-pricing {
+    margin-top: 0.625rem;
+    padding-top: 0.625rem;
+    border-top: 1px dashed var(--so-slate-200);
+  }
+
+  .tier-card__charm-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.625rem;
+    font-weight: 500;
+    color: var(--so-violet-600);
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .tier-card__charm-label svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .tier-card__charm-options {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .tier-card__charm-btn {
+    padding: 0.25rem 0.625rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--so-slate-600);
+    background: var(--so-slate-100);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .tier-card__charm-btn:hover {
+    background: var(--so-violet-50);
+    border-color: var(--so-violet-300);
+    color: var(--so-violet-700);
+  }
+
+  .tier-card__charm-btn--active {
+    background: var(--so-violet-100);
+    border-color: var(--so-violet-400);
+    color: var(--so-violet-700);
+  }
+
   /* Description */
   .tier-card__description {
     margin-top: 1rem;
@@ -506,6 +781,109 @@ const tierStyles = `
     background: var(--so-slate-200);
   }
 
+  /* Tier Presets - Quick Start Templates */
+  .tier-presets {
+    background: linear-gradient(135deg, var(--so-violet-50) 0%, var(--so-sky-50) 100%);
+    border-radius: var(--so-radius-lg);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--so-violet-100);
+  }
+
+  .tier-presets__header {
+    margin-bottom: 1.25rem;
+  }
+
+  .tier-presets__title {
+    font-family: var(--so-font-sans);
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--so-slate-800);
+    margin: 0 0 0.375rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .tier-presets__title::before {
+    content: '⚡';
+  }
+
+  .tier-presets__subtitle {
+    font-size: 0.875rem;
+    color: var(--so-slate-600);
+    margin: 0;
+  }
+
+  .tier-presets__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1rem;
+  }
+
+  .tier-preset-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.25rem;
+    background: white;
+    border: 2px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-align: left;
+  }
+
+  .tier-preset-card:hover {
+    border-color: var(--so-violet-400);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
+    transform: translateY(-2px);
+  }
+
+  .tier-preset-card__icon {
+    font-size: 1.5rem;
+  }
+
+  .tier-preset-card__content {
+    flex: 1;
+  }
+
+  .tier-preset-card__name {
+    font-family: var(--so-font-sans);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    margin: 0 0 0.25rem;
+  }
+
+  .tier-preset-card__desc {
+    font-size: 0.8125rem;
+    color: var(--so-slate-500);
+    margin: 0;
+  }
+
+  .tier-preset-card__preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--so-slate-100);
+  }
+
+  .tier-preset-card__tier {
+    font-family: var(--so-font-mono);
+    font-size: 0.6875rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--so-slate-100);
+    color: var(--so-slate-600);
+    border-radius: var(--so-radius-sm);
+  }
+
+  .tier-preset-card:hover .tier-preset-card__tier {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
+  }
+
   /* Info Notice */
   .tier-notice {
     display: flex;
@@ -585,8 +963,26 @@ export function TierDefinition({ document, dispatch }) {
             lastModified: new Date().toISOString(),
         }));
     };
+    // Apply a preset tier configuration - Default Effect
+    const handleApplyPreset = (preset) => {
+        const now = new Date().toISOString();
+        preset.tiers.forEach((tierConfig) => {
+            dispatch(addTier({
+                id: generateId(),
+                name: tierConfig.name,
+                amount: tierConfig.isCustomPricing
+                    ? undefined
+                    : (tierConfig.amount ?? undefined),
+                currency: "USD",
+                billingCycle: tierConfig.billingCycle,
+                isCustomPricing: tierConfig.isCustomPricing,
+                lastModified: now,
+            }));
+        });
+    };
     const getTierAccent = (index) => TIER_ACCENTS[index % TIER_ACCENTS.length];
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: tierStyles }), _jsxs("div", { className: "tier-def", children: [_jsxs("div", { className: "tier-def__grid", children: [tiers.map((tier, index) => (_jsx(TierCard, { tier: tier, accent: getTierAccent(index), dispatch: dispatch, onDelete: () => handleDeleteTier(tier.id) }, tier.id))), isAddingTier ? (_jsxs("div", { className: "tier-form-card", children: [_jsx("h3", { className: "tier-form-card__title", children: "New Subscription Tier" }), _jsxs("div", { className: "tier-form-card__field", children: [_jsx("label", { className: "tier-form-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: newTier.name, onChange: (e) => setNewTier({ ...newTier, name: e.target.value }), placeholder: "e.g., Basic, Professional", className: "tier-form-card__input", autoFocus: true })] }), _jsxs("label", { className: "tier-form-card__toggle", children: [_jsx("input", { type: "checkbox", checked: newTier.isCustomPricing, onChange: (e) => setNewTier({
+    const recommendedTierIndex = getRecommendedTierIndex(tiers);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: tierStyles }), _jsxs("div", { className: "tier-def", children: [tiers.length === 0 && (_jsxs("div", { className: "tier-presets", children: [_jsxs("div", { className: "tier-presets__header", children: [_jsx("h3", { className: "tier-presets__title", children: "Quick Start with a Template" }), _jsx("p", { className: "tier-presets__subtitle", children: "Choose a pricing structure to get started quickly, or create custom tiers below" })] }), _jsx("div", { className: "tier-presets__grid", children: TIER_PRESETS.map((preset) => (_jsxs("button", { onClick: () => handleApplyPreset(preset), className: "tier-preset-card", children: [_jsx("span", { className: "tier-preset-card__icon", children: preset.icon }), _jsxs("div", { className: "tier-preset-card__content", children: [_jsx("h4", { className: "tier-preset-card__name", children: preset.name }), _jsx("p", { className: "tier-preset-card__desc", children: preset.description })] }), _jsx("div", { className: "tier-preset-card__preview", children: preset.tiers.map((t, i) => (_jsxs("span", { className: "tier-preset-card__tier", children: [t.name, t.isCustomPricing ? "" : ` $${t.amount}`] }, i))) })] }, preset.name))) })] })), _jsxs("div", { className: "tier-def__grid", children: [tiers.map((tier, index) => (_jsx(TierCard, { tier: tier, accent: getTierAccent(index), dispatch: dispatch, onDelete: () => handleDeleteTier(tier.id), isRecommended: index === recommendedTierIndex }, tier.id))), isAddingTier ? (_jsxs("div", { className: "tier-form-card", children: [_jsx("h3", { className: "tier-form-card__title", children: "New Subscription Tier" }), _jsxs("div", { className: "tier-form-card__field", children: [_jsx("label", { className: "tier-form-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: newTier.name, onChange: (e) => setNewTier({ ...newTier, name: e.target.value }), placeholder: "e.g., Basic, Professional", className: "tier-form-card__input", autoFocus: true })] }), _jsxs("label", { className: "tier-form-card__toggle", children: [_jsx("input", { type: "checkbox", checked: newTier.isCustomPricing, onChange: (e) => setNewTier({
                                                     ...newTier,
                                                     isCustomPricing: e.target.checked,
                                                     amount: "",
@@ -605,7 +1001,7 @@ export function TierDefinition({ document, dispatch }) {
                                                     });
                                                 }, className: "tier-form-card__btn tier-form-card__btn--secondary", children: "Cancel" })] })] })) : (_jsxs("button", { onClick: () => setIsAddingTier(true), className: "tier-add-card", children: [_jsx("div", { className: "tier-add-card__icon-wrap", children: _jsx("svg", { className: "tier-add-card__icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }), _jsx("span", { className: "tier-add-card__text", children: "Add Subscription Tier" })] }))] }), _jsxs("div", { className: "tier-notice", children: [_jsx("svg", { className: "tier-notice__icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "tier-notice__content", children: [_jsx("p", { className: "tier-notice__title", children: "Setup fees are managed at the service group level" }), _jsx("p", { className: "tier-notice__text", children: "Configure setup fees for \"Setup & Formation\" service groups in the Service Catalog. The setup fee applies to all tiers when those services are included." })] })] })] })] }));
 }
-function TierCard({ tier, accent, dispatch, onDelete }) {
+function TierCard({ tier, accent, dispatch, onDelete, isRecommended, }) {
     const [localName, setLocalName] = useState(tier.name);
     const [localAmount, setLocalAmount] = useState(tier.pricing.amount?.toString() || "");
     const [localBillingCycle, setLocalBillingCycle] = useState(tier.pricing.billingCycle);
@@ -645,9 +1041,15 @@ function TierCard({ tier, accent, dispatch, onDelete }) {
             lastModified: new Date().toISOString(),
         }));
     };
-    return (_jsxs("div", { className: "tier-card", children: [_jsx("div", { className: "tier-card__accent", style: { background: accent.color } }), _jsxs("div", { className: "tier-card__body", children: [_jsxs("div", { className: "tier-card__header", children: [_jsxs("div", { className: "tier-card__name-group", children: [_jsx("span", { className: "tier-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: localName, onChange: (e) => setLocalName(e.target.value), onBlur: handleNameBlur, className: "tier-card__name-input" })] }), _jsx("button", { onClick: onDelete, className: "tier-card__delete-btn", children: _jsx("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), isCustomPricing && (_jsxs("div", { className: "tier-card__custom-badge", children: [_jsx("svg", { className: "tier-card__custom-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "tier-card__custom-text", children: [_jsx("span", { className: "tier-card__custom-title", children: "Custom Pricing" }), _jsx("span", { className: "tier-card__custom-desc", children: "Price varies per client" })] })] })), !isCustomPricing && (_jsxs("div", { className: "tier-card__pricing", children: [_jsx("span", { className: "tier-card__label", children: "Recurring Price" }), _jsxs("div", { className: "tier-card__pricing-box", children: [_jsx("span", { className: "tier-card__currency", children: "$" }), _jsx("input", { type: "number", value: localAmount, onChange: (e) => setLocalAmount(e.target.value), onBlur: () => handlePricingChange(localAmount), className: "tier-card__amount-input", step: "0.01" }), _jsx("span", { className: "tier-card__divider", children: "/" }), _jsx("select", { value: localBillingCycle, onChange: (e) => {
+    return (_jsxs("div", { className: `tier-card ${isRecommended ? "tier-card--popular" : ""}`, children: [isRecommended && (_jsxs("div", { className: "tier-card__popular-banner", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Most Popular"] })), _jsx("div", { className: "tier-card__accent", style: { background: accent.color } }), _jsxs("div", { className: "tier-card__body", children: [_jsxs("div", { className: "tier-card__header", children: [_jsxs("div", { className: "tier-card__name-group", children: [_jsx("span", { className: "tier-card__label", children: "Tier Name" }), _jsx("input", { type: "text", value: localName, onChange: (e) => setLocalName(e.target.value), onBlur: handleNameBlur, className: "tier-card__name-input" })] }), _jsx("button", { onClick: onDelete, className: "tier-card__delete-btn", children: _jsx("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), isCustomPricing && (_jsxs("div", { className: "tier-card__custom-badge", children: [_jsx("svg", { className: "tier-card__custom-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "tier-card__custom-text", children: [_jsx("span", { className: "tier-card__custom-title", children: "Custom Pricing" }), _jsx("span", { className: "tier-card__custom-desc", children: "Price varies per client" })] })] })), !isCustomPricing && (_jsxs("div", { className: "tier-card__pricing", children: [_jsx("span", { className: "tier-card__label", children: "Recurring Price" }), _jsxs("div", { className: "tier-card__pricing-box", children: [_jsx("span", { className: "tier-card__currency", children: "$" }), _jsx("input", { type: "number", value: localAmount, onChange: (e) => setLocalAmount(e.target.value), onBlur: () => handlePricingChange(localAmount), className: "tier-card__amount-input", step: "0.01" }), _jsx("span", { className: "tier-card__divider", children: "/" }), _jsx("select", { value: localBillingCycle, onChange: (e) => {
                                             const newCycle = e.target.value;
                                             setLocalBillingCycle(newCycle);
                                             handlePricingChange(undefined, newCycle);
-                                        }, className: "tier-card__cycle-select", children: BILLING_CYCLES.map((cycle) => (_jsx("option", { value: cycle.value, children: cycle.label }, cycle.value))) })] })] })), _jsxs("div", { className: "tier-card__description", children: [_jsx("span", { className: "tier-card__label", children: "Description" }), _jsx("textarea", { value: localDescription, onChange: (e) => setLocalDescription(e.target.value), onBlur: handleDescriptionBlur, placeholder: "Add a description...", rows: 2, className: "tier-card__desc-textarea" })] })] }), _jsxs("div", { className: "tier-card__footer", children: [_jsx("svg", { className: "tier-card__footer-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { className: "tier-card__footer-text", children: "Configure service levels in the Matrix view" })] })] }));
+                                        }, className: "tier-card__cycle-select", children: BILLING_CYCLES.map((cycle) => (_jsx("option", { value: cycle.value, children: cycle.label }, cycle.value))) })] }), localAmount &&
+                                parseFloat(localAmount) > 0 &&
+                                localBillingCycle !== "ONE_TIME" && (_jsxs("div", { className: "tier-card__price-breakdown", children: [_jsxs("div", { className: "tier-card__per-day", children: [_jsxs("span", { className: "tier-card__per-day-amount", children: ["$", getPricePerDay(parseFloat(localAmount), localBillingCycle)] }), _jsx("span", { className: "tier-card__per-day-label", children: "/day" })] }), parseFloat(localAmount) > 0 &&
+                                        parseFloat(getPricePerDay(parseFloat(localAmount), localBillingCycle)) < 10 && (_jsx("span", { className: "tier-card__comparison", children: "Less than a coffee" }))] })), localAmount && parseFloat(localAmount) > 0 && (_jsxs("div", { className: "tier-card__charm-pricing", children: [_jsxs("span", { className: "tier-card__charm-label", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Charm prices:"] }), _jsx("div", { className: "tier-card__charm-options", children: getCharmPriceSuggestions(parseFloat(localAmount)).map((price) => (_jsxs("button", { type: "button", onClick: () => {
+                                                setLocalAmount(price.toFixed(2));
+                                                handlePricingChange(price.toFixed(2));
+                                            }, className: `tier-card__charm-btn ${parseFloat(localAmount) === price ? "tier-card__charm-btn--active" : ""}`, children: ["$", price.toFixed(2).replace(/\.00$/, "")] }, price))) })] }))] })), _jsxs("div", { className: "tier-card__description", children: [_jsx("span", { className: "tier-card__label", children: "Description" }), _jsx("textarea", { value: localDescription, onChange: (e) => setLocalDescription(e.target.value), onBlur: handleDescriptionBlur, placeholder: "Add a description...", rows: 2, className: "tier-card__desc-textarea" })] })] }), _jsxs("div", { className: "tier-card__footer", children: [_jsx("svg", { className: "tier-card__footer-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { className: "tier-card__footer-text", children: "Configure service levels in the Matrix view" })] })] }));
 }

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;AAc7E,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/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,4CAqF5C"}
+{"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,8 +2,8 @@ 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 { ScopeAndFacets } from "./components/ScopeAndFacets.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";
@@ -25,7 +25,7 @@ export default function ServiceOfferingEditor() {
     const renderTabContent = () => {
         switch (activeTab) {
             case "scope-facets":
-                return _jsx(ScopeAndFacets, { document: document, dispatch: dispatch });
+                return (_jsx(ResourceTemplateSelector, { document: document, dispatch: dispatch }));
             case "service-catalog":
                 return (_jsx(ServiceCatalog, { document: document, dispatch: dispatch, groupMetadata: groupMetadata, setGroupMetadata: setGroupMetadata }));
             case "tier-definition":
@@ -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/index.d.ts

@@ -1,5 +1,5 @@
 import type { Manifest } from "document-model";
 export declare const manifest: Manifest;
-export declare const documentModels: (import("document-model").DocumentModelModule<import("./document-models/account-transactions/index.js").AccountTransactionsPHState> | import("document-model").DocumentModelModule<import("./document-models/accounts/index.js").AccountsPHState> | import("document-model").DocumentModelModule<import("./document-models/billing-statement/index.js").BillingStatementPHState> | import("document-model").DocumentModelModule<import("./document-models/expense-report/index.js").ExpenseReportPHState> | import("document-model").DocumentModelModule<import("./document-models/invoice/index.js").InvoicePHState> | import("document-model").DocumentModelModule<import("./document-models/snapshot-report/index.js").SnapshotReportPHState> | import("document-model").DocumentModelModule<import("./document-models/service-subscriptions/index.js").ServiceSubscriptionsPHState> | import("document-model").DocumentModelModule<import("./document-models/service-offering/index.js").ServiceOfferingPHState>)[];
+export declare const documentModels: (import("document-model").DocumentModelModule<import("./document-models/account-transactions/index.js").AccountTransactionsPHState> | import("document-model").DocumentModelModule<import("./document-models/accounts/index.js").AccountsPHState> | import("document-model").DocumentModelModule<import("./document-models/billing-statement/index.js").BillingStatementPHState> | import("document-model").DocumentModelModule<import("./document-models/expense-report/index.js").ExpenseReportPHState> | import("document-model").DocumentModelModule<import("./document-models/invoice/index.js").InvoicePHState> | import("document-model").DocumentModelModule<import("./document-models/snapshot-report/index.js").SnapshotReportPHState> | import("document-model").DocumentModelModule<import("./document-models/service-subscriptions/index.js").ServiceSubscriptionsPHState> | import("document-model").DocumentModelModule<import("./document-models/service-offering/index.js").ServiceOfferingPHState> | import("document-model").DocumentModelModule<import("./document-models/resource-template/index.js").ResourceTemplatePHState>)[];
 export declare const editors: import("document-model").EditorModule[];
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,y9BAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,yCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,wlCAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,yCAAgC,CAAC"}

package/dist/powerhouse.manifest.json

@@ -38,6 +38,10 @@
         {
             "id": "powerhouse/service-offering",
             "name": "ServiceOffering"
+        },
+        {
+            "id": "powerhouse/resource-template",
+            "name": "ResourceTemplate"
         }
     ],
     "editors": [
@@ -82,6 +86,20 @@
             "documentTypes": [
                 "powerhouse/snapshot-report"
             ]
+        },
+        {
+            "id": "powerhouse-service-offering-editor",
+            "name": "Service Offering",
+            "documentTypes": [
+                "powerhouse/service-offering"
+            ]
+        },
+        {
+            "id": "powerhouse-resource-template-editor",
+            "name": "Resource Template",
+            "documentTypes": [
+                "powerhouse/resource-template"
+            ]
         }
     ],
     "apps": [

package/dist/style.css

@@ -80,6 +80,7 @@
     --color-indigo-500: oklch(58.5% 0.233 277.117);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-indigo-700: oklch(45.7% 0.24 277.023);
+    --color-indigo-800: oklch(39.8% 0.195 277.366);
     --color-violet-50: oklch(96.9% 0.016 293.756);
     --color-violet-500: oklch(60.6% 0.25 292.717);
     --color-violet-600: oklch(54.1% 0.281 293.009);
@@ -1309,6 +1310,9 @@
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
+  .bg-indigo-50 {
+    background-color: var(--color-indigo-50);
+  }
   .bg-indigo-100 {
     background-color: var(--color-indigo-100);
   }
@@ -2311,6 +2315,13 @@
       }
     }
   }
+  .hover\:border-blue-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-blue-400);
+      }
+    }
+  }
   .hover\:border-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -2318,6 +2329,13 @@
       }
     }
   }
+  .hover\:border-indigo-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-indigo-400);
+      }
+    }
+  }
   .hover\:border-indigo-500 {
     &:hover {
       @media (hover: hover) {
@@ -2625,6 +2643,13 @@
       }
     }
   }
+  .hover\:text-indigo-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-indigo-800);
+      }
+    }
+  }
   .hover\:text-red-600 {
     &:hover {
       @media (hover: hover) {

package/dist/subgraphs/index.d.ts

@@ -9,4 +9,5 @@ export * as AccTxsAddonSubgraph from "./acc-txs-addon/index.js";
 export * as ServiceSubscriptionsSubgraph from "./service-subscriptions/index.js";
 export * as ServiceOfferingSubgraph from "./service-offering/index.js";
 export * as BudgetStatementsSubgraph from "./budget-statements/index.js";
+export * as ResourceTemplateSubgraph from "./resource-template/index.js";
 //# sourceMappingURL=index.d.ts.map