# 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 [#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.

```ts
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 [#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 [#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]

Validation is performed by [Ajv ](https://ajv.js.org/) 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 [#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'`             |