DraftTransactionForm

The DraftTransactionForm is a specialized component for updating a policy transaction that is in a draft state. Unlike forms for initialized transactions, its primary role is to generate ParamsChangeInstructionCreateRequest and ModifyChangeInstructionCreateRequest objects. These instructions capture changes to the transaction’s parameters (like effective dates) and its core data, respectively.

Usage

To implement the DraftTransactionForm, you must provide the current transactionSnapshot, the initial paramsChangeInstruction, the relevant productModel, and a handleSubmit function. The form then renders the fields defined in the product model and manages the data to create the change instructions upon submission.

import { DraftTransactionForm } from '@socotra/ec-react-components';
import {
    ProductConfig,
    TransactionSnapshotResponse,
    ParamsChangeInstructionResponse,
} from '@socotra/ec-react-schemas';

// Example Usage
const MyEndorsementComponent = ({
    productModel,
    transactionSnapshot,
    paramsChangeInstruction,
}: {
    productModel: ProductConfig,
    transactionSnapshot: TransactionSnapshotResponse,
    paramsChangeInstruction: ParamsChangeInstructionResponse,
}) => {
    const handleSubmit = (changeRequests) => {
        const [paramsChange, modifyChange] = changeRequests;
        console.log('Params Change Request:', paramsChange);
        console.log('Modify Change Request:', modifyChange);
        // Handle API calls to apply the change instructions
    };

    return (
        <DraftTransactionForm
            productModel={productModel}
            transactionSnapshot={transactionSnapshot}
            paramsChangeInstruction={paramsChangeInstruction}
            handleSubmit={handleSubmit}
            submitButtonText='Apply Changes'
        />
    );
};

Props

Prop	Type	Description	Default
`transactionSnapshot`	`TransactionSnapshotResponse`	The snapshot object for the transaction being modified.	Required
`paramsChangeInstruction`	`ParamsChangeInstructionResponse`	The initial parameter change instruction created with the transaction.	Required
`productModel`	`ProductConfig`	The product configuration from the tenant data model that defines the transaction’s structure.	Required
`handleSubmit`	`(data: [ParamsChangeInstructionCreateRequest, ModifyChangeInstructionCreateRequest]) => void`	Callback triggered on submit. It receives an array containing the two generated change instruction request objects.	Required
`coverageTerms`	`CoverageTermsConfigRecord`	The coverage terms configuration from the tenant data model.	`undefined`
`dataTypes`	`DataTypeConfigRecord`	Custom data types used in the product model.	`undefined`
`modifyChangeInstruction`	`ModifyChangeInstructionResponse`	The most recent modify change instruction from the transaction’s stack, if one exists.	`undefined`
`disabled`	`boolean`	When true, disables the entire form.	`false`
`isSubmitting`	`boolean`	When true, disables form fields and the submit button to indicate a submission is in progress.	`false`
`preventFormResetOnDisabled`	`boolean`	If `false`, the form’s data resets to initial values when `disabled` becomes true.	`true`
`validateOnSubmit`	`boolean`	If `true`, validation runs on submit, blocking submission if invalid.	`false`
`hideSubmitButton`	`boolean`	If `true`, the submit button is not rendered.	`false`
`submitButtonText`	`string`	Custom text for the submit button.	`'Update'`
`id`	`string`	A unique ID for the form wrapper element.	`undefined`
`titles`	`object`	An object to override default labels for form sections like “Coverage Terms”.	`{}`

State Management

The form’s state is managed internally with React’s useState hook.

The initial data is populated by the getDefaultDraftTransactionValues utility, which processes the input transactionSnapshot and change instructions.
useEffect hooks are in place to re-calculate the form’s data if key props like transactionSnapshot or modifyChangeInstruction change, ensuring the form stays in sync.
The underlying JsonForms component updates the state via its onChange handler.

Validation

Validation is performed by Ajv against a dynamically generated JSON Schema.

The base schema is generated from the productModel using the dataModelToJSONSchema utility.
It is then dynamically extended with definitions for default transaction fields (like effective date) and any coverage terms associated with the product.
The validateOnSubmit prop controls whether to perform validation before calling handleSubmit.
Error messages are translated using the translateError utility.

Labels and Translations

The text for UI labels and validation messages can be customized.

UI Labels

Labels for sections and fields can be overridden by passing a titles object prop.

Key	Description	Default Value
`formTitle`	The main title for the entire form.	`'Transaction'`
`coverageTerms`	Title for the “Coverage Terms” section.	`'Coverage Terms'`
`truthyLabel`	Text for a “true” boolean value.	`'Yes'`
`falsyLabel`	Text for a “false” boolean value.	`'No'`