@npm-zenwork/tax-remittance-ui 0.2.3 → 0.2.5

package/dist/components/payments/BankAccountDrawer.d.ts

@@ -0,0 +1,15 @@
+import { BankAccountResponse } from '../../types/bankAccount';
+interface BankAccountDrawerProps {
+    open: boolean;
+    entityId: number | null;
+    /** Pass an account to edit it; omit to add a new one. */
+    account?: BankAccountResponse | null;
+    onClose: () => void;
+    onSaved?: (bankAccountDetailId: number) => void;
+}
+/**
+ * Slide-over for adding or editing a bank account without leaving the payment
+ * flow. Shares its validation with the settings form (createBankAccountSchema).
+ */
+export declare function BankAccountDrawer({ open, entityId, account, onClose, onSaved, }: BankAccountDrawerProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/BankConnectionMethodModal.d.ts

@@ -0,0 +1,11 @@
+interface BankConnectionMethodModalProps {
+    open: boolean;
+    onClose: () => void;
+    onAddManually: () => void;
+}
+/**
+ * Asks how to connect a bank account before opening the add form. Plaid isn't
+ * implemented yet, so that option is shown but not selectable.
+ */
+export declare function BankConnectionMethodModal({ open, onClose, onAddManually, }: BankConnectionMethodModalProps): import('react').ReactPortal | null;
+export {};

package/dist/components/payments/BankConnectionMethodPicker.d.ts

@@ -0,0 +1,10 @@
+interface BankConnectionMethodPickerProps {
+    onAddManually: () => void;
+    disabled?: boolean;
+}
+/**
+ * "Connect Your Bank Account" method choice. Plaid isn't implemented yet, so
+ * that option is present but not selectable.
+ */
+export declare function BankConnectionMethodPicker({ onAddManually, disabled, }: BankConnectionMethodPickerProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/InlineRowActions.d.ts

@@ -0,0 +1,17 @@
+interface InlineRowActionsProps {
+    /** Eye icon — omitted when the layout has no view action. */
+    onView?: () => void;
+    /** Pencil icon — Draft rows only. */
+    onEdit?: () => void;
+    button?: {
+        label: string;
+        onClick: () => void;
+        disabled?: boolean;
+    };
+}
+/**
+ * Row actions rendered inline (rather than in the row menu): the view/edit
+ * icons plus the tab's primary button — Submit & Pay, View or Re-Submit.
+ */
+export declare function InlineRowActions({ onView, onEdit, button }: InlineRowActionsProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/PaymentActionButton.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface PaymentActionButtonProps {
+    onClick: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+}
+/** Outlined pill used for the inline row actions (Submit & Pay, View). */
+export declare function PaymentActionButton({ onClick, disabled, children, }: PaymentActionButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/PaymentFormSection.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 interface PaymentFormSectionProps {
-    title: string;
+    title: ReactNode;
     children: ReactNode;
     isFirst?: boolean;
     headerAction?: ReactNode;

package/dist/components/payments/PaymentRowMenu.d.ts

@@ -0,0 +1,14 @@
+import { PaymentActionType } from './paymentsTableConfig';
+interface PaymentRowMenuProps {
+    actionType: PaymentActionType;
+    onView?: () => void;
+    onViewPdf?: () => void;
+    onEdit?: () => void;
+    onSubmit?: () => void;
+    onResubmit?: () => void;
+    isSubmitting?: boolean;
+    isViewPdfLoading?: boolean;
+}
+/** Vertical-dots row menu — holds the actions available for the row's status. */
+export declare function PaymentRowMenu(props: PaymentRowMenuProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/PaymentStatusBadge.d.ts

@@ -0,0 +1,7 @@
+interface PaymentStatusBadgeProps {
+    status: string | null;
+    category: 'federal' | 'state';
+}
+/** Status pill for the Tax Payments table. */
+export declare function PaymentStatusBadge({ status, category }: PaymentStatusBadgeProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/PaymentStepper.d.ts

@@ -0,0 +1,14 @@
+interface PaymentStepperProps {
+    steps: string[];
+    /** 1-based index of the step currently being filled in. Earlier steps render as done. */
+    current: number;
+    /**
+     * Highest step to render as done. Defaults to everything before `current` —
+     * pass `current` itself once the active step's requirement is satisfied.
+     */
+    completed?: number;
+    className?: string;
+}
+/** `01 Payment Details — 02 Bank Account — 03 Review & Authorize` progress header. */
+export declare function PaymentStepper({ steps, current, completed, className }: PaymentStepperProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/PaymentTableRow.d.ts

@@ -0,0 +1,14 @@
+import { PaymentTableLayout } from './paymentsTableConfig';
+import { RemittancePaymentRow } from './remittancePaymentMappers';
+interface PaymentTableRowProps {
+    row: RemittancePaymentRow;
+    layout: PaymentTableLayout;
+    isSubmitting: boolean;
+    isViewPdfLoading: boolean;
+    onView: () => void;
+    onEdit: () => void;
+    onViewPdf: () => void;
+    onSubmit: () => void;
+}
+export declare function PaymentTableRow({ row, layout, isSubmitting, isViewPdfLoading, onView, onEdit, onViewPdf, onSubmit, }: PaymentTableRowProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/PaymentsNeedAttention.d.ts

@@ -0,0 +1,14 @@
+import { RemittancePaymentRow } from './remittancePaymentMappers';
+interface PaymentsNeedAttentionProps {
+    rows: RemittancePaymentRow[];
+    onViewAll: () => void;
+    onView: (row: RemittancePaymentRow) => void;
+    onResubmit: (row: RemittancePaymentRow) => void;
+}
+/**
+ * Rejected payments carousel above the payments table — one payment at a time,
+ * with the arrows and dots from the design. Renders nothing when nothing is
+ * rejected.
+ */
+export declare function PaymentsNeedAttention({ rows, onViewAll, onView, onResubmit, }: PaymentsNeedAttentionProps): import("react").JSX.Element | null;
+export {};

package/dist/components/payments/RecurringPaymentToggle.d.ts

@@ -0,0 +1,16 @@
+interface RecurringPaymentToggleProps {
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    frequency: string;
+    endDate: string;
+    onEndDateChange: (endDate: string) => void;
+    endDateError?: string;
+    disabled?: boolean;
+}
+/**
+ * "Make This a Recurring Payment" panel. When enabled, the backend generates
+ * one scheduled payment per occurrence of the chosen frequency, up to the end
+ * date entered here.
+ */
+export declare function RecurringPaymentToggle({ enabled, onChange, frequency, endDate, onEndDateChange, endDateError, disabled, }: RecurringPaymentToggleProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/RecurringPeriodRows.d.ts

@@ -0,0 +1,34 @@
+import { StatePaymentOption } from '../../types/statePayment';
+export interface RecurringPeriodRow {
+    id: number;
+    taxPeriod: string;
+    taxAmount: string;
+    paymentDate: string;
+}
+export declare function createRecurringPeriodRow(id: number): RecurringPeriodRow;
+interface RecurringPeriodRowsProps {
+    rows: RecurringPeriodRow[];
+    taxPeriodOptions: StatePaymentOption[];
+    onChange: (id: number, patch: Partial<Omit<RecurringPeriodRow, 'id'>>) => void;
+    onRemove: (id: number) => void;
+    onAdd: () => void;
+    disabled?: boolean;
+}
+/**
+ * Extra tax period / amount / date rows for a recurring schedule.
+ *
+ * UI-only for now: StatePaymentDraft and CreateStatePaymentRequest each hold a
+ * single period, so only the first row (owned by the form itself) is
+ * submitted. These rows capture the intended schedule until the API accepts
+ * one.
+ */
+export declare function RecurringPeriodRows({ rows, taxPeriodOptions, onChange, onRemove, onAdd, disabled, }: RecurringPeriodRowsProps): import("react").JSX.Element;
+interface PeriodRowDeleteButtonProps {
+    onClick?: () => void;
+    label: string;
+    disabled?: boolean;
+    title?: string;
+}
+/** Trash button aligned to the input row, clearing the field labels above it. */
+export declare function PeriodRowDeleteButton({ onClick, label, disabled, title, }: PeriodRowDeleteButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/StateBankDetailsForm.d.ts

@@ -0,0 +1,8 @@
+import { EntityDetailsResponse } from '../../types/entity';
+import { StatePaymentDraft } from '../../types/statePaymentFlow';
+interface StateBankDetailsFormProps {
+    entity: EntityDetailsResponse | null;
+    paymentDraft: StatePaymentDraft;
+}
+export declare function StateBankDetailsForm({ entity, paymentDraft }: StateBankDetailsFormProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/StatePaymentReviewPanel.d.ts

@@ -0,0 +1,14 @@
+import { EntityDetailsResponse } from '../../types/entity';
+import { StatePaymentDraft } from '../../types/statePaymentFlow';
+interface StatePaymentReviewPanelProps {
+    entity: EntityDetailsResponse | null;
+    paymentDraft: StatePaymentDraft;
+}
+/**
+ * Read-only summary beside the authorization agreement. Labels are resolved
+ * from the same cached reference queries the earlier steps use, falling back
+ * to the raw draft values when a lookup isn't available (e.g. a draft opened
+ * straight from the payments list).
+ */
+export declare function StatePaymentReviewPanel({ entity, paymentDraft }: StatePaymentReviewPanelProps): import("react").JSX.Element;
+export {};

package/dist/components/payments/federalPaymentSteps.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Progress header shared by the federal payment flow — shown on the payment
+ * form (step 1) and on both step 2 screens: reporting agent authorization
+ * (businesses) and EFTPS individual enrollment (individuals).
+ */
+export declare const FEDERAL_PAYMENT_STEPS: string[];

package/dist/components/payments/federalPaymentUtils.d.ts

@@ -1,5 +1,9 @@
 export { getMinSettlementDate } from './settlementDateRules';
 export declare function maskAccountNumber(accountNumber: string): string;
+/** `XXXX-1234` — the mask used by the bank account cards and pickers. */
+export declare function maskAccountNumberDashed(accountNumber: string): string;
+/** ISO `2026-08-18` → `08/18/2026`. Returns the input unchanged if unparseable. */
+export declare function formatDisplayDate(isoDate: string): string;
 export declare function getTaxPeriodOptions(): Array<{
     value: string;
     label: string;

package/dist/components/payments/paymentsTableConfig.d.ts

@@ -1,15 +1,26 @@
 import { ComponentType, SVGProps } from 'react';
+/** Bucket a payment row falls into — derived from its status. */
 export type PaymentStatus = 'drafts' | 'scheduled' | 'submitted' | 'rejected' | 'paid';
+/** Tabs on the Tax Payments table — every bucket, plus the unfiltered "All". */
+export type PaymentTab = 'all' | PaymentStatus;
 export type PaymentActionType = 'draft-actions' | 'view-pdf' | 'view-link' | 'rejected-actions';
-export interface TabTableConfig {
-    columns: string[];
-    emptyMessage: string;
-    actionType: PaymentActionType;
-}
 export declare const statusTabs: {
-    key: PaymentStatus;
+    key: PaymentTab;
     label: string;
-    Icon: ComponentType<SVGProps<SVGSVGElement>>;
-    iconClassName: string;
+    /** Omitted for "All", which is text-only in the design. */
+    Icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    iconClassName?: string;
 }[];
-export declare const tabTableConfig: Record<PaymentStatus, TabTableConfig>;
+/**
+ * How a tab lays out its rows:
+ *  - `default`     status pill, actions in the row menu (unlabelled column)
+ *  - `view-action` same columns, inline View button
+ *  - `draft`       reference ID, no status, view/edit icons + Submit & Pay
+ *  - `rejected`    reference ID, rejected date and reason, view icon + Re-Submit
+ */
+export type PaymentTableLayout = 'default' | 'view-action' | 'draft' | 'rejected';
+export declare const tabLayout: Record<PaymentTab, PaymentTableLayout>;
+export declare const layoutColumns: Record<PaymentTableLayout, string[]>;
+export declare const tabEmptyMessage: Record<PaymentTab, string>;
+/** Actions offered for a row, keyed by the row's own bucket (not the open tab). */
+export declare const rowActionType: Record<PaymentStatus, PaymentActionType>;

package/dist/components/payments/remittancePaymentMappers.d.ts

@@ -11,19 +11,22 @@ export interface RemittancePaymentRow {
     paymentDate: string;
     status: string | null;
     reason: string | null;
+    /** Federal tax form / state reason for payment. `—` when unknown. */
+    formType: string;
     tab: PaymentStatus;
 }
-export declare function formatTaxPeriod(taxPeriod: string): string;
+export declare function formatTaxPeriod(taxPeriod: string | null | undefined): string;
 export declare function mapRemittancePaymentToRow(payment: {
     id: number;
     category: 'federal' | 'state';
     referenceNumber: string | null;
     jurisdiction: string;
-    taxPeriod: string;
+    taxPeriod: string | null;
     amount: number;
     paymentDate: string;
     status: string | null;
     reason: string | null;
+    formType?: string | null;
 }): RemittancePaymentRow;
 export declare function mapFederalPaymentToRemittanceRow(payment: FederalPaymentResponse): RemittancePaymentRow;
 export declare function mapStatePaymentToRemittanceRow(payment: StatePaymentResponse): RemittancePaymentRow;

package/dist/components/payments/statePaymentAuthorizationConfig.d.ts

@@ -1,2 +1,2 @@
-export declare const statePaymentAuthorizationText = "By proceeding, you authorize the payment to the selected tax authority and acknowledge that you are responsible for the accuracy of the information provided.";
+export declare const statePaymentAuthorizationText = "Before your payment is processed, please review the information carefully. By proceeding, you authorize to initiate this payment to the selected tax authority using your chosen bank account. You acknowledge that you are responsible for ensuring the accuracy of the payment information and for complying with all applicable tax filing and payment requirements.";
 export declare const statePaymentAuthorizationCheckboxLabel = "I have reviewed the details and authorize this payment.";

package/dist/components/payments/useStatePaymentDraftSave.d.ts

@@ -0,0 +1,11 @@
+import { EntityDetailsResponse } from '../../types/entity';
+import { StatePaymentDraft } from '../../types/statePaymentFlow';
+/**
+ * Persist an in-progress state payment as a Draft. Shared by the Bank Account
+ * step and the Authorization step so "Save as Draft" behaves identically in
+ * both places.
+ */
+export declare function useStatePaymentDraftSave(entity: EntityDetailsResponse | null): {
+    upsertPayment: (paymentDraft: StatePaymentDraft) => Promise<import('../../types/statePayment').StatePaymentResponse | null>;
+    saveAsDraft: (paymentDraft: StatePaymentDraft) => Promise<void>;
+};

package/dist/components/settings/BankAccountActionsMenu.d.ts

@@ -3,6 +3,8 @@ interface BankAccountActionsMenuProps {
     account: BankAccountResponse;
     entityId: number;
     onEdit: (account: BankAccountResponse) => void;
+    /** `kebab` is the icon-only trigger used on the bank account cards. */
+    variant?: 'button' | 'kebab';
 }
-export declare function BankAccountActionsMenu({ account, entityId, onEdit }: BankAccountActionsMenuProps): import("react").JSX.Element;
+export declare function BankAccountActionsMenu({ account, entityId, onEdit, variant, }: BankAccountActionsMenuProps): import("react").JSX.Element;
 export {};

package/dist/components/settings/TaxAccountDrawer.d.ts

@@ -0,0 +1,22 @@
+import { z } from 'zod';
+import { TaxAccountDetailResponse } from '../../types/taxAccountDetails';
+declare const taxAccountSchema: z.ZodObject<{
+    state: z.ZodString;
+    reasonForPayment: z.ZodString;
+    accountId: z.ZodString;
+    stateTaxId: z.ZodString;
+    taxYear: z.ZodOptional<z.ZodString>;
+    frequency: z.ZodOptional<z.ZodString>;
+    status: z.ZodString;
+    notes: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type TaxAccountDrawerValues = z.infer<typeof taxAccountSchema>;
+interface TaxAccountDrawerProps {
+    open: boolean;
+    entityId: number | null;
+    /** When set, the drawer edits this account instead of creating one. */
+    account?: TaxAccountDetailResponse | null;
+    onClose: () => void;
+}
+export declare function TaxAccountDrawer({ open, entityId, account, onClose }: TaxAccountDrawerProps): import("react").JSX.Element;
+export {};

package/dist/components/settings/settingsNavConfig.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, SVGProps } from 'react';
-export type SettingsSectionId = 'bank-accounts' | 'tax-accounts' | 'payment-history' | 'entity-details';
+export type SettingsSectionId = 'bank-accounts' | 'tax-accounts' | 'entity-details';
 export interface SettingsNavItem {
     id: SettingsSectionId;
     title: string;

package/dist/components/settings/taxAccountDrawerConfig.d.ts

@@ -0,0 +1,5 @@
+/** Filing cadences offered for a tax account. */
+export declare const TAX_ACCOUNT_FREQUENCIES: readonly ["Monthly", "Quarterly", "Semi-Annually", "Annually"];
+export declare const TAX_ACCOUNT_STATUSES: readonly ["Active", "Inactive"];
+/** Current year and the four before it — the years an account can be filed for. */
+export declare function getTaxAccountYearOptions(): string[];

package/dist/components/tax-forms/TaxFormCard.d.ts

@@ -0,0 +1,7 @@
+import { TaxFormResponse } from '../../types/taxForm';
+interface TaxFormCardProps {
+    form: TaxFormResponse;
+    onAction?: (form: TaxFormResponse) => void;
+}
+export declare function TaxFormCard({ form, onAction }: TaxFormCardProps): import("react").JSX.Element;
+export {};

package/dist/components/tax-forms/TaxFormsGrid.d.ts

@@ -0,0 +1,9 @@
+import { TaxFormResponse } from '../../types/taxForm';
+interface TaxFormsGridProps {
+    forms?: TaxFormResponse[];
+    isLoading?: boolean;
+    isError?: boolean;
+    onFormAction?: (form: TaxFormResponse) => void;
+}
+export declare function TaxFormsGrid({ forms, isLoading, isError, onFormAction, }: TaxFormsGridProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/SideDrawer.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+interface SideDrawerProps {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+    /** Pinned to the bottom of the panel — action buttons live here. */
+    footer?: ReactNode;
+    labelledById?: string;
+    /** Turn off while another drawer is stacked on top, so Escape closes that one only. */
+    closeOnEscape?: boolean;
+}
+/**
+ * Right-hand slide-over panel. Same overlay/escape/scroll-lock behaviour as
+ * the centred modals, but anchored to the edge and full height.
+ */
+export declare function SideDrawer({ open, title, onClose, children, footer, labelledById, closeOnEscape, }: SideDrawerProps): import('react').ReactPortal | null;
+export {};

package/dist/components/ui/StatusPill.d.ts

@@ -0,0 +1,10 @@
+interface StatusPillProps {
+    active: boolean;
+    /** `outline` matches the tax accounts table; `filled` the bank account cards. */
+    variant?: 'filled' | 'outline';
+    activeLabel?: string;
+    inactiveLabel?: string;
+}
+/** Small dot + label pill for Active / Inactive state. */
+export declare function StatusPill({ active, variant, activeLabel, inactiveLabel, }: StatusPillProps): import("react").JSX.Element;
+export {};