UI: Last known address component for Personal Details section

[steveburtch]

As a completing party, I want to be able to enter the last known address of the prospective beneficial owner quickly and correctly, so that the chance is minimized for incorrect information in the beneficial ownership record.

General Instructions

1. Rebuild the component from old one in Vue3/Tailwind
2. This component will use Canada Post's AddressComplete tool (international)
3. TBD: Address format can be either ISO 19160-4:2023, or https://schema.org/PostalAddress
4. Refer to notes accompanying wireframes for definitive details
5. Accessibility features to be covered in another ticket. #17715

Wireframes https://www.figma.com/file/C2ThYIhZSO44dYBVGp8xAj/Register-Beneficial-Owners?type=design&node-id=0-1&mode=design&t=HBZLl2hXjNib7pfF-0

Field Specifications https://1drv.ms/x/s!AlejmOwhCCvlgcMDvsUyEofpuM1a9A?e=Rnv16O

Acceptance Criteria

Feature: Enter Last Known Address Given the Canada Post AddressComplete service is functioning correctly

Scenario 1: Select Country When I open the Country list, I can pick a single country from a list of every country listed Then I can select any of the countries or dependent territories listed.

Scenario 2: Type Address Line 1 When I begin to type an address in the first address line, addresses matching what I have typed begin to appear as typedown results. Then when I quit typing I can select the correct address or I can type in the correct address.

Scenario 3: Address Line 2 When I have typed an address in Address Line 1, Then the rest of the address will appear in Address Line 2

Scenario 4: City When I have selected an address Then the correct city will appear in the city field

**Scenario 5: Region (Optional) 5a: Given the country selected was Canada When I have selected an address Then the correct province will appear in the field NOTE to designer: if we are using AddressComplete then this would be a text box, not a select box** https://www.canadapost-postescanada.ca/ac/learn-more/try-now/

5b: Given the country selected was the United States When I have selected an address Then the correct state will appear in the field

Scenario 6: Postal Code 6a: Given the country selected was Canada When I selected an address Then the correct postal code in Canadian format (e.g. T2A 5Z8) will appear

6b: Given the country selected was the United States When I have selected an address Then the correct zip code in the format (e.g. 99950) will appear in the field

Scenario 7: Location Description (Optional)

Field List

check submission of form for mandatory/optional fields

Labels status
Country mandatory Address Line 1 mandatory Address Line 2 (Optional) optional City mandatory Region (Optional) optional Postal Code mandatory Location Description (Optional) optional

[steveburtch]

Hey team! Please add your planning poker estimate with Zenhub @hfekete @kialj876 @thorwolpert @patrickpeinanw

[forgeuxGH5]

Quick comment for this version - the Country list should be sorted alphabetically.

[gunanagar]

Below issue blocked testing.

[steveburtch]

@hfekete are you able to have a look at this for Guna?

[gunanagar]

@hfekete tested looks good. Closing this

[gunanagar]