System Message – Code

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

function SystemMessageExample() {
  const [selected, setSelected] = useState("");

  return (
    <SystemMessage
      message="How would you like to proceed?"
      radioOptions={[
        { value: "continue", label: "Continue", description: "Proceed with current settings" },
        { value: "modify", label: "Modify", description: "Change the settings first" },
      ]}
      selectedValue={selected}
      onRadioChange={setSelected}
      buttonText="Confirm"
      onSubmit={() => handleSubmit(selected)}
    />
  );
}

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

function SystemMessageDisabled() {
  const [selected, setSelected] = useState("");

  return (
    <SystemMessage
      message="Choose an option to continue"
      radioOptions={options}
      selectedValue={selected}
      onRadioChange={setSelected}
      buttonText="Continue"
      onSubmit={() => handleSubmit(selected)}
      buttonDisabled={!selected}
    />
  );
}