Update return type for Facebook verification

packages/bridge-ui/components/Detail.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 import { DisplayTextField, Button, Dialog, colors, typography } from "ui";
 import { Selectable } from "kysely";
 import { type Database } from "bridge-common";
+import { QRCode } from "./QRCode";
 import { generateDeleteAction } from "../lib/actions";
 import { serviceConfig } from "../config/config";
 import { FieldDescription } from "../lib/service";
@@ -70,13 +71,24 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
         <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
           {fields.map((field: FieldDescription) => (
             <Grid item xs={field.size ?? 6} key={field.name}>
-              <DisplayTextField
-                name={field.name}
-                label={field.label}
-                lines={field.lines ?? 1}
-                value={row[field.name] as string}
-                copyable={field.copyable ?? false}
-              />
+              {field.kind === "qrcode" && (
+                <QRCode
+                  name={field.name}
+                  label={field.label}
+                  getValue={field.getValue}
+                  id={row["id"] as string}
+                  helperText={field.helperText}
+                />
+              )}
+              {(!field.kind || field.kind === "text") && (
+                <DisplayTextField
+                  name={field.name}
+                  label={field.label}
+                  lines={field.lines ?? 1}
+                  value={row[field.name] as string}
+                  copyable={field.copyable ?? false}
+                />
+              )}
             </Grid>
           ))}
         </Grid>

packages/bridge-ui/components/QRCode.tsx

@@ -0,0 +1,42 @@
+import { FC, useEffect, useState } from "react";
+import QRCodeInternal from "react-qr-code";
+import { Box } from "@mui/material";
+import { colors } from "../styles/theme";
+
+type QRCodeProps = {
+  name: string;
+  label: string;
+  id: string;
+  helperText?: string;
+  getValue?: (id: string) => Promise<string>;
+  refreshInterval?: number;
+};
+
+export const QRCode: FC<QRCodeProps> = ({
+  name,
+  label,
+  id,
+  helperText,
+  getValue,
+  refreshInterval,
+}) => {
+  const [value, setValue] = useState("");
+  const { white } = colors;
+
+  useEffect(() => {
+    if (getValue && refreshInterval) {
+      const interval = setInterval(async () => {
+        const result = await getValue(id);
+        setValue(result);
+      }, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [getValue, refreshInterval]);
+
+  return (
+    <Box sx={{ backgroundColor: white, m: 2 }}>
+      <QRCodeInternal value={value} />
+      <Box>{helperText}</Box>
+    </Box>
+  );
+};

packages/bridge-ui/config/whatsapp.ts

@@ -1,5 +1,10 @@
 import { ServiceConfig } from "../lib/service";
 
+const getQRCode = async (id: string) => {
+  console.log("Getting QR code");
+  return "xya"; // "2hVSc9OT18wbo60WLKlVrd5KqQqYZWdH+kVlRYlrnZcKbjbzwcL4ybkS1/jGaN5bLafX9ZaR829xyhQ=";
+};
+
 export const whatsappConfig: ServiceConfig = {
   entity: "whatsapp",
   table: "WhatsappBot",
@@ -59,6 +64,15 @@ export const whatsappConfig: ServiceConfig = {
       label: "Token",
       copyable: true,
     },
+    {
+      name: "qrcode",
+      label: "QR Code",
+      kind: "qrcode",
+      size: 4,
+      getValue: getQRCode,
+      helperText: "Go ahead, scan it",
+      refreshInterval: 5,
+    },
   ],
   listColumns: [
     {

packages/bridge-ui/lib/facebook.ts

@@ -16,17 +16,18 @@ export class Facebook extends Service {
 
       if (searchParams.get("hub.mode") === "subscribe") {
         const challenge = searchParams.get("hub.challenge");
+        const response = new Response(challenge, { status: 200 });
 
-        return NextResponse.json(challenge) as any;
+        return response as any;
       } else {
         return NextResponse.error();
       }
+    } else {
+      const message = await req.json();
+      const worker = await getWorkerUtils();
+      await worker.addJob("facebook/receive-facebook-message", { message });
+
+      return NextResponse.json({ response: "ok" });
     }
-
-    const message = await req.json();
-    const worker = await getWorkerUtils();
-    await worker.addJob("facebook/receive-facebook-message", { message });
-
-    return NextResponse.json({ response: "ok" });
   }
 }

packages/bridge-ui/lib/service.ts

@@ -22,7 +22,9 @@ export type SelectOption = {
 export type FieldDescription = {
   name: string;
   label: string;
-  kind?: "text" | "phone" | "select" | "multi";
+  kind?: "text" | "phone" | "select" | "multi" | "qrcode";
+  getValue?: (id: string) => Promise<string>;
+  refreshInterval?: number;
   getOptions?: (formState: any) => Promise<SelectOption[]>;
   autogenerated?: "token";
   hidden?: boolean;

packages/bridge-ui/package.json

@@ -26,6 +26,7 @@
     "react-iframe": "^1.8.5",
     "react-markdown": "^9.0.1",
     "react-polyglot": "^0.7.2",
+    "react-qr-code": "^2.0.13",
     "tss-react": "^4.9.10",
     "uuid": "^9.0.1"
   },