fix: add error parsing and response models (#23)

Author: sarthakjdev

.github/workflows/documentation-preview.yaml

@@ -5,9 +5,8 @@ on:
   push:
     branches-ignore:
       - "master"
-    # un-comment this after testing will be done !!
-    # paths:
-    #   - "apps/wapijs.co/**"
+    paths:
+      - "apps/wapijs.co/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

apps/wapijs.co/package.json

@@ -2,9 +2,9 @@
 	"name": "wapijs.co",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
-		"build": "next build",
-		"start": "next start",
+		"dev": "NODE_ENV=development next dev",
+		"build": "NODE_ENV=production  next build",
+		"start": "NODE_ENV=production  next start",
 		"lint": "next lint",
 		"pretty": "pnpm prettier --write \"src/**/*.{ts,tsx,css}\""
 	},

packages/example-chat-bot/package.json

@@ -39,7 +39,7 @@
 	},
 	"packageManager": "pnpm@8.7.0",
 	"dependencies": {
-		"@wapijs/wapi.js": "0.0.2",
+		"@wapijs/wapi.js": "workspace:*",
 		"dotenv": "^16.3.1"
 	},
 	"publishConfig": {

packages/example-chat-bot/src/index.ts

@@ -1,66 +1,63 @@
 import { whatsappClient } from './utils/client'
-import { AudioMessage, ListInteractionMessage, TextMessage } from '@wapijs/wapi.js'
+import { ListInteractionMessage, TextMessage } from '@wapijs/wapi.js'
 
 function init() {
 	whatsappClient.on('Ready', () => {
 		console.log('Client is ready')
 	})
 
 	const faq = {
-		"What is wapijs": [
+		'What is wapijs': [
 			{
-				question: "What is wapi.js?",
-				answer: "wapi.js is a Tyepscript library for building WhatsApp chatbots."
+				question: 'What is wapi.js?',
+				answer: 'wapi.js is a Tyepscript library for building WhatsApp chatbots.'
 			},
 			{
-				question: "Main features of wapi.js?",
-				answer: "Object-oriented design, single client, easy messaging, event handling, media upload."
+				question: 'Main features of wapi.js?',
+				answer: 'Object-oriented design, single client, easy messaging, event handling, media upload.'
 			},
 			{
-				question: "Can I build AI chatbots with wapi.js?  ewfjbesjkfbewjfgbjwekfknwekjnfwefwefwef",
+				question: 'Can I build AI chatbots with wapi.js?',
 				answer: "wapi.js itself doesn't have AI, but you can integrate with NLU services."
-			},
+			}
 		],
-		"Getting Started": [
+		'Getting Started': [
 			{
-				question: "How do I get started with wapi.js?",
-				answer: "Check out the docs at https://wapijs.co/docs and use the \"create-wapi-bot\" template."
+				question: 'How do I get started with wapi.js?',
+				answer: 'Check out the docs at https://wapijs.co/docs and use the "create-wapi-bot" template.'
 			},
 			{
-				question: "Is wapi.js easy to learn?",
-				answer: "Yes, designed for all levels. Docs and examples help you get started quickly."
-			},
+				question: 'Is wapi.js easy to learn?',
+				answer: 'Yes, designed for all levels. Docs and examples help you get started quickly.'
+			}
 		],
-		"Capabilities": [
+		Capabilities: [
 			{
-				question: "What kind of chatbots can I build?",
-				answer: "Customer support, marketing, notifications, and more! Leverage WhatsApp Business API."
+				question: 'What kind of chatbots can I build?',
+				answer: 'Customer support, marketing, notifications, and more! Leverage WhatsApp Business API.'
 			},
 			{
-				question: "Can I integrate wapi.js with other systems?",
-				answer: "Absolutely! Integrate with existing backend system."
+				question: 'Can I integrate wapi.js with other systems?',
+				answer: 'Absolutely! Integrate with existing backend system.'
 			},
 			{
-				question: "Are there examples of chatbots built with wapi.js?",
+				question: 'Are there examples of chatbots built with wapi.js?',
 				answer: "It's in beta, so not many yet. Be among the first to build and share yours!"
 			}
 		],
-		"Help & Support": [
+		'Help & Support': [
 			{
-				question: "Is wapi.js free and open-source?",
+				question:
+					'Is wapi.js free and open-source? qwerrqwrf3r3r32r23r23r23r23r2rqrqrerere23re23r23re',
 				answer: "Yes, it's completely free and open-source under the Apache 2.0 License."
 			},
 			{
-				question: "Where can I get help or support for wapi.js?",
-				answer: "Create an issue on our GitHub repository: https://github.com/sarthakjdev/wapi.js/issues."
-			},
+				question: 'Where can I get help or support for wapi.js?',
+				answer: 'Create an issue on our GitHub repository: https://github.com/sarthakjdev/wapi.js/issues.'
+			}
 		]
 	}
 
-
-
-
-
 	const listMessage = new ListInteractionMessage({
 		bodyText: 'Welcome to Wapi.js',
 		buttonText: 'Ask questions',
@@ -83,11 +80,10 @@ function init() {
 	whatsappClient.on('TextMessage', async message => {
 		console.log('Text Message')
 		if (message.text.data.text.toLowerCase() === 'hello') {
-			const response = await message.client.message.send({
+			await message.client.message.send({
 				message: listMessage,
 				phoneNumber: message.context.from
 			})
-			console.log({ response: JSON.stringify(response) })
 		} else {
 			await message.reply({
 				message: new TextMessage({
@@ -97,7 +93,7 @@ function init() {
 		}
 	})
 
-	whatsappClient.on('ListInteraction', async (message) => {
+	whatsappClient.on('ListInteraction', async message => {
 		console.log('List Interaction', message)
 
 		// it would be something like : section-1-question-1
@@ -106,8 +102,6 @@ function init() {
 		const sectionIndex = parseInt(messageListId.split('-')[1]) - 1
 		const questionIndex = parseInt(messageListId.split('-')[3]) - 1
 
-		console.log({ messageListId, sectionIndex, questionIndex })
-
 		// @ts-ignore
 		const answerToReply = faq[Object.keys(faq)[sectionIndex]][questionIndex].answer
 
@@ -116,7 +110,6 @@ function init() {
 				text: answerToReply
 			})
 		})
-
 	})
 
 	whatsappClient.on('Error', error => {

packages/wapi.js/api-extractor.json

@@ -1,7 +1,7 @@
 {
-	"extends": "../../api-extractor.json",
-	"mainEntryPointFilePath": "<projectFolder>/dist/esm/index.d.ts",
-	"docModel": {
-		"projectFolderUrl": "https://github.com/wapi.js/wapi.js/tree/main/packages/wapi.js"
-	}
+  "extends": "../../api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/esm/index.d.ts",
+  "docModel": {
+    "projectFolderUrl": "https://github.com/sarthakjdev/wapi.js/tree/master/packages/wapi.js"
+  }
 }

packages/wapi.js/src/api-request-payload-schema.ts

@@ -343,7 +343,12 @@ export const ListInteractiveMessageSection = z.object({
     z.object({
       id: z.string(),
       title: z.string(),
-      description: z.string().max(72, "Max length of a row description in list interaction message, can be 72 only"),
+      description: z
+        .string()
+        .max(
+          72,
+          "Max length of a row description in list interaction message, can be 72 only",
+        ),
     }),
   ),
 });

packages/wapi.js/src/client/interface.ts

@@ -5,6 +5,8 @@ import { type Webhook } from "../webhook";
 import { type MessageManager } from "../manager/message";
 import { type Client } from "./index";
 import { type RequestClient } from "./request-client";
+import { type z } from "zod";
+import { type WapiMessageResponseSchemaType } from "./schema";
 
 /**
  * Represents the interface for the Wapi client.
@@ -115,7 +117,7 @@ export interface RequestClientInterface {
     path: string;
     body: string;
     method: "GET" | "POST" | "DELETE";
-  }): Promise<void>;
+  }): Promise<z.infer<typeof WapiMessageResponseSchemaType>>;
 }
 
 /**

packages/wapi.js/src/client/request-client.ts

@@ -1,8 +1,14 @@
+import { type z } from "zod";
 import { type Client } from "./index";
 import {
   type RequestClientInterface,
   type RequestClientConfigOptions,
 } from "./interface";
+import {
+  CloudApiResponseSchemaType,
+  type WapiMessageResponseSchemaType,
+} from "./schema";
+import { MessageStatusEnum } from "../webhook/type";
 
 /**
  * Request client used to communicate with WhatsApp Cloud API using HTTP requests.
@@ -61,10 +67,9 @@ export class RequestClient implements RequestClientInterface {
     path: string;
     body?: string;
     method?: "GET" | "POST" | "DELETE";
-  }): Promise<any> {
+  }): Promise<z.infer<typeof WapiMessageResponseSchemaType>> {
     try {
       const requestUrl = this.getRequestUrl();
-
       const response = await fetch(`${requestUrl}${path}`, {
         method: method,
         body,
@@ -76,13 +81,51 @@ export class RequestClient implements RequestClientInterface {
       });
 
       const responseBody = await response.json();
-
-      // !TODO: fix types here
-      return responseBody;
+      const parsedResponse = CloudApiResponseSchemaType.safeParse(responseBody);
+      if (parsedResponse.success) {
+        const responseData = parsedResponse.data;
+        if (
+          responseData &&
+          typeof responseData === "object" &&
+          "error" in responseData
+        ) {
+          // api returned errored response
+          return {
+            status: "error",
+            error: {
+              description: responseData.error.error_data.details,
+              title: responseData.error.message,
+              errorCode: responseData.error.code,
+              errorSubCode: responseData.error.error_subcode,
+            },
+          };
+        } else {
+          return {
+            status: "success",
+            data: {
+              messageId: responseData.messages[0].id,
+              receiverPhoneNumber: responseData.contacts[0].input,
+              senderPhoneNumber: responseData.contacts[0].wa_id,
+              status: MessageStatusEnum.Sent,
+            },
+          };
+        }
+      } else {
+        throw new Error(
+          "Failed to parse response, Report to sarthak@softlancer.co urgently. or raise an issue on github.",
+        );
+      }
     } catch (error) {
-      console.log({ error });
       if (error instanceof Error) this.client.emit("Error", error);
-      return null;
+      return {
+        status: "error",
+        error: {
+          title: "Request Error",
+          description: error instanceof Error ? error.message : "",
+          errorCode: 0,
+          errorSubCode: "",
+        },
+      };
     }
   }
 }

packages/wapi.js/src/client/schema.ts

@@ -0,0 +1,61 @@
+import { z } from "zod";
+import { MessageStatusEnum } from "../webhook/type";
+
+export const CloudApiSuccessResponseSchemaType = z.object({
+  messages: z.array(
+    z.object({
+      id: z.string(),
+    }),
+  ),
+  messaging_product: z.literal("whatsapp"),
+  contacts: z.array(
+    z.object({
+      input: z.string(),
+      wa_id: z.string(),
+    }),
+  ),
+});
+
+export const CloudApiErrorResponseSchemaType = z.object({
+  error: z.object({
+    message: z.string(),
+    type: z.string(),
+    code: z.number(),
+    error_data: z.object({
+      messaging_product: z.string(),
+      details: z.string(),
+    }),
+    error_subcode: z.string().optional(),
+    fbtrace_id: z.string().optional(),
+  }),
+});
+
+export const CloudApiResponseSchemaType = CloudApiSuccessResponseSchemaType.or(
+  CloudApiErrorResponseSchemaType,
+);
+
+export const WapiMessageErrorResponseSchemaType = z.object({
+  title: z.string(),
+  description: z.string(),
+  errorCode: z.number(),
+  errorSubCode: z.string().optional(),
+});
+
+export const WapiMessageSuccessResponseSchemaType = z.object({
+  messageId: z.string(),
+  receiverPhoneNumber: z.string(),
+  senderPhoneNumber: z.string(),
+  status: z.nativeEnum(MessageStatusEnum),
+});
+
+export const WapiMessageResponseSchemaType = z
+  .object({
+    status: z.literal("success"),
+    data: WapiMessageSuccessResponseSchemaType,
+  })
+  .or(
+    z.object({
+      status: z.literal("error"),
+      error: WapiMessageErrorResponseSchemaType,
+    }),
+  );