@manta-eu/react 0.1.7 → 0.1.8

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { withDatastoreQueryParam } from "@manta-eu/client/shared/datastore-path";
+import { ConnectWizardShell } from "./ConnectWizardShell.js";
+import { useMantaClient } from "#providers/index";
+export function GmailConnectForm(props) {
+    const { onBack, provider } = props;
+    const { datastoreId } = useMantaClient();
+    return (_jsx(ConnectWizardShell, { provider: provider, totalSteps: 1, currentStep: 1, stepTitle: "Connect your Gmail account", stepDescription: "You'll be redirected to Google to grant access, then brought back here.", onBack: onBack, onContinue: () => {
+            window.location.href = withDatastoreQueryParam("/oauth/gmail/start", datastoreId);
+        }, continueLabel: "Continue with Google", children: _jsx("p", { className: "typography-caption text-muted-foreground", children: "Manta requests read-only Gmail access (gmail.readonly) to ingest inbound email into your knowledge graph. You can revoke it any time from your Google account." }) }));
+}

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GQLIntegration, useGoogleSetupConnectMutation, useGoogleSetupProgressQuery, } from "@manta-eu/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { googleAdsTreeItems } from "./google-ads-account-tree.js";
+import { OAuthSetupConnectForm } from "./OAuthSetupConnectForm.js";
+import { useMantaClient } from "#providers/index";
+const copy = {
+    providerName: "Google Ads",
+    identityProviderName: "Google",
+    entitySingular: "account",
+    entityPlural: "accounts",
+    signInDescription: "We'll take you to Google sign-in so you can grant Manta access to your Google Ads accounts.",
+    pickTitle: "Pick the Google Ads accounts to connect",
+    pickDescription: "Choose the accounts whose campaigns Manta should manage. Manager accounts hold no campaigns, so only their client accounts can be connected.",
+    noEntitiesLabel: "We couldn't find any Google Ads accounts on this Google identity. Sign in with a different account or check your Google Ads access.",
+    noneConnectableLabel: "No connectable Google Ads accounts remain on this Google identity — they are already connected, managers, or unavailable. Sign in with a different Google account to connect a new one.",
+};
+function useGoogleAdsSetup() {
+    const { mantaClient } = useMantaClient();
+    const queryClient = useQueryClient();
+    const progressQuery = useGoogleSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
+    const connectMutation = useGoogleSetupConnectMutation(mantaClient);
+    const progress = progressQuery.data?.googleSetupProgress;
+    return {
+        progress: progress && { state: progress.state, rows: progress.accounts, lastError: progress.lastError },
+        refetchProgress: progressQuery.refetch,
+        resetProgress: () => queryClient.setQueryData(useGoogleSetupProgressQuery.getKey(), {
+            googleSetupProgress: { state: [], accounts: null, lastError: null },
+        }),
+        connect: (accountIds) => connectMutation.mutateAsync({ accountIds }),
+        isConnecting: connectMutation.isPending,
+    };
+}
+export function GoogleAdsConnectForm(props) {
+    const setup = useGoogleAdsSetup();
+    return (_jsx(OAuthSetupConnectForm, { ...props, integration: GQLIntegration.Google, oauthStartPath: "/oauth/google-ads/start", copy: copy, setup: setup, treeItems: googleAdsTreeItems }));
+}

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GQLIntegration, useGoogleAnalyticsSetupConnectMutation, useGoogleAnalyticsSetupProgressQuery, } from "@manta-eu/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { googleAnalyticsTreeItems } from "./google-analytics-property-tree.js";
+import { OAuthSetupConnectForm } from "./OAuthSetupConnectForm.js";
+import { useMantaClient } from "#providers/index";
+const copy = {
+    providerName: "Google Analytics",
+    identityProviderName: "Google",
+    entitySingular: "property",
+    entityPlural: "properties",
+    signInDescription: "We'll take you to Google sign-in so you can grant Manta access to your Google Analytics properties.",
+    pickTitle: "Pick the GA4 properties to connect",
+    pickDescription: "Choose the properties whose reports Manta should pull. Accounts only group their properties, so only properties can be connected.",
+    noEntitiesLabel: "We couldn't find any Google Analytics properties on this Google identity. Sign in with a different account or check your Google Analytics access.",
+    noneConnectableLabel: "No connectable Google Analytics properties remain on this Google identity — they are already connected or unavailable. Sign in with a different Google account to connect a new one.",
+};
+function useGoogleAnalyticsSetup() {
+    const { mantaClient } = useMantaClient();
+    const queryClient = useQueryClient();
+    const progressQuery = useGoogleAnalyticsSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
+    const connectMutation = useGoogleAnalyticsSetupConnectMutation(mantaClient);
+    const progress = progressQuery.data?.googleAnalyticsSetupProgress;
+    return {
+        progress: progress && { state: progress.state, rows: progress.properties, lastError: progress.lastError },
+        refetchProgress: progressQuery.refetch,
+        resetProgress: () => queryClient.setQueryData(useGoogleAnalyticsSetupProgressQuery.getKey(), {
+            googleAnalyticsSetupProgress: { state: [], properties: null, lastError: null },
+        }),
+        connect: (propertyIds) => connectMutation.mutateAsync({ propertyIds }),
+        isConnecting: connectMutation.isPending,
+    };
+}
+export function GoogleAnalyticsConnectForm(props) {
+    const setup = useGoogleAnalyticsSetup();
+    return (_jsx(OAuthSetupConnectForm, { ...props, integration: GQLIntegration.GoogleAnalytics, oauthStartPath: "/oauth/google-analytics/start", copy: copy, setup: setup, treeItems: googleAnalyticsTreeItems }));
+}

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

@@ -0,0 +1,21 @@
+import type { ProviderPresentation } from "../../types.js";
+import type { ConnectSuccessStep } from "./OAuthSingleAccountConnectForm.js";
+import type { ImportNotice } from "./types.js";
+export declare function importStartedTitle(providerName: string): string;
+export declare function importStartedSuccessStep(providerName: string, notice: ImportNotice): ConnectSuccessStep;
+type ImportStartedNoticeProps = {
+    providerName: string;
+    notice: ImportNotice;
+};
+export declare function ImportStartedNotice(props: ImportStartedNoticeProps): import("react/jsx-runtime").JSX.Element;
+type ImportStartedStepProps = {
+    provider: ProviderPresentation<string>;
+    notice: ImportNotice;
+    totalSteps: number;
+    onDone: () => void;
+    status?: string;
+    title?: string;
+};
+export declare function ImportStartedStep(props: ImportStartedStepProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImportStartedNotice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImportStartedNotice.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/ImportStartedNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAM5C,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE/D;AAMD,wBAAgB,wBAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAG,kBAAkB,CAMvG;AAED,KAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAYlE;AAED,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA2B9D"}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConnectWizardShell } from "./ConnectWizardShell.js";
+import { Button } from "#components/button/index";
+const importTimingNote = "The first import can take a while, depending on how much data there is. You can close this dialog and keep using Manta. Your data will appear once the import finishes.";
+export function importStartedTitle(providerName) {
+    return `Importing your ${providerName} data`;
+}
+function ImportTimingNote() {
+    return _jsx("p", { className: "typography-caption text-muted-foreground", children: importTimingNote });
+}
+export function importStartedSuccessStep(providerName, notice) {
+    return {
+        title: importStartedTitle(providerName),
+        description: notice.description,
+        content: _jsx(ImportTimingNote, {}),
+    };
+}
+export function ImportStartedNotice(props) {
+    const { providerName, notice } = props;
+    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: importStartedTitle(providerName) }), _jsx("p", { className: "typography-caption text-muted-foreground", children: notice.description })] }), _jsx(ImportTimingNote, {})] }));
+}
+export function ImportStartedStep(props) {
+    const { provider, notice, totalSteps, onDone, status = "Connected", title = importStartedTitle(provider.name), } = props;
+    return (_jsx(ConnectWizardShell, { provider: provider, status: status, totalSteps: totalSteps, currentStep: totalSteps, stepTitle: title, stepDescription: notice.description, primaryAction: _jsx(Button, { variant: "secondary", onClick: onDone, children: "Done" }), children: _jsx(ImportTimingNote, {}) }));
+}

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

@@ -0,0 +1,45 @@
+import { GQLInferalLocation, type GQLInferalProviderInput } from "@manta-eu/client";
+import type { ConnectFormProps, ProviderSetupInstructions, StepConfig } from "./types.js";
+export type CredentialField<Key extends string = string> = {
+    key: Key;
+    label: string;
+    placeholder: string;
+    requiredMessage: string;
+    secret?: boolean;
+    validate?: {
+        check: (value: string) => boolean;
+        message: string;
+    };
+};
+export type CredentialStep<Key extends string = string> = {
+    title: string;
+    description: string;
+    fields: readonly CredentialField<Key>[];
+};
+export type InferalCredentialFormConfig<Key extends string = string> = {
+    providerName: string;
+    fieldIdPrefix: string;
+    identifier: CredentialField<Key> & {
+        stepTitle: string;
+        stepDescription: string;
+    };
+    secrets: CredentialStep<Key>;
+    settings?: CredentialStep<Key>;
+    streamNamePlaceholder: string;
+    locationStepDescription: string;
+    buildProviderInput: (credentials: Record<Key, string>) => GQLInferalProviderInput;
+};
+export declare function fieldId(prefix: string, key: string): string;
+type Values = {
+    streamName: string;
+    location: GQLInferalLocation;
+    [credential: string]: string;
+};
+export declare function shouldAutofillStreamName(changedField: string | undefined, identifierKey: string, streamNameDirty: boolean): boolean;
+export declare function createSteps<Key extends string>(config: InferalCredentialFormConfig<Key>, locationLabels: Readonly<Record<GQLInferalLocation, string>>, setup?: ProviderSetupInstructions): StepConfig<Values>[];
+export type InferalCredentialConnectFormProps<Key extends string> = ConnectFormProps & {
+    config: InferalCredentialFormConfig<Key>;
+};
+export declare function InferalCredentialConnectForm<Key extends string>(props: InferalCredentialConnectFormProps<Key>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InferalCredentialConnectForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InferalCredentialConnectForm.d.ts","sourceRoot":"","sources":["../../../../../src/routes/integrations/components/connect-forms/InferalCredentialConnectForm.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAElB,KAAK,uBAAuB,EAC7B,MAAM,kBAAkB,CAAC;AAU1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMvF,MAAM,MAAM,eAAe,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD,GAAG,EAAE,GAAG,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CACnE,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,SAAS,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,2BAA2B,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IACrE,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,GAAG;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,MAAM,CAAA;KAAE,CAAC;IAClF,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAE7B,QAAQ,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,MAAM,CAAC;IAChC,kBAAkB,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,uBAAuB,CAAC;CACnF,CAAC;AAKF,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE3D;AAcD,KAAK,MAAM,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,kBAAkB,CAAC;IAAC,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AASjG,wBAAgB,wBAAwB,CACtC,YAAY,EAAE,MAAM,GAAG,SAAS,EAChC,aAAa,EAAE,MAAM,EACrB,eAAe,EAAE,OAAO,GACvB,OAAO,CAET;AA6DD,wBAAgB,WAAW,CAAC,GAAG,SAAS,MAAM,EAC5C,MAAM,EAAE,2BAA2B,CAAC,GAAG,CAAC,EACxC,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,EAC5D,KAAK,CAAC,EAAE,yBAAyB,GAChC,UAAU,CAAC,MAAM,CAAC,EAAE,CAqFtB;AAED,MAAM,MAAM,iCAAiC,CAAC,GAAG,SAAS,MAAM,IAAI,gBAAgB,GAAG;IACrF,MAAM,EAAE,2BAA2B,CAAC,GAAG,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,GAAG,SAAS,MAAM,EAAE,KAAK,EAAE,iCAAiC,CAAC,GAAG,CAAC,2CAmG7G"}

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" }) })] }));
+}