Branching Decision Flow

npx shadcn add "https://ui.beste.co/r/workflow49?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/workflow49?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Workflow49, workflow49Demo } from "@/components/beste/block/workflow49";

export default function FlowPage() {
  return <Workflow49 {...workflow49Demo} />;
}

import { Workflow49 } from "@/components/beste/block/workflow49";

export default function FlowPage() {
  return (
    <Workflow49
      badge={{ label: "What happens next" }}
      heading="A cancellation takes one of two paths, and neither needs a phone call"
      description="This is the whole decision. There is no third branch."
      triggerLabel="The trigger"
      triggerTitle="A member cancels an appointment"
      triggerDetail="From their own reminder link, at any hour. The slot is released the moment they confirm."
      branches={[
        {
          condition: "If somebody is waiting",
          title: "The slot is offered down the list",
          description: "Everyone whose preferences match is offered it at once, in join order.",
          outcomes: [
            {
              title: "Filled without anyone acting",
              description: "Median eleven minutes from cancellation to a new confirmed booking.",
              share: "84% of cancellations",
            },
          ],
        },
        {
          condition: "If the list is empty",
          title: "The hour goes back to the rota",
          description: "The slot is released as bookable capacity and the clinician is told.",
          outcomes: [
            {
              title: "Booked by a new member",
              description: "Picked up through the public booking page, usually within a day.",
              share: "7% of cancellations",
            },
          ],
        },
      ]}
      closing="Reception sees all of it happening and can step in at any point."
      button={{ label: "See the waiting list rules", href: "/product/waiting-list" }}
    />
  );
}

type ActionLink = {
  label: string;
  href: string;
};

type Outcome = {
  title: string;
  description: string;
  share: string;
};

type Branch = {
  condition: string;
  title: string;
  description: string;
  outcomes: Outcome[];
};