Step 2 Strata Hotel Details

Mikaela add that the strata hotel can add more than one building

### 📖 User Story

**As a team lead, when the Strata Hotel user clicks "Next" or moves to the next page, I want the Strata Hotel user to move to the "Step 3 - Strata Hotel Details" page, so that the Strata Hotel user can fill out the Strata Hotel details.**

### Context:

The "Step 3 Strata Hotel Details" page is where the Strata Hotel user provides specific information about the Strata Hotel, including its location, brand name, website, and unit details.

This step follows the "Step 2 Business Details" page.

> **Note:** Validation statements can be found in the Product Team channel under **Files**: [Validation and Status Table](https://bcgov.sharepoint.com/teams/09399/Shared%20Documents/Product-Scrum%20Team%20Chat/VALIDATIONS%20%20AND%20STATUSES/Field%20validation%20and%20Status%20Table.xlsx)

#### 🎨 UX/UI Link:

- **Miro Link:** [Miro Board](https://miro.com/app/board/uXjVKQlO-ME=/?moveToWidget=3458764600655675248&cot=14)

### 📏 Business Rules

**Navigation:**

- [ ] Display a stepper highlighting the "Strata Hotel Details" step.
- [ ] Users can navigate to any step of the application form by clicking on the step icons.
- [ ] Users can proceed to the next step by clicking the "Next" button.

**Validation Indicators:**

- [ ] The stepper will indicate whether each page has all required information (red "X" for incomplete, green checkmark for complete).

**Field Validations:**

- [ ] If users navigate without completing required fields, the "Strata Hotel Details" step will display a red "X".
- [ ] Incomplete required fields will be highlighted in red with appropriate error messages when users return to the "Strata Hotel Details" page.

**Error Messages:**

see https://bcgov.sharepoint.com/:x:/r/teams/09399/Shared%20Documents/Product-Scrum%20Team%20Chat/VALIDATIONS%20%20AND%20STATUSES/Field%20validation%20and%20Status%20Table.xlsx?d=wd73427566b6148b48776b7c8682de8e9&csf=1&web=1&e=gbc7IO&nav=MTVfe0U0NkZFMjQyLUYzNjgtNDgwMy1BQUUwLUMwMUY2NjI4NERDN30

### Technical Breakdown

**Frontend (UI):**

- [ ]

- **Backend (BE):**

- [ ]

### Field Table

| **Section** | **Field** | **Description** | **Helper Text** |
|-------------------------|---------------------------|-----------------------------------------------------------------------|-------------------------------------------|
| **Strata Hotel Location** | **Address Line** | The street address of the Strata Hotel. | |
| | **City/Town** | The city or town where the Strata Hotel is located. | |
| | **Province/State** | Locked to "British Columbia" (BC). | |
| | **Country** | Locked to "Canada". | |
| | **Postal Code** | The postal code of the Strata Hotel's location. | |
| **Strata Hotel Details** | **Strata Hotel Brand Name** | The brand name of the Strata Hotel. | |
| | **Website Address** | The website address of the Strata Hotel. | |
| **Unit Details** | **Number of Units Listed** | The number of units listed in the Strata Hotel. | |
| | **List Unit Numbers** | The specific unit numbers. At least 3 units are required. | Users can add as many units as they want. |

### 🎭 Story Scenarios

#### Navigation Scenarios

**Scenario 1: Display "Step 3 Strata Hotel Details" When "Next" is Clicked**

- **Given** I am on the "Step 2 Business Details" page,
- **When** I click the "Next" button,
- **Then** I am navigated to the "Step 3 Strata Hotel Details" page,
- **And** the validations for "Step 2 Business Details" are run.

**Scenario 2: Navigate via Stepper**

- **Given** I am on any step in the application,
- **When** I click on the "Strata Hotel Details" step in the stepper,
- **Then** I am navigated to the "Step 3 Strata Hotel Details" page,
- **And** the validations for the page I left are run.

**Scenario 3: Next Button Functionality**

- **Given** I am on the "Step 3 Strata Hotel Details" page,
- **When** I click the "Next" button,
- **Then** I am navigated to the "Step 4 - Review" page,
- **And** the validations for "Step 3 Strata Hotel Details" are run.

**Scenario 4: Data Persistence Between Steps**

- **Given** I have entered information in "Step 3 Strata Hotel Details",
- **When** I navigate away and return,
- **Then** the information is retained.

#### Field Scenarios

**Scenario 5: Strata Hotel Location Section**

- **Given** I am filling out the "Strata Hotel Location" section,
- **Then** I see the following fields:
- Address Line
- City/Town
- Province/State (locked to BC)
- Country (locked to Canada)
- Postal Code

**Scenario 6: Strata Hotel Brand Name and Website Address**

- **Given** I am filling out the "Strata Hotel Brand Name" and "Website Address" fields,
- **Then** I must enter values in both fields, as they are required,
- **And** I can only add one brand name and website address.

**Scenario 7: Unit Details Section**

- **Given** I am filling out the "Unit Details" section,
- **When** I enter the number of units listed,
- **Then** I must enter at least 3 units.

- **Given** I am listing unit numbers,
- **Then** I can add as many unit numbers as I want,
- **And** at least 3 unit numbers are required.

**Scenario 8: Province/State and Country Fields Locked**

- **Given** I am on the "Strata Hotel Location" section,
- **Then** the "Province/State" field is locked to "British Columbia",
- **And** the "Country" field is locked to "Canada".

**Scenario 9: Validation of Required Fields**

- **Given** I click next or another stepper proceed filling out required fields,
- **Then** I see a red X on the "Strata Hotel Details" stepper and when I return to the page
- **Then** the incomplete fields are highlighted in red and I receive appropriate error messages,

### Accessibility Scenarios

#### Keyboard Users

**Scenario 10: Comprehensive Keyboard Navigation**

- **Given** I am navigating using the keyboard,
- **When** I use the Tab key,
- **Then** all interactive elements are accessible and highlighted,
- **And** I can activate these elements using the Enter or Space key.

#### Screen Reader Users

**Scenario 11: Descriptive Form Fields**

- **Given** I am filling out a form using a screen reader,
- **When** I navigate through the form fields,
- **Then** each field is clearly labeled with descriptive text,
- **And** instructions are associated with their respective inputs.

#### Low Vision Users

**Scenario 12: Effective High Contrast Mode**

- **Given** I am a user with low vision,
- **When** I enable high contrast mode,
- **Then** all content displays with high color contrast,
- **And** the layout remains coherent.

🌍 Global Scenarios

### Internet Connection

**Scenario 13: Standard Internet Connection**

- **Given** I access the website with a standard connection,
- **Then** pages load within 2 seconds.

**Scenario 14: Low-Speed Internet**

- **Given** I have a low-speed connection,
- **Then** essential content loads first.

### Mobile Responsiveness

**Scenario 15: Mobile Device Access**

- **Given** I use a mobile device,
- **When** I access any link,
- **Then** content displays correctly and is easily editable.

---

**Note:** All validation rules and error messages are detailed in the **Business Rules** section. For specific validation logic, refer to the validation statements located in the **Product Team** channel under **Files**.

The issue names no files, tests, or entry points; begin by locating the existing application-form stepper and the Step 2 and Step 4 implementations. Use the linked Miro board and validation table to define the Step 3 fields and messages, then verify navigation, persistence, validation indicators, and accessibility scenarios are covered.

Written by the indexing model from the issue text.