@manta-eu/react 0.1.6 → 0.1.8

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

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { GQLInferalLocation, useCreateInferalIntegrationMutation, } from "@manta-eu/client";
+import { parseError } from "@manta-eu/client/shared/error-utils";
+import { isPresent } from "@manta-eu/lib/present";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { ConnectWizardShell } from "./ConnectWizardShell.js";
+import { FieldInstructions } from "./FieldInstructions.js";
+import { ImportStartedStep } from "./ImportStartedNotice.js";
+import { useConnectWizard } from "./useConnectWizard.js";
+import { Input } from "#components/input/index";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { useMantaClient } from "#providers/index";
+const locationSchema = z.enum(GQLInferalLocation, { message: "Region is required" });
+// Kebab-casing the field key keeps the rendered input ids identical to the hand-written forms.
+export function fieldId(prefix, key) {
+    return `${prefix}-${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
+}
+const streamNameSchema = z
+    .string()
+    .trim()
+    .min(1, "Stream name is required")
+    .max(64, "64 characters or fewer")
+    .regex(/^[a-zA-Z0-9_:-]+$/, "Use letters, numbers, dashes (-), underscores (_), or colons (:). No spaces.");
+function blankValues(fields) {
+    return { ...Object.fromEntries(fields.map((field) => [field.key, ""])), streamName: "" };
+}
+// The stream name tracks the identifier only until the user types their own.
+export function shouldAutofillStreamName(changedField, identifierKey, streamNameDirty) {
+    return changedField === identifierKey && !streamNameDirty;
+}
+function credentialSchema(fields) {
+    return z.object(Object.fromEntries(fields.map((f) => [f.key, credentialFieldSchema(f)])));
+}
+function credentialFieldSchema(field) {
+    const required = z.string().trim().min(1, field.requiredMessage);
+    const { validate } = field;
+    return validate ? required.refine(validate.check, validate.message) : required;
+}
+// The credential fields are only known at runtime, so the built schema carries no usable output
+// type; naming it keeps `useForm` inferring the same Values the hand-written forms declared.
+// A schema built from runtime descriptors has no usable static output type, so this one assertion
+// stands in for it; every other type in the file is inferred from the caller's key union.
+function formSchema(credentialFields) {
+    return credentialSchema(credentialFields).extend({
+        streamName: streamNameSchema,
+        location: locationSchema,
+    });
+}
+// Object.fromEntries cannot carry the key union through, so the completeness check below is what
+// makes the assertion true rather than merely asserted.
+function pickCredentials(values, fields) {
+    const missing = fields.filter((field) => !isPresent(values[field.key])).map((field) => field.key);
+    if (isPresent(missing)) {
+        throw new Error(`Missing credential ${missing.join(", ")} — the form declared it but collected no value`);
+    }
+    return Object.fromEntries(fields.map((field) => [field.key, values[field.key]]));
+}
+function renderField(form, prefix, field) {
+    return (_jsx(Input, { id: fieldId(prefix, field.key), label: field.label, type: field.secret ? "password" : undefined, placeholder: field.placeholder, autoComplete: "off", error: form.formState.errors[field.key]?.message?.toString(), ...form.register(field.key) }, field.key));
+}
+function renderFields(form, prefix, fields) {
+    const [only] = fields;
+    if (fields.length === 1 && only)
+        return renderField(form, prefix, only);
+    return _jsx("div", { className: "grid gap-3", children: fields.map((field) => renderField(form, prefix, field)) });
+}
+export function createSteps(config, locationLabels, setup) {
+    const { fieldIdPrefix, identifier, secrets, settings } = config;
+    return [
+        {
+            id: "identifier",
+            title: identifier.stepTitle,
+            description: identifier.stepDescription,
+            schema: credentialSchema([identifier]),
+            supporting: setup?.identifier ? _jsx(FieldInstructions, { instruction: setup.identifier }) : undefined,
+            continueLabel: "Continue",
+            render: (form) => renderField(form, fieldIdPrefix, identifier),
+        },
+        {
+            id: "secrets",
+            title: secrets.title,
+            description: secrets.description,
+            schema: credentialSchema(secrets.fields),
+            supporting: setup?.apiKey ? _jsx(FieldInstructions, { instruction: setup.apiKey }) : undefined,
+            continueLabel: "Continue",
+            render: (form) => renderFields(form, fieldIdPrefix, secrets.fields),
+        },
+        ...(settings
+            ? [
+                {
+                    id: "settings",
+                    title: settings.title,
+                    description: settings.description,
+                    schema: credentialSchema(settings.fields),
+                    supporting: setup?.settings ? _jsx(FieldInstructions, { instruction: setup.settings }) : undefined,
+                    continueLabel: "Continue",
+                    render: (form) => renderFields(form, fieldIdPrefix, settings.fields),
+                },
+            ]
+            : []),
+        {
+            id: "stream-name",
+            title: "Name this integration",
+            description: "Used to identify this connection. Letters, numbers, dashes, and underscores.",
+            schema: z.object({ streamName: streamNameSchema }),
+            continueLabel: "Continue",
+            render: (form) => (_jsx(Input, { id: fieldId(fieldIdPrefix, "streamName"), label: "Stream name", placeholder: config.streamNamePlaceholder, autoComplete: "off", error: form.formState.errors.streamName?.message?.toString(), ...form.register("streamName") })),
+        },
+        {
+            id: "location",
+            title: "Choose a stream location",
+            description: config.locationStepDescription,
+            schema: z.object({ location: locationSchema }),
+            continueLabel: "Connect",
+            render: (form) => (_jsx(Controller, { control: form.control, name: "location", render: ({ field, fieldState }) => (_jsxs(Select, { value: field.value ?? "", onValueChange: field.onChange, children: [_jsx(SelectTrigger, { label: "Location", id: fieldId(fieldIdPrefix, "location"), className: "w-full h-10", error: fieldState.error?.message, children: _jsx(SelectValue, { placeholder: "Select a region" }) }), _jsx(SelectContent, { children: Object.entries(locationLabels).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value))) })] })) })),
+        },
+    ];
+}
+export function InferalCredentialConnectForm(props) {
+    const { onBack, onChanged, onDismiss, provider, inferalConfig, config, importNotice } = props;
+    if (!inferalConfig) {
+        throw new Error(`${config.providerName} is missing its Inferal connection configuration`);
+    }
+    const { deriveStreamName, locationLabels, setupInstructions } = inferalConfig;
+    const { providerName, identifier, secrets, settings, buildProviderInput } = config;
+    const credentialFields = useMemo(() => [identifier, ...secrets.fields, ...(settings?.fields ?? [])], [identifier, secrets, settings]);
+    const steps = useMemo(() => createSteps(config, locationLabels, setupInstructions), [config, locationLabels, setupInstructions]);
+    const fullSchema = useMemo(() => formSchema(credentialFields), [credentialFields]);
+    const { mantaClient } = useMantaClient();
+    const createMutation = useCreateInferalIntegrationMutation(mantaClient);
+    const [connected, setConnected] = useState(false);
+    const form = useForm({
+        resolver: zodResolver(fullSchema),
+        defaultValues: blankValues(credentialFields),
+        mode: "onChange",
+    });
+    useEffect(() => {
+        const subscription = form.watch((values, { name }) => {
+            if (!shouldAutofillStreamName(name, identifier.key, Boolean(form.formState.dirtyFields.streamName)))
+                return;
+            form.setValue("streamName", deriveStreamName(values[identifier.key] ?? ""));
+        });
+        return () => subscription.unsubscribe();
+    }, [deriveStreamName, form, identifier.key]);
+    async function onValid(values) {
+        const credentials = pickCredentials(values, credentialFields);
+        try {
+            const response = await createMutation.mutateAsync({
+                input: {
+                    provider: buildProviderInput(credentials),
+                    stream: { name: values.streamName, location: values.location },
+                },
+            });
+            const result = response.createInferalIntegration;
+            onChanged();
+            if (isPresent(result.error)) {
+                toast.error(`Failed to connect ${providerName}`, { description: result.error });
+                return;
+            }
+            toast.success(`${providerName} connected`, { description: values.streamName });
+            if (importNotice)
+                setConnected(true);
+            else
+                onDismiss();
+        }
+        catch (err) {
+            onChanged();
+            const info = parseError(err, `Failed to connect ${providerName}`);
+            toast.error(info.message, { description: info.description });
+        }
+    }
+    const { stepIndex, currentStep, canAdvance, handleContinue, handleBack } = useConnectWizard({
+        steps,
+        form,
+        fullSchema,
+        onSubmit: onValid,
+        onBack,
+    });
+    if (connected && importNotice) {
+        return (_jsx(ImportStartedStep, { provider: provider, notice: importNotice, totalSteps: steps.length + 1, onDone: onDismiss }));
+    }
+    return (_jsx(ConnectWizardShell, { provider: provider, totalSteps: importNotice ? steps.length + 1 : steps.length, currentStep: stepIndex + 1, stepTitle: currentStep.title, stepDescription: currentStep.description, supportingInfo: currentStep.supporting, onBack: handleBack, onContinue: handleContinue, continueLabel: currentStep.continueLabel, continueDisabled: !canAdvance, isSubmitting: createMutation.isPending, children: _jsx(Fragment, { children: currentStep.render(form) }, currentStep.id) }));
+}

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

@@ -0,0 +1,6 @@
+import { type InferalCredentialFormConfig } from "./InferalCredentialConnectForm.js";
+import type { ConnectFormProps } from "./types.js";
+export declare function extractKlaviyoMetricId(value: string): string;
+export declare const klaviyoConfig: InferalCredentialFormConfig<"companyId" | "apiKey" | "conversionMetricId">;
+export declare function KlaviyoConnectForm(props: ConnectFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=KlaviyoConnectForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KlaviyoConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/KlaviyoConnectForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAChH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAK5D;AASD,eAAO,MAAM,aAAa,EAAE,2BAA2B,CAAC,WAAW,GAAG,QAAQ,GAAG,oBAAoB,CAkDpG,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,2CAEzD"}

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InferalCredentialConnectForm } from "./InferalCredentialConnectForm.js";
+// The setup steps send the user to klaviyo.com/metric/<ID>/<name>, so the whole URL is the likeliest
+// paste. Keep the ID and drop the rest rather than handing the relay something it cannot use.
+export function extractKlaviyoMetricId(value) {
+    const trimmed = value.trim();
+    const fromUrl = /\/metric\/([^/?#]+)/.exec(trimmed);
+    return fromUrl?.[1] ?? trimmed;
+}
+// Klaviyo publishes no format for a metric ID — its own schema types one as an unconstrained string —
+// so this rejects only what an ID certainly is not: a leftover path, a query string, or a stray word.
+function looksLikeMetricId(value) {
+    return /^[A-Za-z0-9_-]+$/.test(extractKlaviyoMetricId(value));
+}
+// companyId identifies the integration on our side only — Klaviyo's relay contract never receives it.
+export const klaviyoConfig = {
+    providerName: "Klaviyo",
+    fieldIdPrefix: "klaviyo",
+    identifier: {
+        key: "companyId",
+        label: "Company ID",
+        placeholder: "Your Klaviyo company ID",
+        requiredMessage: "Company ID is required",
+        stepTitle: "Find your Klaviyo company ID",
+        stepDescription: "We use this to name the stream, so it is unique to this Klaviyo account.",
+    },
+    secrets: {
+        title: "Create a private API key",
+        description: "Manta needs read access to campaigns, flows, profiles, lists, and segments.",
+        fields: [
+            {
+                key: "apiKey",
+                label: "Private API key",
+                placeholder: "pk_...",
+                requiredMessage: "Private API key is required",
+                secret: true,
+            },
+        ],
+    },
+    settings: {
+        title: "Choose your conversion metric",
+        description: "Klaviyo attributes campaign and flow revenue to one metric of your choosing, and picks none by default.",
+        fields: [
+            {
+                key: "conversionMetricId",
+                label: "Conversion metric ID",
+                placeholder: "RESQ6t",
+                requiredMessage: "Conversion metric ID is required",
+                validate: {
+                    check: looksLikeMetricId,
+                    message: "Paste the metric ID, or the whole klaviyo.com/metric/... URL",
+                },
+            },
+        ],
+    },
+    streamNamePlaceholder: "klaviyo-abc123",
+    locationStepDescription: "Pick the region closest to your account for the lowest latency.",
+    buildProviderInput: (credentials) => ({
+        klaviyo: {
+            companyId: credentials.companyId,
+            apiKey: credentials.apiKey,
+            conversionMetricId: extractKlaviyoMetricId(credentials.conversionMetricId),
+        },
+    }),
+};
+export function KlaviyoConnectForm(props) {
+    return _jsx(InferalCredentialConnectForm, { ...props, config: klaviyoConfig });
+}

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

@@ -0,0 +1,10 @@
+import type { ConnectFormProps } from "./types.js";
+type LinkedinPhase = "intro" | "waiting" | "selecting" | "finished" | "failed";
+type DeriveLinkedinPhaseInput = {
+    states?: string[];
+    hasSeenActiveState: boolean;
+};
+export declare function deriveLinkedinPhase({ states, hasSeenActiveState }: DeriveLinkedinPhaseInput): LinkedinPhase;
+export declare function LinkedinConnectForm(props: ConnectFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LinkedinConnectForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkedinConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/LinkedinConnectForm.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAchD,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE/E,KAAK,wBAAwB,GAAG;IAC9B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAOF,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,kBAAkB,EAAE,EAAE,wBAAwB,GAAG,aAAa,CAe3G;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CA4K1D"}

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLinkedinSetupConnectMutation, useLinkedinSetupProgressQuery } from "@manta-eu/client";
+import { parseError } from "@manta-eu/client/shared/error-utils";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { useQueryClient } from "@tanstack/react-query";
+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 { OAuthConnectLink } from "./OAuthConnectLink.js";
+import { useWindowFocusPoll } from "./useWindowFocusPoll.js";
+import { Banner } from "#components/banner/index";
+import { Button } from "#components/button/index";
+import { Checkbox } from "#components/checkbox/index";
+import { Loader } from "#components/loader/index";
+import { useMantaClient } from "#providers/index";
+const selectingState = "SELECTING_ACCOUNTS";
+const finishedState = "FINISHED";
+const notFoundState = "NOT_FOUND";
+const failedStates = new Set(["FATALLY_FAILED", "TIMED_OUT"]);
+const pollIntervalMs = 4000;
+function isActiveState(states) {
+    return (states ?? []).some((state) => state !== finishedState && state !== notFoundState && !failedStates.has(state));
+}
+// hasSeenActiveState blocks acting on leftover terminal progress from a past session.
+export function deriveLinkedinPhase({ states, hasSeenActiveState }) {
+    const set = new Set(states ?? []);
+    return match({
+        selecting: set.has(selectingState),
+        finished: hasSeenActiveState && set.has(finishedState),
+        failed: hasSeenActiveState && [...failedStates].some((value) => set.has(value)),
+        active: isActiveState(states),
+    })
+        .returnType()
+        .with({ selecting: true }, () => "selecting")
+        .with({ finished: true }, () => "finished")
+        .with({ failed: true }, () => "failed")
+        .with({ active: true }, () => "waiting")
+        .otherwise(() => "intro");
+}
+export function LinkedinConnectForm(props) {
+    const { onBack, onChanged, onDismiss, provider, resumedFromOAuth = false, importNotice } = props;
+    const { mantaClient } = useMantaClient();
+    const queryClient = useQueryClient();
+    const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const hasReportedConnected = useRef(false);
+    const connect = useLinkedinSetupConnectMutation(mantaClient);
+    const progressQuery = useLinkedinSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
+    const progress = progressQuery.data?.linkedinSetupProgress;
+    const accounts = progress?.accounts ?? [];
+    const phase = deriveLinkedinPhase({ states: progress?.state, hasSeenActiveState });
+    useWindowFocusPoll(progressQuery.refetch, {
+        enabled: phase === "waiting",
+        intervalMs: pollIntervalMs,
+    });
+    useEffect(() => {
+        if (isActiveState(progress?.state))
+            setHasSeenActiveState(true);
+    }, [progress]);
+    useEffect(() => {
+        if (phase === "finished" && !hasReportedConnected.current) {
+            hasReportedConnected.current = true;
+            onChanged();
+            toast.success("LinkedIn Ads connected");
+        }
+    }, [phase, onChanged]);
+    function resetProgress() {
+        hasReportedConnected.current = false;
+        setSelectedIds(new Set());
+        queryClient.removeQueries({ queryKey: useLinkedinSetupProgressQuery.getKey() });
+    }
+    function handleOpened() {
+        resetProgress();
+        setHasSeenActiveState(false);
+    }
+    function handleReset() {
+        resetProgress();
+        setHasSeenActiveState(false);
+    }
+    function toggleAccount(id, checked) {
+        setSelectedIds((current) => {
+            const next = new Set(current);
+            if (checked)
+                next.add(id);
+            else
+                next.delete(id);
+            return next;
+        });
+    }
+    async function submitAccounts() {
+        try {
+            await connect.mutateAsync({ accountIds: [...selectedIds] });
+            void progressQuery.refetch();
+        }
+        catch (err) {
+            const info = parseError(err, "Couldn't connect the selected accounts");
+            toast.error(info.message, { description: info.description });
+        }
+    }
+    function renderBody() {
+        if (phase === "failed") {
+            return (_jsx(FailedStep, { message: progress?.lastError?.message ?? "We couldn't finish connecting LinkedIn. Please try again.", title: progress?.lastError?.title, onRetry: handleReset }));
+        }
+        if (phase === "finished") {
+            return (_jsxs("div", { className: "grid gap-4", children: [importNotice ? (_jsx(ImportStartedNotice, { providerName: provider.name, notice: importNotice })) : (_jsx("p", { className: "typography-caption text-muted-foreground", children: "Your LinkedIn Ads accounts are connected." })), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { onClick: onDismiss, children: "Done" }) })] }));
+        }
+        if (phase === "selecting") {
+            return (_jsxs("div", { className: "grid gap-4", children: [_jsx("p", { className: "typography-caption text-muted-foreground", children: "Choose the LinkedIn Ads accounts Manta should connect." }), _jsx("div", { className: "grid gap-2 max-h-72 overflow-y-auto", children: isPresent(accounts) ? (accounts.map((account) => (_jsx(Checkbox, { checked: selectedIds.has(account.id), onCheckedChange: (checked) => toggleAccount(account.id, checked === true), label: account.name }, account.id)))) : (_jsx("p", { className: "typography-caption text-muted-foreground", children: "No ad accounts were found for this LinkedIn login." })) }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsx(Button, { variant: "tertiary", onClick: onBack, icon: ArrowLeft, children: "Back" }), _jsxs(Button, { onClick: () => void submitAccounts(), disabled: selectedIds.size === 0, isLoading: connect.isPending, children: ["Connect ", humanCount(selectedIds.size, "account")] })] })] }));
+        }
+        if (phase === "waiting") {
+            return (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", role: "status", "aria-live": "polite", children: [_jsx(Loader, {}), _jsx("p", { className: "typography-caption text-muted-foreground", children: "Loading your LinkedIn ad accounts\u2026" })] }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsx(Button, { variant: "tertiary", onClick: onBack, icon: ArrowLeft, children: "Back" }), _jsx(Button, { variant: "secondary", onClick: handleReset, children: "Start over" })] })] }));
+        }
+        return (_jsxs("div", { className: "grid gap-4", children: [_jsx("p", { className: "typography-caption text-muted-foreground", children: "Sign in with LinkedIn to let Manta read your Ads performance. You'll be taken to LinkedIn to authorize access." }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsx(Button, { variant: "tertiary", onClick: onBack, icon: ArrowLeft, children: "Back" }), _jsx(OAuthConnectLink, { href: "/oauth/linkedin/start", label: "Continue with LinkedIn", onOpened: handleOpened })] })] }));
+    }
+    return (_jsxs("div", { className: "grid gap-6", children: [_jsx(ConnectFormHeader, { provider: provider, status: phase === "finished" ? "Connected" : "Not connected" }), renderBody()] }));
+}
+function FailedStep(props) {
+    const { message, title, onRetry } = props;
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsx(Banner, { type: "error", size: "loose", label: title ?? "LinkedIn connection failed", description: message }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { onClick: onRetry, children: "Try again" }) })] }));
+}

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

@@ -0,0 +1,14 @@
+import { GQLMetaSetupStateEnum, type GQLMetaAdAccount } from "@manta-eu/client";
+import type { ConnectFormProps } from "./types.js";
+type Phase = "idle" | "awaitingOAuth" | "loadingAccounts" | "pickingAccount" | "submitting" | "done" | "failed";
+type DerivePhaseInput = {
+    states: GQLMetaSetupStateEnum[] | undefined;
+    hasStartedOAuth: boolean;
+    hasSeenActiveState: boolean;
+};
+export declare function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }: DerivePhaseInput): Phase;
+export declare function isSelectableAccount(account: GQLMetaAdAccount, alreadyConnectedExternalIds: ReadonlySet<string>, reconnectableExternalIds?: ReadonlySet<string>): boolean;
+export declare function accountHint(account: GQLMetaAdAccount, alreadyConnectedExternalIds: ReadonlySet<string>, reconnectableExternalIds?: ReadonlySet<string>): string | undefined;
+export declare function MetaAdsConnectForm(props: ConnectFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MetaAdsConnectForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetaAdsConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/MetaAdsConnectForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,qBAAqB,EAIrB,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAC;AAY1B,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,SAAS,CAAC;AAY9D,KAAK,KAAK,GAAG,MAAM,GAAG,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhH,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC;IAC5C,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAoBF,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAYpG;AAkBD,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,gBAAgB,EACzB,2BAA2B,EAAE,WAAW,CAAC,MAAM,CAAC,EAChD,wBAAwB,GAAE,WAAW,CAAC,MAAM,CAAa,GACxD,OAAO,CAKT;AAED,wBAAgB,WAAW,CACzB,OAAO,EAAE,gBAAgB,EACzB,2BAA2B,EAAE,WAAW,CAAC,MAAM,CAAC,EAChD,wBAAwB,GAAE,WAAW,CAAC,MAAM,CAAa,GACxD,MAAM,GAAG,SAAS,CAKpB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,2CA6HzD"}

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

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GQLIntegration, GQLMetaSetupStateEnum, useConnectedAccountsQuery, useMetaSetupConnectMutation, useMetaSetupProgressQuery, } from "@manta-eu/client";
+import { parseError } from "@manta-eu/client/shared/error-utils";
+import { isPresent } from "@manta-eu/lib/present";
+import { useQueryClient } from "@tanstack/react-query";
+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 { OAuthConnectLink } from "./OAuthConnectLink.js";
+import { unavailableReasonLabel } from "./setup-account-unavailable-reason.js";
+import { 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { cn } from "#lib/utils";
+import { useMantaClient } from "#providers/index";
+const pollIntervalMs = 3000;
+const statePriority = [
+    GQLMetaSetupStateEnum.Finished,
+    GQLMetaSetupStateEnum.FatallyFailed,
+    GQLMetaSetupStateEnum.TimedOut,
+    GQLMetaSetupStateEnum.ConnectingAccounts,
+    GQLMetaSetupStateEnum.SelectingAccounts,
+    GQLMetaSetupStateEnum.FetchingAccounts,
+    GQLMetaSetupStateEnum.Setup,
+];
+const terminalStates = [
+    GQLMetaSetupStateEnum.Finished,
+    GQLMetaSetupStateEnum.FatallyFailed,
+    GQLMetaSetupStateEnum.TimedOut,
+];
+const activePhases = ["awaitingOAuth", "loadingAccounts", "pickingAccount", "submitting"];
+export function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }) {
+    const defaultPhase = hasStartedOAuth ? "awaitingOAuth" : "idle";
+    const dominant = statePriority.find((state) => states?.includes(state));
+    if (dominant && terminalStates.includes(dominant) && !hasSeenActiveState)
+        return defaultPhase;
+    return match(dominant)
+        .returnType()
+        .with(GQLMetaSetupStateEnum.Finished, () => "done")
+        .with(GQLMetaSetupStateEnum.FatallyFailed, GQLMetaSetupStateEnum.TimedOut, () => "failed")
+        .with(GQLMetaSetupStateEnum.ConnectingAccounts, () => "submitting")
+        .with(GQLMetaSetupStateEnum.SelectingAccounts, () => "pickingAccount")
+        .with(GQLMetaSetupStateEnum.FetchingAccounts, GQLMetaSetupStateEnum.Setup, () => "loadingAccounts")
+        .otherwise(() => defaultPhase);
+}
+function isReconnectable(account, reconnectableExternalIds) {
+    return isPresent(account.externalId) && reconnectableExternalIds.has(account.externalId);
+}
+function isAlreadyConnected(account, alreadyConnectedExternalIds, reconnectableExternalIds) {
+    return (isPresent(account.externalId) &&
+        alreadyConnectedExternalIds.has(account.externalId) &&
+        !isReconnectable(account, reconnectableExternalIds));
+}
+export function isSelectableAccount(account, alreadyConnectedExternalIds, reconnectableExternalIds = new Set()) {
+    return (account.isConnectable === true &&
+        !isAlreadyConnected(account, alreadyConnectedExternalIds, reconnectableExternalIds));
+}
+export function accountHint(account, alreadyConnectedExternalIds, reconnectableExternalIds = new Set()) {
+    if (account.isConnectable !== true)
+        return unavailableReasonLabel(account.unavailableReason);
+    if (isReconnectable(account, reconnectableExternalIds))
+        return "Reconnect";
+    if (isAlreadyConnected(account, alreadyConnectedExternalIds, reconnectableExternalIds))
+        return "Already connected";
+    return undefined;
+}
+export function MetaAdsConnectForm(props) {
+    const { onBack, onChanged, onDismiss, provider, resumedFromOAuth = false, importNotice } = props;
+    const { mantaClient } = useMantaClient();
+    const queryClient = useQueryClient();
+    const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
+    const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
+    const [selectedAccountId, setSelectedAccountId] = useState("");
+    const hasDismissedRef = useRef(false);
+    const progressQuery = useMetaSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
+    const progress = progressQuery.data?.metaSetupProgress;
+    const phase = derivePhase({ states: progress?.state, hasStartedOAuth, hasSeenActiveState });
+    useWindowFocusPoll(progressQuery.refetch, { enabled: activePhases.includes(phase), intervalMs: pollIntervalMs });
+    useEffect(() => {
+        const states = progress?.state;
+        if (!isPresent(states))
+            return;
+        const isActive = states.some((state) => !terminalStates.includes(state) && state !== GQLMetaSetupStateEnum.NotFound);
+        if (isActive)
+            setHasSeenActiveState(true);
+    }, [progress]);
+    const connectedAccountsQuery = useConnectedAccountsQuery(mantaClient, undefined);
+    const alreadyConnectedExternalIds = new Set((connectedAccountsQuery.data?.connectedAccounts ?? [])
+        .filter((account) => account.integration === GQLIntegration.Meta)
+        .map((account) => account.externalId));
+    const reconnectableExternalIds = useReconnectableExternalIds(GQLIntegration.Meta);
+    const connectMutation = useMetaSetupConnectMutation(mantaClient);
+    useEffect(() => {
+        if (phase !== "done" || hasDismissedRef.current)
+            return;
+        hasDismissedRef.current = true;
+        toast.success("Meta connected");
+        onChanged();
+        if (!importNotice)
+            onDismiss();
+    }, [phase, onChanged, onDismiss, importNotice]);
+    function resetProgressCache() {
+        queryClient.setQueryData(useMetaSetupProgressQuery.getKey(), {
+            metaSetupProgress: { state: [], accounts: null, lastError: null },
+        });
+    }
+    function handleOpened() {
+        resetProgressCache();
+        setHasSeenActiveState(false);
+        setHasStartedOAuth(true);
+    }
+    async function handleSubmit() {
+        if (!selectedAccountId)
+            return;
+        try {
+            await connectMutation.mutateAsync({ accountIds: [selectedAccountId] });
+            await progressQuery.refetch();
+        }
+        catch (err) {
+            const info = parseError(err, "Failed to connect Meta");
+            toast.error(info.message, { description: info.description });
+        }
+    }
+    function handleRetry() {
+        setSelectedAccountId("");
+        hasDismissedRef.current = false;
+        resetProgressCache();
+        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, {}))
+                    .with("awaitingOAuth", () => _jsx(AwaitingOAuthView, {}))
+                    .with("loadingAccounts", () => _jsx(LoadingAccountsView, {}))
+                    .with("pickingAccount", () => (_jsx(PickingAccountView, { accounts: progress?.accounts ?? [], alreadyConnectedExternalIds: alreadyConnectedExternalIds, reconnectableExternalIds: reconnectableExternalIds, selectedAccountId: selectedAccountId, onSelect: setSelectedAccountId })))
+                    .with("submitting", () => _jsx(SubmittingView, {}))
+                    .with("done", () => _jsx(DoneView, { providerName: provider.name, importNotice: importNotice }))
+                    .with("failed", () => (_jsx(FailedView, { title: progress?.lastError?.title, message: 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 === "idle" && (_jsx(OAuthConnectLink, { href: "/oauth/meta/start", label: "Continue with Meta", onOpened: handleOpened })), phase === "pickingAccount" && (_jsx(Button, { onClick: () => void handleSubmit(), disabled: !selectedAccountId, isLoading: connectMutation.isPending, children: "Connect account" })), phase === "done" && importNotice && _jsx(Button, { onClick: onDismiss, children: "Done" })] })] }));
+}
+function IdleView() {
+    return (_jsxs("div", { className: "grid gap-1", children: [_jsx("h2", { className: "typography-large-body-semibold text-default-foreground", children: "Sign in with Meta" }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "We'll take you to Meta sign-in so you can grant Manta access to your Meta ad accounts." })] }));
+}
+function AwaitingOAuthView() {
+    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: "Waiting for Meta sign-in" }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "Finish signing in to Meta. We'll pick it up automatically when you come back." })] }), _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 }), " Listening for the connection\u2026"] })] }));
+}
+function LoadingAccountsView() {
+    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: "Loading your Meta ad accounts" }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "This usually takes a few seconds." })] }), _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 }), " Fetching accounts\u2026"] })] }));
+}
+function PickingAccountView(props) {
+    const { accounts, alreadyConnectedExternalIds, reconnectableExternalIds, selectedAccountId, onSelect } = props;
+    if (!isPresent(accounts)) {
+        return (_jsx(Banner, { type: "warning", label: "We couldn't find any Meta ad accounts on this Facebook identity. Sign in with a different account or check your Meta ad account access." }));
+    }
+    const selectableCount = accounts.filter((account) => isSelectableAccount(account, alreadyConnectedExternalIds, reconnectableExternalIds)).length;
+    if (selectableCount === 0) {
+        return (_jsx(Banner, { type: "info", label: "No connectable Meta ad accounts remain on this Facebook identity \u2014 they are already connected or unavailable. Sign in with a different Facebook account to connect a new one." }));
+    }
+    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: "Pick the Meta ad account to connect" }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "Choose the account whose campaigns Manta should manage." })] }), _jsxs(Select, { value: selectedAccountId, onValueChange: onSelect, children: [_jsx(SelectTrigger, { label: "Meta ad account", id: "meta-ad-account", className: "w-full h-10", children: _jsx(SelectValue, { placeholder: "Select an account" }) }), _jsx(SelectContent, { children: accounts.map((account) => {
+                            const label = account.name ?? account.id;
+                            const hint = accountHint(account, alreadyConnectedExternalIds, reconnectableExternalIds);
+                            return (_jsx(SelectItem, { value: account.id, disabled: !isSelectableAccount(account, alreadyConnectedExternalIds, reconnectableExternalIds), children: hint ? `${label} · ${hint}` : label }, account.id));
+                        }) })] })] }));
+}
+function SubmittingView() {
+    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: "Connecting your account" }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "Hold tight \u2014 this usually takes a few seconds." })] }), _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 }), " Provisioning\u2026"] })] }));
+}
+function DoneView(props) {
+    const { providerName, importNotice } = props;
+    if (importNotice)
+        return _jsx(ImportStartedNotice, { providerName: providerName, notice: importNotice });
+    return (_jsxs("div", { className: "grid gap-1", children: [_jsx("h2", { className: "typography-large-body-semibold text-default-foreground", children: "Meta connected" }), _jsx("p", { className: "typography-caption text-muted-foreground", children: "Closing this dialog\u2026" })] }));
+}
+function FailedView(props) {
+    const { title, message, onRetry } = props;
+    return (_jsxs("div", { className: "grid gap-4", children: [_jsx(Banner, { type: "error", size: "loose", label: title ?? "Meta connection failed", description: message ?? undefined }), _jsx(Button, { onClick: onRetry, children: "Try again" })] }));
+}

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

@@ -0,0 +1,10 @@
+import { type ButtonVariant } from "#components/button/index";
+type OAuthConnectLinkProps = {
+    href: string;
+    label: string;
+    onOpened: () => void;
+    variant?: ButtonVariant;
+};
+export declare function OAuthConnectLink(props: OAuthConnectLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OAuthConnectLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OAuthConnectLink.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/OAuthConnectLink.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGpE,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAOF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAkB5D"}