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 { PolicyForm } from './PolicyForm';
import { ElementForm } from '../ElementForm'; // Example of a sub-element
import { DataModel, PolicyResponse, SegmentResponse } from '@socotra/ec-react-schemas';

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

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

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.

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'