@powerhousedao/service-offering 0.0.14 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/editors/service-offering-editor/components/ConfirmDialog.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/ConfirmDialog.js +6 -1
- package/dist/editors/service-offering-editor/components/InfoIcon.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/InfoIcon.js +1 -1
- package/dist/editors/service-offering-editor/components/MarkdownPreview.d.ts +0 -1
- package/dist/editors/service-offering-editor/components/MarkdownPreview.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/MarkdownPreview.js +17 -2
- package/dist/editors/service-offering-editor/components/OfferingProgress.d.ts +0 -1
- package/dist/editors/service-offering-editor/components/OfferingProgress.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/OfferingProgress.js +45 -15
- package/dist/editors/service-offering-editor/components/ResourceTemplateSelector.d.ts +0 -1
- package/dist/editors/service-offering-editor/components/ResourceTemplateSelector.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/ResourceTemplateSelector.js +100 -28
- package/dist/editors/service-offering-editor/components/ServiceCatalog.d.ts +0 -1
- package/dist/editors/service-offering-editor/components/ServiceCatalog.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/ServiceCatalog.js +98 -49
- package/dist/editors/service-offering-editor/components/TheMatrix.d.ts +0 -1
- package/dist/editors/service-offering-editor/components/TheMatrix.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/TheMatrix.js +216 -99
- package/dist/editors/service-offering-editor/components/TierDefinition.d.ts +0 -1
- package/dist/editors/service-offering-editor/components/TierDefinition.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/TierDefinition.js +28 -8
- package/dist/editors/service-offering-editor/components/TierPricingOptionsPanel.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/components/TierPricingOptionsPanel.js +13 -262
- package/dist/editors/service-offering-editor/editor.d.ts.map +1 -1
- package/dist/editors/service-offering-editor/editor.js +12 -2
- package/dist/style.css +2688 -151
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,YAAuB,EACvB,WAAsB,EACtB,OAAkB,EAClB,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,YAAuB,EACvB,WAAsB,EACtB,OAAkB,EAClB,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,2CAmGpB"}
|
|
@@ -11,5 +11,10 @@ export function ConfirmDialog({ title, message, confirmLabel = "Delete", cancelL
|
|
|
11
11
|
confirmRef.current?.focus();
|
|
12
12
|
return () => document.removeEventListener("keydown", handleKey);
|
|
13
13
|
}, [onCancel]);
|
|
14
|
-
return (_jsx("div", { className: "
|
|
14
|
+
return (_jsx("div", { className: "fixed inset-0 bg-slate-900/40 backdrop-blur-sm flex items-center justify-center z-[2000]", style: { animation: "so-confirm-fade-in 0.15s ease-out" }, onClick: onCancel, children: _jsxs("div", { className: "bg-white rounded-xl p-6 max-w-[380px] w-[90%] text-center", style: {
|
|
15
|
+
boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
|
|
16
|
+
animation: "so-confirm-scale-in 0.15s ease-out",
|
|
17
|
+
}, onClick: (e) => e.stopPropagation(), role: "alertdialog", "aria-labelledby": "confirm-title", "aria-describedby": "confirm-message", children: [_jsx("div", { className: `inline-flex items-center justify-center w-11 h-11 rounded-full mb-3 ${variant === "danger" ? "bg-rose-50 text-rose-500" : "bg-amber-50 text-amber-500"}`, children: variant === "danger" ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "20", height: "20", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "20", height: "20", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }) })) }), _jsx("h3", { className: "text-base font-bold text-slate-800 m-0 mb-1.5", id: "confirm-title", children: title }), _jsx("p", { className: "text-[0.8125rem] text-slate-500 leading-6 m-0 mb-5", id: "confirm-message", children: message }), _jsxs("div", { className: "flex justify-center gap-2", children: [_jsx("button", { className: "px-5 py-2 text-[0.8125rem] font-semibold border-none rounded-lg cursor-pointer transition-all duration-150 bg-slate-100 text-slate-600 hover:bg-slate-200", onClick: onCancel, children: cancelLabel }), _jsx("button", { ref: confirmRef, className: `px-5 py-2 text-[0.8125rem] font-semibold border-none rounded-lg cursor-pointer transition-all duration-150 ${variant === "danger" ? "bg-rose-500 text-white hover:bg-rose-600" : "bg-amber-500 text-white hover:bg-amber-600"}`, style: variant === "danger"
|
|
18
|
+
? { boxShadow: "0 2px 6px rgba(244, 63, 94, 0.3)" }
|
|
19
|
+
: { boxShadow: "0 2px 6px rgba(245, 158, 11, 0.3)" }, onClick: onConfirm, children: confirmLabel })] })] }) }));
|
|
15
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoIcon.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/InfoIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAY,EAAE,SAAS,EAAE,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"InfoIcon.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/InfoIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAY,EAAE,SAAS,EAAE,EAAE,aAAa,2CAqB3E"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Tooltip } from "@powerhousedao/design-system/ui/components/tooltip/tooltip";
|
|
3
3
|
export function InfoIcon({ content, side = "top", className }) {
|
|
4
|
-
return (_jsx(Tooltip, { content: content, side: side, sideOffset: 6, className: className, children: _jsx("span", { className: "
|
|
4
|
+
return (_jsx(Tooltip, { content: content, side: side, sideOffset: 6, className: className, children: _jsx("span", { className: "inline-flex items-center justify-center w-[18px] h-[18px] text-slate-400 cursor-help align-middle ml-1 transition-colors duration-150 shrink-0 hover:text-violet-500", "aria-label": "More info", children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", width: "14", height: "14", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25" }), _jsx("path", { strokeLinecap: "round", d: "M8 7.25V11M8 5.5V5" })] }) }) }));
|
|
5
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownPreview.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/MarkdownPreview.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MarkdownPreview.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/MarkdownPreview.tsx"],"names":[],"mappings":"AAkCA,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAe,EACf,SAAc,GACf,EAAE,oBAAoB,2CAqEtB"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
3
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
4
|
-
import "./MarkdownPreview.css";
|
|
5
4
|
function ExpandButton({ shouldTruncate, isExpanded, onToggle, }) {
|
|
6
5
|
if (!shouldTruncate)
|
|
7
6
|
return null;
|
|
@@ -28,5 +27,21 @@ export function MarkdownPreview({ content, maxLength = 300, className = "", }) {
|
|
|
28
27
|
if (!MarkdownRenderer) {
|
|
29
28
|
return (_jsxs("div", { className: className, children: [_jsx("p", { className: "text-slate-600 text-sm leading-relaxed whitespace-pre-wrap", children: displayContent }), _jsx(ExpandButton, { shouldTruncate: shouldTruncate, isExpanded: isExpanded, onToggle: () => setIsExpanded((prev) => !prev) })] }));
|
|
30
29
|
}
|
|
31
|
-
return (_jsxs("div", { className: className, children: [_jsx("
|
|
30
|
+
return (_jsxs("div", { className: className, children: [_jsx("style", { children: `
|
|
31
|
+
.so-markdown-preview p { margin-bottom: 0.75em; }
|
|
32
|
+
.so-markdown-preview p:last-child { margin-bottom: 0; }
|
|
33
|
+
.so-markdown-preview h1, .so-markdown-preview h2, .so-markdown-preview h3 {
|
|
34
|
+
font-weight: 600; color: #1e293b; margin-top: 1em; margin-bottom: 0.5em;
|
|
35
|
+
}
|
|
36
|
+
.so-markdown-preview h1 { font-size: 1.25rem; }
|
|
37
|
+
.so-markdown-preview h2 { font-size: 1.125rem; }
|
|
38
|
+
.so-markdown-preview h3 { font-size: 1rem; }
|
|
39
|
+
.so-markdown-preview ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 0.75em; }
|
|
40
|
+
.so-markdown-preview ol { list-style-type: decimal; padding-left: 1.5em; margin-bottom: 0.75em; }
|
|
41
|
+
.so-markdown-preview a { color: #4f46e5; text-decoration: underline; }
|
|
42
|
+
.so-markdown-preview code { background: #f1f5f9; padding: 0.125em 0.375em; border-radius: 0.25em; font-size: 0.875em; }
|
|
43
|
+
.so-markdown-preview blockquote { border-left: 3px solid #e2e8f0; padding-left: 1em; color: #64748b; font-style: italic; }
|
|
44
|
+
.so-markdown-preview strong { font-weight: 600; color: #334155; }
|
|
45
|
+
.so-markdown-preview .anchor, .so-markdown-preview .octicon { display: none; }
|
|
46
|
+
` }), _jsx("div", { className: "so-markdown-preview text-sm leading-relaxed text-slate-600", "data-color-mode": "light", children: _jsx(MarkdownRenderer, { source: displayContent, disableCopy: true }) }), _jsx(ExpandButton, { shouldTruncate: shouldTruncate, isExpanded: isExpanded, onToggle: () => setIsExpanded((prev) => !prev) })] }));
|
|
32
47
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
|
|
2
2
|
import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
|
|
3
3
|
import type { TabId } from "../editor.js";
|
|
4
|
-
import "./OfferingProgress.css";
|
|
5
4
|
interface OfferingProgressProps {
|
|
6
5
|
document: ServiceOfferingDocument;
|
|
7
6
|
dispatch: DocumentDispatch<ServiceOfferingAction>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OfferingProgress.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/OfferingProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAEtB,MAAM,kEAAkE,CAAC;AAE1E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"OfferingProgress.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/OfferingProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAEtB,MAAM,kEAAkE,CAAC;AAE1E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAClD,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACrC;AAmBD,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAChD,OAAO,CAYT;AAoFD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,GACZ,EAAE,qBAAqB,2CA2XvB"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo, useState, useRef, useEffect } from "react";
|
|
3
3
|
import { updateOfferingStatus } from "../../../document-models/service-offering/gen/offering/creators.js";
|
|
4
|
-
import "./OfferingProgress.css";
|
|
5
4
|
// Only count services that belong to an existing group
|
|
6
5
|
function getGroupedServices(state) {
|
|
7
6
|
const existingGroupIds = new Set(state.optionGroups?.map((g) => g.id) ?? []);
|
|
@@ -24,25 +23,27 @@ function getMatrixCompletionText(state) {
|
|
|
24
23
|
const servicesWithLevels = grouped.filter((service) => state.tiers.some((tier) => tier.serviceLevels.some((sl) => sl.serviceId === service.id))).length;
|
|
25
24
|
return `${servicesWithLevels}/${grouped.length} services configured`;
|
|
26
25
|
}
|
|
26
|
+
const fontSans = { fontFamily: "'DM Sans', system-ui, sans-serif" };
|
|
27
|
+
const fontMono = { fontFamily: "'DM Mono', 'SF Mono', monospace" };
|
|
27
28
|
const STATUS_CONFIG = {
|
|
28
29
|
DRAFT: {
|
|
29
30
|
label: "Draft",
|
|
30
|
-
badgeClass: "
|
|
31
|
+
badgeClass: "bg-slate-100 text-slate-600",
|
|
31
32
|
description: "Not visible on Achra",
|
|
32
33
|
},
|
|
33
34
|
COMING_SOON: {
|
|
34
35
|
label: "Coming Soon",
|
|
35
|
-
badgeClass: "
|
|
36
|
+
badgeClass: "bg-amber-100 text-amber-700",
|
|
36
37
|
description: "Visible on Achra as coming soon",
|
|
37
38
|
},
|
|
38
39
|
ACTIVE: {
|
|
39
40
|
label: "Active",
|
|
40
|
-
badgeClass: "
|
|
41
|
+
badgeClass: "bg-emerald-50 text-emerald-600",
|
|
41
42
|
description: "Live on Achra",
|
|
42
43
|
},
|
|
43
44
|
DEPRECATED: {
|
|
44
45
|
label: "Deprecated",
|
|
45
|
-
badgeClass: "
|
|
46
|
+
badgeClass: "bg-rose-50 text-rose-600",
|
|
46
47
|
description: "Marked as deprecated on Achra",
|
|
47
48
|
},
|
|
48
49
|
};
|
|
@@ -177,22 +178,51 @@ export function OfferingProgress({ document, dispatch, activeTab, onTabChange, }
|
|
|
177
178
|
const count = steps.filter((s) => s.isComplete).length;
|
|
178
179
|
return Math.round((count / steps.length) * 100);
|
|
179
180
|
}, [steps]);
|
|
180
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "
|
|
181
|
+
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: {
|
|
182
|
+
width: 10,
|
|
183
|
+
height: 10,
|
|
184
|
+
animation: "progress-pulse 2s ease-in-out infinite",
|
|
185
|
+
}, 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: {
|
|
181
186
|
width: 12,
|
|
182
187
|
height: 12,
|
|
183
188
|
marginLeft: 2,
|
|
184
189
|
transition: "transform 0.15s ease",
|
|
185
190
|
transform: dropdownOpen ? "rotate(180deg)" : "rotate(0)",
|
|
186
|
-
}, children: _jsx("path", { d: "M6 9l6 6 6-6" }) })] }), dropdownOpen && (_jsx("div", { className: "
|
|
191
|
+
}, 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: {
|
|
192
|
+
top: "calc(100% + 6px)",
|
|
193
|
+
animation: "progress-dropdown-in 0.15s ease-out",
|
|
194
|
+
}, children: STATUS_ORDER.map((status) => {
|
|
187
195
|
const config = STATUS_CONFIG[status];
|
|
188
196
|
const isCurrent = status === state.status;
|
|
189
|
-
return (_jsxs("button", { className: `
|
|
190
|
-
}) }))] }) })] }), _jsx("div", { className: "
|
|
197
|
+
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));
|
|
198
|
+
}) }))] }) })] }), _jsx("div", { className: "h-2 bg-slate-100 rounded-full overflow-hidden mb-4", children: _jsx("div", { className: "h-full rounded-full", style: {
|
|
199
|
+
width: `${totalPercent}%`,
|
|
200
|
+
background: "linear-gradient(90deg, rgb(139, 92, 246), rgb(16, 185, 129))",
|
|
201
|
+
transition: "width 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
202
|
+
} }) }), _jsx("div", { className: "flex flex-wrap md:flex-nowrap justify-between gap-2", children: steps.map((step, i) => {
|
|
191
203
|
const isActive = step.id === activeTab;
|
|
192
|
-
return (_jsxs("button", { onClick: () => onTabChange(step.id), className: `
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
204
|
+
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
|
|
205
|
+
? "bg-emerald-500 text-white"
|
|
206
|
+
: isActive
|
|
207
|
+
? "bg-violet-500 text-white"
|
|
208
|
+
: "bg-slate-200 text-slate-500"}`, style: isActive && !step.isComplete
|
|
209
|
+
? { boxShadow: "0 0 0 3px rgb(237, 233, 254)" }
|
|
210
|
+
: 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));
|
|
211
|
+
}) })] }), pendingStatus && pendingConfirmation && pendingConfig && (_jsx("div", { className: "fixed inset-0 flex items-center justify-center z-[1000]", style: {
|
|
212
|
+
background: "rgba(15, 23, 42, 0.4)",
|
|
213
|
+
backdropFilter: "blur(4px)",
|
|
214
|
+
animation: "progress-overlay-in 0.2s ease-out",
|
|
215
|
+
}, onClick: cancelStatusChange, children: _jsxs("div", { className: "bg-white rounded-xl p-6 max-w-[400px] w-[90%] shadow-xl", style: {
|
|
216
|
+
animation: "progress-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
217
|
+
}, 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: {
|
|
218
|
+
...fontSans,
|
|
219
|
+
background: "linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105))",
|
|
220
|
+
boxShadow: "0 2px 6px rgba(16, 185, 129, 0.3)",
|
|
221
|
+
}, onMouseEnter: (e) => {
|
|
222
|
+
e.currentTarget.style.boxShadow =
|
|
223
|
+
"0 4px 10px rgba(16, 185, 129, 0.4)";
|
|
224
|
+
}, onMouseLeave: (e) => {
|
|
225
|
+
e.currentTarget.style.boxShadow =
|
|
226
|
+
"0 2px 6px rgba(16, 185, 129, 0.3)";
|
|
227
|
+
}, onClick: confirmStatusChange, children: pendingStatus === "ACTIVE" ? "Go Live" : "Publish" })] })] }) }))] }));
|
|
198
228
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { type DocumentDispatch } from "@powerhousedao/reactor-browser";
|
|
2
2
|
import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
|
|
3
|
-
import "./ResourceTemplateSelector.css";
|
|
4
3
|
interface ResourceTemplateSelectorProps {
|
|
5
4
|
document: ServiceOfferingDocument;
|
|
6
5
|
dispatch: DocumentDispatch<ServiceOfferingAction>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"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;AAuF1E,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,2CAgkB/B"}
|
|
@@ -8,7 +8,6 @@ import { MarkdownPreview } from "./MarkdownPreview.js";
|
|
|
8
8
|
import { InfoIcon } from "./InfoIcon.js";
|
|
9
9
|
import { ConfirmDialog } from "./ConfirmDialog.js";
|
|
10
10
|
import { useRemoteResourceTemplates } from "../hooks/useRemoteResourceTemplates.js";
|
|
11
|
-
import "./ResourceTemplateSelector.css";
|
|
12
11
|
function normalizeLocalTemplate(doc) {
|
|
13
12
|
return {
|
|
14
13
|
id: doc.header.id,
|
|
@@ -266,26 +265,58 @@ export function ResourceTemplateSelector({ document, dispatch, }) {
|
|
|
266
265
|
}, [activeTemplates]);
|
|
267
266
|
// If a template is selected and user is not changing, show the detail view with facet selection
|
|
268
267
|
if (selectedTemplate && !showingSelector) {
|
|
269
|
-
return (_jsx(_Fragment, { children: _jsx("div", { className: "
|
|
268
|
+
return (_jsx(_Fragment, { children: _jsx("div", { className: "flex flex-col gap-6", style: { fontFamily: "'Instrument Sans', system-ui, sans-serif" }, children: _jsx(TemplateDetailView, { template: selectedTemplate, offeringDocument: document, dispatch: dispatch, onChangeTemplate: handleChangeTemplate }) }) }));
|
|
270
269
|
}
|
|
271
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "
|
|
270
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-6", style: { fontFamily: "'Instrument Sans', system-ui, sans-serif" }, children: [_jsxs("div", { className: "flex items-start gap-5 p-6 bg-white rounded-2xl border-l-4 border-l-teal-500 max-md:flex-col", style: {
|
|
271
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
272
|
+
}, children: [_jsx("div", { className: "w-12 h-12 rounded-xl bg-teal-100 text-teal-500 flex items-center justify-center shrink-0", children: _jsx("svg", { className: "w-6 h-6", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("h2", { className: "text-xl font-bold text-[#1a1f36] m-0 mb-2 tracking-tight", children: ["Select a Product", _jsx(InfoIcon, { content: "A Product defines the scope and available services for your offering. Select one to pre-populate your offering structure." })] }), _jsx("p", { className: "text-[0.9375rem] text-[#4a5578] m-0 leading-relaxed max-w-[600px]", children: "Choose a product to base this service offering on. The product defines the configuration, target audiences, and available services." })] })] }), _jsxs("div", { className: "flex items-center gap-3 py-3.5 px-[18px] bg-white border-[1.5px] border-[#e4e8f0] rounded-xl transition-all duration-150 focus-within:border-teal-500 focus-within:shadow-[0_0_0_3px_#ccfbf1]", children: [_jsxs("svg", { className: "w-5 h-5 text-[#8792a8] shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [_jsx("circle", { cx: "11", cy: "11", r: "8", strokeWidth: "2" }), _jsx("path", { d: "M21 21l-4.35-4.35", strokeWidth: "2" })] }), _jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search products...", className: "flex-1 text-[0.9375rem] bg-transparent border-none outline-none text-[#1a1f36] placeholder:text-[#8792a8]", style: { fontFamily: "'Instrument Sans', system-ui, sans-serif" } }), searchQuery && (_jsx("button", { type: "button", onClick: () => setSearchQuery(""), className: "flex items-center justify-center w-6 h-6 p-0 bg-[#f0f2f7] border-none rounded-md text-[#8792a8] cursor-pointer transition-all duration-150 hover:bg-[#e4e8f0] hover:text-[#4a5578]", children: _jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", strokeWidth: "2" }) }) }))] }), aggregatedFacets.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3 py-4 px-5 bg-slate-50 border border-slate-200 rounded-xl", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs font-semibold uppercase tracking-wide text-slate-500", children: ["Filter by facet", _jsx(InfoIcon, { content: "Facets are customizable dimensions of your service (e.g., Legal Entity type, Team size). Clients choose from these options when subscribing." })] }), hasAnyFacetFilter && (_jsx("button", { type: "button", onClick: clearAllFacetFilters, className: "text-xs font-medium text-violet-600 bg-transparent border-none cursor-pointer p-0 hover:underline", style: { fontFamily: "system-ui" }, children: "Clear filters" }))] }), _jsx("div", { className: "flex flex-wrap gap-2", children: aggregatedFacets.map((facet) => {
|
|
272
273
|
const isActive = activeFacets.has(facet.categoryKey);
|
|
273
274
|
const selectedCount = selectedFacetOptions[facet.categoryKey]?.size ?? 0;
|
|
274
|
-
return (_jsxs("button", { type: "button", onClick: () => toggleFacet(facet.categoryKey), className: `
|
|
275
|
+
return (_jsxs("button", { type: "button", onClick: () => toggleFacet(facet.categoryKey), className: `inline-flex items-center gap-1.5 py-1.5 px-3.5 text-[0.8125rem] font-medium rounded-full cursor-pointer transition-all duration-150 ${isActive
|
|
276
|
+
? "bg-violet-600 border-[1.5px] border-violet-600 text-white hover:bg-violet-700 hover:border-violet-700"
|
|
277
|
+
: "bg-white border-[1.5px] border-slate-200 text-slate-600 hover:border-violet-300 hover:text-violet-700"}`, style: { fontFamily: "system-ui" }, children: [facet.categoryLabel, selectedCount > 0 && (_jsx("span", { className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-[5px] text-[0.6875rem] font-bold bg-white/25 rounded-full", children: selectedCount }))] }, facet.categoryKey));
|
|
275
278
|
}) }), aggregatedFacets
|
|
276
279
|
.filter((f) => activeFacets.has(f.categoryKey))
|
|
277
280
|
.map((facet) => {
|
|
278
281
|
const selected = selectedFacetOptions[facet.categoryKey] ?? new Set();
|
|
279
|
-
return (_jsxs("div", { className: "
|
|
280
|
-
|
|
282
|
+
return (_jsxs("div", { className: "flex items-start gap-2.5 pt-2.5 border-t border-slate-200", children: [_jsxs("span", { className: "text-xs font-semibold text-slate-500 whitespace-nowrap pt-[5px] min-w-[80px]", children: [facet.categoryLabel, ":"] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: facet.options.map((opt) => (_jsx("button", { type: "button", onClick: () => toggleFacetOption(facet.categoryKey, opt), className: `py-1 px-3 text-xs font-medium rounded-lg cursor-pointer transition-all duration-150 ${selected.has(opt)
|
|
283
|
+
? "bg-emerald-50 border border-emerald-500 text-emerald-700 hover:bg-emerald-100"
|
|
284
|
+
: "bg-white border border-slate-200 text-slate-600 hover:border-emerald-400 hover:text-emerald-700"}`, style: { fontFamily: "system-ui" }, children: opt }, opt))) })] }, facet.categoryKey));
|
|
285
|
+
}), hasAnyFacetFilter && (_jsxs("div", { className: "text-xs font-medium text-slate-500 pt-1", children: ["Showing ", filteredTemplates.length, " of ", allTemplates.length, " ", "product", allTemplates.length !== 1 ? "s" : ""] }))] })), _jsx("div", { className: "flex flex-col gap-6", children: isLoadingRemote && allTemplates.length === 0 ? (_jsxs("div", { className: "p-12 text-center bg-white rounded-2xl border-2 border-dashed border-[#e4e8f0]", children: [_jsx("div", { className: "w-8 h-8 border-[3px] border-[#e4e8f0] border-t-teal-500 rounded-full mx-auto mb-3", style: { animation: "rts-spin 0.8s linear infinite" } }), _jsx("p", { className: "text-[0.9375rem] text-[#8792a8] m-0 max-w-[400px] mx-auto leading-relaxed", children: "Loading products..." })] })) : allTemplates.length === 0 ? (_jsxs("div", { className: "p-12 text-center bg-white rounded-2xl border-2 border-dashed border-[#e4e8f0]", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-4 text-[#8792a8] opacity-50", children: _jsx("svg", { className: "w-full h-full", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }) }), _jsx("h3", { className: "text-lg font-semibold text-[#1a1f36] m-0 mb-2", children: "No Products Found" }), _jsx("p", { className: "text-[0.9375rem] text-[#8792a8] m-0 max-w-[400px] mx-auto leading-relaxed", children: "Create a product first to define the base configuration for your service offering." })] })) : filteredTemplates.length === 0 ? (_jsx("div", { className: "p-6 text-center bg-[#fafbfc] rounded-2xl border-2 border-solid border-[#e4e8f0]", children: _jsxs("p", { className: "text-[0.9375rem] text-[#8792a8] m-0 max-w-[400px] mx-auto leading-relaxed", children: ["No products match", searchQuery ? ` "${searchQuery}"` : " the selected filters"] }) })) : (_jsxs(_Fragment, { children: [activeTemplates.length > 0 && (_jsxs("div", { children: [_jsxs("h3", { className: "flex items-center gap-2.5 text-[0.8125rem] font-semibold text-[#4a5578] uppercase tracking-wide m-0 mb-4", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-emerald-500" }), "Active Products"] }), _jsx("div", { className: "grid gap-4 max-md:!grid-cols-1", style: {
|
|
286
|
+
gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
|
|
287
|
+
}, children: activeTemplates.map((template) => (_jsx(TemplateCard, { template: template, isSelected: currentTemplateId === template.id, isRecommended: template.id === recommendedTemplateId, onSelect: () => handleSelectTemplate(template) }, template.id))) })] })), otherTemplates.length > 0 && (_jsxs("div", { children: [_jsxs("h3", { className: "flex items-center gap-2.5 text-[0.8125rem] font-semibold text-[#4a5578] uppercase tracking-wide m-0 mb-4", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-slate-500" }), "Other Products"] }), _jsx("div", { className: "grid gap-4 max-md:!grid-cols-1", style: {
|
|
288
|
+
gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
|
|
289
|
+
}, children: otherTemplates.map((template) => (_jsx(TemplateCard, { template: template, isSelected: currentTemplateId === template.id, onSelect: () => handleSelectTemplate(template) }, template.id))) })] })), isLoadingRemote && (_jsxs("div", { className: "flex items-center justify-center gap-2.5 p-3 text-[0.8125rem] text-[#8792a8] bg-[#fafbfc] rounded-lg border border-[#f0f2f7]", children: [_jsx("div", { className: "w-4 h-4 border-2 border-[#e4e8f0] border-t-teal-500 rounded-full", style: { animation: "rts-spin 0.8s linear infinite" } }), _jsx("span", { children: "Loading remote products..." })] }))] })) })] }), pendingTemplateChange && (_jsx(ConfirmDialog, { title: "Change product template?", message: "Switching to a different product will update the offering info and may affect existing facet configurations.", confirmLabel: "Change Product", variant: "warning", onConfirm: confirmTemplateChange, onCancel: () => setPendingTemplateChange(null) }))] }));
|
|
281
290
|
}
|
|
282
291
|
function TemplateCard({ template, isSelected, isRecommended, onSelect, }) {
|
|
283
292
|
const globalState = template.state.global;
|
|
284
293
|
const statusStyle = getStatusStyle(globalState.status);
|
|
285
|
-
return (_jsxs("button", { type: "button", onClick: onSelect, className: `
|
|
294
|
+
return (_jsxs("button", { type: "button", onClick: onSelect, className: `relative flex flex-col text-left bg-white border-2 rounded-2xl overflow-hidden cursor-pointer transition-all duration-200 ${isSelected
|
|
295
|
+
? "border-teal-500 bg-teal-100 hover:border-teal-500"
|
|
296
|
+
: isRecommended
|
|
297
|
+
? "border-amber-500 hover:border-amber-500"
|
|
298
|
+
: "border-[#f0f2f7] hover:border-[#e4e8f0] hover:-translate-y-0.5"}`, style: isRecommended && !isSelected
|
|
299
|
+
? {
|
|
300
|
+
boxShadow: "0 0 0 1px #f59e0b, 0 4px 16px rgba(245, 158, 11, 0.15)",
|
|
301
|
+
}
|
|
302
|
+
: !isSelected
|
|
303
|
+
? undefined
|
|
304
|
+
: undefined, children: [isRecommended && !isSelected && (_jsxs("div", { className: "absolute -top-px right-10 flex items-center gap-1 py-1.5 px-3 text-[0.625rem] font-bold uppercase tracking-[0.04em] text-white rounded-b-lg z-[5]", style: {
|
|
305
|
+
background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
|
|
306
|
+
boxShadow: "0 2px 8px rgba(245, 158, 11, 0.4)",
|
|
307
|
+
}, children: [_jsx("svg", { className: "w-3 h-3 fill-current stroke-current", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" }) }), "Recommended"] })), template.isRemote && (_jsxs("div", { className: `absolute top-2.5 right-2.5 flex items-center gap-1 py-1 px-2.5 text-[0.625rem] font-bold uppercase tracking-[0.04em] rounded-full z-[4] ${template.operatorName
|
|
308
|
+
? "normal-case font-semibold text-teal-500 bg-teal-100"
|
|
309
|
+
: "text-[#7c5cff] bg-[#f4f1ff]"}`, style: { backdropFilter: "blur(8px)" }, children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: template.operatorName ? (_jsxs(_Fragment, { children: [_jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "12", cy: "7", r: "4" })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: "M2 15c6.667-6 13.333 0 20-6" }), _jsx("path", { d: "M9 22c1.798-1.998 2.54-3.995 2.807-5.993" }), _jsx("path", { d: "M15 2c-1.798 1.998-2.54 3.995-2.807 5.993" })] })) }), template.operatorName ?? "Remote"] })), _jsxs("div", { className: "relative h-[100px]", children: [globalState.thumbnailUrl ? (_jsx("div", { className: "w-full h-full bg-cover bg-center bg-[#f0f2f7]", style: { backgroundImage: `url(${globalState.thumbnailUrl})` } })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-[#8792a8]", style: {
|
|
310
|
+
background: "linear-gradient(135deg, #f0f2f7 0%, #e4e8f0 100%)",
|
|
311
|
+
}, children: _jsxs("svg", { className: "w-8 h-8 opacity-50", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }) })), _jsxs("span", { className: "absolute top-2.5 left-2.5 flex items-center gap-1.5 py-1 px-2.5 text-[0.625rem] font-bold uppercase tracking-[0.04em] rounded-full", style: {
|
|
286
312
|
backgroundColor: statusStyle.bg,
|
|
287
313
|
color: statusStyle.text,
|
|
288
|
-
|
|
314
|
+
backdropFilter: "blur(8px)",
|
|
315
|
+
}, children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full", style: { backgroundColor: statusStyle.dot } }), globalState.status.replace("_", " ")] })] }), _jsxs("div", { className: "p-4 flex flex-col gap-2 flex-1", children: [_jsx("h4", { className: "text-base font-semibold text-[#1a1f36] m-0 tracking-tight", children: globalState.title || "Untitled" }), _jsx("p", { className: "text-[0.8125rem] text-[#4a5578] m-0 leading-normal overflow-hidden", style: {
|
|
316
|
+
display: "-webkit-box",
|
|
317
|
+
WebkitLineClamp: 2,
|
|
318
|
+
WebkitBoxOrient: "vertical",
|
|
319
|
+
}, children: globalState.summary || "No summary provided" }), _jsxs("div", { className: "flex gap-3 mt-auto pt-2", children: [globalState.targetAudiences.length > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-[#8792a8]", children: [_jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [_jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2", strokeWidth: "2" }), _jsx("circle", { cx: "9", cy: "7", r: "4", strokeWidth: "2" }), _jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87", strokeWidth: "2" }), _jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75", strokeWidth: "2" })] }), globalState.targetAudiences.length] })), globalState.services.length > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-[#8792a8]", children: [_jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [_jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", strokeWidth: "2" }), _jsx("path", { d: "M2 17l10 5 10-5", strokeWidth: "2" }), _jsx("path", { d: "M2 12l10 5 10-5", strokeWidth: "2" })] }), globalState.services.length] })), globalState.facetTargets.length > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-[#8792a8]", children: [_jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M3 6h18M7 12h10M10 18h4", strokeWidth: "2" }) }), globalState.facetTargets.length] }))] })] }), isSelected && (_jsx("div", { className: "absolute top-2.5 right-2.5 w-7 h-7 rounded-full bg-teal-500 text-white flex items-center justify-center", style: { boxShadow: "0 2px 8px rgba(20, 184, 166, 0.4)" }, children: _jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M5 12l5 5L20 7", strokeWidth: "2.5" }) }) }))] }));
|
|
289
320
|
}
|
|
290
321
|
function TemplateDetailView({ template, offeringDocument, dispatch, onChangeTemplate, }) {
|
|
291
322
|
const globalState = template.state.global;
|
|
@@ -349,50 +380,91 @@ function TemplateDetailView({ template, offeringDocument, dispatch, onChangeTemp
|
|
|
349
380
|
const percent = totalOptions > 0 ? Math.round((selectedOptions / totalOptions) * 100) : 0;
|
|
350
381
|
return { total: totalOptions, selected: selectedOptions, percent };
|
|
351
382
|
}, [globalState.facetTargets, offeringFacetTargets]);
|
|
352
|
-
return (_jsxs("div", { className: "
|
|
383
|
+
return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsx("div", { className: "flex items-center justify-between py-4 px-5 bg-teal-100 border-2 border-teal-500 rounded-xl", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("span", { className: "inline-flex items-center gap-2 text-sm font-semibold text-teal-500", children: [_jsx("svg", { className: "w-[18px] h-[18px]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }), "Selected Product"] }), _jsxs("button", { type: "button", onClick: onChangeTemplate, className: "inline-flex items-center gap-1.5 py-2 px-4 text-[0.8125rem] font-semibold text-teal-500 bg-white border-[1.5px] border-teal-500 rounded-lg cursor-pointer transition-all duration-150 hover:bg-teal-500 hover:text-white", style: { fontFamily: "'Instrument Sans', system-ui, sans-serif" }, children: [_jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), "Change Product"] })] }) }), _jsxs("section", { className: "grid gap-6 bg-white rounded-2xl p-6 max-[900px]:grid-cols-1", style: {
|
|
384
|
+
gridTemplateColumns: "180px 1fr",
|
|
385
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
386
|
+
}, children: [_jsx("div", { className: "relative max-[900px]:-order-1", children: _jsxs("div", { className: "w-[180px] h-[135px] rounded-xl bg-cover bg-center relative overflow-hidden max-[900px]:w-full max-[900px]:h-40", style: {
|
|
353
387
|
backgroundImage: globalState.thumbnailUrl
|
|
354
388
|
? `url(${globalState.thumbnailUrl})`
|
|
355
389
|
: undefined,
|
|
356
|
-
|
|
390
|
+
background: !globalState.thumbnailUrl
|
|
391
|
+
? "linear-gradient(135deg, #f0f2f7 0%, #e4e8f0 100%)"
|
|
392
|
+
: undefined,
|
|
393
|
+
}, children: [!globalState.thumbnailUrl && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-[#8792a8]", children: _jsxs("svg", { className: "w-10 h-10 opacity-50", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }) })), _jsxs("span", { className: "absolute top-2.5 left-2.5 flex items-center gap-1.5 py-[5px] px-3 text-[0.6875rem] font-bold uppercase tracking-[0.04em] rounded-full", style: {
|
|
357
394
|
backgroundColor: statusStyle.bg,
|
|
358
395
|
color: statusStyle.text,
|
|
359
|
-
|
|
396
|
+
backdropFilter: "blur(8px)",
|
|
397
|
+
}, children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full", style: { backgroundColor: statusStyle.dot } }), globalState.status.replace("_", " ")] })] }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h1", { className: "text-[1.75rem] font-bold text-[#1a1f36] m-0 tracking-tight", children: globalState.title || "Untitled Product" }), globalState.targetAudiences.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: globalState.targetAudiences.map((audience) => (_jsx("span", { className: "inline-flex items-center py-[5px] px-3 text-[0.8125rem] font-semibold rounded-full bg-teal-100 text-teal-500", style: audience.color
|
|
360
398
|
? {
|
|
361
399
|
backgroundColor: `${audience.color}15`,
|
|
362
400
|
borderColor: `${audience.color}40`,
|
|
401
|
+
border: `1px solid ${audience.color}40`,
|
|
363
402
|
color: audience.color,
|
|
364
403
|
}
|
|
365
|
-
:
|
|
404
|
+
: {
|
|
405
|
+
border: "1px solid rgba(20, 184, 166, 0.2)",
|
|
406
|
+
}, children: audience.label }, audience.id))) })), _jsx("p", { className: "text-[0.9375rem] leading-relaxed text-[#4a5578] m-0", children: globalState.summary || "No summary provided" })] })] }), globalState.description && (_jsxs("section", { className: "bg-white rounded-2xl p-6", style: {
|
|
407
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
408
|
+
}, children: [_jsxs("div", { className: "flex items-start gap-3.5 mb-4", children: [_jsx("div", { className: "w-10 h-10 rounded-[10px] flex items-center justify-center shrink-0 bg-[#f4f1ff] text-[#7c5cff]", children: _jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h10" }) }) }), _jsx("div", { children: _jsx("h3", { className: "text-base font-semibold text-[#1a1f36] m-0", children: "Description" }) })] }), _jsx(MarkdownPreview, { content: globalState.description, className: "text-[0.9375rem] leading-[1.7] text-[#4a5578] m-0" })] })), _jsxs("div", { className: "grid gap-5 max-[900px]:grid-cols-1", style: { gridTemplateColumns: "1fr 1fr" }, children: [_jsxs("section", { className: "bg-white rounded-2xl p-6", style: {
|
|
409
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
410
|
+
}, children: [_jsxs("div", { className: "flex items-start gap-3.5 mb-4", children: [_jsx("div", { className: "w-10 h-10 rounded-[10px] flex items-center justify-center shrink-0 bg-[#e8faf3] text-emerald-500", children: _jsxs("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }), _jsx("path", { d: "M2 17l10 5 10-5" }), _jsx("path", { d: "M2 12l10 5 10-5" })] }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-[#1a1f36] m-0", children: "Formation & Setup" }), _jsx("p", { className: "text-[0.8125rem] text-[#8792a8] mt-0.5 mb-0", children: "One-time setup services" })] })] }), globalState.setupServices.length > 0 ? (_jsx("div", { className: "flex flex-col gap-1.5", children: globalState.setupServices.map((service, index) => (_jsxs("div", { className: "flex items-center gap-2.5 py-2.5 px-3 bg-[#fafbfc] rounded-lg", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 shrink-0" }), _jsx("span", { className: "text-sm text-[#1a1f36]", children: service })] }, index))) })) : (_jsx("p", { className: "text-sm text-[#8792a8] italic m-0", children: "No setup services defined" }))] }), _jsxs("section", { className: "bg-white rounded-2xl p-6", style: {
|
|
411
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
412
|
+
}, children: [_jsxs("div", { className: "flex items-start gap-3.5 mb-4", children: [_jsx("div", { className: "w-10 h-10 rounded-[10px] flex items-center justify-center shrink-0 bg-[#fef7e6] text-amber-500", children: _jsxs("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M12 8v4l3 3" }), _jsx("circle", { cx: "12", cy: "12", r: "9" })] }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-[#1a1f36] m-0", children: "Recurring Services" }), _jsx("p", { className: "text-[0.8125rem] text-[#8792a8] mt-0.5 mb-0", children: "Ongoing services included" })] })] }), globalState.recurringServices.length > 0 ? (_jsx("div", { className: "flex flex-col gap-1.5", children: globalState.recurringServices.map((service, index) => (_jsxs("div", { className: "flex items-center gap-2.5 py-2.5 px-3 bg-[#fafbfc] rounded-lg", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-amber-500 shrink-0" }), _jsx("span", { className: "text-sm text-[#1a1f36]", children: service })] }, index))) })) : (_jsx("p", { className: "text-sm text-[#8792a8] italic m-0", children: "No recurring services defined" }))] })] }), globalState.facetTargets.length > 0 && (_jsxs("section", { className: "bg-white rounded-2xl p-6", style: {
|
|
413
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
414
|
+
}, children: [_jsxs("div", { className: "flex items-start gap-3.5 mb-4 flex-wrap justify-between", children: [_jsxs("div", { className: "flex items-start gap-3.5", children: [_jsx("div", { className: "w-10 h-10 rounded-[10px] flex items-center justify-center shrink-0 bg-[#e8f7fc] text-sky-500", children: _jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M3 6h18M7 12h10M10 18h4" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-[#1a1f36] m-0", children: "Facet Targeting" }), _jsx("p", { className: "text-[0.8125rem] text-[#8792a8] mt-0.5 mb-0", children: "Select which facet options apply to this offering" })] })] }), _jsxs("div", { className: "flex flex-col items-end gap-1.5 min-w-[140px]", children: [_jsx("div", { className: "w-full h-1.5 bg-[#f0f2f7] rounded-full overflow-hidden", children: _jsx("div", { className: "h-full rounded-full transition-[width] duration-300 ease-out", style: {
|
|
415
|
+
width: `${facetProgress.percent}%`,
|
|
416
|
+
background: "linear-gradient(90deg, #0ea5e9, #10b981)",
|
|
417
|
+
} }) }), _jsxs("span", { className: "text-[0.6875rem] text-[#8792a8] font-medium", children: [facetProgress.selected, " of ", facetProgress.total, " selected", facetProgress.percent === 100 && (_jsx("span", { className: "text-emerald-500 font-semibold", children: " \u2713" }))] })] })] }), _jsx("div", { className: "grid gap-3 max-[900px]:grid-cols-1", style: { gridTemplateColumns: "repeat(2, 1fr)" }, children: globalState.facetTargets.map((facet) => (_jsxs("div", { className: "p-3.5 bg-white rounded-[10px] border-[1.5px] border-[#e4e8f0]", children: [_jsx("span", { className: "block text-xs font-semibold text-[#8792a8] uppercase tracking-[0.04em] mb-2", children: facet.categoryLabel }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: facet.selectedOptions.map((option) => {
|
|
366
418
|
const selected = isOptionSelected(facet.categoryKey, option);
|
|
367
|
-
return (_jsxs("button", { type: "button", className: `
|
|
368
|
-
|
|
419
|
+
return (_jsxs("button", { type: "button", className: `inline-flex items-center gap-2 py-2 px-3.5 text-[0.8125rem] font-medium rounded-lg cursor-pointer transition-all duration-150 capitalize ${selected
|
|
420
|
+
? "bg-teal-100 border-[1.5px] border-teal-500 text-teal-500"
|
|
421
|
+
: "bg-[#fafbfc] border-[1.5px] border-[#e4e8f0] text-[#4a5578] hover:border-sky-500 hover:bg-[#e8f7fc] hover:text-sky-500"}`, style: {
|
|
422
|
+
fontFamily: "'Instrument Sans', system-ui, sans-serif",
|
|
423
|
+
}, onClick: () => handleToggleFacetOption(facet.categoryKey, facet.categoryLabel, option), children: [_jsx("span", { className: `flex items-center justify-center w-[18px] h-[18px] rounded shrink-0 transition-all duration-150 ${selected
|
|
424
|
+
? "bg-teal-500 border-[1.5px] border-teal-500"
|
|
425
|
+
: "bg-white border-[1.5px] border-[#e4e8f0]"}`, children: selected && (_jsx("svg", { className: "w-3 h-3 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("path", { d: "M5 12l5 5L20 7" }) })) }), option.replace(/-/g, " ")] }, option));
|
|
426
|
+
}) })] }, facet.id))) })] })), globalState.services.length > 0 && (_jsxs("section", { className: "bg-white rounded-2xl p-6", style: {
|
|
427
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
428
|
+
}, children: [_jsxs("div", { className: "flex items-start gap-3.5 mb-4", children: [_jsx("div", { className: "w-10 h-10 rounded-[10px] flex items-center justify-center shrink-0 bg-teal-100 text-teal-500", children: _jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 10h16M4 14h10M4 18h6" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-[#1a1f36] m-0", children: "Services Defined" }), _jsxs("p", { className: "text-[0.8125rem] text-[#8792a8] mt-0.5 mb-0", children: [globalState.services.length, " service", globalState.services.length !== 1 ? "s" : "", " available"] })] })] }), _jsx("div", { className: "flex flex-col gap-2", children: globalState.services.map((service) => (_jsxs("div", { className: "py-3.5 px-4 bg-[#fafbfc] rounded-[10px] border border-[#f0f2f7]", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("span", { className: "text-[0.9375rem] font-semibold text-[#1a1f36]", children: service.title }), service.isSetupFormation && (_jsx("span", { className: "py-0.5 px-2 text-[0.625rem] font-bold uppercase tracking-[0.04em] text-emerald-500 bg-[#e8faf3] rounded", children: "Setup" }))] }), service.description && (_jsx("p", { className: "text-[0.8125rem] text-[#4a5578] mt-1.5 mb-0 leading-normal", children: service.description }))] }, service.id))) })] })), _jsxs("section", { className: "bg-white rounded-2xl p-6", style: {
|
|
429
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04), 0 4px 16px rgba(26, 31, 54, 0.06)",
|
|
430
|
+
}, children: [_jsxs("div", { className: "flex items-start gap-3.5 mb-4", children: [_jsx("div", { className: "w-10 h-10 rounded-[10px] flex items-center justify-center shrink-0 bg-[#f4f1ff] text-[#7c5cff]", children: _jsxs("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "12", cy: "7", r: "4" })] }) }), _jsxs("div", { children: [_jsxs("h3", { className: "text-base font-semibold text-[#1a1f36] m-0", children: ["Operator", _jsx(InfoIcon, { content: "Your Powerhouse ID (PHID) as the service provider. This links the offering to your builder profile." })] }), _jsx("p", { className: "text-[0.8125rem] text-[#8792a8] mt-0.5 mb-0", children: offeringOperatorId
|
|
369
431
|
? "Operator assigned to this offering"
|
|
370
|
-
: "No operator set — please provide one" })] })] }), isEditingOperator || !offeringOperatorId ? (_jsxs("div", { className: "
|
|
432
|
+
: "No operator set — please provide one" })] })] }), isEditingOperator || !offeringOperatorId ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: operatorIdInput, onChange: (e) => setOperatorIdInput(e.target.value), placeholder: "Enter operator ID (PHID)", className: "flex-1 py-2.5 px-3.5 text-sm text-[#1a1f36] bg-[#fafbfc] border-[1.5px] border-[#e4e8f0] rounded-lg outline-none transition-[border-color,box-shadow] duration-150 focus:border-[#7c5cff] focus:shadow-[0_0_0_3px_#f4f1ff] placeholder:text-[#8792a8]", style: {
|
|
433
|
+
fontFamily: "'DM Mono', 'SF Mono', monospace",
|
|
434
|
+
} }), _jsx("button", { type: "button", onClick: handleSaveOperatorId, disabled: !operatorIdInput.trim(), className: "py-2.5 px-[18px] text-[0.8125rem] font-semibold text-white bg-[#7c5cff] border-none rounded-lg cursor-pointer whitespace-nowrap transition-[background,opacity] duration-150 hover:bg-[#6a4de6] disabled:opacity-40 disabled:cursor-not-allowed", style: { fontFamily: "'Instrument Sans', system-ui, sans-serif" }, children: offeringOperatorId ? "Update" : "Set Operator" }), isEditingOperator && offeringOperatorId && (_jsx("button", { type: "button", onClick: () => {
|
|
371
435
|
setIsEditingOperator(false);
|
|
372
436
|
setOperatorIdInput(offeringOperatorId);
|
|
373
|
-
}, className: "
|
|
437
|
+
}, className: "py-2.5 px-3.5 text-[0.8125rem] font-medium text-[#8792a8] bg-transparent border-[1.5px] border-[#e4e8f0] rounded-lg cursor-pointer transition-all duration-150 hover:border-[#8792a8] hover:text-[#4a5578]", style: {
|
|
438
|
+
fontFamily: "'Instrument Sans', system-ui, sans-serif",
|
|
439
|
+
}, children: "Cancel" }))] })) : (_jsxs("div", { className: "flex items-center justify-between py-2.5 px-3.5 bg-[#fafbfc] rounded-lg border border-[#f0f2f7]", children: [_jsx("span", { className: "text-[0.9375rem] text-[#1a1f36]", style: {
|
|
440
|
+
fontFamily: "'DM Mono', 'SF Mono', monospace",
|
|
441
|
+
fontSize: "0.875rem",
|
|
442
|
+
}, children: offeringOperatorId }), _jsx("button", { type: "button", onClick: () => setIsEditingOperator(true), className: "flex items-center justify-center w-8 h-8 p-0 text-[#8792a8] bg-transparent border-[1.5px] border-[#e4e8f0] rounded-md cursor-pointer transition-all duration-150 hover:border-[#7c5cff] hover:text-[#7c5cff] hover:bg-[#f4f1ff]", children: _jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), _jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })] }) })] }))] }), globalState.infoLink && (_jsx("section", { className: "grid gap-4 p-5 bg-white rounded-xl max-[900px]:grid-cols-1", style: {
|
|
443
|
+
gridTemplateColumns: "1fr 1fr",
|
|
444
|
+
boxShadow: "0 1px 3px rgba(26, 31, 54, 0.04)",
|
|
445
|
+
}, children: _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[0.6875rem] font-bold uppercase tracking-[0.06em] text-[#8792a8]", children: "More Info" }), _jsxs("a", { href: globalState.infoLink, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 text-sm text-teal-500 no-underline transition-colors duration-150 hover:text-[#0d9488]", children: [globalState.infoLink, _jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), _jsx("polyline", { points: "15 3 21 3 21 9" }), _jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] })] })] }) }))] }));
|
|
374
446
|
}
|
|
375
447
|
function getStatusStyle(status) {
|
|
376
448
|
const statusColors = {
|
|
377
449
|
ACTIVE: {
|
|
378
|
-
bg: "
|
|
379
|
-
text: "
|
|
380
|
-
dot: "
|
|
450
|
+
bg: "#e8faf3",
|
|
451
|
+
text: "#10b981",
|
|
452
|
+
dot: "#10b981",
|
|
381
453
|
},
|
|
382
454
|
DRAFT: {
|
|
383
|
-
bg: "
|
|
384
|
-
text: "
|
|
385
|
-
dot: "
|
|
455
|
+
bg: "#f1f5f9",
|
|
456
|
+
text: "#64748b",
|
|
457
|
+
dot: "#64748b",
|
|
386
458
|
},
|
|
387
459
|
COMING_SOON: {
|
|
388
|
-
bg: "
|
|
389
|
-
text: "
|
|
390
|
-
dot: "
|
|
460
|
+
bg: "#e8f7fc",
|
|
461
|
+
text: "#0ea5e9",
|
|
462
|
+
dot: "#0ea5e9",
|
|
391
463
|
},
|
|
392
464
|
DEPRECATED: {
|
|
393
|
-
bg: "
|
|
394
|
-
text: "
|
|
395
|
-
dot: "
|
|
465
|
+
bg: "#fef1f3",
|
|
466
|
+
text: "#f43f5e",
|
|
467
|
+
dot: "#f43f5e",
|
|
396
468
|
},
|
|
397
469
|
};
|
|
398
470
|
return statusColors[status] || statusColors.DRAFT;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
|
|
2
2
|
import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
|
|
3
|
-
import "./ServiceCatalog.css";
|
|
4
3
|
interface ServiceCatalogProps {
|
|
5
4
|
document: ServiceOfferingDocument;
|
|
6
5
|
dispatch: DocumentDispatch<ServiceOfferingAction>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ServiceCatalog.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ServiceCatalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAMtB,MAAM,kEAAkE,CAAC;
|
|
1
|
+
{"version":3,"file":"ServiceCatalog.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ServiceCatalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAMtB,MAAM,kEAAkE,CAAC;AAgH1E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAokEzE"}
|