- 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
Array of action buttons. Supports
type: "link" with url for navigation.The main prompt message to display.
Callback fired when an action is clicked. For link actions, includes
url in parameters.Additional CSS class name for custom styling.
Additional description text displayed in the card.
Unique identifier for this recommendation, included in the submit response.
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>;
}