EValue widget: Pre Retirement

Contents

• Description

• Install
• Usage
• Parameters

Description

@ev-uk/pre-retirement is an EValue widget that can be added to an existing website

Install

The widget can be installed by running one of the following commands

npm i @ev-uk/pre-retirement
yarn add @ev-uk/pre-retirement

Usage

The widget can be imported into a TypeScript project as follows:

import type { TInitConfig, TPreRetirementProps } from '@ev-uk/pre-retirement';
import { PreRetirementWidget } from '@ev-uk/pre-retirement';

const config: TInitConfig = {
  accessToken: '<ACCESS_TOKEN>',
  apiUrl: '<API_URL>',
  ...other parameters...
}

const props: TPreRetirementProps = {
  config
}

export const App = () => {
  return (
    PreRetirementWidget(props)
  )
}

Parameters

| Name | Type | Required | Effects | Description | | ------------------------ | ------ | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | | accessToken | string | ✓ | API | Authenticates requests to the API | | apiUrl | string | ✓ | API | The url address to send API requests to | | configReference | string | | API | The API company that the implementation is associated with. This should be passed into any API calls highlighted in the API section | | | | | | | | showInputScreens | string | | Widget | Determines whether the initial input screens should be shown or not. See Input screens on / off under Functionality | | primaryColour | string | | Widget | Primary colour of the widget, as a hex code. Sets the button and text colours (blue in the design) | | secondaryColour | string | | Widget | Secondary colour of the widget, as a hex code. Sets the chart line, dropdown arrow and contribution type colours (teal in the design) | | backgroundColour1 | string | | Widget | Background mixing colour 1 of the widget, as a hex code | | backgroundColour2 | string | | Widget | Background mixing colour 2 of the widget, as a hex code | | currency | string | | Widget | This will be provided as a currency symbol for use through the tool where highlighted | | maxChartValue | string | | Widget | Maximum value for marker on the modelling screen bar. Default maxChartValue value for £ is 40000 | | | | | | | | totalContributions | string | | User | Amount of contributions that the user is making | | contributionAsPercentage | string | | User | Whether the contributions are percentage or pound | | totalBalance | string | | User | Current balance of the user's pension | | user | string | | User | The data that will be passed in on a dataloaded user | | forecastOptions | string | | User | Date of retirement for the user, used to calculate the retirement age |

A description of the text parameters is given in the specification along with screenshots showing where the text should be displayed.