Teams App Developer

import { App, type KnownBlock } from "@slack/bolt";

function buildTicketBlocks(title: string, assignee: string): KnownBlock[] {
  return [
    { type: "header", text: { type: "plain_text", text: title } },
    {
      type: "section",
      fields: [
        { type: "mrkdwn", text: `*Assignee:*\n${assignee}` },
        { type: "mrkdwn", text: `*Status:*\nOpen` },
      ],
    },
    { type: "divider" },
    {
      type: "actions",
      elements: [
        {
          type: "button",
          text: { type: "plain_text", text: "Approve" },
          style: "primary",
          action_id: "ticket_approve_btn",
          value: "approved",
        },
        {
          type: "button",
          text: { type: "plain_text", text: "Reject" },
          style: "danger",
          action_id: "ticket_reject_btn",
          value: "rejected",
        },
        {
          type: "static_select",
          placeholder: { type: "plain_text", text: "Change priority" },
          action_id: "ticket_priority_select",
          options: [
            { text: { type: "plain_text", text: "High" }, value: "high" },
            { text: { type: "plain_text", text: "Medium" }, value: "med" },
            { text: { type: "plain_text", text: "Low" }, value: "low" },
          ],
        },
      ],
    },
  ];
}

const app = new App({
  token: process.env.SLACK_BOT_TOKEN!,
  signingSecret: process.env.SLACK_SIGNING_SECRET!,
});

app.command("/ticket", async ({ ack, say }) => {
  await ack();
  await say({
    text: "New ticket: Server outage", // fallback for notifications
    blocks: buildTicketBlocks("Server outage", "<@U12345>"),
  });
});

import type { App, BlockAction, ViewSubmitAction } from "@slack/bolt";

export function registerTicketModal(app: App): void {
  // Step 1: Button click opens the modal
  app.action("ticket_create_btn", async ({ ack, body, client }) => {
    await ack();
    const triggerBody = body as BlockAction;
    await client.views.open({
      trigger_id: triggerBody.trigger_id!,
      view: {
        type: "modal",
        callback_id: "ticket_create_modal",
        title: { type: "plain_text", text: "Create Ticket" },
        submit: { type: "plain_text", text: "Submit" },
        close: { type: "plain_text", text: "Cancel" },
        blocks: [
          {
            type: "input",
            block_id: "title_block",
            label: { type: "plain_text", text: "Title" },
            element: {
              type: "plain_text_input",
              action_id: "title_input",
              placeholder: { type: "plain_text", text: "Describe the issue" },
            },
          },
          {
            type: "input",
            block_id: "priority_block",
            label: { type: "plain_text", text: "Priority" },
            element: {
              type: "static_select",
              action_id: "priority_select",
              options: [
                { text: { type: "plain_text", text: "High" }, value: "high" },
                { text: { type: "plain_text", text: "Medium" }, value: "med" },
                { text: { type: "plain_text", text: "Low" }, value: "low" },
              ],
            },
          },
          {
            type: "input",
            block_id: "due_block",
            label: { type: "plain_text", text: "Due Date" },
            element: { type: "datepicker", action_id: "due_date" },
            optional: true,
          },
        ],
      },
    });
  });

  // Step 2: Handle the submission
  app.view("ticket_create_modal", async ({ ack, view, client }) => {
    const vals = view.state.values;
    const title = vals.title_block.title_input.value!;
    const priority = vals.priority_block.priority_select.selected_option!.value;
    const dueDate = vals.due_block.due_date.selected_date; // string | null

    // Validate -- return errors to keep modal open
    if (title.length < 5) {
      await ack({
        response_action: "errors",
        errors: { title_block: "Title must be at least 5 characters." },
      });
      return;
    }
    await ack(); // closes the modal

    await client.chat.postMessage({
      channel: "#tickets",
      text: `New ticket: ${title}`,
      blocks: [
        { type: "header", text: { type: "plain_text", text: title } },
        {
          type: "section",
          fields: [
            { type: "mrkdwn", text: `*Priority:* ${priority}` },
            { type: "mrkdwn", text: `*Due:* ${dueDate ?? "None"}` },
          ],
        },
      ],
    });
  });
}

import type { App, BlockAction, ButtonAction } from "@slack/bolt";

export function registerTicketActions(app: App): void {
  // Regex matches both ticket_approve_btn and ticket_reject_btn
  app.action<BlockAction>(
    /^ticket_(approve|reject)_btn$/,
    async ({ ack, action, body, respond }) => {
      await ack();
      const btnAction = action as ButtonAction;
      const decision = btnAction.value; // "approved" | "rejected"
      const user = body.user.id;

      // respond() uses the response_url -- replaces the original message
      await respond({
        replace_original: true,
        text: `Ticket ${decision} by <@${user}>`,
        blocks: [
          {
            type: "section",
            text: {
              type: "mrkdwn",
              text: `Ticket *${decision}* by <@${user}>`,
            },
          },
        ],
      });
    }
  );

  // Static select handler
  app.action("ticket_priority_select", async ({ ack, action, respond }) => {
    await ack();
    const selected = (action as { selected_option: { value: string } })
      .selected_option.value;
    await respond({
      replace_original: false,
      text: `Priority changed to *${selected}*`,
    });
  });
}