discord.js - Imagine an app•6mo ago

registration stepper/wizard

I want to make a registration stepper/wizard how do i create this using Discord.js i want to have a init reply where a user need to accept the rules after he has clicked the yes button i want to follow up with a modal

try {
            let acceptedRules = false;
            const firstButton = new ButtonBuilder()
                .setLabel("Yes")
                .setStyle(ButtonStyle.Success)
                .setCustomId("yes-button")
            const secondButton = new ButtonBuilder()
                .setLabel("No")
                .setStyle(ButtonStyle.Danger)
                .setCustomId("no-button")
            const buttonRow = new ActionRowBuilder<MessageActionRowComponentBuilder>().addComponents(firstButton, secondButton)
            const reply = await interaction.reply({
                content: "Have you read the rules?",
                components: [buttonRow],
                ephemeral: true
            });
            const collector = reply.createMessageComponentCollector({componentType: ComponentType.Button, time: 5000})
            collector.on("collect", async buttonInteraction => {
                if (buttonInteraction.customId === "yes-button") {
                    await buttonInteraction.update({content: "You have accepted the rules."})
                    acceptedRules = true
                    collector.stop()
                }
                if (buttonInteraction.customId === "no-button") {
                    collector.stop()
                }

            })
            collector.on("end", async () => {
                if (!acceptedRules) {
                    await interaction.followUp({
                        content: "You must accept the rules to register!",
                        ephemeral: true
                    })
                }
                await interaction.deleteReply("@original")
            })

try {
            let acceptedRules = false;
            const firstButton = new ButtonBuilder()
                .setLabel("Yes")
                .setStyle(ButtonStyle.Success)
                .setCustomId("yes-button")
            const secondButton = new ButtonBuilder()
                .setLabel("No")
                .setStyle(ButtonStyle.Danger)
                .setCustomId("no-button")
            const buttonRow = new ActionRowBuilder<MessageActionRowComponentBuilder>().addComponents(firstButton, secondButton)
            const reply = await interaction.reply({
                content: "Have you read the rules?",
                components: [buttonRow],
                ephemeral: true
            });
            const collector = reply.createMessageComponentCollector({componentType: ComponentType.Button, time: 5000})
            collector.on("collect", async buttonInteraction => {
                if (buttonInteraction.customId === "yes-button") {
                    await buttonInteraction.update({content: "You have accepted the rules."})
                    acceptedRules = true
                    collector.stop()
                }
                if (buttonInteraction.customId === "no-button") {
                    collector.stop()
                }

            })
            collector.on("end", async () => {
                if (!acceptedRules) {
                    await interaction.followUp({
                        content: "You must accept the rules to register!",
                        ephemeral: true
                    })
                }
                await interaction.deleteReply("@original")
            })

5 Replies

d.js toolkit•6mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button!

Unknown User•6mo ago

Message Not Public

SkylifeOP•6mo ago

is it possible to do it after i deleted the first reply? because after the modal i need a select menu could you explain me the workflow a bit more in detail? i have at first a button where u need to select yes then i want to show a modal after the modal a select menu then i do all code after the button inside the collector event?

d.js docs•6mo ago

:method: Message#awaitMessageComponent @14.15.2 Collects a single component interaction that passes the filter. The Promise will reject if the time expires.

// Collect a message component interaction
const filter = (interaction) => interaction.customId === 'button' && interaction.user.id === 'someId';
message.awaitMessageComponent({ filter, time: 15_000 })
  .then(interaction => console.log(`${interaction.customId} was clicked!`))
  .catch(console.error);

// Collect a message component interaction
const filter = (interaction) => interaction.customId === 'button' && interaction.user.id === 'someId';
message.awaitMessageComponent({ filter, time: 15_000 })
  .then(interaction => console.log(`${interaction.customId} was clicked!`))
  .catch(console.error);

:method: ButtonInteraction#awaitModalSubmit @14.15.2 Collects a single modal submit interaction that passes the filter. The Promise will reject if the time expires.

// Collect a modal submit interaction
const filter = (interaction) => interaction.customId === 'modal';
interaction.awaitModalSubmit({ filter, time: 15_000 })
  .then(interaction => console.log(`${interaction.customId} was submitted!`))
  .catch(console.error);

// Collect a modal submit interaction
const filter = (interaction) => interaction.customId === 'modal';
interaction.awaitModalSubmit({ filter, time: 15_000 })
  .then(interaction => console.log(`${interaction.customId} was submitted!`))
  .catch(console.error);

SkylifeOP•6mo ago

try {
            const buttonRow = new ActionRowBuilder<MessageActionRowComponentBuilder>().addComponents(firstButton, secondButton)
            const reply = await interaction.reply({
                content: "Have you read the rules?",
                components: [buttonRow],
                ephemeral: true
            });

            const buttonInteraction = await reply.awaitMessageComponent({componentType: ComponentType.Button, time: 5000})
            if (buttonInteraction.customId === "no-button") {
                await interaction.followUp({
                    content: "You must accept the rules to register!",
                    ephemeral: true
                })

            }
            if (buttonInteraction.customId === "yes-button"){
                // await interaction.deleteReply("@original")
                await buttonInteraction.update({content: "You accepted the rules!"})
                const modal = new ModalBuilder().setTitle("Modal").setCustomId("myModal");
                const characterNameInput = new TextInputBuilder().setLabel("Character Name").setPlaceholder("Enter your character name").setStyle(TextInputStyle.Short).setRequired(true).setMaxLength(100);
                const characterActionRow = new ActionRowBuilder<TextInputBuilder>().addComponents(characterNameInput);
                modal.addComponents(characterActionRow);
                await interaction.showModal(modal)
            }

try {
            const buttonRow = new ActionRowBuilder<MessageActionRowComponentBuilder>().addComponents(firstButton, secondButton)
            const reply = await interaction.reply({
                content: "Have you read the rules?",
                components: [buttonRow],
                ephemeral: true
            });

            const buttonInteraction = await reply.awaitMessageComponent({componentType: ComponentType.Button, time: 5000})
            if (buttonInteraction.customId === "no-button") {
                await interaction.followUp({
                    content: "You must accept the rules to register!",
                    ephemeral: true
                })

            }
            if (buttonInteraction.customId === "yes-button"){
                // await interaction.deleteReply("@original")
                await buttonInteraction.update({content: "You accepted the rules!"})
                const modal = new ModalBuilder().setTitle("Modal").setCustomId("myModal");
                const characterNameInput = new TextInputBuilder().setLabel("Character Name").setPlaceholder("Enter your character name").setStyle(TextInputStyle.Short).setRequired(true).setMaxLength(100);
                const characterActionRow = new ActionRowBuilder<TextInputBuilder>().addComponents(characterNameInput);
                modal.addComponents(characterActionRow);
                await interaction.showModal(modal)
            }

Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred. at ChatInputCommandInteraction.showModal (C:\gitrepos\tii-api\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:255:46) at Object.execute (C:\gitrepos\tii-api\src\bot\slashCommands\register.ts:48:35) at processTicksAndRejections (node:internal/process/task_queues:95:5) { code: 'InteractionAlreadyReplied' } why is the interaction already sent or deferred? but its still the same issue ah okay but qjuh is it possible to delete the first response as well after the user pressed the yes button?

ValidationError > s.string
  Expected a string primitive

  Received:
  | undefined

    at _StringValidator.handle (C:\gitrepos\tii-api\node_modules\@sapphire\shapeshift\src\validators\StringValidator.ts:23:73)
    at _StringValidator.parse (C:\gitrepos\tii-api\node_modules\@sapphire\shapeshift\src\validators\BaseValidator.ts:103:2)
    at validateRequiredParameters (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\textInput\Assertions.ts:24:20)
    at TextInputBuilder.toJSON (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\textInput\TextInput.ts:135:3)
    at C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\ActionRow.ts:132:61
    at Array.map (<anonymous>)
    at ActionRowBuilder.toJSON (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\ActionRow.ts:132:32)
    at C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\interactions\modals\Modal.ts:98:61
    at Array.map (<anonymous>)
    at ModalBuilder.toJSON (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\interactions\modals\Modal.ts:98:32)

ValidationError > s.string
  Expected a string primitive

  Received:
  | undefined

    at _StringValidator.handle (C:\gitrepos\tii-api\node_modules\@sapphire\shapeshift\src\validators\StringValidator.ts:23:73)
    at _StringValidator.parse (C:\gitrepos\tii-api\node_modules\@sapphire\shapeshift\src\validators\BaseValidator.ts:103:2)
    at validateRequiredParameters (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\textInput\Assertions.ts:24:20)
    at TextInputBuilder.toJSON (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\textInput\TextInput.ts:135:3)
    at C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\ActionRow.ts:132:61
    at Array.map (<anonymous>)
    at ActionRowBuilder.toJSON (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\components\ActionRow.ts:132:32)
    at C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\interactions\modals\Modal.ts:98:61
    at Array.map (<anonymous>)
    at ModalBuilder.toJSON (C:\gitrepos\tii-api\node_modules\@discordjs\builders\src\interactions\modals\Modal.ts:98:32)

oh i was missing a costum id the error is a bit confusing do you know why i dont get a error like you are missing ...

Gaming

Programming

registration stepper/wizard