@manta-eu/react 0.6.0 → 0.7.0

package/src/components/button/index.tsx

@@ -1,5 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { Loader2 } from "lucide-react";
+import { Children } from "react";
 import type { ComponentProps, ComponentPropsWithoutRef, ComponentType, ElementType, ReactNode, Ref } from "react";
 import { tv } from "tailwind-variants";
 import { cn, type ClassProp, type VariantPropsOf } from "#style";
@@ -8,6 +9,21 @@ function Loader(props: ComponentProps<typeof Loader2>) {
   return <Loader2 {...props} className={cn("size-4 animate-spin text-inherit", props.className)} />;
 }
 
+function isText(child: unknown): child is string | number {
+  return typeof child === "string" || typeof child === "number";
+}
+
+// Text needs an element around it, or the loading state's `[&>*]:invisible` leaves it under the spinner.
+export function wrapTextChildren(children: ReactNode): ReactNode[] {
+  const parts = Children.toArray(children);
+  return parts.flatMap<ReactNode>((child, index) => {
+    if (!isText(child)) return [child];
+    if (index > 0 && isText(parts[index - 1])) return [];
+    const end = parts.findIndex((part, at) => at > index && !isText(part));
+    return [<span key={`text-${index}`}>{parts.slice(index, end === -1 ? undefined : end).join("")}</span>];
+  });
+}
+
 export const buttonConfig = {
   base: [
     "inline-flex items-center justify-center text-center gap-1.5 transition-[color_150ms_ease,transform_100ms_ease-out] motion-reduce:transition-none",
@@ -165,7 +181,7 @@ export function Button(props: ButtonProps) {
       {LeftIconComponent && <LeftIconComponent />}
       {label && <span>{label}</span>}
       {RightIconComponent && <RightIconComponent />}
-      {children}
+      {wrapTextChildren(children)}
       {isLoading && (
         <span className="absolute inset-0 flex items-center justify-center" data-loader-wrapper aria-hidden="true">
           <Loader data-loader />

package/src/components/modal/index.tsx

@@ -48,16 +48,30 @@ export const DialogOverlay = forwardRef<
   );
 });
 
+export const dialogSizes = ["sm", "md", "lg", "xl", "2xl"] as const;
+
+export type DialogSize = (typeof dialogSizes)[number];
+
+const dialogSizeClasses: Record<DialogSize, string> = {
+  sm: "max-w-[440px]",
+  md: "max-w-[540px]",
+  lg: "max-w-[600px]",
+  xl: "max-w-[920px]",
+  "2xl": "max-w-[1240px]",
+};
+
 type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
   overlayClassName?: string;
   /** Below `sm`, fill the viewport as a sheet instead of floating as a centered card. */
   fullScreenOnMobile?: boolean;
+  /** Width preset; without one the dialog keeps its 700px default. */
+  size?: DialogSize;
 };
 
 export const DialogContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, DialogContentProps>(
   function DialogContent(
-    { className, children, showCloseButton = true, overlayClassName, fullScreenOnMobile = false, ...props },
+    { className, children, showCloseButton = true, overlayClassName, fullScreenOnMobile = false, size, ...props },
     ref,
   ) {
     return (
@@ -73,6 +87,7 @@ export const DialogContent = forwardRef<ComponentRef<typeof DialogPrimitive.Cont
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:pointer-events-none",
             "motion-reduce:animate-none",
+            size !== undefined && dialogSizeClasses[size],
             fullScreenOnMobile && [
               "max-sm:top-0! max-sm:left-0! max-sm:translate-x-0! max-sm:translate-y-0!",
               "max-sm:h-dvh! max-sm:max-h-dvh! max-sm:w-full! max-sm:max-w-none!",
@@ -88,7 +103,7 @@ export const DialogContent = forwardRef<ComponentRef<typeof DialogPrimitive.Cont
               data-slot="dialog-close"
               className={cn(
                 "ring-offset-card focus:ring-active-border/50 data-[state=open]:bg-accent",
-                "absolute top-4 right-4 rounded-sm-v4 opacity-70 data-[state=open]:text-muted-foreground",
+                "absolute top-4 right-4 rounded-sm-v4 opacity-70 text-muted-foreground",
                 "hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
                 "transition-opacity motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
               )}

package/src/components/sheet/index.tsx

@@ -64,22 +64,45 @@ export const sheetContentConfig = {
   } as const,
 };
 
+export const sheetSizes = ["sm", "md", "lg"] as const;
+
+export type SheetSize = (typeof sheetSizes)[number];
+
+const sheetSizeClasses: Record<SheetSize, string> = {
+  sm: "w-[420px] max-w-full",
+  md: "w-[480px] max-w-full",
+  lg: "w-[560px] max-w-full",
+};
+
 const sheetContentVariants = tv(sheetContentConfig);
 
-export type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
-  VariantPropsOf<typeof sheetContentConfig> & {
-    showClose?: boolean;
-  };
+export type SheetSide = NonNullable<VariantPropsOf<typeof sheetContentConfig>["side"]>;
+
+export type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+  showClose?: boolean;
+} & (
+    | {
+        side?: Extract<SheetSide, "left" | "right">;
+        /** Width preset; without one the sheet keeps its 400px default. */
+        size?: SheetSize;
+      }
+    | { side: Exclude<SheetSide, "left" | "right">; size?: never }
+  );
 
 export const SheetContent = React.forwardRef<React.ComponentRef<typeof DialogPrimitive.Content>, SheetContentProps>(
-  function SheetContent({ side = "right", className, children, showClose = true, ...props }, ref) {
+  function SheetContent({ side = "right", size, className, children, showClose = true, ...props }, ref) {
     return (
       <SheetPortal>
         <SheetOverlay />
         <DialogPrimitive.Content
           ref={ref}
           data-slot="sheet-content"
-          className={cn(sheetContentVariants({ side }), side === "center" ? "gap-6 p-8" : "gap-6 p-6", className)}
+          className={cn(
+            sheetContentVariants({ side }),
+            size !== undefined && sheetSizeClasses[size],
+            side === "center" ? "gap-6 p-8" : "gap-6 p-6",
+            className,
+          )}
           {...props}
         >
           {children}

package/src/components/table/index.tsx

@@ -4,7 +4,7 @@ import type { Cell, Column, ColumnDef, Row, SortingState, Table as TableInstance
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import type { ComponentProps, HTMLAttributes, KeyboardEvent, ReactNode, RefObject } from "react";
-import { useMemo, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import { match } from "ts-pattern";
 import { getCommonPinnedColumnStyles } from "./table-utils";
 import { Button } from "#components/button/index";
@@ -18,11 +18,26 @@ export { getCommonPinnedColumnStyles, getPinnedColumnInfo, type CombinedSortOpti
 export { useMaxTableRows } from "./use-max-table-rows";
 export { useTableState, type UseTableStateOptions } from "./use-table-state";
 
-export function Table({ className, ...props }: ComponentProps<"table">) {
+export type TableSize = "base" | "sm";
+
+const TableSizeContext = createContext<TableSize>("base");
+
+export type TableProps = ComponentProps<"table"> & {
+  size?: TableSize;
+};
+
+export function Table({ className, size = "base", ...props }: TableProps) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table data-slot="table" className={cn("w-full caption-bottom typography-small", className)} {...props} />
-    </div>
+    <TableSizeContext.Provider value={size}>
+      <div data-slot="table-container" className="relative w-full overflow-x-auto">
+        <table
+          data-slot="table"
+          data-size={size}
+          className={cn("w-full caption-bottom typography-small", className)}
+          {...props}
+        />
+      </div>
+    </TableSizeContext.Provider>
   );
 }
 
@@ -45,11 +60,13 @@ export function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
 }
 
 export function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  const size = useContext(TableSizeContext);
   return (
     <tr
       data-slot="table-row"
       className={cn(
         "bg-card hover:bg-muted data-[state=selected]:bg-muted border-b transition-colors text-default-foreground [&>td[data-is-pinned]]:bg-card [&>td[data-is-pinned]]:transition-colors [&>td[data-is-pinned]]:group-hover:bg-muted",
+        size === "sm" && "border-default-border",
         className,
       )}
       {...props}
@@ -58,11 +75,13 @@ export function TableRow({ className, ...props }: ComponentProps<"tr">) {
 }
 
 export function TableHead({ className, ...props }: ComponentProps<"th">) {
+  const size = useContext(TableSizeContext);
   return (
     <th
       data-slot="table-head"
       className={cn(
-        "bg-faint text-muted-foreground h-10 px-2 text-left align-middle typography-small-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] data-is-pinned:bg-faint",
+        "bg-faint text-muted-foreground h-10 px-2 text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] data-is-pinned:bg-faint",
+        size === "sm" ? "h-9 px-4 py-2.5 typography-tiny-medium whitespace-normal" : "typography-small-medium",
         className,
       )}
       {...props}
@@ -71,11 +90,13 @@ export function TableHead({ className, ...props }: ComponentProps<"th">) {
 }
 
 export function TableCell({ className, ...props }: ComponentProps<"td">) {
+  const size = useContext(TableSizeContext);
   return (
     <td
       data-slot="table-cell"
       className={cn(
         "px-4 not-first:px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        size === "sm" && "not-first:px-4 py-3 align-top text-[0.8125rem] leading-5 whitespace-normal break-words",
         className,
       )}
       {...props}
@@ -117,13 +138,14 @@ declare module "@tanstack/react-table" {
 
 export function CustomTableCell<TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) {
   const columnType = cell.column.columnDef.meta?.type;
+  const size = useContext(TableSizeContext);
 
   const pinningStyles = getCommonPinnedColumnStyles(cell.column);
 
   return (
     <TableCell
       className={cn(
-        "h-12",
+        size === "base" && "h-12",
         cell.column.columnDef.meta?.wide ? "max-w-none" : "max-w-56",
         cell.column.columnDef.meta?.className,
       )}
@@ -159,7 +181,7 @@ export function ColumnHeader<TData, TValue>({ column, children }: TColumnHeaderP
   const isSorted = column.getIsSorted();
 
   const className = cn(
-    "typography-caption-medium flex gap-0.5 text-muted-foreground items-center group/sort-header",
+    "flex gap-0.5 text-muted-foreground items-center group/sort-header",
     isNumberColumn && "justify-end",
     column.getCanSort() && "cursor-pointer",
   );
@@ -203,6 +225,7 @@ export type DataTableBaseProps<TData> = HTMLAttributes<HTMLDivElement> & {
   renderRow?: (row: Row<TData>) => ReactNode;
   rowClassName?: (row: Row<TData>) => string | undefined;
   isRowClickable?: (row: Row<TData>) => boolean;
+  size?: TableSize;
 };
 
 export type DataTableWithRowClick<TData> = DataTableBaseProps<TData> & {
@@ -258,6 +281,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     renderRow,
     rowClassName,
     isRowClickable,
+    size = "base",
     ...restProps
   } = props;
 
@@ -265,7 +289,9 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
 
   const hasClickHandler = !!onRowClick || !!rowHref;
 
-  const tableBodyRowClassName = cn("group border-muted-border bg-card py-2 px-4", hasClickHandler && "cursor-pointer");
+  const rowBorderClassName = size === "base" && "border-muted-border";
+
+  const tableBodyRowClassName = cn("group bg-card py-2 px-4", rowBorderClassName, hasClickHandler && "cursor-pointer");
 
   const handleRowClick = (row: Row<TData>) => {
     if (onRowClick) {
@@ -329,10 +355,10 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
 
   return (
     <div className={cn("grid gap-2.5", className)} {...restProps} ref={ref}>
-      <Table>
+      <Table size={size}>
         <TableHeader className={headerClassName}>
           {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="border-muted-border">
+            <TableRow key={headerGroup.id} className={cn(rowBorderClassName)}>
               {headerGroup.headers.map((header) => {
                 const headerContent = header.isPlaceholder
                   ? null
@@ -343,7 +369,10 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
                 return (
                   <TableHead
                     key={header.id}
-                    className={cn("h-13 px-4 not-first:px-3 py-2", header.column.columnDef.meta?.className)}
+                    className={cn(
+                      size === "base" && "h-13 px-4 not-first:px-3 py-2",
+                      header.column.columnDef.meta?.className,
+                    )}
                     data-is-pinned={header.column.getIsPinned() ? true : undefined}
                     style={pinningStyles}
                     ref={(thElement) => columnSizingHandler(thElement, table, header.column)}
@@ -390,6 +419,7 @@ export type SortableTableBaseProps<TRow> = {
   noResultsMessage?: string;
   className?: string;
   isLoading?: boolean;
+  size?: TableSize;
 };
 
 export type SortableTableProps<TRow> =

package/src/routes/integrations/components/connect-forms/MetaAdsConnectForm.tsx

@@ -3,8 +3,11 @@ import {
   GQLMetaSetupStateEnum,
   useConnectedAccountsQuery,
   useMetaSetupConnectMutation,
+  useMetaSetupIncludePagesMutation,
   useMetaSetupProgressQuery,
   type GQLMetaAdAccount,
+  type GQLMetaPage,
+  type GQLMetaSetupProgress,
 } from "@manta-eu/client";
 import { parseError } from "@manta-eu/client/shared/error-utils";
 import { isPresent } from "@manta-eu/lib/present";
@@ -15,6 +18,7 @@ import { toast } from "sonner";
 import { match } from "ts-pattern";
 import { ConnectFormHeader } from "./ConnectFormHeader";
 import { ImportStartedNotice } from "./ImportStartedNotice";
+import { metaPageTreeItems, picksAPage } from "./meta-page-tree";
 import { OAuthConnectLink } from "./OAuthConnectLink";
 import { unavailableReasonLabel } from "./setup-account-unavailable-reason";
 import type { ConnectFormProps, ImportNotice } from "./types";
@@ -24,12 +28,22 @@ import { Banner } from "#components/banner/index";
 import { Button } from "#components/button/index";
 import { Loader } from "#components/loader/index";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { TreeMultiSelect } from "#components/tree-multi-select/index";
 import { cn } from "#lib/utils";
 import { useMantaClient } from "#providers/index";
 
 const pollIntervalMs = 3000;
 
-type Phase = "idle" | "awaitingOAuth" | "loadingAccounts" | "pickingAccount" | "submitting" | "done" | "failed";
+type Phase =
+  | "idle"
+  | "awaitingOAuth"
+  | "loadingAccounts"
+  | "pickingAccount"
+  | "loadingPages"
+  | "pickingPages"
+  | "submitting"
+  | "done"
+  | "failed";
 
 type DerivePhaseInput = {
   states: GQLMetaSetupStateEnum[] | undefined;
@@ -42,6 +56,8 @@ const statePriority: readonly GQLMetaSetupStateEnum[] = [
   GQLMetaSetupStateEnum.FatallyFailed,
   GQLMetaSetupStateEnum.TimedOut,
   GQLMetaSetupStateEnum.ConnectingAccounts,
+  GQLMetaSetupStateEnum.SelectingPages,
+  GQLMetaSetupStateEnum.FetchingPages,
   GQLMetaSetupStateEnum.SelectingAccounts,
   GQLMetaSetupStateEnum.FetchingAccounts,
   GQLMetaSetupStateEnum.Setup,
@@ -53,7 +69,14 @@ const terminalStates: readonly GQLMetaSetupStateEnum[] = [
   GQLMetaSetupStateEnum.TimedOut,
 ];
 
-const activePhases: readonly Phase[] = ["awaitingOAuth", "loadingAccounts", "pickingAccount", "submitting"];
+const activePhases: readonly Phase[] = [
+  "awaitingOAuth",
+  "loadingAccounts",
+  "pickingAccount",
+  "loadingPages",
+  "pickingPages",
+  "submitting",
+];
 
 export function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }: DerivePhaseInput): Phase {
   const defaultPhase: Phase = hasStartedOAuth ? "awaitingOAuth" : "idle";
@@ -64,6 +87,8 @@ export function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }: Der
     .with(GQLMetaSetupStateEnum.Finished, () => "done")
     .with(GQLMetaSetupStateEnum.FatallyFailed, GQLMetaSetupStateEnum.TimedOut, () => "failed")
     .with(GQLMetaSetupStateEnum.ConnectingAccounts, () => "submitting")
+    .with(GQLMetaSetupStateEnum.SelectingPages, () => "pickingPages")
+    .with(GQLMetaSetupStateEnum.FetchingPages, () => "loadingPages")
     .with(GQLMetaSetupStateEnum.SelectingAccounts, () => "pickingAccount")
     .with(GQLMetaSetupStateEnum.FetchingAccounts, GQLMetaSetupStateEnum.Setup, () => "loadingAccounts")
     .otherwise(() => defaultPhase);
@@ -114,11 +139,20 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
   const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
   const [selectedAccountId, setSelectedAccountId] = useState<string>("");
+  const [selectedPageIds, setSelectedPageIds] = useState<ReadonlySet<string>>(new Set());
   const hasDismissedRef = useRef(false);
 
   const progressQuery = useMetaSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
   const progress = progressQuery.data?.metaSetupProgress;
-  const phase = derivePhase({ states: progress?.state, hasStartedOAuth, hasSeenActiveState });
+  const connectMutation = useMetaSetupConnectMutation(mantaClient);
+  const includePagesMutation = useMetaSetupIncludePagesMutation(mantaClient);
+  // Progress reads the old step until a mutation's step has run, so a pending one shows where it is heading.
+  const phase = connectMutation.isPending
+    ? "loadingPages"
+    : includePagesMutation.isPending
+      ? "submitting"
+      : derivePhase({ states: progress?.state, hasStartedOAuth, hasSeenActiveState });
+  const pages = progress?.pages ?? [];
 
   useWindowFocusPoll(progressQuery.refetch, { enabled: activePhases.includes(phase), intervalMs: pollIntervalMs });
 
@@ -139,8 +173,6 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   );
   const reconnectableExternalIds = useReconnectableExternalIds(GQLIntegration.Meta);
 
-  const connectMutation = useMetaSetupConnectMutation(mantaClient);
-
   useEffect(() => {
     if (phase !== "done" || hasDismissedRef.current) return;
     hasDismissedRef.current = true;
@@ -149,10 +181,12 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
     if (!importNotice) onDismiss();
   }, [phase, onChanged, onDismiss, importNotice]);
 
+  function setProgress(metaSetupProgress: GQLMetaSetupProgress) {
+    queryClient.setQueryData(useMetaSetupProgressQuery.getKey(), { metaSetupProgress });
+  }
+
   function resetProgressCache() {
-    queryClient.setQueryData(useMetaSetupProgressQuery.getKey(), {
-      metaSetupProgress: { state: [], accounts: null, lastError: null },
-    });
+    setProgress({ state: [], accounts: null, pages: null, lastError: null });
   }
 
   function handleOpened() {
@@ -164,16 +198,34 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   async function handleSubmit() {
     if (!selectedAccountId) return;
     try {
-      await connectMutation.mutateAsync({ accountIds: [selectedAccountId] });
-      await progressQuery.refetch();
+      setProgress((await connectMutation.mutateAsync({ accountIds: [selectedAccountId] })).metaSetupConnect);
     } catch (err) {
       const info = parseError(err, "Failed to connect Meta");
       toast.error(info.message, { description: info.description });
     }
   }
 
+  async function handleIncludePages() {
+    try {
+      setProgress((await includePagesMutation.mutateAsync({ pageIds: [...selectedPageIds] })).metaSetupIncludePages);
+    } catch (err) {
+      const info = parseError(err, "Failed to connect Meta");
+      toast.error(info.message, { description: info.description });
+    }
+  }
+
+  function togglePage(id: string, checked: boolean) {
+    setSelectedPageIds((current) => {
+      const next = new Set(current);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+
   function handleRetry() {
     setSelectedAccountId("");
+    setSelectedPageIds(new Set());
     hasDismissedRef.current = false;
     resetProgressCache();
     setHasStartedOAuth(false);
@@ -198,6 +250,10 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
               onSelect={setSelectedAccountId}
             />
           ))
+          .with("loadingPages", () => <LoadingPagesView />)
+          .with("pickingPages", () => (
+            <PickingPagesView pages={pages} selectedIds={selectedPageIds} onToggle={togglePage} />
+          ))
           .with("submitting", () => <SubmittingView />)
           .with("done", () => <DoneView providerName={provider.name} importNotice={importNotice} />)
           .with("failed", () => (
@@ -220,12 +276,16 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
           <OAuthConnectLink href="/oauth/meta/start" label="Continue with Meta" onOpened={handleOpened} />
         )}
         {phase === "pickingAccount" && (
+          <Button onClick={() => void handleSubmit()} disabled={!selectedAccountId}>
+            Continue
+          </Button>
+        )}
+        {phase === "pickingPages" && (
           <Button
-            onClick={() => void handleSubmit()}
-            disabled={!selectedAccountId}
-            isLoading={connectMutation.isPending}
+            onClick={() => void handleIncludePages()}
+            disabled={isPresent(pages) && !picksAPage(pages, selectedPageIds)}
           >
-            Connect account
+            {isPresent(pages) ? "Connect" : "Connect without a Page"}
           </Button>
         )}
         {phase === "done" && importNotice && <Button onClick={onDismiss}>Done</Button>}
@@ -348,12 +408,68 @@ function PickingAccountView(props: PickingAccountViewProps) {
   );
 }
 
+function LoadingPagesView() {
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-1">
+        <h2 className="typography-large-body-semibold text-default-foreground">Loading your Facebook Pages</h2>
+        <p className="typography-caption text-muted-foreground">
+          The Pages this ad account can advertise as, and their Instagram accounts.
+        </p>
+      </div>
+      <div
+        className="flex items-center gap-2 text-muted-foreground typography-caption"
+        role="status"
+        aria-live="polite"
+      >
+        <Loader className="size-4" aria-hidden /> Fetching Pages…
+      </div>
+    </div>
+  );
+}
+
+type PickingPagesViewProps = {
+  pages: GQLMetaPage[];
+  selectedIds: ReadonlySet<string>;
+  onToggle: (id: string, checked: boolean) => void;
+};
+
+function PickingPagesView(props: PickingPagesViewProps) {
+  const { pages, selectedIds, onToggle } = props;
+
+  if (!isPresent(pages)) {
+    return (
+      <Banner
+        type="warning"
+        label="This ad account can't advertise as any Facebook Page yet. Connect it anyway, and add a Page to it in Meta Business Suite before you run ads."
+      />
+    );
+  }
+
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-1">
+        <h2 className="typography-large-body-semibold text-default-foreground">Pick the Facebook Pages to use</h2>
+        <p className="typography-caption text-muted-foreground">
+          Manta runs ads only as the Pages and Instagram accounts you pick. Pick at least one Page.
+        </p>
+      </div>
+      <TreeMultiSelect
+        items={metaPageTreeItems(pages)}
+        selectedIds={selectedIds}
+        onToggle={onToggle}
+        searchPlaceholder="Search Pages..."
+      />
+    </div>
+  );
+}
+
 function SubmittingView() {
   return (
     <div className="grid gap-4">
       <div className="grid gap-1">
         <h2 className="typography-large-body-semibold text-default-foreground">Connecting your account</h2>
-        <p className="typography-caption text-muted-foreground">Hold tight — this usually takes a few seconds.</p>
+        <p className="typography-caption text-muted-foreground">This can take a minute. Keep this window open.</p>
       </div>
       <div
         className="flex items-center gap-2 text-muted-foreground typography-caption"

package/src/routes/integrations/components/connect-forms/OAuthSetupConnectForm.tsx

@@ -85,11 +85,12 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
   const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
   const hasDismissedRef = useRef(false);
   const [connectionExpired, setConnectionExpired] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   const states = setup.progress?.state;
   const phase = connectionExpired
     ? "failed"
-    : derivePhase({ states, hasStartedOAuth, hasSeenActiveState, resumesUnfinishedSetup });
+    : derivePhase({ states, hasStartedOAuth, hasSeenActiveState, resumesUnfinishedSetup, submitted });
 
   useWindowFocusPoll(setup.refetchProgress, { enabled: activePhases.includes(phase), intervalMs: pollIntervalMs });
 
@@ -114,6 +115,7 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 
   function handleOpened() {
     setConnectionExpired(false);
+    setSubmitted(false);
     setSelectedIds(new Set());
     setup.resetProgress();
     setHasSeenActiveState(false);
@@ -131,21 +133,25 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 
   async function handleSubmit() {
     if (selectedIds.size === 0) return;
+    setSubmitted(true);
     try {
       const result = await setup.connect([...selectedIds]);
       if (result.state.includes(GQLGoogleSetupStateEnum.NotFound)) {
+        setSubmitted(false);
         setConnectionExpired(true);
         setSelectedIds(new Set());
         return;
       }
       await setup.refetchProgress();
     } catch (err) {
+      setSubmitted(false);
       const info = parseError(err, `Failed to connect ${providerName}`);
       toast.error(info.message, { description: info.description });
     }
   }
 
   function handleRetry() {
+    setSubmitted(false);
     setSelectedIds(new Set());
     hasDismissedRef.current = false;
     setup.resetProgress();
@@ -343,7 +349,7 @@ function SubmittingView(props: CopyProps) {
     <div className="grid gap-4">
       <div className="grid gap-1">
         <h2 className="typography-large-body-semibold text-default-foreground">Connecting your {copy.entityPlural}</h2>
-        <p className="typography-caption text-muted-foreground">Hold tight — this usually takes a few seconds.</p>
+        <p className="typography-caption text-muted-foreground">This can take a minute. Keep this window open.</p>
       </div>
       <StatusLine label="Provisioning…" />
     </div>

package/src/routes/integrations/components/connect-forms/meta-page-tree.ts

@@ -0,0 +1,17 @@
+import { GQLMetaPageKind, type GQLMetaPage } from "@manta-eu/client";
+import { buildTreeRows, type TreeSelectItem } from "#components/tree-multi-select/index";
+
+// Each Instagram account sits under the Page it is linked to, and is picked on its own.
+export function metaPageTreeItems(pages: readonly GQLMetaPage[]): TreeSelectItem[] {
+  return buildTreeRows(pages).map(({ node, depth }) => ({
+    id: node.id,
+    label: node.name ?? (node.kind === GQLMetaPageKind.Instagram ? `Instagram account ${node.id}` : node.id),
+    caption: node.kind === GQLMetaPageKind.Instagram ? "Instagram" : undefined,
+    selectable: true,
+    depth,
+  }));
+}
+
+export function picksAPage(pages: readonly GQLMetaPage[], selectedIds: ReadonlySet<string>): boolean {
+  return pages.some((page) => page.kind === GQLMetaPageKind.Page && selectedIds.has(page.id));
+}

package/src/routes/integrations/components/connect-forms/oauth-setup-phase.ts

@@ -9,6 +9,8 @@ export type DerivePhaseInput = {
   hasSeenActiveState: boolean;
   // Off when the account is connected before its picker, so a leftover setup cannot stand in for a new sign-in.
   resumesUnfinishedSetup?: boolean;
+  // Connect was sent: progress reads the old state until the connect has run, so only an outcome ends it.
+  submitted?: boolean;
 };
 
 const statePriority: readonly GQLGoogleSetupStateEnum[] = [
@@ -34,10 +36,14 @@ export function derivePhase({
   hasStartedOAuth,
   hasSeenActiveState,
   resumesUnfinishedSetup = true,
+  submitted = false,
 }: DerivePhaseInput): Phase {
   const defaultPhase: Phase = hasStartedOAuth ? "awaitingOAuth" : "idle";
   if (!hasStartedOAuth && !resumesUnfinishedSetup) return defaultPhase;
   const dominant = statePriority.find((state) => states?.includes(state));
+  const settled =
+    states?.includes(GQLGoogleSetupStateEnum.NotFound) || (dominant !== undefined && terminalStates.includes(dominant));
+  if (submitted && !settled) return "submitting";
   if (dominant && terminalStates.includes(dominant) && !hasSeenActiveState) return defaultPhase;
   return match(dominant)
     .returnType<Phase>()