DIA
discord.js - Imagine an app•13h ago
xTwisteDx

How do I create confirmation flows?

I'm attempting to implement a button that has a deletion function, however I want to confirm that action before proceeding. Here is my current code. 
xport const handleDeleteQuestInteraction = async (interaction: ButtonInteraction, questData: QuestData) => {
    const guildId = interaction.guildId;

    if (!guildId) {
        await interaction.reply({
            embeds: [new ErrorEmbed('Command Error', 'This command can only be used in a server.')],
            flags: MessageFlags.Ephemeral,
            withResponse: true
        });
        return;
    }

    // Show confirmation message
    const confirmationResponse = await interaction.reply({
        embeds: [new ErrorEmbed('Confirm Deletion', 'Are you sure you want to delete this quest? This action cannot be undone.')],
        components: [
            new ActionRowBuilder<ButtonBuilder>()
                .addComponents(
                    new ConfirmButton(guildId, questData),
                    new CancelButton(guildId, questData)
                )
        ],
        flags: MessageFlags.Ephemeral
    });
    
    const confirmation = await confirmationResponse.awaitMessageComponent({
        filter: (i) => i.user.id === interaction.user.id && i.isButton(),
        time: 30000 // 30 seconds timeout
    });

    console.log(confirmation);
    try {
        if (confirmation.customId.startsWith('button:confirmDelete:')) {
            // Delete the original message which will trigger the MessageDelete event
            await interaction.message.delete();

            await confirmation.followUp({
                embeds: [new SuccessEmbed('Quest Deleted', 'The quest has been successfully deleted.')],
                flags: MessageFlags.Ephemeral
            });
        } else if (confirmation.customId.startsWith('button:cancelDelete:')) {
            await confirmation.followUp({
                embeds: [new SuccessEmbed('Deletion Cancelled', 'The quest deletion has been cancelled.')],
                flags: MessageFlags.Ephemeral
            });
        }
    } catch (error) {
        // Handle timeout or other errors
        await interaction.followUp({
            embeds: [new ErrorEmbed('Error', 'The confirmation timed out or encountered an error.')],
            flags: MessageFlags.Ephemeral
        });
    }
}
xport const handleDeleteQuestInteraction = async (interaction: ButtonInteraction, questData: QuestData) => {
    const guildId = interaction.guildId;

    if (!guildId) {
        await interaction.reply({
            embeds: [new ErrorEmbed('Command Error', 'This command can only be used in a server.')],
            flags: MessageFlags.Ephemeral,
            withResponse: true
        });
        return;
    }

    // Show confirmation message
    const confirmationResponse = await interaction.reply({
        embeds: [new ErrorEmbed('Confirm Deletion', 'Are you sure you want to delete this quest? This action cannot be undone.')],
        components: [
            new ActionRowBuilder<ButtonBuilder>()
                .addComponents(
                    new ConfirmButton(guildId, questData),
                    new CancelButton(guildId, questData)
                )
        ],
        flags: MessageFlags.Ephemeral
    });
    
    const confirmation = await confirmationResponse.awaitMessageComponent({
        filter: (i) => i.user.id === interaction.user.id && i.isButton(),
        time: 30000 // 30 seconds timeout
    });

    console.log(confirmation);
    try {
        if (confirmation.customId.startsWith('button:confirmDelete:')) {
            // Delete the original message which will trigger the MessageDelete event
            await interaction.message.delete();

            await confirmation.followUp({
                embeds: [new SuccessEmbed('Quest Deleted', 'The quest has been successfully deleted.')],
                flags: MessageFlags.Ephemeral
            });
        } else if (confirmation.customId.startsWith('button:cancelDelete:')) {
            await confirmation.followUp({
                embeds: [new SuccessEmbed('Deletion Cancelled', 'The quest deletion has been cancelled.')],
                flags: MessageFlags.Ephemeral
            });
        }
    } catch (error) {
        // Handle timeout or other errors
        await interaction.followUp({
            embeds: [new ErrorEmbed('Error', 'The confirmation timed out or encountered an error.')],
            flags: MessageFlags.Ephemeral
        });
    }
}
This properly prompts the user with the confirmation dialogue, however I can't then also click "Confirm" or "Delete" without it throwing an error The button ID format is invalid I'm expecting to use the same ephemeral message, editing the original "Confirm" or "Cancel" confirmation message, editing it to send a success or error message.
1 Reply
d.js toolkit
d.js toolkit•13h 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!

Did you find this page helpful?