@elara-services/tickets 4.1.0 → 4.2.0

package/README.md

@@ -44,6 +44,7 @@ const { Client } = require("discord.js"),
                 ]
             },
             webhook: { // [OPTIONAL]
+                channelId: "", // The channel ID to use for the logs (can be used instead of using a webhook id, token and threadId)
                 id: "", // The webhook ID for this ticket's open and closed logs. 
                 token: "", // The webhook Token for this ticket's open and closed logs.
                 username: "Webhook Username Here", // The webhook username for this ticket's logs.

package/index.d.ts

@@ -4,12 +4,23 @@ declare module "@elara-services/tickets" {
 
     export type Langs = "en-US";
 
+    export interface TicketModalQuestion {
+        label: string;
+        style: 1 | 2;
+        placeholder?: string;
+        value?: string;
+        required?: boolean;
+        min_length?: number;
+        max_length?: number;
+    }
+
     export interface TicketOptions {
         client: Client;
         prefix: string;
         encryptToken: string;
         lang?: Langs;
         debug?: boolean;
+        suppressPatreon?: boolean;
         appeals?: {
             enabled?: boolean;
             sendBanResults?: boolean;
@@ -24,17 +35,10 @@ declare module "@elara-services/tickets" {
         modal?: {
             enabled?: boolean;
             title?: string;
-            questions?: {
-                label: string;
-                style: 1 | 2;
-                placeholder?: string;
-                value?: string;
-                required?: boolean;
-                min_length?: number;
-                max_length?: number;
-            }[]
+            questions?: TicketModalQuestion[]
         };
         webhook?: {
+            channelId?: string;
             id?: string;
             token?: string;
             threadId?: string;

package/languages/en-US.js

@@ -32,6 +32,7 @@ module.exports = {
     NO_CHANNEL_CREATE: `${x} I was unable to create the ticket channel, if this keeps happening contact one of the staff members via their DMs!`,
     NO_CHANNEL_DELETE: `${x} I was unable to delete the channel and close the ticket.`,
     NO_BAN_PERMS_USER: `${x} You need (Ban Members) in this server to complete this action!`,
+    TRANSCRIPT_VIEW: `View Transcript`,
     TICKET_BLOCKED: `${x} You can't create tickets, if you believe this is a mistake contact one of the staff members.`,
     FORM_RESPONSES: "Form Responses",
     TOTAL_MESSAGES: "Total Messages",

package/lib/base.js

@@ -1,10 +1,15 @@
-const { getWebhookInfo, displayMessages, de, webhook, getString } = require("./util");
+const { getWebhookInfo, displayMessages, de, getString, generateHTMLPage } = require("./util");
 const {
     Interactions: { button },
+    ButtonStyle,
 } = require("@elara-services/packages");
-const { is, status, isV13 } = require("@elara-services/utils");
+const { is, status, isV13, embedComment, log } = require("@elara-services/utils");
 const { WebhookClient } = require("discord.js");
+const { name, version, funding } = require("../package.json");
 const required = ["client", "prefix", "encryptToken"];
+const moment = require("moment");
+
+let showed = false;
 
 module.exports = class Tickets {
     /**
@@ -20,6 +25,10 @@ module.exports = class Tickets {
             }
         }
         this.options = options;
+        if (!showed && options.suppressPatreon !== true) {
+            log(`[${name}, ${version}]: Thanks for using the package, if you want to support the packages created: ${funding.map((c) => c.url).join(" or ")}`);
+            showed = true;
+        }
     }
 
     get prefix() {
@@ -140,6 +149,36 @@ module.exports = class Tickets {
             emoji: options.emoji,
         });
     }
+
+    /**
+     *
+     * @param {import("discord.js").ButtonInteraction} int
+     */
+    async handleTicketButton(int) {
+        await int.deferUpdate().catch(() => null);
+        const msg = await int.message.fetch(true).catch(() => null);
+        const file = msg?.attachments.find((c) => c.name.endsWith(".txt"));
+        if (!file) {
+            return int
+                .followUp({
+                    ...embedComment(`Unable to find the .txt file.`),
+                    ephemeral: true,
+                })
+                .catch(() => null);
+        }
+        const components = int.message.components.slice(0, 1);
+        components.push({
+            type: 1,
+            components: [
+                button({
+                    title: `${this.str("TRANSCRIPT_VIEW")} (${moment().format("MM DD YYYY h:m:s")})`,
+                    emoji: { id: "1059556038761787433" },
+                    url: `https://view.elara.workers.dev/tickets?url=${file.url}`,
+                }),
+            ],
+        });
+        return int.editReply({ components }).catch(console.log);
+    }
     /**
      * @param {object} opts
      * @param {import("discord.js").GuildMember} opts.member
@@ -149,7 +188,7 @@ module.exports = class Tickets {
      * @param {string} opts.reason
      */
     async closeTicket({ member, messages, channel, guild, user, reason } = {}) {
-        const { id, token, username, avatar: avatarURL, threadId } = this.webhookOptions;
+        const { id, token, username, avatar: avatarURL, threadId } = await this.webhookOptions;
         if (!id || !token) {
             return;
         }
@@ -187,24 +226,26 @@ module.exports = class Tickets {
                         name: `${this.str("TRANSCRIPT")}.txt`,
                         attachment: Buffer.from(displayMessages(channel, messages.reverse(), channel.name.split("-")[1], this.options.prefix, (name) => this.str(name, this?.options?.lang))),
                     },
+                    {
+                        name: `${this.str("TRANSCRIPT")}.html`,
+                        attachment: Buffer.from(generateHTMLPage(channel, messages.reverse(), channel.name.split("-")[1], this.options.prefix, (name) => this.str(name, this?.options?.lang))),
+                    },
                 ],
-            })
-            .then((m) => {
-                let components = [
+                components: [
                     {
-                        type: 2,
-                        style: 5,
-                        label: this.str("TRANSCRIPT"),
-                        emoji: { id: "792290922749624320" },
-                        url: `https://view.elara.workers.dev/tickets?url=${Array.isArray(m.attachments) ? m.attachments?.[0]?.url : m.attachments?.first?.()?.url ?? "URL_NOT_FOUND"}`,
+                        type: 1,
+                        components: [
+                            button({
+                                id: `transcript`,
+                                label: this.str("TRANSCRIPT"),
+                                emoji: { id: `792290922749624320` },
+                                style: ButtonStyle.SECONDARY,
+                            }),
+                        ],
                     },
-                ];
-                embeds[0].description += `\n${de.transcript} ${this.str("TRANSCRIPT")}: [${this.str("VIEW_HERE")}](${components[0].url})`;
-                webhook(this.webhookOptions)
-                    .embeds(embeds)
-                    .button({ type: 1, components })
-                    .edit(m.id)
-                    .catch((e) => this._debug(e));
+                ],
+            })
+            .then((m) => {
                 if (user) {
                     user.send({
                         embeds: [
@@ -229,7 +270,26 @@ module.exports = class Tickets {
                                 },
                             },
                         ],
-                        components: [{ type: 1, components }],
+                        components: [
+                            {
+                                type: 1,
+                                components: [
+                                    {
+                                        type: 2,
+                                        style: 5,
+                                        label: this.str("TRANSCRIPT"),
+                                        emoji: { id: "792290922749624320" },
+                                        url: `https://view.elara.workers.dev/tickets?url=${m.attachments?.find?.((c) => c.filename.includes(".txt"))?.url}`,
+                                    },
+                                ],
+                            },
+                        ],
+                        files: [
+                            {
+                                name: `${this.str("TRANSCRIPT")}.html`,
+                                attachment: Buffer.from(generateHTMLPage(channel, messages.reverse(), channel.name.split("-")[1], this.options.prefix, (name) => this.str(name, this?.options?.lang))),
+                            },
+                        ],
                     }).catch((e) => this._debug(e));
                 }
             })

package/lib/html.js

@@ -0,0 +1,68 @@
+exports.discordView = function (messages) {
+    return `<!DOCTYPE html>
+<head>
+    <title>Discord Viewer</title>
+    <link href="https://cdn.discordapp.com/emojis/880708306761564220.png" rel="icon" />
+    <script>
+        window.onload = _ => {
+            let doc = document.getElementById("messages");
+            if (doc.innerHTML.includes('new_timestamp="')) {
+                let matches = doc.innerHTML.match(new RegExp(\`new_timestamp=".*?"\`, "gi"))
+                if (matches) {
+                    for (const match of matches) {
+                        document.getElementById("messages").innerHTML = doc.innerHTML.replace(match, \`timestamp="\${new Date(match.split("new_timestamp=\\"")[1].replace('"', "")).toLocaleString()}"\`)
+                    }
+                }
+            }
+            setTimeout(_ => hidePreloader(), 1000)
+        }
+        function hidePreloader() {
+            document.getElementById("load").style.transitionDuration = "0.5s"
+            document.getElementById("load").style.pointerEvents = "none"
+            document.getElementById("load").style.opacity = 0
+            document.getElementById("load").style.zIndex = -1
+        }
+    </script>
+    <script type="module" src="https://unpkg.com/@skyra/discord-components-core" async></script>
+    <style>
+        /* Preloader styles. */
+        #load {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: black;
+            z-index: 9999;
+            cursor: progress;
+        }
+
+        /* Preloader image. */
+        #icon {
+            width: 200px;
+            height: 200px;
+            position: absolute;
+            background-color: transparent;
+            left: 50%;
+            top: 50%;
+            background-image: url(https://cdn.discordapp.com/emojis/634127148696862753.gif?v=1);
+            background-repeat: no-repeat;
+            background-position: center;
+            margin: -100px 0 0 -100px;
+        }
+    </style>
+</head>
+
+<body style="background: #36393e;">
+    <div id="load">
+        <div id="icon"></div>
+        <br>
+        <h3 style="min-height: 110%; display: flex; justify-content: center; align-items: center;">Loading, one moment please.</h3>
+    </div>
+    <discord-messages id="messages">${messages}</discord-messages>
+    <br>
+    <br>
+</body>
+
+</html>`;
+};

package/lib/util.js

@@ -3,9 +3,10 @@ const {
         Interactions: { modal },
     } = require("@elara-services/packages"),
     { Collection, version } = require("discord.js"),
-    { DiscordWebhook: Webhook } = require("@elara-services/webhooks"),
+    { DiscordWebhook: Webhook, Webhook: BotHook } = require("@elara-services/webhooks"),
     defLang = require("../languages/en-US"),
     pack = require("../package.json");
+const { discordView } = require("./html");
 
 exports.getString = (name, lang = "en-US") => {
     if (!lang) {
@@ -205,6 +206,13 @@ exports.displayMessages = (channel, messages = [], ticketID, type, str) => {
     ].join(" ");
 };
 
+/**
+ * @description Generates an HTML page string to use.
+ */
+exports.generateHTMLPage = (channel, messages = [], ticketID, type, str) => {
+    return discordView(exports.displayMessages(channel, messages, ticketID, type, str));
+};
+
 exports.defs = {
     modals: {
         reason: (customId, str) =>
@@ -336,7 +344,22 @@ exports.webhook = (options) => {
     });
 };
 
-exports.getWebhookInfo = (options, username = "Tickets") => {
+/**
+ * @param {import("@elara-services/tickets").TicketOptions} options
+ * @param {string} username
+ */
+exports.getWebhookInfo = async (options, username = "Tickets") => {
+    if (options.webhook?.channelId) {
+        const channel = options.client.channels.resolve(options.webhook.channelId);
+        if (channel) {
+            const hook = await new BotHook(options.client.token).fetch(channel.isThread() ? channel.parentId : channel.id);
+            if (hook) {
+                options.webhook.id = hook.id;
+                options.webhook.token = hook.token;
+                options.webhook.threadId = channel.isThread() ? channel.id : undefined;
+            }
+        }
+    }
     return {
         id: options.webhook?.id,
         token: options.webhook?.token,

package/lib/v13.js

@@ -32,6 +32,9 @@ module.exports = class Tickets extends base {
             }
         }
         if (int.isButton() || int.isModalSubmit()) {
+            if (int.customId.startsWith("transcript")) {
+                return this.handleTicketButton(int);
+            }
             let { guild, channel, member, customId } = int,
                 category = guild?.channels?.resolve?.(this.options.ticket?.category || channel?.parentId);
             if (!guild?.available || !channel || !member || !category) {
@@ -510,8 +513,9 @@ module.exports = class Tickets extends base {
                     .catch((e) => this._debug(e));
             }
         }
-        if (this.webhookOptions.id && this.webhookOptions.token) {
-            webhook(this.webhookOptions)
+        const webOpt = await this.webhookOptions;
+        if (webOpt.id && webOpt.token) {
+            webhook(webOpt)
                 .embed(
                     embed(`${de.user} ${this.str("USER")}: ${member.user.toString()} \`@${member.user.tag}\` (${member.id})\n${de.channel} ${this.str("CHANNEL")}: \`#${channel.name}\` (${channel.id})`, {
                         title: this.str("OPEN_TICKET_TITLE"),

package/lib/v14.js

@@ -28,6 +28,9 @@ module.exports = class Tickets extends base {
             }
         }
         if (int.isButton() || int.type === InteractionType.ModalSubmit) {
+            if (int.customId.startsWith("transcript")) {
+                return this.handleTicketButton(int);
+            }
             let { guild, channel, member, customId } = int,
                 category = guild?.channels?.resolve?.(this.options.ticket?.category || channel?.parentId);
             if (!guild?.available || !channel || !member || !category) {
@@ -506,8 +509,9 @@ module.exports = class Tickets extends base {
                     .catch((e) => this._debug(e));
             }
         }
-        if (this.webhookOptions.id && this.webhookOptions.token) {
-            webhook(this.webhookOptions)
+        const webOpt = await this.webhookOptions;
+        if (webOpt.id && webOpt.token) {
+            webhook(webOpt)
                 .embed(
                     embed(`${de.user} ${this.str("USER")}: ${member.user.toString()} \`@${member.user.tag}\` (${member.id})\n${de.channel} ${this.str("CHANNEL")}: \`#${channel.name}\` (${channel.id})`, {
                         title: this.str("OPEN_TICKET_TITLE"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elara-services/tickets",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Helper for tickets",
   "main": "index.js",
   "types": "index.d.ts",
@@ -11,15 +11,25 @@
   "repository": {
     "url": "https://github.com/elara-bots/npm/tree/main/tickets"
   },
+  "funding": [
+    {
+      "type": "patreon",
+      "url": "https://patreon.com/elaraservices"
+    },
+    {
+      "type": "paypal",
+      "url": "https://paypal.me/superchiefyt"
+    }
+  ],
   "scripts": {
     "lint": "eslint .",
     "pf": "prettier --write **/**/*.js",
     "pc": "prettier --check **/**/*.js"
   },
   "dependencies": {
-    "@elara-services/packages": "^6.0.8",
-    "@elara-services/utils": "^1.3.1",
-    "@elara-services/webhooks": "^2.1.10"
+    "@elara-services/packages": "^6.0.9",
+    "@elara-services/utils": "^1.3.25",
+    "@elara-services/webhooks": "^2.1.18"
   },
   "devDependencies": {
     "eslint": "8.20.0",