Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- ConfirmationCard API
- Shared Types
Common Examples
Basic Usage
Simple confirmation prompt:import { ConfirmationCard } from "@servicetitan/anvil2-ext-atlas";
function ConfirmationExample() {
return (
<ConfirmationCard
recommendationId="rec-789"
message="Would you like to proceed with this booking?"
description="Your appointment will be scheduled for tomorrow at 2:00 PM"
actions={[
{ id: "confirm", name: "Confirm Booking", type: "primary" },
{ id: "reschedule", name: "Choose Different Time", type: "secondary" },
]}
onSubmit={(response) => handleAction(response)}
/>
);
}
With Link Action
Include a navigation link:import { ConfirmationCard } from "@servicetitan/anvil2-ext-atlas";
function ConfirmationWithLink() {
return (
<ConfirmationCard
recommendationId="rec-789"
message="Ready to book your service?"
actions={[
{ id: "confirm", name: "Confirm", type: "primary" },
{ id: "cancel", name: "Cancel", type: "ghost" },
{ id: "learn-more", name: "Learn More", type: "link", url: "/help/booking" },
]}
onSubmit={(response) => handleAction(response)}
/>
);
}
Submitted State
Show disabled state after submission:import { ConfirmationCard } from "@servicetitan/anvil2-ext-atlas";
function SubmittedExample() {
return (
<ConfirmationCard
recommendationId="rec-789"
message="Booking confirmed!"
description="Your appointment has been scheduled."
actions={actions}
onSubmit={() => {}}
submitted={true}
/>
);
}
<ConfirmationCard
recommendationId="rec-789"
message="Confirm action?"
description="Additional details"
actions={[
{ id: "confirm", name: "Confirm", type: "primary" },
{ id: "cancel", name: "Cancel", type: "ghost" },
]}
onSubmit={handleSubmit}
submitted={false}
/>
ConfirmationCard Props
RecommendationAction[]
required
Array of action buttons. Supports
type: "link" with url for navigation.string
required
The main prompt message to display.
(response: ConfirmationResponse) => void
required
Callback fired when an action is clicked. For link actions, includes
url in parameters.string
Additional CSS class name for custom styling.
string
Additional description text displayed in the card.
string
Unique identifier for this recommendation, included in the submit response.
boolean
default:"false"
When true, disables all action buttons.
RecommendationAction Interface
interface RecommendationAction {
id: string;
name: string;
type?: "primary" | "secondary" | "ghost" | "danger" | "link";
url?: string;
}
ConfirmationResponse Interface
interface ConfirmationResponse {
sourceMessageId?: string;
optionIds: string[];
actionId: string;
parameters?: Record<string, string | number | undefined>;
}