@schandlergarcia/sf-web-components 2.3.17 → 2.5.0
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/.a4drules/skills/command-center-builder/SKILL.md +3 -2
- package/.a4drules/skills/component-library/SKILL.md +50 -4
- package/.a4drules/skills/component-library/card-components.md +88 -0
- package/.a4drules/skills/component-library/when-to-use.md +1 -0
- package/CHANGELOG.md +40 -0
- package/CLAUDE.md +12 -13
- package/README.md +0 -15
- package/dist/components/library/cards/KanbanBoard.js +313 -0
- package/dist/components/library/cards/KanbanBoard.js.map +1 -0
- package/dist/components/library/index.js +60 -57
- package/dist/components/library/index.js.map +1 -1
- package/dist/components/workspace/ComponentRegistry.js +5 -2
- package/dist/components/workspace/ComponentRegistry.js.map +1 -1
- package/dist/index.js +84 -82
- package/dist/index.js.map +1 -1
- package/dist/styles/global.css +44 -57
- package/package.json +7 -2
- package/scripts/apply-brand.mjs +47 -30
- package/scripts/postinstall.mjs +1 -11
- package/src/components/library/cards/KanbanBoard.jsx +507 -0
- package/src/components/library/index.jsx +1 -0
- package/src/styles/global.css +44 -57
- package/brands/engine/PARTNER_HUB_PRD.md +0 -584
- package/brands/engine/agentApiConfig.ts +0 -36
- package/brands/engine/app/api/graphql-operations-types.ts +0 -11260
- package/brands/engine/app/api/graphqlClient.ts +0 -25
- package/brands/engine/app/api/partnerQueries.ts +0 -212
- package/brands/engine/app/appLayout.tsx +0 -5
- package/brands/engine/app/components/AgentPanel.tsx +0 -541
- package/brands/engine/app/components/AgentforceConversationClient.tsx +0 -201
- package/brands/engine/app/components/Data360Widget.tsx +0 -301
- package/brands/engine/app/components/__inherit_AgentforceConversationClient.tsx +0 -3
- package/brands/engine/app/components/alerts/status-alert.tsx +0 -49
- package/brands/engine/app/components/layouts/card-layout.tsx +0 -29
- package/brands/engine/app/components/workspace/CommandCenter.tsx +0 -16
- package/brands/engine/app/config/agentApi.ts +0 -36
- package/brands/engine/app/data/partner-hub-sample-data.js +0 -297
- package/brands/engine/app/features/object-search/__examples__/api/accountSearchService.ts +0 -46
- package/brands/engine/app/features/object-search/__examples__/api/query/distinctAccountIndustries.graphql +0 -19
- package/brands/engine/app/features/object-search/__examples__/api/query/distinctAccountTypes.graphql +0 -19
- package/brands/engine/app/features/object-search/__examples__/api/query/getAccountDetail.graphql +0 -121
- package/brands/engine/app/features/object-search/__examples__/api/query/searchAccounts.graphql +0 -51
- package/brands/engine/app/features/object-search/__examples__/pages/AccountObjectDetailPage.tsx +0 -357
- package/brands/engine/app/features/object-search/__examples__/pages/AccountSearch.tsx +0 -312
- package/brands/engine/app/features/object-search/__examples__/pages/Home.tsx +0 -34
- package/brands/engine/app/features/object-search/api/objectSearchService.ts +0 -84
- package/brands/engine/app/features/object-search/components/ActiveFilters.tsx +0 -89
- package/brands/engine/app/features/object-search/components/FilterContext.tsx +0 -83
- package/brands/engine/app/features/object-search/components/ObjectBreadcrumb.tsx +0 -66
- package/brands/engine/app/features/object-search/components/PaginationControls.tsx +0 -109
- package/brands/engine/app/features/object-search/components/SearchBar.tsx +0 -41
- package/brands/engine/app/features/object-search/components/SortControl.tsx +0 -143
- package/brands/engine/app/features/object-search/components/filters/BooleanFilter.tsx +0 -78
- package/brands/engine/app/features/object-search/components/filters/DateFilter.tsx +0 -128
- package/brands/engine/app/features/object-search/components/filters/DateRangeFilter.tsx +0 -70
- package/brands/engine/app/features/object-search/components/filters/FilterFieldWrapper.tsx +0 -33
- package/brands/engine/app/features/object-search/components/filters/MultiSelectFilter.tsx +0 -97
- package/brands/engine/app/features/object-search/components/filters/NumericRangeFilter.tsx +0 -163
- package/brands/engine/app/features/object-search/components/filters/SearchFilter.tsx +0 -50
- package/brands/engine/app/features/object-search/components/filters/SelectFilter.tsx +0 -97
- package/brands/engine/app/features/object-search/components/filters/TextFilter.tsx +0 -91
- package/brands/engine/app/features/object-search/hooks/useAsyncData.ts +0 -54
- package/brands/engine/app/features/object-search/hooks/useCachedAsyncData.ts +0 -184
- package/brands/engine/app/features/object-search/hooks/useDebouncedCallback.ts +0 -34
- package/brands/engine/app/features/object-search/hooks/useObjectSearchParams.ts +0 -252
- package/brands/engine/app/features/object-search/utils/debounce.ts +0 -25
- package/brands/engine/app/features/object-search/utils/fieldUtils.ts +0 -29
- package/brands/engine/app/features/object-search/utils/filterUtils.ts +0 -404
- package/brands/engine/app/features/object-search/utils/sortUtils.ts +0 -38
- package/brands/engine/app/hooks/useEngineLiveData.ts +0 -49
- package/brands/engine/app/hooks/useEvaAgent.ts +0 -288
- package/brands/engine/app/hooks/usePartnerDashboardData.ts +0 -141
- package/brands/engine/app/navigationMenu.tsx +0 -80
- package/brands/engine/app/pages/AccountObjectDetailPage.tsx +0 -361
- package/brands/engine/app/pages/AccountSearch.tsx +0 -305
- package/brands/engine/app/pages/BlankDashboard.tsx +0 -15
- package/brands/engine/app/pages/DataTest.tsx +0 -78
- package/brands/engine/app/pages/Home.tsx +0 -5
- package/brands/engine/app/pages/NotFound.tsx +0 -19
- package/brands/engine/app/pages/PartnerHubDashboard.tsx +0 -2760
- package/brands/engine/app/pages/Search.tsx +0 -13
- package/brands/engine/app/router-utils.tsx +0 -35
- package/brands/engine/app/routes.tsx +0 -39
- package/brands/engine/app/styles/global.css +0 -269
- package/brands/engine/brand.css +0 -40
- package/brands/engine/engine-command-center-prd.md +0 -575
- package/brands/engine/engine-live-data.js +0 -135
- package/brands/engine/engine-sample-data.js +0 -378
- package/brands/engine/engine_logo.png +0 -0
- package/brands/engine/global.css +0 -269
- package/brands/engine/partner-hub-sample-data.js +0 -281
- package/brands/engine/schema.graphql +0 -292
- package/brands/engine/useEngineLiveData.ts +0 -49
- package/brands/engine/useEvaAgent.ts +0 -288
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2026, Salesforce, Inc.
|
|
3
|
-
* All rights reserved.
|
|
4
|
-
* For full license text, see the LICENSE.txt file
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
|
|
8
|
-
import type { AgentforceClientConfig } from "@salesforce/agentforce-conversation-client";
|
|
9
|
-
import { useEffect, useMemo, useRef } from "react";
|
|
10
|
-
import type {
|
|
11
|
-
ResolvedEmbedOptions,
|
|
12
|
-
AgentforceConversationClientProps,
|
|
13
|
-
} from "../types/conversation";
|
|
14
|
-
|
|
15
|
-
const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
|
|
16
|
-
|
|
17
|
-
const DEFAULT_STYLE_TOKENS: NonNullable<AgentforceClientConfig["styleTokens"]> = {
|
|
18
|
-
containerBackground: "#fafafa",
|
|
19
|
-
|
|
20
|
-
headerBlockBackground: "#372949",
|
|
21
|
-
headerBlockTextColor: "#ffffff",
|
|
22
|
-
headerBlockIconColor: "#ffffff",
|
|
23
|
-
headerBlockBorderBottomColor: "#3b0764",
|
|
24
|
-
headerBlockFocusBorder: "#c4b5fd",
|
|
25
|
-
|
|
26
|
-
messageBlockInboundBackgroundColor: "#ffffff",
|
|
27
|
-
messageBlockInboundTextColor: "#1f2937",
|
|
28
|
-
messageBlockInboundBorder: "1px solid #e5e7eb",
|
|
29
|
-
|
|
30
|
-
messageBlockOutboundBackgroundColor: "#ede9fe",
|
|
31
|
-
messageBlockOutboundTextColor: "#1f2937",
|
|
32
|
-
messageBlockOutboundBorder: "1px solid #d8b4fe",
|
|
33
|
-
|
|
34
|
-
messageInputTextColor: "#1f2937",
|
|
35
|
-
messageInputTextBackgroundColor: "#ffffff",
|
|
36
|
-
messageInputFooterBorderColor: "#d1d5db",
|
|
37
|
-
messageInputFooterBorderFocusColor: "#9ca3af",
|
|
38
|
-
messageInputFocusShadow: "0 0 0 3px rgba(156, 163, 175, 0.25)",
|
|
39
|
-
messageInputFooterPlaceholderText: "#6b7280",
|
|
40
|
-
|
|
41
|
-
messageInputFooterSendButton: "#7e22ce",
|
|
42
|
-
messageInputFooterSendButtonHoverColor: "#6b21a8",
|
|
43
|
-
messageInputSendButtonIconColor: "#ffffff",
|
|
44
|
-
messageInputSendButtonDisabledColor: "#e5e7eb",
|
|
45
|
-
messageInputActionButtonFocusBorder: "#a855f7",
|
|
46
|
-
};
|
|
47
|
-
const SINGLETON_KEY = "__agentforceConversationClientSingleton";
|
|
48
|
-
|
|
49
|
-
interface AgentforceConversationClientSingleton {
|
|
50
|
-
initPromise?: Promise<void>;
|
|
51
|
-
initialized: boolean;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
interface WindowWithAgentforceSingleton extends Window {
|
|
55
|
-
[SINGLETON_KEY]?: AgentforceConversationClientSingleton;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function getSingleton(): AgentforceConversationClientSingleton {
|
|
59
|
-
const win = window as WindowWithAgentforceSingleton;
|
|
60
|
-
if (!win[SINGLETON_KEY]) {
|
|
61
|
-
win[SINGLETON_KEY] = {
|
|
62
|
-
initialized: false,
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
return win[SINGLETON_KEY]!;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function getOrCreateGlobalHost(): HTMLDivElement {
|
|
69
|
-
let host = document.getElementById(GLOBAL_HOST_ID) as HTMLDivElement | null;
|
|
70
|
-
if (!host) {
|
|
71
|
-
host = document.createElement("div");
|
|
72
|
-
host.id = GLOBAL_HOST_ID;
|
|
73
|
-
document.body.appendChild(host);
|
|
74
|
-
}
|
|
75
|
-
return host;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function getDefaultEmbedOptions(): ResolvedEmbedOptions {
|
|
79
|
-
return { salesforceOrigin: window.location.origin };
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/**
|
|
83
|
-
* React wrapper that embeds the Agentforce Conversation Client (copilot/agent UI)
|
|
84
|
-
* using Lightning Out. Requires a valid Salesforce session for the given org.
|
|
85
|
-
* Config is passed through from the consumer to the embed client as-is.
|
|
86
|
-
*/
|
|
87
|
-
export function AgentforceConversationClient({
|
|
88
|
-
agentId,
|
|
89
|
-
agentLabel,
|
|
90
|
-
inline: inlineProp,
|
|
91
|
-
headerEnabled,
|
|
92
|
-
showHeaderIcon,
|
|
93
|
-
width,
|
|
94
|
-
height,
|
|
95
|
-
styleTokens,
|
|
96
|
-
salesforceOrigin,
|
|
97
|
-
frontdoorUrl,
|
|
98
|
-
}: AgentforceConversationClientProps) {
|
|
99
|
-
const containerRef = useRef<HTMLDivElement>(null);
|
|
100
|
-
const normalizedAgentforceClientConfig = useMemo<AgentforceClientConfig>(() => {
|
|
101
|
-
const renderingConfig: NonNullable<AgentforceClientConfig["renderingConfig"]> = {
|
|
102
|
-
mode: inlineProp ? "inline" : "floating",
|
|
103
|
-
...(headerEnabled !== undefined && { headerEnabled }),
|
|
104
|
-
...(showHeaderIcon !== undefined && { showHeaderIcon }),
|
|
105
|
-
...{ showAvatar: false },
|
|
106
|
-
...(width !== undefined && { width }),
|
|
107
|
-
...(height !== undefined && { height }),
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
return {
|
|
111
|
-
...(agentId !== undefined && { agentId }),
|
|
112
|
-
agentLabel: agentLabel ?? "Chat with us",
|
|
113
|
-
styleTokens: { ...DEFAULT_STYLE_TOKENS, ...styleTokens },
|
|
114
|
-
renderingConfig,
|
|
115
|
-
};
|
|
116
|
-
}, [agentId, agentLabel, inlineProp, headerEnabled, showHeaderIcon, width, height, styleTokens]);
|
|
117
|
-
|
|
118
|
-
const inline = normalizedAgentforceClientConfig?.renderingConfig?.mode === "inline";
|
|
119
|
-
|
|
120
|
-
useEffect(() => {
|
|
121
|
-
if (!normalizedAgentforceClientConfig?.agentId) {
|
|
122
|
-
throw new Error(
|
|
123
|
-
"AgentforceConversationClient requires agentId. " +
|
|
124
|
-
"Pass flat props only (agentId, agentLabel, inline, headerEnabled, showHeaderIcon, width, height, styleTokens).",
|
|
125
|
-
);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
const singleton = getSingleton();
|
|
129
|
-
if (singleton.initialized || singleton.initPromise) {
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
if (inline && !containerRef.current) {
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
const initialize = (options: ResolvedEmbedOptions) => {
|
|
138
|
-
if (singleton.initialized) {
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
const existingEmbed = document.querySelector('lightning-out-application[data-lo="acc"]');
|
|
142
|
-
if (existingEmbed) {
|
|
143
|
-
singleton.initialized = true;
|
|
144
|
-
return;
|
|
145
|
-
}
|
|
146
|
-
const host = inline ? containerRef.current! : getOrCreateGlobalHost();
|
|
147
|
-
|
|
148
|
-
embedAgentforceClient({
|
|
149
|
-
container: host,
|
|
150
|
-
salesforceOrigin: salesforceOrigin ?? options.salesforceOrigin,
|
|
151
|
-
frontdoorUrl: frontdoorUrl ?? options.frontdoorUrl,
|
|
152
|
-
agentforceClientConfig: normalizedAgentforceClientConfig,
|
|
153
|
-
});
|
|
154
|
-
singleton.initialized = true;
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
const shouldFetchFrontdoor = window.location.hostname === "localhost";
|
|
158
|
-
|
|
159
|
-
if (shouldFetchFrontdoor) {
|
|
160
|
-
singleton.initPromise = fetch("/__lo/frontdoor")
|
|
161
|
-
.then(async (res) => {
|
|
162
|
-
if (!res.ok) {
|
|
163
|
-
console.error("frontdoor fetch failed");
|
|
164
|
-
return;
|
|
165
|
-
}
|
|
166
|
-
const { frontdoorUrl: resolvedFrontdoorUrl } = await res.json();
|
|
167
|
-
initialize({ frontdoorUrl: resolvedFrontdoorUrl });
|
|
168
|
-
})
|
|
169
|
-
.catch((err) => {
|
|
170
|
-
console.error("AgentforceConversationClient: failed to fetch frontdoor URL", err);
|
|
171
|
-
})
|
|
172
|
-
.finally(() => {
|
|
173
|
-
singleton.initPromise = undefined;
|
|
174
|
-
});
|
|
175
|
-
} else {
|
|
176
|
-
singleton.initPromise = Promise.resolve()
|
|
177
|
-
.then(() => {
|
|
178
|
-
initialize(getDefaultEmbedOptions());
|
|
179
|
-
})
|
|
180
|
-
.catch((err) => {
|
|
181
|
-
console.error("AgentforceConversationClient: failed to embed Agentforce client", err);
|
|
182
|
-
})
|
|
183
|
-
.finally(() => {
|
|
184
|
-
singleton.initPromise = undefined;
|
|
185
|
-
});
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
return () => {
|
|
189
|
-
// Intentionally no cleanup:
|
|
190
|
-
// This component guarantees a single LO initialization per window.
|
|
191
|
-
};
|
|
192
|
-
}, [salesforceOrigin, frontdoorUrl, normalizedAgentforceClientConfig, inline]);
|
|
193
|
-
|
|
194
|
-
if (!inline) {
|
|
195
|
-
return null;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
return <div ref={containerRef} />;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
export default AgentforceConversationClient;
|
|
@@ -1,301 +0,0 @@
|
|
|
1
|
-
import { FunnelIcon, BookmarkIcon, CheckIcon } from "@heroicons/react/24/outline";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { Dropdown, Button } from "@/components/library";
|
|
4
|
-
|
|
5
|
-
interface Segment {
|
|
6
|
-
id: string;
|
|
7
|
-
name: string;
|
|
8
|
-
count?: number;
|
|
9
|
-
metric?: string;
|
|
10
|
-
color: string;
|
|
11
|
-
isLoading?: boolean;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export default function Data360Widget() {
|
|
15
|
-
const [selectedBookingType, setSelectedBookingType] = useState("All Types");
|
|
16
|
-
const [selectedCustomer, setSelectedCustomer] = useState("All Customers");
|
|
17
|
-
const [selectedTiming, setSelectedTiming] = useState("All Timing");
|
|
18
|
-
const [activeSegment, setActiveSegment] = useState<string | null>(null);
|
|
19
|
-
const [savedSegments, setSavedSegments] = useState<Segment[]>([
|
|
20
|
-
{
|
|
21
|
-
id: "segment-1",
|
|
22
|
-
name: "Corporate Travel Accounts",
|
|
23
|
-
count: 342,
|
|
24
|
-
metric: "$485K revenue • 4.2 avg nights",
|
|
25
|
-
color: "text-blue-600 dark:text-blue-400"
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
id: "segment-2",
|
|
29
|
-
name: "High-Value Leisure",
|
|
30
|
-
count: 128,
|
|
31
|
-
metric: "$620K revenue • 6.8 avg nights",
|
|
32
|
-
color: "text-green-600 dark:text-green-400"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
id: "segment-3",
|
|
36
|
-
name: "Last-Minute Bookings",
|
|
37
|
-
count: 89,
|
|
38
|
-
metric: "$142K revenue • 2.1 avg nights",
|
|
39
|
-
color: "text-orange-600 dark:text-orange-400"
|
|
40
|
-
}
|
|
41
|
-
]);
|
|
42
|
-
|
|
43
|
-
const bookingTypes = ["All Types", "Corporate", "Leisure", "Group Event", "Extended Stay"];
|
|
44
|
-
const customerTypes = ["All Customers", "First Time", "Returning", "VIP / High-Value", "Loyalty Member"];
|
|
45
|
-
const timingOptions = ["All Timing", "Last Minute (<7 days)", "Short Lead (7-30 days)", "Advance (>30 days)", "Recently Cancelled"];
|
|
46
|
-
|
|
47
|
-
const colors = [
|
|
48
|
-
"text-purple-600 dark:text-purple-400",
|
|
49
|
-
"text-pink-600 dark:text-pink-400",
|
|
50
|
-
"text-indigo-600 dark:text-indigo-400",
|
|
51
|
-
"text-cyan-600 dark:text-cyan-400",
|
|
52
|
-
"text-amber-600 dark:text-amber-400"
|
|
53
|
-
];
|
|
54
|
-
|
|
55
|
-
function generateSegmentName(): string {
|
|
56
|
-
const parts: string[] = [];
|
|
57
|
-
if (selectedBookingType !== "All Types") parts.push(selectedBookingType);
|
|
58
|
-
if (selectedCustomer !== "All Customers") parts.push(selectedCustomer);
|
|
59
|
-
if (selectedTiming !== "All Timing") {
|
|
60
|
-
const timingShort = selectedTiming.replace(/\s*\([^)]*\)/g, "").trim();
|
|
61
|
-
parts.push(timingShort);
|
|
62
|
-
}
|
|
63
|
-
return parts.length > 0 ? parts.join(" + ") : "Custom Segment";
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function handleApplySegment() {
|
|
67
|
-
const newId = `segment-${Date.now()}`;
|
|
68
|
-
const segmentName = generateSegmentName();
|
|
69
|
-
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
|
70
|
-
|
|
71
|
-
// Add segment with loading state
|
|
72
|
-
const newSegment: Segment = {
|
|
73
|
-
id: newId,
|
|
74
|
-
name: segmentName,
|
|
75
|
-
color: randomColor,
|
|
76
|
-
isLoading: true
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
setSavedSegments(prev => [...prev, newSegment]);
|
|
80
|
-
|
|
81
|
-
// Simulate data loading for 60 seconds
|
|
82
|
-
setTimeout(() => {
|
|
83
|
-
const count = Math.floor(Math.random() * 200) + 50;
|
|
84
|
-
const revenue = Math.floor(Math.random() * 400) + 100;
|
|
85
|
-
const avgNights = (Math.random() * 5 + 2).toFixed(1);
|
|
86
|
-
|
|
87
|
-
setSavedSegments(prev =>
|
|
88
|
-
prev.map(seg =>
|
|
89
|
-
seg.id === newId
|
|
90
|
-
? {
|
|
91
|
-
...seg,
|
|
92
|
-
count,
|
|
93
|
-
metric: `$${revenue}K revenue • ${avgNights} avg nights`,
|
|
94
|
-
isLoading: false
|
|
95
|
-
}
|
|
96
|
-
: seg
|
|
97
|
-
)
|
|
98
|
-
);
|
|
99
|
-
}, 60000); // 60 seconds
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
return (
|
|
103
|
-
<div className="bg-gradient-to-br from-white via-[var(--color-dash-surface)] to-white dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-dark)] dark:to-[var(--color-dash-text)] rounded-2xl p-8 border-2 border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
|
|
104
|
-
{/* Header */}
|
|
105
|
-
<div className="flex items-start justify-between mb-6">
|
|
106
|
-
<div className="space-y-1">
|
|
107
|
-
<h2 className="text-3xl font-black text-[var(--color-dash-text)] dark:text-white tracking-tight">Booking Segments</h2>
|
|
108
|
-
<p className="text-base text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Target and analyze customer groups across your properties</p>
|
|
109
|
-
</div>
|
|
110
|
-
|
|
111
|
-
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-dash-success)]/10 border-2 border-[var(--color-dash-success)]/40 shadow-sm">
|
|
112
|
-
<div className="relative flex h-2 w-2">
|
|
113
|
-
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-dash-success)] opacity-75"></span>
|
|
114
|
-
<span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-dash-success)]"></span>
|
|
115
|
-
</div>
|
|
116
|
-
<span className="text-xs font-bold text-[var(--color-dash-success)] uppercase tracking-wide">Live</span>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
|
|
120
|
-
{/* Segment Builder */}
|
|
121
|
-
<div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 border-2 border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 mb-6">
|
|
122
|
-
<div className="flex items-center gap-2 mb-5">
|
|
123
|
-
<div className="bg-[var(--color-dash-accent)]/10 rounded-lg p-1.5">
|
|
124
|
-
<FunnelIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
|
|
125
|
-
</div>
|
|
126
|
-
<h3 className="text-base font-bold text-[var(--color-dash-text)] dark:text-white uppercase tracking-wider">Build New Segment</h3>
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
130
|
-
{/* Booking Type Dropdown */}
|
|
131
|
-
<div>
|
|
132
|
-
<label className="block text-sm font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider mb-2">
|
|
133
|
-
Booking Type
|
|
134
|
-
</label>
|
|
135
|
-
<Dropdown>
|
|
136
|
-
<Button variant="outline" className="w-full justify-between text-left border-2 border-[var(--color-dash-label)]/40 hover:border-[var(--color-dash-accent)] dark:border-[var(--color-dash-muted)]/50 dark:hover:border-[var(--color-dash-accent)] shadow-sm hover:shadow-md transition-all duration-200">
|
|
137
|
-
<span className="text-base font-medium">{selectedBookingType}</span>
|
|
138
|
-
</Button>
|
|
139
|
-
<Dropdown.Popover className="w-[--trigger-width]">
|
|
140
|
-
<Dropdown.Menu
|
|
141
|
-
onAction={(key) => setSelectedBookingType(key as string)}
|
|
142
|
-
selectedKeys={[selectedBookingType]}
|
|
143
|
-
selectionMode="single"
|
|
144
|
-
>
|
|
145
|
-
{bookingTypes.map((type) => (
|
|
146
|
-
<Dropdown.Item
|
|
147
|
-
key={type}
|
|
148
|
-
id={type}
|
|
149
|
-
textValue={type}
|
|
150
|
-
className="px-4 py-3 rounded-lg hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 cursor-pointer"
|
|
151
|
-
>
|
|
152
|
-
<div className="flex items-center justify-between">
|
|
153
|
-
<span className="text-base font-medium text-[var(--color-dash-text)] dark:text-white">{type}</span>
|
|
154
|
-
{selectedBookingType === type && (
|
|
155
|
-
<CheckIcon className="h-4 w-4 text-[var(--color-dash-accent)]" />
|
|
156
|
-
)}
|
|
157
|
-
</div>
|
|
158
|
-
</Dropdown.Item>
|
|
159
|
-
))}
|
|
160
|
-
</Dropdown.Menu>
|
|
161
|
-
</Dropdown.Popover>
|
|
162
|
-
</Dropdown>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
{/* Customer Type Dropdown */}
|
|
166
|
-
<div>
|
|
167
|
-
<label className="block text-sm font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider mb-2">
|
|
168
|
-
Customer Type
|
|
169
|
-
</label>
|
|
170
|
-
<Dropdown>
|
|
171
|
-
<Button variant="outline" className="w-full justify-between text-left border-2 border-[var(--color-dash-label)]/40 hover:border-[var(--color-dash-accent)] dark:border-[var(--color-dash-muted)]/50 dark:hover:border-[var(--color-dash-accent)] shadow-sm hover:shadow-md transition-all duration-200">
|
|
172
|
-
<span className="text-base font-medium">{selectedCustomer}</span>
|
|
173
|
-
</Button>
|
|
174
|
-
<Dropdown.Popover className="w-[--trigger-width]">
|
|
175
|
-
<Dropdown.Menu
|
|
176
|
-
onAction={(key) => setSelectedCustomer(key as string)}
|
|
177
|
-
selectedKeys={[selectedCustomer]}
|
|
178
|
-
selectionMode="single"
|
|
179
|
-
>
|
|
180
|
-
{customerTypes.map((type) => (
|
|
181
|
-
<Dropdown.Item
|
|
182
|
-
key={type}
|
|
183
|
-
id={type}
|
|
184
|
-
textValue={type}
|
|
185
|
-
className="px-4 py-3 rounded-lg hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 cursor-pointer"
|
|
186
|
-
>
|
|
187
|
-
<div className="flex items-center justify-between">
|
|
188
|
-
<span className="text-base font-medium text-[var(--color-dash-text)] dark:text-white">{type}</span>
|
|
189
|
-
{selectedCustomer === type && (
|
|
190
|
-
<CheckIcon className="h-4 w-4 text-[var(--color-dash-accent)]" />
|
|
191
|
-
)}
|
|
192
|
-
</div>
|
|
193
|
-
</Dropdown.Item>
|
|
194
|
-
))}
|
|
195
|
-
</Dropdown.Menu>
|
|
196
|
-
</Dropdown.Popover>
|
|
197
|
-
</Dropdown>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
{/* Booking Timing Dropdown */}
|
|
201
|
-
<div>
|
|
202
|
-
<label className="block text-sm font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider mb-2">
|
|
203
|
-
Booking Timing
|
|
204
|
-
</label>
|
|
205
|
-
<Dropdown>
|
|
206
|
-
<Button variant="outline" className="w-full justify-between text-left border-2 border-[var(--color-dash-label)]/40 hover:border-[var(--color-dash-accent)] dark:border-[var(--color-dash-muted)]/50 dark:hover:border-[var(--color-dash-accent)] shadow-sm hover:shadow-md transition-all duration-200">
|
|
207
|
-
<span className="text-base font-medium">{selectedTiming}</span>
|
|
208
|
-
</Button>
|
|
209
|
-
<Dropdown.Popover className="w-[--trigger-width]">
|
|
210
|
-
<Dropdown.Menu
|
|
211
|
-
onAction={(key) => setSelectedTiming(key as string)}
|
|
212
|
-
selectedKeys={[selectedTiming]}
|
|
213
|
-
selectionMode="single"
|
|
214
|
-
>
|
|
215
|
-
{timingOptions.map((type) => (
|
|
216
|
-
<Dropdown.Item
|
|
217
|
-
key={type}
|
|
218
|
-
id={type}
|
|
219
|
-
textValue={type}
|
|
220
|
-
className="px-4 py-3 rounded-lg hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 cursor-pointer"
|
|
221
|
-
>
|
|
222
|
-
<div className="flex items-center justify-between">
|
|
223
|
-
<span className="text-base font-medium text-[var(--color-dash-text)] dark:text-white">{type}</span>
|
|
224
|
-
{selectedTiming === type && (
|
|
225
|
-
<CheckIcon className="h-4 w-4 text-[var(--color-dash-accent)]" />
|
|
226
|
-
)}
|
|
227
|
-
</div>
|
|
228
|
-
</Dropdown.Item>
|
|
229
|
-
))}
|
|
230
|
-
</Dropdown.Menu>
|
|
231
|
-
</Dropdown.Popover>
|
|
232
|
-
</Dropdown>
|
|
233
|
-
</div>
|
|
234
|
-
</div>
|
|
235
|
-
|
|
236
|
-
{/* Apply Button */}
|
|
237
|
-
<div className="mt-5 flex justify-end">
|
|
238
|
-
<Button variant="primary" className="px-6 py-2.5" onClick={handleApplySegment}>
|
|
239
|
-
<span className="text-base font-semibold">Apply & Save Segment</span>
|
|
240
|
-
</Button>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
|
|
244
|
-
{/* Saved Segments */}
|
|
245
|
-
<div>
|
|
246
|
-
<div className="flex items-center gap-2 mb-4">
|
|
247
|
-
<div className="bg-[var(--color-dash-accent)]/10 rounded-lg p-1.5">
|
|
248
|
-
<BookmarkIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
|
|
249
|
-
</div>
|
|
250
|
-
<h3 className="text-base font-bold text-[var(--color-dash-text)] dark:text-white uppercase tracking-wider">Saved Segments</h3>
|
|
251
|
-
</div>
|
|
252
|
-
|
|
253
|
-
<div className="space-y-3">
|
|
254
|
-
{savedSegments.map((segment) => (
|
|
255
|
-
<button
|
|
256
|
-
key={segment.id}
|
|
257
|
-
onClick={() => setActiveSegment(segment.id)}
|
|
258
|
-
className={`w-full text-left bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-5 border-2 transition-all duration-300 ${
|
|
259
|
-
activeSegment === segment.id
|
|
260
|
-
? 'border-[var(--color-dash-accent)] shadow-lg cursor-default'
|
|
261
|
-
: 'border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-accent)] hover:shadow-lg cursor-pointer'
|
|
262
|
-
}`}
|
|
263
|
-
>
|
|
264
|
-
<div className="flex items-start justify-between gap-4">
|
|
265
|
-
<div className="flex-1">
|
|
266
|
-
<h4 className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white mb-1.5">{segment.name}</h4>
|
|
267
|
-
{segment.isLoading ? (
|
|
268
|
-
<div className="flex items-center gap-4 text-base">
|
|
269
|
-
<div className="flex items-center gap-2">
|
|
270
|
-
<div className="h-5 w-16 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
|
|
271
|
-
<span className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">bookings</span>
|
|
272
|
-
</div>
|
|
273
|
-
<span className="text-[var(--color-dash-label)]/40">•</span>
|
|
274
|
-
<div className="h-5 w-32 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
|
|
275
|
-
</div>
|
|
276
|
-
) : (
|
|
277
|
-
<div className="flex items-center gap-4 text-base">
|
|
278
|
-
<span className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
|
|
279
|
-
<span className="font-bold text-[var(--color-dash-text)] dark:text-white">{segment.count}</span> bookings
|
|
280
|
-
</span>
|
|
281
|
-
<span className="text-[var(--color-dash-label)]/40">•</span>
|
|
282
|
-
<span className={`font-semibold ${segment.color}`}>{segment.metric}</span>
|
|
283
|
-
</div>
|
|
284
|
-
)}
|
|
285
|
-
</div>
|
|
286
|
-
|
|
287
|
-
{activeSegment === segment.id && (
|
|
288
|
-
<div className="flex-shrink-0">
|
|
289
|
-
<div className="px-3 py-1.5 rounded-full bg-[var(--color-dash-accent)]/10 border-2 border-[var(--color-dash-accent)]/50 shadow-sm">
|
|
290
|
-
<span className="text-xs font-bold text-[var(--color-dash-accent)] uppercase tracking-wide">Active</span>
|
|
291
|
-
</div>
|
|
292
|
-
</div>
|
|
293
|
-
)}
|
|
294
|
-
</div>
|
|
295
|
-
</button>
|
|
296
|
-
))}
|
|
297
|
-
</div>
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
);
|
|
301
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { cva, type VariantProps } from 'class-variance-authority';
|
|
2
|
-
import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
|
|
3
|
-
import { Alert, AlertDescription } from '../../components/ui/alert';
|
|
4
|
-
import { useId } from 'react';
|
|
5
|
-
|
|
6
|
-
const statusAlertVariants = cva('', {
|
|
7
|
-
variants: {
|
|
8
|
-
variant: {
|
|
9
|
-
error: '',
|
|
10
|
-
success: '',
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
defaultVariants: {
|
|
14
|
-
variant: 'error',
|
|
15
|
-
},
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
|
|
19
|
-
children?: React.ReactNode;
|
|
20
|
-
/** Alert variant type. @default "error" */
|
|
21
|
-
variant?: 'error' | 'success';
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Status alert component for displaying error or success messages.
|
|
26
|
-
* Returns null if no children are provided.
|
|
27
|
-
*/
|
|
28
|
-
export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
|
|
29
|
-
const descriptionId = useId();
|
|
30
|
-
if (!children) return null;
|
|
31
|
-
|
|
32
|
-
const isError = variant === 'error';
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<Alert
|
|
36
|
-
variant={isError ? 'destructive' : 'default'}
|
|
37
|
-
className={statusAlertVariants({ variant })}
|
|
38
|
-
aria-describedby={descriptionId}
|
|
39
|
-
role={isError ? 'alert' : 'status'}
|
|
40
|
-
>
|
|
41
|
-
{isError ? (
|
|
42
|
-
<AlertCircleIcon aria-hidden="true" />
|
|
43
|
-
) : (
|
|
44
|
-
<CheckCircle2Icon aria-hidden="true" />
|
|
45
|
-
)}
|
|
46
|
-
<AlertDescription id={descriptionId}>{children}</AlertDescription>
|
|
47
|
-
</Alert>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Card,
|
|
3
|
-
CardContent,
|
|
4
|
-
CardDescription,
|
|
5
|
-
CardHeader,
|
|
6
|
-
CardTitle,
|
|
7
|
-
} from '../../components/ui/card';
|
|
8
|
-
|
|
9
|
-
interface CardLayoutProps {
|
|
10
|
-
title: string;
|
|
11
|
-
description?: string;
|
|
12
|
-
children: React.ReactNode;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Card layout component for authentication pages.
|
|
17
|
-
* Provides CardHeader with title and optional description, and CardContent.
|
|
18
|
-
*/
|
|
19
|
-
export function CardLayout({ title, description, children }: CardLayoutProps) {
|
|
20
|
-
return (
|
|
21
|
-
<Card>
|
|
22
|
-
<CardHeader>
|
|
23
|
-
<CardTitle className="text-2xl">{title}</CardTitle>
|
|
24
|
-
{description && <CardDescription>{description}</CardDescription>}
|
|
25
|
-
</CardHeader>
|
|
26
|
-
<CardContent>{children}</CardContent>
|
|
27
|
-
</Card>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
|
|
2
|
-
import DataModeProvider from "@/components/library/data/DataModeProvider";
|
|
3
|
-
import { ENABLE_SAMPLE_DATA_CACHE } from "@/lib/dataStrategy";
|
|
4
|
-
import { Toaster } from "sonner";
|
|
5
|
-
import PartnerHubDashboard from "../../pages/PartnerHubDashboard";
|
|
6
|
-
|
|
7
|
-
export default function CommandCenter() {
|
|
8
|
-
return (
|
|
9
|
-
<AppThemeProvider initialMode="light">
|
|
10
|
-
<DataModeProvider initialMode={ENABLE_SAMPLE_DATA_CACHE ? "sample" : "live"}>
|
|
11
|
-
<PartnerHubDashboard />
|
|
12
|
-
<Toaster position="bottom-right" />
|
|
13
|
-
</DataModeProvider>
|
|
14
|
-
</AppThemeProvider>
|
|
15
|
-
);
|
|
16
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Agentforce Agent API Configuration
|
|
3
|
-
*
|
|
4
|
-
* These values connect the ChatBar to the real Agentforce agent (Eva)
|
|
5
|
-
* via the REST-based Agent API instead of the iframe-based
|
|
6
|
-
* AgentforceConversationClient.
|
|
7
|
-
*
|
|
8
|
-
* Flow: OAuth token → create session → send messages → end session
|
|
9
|
-
*
|
|
10
|
-
* All requests are proxied through the Vite dev server to avoid CORS.
|
|
11
|
-
* See vite.config.ts proxy rules:
|
|
12
|
-
* /sf-oauth/* → myDomainUrl (for OAuth token)
|
|
13
|
-
* /sf-agent/* → agentApiBaseUrl (for Agent API calls)
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
export const AGENT_API_CONFIG = {
|
|
17
|
-
myDomainUrl: "https://tdx26-keynote-org-1com.my.salesforce.com",
|
|
18
|
-
|
|
19
|
-
clientId:
|
|
20
|
-
"3MVG9Gm6vbdjgMWSOIAuIN3VSB5Rju6PgYQ5rl1yH3bVTTg9E2as4.C61Q0cyT.zqv2vUWNaxrm.A7SW5o3t7",
|
|
21
|
-
clientSecret:
|
|
22
|
-
"9ADF795A183A6B074A2E4B4CB1748B8DF7090C74191AF1C190213B512A733E03",
|
|
23
|
-
|
|
24
|
-
agentId: "0Xxa5000000rQlxCAE",
|
|
25
|
-
|
|
26
|
-
agentApiBaseUrl: "https://api.salesforce.com",
|
|
27
|
-
|
|
28
|
-
bypassUser: true,
|
|
29
|
-
|
|
30
|
-
demoTraveler: {
|
|
31
|
-
contactId: "003a500000mj4TlAAI",
|
|
32
|
-
email: "sarah.chen@arcline.ai",
|
|
33
|
-
firstName: "Sarah",
|
|
34
|
-
lastName: "Chen",
|
|
35
|
-
},
|
|
36
|
-
};
|