My Contact Information - Existing SBC Connect Account

[fionazhou-jsb]

📖 User Story

🔹 As a host, after I have authenticated and chooses to use an existing SBC Account 🔹 I want to be redirected to the step 1 of the registration form - Contact Details, 🔹 So that I can review my contact information pre-populated.

Context:

When a host chooses to use an existing SBC account, most of the contact information is populated from the contact info stored under their SBC Connect account. Hosts can review info populated and manually enter missing information.

📏 Business Rules

• [ ] First name and last name should be pre-populated from the BC Services Card information and are locked
• [ ] Information will be pre-populated from SBC Connect (at account or user level) including Phone number (required, number), extension (optional, number), email address (required), fax number (optional, number), Country (required, dropdown) Address (required, text), Address line 2 (optional, text), City (required, text), Postal Code (required, text) and Province (dropdown of all CA provinces).
• [ ] Information pre-populated by SBC Connect can be overwritten by users except first name and last name
• [ ] If the information does not exist in existing SBC Connect, leave it blank for users to fill in.
• [ ] If SBC connect account has team members, pull name, phone number and email address at team member level. The rest can be pulled at account admin level.

🎭 Story Scenarios

see specific story scenarios

Automatic first view - "STR Registration" Form with "Contact Information" stepper highlighted

• Given that I am authenticated by BC Services card, my session is active,
• Then the first page in "Application Details View" form is "Contact Information"
• Then the "Contact Information" stepper in the progress bar is highlighted
• Then the form should be prepopulated with my contact information gathered from my BC Services Card
• And the rest of the fields on the "Contact Information" form are blank
• And I can fill out the blank fields

Scenario 1:

Clicking on "My Contact Information" View - accept pre-populated info

• Given that I am logged into my account and currently viewing the dashboard,
• When I click on the "My Contact Information " link located on or near the progress bar,
• Then the progress bar should highlight to show that I am in the contact information section
• Then a section should expand directly below the progress bar, providing me with a form with pre-populated contact information from my SBC connect profile on the same page.
• And I can select whether this is my mailing address or the geographical location of my property

Scenario 2:

Host mailing address is different from the SBC Connect address

• Given the host's mailing address is different than the address provided by SBC-Connect
• When the host starts to type their mailing address in the mailing address section of the form
• Then the system utilizes the Canada Post connection to populate the mailing address on behalf of the host.

Scenario 3:

Clicking on "My Contact Information"- edit pre-populated info

• Given that I am on the "My Contact Information" view
• When I want to edit some pre-populated information that is in my contact information
• Then I can remove the existing value
• And Then I can enter the correct and update information on the form

🔗 Mural Links

Story in Mural: [https://app.zenhub.com/workspaces/str-65b2a7146835aa0cdf315b79/issues/gh/bcgov-registries/str/44]

🛠️ Parameters Definition

click to view parameter definitions

• [Role]: User role or persona targeted by this issue.
• [Feature/Action]: Action or feature being requested.
• [Benefit/Outcome]: Expected benefit or outcome from implementing the feature/action.
• [Authentication Method]: Method used for user authentication.
• [Form Name]: Specific form or section referenced.
• [Specific Action]: Particular action taken by the user.
• [Expected Result]: Desired outcome after action is taken.
• [Invalid Data]: Examples of invalid data that might be entered.
• [X] seconds: Exact time frame within which an action should complete or a page should load.
• [Specific Page]: Specific page or section of the application.
• [Link Name]: Text or identifier of a link or button.

🌍 Global Scenarios

click to see global scenarios

Saving, Cancelling, and Reverting

Scenario 1: Cancellation and Reverting Changes

• Given I have made changes to [Form Name] but decide not to save these changes
• When I click a "cancel" button or navigate away from [Form Name]
• Then any unsaved changes should be discarded, and [Form Name] should revert to its previous state.

Scenario 2: Validation and Error Handling

• Given I am updating [Form Name] from the newly opened section below the progress bar
• When I enter invalid data (such as [Invalid Data]) and attempt to save
• Then I should receive immediate feedback indicating the error, and the information should not be saved until corrected.

Scenario 3: Confirmation of Successful Update

• Given I have entered new or updated information in [Form Name]
• When I click the save button and the data is valid
• Then I should receive a confirmation message indicating [Form Name] has been successfully updated.

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 Hosts with Low Internet Connectivity

• Given a user accesses [Form Name] with a low-speed internet connection
• When the user attempts to load and interact with the dashboard page
• Then [Form Name] should prioritize critical content and functionality, loading essential elements first to ensure usability.

Security and Privacy

Scenario 1: Security and Privacy Settings

• Given I am editing [Form Name]
• When I access the form
• Then I should have the option to update my privacy settings related to who can view [Form Name].

Scenario 2: Secure My Information

• Given I am a user entering personal or login information into [Form Name]
• When I submit this information through any form or login page
• Then the platform should encrypt this data during transmission and storage, safeguarding it against unauthorized access.

Mobile Responsiveness

Scenario 1: Mobile Responsiveness

• Given I am accessing [Form Name] on a mobile device
• When I click on the "[Link Name]" link
• Then [Form Name] should display correctly and be easily editable on my device, ensuring a responsive design.

🌐 Accessibility Scenarios

click to view accessibility scenarios

Scenario: Navigating the Page Using Keyboard Only

• Given I am a non-mouse user accessing [Specific Page]
• When I use keyboard navigation (Tab, Shift + Tab, Enter, Arrow keys)
• Then I should be able to fully interact with [Specific Page], including buttons, dropdowns, and modals.

Additional Accessibility Scenarios

• Using the "Skip to Main Content" link
• Interacting with form fields using the keyboard
• Navigating dropdown menus using arrow keys
• Closing modals using the Escape key
• Navigating paginated content using keyboard shortcuts

Scenario: Ensuring Usability with Color-Blind Friendly Design

• Given I am a user with color vision deficiency
• When I view charts, graphs, status indicators, and use interactive elements like buttons or links
• Then these elements should use patterns, shapes, and additional indicators beyond color to ensure usability and accessibility.

🎨 UX/UI Considerations

click to view UX/UI considerations

Layout and Aesthetics

• Design Principle: Describe any specific design principles or themes that need to be incorporated.
• Visual Hierarchy: Outline how information should be prioritized visually on the page.

Responsiveness and Adaptability

• Device Compatibility: Ensure the design is responsive and adaptable across different devices and screen sizes.
• Orientation Adaptability: Mention if the design should adapt to changes in device orientation.

User Flow and Interaction

• Navigation: Describe the intended navigation path for users within this feature or page.
• User Actions: Detail any specific user actions (e.g., clicks, swipes) and their expected outcomes.

Accessibility and Inclusivity

• Color Contrast: Ensure sufficient color contrast for readability and accessibility.
• Interactive Elements: Specify guidelines for button sizes, hit areas, and interactive element visibility.

[atronse]

The pre-filled design context

[fionazhou-jsb]

@samIndustrio

Global issues on the Step 1

1. Drop downs are gray before selecting - needs to be white
2. Fields not retaining information - when delete/edit
3. Validation does not highlight where the error is - does not highlight red when you go to the next step or miss unless you click in to the field

[jdyck-fw]

1. Gray drop downs are OS specific - team will look in to it further. Need a ticket for this as extra work beyond scope for this.

2. Fields not returning information:

   • needs more work
   • PR submitted to fix status on SBC Connect fields

3. Need a ticket for this as extra work beyond scope for this.

[jdyck-fw]

Removing story points of 5.

[trevoratindustrio]

@fionazhou-jsb @mbertucci Addressed in https://github.com/bcgov/STRR/pull/21 - deployed to test

[samIndustrio]

@mbertucci

Fixes: Dropdown color fix Fields retain info through delete/edit Validation highlights fields when returning to invalid page