Whatsapp unlink WIP #1

packages/bridge-ui/components/Detail.tsx

@@ -34,6 +34,8 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
   const { almostBlack } = colors;
   const { bodyLarge } = typography;
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+  const [showRelinkConfirmation, setShowRelinkConfirmation] = useState(false);
+  const [isRelinking, setIsRelinking] = useState(false);
 
   const continueDeleteAction = async () => {
     await deleteAction?.(id);
@@ -41,6 +43,23 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
     router.push(`${getBasePath()}${entity}`);
   };
 
+  const continueRelinkAction = async () => {
+    setIsRelinking(true);
+    try {
+      const response = await fetch(`/link/api/${entity}/bots/${token}/relink`, {
+        method: "POST",
+      });
+      if (response.ok) {
+        setShowRelinkConfirmation(false);
+        router.refresh();
+      }
+    } catch (error) {
+      console.error("Relink failed:", error);
+    } finally {
+      setIsRelinking(false);
+    }
+  };
+
   return (
     <>
       <Dialog
@@ -57,6 +76,15 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
                   onClick={() => setShowDeleteConfirmation(true)}
                 />
               </Grid>
+              {service === "whatsapp" && (
+                <Grid item>
+                  <Button
+                    text="Relink"
+                    kind="secondary"
+                    onClick={() => setShowRelinkConfirmation(true)}
+                  />
+                </Grid>
+              )}
               <Grid item>
                 <Button
                   text="Edit"
@@ -129,6 +157,35 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
           Are you sure you want to delete this record?
         </Box>
       </Dialog>
+      <Dialog
+        open={showRelinkConfirmation}
+        size="xs"
+        title="Relink WhatsApp Connection?"
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item>
+              <Button
+                text="Cancel"
+                kind="secondary"
+                onClick={() => setShowRelinkConfirmation(false)}
+                disabled={isRelinking}
+              />
+            </Grid>
+            <Grid item>
+              <Button
+                text={isRelinking ? "Relinking..." : "Relink"}
+                kind="primary"
+                onClick={continueRelinkAction}
+                disabled={isRelinking}
+              />
+            </Grid>
+          </Grid>
+        }
+      >
+        <Box sx={{ ...bodyLarge, color: almostBlack }}>
+          This will disconnect the current WhatsApp link and generate a new QR code. You will need to scan the new QR code to reconnect. Continue?
+        </Box>
+      </Dialog>
     </>
   );
 };

packages/bridge-ui/index.ts

@@ -10,4 +10,5 @@ export {
   sendMessage,
   receiveMessage,
   handleWebhook,
+  relinkBot,
 } from "./lib/routing";

packages/bridge-ui/lib/routing.ts

@@ -23,3 +23,8 @@ export const handleWebhook = async (
   req: NextRequest,
   params: ServiceParams,
 ): Promise<NextResponse> => (await getService(params))?.handleWebhook(req);
+
+export const relinkBot = async (
+  _req: NextRequest,
+  params: ServiceParams,
+): Promise<NextResponse> => (await getService(params))?.relink(params);

packages/bridge-ui/lib/service.ts

@@ -122,4 +122,8 @@ export class Service {
   async handleWebhook(_req: NextRequest): Promise<NextResponse> {
     return NextResponse.error() as any;
   }
+
+  async relink({ params: _params }: ServiceParams): Promise<NextResponse> {
+    return NextResponse.error() as any;
+  }
 }

packages/bridge-ui/lib/whatsapp.ts

@@ -31,4 +31,30 @@ export class Whatsapp extends Service {
 
     return NextResponse.json(json);
   }
+
+  async relink({ params }: ServiceParams) {
+    const { token } = await params;
+    const row = await db
+      .selectFrom("WhatsappBot")
+      .selectAll()
+      .where("token", "=", token as string)
+      .executeTakeFirstOrThrow();
+    const id = row.id;
+
+    // Step 1: Call unverify to remove the bot directory and disconnect
+    const unverifyUrl = `${process.env.BRIDGE_WHATSAPP_URL}/api/bots/${id}/unverify`;
+    await fetch(unverifyUrl, { method: "POST" });
+
+    // Step 2: Reset verified flag in database
+    await db
+      .updateTable("WhatsappBot")
+      .set({ verified: false })
+      .where("id", "=", id)
+      .execute();
+
+    // Step 3: Revalidate the path to refresh the UI
+    revalidatePath(`/whatsapp/${id}`);
+
+    return NextResponse.json({ success: true, message: "WhatsApp connection reset. Please scan the new QR code." });
+  }
 }