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

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

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

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

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

Labels and Translations

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