Navegación

Los plugins soportan dos tipos distintos de navegación: enrutar entre tus propias páginas y dirigir el shell del admin hacia una sección diferente de la interfaz de gestión de la tienda.

Enrutamiento Interno de Páginas

Los plugins no usan un router del lado del cliente como React Router. El admin de Whatalo controla qué página está activa actualizando el valor currentPage en el contexto del bridge. Tu plugin lee ese valor y renderiza la vista correspondiente.

import { useAppBridge } from "@whatalo/plugin-sdk/bridge";
import { DashboardPage } from "./pages/dashboard";
import { SettingsPage } from "./pages/settings";

function App() {
  const { currentPage } = useAppBridge();

  switch (currentPage) {
    case "settings":
      return <SettingsPage />;
    case "dashboard":
    default:
      return <DashboardPage />;
  }
}

currentPage siempre coincide con el campo path que registraste en adminUI.pages dentro del manifiesto. Cuando el usuario hace clic en una entrada de página diferente en el panel lateral del admin, el host envía un mensaje whatalo:context actualizado y currentPage cambia, disparando un re-renderizado.

Definir Páginas en el Manifiesto

adminUI: {
  pages: [
    { path: "dashboard", title: "Dashboard", icon: "puzzle", position: "sidebar" },
    { path: "settings", title: "Configuración", icon: "settings", position: "sidebar" },
  ],
},

La primera página en el array es la predeterminada — se carga cuando el comerciante abre tu plugin por primera vez o hace clic en el nombre del plugin en el panel lateral.

Navegar el Shell del Admin

Para dirigir al comerciante a una página en el admin de Whatalo (fuera de tu plugin), usa bridge.navigate():

import { useAppBridge } from "@whatalo/plugin-sdk/bridge";

function EnlacePedido({ orderId }: { orderId: string }) {
  const bridge = useAppBridge();

  return (
    <button onClick={() => bridge.navigate(`/store/ABC123/orders/${orderId}`)}>
      Ver Pedido en Admin
    </button>
  );
}

Rutas Permitidas

Solo se aceptan rutas que comiencen con /store/ o /admin/. Cualquier otra ruta es rechazada y la promesa devuelta resuelve con { success: false, error: "invalid_path" }.

// Permitidas
bridge.navigate("/store/ABC123/orders");
bridge.navigate("/store/ABC123/products");

// Rechazadas
bridge.navigate("/");
bridge.navigate("https://externo.com");

Valor de Retorno

bridge.navigate() devuelve un Promise<ActionAck>:

const ack = await bridge.navigate("/store/ABC123/orders");

if (!ack.success) {
  console.error("Navegación fallida:", ack.error);
}