Convert /contact to components v2

src/commands/contact.command.ts

@@ -1,6 +1,7 @@
 import type { Command } from "../models";
 import { buildContactEmbed } from "../utils/build-contact-embed";
 import { logError } from "../utils/logger";
+import { MessageFlags } from "discord.js";
 
 const contactCommand: Command = {
   name: "contact",
@@ -14,15 +15,15 @@ const contactCommand: Command = {
 
     try {
       await message.react("\u{1F4E7}");
-      await message.reply({ embeds: [embed] });
+      await message.reply({ components: [embed], flags: MessageFlags.IsComponentsV2 });
     } catch (error) {
       logError(error, {
         event: "contact_command_react_error",
         userId: message.author.id,
         guildId: message.guildId,
         channelId: message.channelId,
       });
-      await message.reply({ embeds: [embed] });
+      await message.reply({ components: [embed], flags: MessageFlags.IsComponentsV2 });
     }
   },
 };

src/slash-commands/contact.command.ts

@@ -1,4 +1,4 @@
-import { SlashCommandBuilder } from "discord.js";
+import { MessageFlags, SlashCommandBuilder } from "discord.js";
 
 import type { SlashCommand } from "../models";
 import { buildContactEmbed } from "../utils/build-contact-embed";
@@ -13,7 +13,10 @@ const contactSlashCommand: SlashCommand = {
   async execute(interaction, _client) {
     const embed = buildContactEmbed();
 
-    await interaction.reply({ embeds: [embed] });
+    await interaction.reply({
+      components: [embed],
+      flags: [MessageFlags.IsComponentsV2, MessageFlags.Ephemeral],
+    });
   },
 };
 

src/utils/build-contact-embed.ts

@@ -1,77 +1,151 @@
-import { EmbedBuilder } from "discord.js";
-
 import { COLORS } from "../config/constants";
+import {
+  ButtonBuilder,
+  ButtonStyle,
+  ContainerBuilder,
+  SectionBuilder,
+  SeparatorBuilder,
+  SeparatorSpacingSize,
+  TextDisplayBuilder,
+} from "discord.js";
+
+type Team = {
+  name: string;
+  // username to message on RA
+  username: string;
+  reasons: string[];
+};
+
+const buildContactButton = (account: string): ButtonBuilder => {
+  return new ButtonBuilder()
+    .setStyle(ButtonStyle.Link)
+    .setLabel("Message " + account)
+    .setURL("https://retroachievements.org/messages/create?to=" + account);
+};
+
+const buildTeamSection = (team: Team): SectionBuilder => {
+  const reasons = team.reasons.map((reason: string) => "- " + reason).join("\n");
+
+  return new SectionBuilder()
+    .setButtonAccessory(buildContactButton(team.username))
+    .addTextDisplayComponents(
+      new TextDisplayBuilder().setContent("## :e_mail: " + team.name + "\n" + reasons),
+    );
+};
+
+const separator = new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(true);
 
-export const buildContactEmbed = (): EmbedBuilder => {
-  return new EmbedBuilder()
-    .setColor(COLORS.PRIMARY)
-    .setTitle("Contact Us")
-    .setDescription(
-      "If you would like to contact us, please send a site message to the appropriate team below.",
+export const buildContactEmbed = (): ContainerBuilder => {
+  return new ContainerBuilder()
+    .setAccentColor(COLORS.PRIMARY)
+    .addTextDisplayComponents(
+      new TextDisplayBuilder().setContent(
+        "# Contact Us\n" +
+          "If you would like to contact us, please send a site message to the appropriate team below.",
+      ),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "Admins and Moderators",
+        username: "RAdmin",
+        reasons: [
+          "Reporting offensive behavior.",
+          "Reporting copyrighted material.",
+          "Requesting to be untracked.",
+        ],
+      }),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "Developer Compliance",
+        username: "DevCompliance",
+        reasons: [
+          "Requesting set approval or early set release.",
+          "Reporting achievements or sets with unwelcome concepts.",
+          "Reporting sets failing to cover basic progression.",
+        ],
+      }),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "Quality Assurance",
+        username: "QATeam",
+        reasons: [
+          "Reporting a broken set, leaderboard, or rich presence.",
+          "Reporting achievements with grammatical mistakes.",
+          "Requesting a set be playtested.",
+          "Hash compatibility questions.",
+          "Hub organizational questions.",
+          "Getting involved in a QA sub-team.",
+        ],
+      }),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "Art Team",
+        username: "RAArtTeam",
+        reasons: [
+          "Icon Gauntlets and how to start one.",
+          "Proposing art updates.",
+          "Questions about art-related rule changes.",
+          "Requests for help with creating a new badge or badge set.",
+        ],
+      }),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "Writing Team",
+        username: "WritingTeam",
+        reasons: [
+          "Reporting achievements with grammatical mistakes.",
+          "Reporting achievements with unclear or confusing descriptions.",
+          "Requesting help from the team with proofreading achievement sets.",
+          "Requesting help for coming up with original titles for achievements.",
+        ],
+      }),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "RANews",
+        username: "RANews",
+        reasons: [
+          "Submitting a Play This Set, Wish This Set, or RAdvantage entry.",
+          "Submitting a retrogaming article.",
+          "Proposing a new article idea.",
+          "Getting involved with RANews.",
+        ],
+      }),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "RAEvents",
+        username: "RAEvents",
+        reasons: ["Submissions, questions, ideas, or reporting issues related to events."],
+      }),
+    )
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "DevQuest",
+        username: "DevQuest",
+        reasons: ["Submissions, questions, ideas, or reporting issues related to DevQuest."],
+      }),
     )
-    .addFields([
-      {
-        name: ":e_mail: Admins and Moderators",
-        value: `[Send a message to RAdmin](https://retroachievements.org/createmessage.php?t=RAdmin)
-                 - Reporting offensive behavior.
-                 - Reporting copyrighted material.
-                 - Requesting to be untracked.`,
-      },
-      {
-        name: ":e_mail: Developer Compliance",
-        value: `[Send a message to Developer Compliance](https://retroachievements.org/createmessage.php?t=DevCompliance)
-                 - Requesting set approval or early set release.
-                 - Reporting achievements or sets with unwelcome concepts.
-                 - Reporting sets failing to cover basic progression.`,
-      },
-      {
-        name: ":e_mail: Quality Assurance",
-        value: `[Send a message to Quality Assurance](https://retroachievements.org/createmessage.php?t=QATeam)
-                 - Reporting a broken set, leaderboard, or rich presence.
-                 - Reporting achievements with grammatical mistakes.
-                 - Requesting a set be playtested.
-                 - Hash compatibility questions.
-                 - Hub organizational questions.
-                 - Getting involved in a QA sub-team.`,
-      },
-      {
-        name: ":e_mail: RAArtTeam",
-        value: `[Send a message to RAArtTeam](https://retroachievements.org/messages/create?to=RAArtTeam)
-                 - Icon Gauntlets and how to start one.
-                 - Proposing art updates.
-                 - Questions about art-related rule changes.
-                 - Requests for help with creating a new badge or badge set.`,
-      },
-      {
-        name: ":e_mail: WritingTeam",
-        value: `[Send a message to WritingTeam](https://retroachievements.org/messages/create?to=WritingTeam)
-                 - Reporting achievements with grammatical mistakes.
-                 - Reporting achievements with unclear or confusing descriptions.
-                 - Requesting help from the team with proofreading achievement sets.
-                 - Requesting help for coming up with original titles for achievements.`,
-      },
-      {
-        name: ":e_mail: RANews",
-        value: `[Send a message to RANews](https://retroachievements.org/createmessage.php?t=RANews)
-                 - Submitting a Play This Set, Wish This Set, or RAdvantage entry.
-                 - Submitting a retrogaming article.
-                 - Proposing a new article idea.
-                 - Getting involved with RANews.`,
-      },
-      {
-        name: ":e_mail: RAEvents",
-        value: `[Send a message to RAEvents](https://retroachievements.org/createmessage.php?t=RAEvents)
-                 - Submissions, questions, ideas, or reporting issues related to events.`,
-      },
-      {
-        name: ":e_mail: DevQuest",
-        value: `[Send a message to DevQuest](https://retroachievements.org/createmessage.php?t=DevQuest)
-                 - Submissions, questions, ideas, or reporting issues related to DevQuest.`,
-      },
-      {
-        name: ":e_mail: RACheats",
-        value: `[Send a message to RACheats](https://retroachievements.org/createmessage.php?t=RACheats)
-                 - If you believe someone is in violation of our [Global Leaderboard and Achievement Hunting Rules](https://docs.retroachievements.org/guidelines/users/global-leaderboard-and-achievement-hunting-rules.html#not-allowed).`,
-      },
-    ]);
+    .addSeparatorComponents(separator)
+    .addSectionComponents(
+      buildTeamSection({
+        name: "RACheats",
+        username: "RACheats",
+        reasons: [
+          "If you believe someone is in violation of our [Global Leaderboard and Achievement Hunting Rules](https://docs.retroachievements.org/guidelines/users/global-leaderboard-and-achievement-hunting-rules.html#not-allowed).",
+        ],
+      }),
+    );
 };