Project Title

Buy an Insurance Policy – Take Home Test

Loom Video

https://www.loom.com/share/8fc119bac66943d9afee1ae3b9083b38

Description

Page 1 The first page is a welcome screen

User can click on the Start button and the wizard would start

Page 2 We need to collect:

name

age

country (user can select only one of:)

Hong Kong

USA

Australia

Each country will represent particular currency so that the user can see calculated premium with proper currency. It will be important on the next step where we do premium calculation

Hong Kong : HKD

USA : USD

Australia : AUD

User has to choose which Package they want, only one of:

Standard 

Safe (it is 50% more expensive than Standard), it should show how much more user has to pay in the selected currency

Super Safe (it is 75% more expensive than Standard), it should show how much more user has to pay in the selected currency

On this page, user can also see calculated Premium in correct currency

Formula for the premium is 10 * Age

Based on the selected country, premium will be adjusted accordingly based on the rate 10 * Age * Rate

Based on the selected Package, premium will be adjusted accordingly, see Package options

If user age is over 100, we direct him to Page 2 - age error when clicking on Next button

Otherwise user can go step back or to the next page

Page 2 – age error

If user clicks on the button, he will be redirected to the Page 1

Page 3

The final step of the journey where user can see the summary and proceed to buy

Buy button lead to Page 1

Getting Started

The single Html file that is the starting point of the Wizard and is available under the root directory with the name “index.html”

The single Source file is available under the directory “./src”

The single Output file is available under the directory “./js”

The StyleSheet file is available under the directory “./css”

Node Modules are present in “node_modules” directory.

tsconfig.json” is the standard TypeScript’s Configuration file.

package.json” is the standard Node’s Configuration file. It also contains custom command.

#Technical choices

I have used TypeScript because most of the errors are captured at the time of compilation. It was easy to make such a simple Wizard for a test purpose in TypeScript instead of using any other JS framework.   

#Architecture

I have kept architecture very simple because it was just a test. The detail is given above.

#Approach

I order to minimize the dependencies, I have created on one **Wizard.ts** file under the **./src** directory. It contains two classes (this approach is very common in Java to keep two classes in the same file) and several functions.

I have used the switch statement for making decisions wherever possible, it is fast in such cases where just a single value is to be evaluated, while "else" takes some more time.

The detail is given below:
 
 **PremiumCalculator** Class which is used to calculate the Premium on the basis of age, Package, country, and rate. It contains the following methods:
 
   constructor(age: number, country : string, packageSel: string) => It is the Constructor of the class and takes three parameters age as number, Country as string and Package as string.
   
   calculatePremium() => It is a private method and actually calculates the premium on the basis of the information gathered.
   
   getPremium() => it makes call to the private CalculatePremium() method and returns the calculated premium.

 **Wizard** Class is the main class which initializes the whole process. It contains the following methods:
   
   constructor() => Initializes the DOM Elements to be accessible throughout the class.
   
   initWizard () => this method initializes and assigns events to the DOM elements so that Wizard can work.
   
   hideAll() => hides all the elements
   
   showPage(e:Event, btn:string) => Hide and Show Pages logic is done in this method and it takes two parameters, **Event** and **btn** => Name of the current button Or page to be shown. 
   
   showPremium() => it makes call to the private CalculatePremium() method and returns the calculated premium.
   
   highLightNav(nav:string) => This is used to highlight the current position or the page on the Wizard.
   
   clearText() => Clears the form Text Data in Case user Hits "Buy" button and gets back to the Welcome Screen:  (Page # 1).
   
   premiumCal() => It make calls to PremiumCalculator.getPremium() method to calculate the premium and also assigns them to the DOM elements to display on the screen.
   
   validateForm(e:Event) = > It is the core to validate the provided input especially the Age. 
   
   And the whole process is initiated on Document Ready State in order to avoid any error or warning of Dom Element not found etc.  In the body, Wizard class is initiated and its **initWizard()** method is called.

The output created "**Wizard.js**" file is included in index.html file for putting the Wizard in harness.

Dependencies

This test is using TypeScript version: “typescript”: “^4.7.4”

Installing

Install the TypeScript by following the instructions on this page: https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html

Executing program

How to run the program

If TypeScript is installed globally, use the following command.

 path-to-project-folder > tsc

If TypeScript’s compiler is installed in the node_modules directory and can be run with:

 path-to-project-folder > npx tsc

If TypeScript’s compiler is installed in the node_modules directory and you can also run with custom command defined in “package.json”:

 path-to-project-folder > npm run tsc_cmd

Authors

Syed Murtaza Hussain Kazmi @mailto: [email protected]

Version History

0.1 Initial Version contains very simple implementation of the Wizard.

License

This project is licensed under the GNU General Public License V3.0.

GitHub

View Github