# PolicyForm



The `PolicyForm` is a specialized, **read-only** component designed to
display the top-level data of an issued policy. Unlike the other forms,
it is not interactive and does not include a submit button or
validation. Its primary role is to present a structured, user-friendly
view of the policy’s core information, advanced settings, and coverage
terms.

This component is often used as the root of a policy view, rendered
alongside multiple `ElementForm` components (in their `readonly` or
`disabled` state) to display the policy’s full hierarchy of
sub-elements like vehicles, drivers, or locations.

Usage [#usage]

To use the `PolicyForm`, you must provide the `policy` response, the
relevant `segment` from that policy, and the complete `dataModel`.

```tsx
import {
	DataModel,
	PolicyResponse,
	SegmentResponse,
} from '@socotra/ec-react-schemas';

import { ElementForm } from '../ElementForm'; // Example of a sub-element
import { PolicyForm } from './PolicyForm';

const PolicyDetailsView = ({
	policy,
	dataModel,
}: {
	policy: PolicyResponse;
	dataModel: DataModel;
}) => {
	// Assuming the first segment holds the main policy data
	const primarySegment = policy.segments[0];

	return (
		<div>
			<h2>Policy Details</h2>
			<PolicyForm
				policy={policy}
				segment={primarySegment}
				dataModel={dataModel}
			/>

			{/* Example of rendering sub-elements alongside the policy form */}
			{policy.elements.map((element) => (
				<div key={element.locator}>
					<h3>{element.displayName}</h3>
					// Using disabled to make it read-only
					<ElementForm
						element={element}
						elementModel={dataModel.elements[element.type]}
						dataModel={dataModel}
						timezone={policy.timezone}
						disabled
						hideSubmitButton
					/>
				</div>
			))}
		</div>
	);
};
```

Props [#props]

| Prop            | Type              | Description                                                   | Required |
| --------------- | ----------------- | ------------------------------------------------------------- | -------- |
| `policy`        | `PolicyResponse`  | The full policy response object.                              | Yes      |
| `segment`       | `SegmentResponse` | The specific policy segment to display data from.             | Yes      |
| `dataModel`     | `DataModel`       | The complete, resolved data model.                            | Yes      |
| `id`            | `string`          | An optional ID for the form wrapper element.                  | No       |
| `hideAllFields` | `boolean`         | If `true`, hides all generated field sections.                | No       |
| `titles`        | `object`          | An object to override default labels for sections and fields. | No       |

State Management [#state-management]

The `PolicyForm` is effectively stateless from a user-interaction
perspective. It uses a `useMemo` hook to derive its display data by
calling the `getDefaultPolicyValues` utility function. This data is
calculated once based on the initial props (`policy`,
`productModel`, `element`, `dataModel`) and does not change.

Validation [#validation]

No validation is performed by this component. It is strictly for display
purposes, and all its fields are rendered as `readonly`.

Labels and Translations [#labels-and-translations]

The text for UI labels can be customized by passing a `titles` object
prop.

| Key                   | Description                                   | Default Value              |
| --------------------- | --------------------------------------------- | -------------------------- |
| `formTitle`           | The main title for the form.                  | `''`                       |
| `details`             | Title for the main “Details” section.         | `'Details'`                |
| `seeAdvancedDetails`  | Title for the collapsible “Advanced” section. | `'See Advanced Details'`   |
| `coverageTerms`       | Title for the “Coverage Terms” section.       | `'Coverage Terms'`         |
| `startTime`           | Label for the “Start Time” field.             | `'Start Time'`             |
| `endTime`             | Label for the “End Time” field.               | `'End Time'`               |
| `currency`            | Label for the “Currency” field.               | `'Currency'`               |
| `timezone`            | Label for the “Timezone” field.               | `'Timezone'`               |
| `billingLevel`        | Label for the “Billing Level” field.          | `'Billing Level'`          |
| `billingTrigger`      | Label for the “Billing Trigger” field.        | `'Billing Trigger'`        |
| `durationBasis`       | Label for the “Duration Basis” field.         | `'Duration Basis'`         |
| `delinquencyPlanName` | Label for the “Delinquency Plan” field.       | `'Delinquency Plan Name'`  |
| `autoRenewalPlanName` | Label for the “Auto-Renewal Plan” field.      | `'Auto-renewal Plan Name'` |
| `truthyLabel`         | Text for a “true” boolean value.              | `'Yes'`                    |
| `falsyLabel`          | Text for a “false” boolean value.             | `'No'`                     |