@veevarts/design-system 2.0.0 → 2.1.0-beta.2

package/dist/patterns/InstallmentFundAssignment/InstallmentFundAssignment.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentFundAssignmentProps } from './types';
-export declare function InstallmentFundAssignment({ assignments, funds, labels: customLabels, classNames, isSaving, hasSavedAssignments, isFundPickerOpen, activeAssignmentId, modalPortalContainer, footer, onAssignmentsChange, onOpenFundPicker, onCloseFundPicker, onCollapseChange, onSave, }: InstallmentFundAssignmentProps): JSX.Element;
+export declare function InstallmentFundAssignment({ assignments, funds, labels: customLabels, classNames, isSaving, hasSavedAssignments, showSavedIndicator, isCollapsed, isFundPickerOpen, activeAssignmentId, modalPortalContainer, footer, onAssignmentsChange, onOpenFundPicker, onCloseFundPicker, onCollapseChange, onSave, }: InstallmentFundAssignmentProps): JSX.Element;

package/dist/patterns/InstallmentFundAssignment/types.d.ts

@@ -14,6 +14,7 @@ export type InstallmentFundAssignmentEntry = {
 };
 export type InstallmentFundAssignmentLabels = {
     title?: string;
+    saved?: string;
     singleFund?: string;
     splitFunds?: string;
     saveAssignment?: string;
@@ -55,6 +56,8 @@ export type InstallmentFundAssignmentProps = {
     classNames?: InstallmentFundAssignmentClassNames;
     isSaving?: boolean;
     hasSavedAssignments?: boolean;
+    showSavedIndicator?: boolean;
+    isCollapsed?: boolean;
     isFundPickerOpen?: boolean;
     activeAssignmentId?: string | null;
     modalPortalContainer?: Element;

package/dist/patterns/InstallmentSchedule/InstallmentSchedule.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentScheduleProps } from './types';
-export declare function InstallmentSchedule({ mode: controlledMode, donationAmount, currency, locale, installments, automaticSettings, defaultTab, showTitle, showCard, showSavePayment, showTabs, inputs, startDate, labels: customLabels, classNames, isSaving, isModeSwitchDisabled, onModeChange, onAutomaticSettingsChange, onInstallmentsChange, onSave, }: InstallmentScheduleProps): JSX.Element;
+export declare function InstallmentSchedule({ mode: controlledMode, donationAmount, currency, locale, installments, automaticSettings, defaultTab, showTitle, showCard, showSavePayment, showTabs, inputs, startDate, firstInstallmentDateOverride, labels: customLabels, classNames, isSaving, showSavedIndicator, isModeSwitchDisabled, onModeChange, onAutomaticSettingsChange, onInstallmentsChange, onSave, onCancel, }: InstallmentScheduleProps): JSX.Element;

package/dist/patterns/InstallmentSchedule/InstallmentTable.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { InstallmentTableProps } from './types';
-export declare function InstallmentTable({ installments, currency, locale, showTitle, showCard, showEditPayment, showDelete, payNowHiddenStatuses, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;
+export declare function InstallmentTable({ installments, currency, locale, showTitle, showCard, showEditPayment, showDelete, payNowHiddenStatuses, showSavedIndicator, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;

package/dist/patterns/InstallmentSchedule/index.d.ts

@@ -1,5 +1,5 @@
 export { InstallmentSchedule } from './InstallmentSchedule';
 export { InstallmentScheduleSkeleton } from './InstallmentScheduleSkeleton';
 export { InstallmentTable } from './InstallmentTable';
-export { generateAutomaticInstallments } from './utils';
+export { applyFirstInstallmentDateOverride, generateAutomaticInstallments } from './utils';
 export type { AutomaticScheduleSettings, InstallmentFrequency, InstallmentScheduleInput, InstallmentTableLabels, InstallmentTableProps, InstallmentScheduleClassNames, InstallmentScheduleLabels, InstallmentScheduleMode, InstallmentScheduleProps, InstallmentStatus, ScheduledInstallment, } from './types';

package/dist/patterns/InstallmentSchedule/types.d.ts

@@ -4,9 +4,18 @@ export type InstallmentFrequency = 'weekly' | 'monthly' | 'quarterly' | 'annual'
 export type InstallmentStatus = 'scheduled' | 'paid' | 'payment_due' | 'overdue' | 'failed' | 'refunded' | 'disputed' | 'canceled' | 'processing' | 'pending_confirmation';
 export type ScheduledInstallment = {
     id: string;
+    name?: string | null;
     dueDate: string;
     amount: number;
     status?: InstallmentStatus | (string & {});
+    /**
+     * When the installment was actually paid: a calendar date (`YYYY-MM-DD`)
+     * or an ISO timestamp (shown in the viewer's timezone). Named after the
+     * field the commitments API already returns for this, so installments
+     * passed straight through from the API carry it without any mapping.
+     * `InstallmentTable` shows it on `paid` rows only; omit it to show none.
+     */
+    fulfilledAt?: string | null;
 };
 export type AutomaticScheduleSettings = {
     numberOfInstallments: number;
@@ -16,11 +25,13 @@ export type AutomaticScheduleSettings = {
 export type InstallmentScheduleInput = keyof AutomaticScheduleSettings | 'dayOfMonth';
 export type InstallmentScheduleLabels = {
     title?: string;
+    saved?: string;
     automaticMode?: string;
     manualMode?: string;
     createInstallments?: string;
     generateSchedule?: string;
     saveInstallments?: string;
+    cancelEdit?: string;
     addInstallment?: string;
     emptyAutomatic?: string;
     emptyManual?: string;
@@ -45,6 +56,8 @@ export type InstallmentScheduleLabels = {
     totalIncreaseConfirmationCancel?: string;
     totalIncreaseConfirmationConfirm?: string;
     dateOrderError?: string;
+    /** Inline error on a manual row whose payment date was cleared or left incomplete. */
+    dueDateRequiredError?: string;
     amountGreaterThanZeroError?: string;
 };
 export type InstallmentScheduleClassNames = {
@@ -71,23 +84,44 @@ export type InstallmentScheduleProps = {
     showTabs?: boolean;
     inputs?: InstallmentScheduleInput[];
     startDate?: string;
+    /**
+     * Automatic mode only. Dates installment #1 on this day instead of the day
+     * the generated cadence would put it on. Installments #2..N keep the
+     * generated cadence untouched.
+     *
+     * For flows where the first charge happens when the plan is COMMITTED
+     * while the schedule anchors on a later term start: a plan created today
+     * with a term starting next month charges #1 today, then follows the term.
+     * Without this the first charge silently moves to the term start, and the
+     * schedule on screen stops matching the one that gets persisted.
+     *
+     * Ignored in manual mode, where the host already owns every date, and
+     * ignored when `firstInstallmentDate` is one of `inputs` — there the user
+     * picks that date themselves and the schedule must agree with the field.
+     */
+    firstInstallmentDateOverride?: string;
     labels?: InstallmentScheduleLabels;
     classNames?: InstallmentScheduleClassNames;
     isSaving?: boolean;
+    showSavedIndicator?: boolean;
     isModeSwitchDisabled?: boolean;
     onModeChange?: (mode: InstallmentScheduleMode) => void;
     onAutomaticSettingsChange: (settings: AutomaticScheduleSettings) => void;
     onInstallmentsChange: (installments: ScheduledInstallment[]) => void;
     onSave?: () => void;
+    onCancel?: () => void;
 };
 export type InstallmentTableLabels = {
     title?: string;
+    saved?: string;
     searchLabel?: string;
     searchPlaceholder?: string;
     editInstallments?: string;
     installmentId?: string;
     amount?: string;
     scheduledDate?: string;
+    /** Prefix of the paid date shown under the scheduled date of a paid row: "Paid on Jun 3, 2026". */
+    paidOn?: string;
     status?: string;
     actions?: string;
     payNow?: string;
@@ -121,6 +155,7 @@ export type InstallmentTableProps = {
      * applies to any Pay Now button that IS rendered. Defaults to `[]`.
      */
     payNowHiddenStatuses?: InstallmentStatus[];
+    showSavedIndicator?: boolean;
     labels?: InstallmentTableLabels;
     isSaving?: boolean;
     onEditInstallments: () => void;

package/dist/patterns/InstallmentSchedule/utils.d.ts

@@ -1,3 +1,30 @@
 import { AutomaticScheduleSettings, ScheduledInstallment } from './types';
 export declare function generateAutomaticInstallments(donationAmount: number, settings: AutomaticScheduleSettings): ScheduledInstallment[];
 export declare function getInvalidDateRowIds(installments: ScheduledInstallment[]): Set<string>;
+export type ManualRowErrors = {
+    /** Rows with no due date: the date picker reports a cleared or incomplete date as `''`. */
+    missingDateRows: Set<string>;
+    /** Rows dated after the next row. */
+    invalidDateRows: Set<string>;
+    /** Rows whose amount is not greater than zero. */
+    invalidAmountRows: Set<string>;
+};
+/**
+ * Every inline error a manual schedule can show, computed once so the rows
+ * that render the messages and the Save button that must refuse them can
+ * never disagree.
+ */
+export declare function getManualRowErrors(installments: ScheduledInstallment[]): ManualRowErrors;
+export declare function hasManualRowErrors(errors: ManualRowErrors): boolean;
+/**
+ * Re-dates installment #1 without touching the rest of the schedule.
+ *
+ * The generator produces one uniform cadence from a single anchor, which
+ * cannot express "charge #1 today, then follow the term start". This applies
+ * that shape on top: only the first date moves, and only when an override is
+ * given and it actually differs.
+ *
+ * Amounts are never touched — the first-installment rounding remainder stays
+ * where the generator put it.
+ */
+export declare function applyFirstInstallmentDateOverride(installments: ScheduledInstallment[], firstInstallmentDateOverride?: string): ScheduledInstallment[];

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.0.0",
+    "version": "2.1.0-beta.2",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",