@powerhousedao/service-offering 1.0.0-dev.24 → 1.0.0-dev.28

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

@@ -1,228 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useRef, useEffect } from "react";
-import { updateOfferingStatus } from "../../../document-models/service-offering/v1/gen/offering/creators.js";
-// Only count services that belong to an existing group
-function getGroupedServices(state) {
-    const existingGroupIds = new Set(state.optionGroups?.map((g) => g.id) ?? []);
-    return state.services.filter((s) => s.optionGroupId && existingGroupIds.has(s.optionGroupId));
-}
-// Helper to check if matrix is reasonably complete
-export function hasCompleteMatrix(state) {
-    const grouped = getGroupedServices(state);
-    if (grouped.length === 0 || state.tiers.length === 0)
-        return false;
-    // Check if at least 50% of grouped services have tier assignments
-    const servicesWithLevels = grouped.filter((service) => state.tiers.some((tier) => tier.serviceLevels.some((sl) => sl.serviceId === service.id))).length;
-    return servicesWithLevels >= Math.ceil(grouped.length * 0.5);
-}
-function getMatrixCompletionText(state) {
-    const grouped = getGroupedServices(state);
-    if (grouped.length === 0 || state.tiers.length === 0) {
-        return "Add services and tiers first";
-    }
-    const servicesWithLevels = grouped.filter((service) => state.tiers.some((tier) => tier.serviceLevels.some((sl) => sl.serviceId === service.id))).length;
-    return `${servicesWithLevels}/${grouped.length} services configured`;
-}
-const fontSans = { fontFamily: "'DM Sans', system-ui, sans-serif" };
-const fontMono = { fontFamily: "'DM Mono', 'SF Mono', monospace" };
-const STATUS_CONFIG = {
-    DRAFT: {
-        label: "Draft",
-        badgeClass: "bg-slate-100 text-slate-600",
-        description: "Not visible on Achra",
-    },
-    COMING_SOON: {
-        label: "Coming Soon",
-        badgeClass: "bg-amber-100 text-amber-700",
-        description: "Visible on Achra as coming soon",
-    },
-    ACTIVE: {
-        label: "Active",
-        badgeClass: "bg-emerald-50 text-emerald-600",
-        description: "Live on Achra",
-    },
-    DEPRECATED: {
-        label: "Deprecated",
-        badgeClass: "bg-rose-50 text-rose-600",
-        description: "Marked as deprecated on Achra",
-    },
-};
-const STATUS_ORDER = [
-    "DRAFT",
-    "COMING_SOON",
-    "ACTIVE",
-    "DEPRECATED",
-];
-// Transitions that require confirmation (publishing / going live)
-function needsConfirmation(from, to) {
-    if (from === "DRAFT" && to === "COMING_SOON") {
-        return {
-            title: "Publish as Coming Soon?",
-            message: 'This service offering will be visible on Achra with a "Coming Soon" status. Subscribers won\'t be able to sign up yet.',
-        };
-    }
-    if (from === "DRAFT" && to === "ACTIVE") {
-        return {
-            title: "Go Live on Achra?",
-            message: "This service offering will be published and available for subscribers on Achra immediately.",
-        };
-    }
-    if (from === "COMING_SOON" && to === "ACTIVE") {
-        return {
-            title: "Go Live on Achra?",
-            message: 'This service offering will change from "Coming Soon" to fully active. Subscribers will be able to sign up.',
-        };
-    }
-    return null;
-}
-export function OfferingProgress({ document, dispatch, activeTab, onTabChange, }) {
-    const state = document.state.global;
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const [pendingStatus, setPendingStatus] = useState(null);
-    const dropdownRef = useRef(null);
-    // Close dropdown on outside click
-    useEffect(() => {
-        if (!dropdownOpen)
-            return;
-        const handleClick = (e) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(e.target)) {
-                setDropdownOpen(false);
-            }
-        };
-        window.addEventListener("mousedown", handleClick);
-        return () => window.removeEventListener("mousedown", handleClick);
-    }, [dropdownOpen]);
-    const handleStatusSelect = (newStatus) => {
-        setDropdownOpen(false);
-        if (newStatus === state.status)
-            return;
-        const confirmation = needsConfirmation(state.status, newStatus);
-        if (confirmation) {
-            setPendingStatus(newStatus);
-        }
-        else {
-            dispatch(updateOfferingStatus({
-                status: newStatus,
-                lastModified: new Date().toISOString(),
-            }));
-        }
-    };
-    const confirmStatusChange = () => {
-        if (!pendingStatus)
-            return;
-        dispatch(updateOfferingStatus({
-            status: pendingStatus,
-            lastModified: new Date().toISOString(),
-        }));
-        setPendingStatus(null);
-    };
-    const cancelStatusChange = () => {
-        setPendingStatus(null);
-    };
-    const currentConfig = STATUS_CONFIG[state.status];
-    const pendingConfig = pendingStatus ? STATUS_CONFIG[pendingStatus] : null;
-    const pendingConfirmation = pendingStatus
-        ? needsConfirmation(state.status, pendingStatus)
-        : null;
-    const steps = useMemo(() => {
-        const groupCount = state.optionGroups?.length ?? 0;
-        const existingGroupIds = new Set(state.optionGroups?.map((g) => g.id) ?? []);
-        const groupedServiceCount = state.services.filter((s) => s.optionGroupId && existingGroupIds.has(s.optionGroupId)).length;
-        return [
-            {
-                id: "scope-facets",
-                label: "Product",
-                isComplete: !!state.resourceTemplateId,
-                details: state.resourceTemplateId
-                    ? `${state.facetTargets.length} facets configured`
-                    : "Select a product to continue",
-                explainer: state.resourceTemplateId
-                    ? "Product selected — configure facets if needed"
-                    : "Choose a product to define scope and available services",
-            },
-            {
-                id: "tier-definition",
-                label: "Tiers",
-                isComplete: state.tiers.length >= 2,
-                details: state.tiers.length >= 2
-                    ? `${state.tiers.length} tiers defined`
-                    : `Add at least ${2 - state.tiers.length} more tier${2 - state.tiers.length !== 1 ? "s" : ""} to continue`,
-                explainer: state.tiers.length >= 2
-                    ? "Set billing cycles and tier pricing"
-                    : "Create at least 2 pricing tiers for your offering",
-            },
-            {
-                id: "service-catalog",
-                label: "Services",
-                isComplete: groupedServiceCount >= 1,
-                details: groupedServiceCount >= 1
-                    ? `${groupedServiceCount} service${groupedServiceCount !== 1 ? "s" : ""} in ${groupCount} group${groupCount !== 1 ? "s" : ""}`
-                    : "Add at least 1 service to a group to continue",
-                explainer: groupedServiceCount >= 1
-                    ? "Organize services into groups and set pricing"
-                    : "Add services and organize them into option groups",
-            },
-            {
-                id: "the-matrix",
-                label: "Matrix",
-                isComplete: hasCompleteMatrix(state),
-                details: getMatrixCompletionText(state),
-                explainer: hasCompleteMatrix(state)
-                    ? "Review tier assignments, pricing, and usage metrics"
-                    : "Assign services to tiers and configure pricing",
-            },
-        ];
-    }, [state]);
-    const totalPercent = useMemo(() => {
-        const count = steps.filter((s) => s.isComplete).length;
-        return Math.round((count / steps.length) * 100);
-    }, [steps]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-white rounded-xl py-4 px-6 mb-4 shadow-sm border border-slate-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("div", { className: "flex items-baseline gap-2", children: totalPercent < 100 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-2xl font-bold text-violet-600", style: fontMono, children: [totalPercent, "%"] }), _jsx("span", { className: "text-xs text-slate-500 uppercase tracking-[0.05em]", children: "Complete" })] })) : (_jsx("span", { className: "text-[0.8125rem] font-medium text-emerald-600 leading-[1.4]", children: "Review pricing in the Matrix and set usage metrics" })) }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsxs("button", { className: `inline-flex items-center gap-1.5 py-1.5 px-3 text-[0.6875rem] font-bold uppercase tracking-[0.04em] rounded-full border-none cursor-pointer transition-all duration-150 hover:brightness-95 ${currentConfig.badgeClass}`, style: fontSans, onClick: () => setDropdownOpen(!dropdownOpen), children: [state.status === "ACTIVE" && (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: {
-                                                        width: 10,
-                                                        height: 10,
-                                                        animation: "progress-pulse 2s ease-in-out infinite",
-                                                    }, children: _jsx("circle", { cx: "12", cy: "12", r: "6" }) })), currentConfig.label, _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", style: {
-                                                        width: 12,
-                                                        height: 12,
-                                                        marginLeft: 2,
-                                                        transition: "transform 0.15s ease",
-                                                        transform: dropdownOpen ? "rotate(180deg)" : "rotate(0)",
-                                                    }, children: _jsx("path", { d: "M6 9l6 6 6-6" }) })] }), dropdownOpen && (_jsx("div", { className: "absolute right-0 w-[220px] bg-white rounded-[10px] shadow-lg border border-slate-200 p-1 z-50", style: {
-                                                top: "calc(100% + 6px)",
-                                                animation: "progress-dropdown-in 0.15s ease-out",
-                                            }, children: STATUS_ORDER.map((status) => {
-                                                const config = STATUS_CONFIG[status];
-                                                const isCurrent = status === state.status;
-                                                return (_jsxs("button", { className: `flex flex-col items-start relative w-full py-2 px-3 border-none bg-transparent rounded-md cursor-pointer text-left transition-colors duration-100 ${isCurrent ? "bg-violet-50 hover:bg-violet-50" : "hover:bg-slate-50"}`, style: fontSans, onClick: () => handleStatusSelect(status), children: [_jsx("span", { className: "text-[0.8125rem] font-semibold text-slate-800", children: config.label }), _jsx("span", { className: "text-[0.6875rem] text-slate-400", children: config.description }), isCurrent && (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", className: "absolute top-2.5 right-2.5 w-3.5 h-3.5 text-violet-500", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }))] }, status));
-                                            }) }))] }) })] }), _jsx("div", { className: "h-2 bg-slate-100 rounded-full overflow-hidden mb-4", children: _jsx("div", { className: "h-full rounded-full", style: {
-                                width: `${totalPercent}%`,
-                                background: "linear-gradient(90deg, rgb(139, 92, 246), rgb(16, 185, 129))",
-                                transition: "width 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
-                            } }) }), _jsx("div", { className: "flex flex-wrap md:flex-nowrap justify-between gap-2", children: steps.map((step, i) => {
-                            const isActive = step.id === activeTab;
-                            return (_jsxs("button", { onClick: () => onTabChange(step.id), className: `flex-[1_1_45%] md:flex-1 flex items-center gap-2.5 py-2 px-3 bg-transparent border-none rounded-[10px] cursor-pointer transition-all duration-150 text-left ${isActive ? "bg-violet-50" : "hover:bg-slate-50"}`, children: [_jsx("div", { className: `w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold shrink-0 transition-all duration-200 ${step.isComplete
-                                            ? "bg-emerald-500 text-white"
-                                            : isActive
-                                                ? "bg-violet-500 text-white"
-                                                : "bg-slate-200 text-slate-500"}`, style: isActive && !step.isComplete
-                                            ? { boxShadow: "0 0 0 3px rgb(237, 233, 254)" }
-                                            : undefined, children: step.isComplete ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", className: "w-3.5 h-3.5", children: _jsx("path", { d: "M5 12l5 5L20 7" }) })) : (_jsx("span", { children: i + 1 })) }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: `text-[0.8125rem] font-semibold ${isActive ? "text-violet-700" : "text-slate-700"}`, children: step.label }), _jsx("span", { className: "text-[0.625rem] text-slate-400 leading-[1.3] mt-px", children: step.explainer }), _jsx("span", { className: `text-[0.6875rem] whitespace-nowrap overflow-hidden text-ellipsis ${step.isComplete ? "text-emerald-600" : "text-slate-400"}`, children: step.details })] })] }, step.id));
-                        }) })] }), pendingStatus && pendingConfirmation && pendingConfig && (_jsx("div", { className: "fixed inset-0 flex items-center justify-center z-[1000]", style: {
-                    background: "rgba(15, 23, 42, 0.4)",
-                    backdropFilter: "blur(4px)",
-                    animation: "progress-overlay-in 0.2s ease-out",
-                }, onClick: cancelStatusChange, children: _jsxs("div", { className: "bg-white rounded-xl p-6 max-w-[400px] w-[90%] shadow-xl", style: {
-                        animation: "progress-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)",
-                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { className: "text-lg font-bold text-slate-800 m-0 mb-2", children: pendingConfirmation.title }), _jsx("p", { className: "text-sm text-slate-500 leading-relaxed m-0 mb-5", children: pendingConfirmation.message }), _jsxs("div", { className: "flex items-center justify-center gap-3 p-3 bg-slate-50 rounded-[10px] mb-5", children: [_jsx("span", { className: `inline-flex items-center gap-1.5 py-1.5 px-3 text-[0.6875rem] font-bold uppercase tracking-[0.04em] rounded-full border-none cursor-default ${currentConfig.badgeClass}`, style: fontSans, children: currentConfig.label }), _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { width: 20, height: 20, color: "rgb(148, 163, 184)" }, children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) }), _jsx("span", { className: `inline-flex items-center gap-1.5 py-1.5 px-3 text-[0.6875rem] font-bold uppercase tracking-[0.04em] rounded-full border-none cursor-default ${pendingConfig.badgeClass}`, style: fontSans, children: pendingConfig.label })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx("button", { className: "py-2 px-5 text-[0.8125rem] font-semibold border-none rounded-[10px] cursor-pointer transition-all duration-150 bg-slate-100 text-slate-600 hover:bg-slate-200", style: fontSans, onClick: cancelStatusChange, children: "Cancel" }), _jsx("button", { className: "py-2 px-5 text-[0.8125rem] font-semibold border-none rounded-[10px] cursor-pointer transition-all duration-150 text-white hover:-translate-y-px active:translate-y-0", style: {
-                                        ...fontSans,
-                                        background: "linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105))",
-                                        boxShadow: "0 2px 6px rgba(16, 185, 129, 0.3)",
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.boxShadow =
-                                            "0 4px 10px rgba(16, 185, 129, 0.4)";
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.boxShadow =
-                                            "0 2px 6px rgba(16, 185, 129, 0.3)";
-                                    }, onClick: confirmStatusChange, children: pendingStatus === "ACTIVE" ? "Go Live" : "Publish" })] })] }) }))] }));
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ResourceTemplateSelector.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ResourceTemplateSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,kEAAkE,CAAC;AAyF1E,UAAU,6BAA6B;IACrC,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,QAAQ,GACT,EAAE,6BAA6B,2CA0kB/B"}