♻️ Add Text component and currency component

examples/sendTemplateMessage.ts

@@ -1,6 +1,7 @@
 import "dotenv/config";
 
 import { Client } from "../src";
+import { TextComponent } from "../src/components/TextComponent";
 
 const client = new Client({
   auth: {
@@ -13,11 +14,6 @@ const client = new Client({
   await client.messages.sendTemplateMessage({
     to: process.env.DST_NUMBER || "",
     templateName: "welcome_message",
-    bodyComponents: [
-      {
-        type: "text",
-        text: "Sr. Brega",
-      },
-    ],
+    components: [new TextComponent().setText("Sr. Brega")],
   });
 })();

src/@types/api.d.ts

@@ -25,3 +25,24 @@ export interface IAPIRawListAction {
   button: string;
   sections: IAPIRawSection[];
 }
+
+export interface IAPIRawDateTime {
+  fallback_value: string;
+  /* component: {
+    day_of_week?: number;
+    year?: number;
+    month?: number;
+    day_of_month?: number;
+    hour?: number;
+    minute?: number;
+    calendar?: "GREGORIAN" | "SOLAR_HIJRI";
+  }; */
+}
+
+export interface IAPIRawDateTimeComponent {
+  type: string;
+  parameters: {
+    type: "date_time";
+    date_time: IAPIRawDateTime;
+  }[];
+}

src/@types/index.ts

@@ -66,16 +66,6 @@ export interface IDateTimeComponent {
   fallback_value: Date | string;
 }
 
-export type IComponent =
-  | ITextComponent
-  | ICurrencyComponent
-  | IDateTimeComponent;
-
-export type IBodyComponents =
-  | ITextComponent[]
-  | ICurrencyComponent[]
-  | IDateTimeComponent[];
-
-export type IHeaderComponents = ICurrencyComponent[] | IDateTimeComponent[];
-
-export type IButtonComponents = ICurrencyComponent[] | IDateTimeComponent[];
+export interface IGenericComponent {
+  toAPIObject(): any;
+}

src/components/CurrencyComponent.ts

@@ -1,6 +1,7 @@
+import { IGenericComponent } from "../@types";
 import { CurrencyCodes } from "../utils/CurrencyCodes";
 
-export class CurrencyComponent {
+export class CurrencyComponent implements IGenericComponent {
   amountMultipliedBy1000 = 0;
   fallbackValue = "";
   type: "body" | "header" = "body";

src/components/DateTimeComponent.ts

@@ -0,0 +1,50 @@
+import { IGenericComponent } from "../@types";
+import { IAPIRawDateTimeComponent } from "../@types/api";
+
+export class DateTimeComponent implements IGenericComponent {
+  public type: "header" | "body" = "body";
+  public fallbackValue: string = new Date().toString();
+
+  setType(type: "body" | "header"): this {
+    this.type = type;
+
+    return this;
+  }
+
+  setFallbackValue(fallbackValue: string | Date): this {
+    this.fallbackValue = fallbackValue.toString();
+
+    return this;
+  }
+
+  // For some reason, I can't get this to work and the whatsapp reference documentation doesn't even mention this
+  // I will remove it and test it later
+  /* setDate(date: Date) {
+    this.date = date;
+
+    return this;
+  } */
+
+  toAPIObject(): IAPIRawDateTimeComponent {
+    return {
+      type: this.type,
+      parameters: [
+        {
+          type: "date_time",
+          date_time: {
+            fallback_value: this.fallbackValue,
+            /* component: {
+              calendar: "GREGORIAN",
+              day_of_month: this.date.getDate(),
+              day_of_week: this.date.getDay(),
+              month: this.date.getMonth(),
+              hour: this.date.getHours(),
+              minute: this.date.getMinutes(),
+              year: this.date.getFullYear(),
+            }, See comment above  */
+          },
+        },
+      ],
+    };
+  }
+}

src/components/TextComponent.ts

@@ -0,0 +1,22 @@
+import { IGenericComponent } from "../@types";
+
+export class TextComponent implements IGenericComponent {
+  public type: "body" | "header" | "button" = "body";
+  public text = "";
+
+  setType(type: "body" | "header" | "button"): this {
+    this.type = type;
+
+    return this;
+  }
+
+  setText(text: string): this {
+    this.text = text;
+
+    return this;
+  }
+
+  toAPIObject(): any {
+    return { type: this.type, parameters: [{ type: "text", text: this.text }] };
+  }
+}

src/managers/MessageManager.ts

@@ -1,12 +1,6 @@
 import axios, { AxiosInstance } from "axios";
 
-import {
-  IAuthOptions,
-  IBodyComponents,
-  IButtonComponents,
-  IComponent,
-  IHeaderComponents,
-} from "../@types";
+import { IAuthOptions, IGenericComponent } from "../@types";
 import { IAPIRawButtonsAction, IAPIRawListAction } from "../@types/api";
 import { Client } from "../client/client";
 import { ReplyButton } from "../components/ReplyButton";
@@ -29,37 +23,7 @@ export interface ISendTemplateMessageOptions {
    */
   templateName: string;
 
-  /**
-   * The template components for the body of the message.
-   *
-   * The components will be replaced by the variables in your template.
-   *
-   * Example:
-   * Here's your one time password {{1}} // "1" will be replaced by the component specified
-   * */
-  bodyComponents?: IBodyComponents;
-
-  /**
-   * The template components for the header of the message.
-   *
-   * They'll be replaced by the variables in your template.
-   *
-   * Example:
-   * Thanks for choosing us {{1}}. // "1" will be replaced by the component specified
-   * */
-  headerComponents?: IHeaderComponents;
-
-  /**
-   * The template components for the button of the message.
-   *
-   * They'll be replaced by the variables in your template.
-   *
-   * Example:
-   * Click here to buy {{1}}. // "1" will be replaced by the component specified
-   * */
-  buttonComponents?: IButtonComponents;
-
-  // components: any[]; TODO: work on this later
+  components: IGenericComponent[];
 }
 
 export interface IBaseSendInteractiveMessage {
@@ -157,55 +121,9 @@ export class MessageManager {
   async sendTemplateMessage({
     to,
     templateName,
-    bodyComponents,
-    buttonComponents,
-    headerComponents,
-    // components,
+    components,
     language = "en_US",
   }: ISendTemplateMessageOptions) {
-    const components = [];
-
-    const convertToAPIComponent = (component: IComponent) => {
-      if (component.type === "date_time") {
-        const { fallback_value } = component;
-        return {
-          type: "date_time",
-          date_time: {
-            fallback_value,
-          },
-        };
-      }
-
-      return component;
-    };
-
-    if (bodyComponents) {
-      components.push({
-        type: "body",
-        parameters: bodyComponents.map((component) =>
-          convertToAPIComponent(component)
-        ),
-      });
-    }
-
-    if (buttonComponents) {
-      components.push({
-        type: "button",
-        parameters: buttonComponents.map((component) =>
-          convertToAPIComponent(component)
-        ),
-      });
-    }
-
-    if (headerComponents) {
-      components.push({
-        type: "header",
-        parameters: headerComponents.map((component) =>
-          convertToAPIComponent(component)
-        ),
-      });
-    }
-
     await this.request.post("/messages", {
       messaging_product: "whatsapp",
       to,
@@ -215,8 +133,7 @@ export class MessageManager {
         language: {
           code: language,
         },
-        // components: components.map((component) => component.toAPIObject()),
-        components,
+        components: components.map((component) => component.toAPIObject()),
       },
     });
   }