Multiple Recommendation Card – Code

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

function MultiSelectExample() {
  const handleSubmit = (response) => {
    console.log("Selected options:", response.optionIds);
  };

  return (
    <MultipleRecommendationCard
      recommendationId="rec-456"
      message="Select the issues you're experiencing:"
      options={[
        { id: "opt-1", label: "Water heater issues" },
        { id: "opt-2", label: "Low water pressure" },
        { id: "opt-3", label: "Drainage problems" },
        { id: "opt-4", label: "Fixture leaks" },
      ]}
      actions={[
        { id: "submit", name: "Submit", type: "primary" },
      ]}
      onSubmit={handleSubmit}
    />
  );
}

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

function MultiSelectWithCancel() {
  return (
    <MultipleRecommendationCard
      recommendationId="rec-456"
      message="Select all that apply:"
      options={options}
      actions={[
        { id: "submit", name: "Submit", type: "primary" },
        { id: "skip", name: "Skip", type: "ghost" },
      ]}
      onSubmit={handleSubmit}
    />
  );
}

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

function SubmittedExample() {
  return (
    <MultipleRecommendationCard
      recommendationId="rec-456"
      message="Select the issues:"
      options={options}
      actions={actions}
      onSubmit={() => {}}
      submitted={true}
      selected={["opt-1", "opt-3"]}
    />
  );
}