Billing Page UI updates : post UI unification
- Dominant language
- TypeScript
- Stars
- 117
- Forks
- 51
- Avg merge
- 2d 15h
- Merged PRs (30d)
- 4
Description
As part of the UI Unification, update the Billing page
## Organization
- Move all Organization pages (Usage / Billing / Usage / About) to the same Tabbed navigation
[Currently 'Users' and 'About' are on shared tab, but 'Usage' and 'Billing are stand-alone Quartz pages]
## Billing
- Use responsive 2-column layout
- Remove 'Region' panel (this should be displayed on 'About')
- ALL Edit/Change functions open in an overlay (currently the Notification Settings opens in an overlay, but Contact Information and Payment open by swapping out panel content)
- Account Balance
- Add label "Current Usage Amount (?)" with question icon that shows flyout on hover
- Overlay text: "You will be billed on the last day of the month based on your system usage. Check out your Usage Page for details about your current charges."
- Display the current charge amount
- Display the 'last update' time as sublabel below current charge amount
- Contact Information
- Split into TWO Panels
- 'Billing Contact' (First Name / Last Name / Contact Email Address / Company Name)
- Display as three lines, no field labels ("First Name Last Name / Email / Company Name")
- Edit opens overlay for editing all 4 fields (with labels)
- 'Billing Address' (Country / State (Region) / Address 1 / Address 2 / City (Town) / ZIP (Postal Code))
- Display as 4 lines (3 if Address 2 is Null)
- Address 1 ; Address 2 (unless null); City, State ZIP
- Edit opens overlay
- Need to match revised Checkout labels / required field values for international address
- 'Primary Use Address' : [OPTIONAL - IF these data fields have been created]
- Display toggle for " [ ] Primary Use Address is same as Billing Address" (default to 'checked' state)
- If UN checked, display additional section for 'Primary Use Address' fields, with separate Edit button (and edit overlay)
- Notification Settings
- Minor UI edit -- display text values for the contact email and the notification amount as bold/light gray (to match how we display other field values)
- Overlay: (Match settings on Checkout)
- Reduce width of input fields
- Notification amount should accept decimal amounts
- Minimum value is $1 ... NOT $10
### Billing Design
https://www.figma.com/file/i2P2Sm0QP8R7oAFhSFMpqI/Billing-Q2-2021?node-id=1131%3A1134
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.