feat(user-feedback): Render intro text directly after the description

beabee-communityrm · Jul 2, 2024 · 67fb728 · 67fb728
1 parent 64ff582
commit 67fb728
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 258 deletions.
diff --git a/telegram-bot/commands/show.command.ts b/telegram-bot/commands/show.command.ts
@@ -51,9 +51,17 @@ export class ShowCommand extends BaseCommand {
     }
 
     try {
-      // const session = await ctx.session;
-      const callout = await this.callout.get(slug);
-      const render = await this.calloutRenderer.calloutDetails(callout);
+      const callout = await this.callout.get(slug, ["form"]);
+      const calloutDetailsRender = await this.calloutRenderer.calloutDetails(
+        callout,
+      );
+      const calloutIntroRender = this.calloutRenderer.intro(
+        callout,
+      );
+      const calloutStartResponseKeyboard = this.calloutRenderer
+        .startResponseKeyboard(
+          callout,
+        );
 
       const signal = await this.stateMachine.setSessionState(
         ctx,
@@ -65,7 +73,11 @@ export class ShowCommand extends BaseCommand {
         throw new Error("The AbortSignal is required!");
       }
 
-      await this.communication.sendAndReceiveAll(ctx, render, signal);
+      await this.communication.sendAndReceiveAll(ctx, [
+        calloutDetailsRender,
+        calloutIntroRender,
+        calloutStartResponseKeyboard,
+      ], signal);
     } catch (error) {
       console.error("Error sending callout", error);
       successful = false;

diff --git a/telegram-bot/constants/events.ts b/telegram-bot/constants/events.ts
@@ -4,8 +4,7 @@ export const INLINE_BUTTON_CALLBACK_PREFIX = "callback_query:data";
 // Note: We choose short strings here because the length of these strings is limited in the Telegram bot API
 // and the slug is appended here.The max allowed size of a callback string is 64 bytes.
 export const INLINE_BUTTON_CALLBACK_SHOW_CALLOUT = "1";
-export const INLINE_BUTTON_CALLBACK_CALLOUT_INTRO = "2";
-export const INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE = "3";
+export const INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE = "2";
 
 /**
  * Prefix for the callout response interaction events, used for skip and done inline buttons, perhaps useful for others.

diff --git a/telegram-bot/deno.lock b/telegram-bot/deno.lock
diff --git a/telegram-bot/event-managers/callout-response.events.ts b/telegram-bot/event-managers/callout-response.events.ts
@@ -12,7 +12,6 @@ import { ListCommand } from "../commands/list.command.ts";
 import { ChatState } from "../enums/index.ts";
 import {
   FALSY_MESSAGE_KEY,
-  INLINE_BUTTON_CALLBACK_CALLOUT_INTRO,
   INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE,
   INLINE_BUTTON_CALLBACK_PREFIX,
   TRUTHY_MESSAGE_KEY,
@@ -43,14 +42,6 @@ export class CalloutResponseEventManager extends BaseEventManager {
   }
 
   public init() {
-    // Listen for the callback query data event with the `callout-respond:yes` data
-    this.event.on(
-      `${INLINE_BUTTON_CALLBACK_PREFIX}:${INLINE_BUTTON_CALLBACK_CALLOUT_INTRO}`,
-      (event) => {
-        this.onCalloutIntroKeyboardPressed(event);
-      },
-    );
-
     this.event.on(
       `${INLINE_BUTTON_CALLBACK_PREFIX}:${INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE}`,
       (event) => {
@@ -61,8 +52,12 @@ export class CalloutResponseEventManager extends BaseEventManager {
 
   protected async onCalloutParticipateKeyboardPressed(ctx: AppContext) {
     const data = ctx.callbackQuery?.data?.split(":");
-    const slug = data?.[1];
-    const startResponse = data?.[2] as "continue" | "cancel" === "continue";
+    // const slug = data?.[1];
+    const shortSlug = data?.[1];
+    // const startResponse = data?.[2] as "continue" | "cancel" === "continue";
+    const startResponse =
+      data?.[2] as typeof TRUTHY_MESSAGE_KEY | typeof FALSY_MESSAGE_KEY ===
+        TRUTHY_MESSAGE_KEY; // This is the key, so it's not localized
     const session = await ctx.session;
 
     await this.keyboard.removeInlineKeyboard(ctx);
@@ -75,14 +70,21 @@ export class CalloutResponseEventManager extends BaseEventManager {
       return;
     }
 
-    if (!slug) {
+    if (!shortSlug) {
       await this.communication.send(
         ctx,
         this.messageRenderer.calloutNotFound(),
       );
+      return;
+    }
 
-      // remove loading animation
-      await this.communication.answerCallbackQuery(ctx);
+    const slug = this.callout.getSlug(shortSlug);
+
+    if (!slug) {
+      await this.communication.send(
+        ctx,
+        this.messageRenderer.calloutNotFound(),
+      );
       return;
     }
 
@@ -176,50 +178,4 @@ export class CalloutResponseEventManager extends BaseEventManager {
       console.error(error);
     }
   }
-
-  /**
-   * Handle the callback query data event with the `callout-respond:yes` or `callout-respond:no` data.
-   * Called when the user presses the "Yes" or "No" button on the callout response keyboard.
-   * @param ctx
-   */
-  protected async onCalloutIntroKeyboardPressed(ctx: AppContext) {
-    const data = ctx.callbackQuery?.data?.split(":");
-    const shortSlug = data?.[1];
-    const startIntro =
-      data?.[2] as typeof TRUTHY_MESSAGE_KEY | typeof FALSY_MESSAGE_KEY ===
-        TRUTHY_MESSAGE_KEY; // This is the key, so it's not localized
-
-    await this.keyboard.removeInlineKeyboard(ctx);
-
-    if (!shortSlug) {
-      await this.communication.send(
-        ctx,
-        this.messageRenderer.calloutNotFound(),
-      );
-      return;
-    }
-
-    const slug = this.callout.getSlug(shortSlug);
-
-    if (!slug) {
-      await this.communication.send(
-        ctx,
-        this.messageRenderer.calloutNotFound(),
-      );
-      return;
-    }
-
-    if (!startIntro) {
-      await this.communication.send(ctx, this.messageRenderer.stop());
-      // Forward cancel to the cancel command
-      await this.resetCommand.action(ctx);
-      return;
-    }
-
-    // Start intro
-    const calloutWithForm = await this.callout.get(slug, ["form"]);
-
-    const res = this.calloutResponseRenderer.intro(calloutWithForm);
-    await this.communication.send(ctx, res);
-  }
 }
diff --git a/telegram-bot/event-managers/callout.events.ts b/telegram-bot/event-managers/callout.events.ts
@@ -60,11 +60,17 @@ export class CalloutEventManager extends BaseEventManager {
     }
 
     try {
-      const callout = await this.callout.get(slug);
-
-      const calloutFormRender = await this.calloutRenderer.calloutDetails(
+      const callout = await this.callout.get(slug, ["form"]);
+      const calloutDetailsRender = await this.calloutRenderer.calloutDetails(
+        callout,
+      );
+      const calloutIntroRender = this.calloutRenderer.intro(
         callout,
       );
+      const calloutStartResponseKeyboard = this.calloutRenderer
+        .startResponseKeyboard(
+          callout,
+        );
 
       const signal = await this.stateMachine.setSessionState(
         ctx,
@@ -78,7 +84,11 @@ export class CalloutEventManager extends BaseEventManager {
 
       await this.communication.sendAndReceiveAll(
         ctx,
-        calloutFormRender,
+        [
+          calloutDetailsRender,
+          calloutIntroRender,
+          calloutStartResponseKeyboard,
+        ],
         signal,
       );
     } catch (error) {

diff --git a/telegram-bot/renderer/callout-response.renderer.ts b/telegram-bot/renderer/callout-response.renderer.ts
@@ -28,7 +28,6 @@ import { ConditionService } from "../services/condition.service.ts";
 import { MessageRenderer } from "./message.renderer.ts";
 import {
   EMPTY_RENDER,
-  INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE,
   INLINE_BUTTON_CALLBACK_CALLOUT_RESPONSE,
 } from "../constants/index.ts";
 
@@ -806,28 +805,6 @@ export class CalloutResponseRenderer {
     return results;
   }
 
-  /**
-   * Render a callout response intro in HTML
-   */
-  public intro(callout: GetCalloutDataWithExt<"form">) {
-    const result: Render = {
-      key: callout.slug,
-      type: RenderType.HTML,
-      accepted: this.condition.replayConditionNone(),
-      html: "",
-      parseType: ParsedResponseType.NONE,
-      forceReply: false,
-    };
-    result.html = `${sanitizeHtml(callout.intro)}`;
-
-    const continueKeyboard = this.keyboard.inlineContinueCancel(
-      `${INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE}:${callout.slug}`,
-    );
-    result.inlineKeyboard = continueKeyboard;
-
-    return result;
-  }
-
   /**
    * Render the callout response thank you
    */

diff --git a/telegram-bot/renderer/callout.renderer.ts b/telegram-bot/renderer/callout.renderer.ts
@@ -1,7 +1,7 @@
 import { InputFile, InputMediaBuilder, Singleton } from "../deps/index.ts";
-import { downloadImage, escapeMd } from "../utils/index.ts";
+import { downloadImage, escapeMd, sanitizeHtml } from "../utils/index.ts";
 import { ParsedResponseType, RenderType } from "../enums/index.ts";
-import { INLINE_BUTTON_CALLBACK_CALLOUT_INTRO } from "../constants/index.ts";
+import { INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE } from "../constants/index.ts";
 
 import { ConditionService } from "../services/condition.service.ts";
 import { KeyboardService } from "../services/keyboard.service.ts";
@@ -10,6 +10,7 @@ import { I18nService } from "../services/i18n.service.ts";
 import type {
   CalloutDataExt,
   GetCalloutDataExt,
+  GetCalloutDataWithExt,
   Render,
 } from "../types/index.ts";
 
@@ -29,19 +30,20 @@ export class CalloutRenderer {
   }
 
   /**
-   * @fires `${INLINE_BUTTON_CALLBACK_PREFIX}:${INLINE_BUTTON_CALLBACK_CALLOUT_INTRO}`
+   * Renders a start response keyboard for a callout
+   * @fires `${INLINE_BUTTON_CALLBACK_PREFIX}:${INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE}`
    *
    * @param callout
    * @returns
    */
-  protected startResponseKeyboard(
+  public startResponseKeyboard(
     callout: CalloutDataExt,
   ): Render {
     const keyboardMessageMd = `_${
       escapeMd(this.i18n.t("bot.response.messages.calloutStartResponse"))
     }_`;
     const yesNoInlineKeyboard = this.keyboard.inlineYesNo(
-      `${INLINE_BUTTON_CALLBACK_CALLOUT_INTRO}:${callout.shortSlug}`,
+      `${INLINE_BUTTON_CALLBACK_CALLOUT_PARTICIPATE}:${callout.shortSlug}`,
     );
 
     const result: Render = {
@@ -150,6 +152,22 @@ export class CalloutRenderer {
     return result;
   }
 
+  /**
+   * Render a callout response intro in HTML
+   */
+  public intro(callout: GetCalloutDataWithExt<"form">) {
+    const result: Render = {
+      key: callout.slug,
+      type: RenderType.HTML,
+      accepted: this.condition.replayConditionNone(),
+      html: "",
+      parseType: ParsedResponseType.NONE,
+      forceReply: false,
+    };
+    result.html = `${sanitizeHtml(callout.intro)}`;
+    return result;
+  }
+
   /**
    * Render a callout with photo.
    *
@@ -176,8 +194,6 @@ export class CalloutRenderer {
       parseType: ParsedResponseType.NONE,
     };
 
-    const keyboardResult = this.startResponseKeyboard(callout);
-
-    return [calloutResult, keyboardResult];
+    return calloutResult;
   }
 }