Skip to content

Instantly share code, notes, and snippets.

@JohnDMathis
Last active October 17, 2016 22:50
Show Gist options
  • Save JohnDMathis/841cd606ce5e4c667d79dcdeda5efe74 to your computer and use it in GitHub Desktop.
Save JohnDMathis/841cd606ce5e4c667d79dcdeda5efe74 to your computer and use it in GitHub Desktop.

Purchase Dialog

pages

form 1 -- main

UI elements
	* title
	* body text
	* 3 read-only fields with labels
	* numeric entry for license count
	* 5 external links
	* up to 2 radio buttons for edition
	* 2 radio buttons for monthly/yearly payments
	* calculated section displaying payment per month
	* Purchase button
	* Purchase Later button (cancel)
Actions
	* calculate payment when an edition is selected
	* validate an edition was selected
	* go next page

form 2 -- billing info

UI Elements
	* 11 text fields
		- 7 required
		- country dropdown
		- state dropdown (or text field if no states available)
		- zip, state
		- email (validate format)
	* back button
	* next button
Actions
	* load countries
	* load states (conditionally)
	* go back
	* next (validates on server, fails on error)

form 3 -- confirmation

UI Elements
	* 15 readonly fields for summary
	* back button
	* confirm button
Actions
	* go back
	* POST to /update

after successful purchase, display thank you dialog / confirmation

api requests

GET /trial/getcountries -- returns list of available countries
GET /trial/getstates -- returns list of available states for the country
POST /upgrade

questions

  • must the "spinner" be used to change the number of users desired?
  • must the "sliding effect" be used when changing forms?
  • could the confirmation information be presented contextually? (ie not in fields, but just formatted output)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment