Merge pull request #757 from microboxlabs/based/754-whatsapp-settings-ui

feat(app): WhatsApp channel settings card (configure + test)

Author: korutx

turbo-repo/apps/app/src/app/api/admin/orgs/[orgId]/integrations/connections/[connId]/test/route.ts

@@ -0,0 +1,24 @@
+import { forwardToQuarkus } from "@/app/api/utils/quarkus-proxy";
+
+/**
+ * POST /api/admin/orgs/[orgId]/integrations/connections/[connId]/test
+ *
+ * Runs the provider's live connectivity probe. Proxies to Quarkus
+ * `POST /api/v1/orgs/{orgId}/integrations/connections/{connId}/test`.
+ */
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ orgId: string; connId: string }> },
+) {
+  const { orgId, connId } = await params;
+  let body: unknown = {};
+  try {
+    body = await request.json();
+  } catch {
+    // No body is fine — the test request is optional.
+  }
+  return forwardToQuarkus(
+    `/api/v1/orgs/${encodeURIComponent(orgId)}/integrations/connections/${encodeURIComponent(connId)}/test`,
+    { method: "POST", body },
+  );
+}

turbo-repo/apps/app/src/app/api/admin/orgs/[orgId]/integrations/connections/route.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import { forwardToQuarkus } from "@/app/api/utils/quarkus-proxy";
+
+/**
+ * GET  /api/admin/orgs/[orgId]/integrations/connections — list connections
+ * POST /api/admin/orgs/[orgId]/integrations/connections — create a connection
+ *
+ * Proxies to Quarkus `GET/POST /api/v1/orgs/{orgId}/integrations/connections`
+ * (miot-integrations). Auth + tenant scoping are delegated to Quarkus.
+ */
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ orgId: string }> },
+) {
+  const { orgId } = await params;
+  const safe = encodeURIComponent(orgId);
+  return forwardToQuarkus(`/api/v1/orgs/${safe}/integrations/connections`);
+}
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ orgId: string }> },
+) {
+  const { orgId } = await params;
+  const safe = encodeURIComponent(orgId);
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+  return forwardToQuarkus(`/api/v1/orgs/${safe}/integrations/connections`, {
+    method: "POST",
+    body,
+  });
+}

turbo-repo/apps/app/src/app/api/admin/orgs/[orgId]/integrations/credential-profiles/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { forwardToQuarkus } from "@/app/api/utils/quarkus-proxy";
+
+/**
+ * POST /api/admin/orgs/[orgId]/integrations/credential-profiles — create a
+ * credential profile (e.g. a BEARER_TOKEN holding the WhatsApp access token).
+ *
+ * Proxies to Quarkus `POST /api/v1/orgs/{orgId}/integrations/credential-profiles`.
+ */
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ orgId: string }> },
+) {
+  const { orgId } = await params;
+  const safe = encodeURIComponent(orgId);
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+  return forwardToQuarkus(
+    `/api/v1/orgs/${safe}/integrations/credential-profiles`,
+    { method: "POST", body },
+  );
+}

turbo-repo/apps/app/src/features/settings-admin/components/org-detail-panel.tsx

@@ -6,6 +6,7 @@ import { useOrgMembers } from "../hooks/use-org-members";
 import { useOrgModules } from "../hooks/use-org-modules";
 import MembersList from "./members-list";
 import ModulesList from "./modules-list";
+import WhatsAppChannelCard from "../whatsapp/whatsapp-channel-card";
 
 interface OrgDetailPanelProps {
   readonly orgSlug: string | null;
@@ -45,6 +46,7 @@ export default function OrgDetailPanel({ orgSlug, dict }: OrgDetailPanelProps) {
         error={modulesError}
         dict={dict}
       />
+      <WhatsAppChannelCard orgSlug={orgSlug} dict={dict} />
       <MembersList
         members={members}
         isLoading={membersLoading}

turbo-repo/apps/app/src/features/settings-admin/whatsapp/use-org-whatsapp.ts

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import useSWR from "swr";
+import {
+  createWhatsAppConnection,
+  fetchWhatsAppConnection,
+  testWhatsAppConnection,
+} from "./whatsapp-data-service";
+import type {
+  ConnectionTestResult,
+  IntegrationConnection,
+  WhatsAppFormData,
+} from "./whatsapp.types";
+
+/**
+ * The org's WhatsApp connection + create/test actions, via the Next.js proxy
+ * to Quarkus. Returns a null SWR key when orgSlug is empty so the fetch skips.
+ */
+export function useOrgWhatsApp(orgSlug: string | null) {
+  const [actionLoading, setActionLoading] = useState(false);
+
+  const { data, error, isLoading, mutate } = useSWR<
+    IntegrationConnection | null,
+    Error
+  >(
+    orgSlug ? ["org-whatsapp", orgSlug] : null,
+    ([, slug]: [string, string]) => fetchWhatsAppConnection(slug),
+    { revalidateOnFocus: false, dedupingInterval: 60_000 },
+  );
+
+  function requireSlug(): string {
+    if (!orgSlug) {
+      throw new Error("No organization selected");
+    }
+    return orgSlug;
+  }
+
+  async function create(
+    form: WhatsAppFormData,
+  ): Promise<IntegrationConnection> {
+    const slug = requireSlug();
+    setActionLoading(true);
+    try {
+      const created = await createWhatsAppConnection(slug, form);
+      await mutate();
+      return created;
+    } finally {
+      setActionLoading(false);
+    }
+  }
+
+  async function test(connectionId: string): Promise<ConnectionTestResult> {
+    const slug = requireSlug();
+    setActionLoading(true);
+    try {
+      const result = await testWhatsAppConnection(slug, connectionId);
+      await mutate();
+      return result;
+    } finally {
+      setActionLoading(false);
+    }
+  }
+
+  return {
+    connection: data ?? null,
+    isLoading,
+    error: error ?? null,
+    actionLoading,
+    create,
+    test,
+    refresh: mutate,
+  };
+}

turbo-repo/apps/app/src/features/settings-admin/whatsapp/whatsapp-channel-card.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { Badge, Button, Spinner } from "flowbite-react";
+import { useState, type ReactNode } from "react";
+import { FaWhatsapp } from "react-icons/fa";
+import { toast } from "sonner";
+import type { I18nRecord } from "@/features/i18n/i18n.service.types";
+import { tr } from "@/features/i18n/tr.service";
+import { useOrgWhatsApp } from "./use-org-whatsapp";
+import { WhatsAppConnectionModal } from "./whatsapp-connection-modal";
+import type { IntegrationConnection, WhatsAppFormData } from "./whatsapp.types";
+
+interface WhatsAppChannelCardProps {
+  readonly orgSlug: string | null;
+  readonly dict: I18nRecord;
+}
+
+/**
+ * Settings card for the org's WhatsApp channel. When no connection exists it
+ * offers a Configure action (create); once configured it shows status + a live
+ * Test. Edit/delete are deferred (the backend has no update/delete yet).
+ */
+export default function WhatsAppChannelCard({
+  orgSlug,
+  dict,
+}: WhatsAppChannelCardProps) {
+  const waDict = (dict?.whatsappChannel as I18nRecord) ?? {};
+  const { connection, isLoading, error, actionLoading, create, test } =
+    useOrgWhatsApp(orgSlug);
+  const [showModal, setShowModal] = useState(false);
+  const [submitError, setSubmitError] = useState<Error | null>(null);
+
+  async function handleCreate(form: WhatsAppFormData) {
+    setSubmitError(null);
+    try {
+      await create(form);
+      setShowModal(false);
+      toast.success(tr("toast.created", waDict));
+    } catch (err) {
+      setSubmitError(
+        err instanceof Error ? err : new Error(tr("toast.error", waDict)),
+      );
+    }
+  }
+
+  async function handleTest() {
+    if (!connection) return;
+    try {
+      const result = await test(connection.id);
+      if (result.success) {
+        toast.success(result.message || tr("toast.testSuccess", waDict));
+      } else {
+        toast.error(result.message || tr("toast.testFailed", waDict));
+      }
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : tr("toast.error", waDict),
+      );
+    }
+  }
+
+  function renderBody(): ReactNode {
+    if (isLoading) {
+      return <Spinner size="sm" />;
+    }
+    if (error) {
+      return (
+        <p className="text-sm text-red-600 dark:text-red-400">
+          {tr("loadError", waDict)}
+        </p>
+      );
+    }
+    if (connection) {
+      return (
+        <ConfiguredRow
+          connection={connection}
+          dict={waDict}
+          testing={actionLoading}
+          onTest={handleTest}
+        />
+      );
+    }
+    return (
+      <Button
+        size="xs"
+        color="green"
+        onClick={() => setShowModal(true)}
+        disabled={!orgSlug}
+      >
+        {tr("configureButton", waDict)}
+      </Button>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-2">
+          <FaWhatsapp className="h-5 w-5 text-green-500" />
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {tr("title", waDict)}
+          </h3>
+        </div>
+        {connection && <StatusBadge status={connection.status} dict={waDict} />}
+      </div>
+
+      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        {tr("description", waDict)}
+      </p>
+
+      <div className="mt-3">{renderBody()}</div>
+
+      <WhatsAppConnectionModal
+        show={showModal}
+        onClose={() => setShowModal(false)}
+        onSubmit={handleCreate}
+        loading={actionLoading}
+        error={submitError}
+        dict={waDict}
+      />
+    </div>
+  );
+}
+
+interface ConfiguredRowProps {
+  readonly connection: IntegrationConnection;
+  readonly dict: I18nRecord;
+  readonly testing: boolean;
+  readonly onTest: () => void;
+}
+
+function ConfiguredRow({ connection, dict, testing, onTest }: ConfiguredRowProps) {
+  const rawPhone = connection.metadata?.phone_number_id;
+  const phone = typeof rawPhone === "string" ? rawPhone : "—";
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <div className="text-sm text-gray-700 dark:text-gray-300">
+        <span className="font-medium">{tr("phoneLabel", dict)}:</span> {phone}
+      </div>
+      <Button size="xs" color="light" disabled={testing} onClick={onTest}>
+        {testing ? <Spinner size="sm" /> : tr("testButton", dict)}
+      </Button>
+    </div>
+  );
+}
+
+interface StatusBadgeProps {
+  readonly status: IntegrationConnection["status"];
+  readonly dict: I18nRecord;
+}
+
+function StatusBadge({ status, dict }: StatusBadgeProps) {
+  const map: Record<
+    IntegrationConnection["status"],
+    { color: "success" | "gray" | "failure"; key: string }
+  > = {
+    ACTIVE: { color: "success", key: "status.active" },
+    DRAFT: { color: "gray", key: "status.draft" },
+    INACTIVE: { color: "gray", key: "status.inactive" },
+    TEST_FAILED: { color: "failure", key: "status.failed" },
+  };
+  const entry = map[status] ?? map.DRAFT;
+  return <Badge color={entry.color}>{tr(entry.key, dict)}</Badge>;
+}