tambahan

src/pages/sq/dashboard/wa-hook/flow_wa_hook.tsx

@@ -132,6 +132,8 @@ function FlowWaHookForm() {
   const [flowUrl, setFlowUrl] = useState("");
   const [flowToken, setFlowToken] = useState("");
   const [loading, setLoading] = useState(false);
+  const [waPhoneNumberId, setWaPhoneNumberId] = useState("");
+  const [waToken, setWaToken] = useState("");
 
   useShallowEffect(() => {
     const loadCredentials = async () => {
@@ -141,6 +143,8 @@ function FlowWaHookForm() {
       } else {
         setFlowUrl(data?.data?.flowUrl || "");
         setFlowToken(data?.data?.flowToken || "");
+        setWaPhoneNumberId(data?.data?.waPhoneNumberId || "");
+        setWaToken(data?.data?.waToken || "");
       }
     };
     loadCredentials();
@@ -152,7 +156,7 @@ function FlowWaHookForm() {
       return;
     }
     setLoading(true);
-    const { error } = await apiFetch.api.chatflows["url-token"].put({ flowUrl, flowToken });
+    const { error } = await apiFetch.api.chatflows["url-token"].put({ flowUrl, flowToken, waPhoneNumberId, waToken });
     if (error) {
       showNotification({ title: "Error", message: "Failed to update credentials", color: "red" });
     } else {
@@ -184,6 +188,21 @@ function FlowWaHookForm() {
             }
           />
         </Stack>
+        <Title order={3}>WhatsApp Credentials</Title>
+        <Stack gap="md">
+          <TextInput label="WhatsApp Phone Number ID" placeholder="Enter WhatsApp Phone Number ID" value={waPhoneNumberId} onChange={(e) => setWaPhoneNumberId(e.currentTarget.value)} />
+          <PasswordInput
+            label="WhatsApp Token"
+            placeholder="Enter WhatsApp Token"
+            value={waToken}
+            onChange={(e) => setWaToken(e.currentTarget.value)}
+            rightSection={
+              <ActionIcon onClick={copyToken}>
+                <IconCopy size={16} />
+              </ActionIcon>
+            }
+          />
+        </Stack>
         <Group justify="flex-end">
           <Button leftSection={<IconCheck size={16} />} onClick={saveCredentials} loading={loading}>
             Save Changes

src/server/routes/flow_route.ts

@@ -157,12 +157,14 @@ const FlowRoute = new Elysia({
       select: {
         flowUrl: true,
         flowToken: true,
+        waPhoneNumberId: true,
+        waToken: true,
       },
     })
     if (!result) {
-      return { data: { flowUrl: null, flowToken: null } }
+      return { data: { flowUrl: null, flowToken: null, waPhoneNumberId: null, waToken: null } }
     }
-    return { data: { flowUrl: result.flowUrl, flowToken: result.flowToken } }
+    return { data: { flowUrl: result.flowUrl, flowToken: result.flowToken, waPhoneNumberId: result.waPhoneNumberId, waToken: result.waToken } }
   }, {
     detail: {
       summary: "Get flow url and token",
@@ -172,7 +174,7 @@ const FlowRoute = new Elysia({
   .put(
     '/url-token',
     async ctx => {
-      const { flowUrl, flowToken } = ctx.body
+      const { flowUrl, flowToken, waPhoneNumberId, waToken } = ctx.body
       const result = await prisma.chatFlows.upsert({
         where: {
           id: "1",
@@ -180,11 +182,15 @@ const FlowRoute = new Elysia({
         update: {
           flowUrl: flowUrl,
           flowToken: flowToken,
+          waPhoneNumberId: waPhoneNumberId,
+          waToken: waToken,
         },
         create: {
           id: "1",
           flowUrl: flowUrl,
           flowToken: flowToken,
+          waPhoneNumberId: waPhoneNumberId,
+          waToken: waToken,
         },
       })
       return { data: result }
@@ -193,6 +199,8 @@ const FlowRoute = new Elysia({
       body: t.Object({
         flowUrl: t.String(),
         flowToken: t.String(),
+        waPhoneNumberId: t.String(),
+        waToken: t.String(),
       }),
       detail: {
         summary: "Update flow url and token",

src/server/routes/wa_hook_route.ts

@@ -2,7 +2,6 @@ import Elysia, { t } from "elysia";
 import { prisma } from "../lib/prisma";
 import type { WAHookMessage } from "types/wa_messages";
 import _ from "lodash";
-import dayjs from "dayjs";
 
 async function fetchWithTimeout(input: RequestInfo, init: RequestInit, timeoutMs = 120_000) {
     const controller = new AbortController()
@@ -14,6 +13,22 @@ async function fetchWithTimeout(input: RequestInfo, init: RequestInit, timeoutMs
     }
 }
 
+async function sendReplyMessage(to: string, message: string, phoneNumberId: string, token: string) {
+    return await fetch(`https://graph.facebook.com/v21.0/${phoneNumberId}/messages`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+            messaging_product: "whatsapp",
+            to,
+            text: { body: message }
+        })
+    });
+}
+
+
 const WaHookRoute = new Elysia({
     prefix: "/wa-hook",
     tags: ["WhatsApp Hook"],
@@ -118,7 +133,11 @@ const WaHookRoute = new Elysia({
                         data: createData,
                     },
                 })
-                
+
+                if (flow?.waPhoneNumberId && flow?.waToken && number) {
+                    await sendReplyMessage(number, result.text, flow.waPhoneNumberId, flow.waToken)
+                }
+
             } catch (error) {
                 console.log(error)
                 console.log(responseText)