LCFS - Transfer graphic on new transfers page

[justin-lepitzki]

Description: To develop the dynamic graphic on the new transfers page:

• Graphic has default view when first creating a new transfer and the Transfer Details section is blank / yet to be filled out
• Graphic is dynamic in that the graphic changes as the user enters in the Transfer Details: quantity, selecting organization, price per unit

Wireframe:

• New transfer page, shows default view of graphic when first visiting the page: https://preview.uxpin.com/59145260c7d8cc48969ac79401cc03d84843c3d9#/pages/164975114/simulate/no-panels

• Final view of graphic when all information is filled out: https://preview.uxpin.com/59145260c7d8cc48969ac79401cc03d84843c3d9#/pages/165001070/simulate/sitemap

• Final view of graphic when all info is filled out and the price per unit is zero: Private Zenhub Image

• Video of graphic changing as the user fills out the information: Private Zenhub Video

Purpose and benefit to user: Provides information about the transfer to help the user understand and ensure that they are entering in the correct info.

Acceptance Criteria:

• [ ] Given I am a , When I am , then
• [ ] Given I am a , When I am , then

Development Checklist:

• [ ] A Create a graphic as shown in wireframe and shows Organization name on the left graphic box
• [ ] B Once Organization is selected where it should display on right side of graphic box
• [ ] C Also change arrow when transaction is one way.

Notes:

[justin-lepitzki]

Hey team! Please add your planning poker estimate with Zenhub @AlexZorkin @hamed-valiollahi @jig-patel @kevin-hashimoto @prv-proton