Activation form

'use client';

import { useState } from 'react';
import type { ActivationFormProps } from '@ekanos/sdk';
import { BaseActivationForm } from '@ekanos/sdk/components';
import { useActivateIntegration } from '@ekanos/sdk/hooks';
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@ekanos/ui/form';
import { Input } from '@ekanos/ui/input';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import { ACME_API_KEY, ACME_MERCHANT_ID } from './config';

const ActivationSchema = z.object({
  [ACME_API_KEY]: z.string().min(1, 'Required'),
  [ACME_MERCHANT_ID]: z.string().min(1, 'Required'),
});

export function AcmePaymentsActivationForm({
  accountId,
  sourceId,
  onSuccess,
  onCancel,
  isLoading: externalLoading = false,
  inline = false,
}: ActivationFormProps) {
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const form = useForm({
    resolver: zodResolver(ActivationSchema),
    defaultValues: { [ACME_API_KEY]: '', [ACME_MERCHANT_ID]: '' },
  });

  const activate = useActivateIntegration();
  const isLoading = externalLoading || activate.isPending;

  const handleSubmit = async (data: Record<string, unknown>) => {
    setError(null);
    try {
      await activate.mutateAsync({
        accountId,
        sourceId,
        integrationSlug: 'acme-payments',
        activationData: data,
      });
      setSuccess(true);
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : 'Could not connect.');
    }
  };

  return (
    <BaseActivationForm
      isOpen
      inline={inline}
      onClose={() => onCancel?.()}
      title="Connect Acme Payments"
      description="Bring volume, activity and refunds into your dashboard."
      form={form}
      onSubmit={handleSubmit}
      isLoading={isLoading}
      error={error}
      success={success}
      successTitle="Acme Payments is connected"
      onSuccessClose={() =>
        onSuccess?.({
          success: true,
          configData: { merchantId: form.getValues(ACME_MERCHANT_ID) },
          externalId: form.getValues(ACME_MERCHANT_ID),
        })
      }
      submitButtonText="Connect Acme Payments"
      submitButtonLoadingText="Connecting…"
    >
      <FormField
        control={form.control}
        name={ACME_API_KEY}
        render={({ field }) => (
          <FormItem>
            <FormLabel>API key</FormLabel>
            <FormControl>
              <Input type="password" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name={ACME_MERCHANT_ID}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Merchant ID</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </BaseActivationForm>
  );
}

{
  onSuccess?: (result: ActivationResult) => void;
  onCancel?: () => void;
  isLoading?: boolean;
  inline?: boolean;        // render inline instead of in a dialog
  teamAccountId?: string;  // the team account the user is activating within
}

const data = {
  apiKey: 'user-entered', // String → secret
  merchantId: 'user-entered', // String → secret
  retryCount: 3, // Number → NOT a secret
  advanced: {}, // Object → NOT a secret
};

// Server-side:
const apiKey = await ctx.secrets.get('apiKey');
const merchantId = await ctx.secrets.get('merchantId');

// src/config.ts
export const ACME_API_KEY = 'acme_api_key';
export const ACME_MERCHANT_ID = 'acme_merchant_id';

'use client';

import type { ActivationFormProps } from '@ekanos/sdk';
import { OAuthActivationForm } from '@ekanos/sdk/components';
import {
  createPartnerConnectionCheck,
  partnerOAuthConnectPath,
  partnerOAuthErrorParam,
} from '@ekanos/sdk/hooks';

const SLUG = 'acme-payments';

export function AcmeOAuthActivationForm(props: ActivationFormProps) {
  return (
    <OAuthActivationForm
      {...props}
      config={{
        slug: SLUG,
        displayName: 'Acme',
        title: 'Connect Acme',
        description: 'Sign in with Acme to bring your payments into Ekanos.',
        successMessage: 'Your Acme account is connected.',
        connectPath: partnerOAuthConnectPath(SLUG),
      }}
      checkConnection={createPartnerConnectionCheck(SLUG)}
      errorParam={partnerOAuthErrorParam(SLUG)}
    />
  );
}

components: {
  activationForm: AcmePaymentsActivationForm,
}

try {
  await activate.mutateAsync(/* ... */);
} catch (cause) {
  setError(cause instanceof Error ? cause.message : 'Could not connect.');
}

const mockActions = {
  activate: async () => ({ success: true }),
  deactivate: async () => ({ success: true }),
};

<IntegrationActivationProvider actions={mockActions}>
  <AcmePaymentsActivationForm {...props} />
</IntegrationActivationProvider>;