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>
     </>
   );
 };