Join Form (NZ Brands)

Overview

The form for collecting new user details is split into 3 pages. Page 1 collects personal information required for id verification, page 2 collects information pertaining to the the users' new account, and page 3 asks questions about the users' betting habits.

The three pages share a progress bar at the top of the screen which helps the user track their progress and to prevent them from being discouraged by the length of the form.

Page 1

First Name

A mandatory field with the following validation rules:

• The field must only contain alpha characters, maori characters, spaces, apostrophes and hyphens.
• The field must match be at least 2 characters.

Middle Name

An optional field with the same validation rules as First Name.

Last Name

A mandatory field with the same validation rules as First Name.

Date of Birth

A mandatory field that only allows numeric values.

• Users must enter their date of birth in the DD/MM/YYYY format
• A numeric keypad will be shown and the '/' will be automatically inserted as the date is entered.

The following validation rules apply:

• The field must contain a valid date.
• The date entered must not be before 01/01/1900
• The date must be not be less than 18 years ago

Address

A mandatory autocomplete field. Once the user has entered 3 characters a call is made to the Harmony API to find a match for the entered address and suggestions are shown vertically adjacent to the field. As the user continues to input characters the suggestions should continue to get more relevant until the user sees their address and selects it.

If the user isn't able to find their address, then they can select "Can't find your Address? Enter Manually". This will replace the autocomplete field with a manual address form.

If the user had already selected an autocomplete address, then that address will get mapped to the appropriate individual fields of the manual form.

This form consists of:

Country

• A dropdown menu with the hardcoded options of "New Zealand", "Australia Cook Islands", "Niue" and "Tokelau"
• Requires no validation as this field defaults to "New Zealand", so it can never be empty or contain invalid characters

Street Number

• A mandatory field that must only contain ASCII characters.

Unit/Building Number

• An optional field that must only contain alphanumeric characters or spaces.

Building Name or Floor

• An optional field that must only contain alphanumeric characters or spaces.

Suburb

• An optional field that must only contain alpha characters or spaces.

State/Province

• A mandatory field that must only contain alpha characters or spaces.

Town/City

• A mandatory field that must only contain alpha characters or spaces.

Postcode

• A mandatory field that must contain four numeric characters.
• The input restricts the user from entering more than four characters.

If the user wishes to return to the autocomplete address they can select "Back to Address Look Up".

Page 2

Username

A mandatory field with the following with the following validation rules:

• The input must be at least 6 characters.
• The input must contain only alphanumeric characters.
• The input must contain at least 1 letter.
• The entered username must be deemed unique by the check email endpoint.

Password

The password is a unique input field in that validation occurs on every keystroke as well as when the field is de-focused. This is so that the user can see their password progressively satisfy each condition as the password they enter gets 'stronger'.

All the validation requirements are outlined in the page's UI upon field focus.

Pin

This field is a mandatory field that only exists for TabNZ and not Betcha.

It does the following frontend validations:

• The field must only contain numeric characters.
• The field must contain exactly 4 characters.

The field also performs a backend call to determine if the pin has enough complexity, this ensures that:

• The pin is not identical numbers i.e. 5555
• The pin is not consecutive numbers i.e. 1234
• The pin does not match the birthday entered by the user on the previous page
  • i.e. if the users' birthday was 01/08/1905 then 1905, 0108 would be considered invalid.

Deposit Limit

The deposit limit defaults to being switched off, and remains an optional field if the user leaves it that way. If the user decides to set a deposit limit then the component expands to show an amount field and a period dropdown, with the keyboard focus being immediately set on the amount field.

The amount field presents a numeric keyboard and enforces the following rules:

• The input must be formatted appropriately, in that it must be a number followed by a period with no more than two digits proceeding the period.
• The amount entered must be at least $5.00
• The amount entered must be no more than $9999999.00

The period field is hardcoded with the following options:

• 1 day
• 7 days
• 14 days
• 30 days
• 365 days

The field defaults to 7 days and hence doesn't need any validations because it can never be in an invalid state.

If the user decides to turn deposit limit back to off, then the deposit limit amount will get cleared, and the period will reset to 7 days.

Page 3

Page 3 consists of dropdown fields asking questions about the users' betting habits.

Every question, answer and field label are data driven, fetched via the ClientNatureAndPurposeQuestionsQuery. The only validation on these fields is that an answer is selected for each question.

Progress Bar

The progress bar is similar to the AU progress bar in appearance, however unlike it's AU counterpart, it does not progress with every valid field, but has a fixed postion given the current page. Page 1 is fixed at 20%, page 2 40% and page 3 60%.

The idea behind this is that the Landing Screen is considered the first page of the flow, and the IDV is the last page. Thus when a user arrives at page 1, they've already completed 1 out of 5 pages of the flow - or in other words 20%.

System Alert

In addition to the scenarios described in Join Form - System Alert, there are situations in which a user may see a system alert dialog.

• The user attempts to close the form

If a user attempts to close the sign up form before it's complete then they'll need to confirm that action by selecting "OK" in a confirmation dialog. The user can also close the dialog and return to the form by pressing "Cancel".

• The call to find or retrieve a Harmony API address fails

If a call made to look up a partially entered address in the address field fails, then the user will see an 'unable to lookup address' system alert.

"Enter Address Manually" will dismiss the alert and replace the address autocomplete field with the manual address form.

"Try Again" will just dismiss the alert.

Integrations

Feature Flags

• login-native: Used to redirect the user using native or react-native Login if the user already exists.
• signup-address-nz-native (Android) nz-signup-address-native (iOS): Used to determine if the address input field is shown.
• signup-native: Used to determine if the native sign-up flow should be used or not.

Inputs

GraphQL: ClientNatureAndPurposeQuestionsQuery

• The GraphQL query that returns the nature and purpose questions that are populated on page 3.

GraphQL: CheckPinComplexityQuery

• A GraphQL query to determine if a the users pin meets the complexity requirements

Resources

• Epic - Page 1 - Jira
• Epic - Page 2 - Jira
• Epic - Page 3 - Jira

Role	Contact
PM	Laura Baggio
Android Lead	Anthony Librio
iOS Lead	Nicholas Vella