Input enhancement: CanadaPost AutoComplete dropdown

[abansil]

Problem statement

As a customer, I would like to enter a Canadian address so that I can complete an e-commerce flow (e.g. checkout) process, enter an address to access products, and/or complete other activities on T.com that require address completion.

Recommendation

The UPC team is building out dropdown logic using the CanadaPost api. We would like to contribute a reusable component which is attached to a TDS-core input component.

Design intent

A customer should be allowed to type in and select their address simply from a list instead of inputting street/unit #, street name, postal code etc. manually.

Designs

• https://telus.invisionapp.com/share/PSU87V9REBG#/387106538_TELCOM-1370_ManualCheckout_Layered
• https://telusdigital.atlassian.net/browse/TELCOM-1370
• https://telusdigital.atlassian.net/browse/TELCOM-2032
• https://telusdigital.atlassian.net/browse/TELCOM-112

Acceptance criteria

This section is intentionally left blank. See story writing process.

User stories

(This section is intentionally left blank. User stories and acceptance criteria go here.)

Example:

Scenario: Displaying the component

Given text is provided
Then the text is displayed as a child
And the text size matches core-text medium

Out of scope

• (INPUT FORM GROUP) If the address is not found by CanadaPost, there should also be a method for them to input the necessary fields to complete an address

Meta

• Include component name and version: vX.Y.Z
• Willing to design solution: Yes/No
• Willing to develop solution: Yes/No
• Has workaround: Yes/No
• Do any similar components already exist in TDS (core or community): Yes/No (https://tds.telus.com/components/index.html#input)
• Which teams/applications do you think would use this improvement? all
• High impact: Yes/No

[abansil]

@ancho21 if you could hop on & take a look at the AC's/User Stories that would be sweet!

[ancho21]

User Stories
As a customer
I want to AddressComplete to suggest the relevant addresses as I start typing my address
So that I do not have to enter all the details of my address and the address is autocompleted

As a customer
I want to be able to enter my shipping address if AddressComplete API is down
So that I can ship my order to where I define.

As a customer
I want to be able to enter my shipping address if AddressComplete cannot find it
so that I can ship my order to where I define

ACs

1 Given, I am in the Shipping Address
When I type in my address |
Then, AddressComplete lists suggestions based on what I have typed

2 Given, I see a list of options from AddressComplete
When I click on one of the options
Then,| The Shipping Address field is populated as one line with the appropriate fields
3 Given, I am on Shipping Details (AddressComplete)
When I click on Didn’t find your address?
Then, I view a form to allow me to enter myAddress NameAddress #Suite #CityProvincePostal Code, PO Box
4 Given I am on Shipping Details (Manual)
When I want to go back to Shipping Details (AddressComplete)
Then I click on a link above the Confirm button, I see Shipping Details (AddressComplete)

5 Given, I am on Shipping Details (Manual)
When I click Confirm once I finish filling the form.
Then, I move on to the next module.
6 Given, I am on Shipping Details
When Canada Post API is offline
Then I see the manual address entry form

[abansil]

BTW @varunj90 / @Christina-Lo , UPC will be contributing the dropdown CanadaPost autocomplete only. What would you advise for next steps as the dropdown wasn't flagged with any design concerns?

I'll work with the design team separately for the manual input fields.