Action group

@react.component
let make = () =>
  <>
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Send invoice")})
      secondary=[
        SecondaryAction({children: React.string("Save as draft")}),
      ]
      return={<KitReact.Roles.WayBack href="#role-action-group">{React.string("Return to bookings")}</KitReact.Roles.WayBack>}
    />
    <KitReact.Roles.ActionGroup
      lead=EmphasisedNextAction({children: React.string("Add your first room"), href: "#role-action-group"})
      secondary=[
        SecondaryAction({children: React.string("Import rooms from a file")}),
      ]
      return={<KitReact.Roles.WayBack href="#role-action-group">{React.string("Return to setup")}</KitReact.Roles.WayBack>}
    />
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Confirm the booking and send the invoice")})
      secondary=[
        SecondaryAction({children: React.string("Hold the room without an invoice")}),
        SecondaryAction({children: React.string("Ask Oakmere Primary School for the missing details")}),
      ]
      return={<KitReact.Roles.WayBack href="#role-action-group">{React.string("Return to the booking")}</KitReact.Roles.WayBack>}
    />
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Send reminder")})
      secondary=[
        SecondaryAction({children: React.string("Mark as paid")}),
      ]
      return={<KitReact.Roles.WayBack href="#role-action-group">{React.string("Return to invoice")}</KitReact.Roles.WayBack>}
      routes={<>
        <a href="#role-action-group">{React.string("View invoices")}</a>
        <a href="#role-action-group">{React.string("View payments received this month")}</a>
        <a href="#role-action-group">{React.string("View the client's bookings")}</a>
      </>}
    />
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Send invoice"), state: KitReact.ActionState.Inert({id: "action-group-send", words: [KitReact.Words.Text("Add the hirer’s email before sending.")]})})
      secondary=[
        SecondaryAction({children: React.string("Save as draft")}),
      ]
      return={<KitReact.Roles.WayBack href="#role-action-group">{React.string("Return to invoice")}</KitReact.Roles.WayBack>}
    />
    <p className="specimen-case-line" id="role-action-group-more">{React.string("Send invoice is waiting, and More stands before the way back.")}</p>
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Send invoice"), state: KitReact.ActionState.Inert({id: "action-group-file", words: [KitReact.Words.Text("Add the hirer’s email before sending.")]})})
      secondary=[SecondaryAction({children: React.string("Save as draft")})]
      more={KitReact.Roles.ActionMenu.role({
        id: "action-group-more",
        label: "More actions for this invoice",
        state: Inert({id: "action-group-more-trigger", words: [KitReact.Words.Text("A sent invoice can’t be changed until it is filed.")]}),
        groups: [
          {items: [KitReact.Menu.Item({name: "Edit", icon: KitReact.Icons.iconPencilSimple, keys: ["E"]}), KitReact.Menu.Item({name: "Duplicate", icon: KitReact.Icons.iconCopy, keys: ["Ctrl", "D"]})]},
          {items: [KitReact.Menu.Destructive({name: "Delete invoice", icon: KitReact.Icons.iconTrash})]},
        ],
      })}
      return={<KitReact.Roles.WayBack href="#role-action-group">{React.string("Return to invoice")}</KitReact.Roles.WayBack>}
      statusLines=[{children: React.string("Draft saved.")}]
      routes={<a href="#role-action-group">{React.string("View invoices")}</a>}
    />
    <p className="specimen-case-line" id="role-action-group-fold">{React.string("Invoice actions with resending waiting on an email address.")}</p>
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Send invoice"), state: KitReact.ActionState.Inert({id: "action-group-fold-send", words: [KitReact.Words.Text("Add the hirer’s email before sending.")]})})
      secondary=[
        SecondaryAction({children: React.string("Save as draft")}),
        SecondaryAction({children: React.string("Print invoice")}),
        Form({props: {action: "#role-action-group"}, action: SecondaryAction({children: React.string("Resend invoice"), props: {type_: "submit"}, state: KitReact.ActionState.Inert({id: "action-group-fold-resend", words: [KitReact.Words.Text("Add the hirer’s email before resending.")]})})}),
        SecondaryAction({children: React.string("Download invoice")}),
      ]
      more={KitReact.Roles.ActionMenu.role({id: "action-group-fold-more", label: "More actions for this invoice", groups: []})}
    />
    <p className="specimen-case-line" id="role-action-group-waiting">{React.string("Continue is waiting on a field and a choice in its form.")}</p>
    <form>
      <KitReact.Roles.FormGroup id="action-group-hirer"  label={React.string("Hirer’s name")} controlProps={{name: "hirer"}} kind=Text(Medium) />
      <KitReact.Roles.SelectionControl.Group
        id="action-group-rooms"
        legend={React.string("Rooms")}
        choices={[("main-hall", "Main hall"), ("studio", "Studio")]->Array.map(((value, label)): KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind> => {
          label: React.string(label), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: false, printedValue: [KitReact.Words.Text("Not booked")], props: {}, controlProps: {name: "rooms", value}, outputProps: {}, reasonProps: {},
        })}
      />
      <KitReact.Roles.ActionGroup
        lead=PrimaryAction({children: React.string("Continue"), state: KitReact.ActionState.Inert({id: "action-group-continue", words: [KitReact.Words.Text("Continue needs the hirer’s name and a room.")], waitsOn: ["hirer", "rooms"]})})
      />
    </form>
  <KitReact.ActionGroupSaving
    unsaved=Some({state: Attention, standing: [KitReact.Words.Text("Not saved")]})
    group={
      refusal: {id: "action-group-refusal", line: React.string("Issue refund is refused until both transfers on this invoice have arrived.")},
      lead: PrimaryAction({children: React.string("Send invoice")}),
      secondary: [SecondaryAction({children: React.string("Save as draft")})],
      return: <KitReact.Roles.WayBack href="#role-action-group">{React.string("Return to invoice")}</KitReact.Roles.WayBack>,
    }
  />
  </>