Confirmation Card – Code

import { ConfirmationCard } from "@servicetitan/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)}
    />
  );
}

import { ConfirmationCard } from "@servicetitan/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)}
    />
  );
}

import { ConfirmationCard } from "@servicetitan/ext-atlas";

function SubmittedExample() {
  return (
    <ConfirmationCard
      recommendationId="rec-789"
      message="Booking confirmed!"
      description="Your appointment has been scheduled."
      actions={actions}
      onSubmit={() => {}}
      submitted={true}
    />
  );
}