Functional description
Main feature
The profile read web component allows users to consult a read-only summary of their energy profile organized in 5 cards, one per profile section. Each card displays the values filled in by the user in thedtn-profile form. Coming soon
At the top of the component, a circular completion indicator shows the percentage of profile fields that have been answered.
The component is designed to be used alongside dtn-profile: when the tenant enables it, each card exposes a “Edit button” that emits a dtn:profile-goto event, so the tenant application can navigate the user directly to the corresponding step in the profile form.
Detailed features
Completion indicator A circular progress indicator is displayed at the top of the component. It shows the current profile completion percentage (0 to 100), computed server-side. 5 profile section cards
Each card displays the fields that have been filled in by the user. Empty fields are shown in a neutral state.
Redirection to the profile form
When
enable-redirection-event is true, each card shows an “Edit” button. Clicking it dispatches a dtn:profile-goto custom event carrying the section key, so the tenant application can navigate the user directly to that step in dtn-profile.
This mechanism uses a Custom DOM Event that bubbles and is composed (crosses the ShadowDom boundary), making it interceptable from the host page.
The following documentation described the profile form to complete, dtn-profile.
dtn-profile Coming soon
The dtn-profile-read component shares the data with dtn-profile. Any profile save performed in the form is immediately reflected in the read view without requiring a page reload or a new API call.
Error and information messages handling Coming soon
The web component display messages in the following cases: Use case 1: Profile not yet filled in If the profile has never been filled in by the user, all cards are displayed in an empty state — no data is shown inside the cards, and the completion indicator shows 0%. Use case 2: API error (400/500) If the profile cannot be loaded due to an API error, an error state is displayed in place of the cards.Loading state handling Coming soon
When profile data takes time to load (slow network or API response > 300 ms), a skeleton screen is displayed to:- Indicate that data is loading
- Preview the layout of the 5 cards before content appears
Responsiveness
Thedtn-profile-read web component is fully responsive.
Provider customization
The component inherits the provider’s design system via the Étincelle Design System and supports customization through:- Brand colors applied via CSS custom properties from the provider’s stylesheet
- Radius overrides for card shapes
Language management
The web component supports multiple languages.fr-FRen-US
Accessibility
The component is developed following the RGAA (French General Accessibility Improvement Framework) requirements and accessibility best practices. Examples of RGAA accessibility requirements implemented in thedtn-profile-read web component include :
- Each card is navigable by keyboard
- The “Edit” buttons (when enabled) are focusable and labelled for screen readers
- The circular completion indicator includes an accessible label announcing the percentage
The accessibility of this web component does not imply that the entire page where it is integrated is accessible. Accessibility compliance must be assessed at page level, including any surrounding content, custom code, and third-party components provided by the integrating application.
API used to display profile data
Profile data is provided by the Profile API: — GET /profile — fetches the current user profile to reflect completion rate.Integration of the web component ‘Profil summary’