@manta-eu/react 0.1.7 → 0.1.9

package/dist/routes/integrations/components/connect-forms/OAuthConnectLink.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { withDatastoreQueryParam } from "@manta-eu/client/shared/datastore-path";
+import { Link } from "#components/button/index";
+import { useMantaClient } from "#providers/index";
+const middleMouseButton = 1;
+// Query param, not /d/<id> in the path: the provider's callback URL is fixed, and a prefixed
+// start route isn't reliably reachable past the SW (vite.config.ts).
+// useMantaClient(), not useActiveDatastore(): also covers an explicit datastoreId prop (embedded usage).
+export function OAuthConnectLink(props) {
+    const { href, label, onOpened, variant = "primary" } = props;
+    const { datastoreId } = useMantaClient();
+    const scopedHref = withDatastoreQueryParam(href, datastoreId);
+    return (_jsx(Link, { href: scopedHref, variant: variant, onClick: onOpened, onAuxClick: (event) => {
+            if (event.button === middleMouseButton)
+                onOpened();
+        }, children: label }));
+}

package/dist/routes/integrations/components/connect-forms/OAuthSetupConnectForm.d.ts

@@ -0,0 +1,45 @@
+import { GQLGoogleSetupStateEnum, type GQLIntegration } from "@manta-eu/client";
+import type { ConnectFormProps } from "./types.js";
+import { type TreeMultiSelectProps, type TreeSelectItem } from "#components/tree-multi-select/index";
+export type SetupRow = {
+    id: string;
+};
+export type SetupProgress<Row extends SetupRow> = {
+    state: GQLGoogleSetupStateEnum[];
+    rows?: Row[] | null;
+    lastError?: {
+        title?: string | null;
+        message: string;
+    } | null;
+};
+export type OAuthSetup<Row extends SetupRow> = {
+    progress?: SetupProgress<Row>;
+    refetchProgress: () => unknown;
+    resetProgress: () => void;
+    connect: (ids: string[]) => Promise<unknown>;
+    isConnecting: boolean;
+};
+export type SetupTreeOptions = Pick<TreeMultiSelectProps, "defaultCollapsed" | "includeDescendants">;
+export type SetupCopy = {
+    providerName: string;
+    identityProviderName: string;
+    entitySingular: string;
+    entityPlural: string;
+    signInDescription: string;
+    pickTitle: string;
+    pickDescription: string;
+    noEntitiesLabel: string;
+    noneConnectableLabel: string;
+    retryGuidance?: string;
+};
+export type OAuthSetupConnectFormProps<Row extends SetupRow> = ConnectFormProps & {
+    integration: GQLIntegration;
+    oauthStartPath: string;
+    copy: SetupCopy;
+    setup: OAuthSetup<Row>;
+    treeItems: (rows: Row[], alreadyConnectedExternalIds: ReadonlySet<string>, reconnectableExternalIds: ReadonlySet<string>) => TreeSelectItem[];
+    treeOptions?: SetupTreeOptions;
+    resumesUnfinishedSetup?: boolean;
+};
+export declare function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupConnectFormProps<Row>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OAuthSetupConnectForm.d.ts.map

package/dist/routes/integrations/components/connect-forms/OAuthSetupConnectForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OAuthSetupConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/OAuthSetupConnectForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWhF,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,SAAS,CAAC;AAM9D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKtH,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,MAAM,MAAM,aAAa,CAAC,GAAG,SAAS,QAAQ,IAAI;IAChD,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC/D,CAAC;AAGF,MAAM,MAAM,UAAU,CAAC,GAAG,SAAS,QAAQ,IAAI;IAC7C,QAAQ,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9B,eAAe,EAAE,MAAM,OAAO,CAAC;IAC/B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7C,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,kBAAkB,GAAG,oBAAoB,CAAC,CAAC;AAGrG,MAAM,MAAM,SAAS,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAE7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,QAAQ,IAAI,gBAAgB,GAAG;IAChF,WAAW,EAAE,cAAc,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IACvB,SAAS,EAAE,CACT,IAAI,EAAE,GAAG,EAAE,EACX,2BAA2B,EAAE,WAAW,CAAC,MAAM,CAAC,EAChD,wBAAwB,EAAE,WAAW,CAAC,MAAM,CAAC,KAC1C,cAAc,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,SAAS,QAAQ,EAAE,KAAK,EAAE,0BAA0B,CAAC,GAAG,CAAC,2CAmHjG"}

package/dist/routes/integrations/components/connect-forms/OAuthSetupConnectForm.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GQLGoogleSetupStateEnum } from "@manta-eu/client";
+import { parseError } from "@manta-eu/client/shared/error-utils";
+import { isPresent } from "@manta-eu/lib/present";
+import { ArrowLeft } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { match } from "ts-pattern";
+import { ConnectFormHeader } from "./ConnectFormHeader.js";
+import { ImportStartedNotice } from "./ImportStartedNotice.js";
+import { activePhases, derivePhase, terminalStates } from "./oauth-setup-phase.js";
+import { OAuthConnectLink } from "./OAuthConnectLink.js";
+import { useConnectedExternalIds, useReconnectableExternalIds } from "./useConnectedExternalIds.js";
+import { useWindowFocusPoll } from "./useWindowFocusPoll.js";
+import { Banner } from "#components/banner/index";
+import { Button } from "#components/button/index";
+import { Loader } from "#components/loader/index";
+import { TreeMultiSelect } from "#components/tree-multi-select/index";
+import { cn } from "#lib/utils";
+const pollIntervalMs = 3000;
+export function OAuthSetupConnectForm(props) {
+    const { onBack, onChanged, onDismiss, provider, resumedFromOAuth = false, importNotice } = props;
+    const { integration, oauthStartPath, copy, setup, treeItems, treeOptions, resumesUnfinishedSetup } = props;
+    const { providerName } = copy;
+    const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
+    const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const hasDismissedRef = useRef(false);
+    const states = setup.progress?.state;
+    const phase = derivePhase({ states, hasStartedOAuth, hasSeenActiveState, resumesUnfinishedSetup });
+    useWindowFocusPoll(setup.refetchProgress, { enabled: activePhases.includes(phase), intervalMs: pollIntervalMs });
+    const alreadyConnectedExternalIds = useConnectedExternalIds(integration);
+    const reconnectableExternalIds = useReconnectableExternalIds(integration);
+    useEffect(() => {
+        if (!isPresent(states))
+            return;
+        const isActive = states.some((state) => !terminalStates.includes(state) && state !== GQLGoogleSetupStateEnum.NotFound);
+        if (isActive)
+            setHasSeenActiveState(true);
+    }, [states]);
+    useEffect(() => {
+        if (phase !== "done" || hasDismissedRef.current)
+            return;
+        hasDismissedRef.current = true;
+        toast.success(`${providerName} connected`);
+        onChanged();
+        if (!importNotice)
+            onDismiss();
+    }, [phase, onChanged, onDismiss, providerName, importNotice]);
+    function handleOpened() {
+        setup.resetProgress();
+        setHasSeenActiveState(false);
+        setHasStartedOAuth(true);
+    }
+    function toggleId(id, checked) {
+        setSelectedIds((current) => {
+            const next = new Set(current);
+            if (checked)
+                next.add(id);
+            else
+                next.delete(id);
+            return next;
+        });
+    }
+    async function handleSubmit() {
+        if (selectedIds.size === 0)
+            return;
+        try {
+            await setup.connect([...selectedIds]);
+            await setup.refetchProgress();
+        }
+        catch (err) {
+            const info = parseError(err, `Failed to connect ${providerName}`);
+            toast.error(info.message, { description: info.description });
+        }
+    }
+    function handleRetry() {
+        setSelectedIds(new Set());
+        hasDismissedRef.current = false;
+        setup.resetProgress();
+        setHasStartedOAuth(false);
+        setHasSeenActiveState(false);
+    }
+    return (_jsxs("div", { className: "grid gap-6", children: [_jsx(ConnectFormHeader, { provider: provider, status: phase === "done" ? "Connected" : "Not connected" }), _jsx("div", { className: "min-h-40", children: match(phase)
+                    .with("idle", () => _jsx(IdleView, { copy: copy, oauthStartPath: oauthStartPath, onOpened: handleOpened }))
+                    .with("awaitingOAuth", () => _jsx(AwaitingOAuthView, { copy: copy }))
+                    .with("loadingAccounts", () => _jsx(LoadingEntitiesView, { copy: copy }))
+                    .with("pickingAccount", () => (_jsx(PickingEntityView, { copy: copy, items: treeItems(setup.progress?.rows ?? [], alreadyConnectedExternalIds, reconnectableExternalIds), selectedIds: selectedIds, onToggle: toggleId, treeOptions: treeOptions })))
+                    .with("submitting", () => _jsx(SubmittingView, { copy: copy }))
+                    .with("done", () => _jsx(DoneView, { copy: copy, importNotice: importNotice }))
+                    .with("failed", () => (_jsx(FailedView, { copy: copy, title: setup.progress?.lastError?.title, message: setup.progress?.lastError?.message, onRetry: handleRetry })))
+                    .exhaustive() }), _jsxs("div", { className: cn("flex items-center pt-2", phase === "done" ? "justify-end" : "justify-between"), children: [phase !== "done" && (_jsx(Button, { variant: "tertiary", onClick: onBack, icon: ArrowLeft, children: "Back" })), phase === "pickingAccount" && (_jsx(Button, { onClick: () => void handleSubmit(), disabled: selectedIds.size === 0, isLoading: setup.isConnecting, children: selectedIds.size > 1
+                            ? `Connect ${selectedIds.size} ${copy.entityPlural}`
+                            : `Connect ${copy.entitySingular}` })), phase === "done" && importNotice && _jsx(Button, { onClick: onDismiss, children: "Done" })] })] }));
+}
+function IdleView(props) {
+    const { copy, oauthStartPath, onOpened } = props;
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsxs("h2", { className: "typography-large-body-semibold text-default-foreground", children: ["Sign in with ", copy.identityProviderName] }), _jsx("p", { className: "typography-caption text-muted-foreground", children: copy.signInDescription })] }), _jsx(OAuthConnectLink, { href: oauthStartPath, label: `Continue with ${copy.identityProviderName}`, onOpened: onOpened })] }));
+}
+function AwaitingOAuthView(props) {
+    const { copy } = props;
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsxs("h2", { className: "typography-large-body-semibold text-default-foreground", children: ["Waiting for ", copy.identityProviderName, " sign-in"] }), _jsxs("p", { className: "typography-caption text-muted-foreground", children: ["Finish signing in to ", copy.identityProviderName, ". We'll pick it up automatically when you come back."] })] }), _jsx(StatusLine, { label: "Listening for the connection\u2026" })] }));
+}
+function LoadingEntitiesView(props) {
+    const { copy } = props;
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsxs("h2", { className: "typography-large-body-semibold text-default-foreground", children: ["Loading your ", copy.providerName, " ", copy.entityPlural] }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "This usually takes a few seconds." })] }), _jsx(StatusLine, { label: `Fetching ${copy.entityPlural}…` })] }));
+}
+function PickingEntityView(props) {
+    const { copy, items, selectedIds, onToggle, treeOptions } = props;
+    if (!isPresent(items)) {
+        return _jsx(Banner, { type: "warning", label: copy.noEntitiesLabel });
+    }
+    const selectableCount = items.filter((item) => item.selectable && item.disabled !== true).length;
+    if (selectableCount === 0) {
+        return _jsx(Banner, { type: "info", label: copy.noneConnectableLabel });
+    }
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsx("h2", { className: "typography-large-body-semibold text-default-foreground", children: copy.pickTitle }), _jsx("p", { className: "typography-caption text-muted-foreground", children: copy.pickDescription })] }), _jsx(TreeMultiSelect, { items: items, selectedIds: selectedIds, onToggle: onToggle, searchPlaceholder: `Search ${copy.entityPlural}...`, ...treeOptions })] }));
+}
+function SubmittingView(props) {
+    const { copy } = props;
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsxs("h2", { className: "typography-large-body-semibold text-default-foreground", children: ["Connecting your ", copy.entityPlural] }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "Hold tight \u2014 this usually takes a few seconds." })] }), _jsx(StatusLine, { label: "Provisioning\u2026" })] }));
+}
+function DoneView(props) {
+    const { copy, importNotice } = props;
+    if (importNotice)
+        return _jsx(ImportStartedNotice, { providerName: copy.providerName, notice: importNotice });
+    return (_jsxs("div", { className: "grid gap-1", children: [_jsxs("h2", { className: "typography-large-body-semibold text-default-foreground", children: [copy.providerName, " connected"] }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "Closing this dialog\u2026" })] }));
+}
+function FailedView(props) {
+    const { copy, title, message, onRetry } = props;
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsx(Banner, { type: "error", size: "loose", label: title ?? `${copy.providerName} connection failed`, description: message ?? undefined }), isPresent(copy.retryGuidance) ? (_jsx("p", { className: "typography-caption text-muted-foreground", children: copy.retryGuidance })) : (_jsx(Button, { onClick: onRetry, children: "Try again" }))] }));
+}
+function StatusLine(props) {
+    const { label } = props;
+    return (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground typography-caption", role: "status", "aria-live": "polite", children: [_jsx(Loader, { className: "size-4", "aria-hidden": true }), " ", label] }));
+}

package/dist/routes/integrations/components/connect-forms/OAuthSingleAccountConnectForm.d.ts

@@ -0,0 +1,23 @@
+import { type GQLIntegration } from "@manta-eu/client";
+import type { ReactNode } from "react";
+import type { ConnectFormProps } from "./types.js";
+export type ConnectSuccessStep = {
+    title: string;
+    description: string;
+    content: ReactNode;
+};
+export type OAuthSingleAccountConnectFormProps = ConnectFormProps & {
+    integration: GQLIntegration;
+    startHref: string;
+    ctaLabel: string;
+    stepTitle: string;
+    stepDescription: string;
+    supportingInfo: string;
+    permissions: string[];
+    waitingLabel: string;
+    connectedToastLabel: string;
+    successStep?: ConnectSuccessStep;
+    precedingSteps?: number;
+};
+export declare function OAuthSingleAccountConnectForm(props: OAuthSingleAccountConnectFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OAuthSingleAccountConnectForm.d.ts.map

package/dist/routes/integrations/components/connect-forms/OAuthSingleAccountConnectForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OAuthSingleAccountConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/OAuthSingleAccountConnectForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6D,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,gBAAgB,GAAG;IAClE,WAAW,EAAE,cAAc,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAQF,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,kCAAkC,2CA2ItF"}

package/dist/routes/integrations/components/connect-forms/OAuthSingleAccountConnectForm.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConnectedAccountsQuery } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { InfoIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { ConnectWizardShell } from "./ConnectWizardShell.js";
+import { importStartedSuccessStep } from "./ImportStartedNotice.js";
+import { OAuthConnectLink } from "./OAuthConnectLink.js";
+import { useWindowFocusPoll } from "./useWindowFocusPoll.js";
+import { Button } from "#components/button/index";
+import { useMantaClient } from "#providers/index";
+function connectedExternalIds(data, integration) {
+    return (data?.connectedAccounts ?? [])
+        .filter((account) => account.integration === integration)
+        .map((account) => account.externalId);
+}
+export function OAuthSingleAccountConnectForm(props) {
+    const { onBack, onChanged, onDismiss, provider, integration, startHref, ctaLabel, stepTitle, stepDescription, supportingInfo, permissions, waitingLabel, connectedToastLabel, successStep: explicitSuccessStep, importNotice, resumedFromOAuth = false, precedingSteps = 0, } = props;
+    const successStep = explicitSuccessStep ?? (importNotice ? importStartedSuccessStep(provider.name, importNotice) : undefined);
+    const { mantaClient } = useMantaClient();
+    const hasSuccessStep = successStep !== undefined;
+    const totalSteps = precedingSteps + (hasSuccessStep ? 2 : 1);
+    const [waiting, setWaiting] = useState(resumedFromOAuth && hasSuccessStep);
+    const [connected, setConnected] = useState(false);
+    const knownExternalIds = useRef(new Set());
+    const settled = useRef(false);
+    const { data, error, refetch } = useConnectedAccountsQuery(mantaClient, undefined, { enabled: false });
+    useEffect(() => {
+        void refetch();
+    }, [refetch]);
+    useWindowFocusPoll(refetch, { enabled: waiting });
+    useEffect(() => {
+        if (!waiting || settled.current)
+            return;
+        const connected = connectedExternalIds(data, integration).some((id) => !knownExternalIds.current.has(id));
+        if (!connected)
+            return;
+        settled.current = true;
+        setWaiting(false);
+        toast.success(connectedToastLabel);
+        onChanged();
+        if (hasSuccessStep) {
+            setConnected(true);
+        }
+        else {
+            onDismiss();
+        }
+    }, [waiting, data, integration, connectedToastLabel, onChanged, onDismiss, hasSuccessStep]);
+    function handleOpened() {
+        knownExternalIds.current = new Set(connectedExternalIds(data, integration));
+        setWaiting(true);
+    }
+    const accountConnected = isPresent(connectedExternalIds(data, integration));
+    const resumeUnanswered = resumedFromOAuth && hasSuccessStep && data === undefined && !isPresent(error);
+    if (successStep && (connected || (resumedFromOAuth && accountConnected))) {
+        return (_jsx(ConnectWizardShell, { provider: provider, status: "Connected", totalSteps: totalSteps, currentStep: precedingSteps + 2, stepTitle: successStep.title, stepDescription: successStep.description, primaryAction: _jsx(Button, { variant: "secondary", onClick: onDismiss, children: "Done" }), children: successStep.content }));
+    }
+    if (successStep && resumeUnanswered) {
+        return (_jsx(ConnectWizardShell, { provider: provider, status: "Checking", totalSteps: totalSteps, currentStep: precedingSteps + 2, stepTitle: successStep.title, primaryAction: _jsx(Button, { variant: "secondary", disabled: true, children: "Done" }), children: _jsx("p", { className: "typography-caption text-muted-foreground", role: "status", "aria-live": "polite", children: "Confirming the connection\u2026" }) }));
+    }
+    return (_jsx(ConnectWizardShell, { provider: provider, totalSteps: totalSteps, currentStep: precedingSteps + 1, stepTitle: stepTitle, stepDescription: stepDescription, supportingInfo: _jsxs("div", { className: "rounded-xl bg-info p-3 flex items-start gap-2 typography-small", children: [_jsx(InfoIcon, { size: 20, className: "shrink-0 mt-0.5 text-info-foreground" }), _jsx("p", { className: "text-muted-foreground", children: supportingInfo })] }), onBack: onBack, primaryAction: _jsx(OAuthConnectLink, { href: startHref, label: ctaLabel, onOpened: handleOpened }), children: _jsxs("div", { className: "grid gap-2", children: [_jsx("p", { className: "typography-small text-default-foreground", children: "Manta will be able to:" }), _jsx("ul", { className: "grid gap-1.5", children: permissions.map((permission) => (_jsxs("li", { className: "flex items-start gap-2 typography-caption text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" }), permission] }, permission))) }), waiting && (_jsx("p", { className: "typography-caption text-muted-foreground", role: "status", "aria-live": "polite", children: waitingLabel }))] }) }));
+}

package/dist/routes/integrations/components/connect-forms/ShopifyConnectForm.d.ts

@@ -0,0 +1,3 @@
+import type { ConnectFormProps } from "./types.js";
+export declare function ShopifyConnectForm(props: ConnectFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShopifyConnectForm.d.ts.map

package/dist/routes/integrations/components/connect-forms/ShopifyConnectForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShopifyConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/ShopifyConnectForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAWhD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,2CAezD"}

package/dist/routes/integrations/components/connect-forms/ShopifyConnectForm.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GQLIntegration } from "@manta-eu/client";
+import { OAuthSingleAccountConnectForm } from "./OAuthSingleAccountConnectForm.js";
+const shopifyPermissions = [
+    "Read your orders, including historical ones.",
+    "Read your products, variants, and collections.",
+    "Read your customers and their contact details.",
+    "Read your inventory, locations, and sales channels.",
+];
+// No shop is passed: Shopify App Store requirement 2.3.1 forbids asking a merchant to type
+// their store domain, so the start request omits it and Shopify picks the store instead.
+export function ShopifyConnectForm(props) {
+    return (_jsx(OAuthSingleAccountConnectForm, { ...props, integration: GQLIntegration.Shopify, startHref: "/oauth/shopify/start", ctaLabel: "Continue with Shopify", stepTitle: "Connect your Shopify store", stepDescription: "Shopify will ask which store to connect, then bring you back here.", supportingInfo: "You'll be taken to Shopify to pick a store and approve access. You can revoke it any time from your Shopify admin.", permissions: shopifyPermissions, waitingLabel: "Waiting for you to finish connecting to Shopify\u2026", connectedToastLabel: "Shopify connected" }));
+}

package/dist/routes/integrations/components/connect-forms/SlackConnectForm.d.ts

@@ -0,0 +1,3 @@
+import type { ConnectFormProps } from "./types.js";
+export declare function SlackConnectForm(props: ConnectFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SlackConnectForm.d.ts.map

package/dist/routes/integrations/components/connect-forms/SlackConnectForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/SlackConnectForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAOhD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAevD"}

package/dist/routes/integrations/components/connect-forms/SlackConnectForm.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GQLIntegration } from "@manta-eu/client";
+import { OAuthSingleAccountConnectForm } from "./OAuthSingleAccountConnectForm.js";
+const slackPermissions = [
+    "Read messages and channel activity you grant access to.",
+    "Post updates, reports, and alerts to the channels you choose.",
+];
+export function SlackConnectForm(props) {
+    return (_jsx(OAuthSingleAccountConnectForm, { ...props, integration: GQLIntegration.Slack, startHref: "/oauth/slack/start", ctaLabel: "Continue with Slack", stepTitle: "Connect your Slack workspace", stepDescription: "Manta will take you to Slack to ask for permission, then bring you back here.", supportingInfo: "You'll be taken to Slack to approve access. You can revoke it any time from your Slack workspace settings.", permissions: slackPermissions, waitingLabel: "Waiting for you to finish connecting to Slack\u2026", connectedToastLabel: "Slack connected" }));
+}

package/dist/routes/integrations/components/connect-forms/TriplewhaleConnectForm.d.ts

@@ -0,0 +1,5 @@
+import { type InferalCredentialFormConfig } from "./InferalCredentialConnectForm.js";
+import type { ConnectFormProps } from "./types.js";
+export declare const triplewhaleConfig: InferalCredentialFormConfig<"shopId" | "apiKey">;
+export declare function TriplewhaleConnectForm(props: ConnectFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TriplewhaleConnectForm.d.ts.map

package/dist/routes/integrations/components/connect-forms/TriplewhaleConnectForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriplewhaleConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/TriplewhaleConnectForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAChH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CAAC,QAAQ,GAAG,QAAQ,CA6B9E,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,2CAE7D"}

package/dist/routes/integrations/components/connect-forms/TriplewhaleConnectForm.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InferalCredentialConnectForm } from "./InferalCredentialConnectForm.js";
+export const triplewhaleConfig = {
+    providerName: "Triple Whale",
+    fieldIdPrefix: "triplewhale",
+    identifier: {
+        key: "shopId",
+        label: "Shop ID",
+        placeholder: "Your Triple Whale shop ID",
+        requiredMessage: "Shop ID is required",
+        stepTitle: "Find your Triple Whale shop ID",
+        stepDescription: "We use this to identify your store inside Triple Whale.",
+    },
+    secrets: {
+        title: "Generate an API key",
+        description: "Manta needs read access to Summary Page and Pixel Attribution.",
+        fields: [
+            {
+                key: "apiKey",
+                label: "API key",
+                placeholder: "Paste your API key",
+                requiredMessage: "API key is required",
+                secret: true,
+            },
+        ],
+    },
+    streamNamePlaceholder: "abc-store",
+    locationStepDescription: "Pick the region closest to your store for the lowest latency.",
+    buildProviderInput: (credentials) => ({
+        triplewhale: { shopId: credentials.shopId, apiKey: credentials.apiKey },
+    }),
+};
+export function TriplewhaleConnectForm(props) {
+    return _jsx(InferalCredentialConnectForm, { ...props, config: triplewhaleConfig });
+}

package/dist/routes/integrations/components/connect-forms/WoocommerceConnectForm.d.ts

@@ -0,0 +1,5 @@
+import { type InferalCredentialFormConfig } from "./InferalCredentialConnectForm.js";
+import type { ConnectFormProps } from "./types.js";
+export declare const woocommerceConfig: InferalCredentialFormConfig<"sourceUrl" | "consumerKey" | "consumerSecret">;
+export declare function WoocommerceConnectForm(props: ConnectFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WoocommerceConnectForm.d.ts.map

package/dist/routes/integrations/components/connect-forms/WoocommerceConnectForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WoocommerceConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/WoocommerceConnectForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgC,KAAK,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAChH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CAAC,WAAW,GAAG,aAAa,GAAG,gBAAgB,CAwCzG,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,2CAE7D"}

package/dist/routes/integrations/components/connect-forms/WoocommerceConnectForm.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ensureProtocol } from "@manta-eu/lib/url";
+import { InferalCredentialConnectForm } from "./InferalCredentialConnectForm.js";
+export const woocommerceConfig = {
+    providerName: "WooCommerce",
+    fieldIdPrefix: "woocommerce",
+    identifier: {
+        key: "sourceUrl",
+        label: "Site URL",
+        placeholder: "https://shop.example.com",
+        requiredMessage: "Site URL is required",
+        stepTitle: "Point Manta at your WooCommerce store",
+        stepDescription: "We use your site URL to identify which store this integration belongs to.",
+    },
+    secrets: {
+        title: "Generate a REST API key pair",
+        description: "Manta needs Read / Write access to sync orders, customers, and products from your WooCommerce store.",
+        fields: [
+            {
+                key: "consumerKey",
+                label: "Consumer key",
+                placeholder: "ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+                requiredMessage: "Consumer key is required",
+                secret: true,
+            },
+            {
+                key: "consumerSecret",
+                label: "Consumer secret",
+                placeholder: "cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+                requiredMessage: "Consumer secret is required",
+                secret: true,
+            },
+        ],
+    },
+    streamNamePlaceholder: "woocommerce-shopexamplecom",
+    locationStepDescription: "Pick the region closest to your store for the lowest latency.",
+    buildProviderInput: (credentials) => ({
+        woocommerce: {
+            sourceUrl: ensureProtocol(credentials.sourceUrl),
+            consumerKey: credentials.consumerKey,
+            consumerSecret: credentials.consumerSecret,
+        },
+    }),
+};
+export function WoocommerceConnectForm(props) {
+    return _jsx(InferalCredentialConnectForm, { ...props, config: woocommerceConfig });
+}

package/dist/routes/integrations/components/connect-forms/connection-string-fields.d.ts

@@ -0,0 +1,13 @@
+import type { DataConnectorType } from "../../types.js";
+import type { ConnectorField } from "./data-connection-fields.js";
+export type ConnectionStringResult = {
+    ok: true;
+    values: Record<string, string>;
+    notice?: string;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function acceptsConnectionString(connectorType: string): connectorType is DataConnectorType;
+export declare function connectionStringValues(connectorType: string, input: string, fields: readonly ConnectorField[]): ConnectionStringResult;
+//# sourceMappingURL=connection-string-fields.d.ts.map

package/dist/routes/integrations/components/connect-forms/connection-string-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-string-fields.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/connection-string-fields.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,MAAM,sBAAsB,GAC9B;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAC7D;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAYjC,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,MAAM,GAAG,aAAa,IAAI,iBAAiB,CAEjG;AAED,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,SAAS,cAAc,EAAE,GAChC,sBAAsB,CAiBxB"}

package/dist/routes/integrations/components/connect-forms/connection-string-fields.js

@@ -0,0 +1,110 @@
+import { parseConnectionString, unescapeBracedValue } from "@manta-eu/lib/connection-string";
+import { isPresent } from "@manta-eu/lib/present";
+export function acceptsConnectionString(connectorType) {
+    return Object.hasOwn(formats, connectorType);
+}
+export function connectionStringValues(connectorType, input, fields) {
+    if (!acceptsConnectionString(connectorType)) {
+        return { ok: false, error: "This connector does not accept a connection string." };
+    }
+    const format = formats[connectorType];
+    const parsed = parseConnectionString(input, { semicolonProperties: format.semicolonProperties });
+    if (!parsed)
+        return { ok: false, error: unreadableError(connectorType, input, format.schemes) };
+    if (!format.schemes.includes(parsed.scheme))
+        return { ok: false, error: schemeHint(format.schemes) };
+    const mapped = format.toValues(parsed);
+    if ("error" in mapped)
+        return { ok: false, error: mapped.error };
+    const values = formValues(mapped.values, fields);
+    if (!isPresent(values))
+        return { ok: false, error: "The connection string holds no value for this form." };
+    return mapped.notice ? { ok: true, values, notice: mapped.notice } : { ok: true, values };
+}
+const formats = {
+    postgres: urlFormat("postgres", "postgresql"),
+    redshift: urlFormat("redshift", "postgres", "postgresql"),
+    mysql: urlFormat("mysql", "mariadb"),
+    mariadb: urlFormat("mariadb", "mysql"),
+    clickhouse: urlFormat("clickhouse"),
+    snowflake: { schemes: ["snowflake"], toValues: snowflakeValues },
+    sqlserver: { schemes: ["sqlserver", "mssql"], semicolonProperties: true, toValues: sqlServerValues },
+    bigquery: { schemes: ["bigquery"], semicolonProperties: true, toValues: bigQueryValues },
+};
+function urlFormat(...schemes) {
+    return { schemes, toValues: (parsed) => ({ values: urlValues(parsed) }) };
+}
+function urlValues(parsed) {
+    const { host, port, username, password, path, params } = parsed;
+    return { ...lowerCaseNames(params), host, port, username, password, database: path[0] };
+}
+function lowerCaseNames(params) {
+    return Object.fromEntries(Object.entries(params).map(([name, value]) => [name.toLowerCase(), value]));
+}
+function snowflakeValues(parsed) {
+    return { values: { ...urlValues(parsed), schema: parsed.path[1] } };
+}
+const namedInstanceError = "Use host:port or ;instanceName= instead of host\\instance.";
+function sqlServerValues(parsed) {
+    const read = sqlServerPropertyReader(parsed.params);
+    const host = parsed.host ?? read("serverName");
+    if (host?.includes("\\"))
+        return { error: namedInstanceError };
+    const port = parsed.port ?? read("portNumber", "port");
+    return {
+        values: {
+            host,
+            port,
+            instance: isPresent(port) ? undefined : read("instanceName"),
+            username: parsed.username ?? read("user", "userName"),
+            password: parsed.password ?? read("password"),
+            database: parsed.path[0] ?? read("databaseName", "database"),
+            encrypt: booleanValue(read("encrypt")),
+            trust_server_certificate: booleanValue(read("trustServerCertificate")),
+        },
+    };
+}
+function sqlServerPropertyReader(params) {
+    const read = propertyReader(params);
+    return (...names) => {
+        const value = read(...names);
+        return value === undefined ? undefined : unescapeBracedValue(value);
+    };
+}
+// JDBC property names are case-insensitive, so the lookup lowers the case of each name.
+function propertyReader(params) {
+    const valueByName = new Map(Object.entries(lowerCaseNames(params)));
+    return (...names) => names.map((name) => valueByName.get(name.toLowerCase())).find(isPresent);
+}
+function booleanValue(value) {
+    const lowered = value?.toLowerCase();
+    return lowered === "true" || lowered === "false" ? lowered : undefined;
+}
+const keyFileNotice = "Paste the service account key into the key field. The browser cannot read a key file.";
+function bigQueryValues(parsed) {
+    const read = propertyReader(parsed.params);
+    const key = read("OAuthPvtKey");
+    const inlineKey = key?.trimStart().startsWith("{") ? key : undefined;
+    const pointsToKeyFile = isPresent(read("OAuthPvtKeyPath")) || (isPresent(key) && inlineKey === undefined);
+    return {
+        values: {
+            project: read("ProjectId"),
+            dataset: read("DefaultDataset"),
+            location: read("Location"),
+            key_body: inlineKey,
+        },
+        notice: pointsToKeyFile ? keyFileNotice : undefined,
+    };
+}
+function unreadableError(connectorType, input, schemes) {
+    return connectorType === "sqlserver" && input.includes("\\") ? namedInstanceError : schemeHint(schemes);
+}
+function schemeHint(schemes) {
+    return `Paste a ${schemes.map((scheme) => `${scheme}://`).join(" or ")} connection string.`;
+}
+function formValues(values, fields) {
+    return Object.fromEntries(fields.flatMap((field) => {
+        const value = values[field.key];
+        return isPresent(value) ? [[field.key, value]] : [];
+    }));
+}

package/dist/routes/integrations/components/connect-forms/dash-folder-tree.d.ts

@@ -0,0 +1,6 @@
+import { type TreeNode, type TreeSelectItem } from "#components/tree-multi-select/index";
+export type DashFolder = TreeNode & {
+    position?: number | null;
+};
+export declare function dashFolderTreeItems(folders: DashFolder[]): TreeSelectItem[];
+//# sourceMappingURL=dash-folder-tree.d.ts.map

package/dist/routes/integrations/components/connect-forms/dash-folder-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dash-folder-tree.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/dash-folder-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAEtH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAQjE,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAO3E"}

package/dist/routes/integrations/components/connect-forms/dash-folder-tree.js

@@ -0,0 +1,14 @@
+import { buildTreeRows, compareNodes } from "#components/tree-multi-select/index";
+// Siblings in Dash's own order; a folder without a position goes last.
+function compareFolders(a, b) {
+    const unpositioned = Number.MAX_SAFE_INTEGER;
+    return (a.position ?? unpositioned) - (b.position ?? unpositioned) || compareNodes(a, b);
+}
+export function dashFolderTreeItems(folders) {
+    return buildTreeRows(folders, compareFolders).map(({ node, depth }) => ({
+        id: node.id,
+        label: node.name ?? node.id,
+        selectable: true,
+        depth,
+    }));
+}