Decision modal

import { DecisionModal } from "@/pages/recommendations/index";

DecisionModal is a centred modal for one decision on one recommendation. It says what will happen, asks for a note, and commits with one click. Hold and Reject need a note; the confirm button stays disabled until the note has text. There is no toast afterwards: the recommendation changing state is the confirmation.

UsageCopy Anchor Link

Under an open recommendation, Hold and Reject open the modal. Render it inside AnimatePresence from motion/react, so the backdrop fades out when it closes.

const [modal, setModal] = useState(null);

<Button variant="secondary" size="md" icon={PauseCircle} label="Hold" onClick={() => setModal("on-hold")} />
<Button variant="ghost" size="md" icon={Prohibit} label="Reject" onClick={() => setModal("rejected")} />

<AnimatePresence>
  {(modal === "on-hold" || modal === "rejected") && (
    <DecisionModal
      kind={modal}
      item={item}
      platform={platform}
      onCancel={() => setModal(null)}
      onConfirm={(note) => { setModal(null); onDecide(modal, note); }}
    />
  )}
</AnimatePresence>

The three kindsCopy Anchor Link

The wording for each kind is in the MODAL object above the component.

For "accepted", the text names the platform: "Petavue applies the change to LinkedIn Ads and confirms the saved settings before reporting it as done." A test starts a capped test instead, and a handoff creates tasks in HubSpot.

<DecisionModal kind="accepted" item={item} platform="LinkedIn Ads" onCancel={close} onConfirm={accept} />

AnatomyCopy Anchor Link

The backdrop colour and the shadow are not tokens. The scrim in the Dialog examples is rgba(31, 33, 46, 0.45).

PropsCopy Anchor Link

The note is kept inside the modal and starts empty each time it opens.

AccessibilityCopy Anchor Link

• The panel has role="dialog" and its title as aria-label. It has no aria-modal.
• The note field takes focus when the modal opens, and its label wraps it, so the question is read with the field.
• Escape cancels. The listener is on window, so it works wherever focus is.
• Focus is not kept inside the modal: Tab moves on to the page behind it. When the modal closes, focus is not returned to Hold or Reject.
• "(required)" is only in the label text. The field has no required or aria-required, and nothing says why the confirm button is disabled.

When to use itCopy Anchor Link

Use DecisionModal only for decisions on a recommendation. For other confirmations and short forms, use Dialog, wrapped with a backdrop and focus handling as its page shows.

Do and don'tCopy Anchor Link

• Do ask for a note when the decision changes what Petavue does next. Hold and Reject do; the note is what future runs work within.
• Do write the consequence as plain fact: what is applied, what is saved, what happens next.
• Don't add a toast after confirming. Update the recommendation's status instead.
• Don't use it for Apply. Apply needs the list of changes, which is ApplyModal.

Where it is usedCopy Anchor Link

The function is defined in that file and exported from it for these docs.