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

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.