Strata Hotel Fee Widget

# 📖 User Story

🔹 **As a Strata Hotel operator,** authenticated with Service BC or Business BCeID and being directed to the STR Platform Registration Form

🔹 **I want** to view the fee information on the Platform Registration Form at all times

🔹 **So that** I can understand the total fee amount required for my application.

# Context

- If the Strata Hotel lists on their own website, the only fee is for the website's registration as a platform, but not for each listing.
- If the Strata Hotel lists a unit on Airbnb, they are not required to pay a fee.

## 📏 Business Rules

- [ ] Display the application fee amount retrieved from the endpoint across all pages.
- [ ] Show the currency of the fee.
- [ ] Include the service fee of $1.50.
- [ ] Set the application fee at $100 for now (this fee amount is to be used until dynamic fee amounts are implemented based on future selections).
- [ ] Show the total amount of the fee being charged (application fee + service fee).

## Technical Breakdown

- [ ] 1. Fee code creation for platform registration.
- [ ] 2. UI - integrate the fee widget using the existing endpoint with the fee amounts.
These need to be moved to the submit ticket:
- [ ] 3. API - pass the fee code during invoice creation (to be completed when we submit the Platform Application form).
- [ ] 4. Verify that the payment goes through and shows the correct amount and information on the payment receipt (to be completed when the application form is submitted).

## 🎭 Story Scenarios

### Scenario: Viewing Application Fee Information

**Given** I am a Strata Hotel operator authenticated and on the "STR Platform Registration Form",

**When** I am filling out the form,

**Then** the system should display the total fee amount required for the application,

**And** include a detailed breakdown of the fee components,

**And** update the displayed fee information in real-time if any selections affect the total fee.

🌐 Accessibility Scenarios

### Keyboard Users

**Scenario: Comprehensive Keyboard Navigation**

- **Given** I am a keyboard user on the website,
- **When** I use the Tab key to navigate through the website,
- **Then** all interactive elements should be accessible and highlighted,
- **And** I should be able to activate these elements using the Enter or Space key.

**Scenario: Full Content Accessibility via Keyboard**

- **Given** I am a keyboard user navigating the website,
- **When** I traverse through different pages and sections,
- **Then** all content should be fully accessible using the keyboard alone,
- **And** there should be no traps that prevent me from navigating away using the keyboard.

### Screen Reader Users

**Scenario: Accessible Image Descriptions**

- **Given** I am using a screen reader on the website,
- **When** I encounter images,
- **Then** each image should have descriptive alt text that conveys the same message as the image.

**Scenario: Structured Navigation for Screen Readers**

- **Given** I am navigating the website using a screen reader,
- **When** I move through different page elements,
- **Then** the content should be structured with proper headings,
- **And** the reading order should be logical and sequential.

**Scenario: Descriptive Form Fields**

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

### Low Vision Users

**Scenario: Effective High Contrast Mode**

- **Given** I am a user with low vision on the website,
- **When** I enable high contrast mode,
- **Then** all content should display with high color contrast suitable for low vision,
- **And** the layout should remain coherent and unchanged.

**Scenario: Text Resizing Accommodation**

- **Given** I am a user with low vision on the website,
- **When** I increase the text size,
- **Then** the text should resize without loss of information or functionality,
- **And** the page layout should adapt accordingly without disrupting the user experience.

**Scenario: Personalized Styling Preferences**

- **Given** I am a user with low vision adjusting settings on the website,
- **When** I customize my styling preferences, including colors, fonts, and spacing,
- **Then** these adjustments should be applied consistently across all pages,
- **And** the changes should persist during my entire session or until altered by me.

🌍 Global Scenarios

### Internet Connection

**Scenario 1: Standard Internet Connection**

- **Given** I am accessing the website from a standard internet connection,
- **When** I navigate to any page on the site,
- **Then** the page should load completely within 2 seconds, ensuring a fast and efficient user experience.

**Scenario 2: Optimizing Dashboard for Users with Low Internet Connectivity**

- **Given** I access the Platform Registration Form with a low-speed internet connection,
- **When** I attempt to load and interact with the dashboard page,
- **Then** the form should prioritize critical content and functionality, loading essential elements first to ensure usability.

### Mobile Responsiveness

**Scenario: Mobile Responsiveness**

- **Given** I am accessing the Platform Registration Form on a mobile device,
- **When** I interact with any links or form elements,
- **Then** the form should display correctly and be easily editable on my device, ensuring a responsive design.