import { ReactElement } from 'react';
import { default as Color } from 'color';
import { ClientAnalytics, ProductType, ReferrerType } from '@zeniai/client-analytics';
import { AccountBase, FetchState, FetchStateAndError, FundingAccount, ID, PlaidConnectionDetails, PlaidLinkTokenType } from '@zeniai/client-epic-state';
import { FormSectionProps } from '../../../formElements/common/formSection';
import { SingleSelectPickerFieldValue } from '../../../formElements/singleSelectPickerField/SingleSelectPickerField';
/**
 * Component & its Props
 */
export interface Props extends FormSectionProps {
    allBankAccounts: AccountBase[];
    allFundingAccounts: FundingAccount[];
    analytics: ClientAnalytics;
    connectedAccountProvider: string;
    pageName: string;
    plaidConnectionDetails: PlaidConnectionDetails;
    productType: ProductType;
    accountSelectContainerStyle?: React.CSSProperties;
    bottomComponent?: React.ReactNode;
    defaultSectionSubTitle?: string;
    defaultSectionTitle?: string;
    header?: string;
    /** Optional header icon (e.g. charge card setup); defaults to ACH payment icon. */
    icon?: {
        color: Color;
        element: ReactElement;
    };
    isCompleted?: boolean;
    isError?: boolean;
    primaryFundingAccount?: FundingAccount;
    referrer?: ReferrerType;
    sectionTitle?: string;
    showCompletedIcon?: boolean;
    showZeniAccountSection?: boolean;
    style?: React.CSSProperties;
    onEstablishConnectionClick: (publicToken: ID, linkTokenType?: PlaidLinkTokenType) => void;
    onEstablishConnectionSuccess: () => void;
    onFetchLinkTokenClick: (plaidLinkTokenType: PlaidLinkTokenType, id?: ID) => void;
    onUpdatePaymentAccountLoginStatus: (id: ID, plaidLinkTokenType: PlaidLinkTokenType) => void;
    onUpdatePaymentAccountStatus: (verificationStatusCode: string, paymentAccountId: ID, plaidLinkTokenType: PlaidLinkTokenType) => void;
}
export declare function SpendMgmtSetupAccountSection({ primaryFundingAccount, allFundingAccounts, allBankAccounts, plaidConnectionDetails, sectionId, isDisabled, sectionTitle, style, analytics, productType, referrer, accountSelectContainerStyle, connectedAccountProvider, isCompleted, showCompletedIcon, showZeniAccountSection, pageName, onFetchLinkTokenClick, onEstablishConnectionClick, onUpdatePaymentAccountStatus, onEstablishConnectionSuccess, bottomComponent, icon: iconProp, }: Readonly<Props>): import("react/jsx-runtime").JSX.Element;
export declare const getPaymentAccountIcon: (icon: {
    color: Color;
    element: ReactElement;
}, _isDarkMode: boolean, primaryFundingAccount?: FundingAccount, depositAccountIndex?: number) => import("react/jsx-runtime").JSX.Element;
export declare const PaymentActionSection: ({ productType, isLoginRequired, isUpdateLinkClicked, isPendingVerification, fetchAndUpdateStatues, onUpdateLinkTokenClick, onChaseInfoClick, }: {
    fetchAndUpdateStatues: {
        fetchStatus?: FetchStateAndError;
        linkFetchStatus?: FetchStateAndError;
        linkUpdateStatus?: FetchStateAndError;
        prevFetchState?: FetchState;
        prevUpdateState?: FetchState;
        updateStatus?: FetchStateAndError;
    };
    isLoginRequired: boolean;
    isPendingVerification: boolean;
    isUpdateLinkClicked: boolean;
    productType: ProductType;
    onChaseInfoClick: () => void;
    onUpdateLinkTokenClick: () => void;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * Form Data Type
 */
export interface SetUpAccountSectionFormData {
    account: SingleSelectPickerFieldValue;
    fundingAccount: SingleSelectPickerFieldValue;
    enableAutoPay?: boolean;
}
type FormDataKeys = keyof SetUpAccountSectionFormData;
export declare const uniqueName: (sectionId: string, key: FormDataKeys) => `${string}.account` | `${string}.fundingAccount` | `${string}.enableAutoPay`;
export type FormDataKeyUniqueNames = ReturnType<typeof uniqueName>;
export {};