UI - Fee Amount - new fee amounts

📖 User Story As an examiner, I want host to pay the correct payment amount based on their type of space for the rental unit, whether it's their principal residence or not and number of rooms for rent So that I can collect the correct amount of application fee

Context: For host applications, the fee amount is determined by the type of space for the rental unit, whether it's their principal residence or not and number of rooms for rent. ONLY show fee amount on the Confirm and Submit page. Keep widget on each page as dashes.

Overall,

Host pays $50 (original fee $100) if they select "entire home" and "Yes, I live in this unit when it's not being rented"
Host pays $225 (original fee $450) if they select "entire home" and " Yes, I live in another unit on the same property".
Host pays $225 (original fee $450) if they select " entire home" and "No" (for "is rental unit on same property as your principal residence)
Host pays $50 (original fee $100) per bedroom if they select "shared accommodation" (no change based on if it is their Principal residence or not)

🎨 UX/UI Link:

📏 Business Rules:

[ ] Rental unit type will not have an impact on the fee amount.
[ ] Hosts will be charged $225 if the type of space is "entire home" and "Yes, I live in another unit on the same property" or "No" is selected, regardless of the number of rooms for rent.
[ ] Hosts will be charged $50 if the type of space is "entire home" and "Yes, I live in this unit when it's not being rented" is selected, regardless of the number of rooms for rent.
[ ] Hosts will be charged $50 per room if the type of space is "shared accommodation", regardless of whether it is their principal residence or not
[ ] Once the selection is made, application fee in the widget should reflect the correct fee amount.
[ ] When users change the selection of type of space, rental unit as PR and number of rooms anywhere in the application before submission, application fee in the widget should be updated to reflect the correct fee amount.
[ ] When users are redirected to the payment page (Pay API), the total amount of application fee and service fee will be displayed and charged.
[ ] In the payment receipt (that can be downloaded by hosts or examiner from the application details view, the correct fee amount should be displayed.
[ ] ONLY show the actual fee amount on the Confirm and Submit page
[ ] The application fee amount can be "-" in the fee widget on all pages except Confirm and Submit page

Fee Structure for Host: https://bcgov.sharepoint.com/:w:/r/teams/09399/Shared%20Documents/Product-Scrum%20Team%20Chat/Business%20Requirements/STR%20Branch%20Fee%20Amount.docx?d=wa5c1e8eed23a4042aafc652795e0e218&csf=1&web=1&e=2pL9gC

🎭 Story Scenarios Scenario 1: Host on application form
Given the Host is on Property Details page When the host indicates their type of space and whether unit is their PR Then the host can view the application fee on the fee widget that is shown on each of the application pages (top right) AND Then the host can view this information throughout the application AND Then the host can make a payment with that fee amount plus service see of $1.5

Scenario 2: Receipt Given the Host has selected their type of space and whether unit is their PR navigated away from the Property Details page And the fee amount has been shown for the property type they selected When the host navigates back to the Property Details page and changes their type of space and whether unit is their PR from the drop down Then the fee amount shown in the widget and applied to the application should be updated to reflect the fee amount for the new selection

Scenario 3: Host changes their type of space and whether unit is their PR Given the Host has completed the application and payment successfully When the host or examiner is on Application details page Then the host or examiner can view the application fee amount on the payment receipt

🌐 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

## Data Validation # Mikaela to confirm: Do we need to do these for MVP - data validation required for inputing data in the right format - as defined by business rules. ### Internet Connection #### 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. #### Low-Speed Internet Given a user accesses "Application Details View" with a low-speed internet connection defined as under [specific speed] Mbps When the user attempts to load and interact with the dashboard page Then the "Application Details View" should prioritize critical content and functionality, loading essential elements first to ensure usability. #### Mobile Responsiveness Given I am accessing "Application Details View" on a mobile device When I click on the "any" link Then "_____ " should display correctly and be easily editable on my device, ensuring a responsive design.

bcgov / entity

UI - Fee Amount - new fee amounts #23623