Student stepper. General

[vlad-khrychov]

As a Student, I want to see the first step of the 'Become a student' pop-up, so that I can enter general information to create my account

Preconditions:

1. A User is registered as a Student.
2. A Student verified his/her email via the email service.
3. A Student is logged in, and the ‘Become a student’ pop-up is opened.

Acceptance criteria:

1. When a Student enters the start page during creating a student’s account, then he/she sees the “General” page on the first step. The Mockups: • for Desktop

2. The “General” page (Desktop version) on the first step contains: Left part of a screen:

   • static picture; Right part of a screen, top down:
   • navigation tab, which shows on what exactly step the student is;
   • the CRUD description of the first step. The description of the first step consists of a text (“Please complete the registration form for the best possible experience.”);
   • the “First name ” input is mandatory to fill in. The “First name ” input is autofocused and active;
   • the “Last name *” input is mandatory to fill in;
   • the “First name ” and “Last name ” inputs are pre-filled with the registered credentials;
   • the “First name ” and the “Last name ” have to be maximum 30 characters long containing alphabetic characters (case insensitive) and a space is allowed between words. Spaces at the start or at the end are considered to be invalid and should be trimmed. Single word name is also valid;
   • the “Country” dropdown with single select, lazy loading (show 4 categories in dropdown) and scroll down. The dropdown should have input with autocomplete to find the country. Input should have the “Country” placeholder text;
   • the “City” dropdown with single select, lazy loading (show 4 categories in dropdown) and scroll down. The dropdown should have input with autocomplete to find the city. Input should have the “City” placeholder text. The 'City' dropdown is inactive until the “Country” form is filled out;
   • the “Describe in short your professional status” input to add professional status. Limited number of symbols is 200. Input should have the “Describe in short your professional status” placeholder text;
   • counter of the symbols displayed as “now/maximum”;
   • two buttons: “Back” is inactivated, “Next” is clickable, and a student can go to the next step for creating an account after clicking. • for Tablet

• for Mobile

3. The static picture is positioned below the description on the “General” page (Mobile version).
4. When a Student clicks on a specific input, the placeholder text transfers to the transparent header.
5. When a Student enters invalid data, then he/she sees error message in red color below the input. The “General” navigation tab becomes red. Error messages have the following help text:
   • Input value (the “First name ” and the “Last name ”) is longer than 30 characters – “This field cannot be longer than 30 characters”;
   • Input value (the “First name ” and the “Last name ”) is empty – “This field cannot be empty”;
   • Input value (the “First name ” and the “Last name ”) contains digits or special characters – “This field can contain alphabetic characters only”;
   • Invalid data (the “Country” and the “City”) – “No options” dropdown item;
   • Input value (the “Describe in short your professional status”) is more than 200 characters – “200/200”.
6. When a Student clicks on the close button, pop-up closes without saved changes and a Student goes to the home page.
7. When a Student clicks outside the pop-up field, nothing happens.

Note: The “General” navigation tab is in bold, because this is the first step of creating a student’s account and a Student can navigate through steps by the navigation tabs. The “General” navigation tab is highlighted in the mobile version.