Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

https://overflow.io/s/Z6B8A8VT

Mobile special handling

https://overflow.io/s/G9WS0H80?node=52fd5316

UX Assets

Register FIO Address

...

Visual

Functionality

FIO Domain Selection

  • Versions

    • Authenticated header

    • Non-authenticated header

  • Collect

    • Domain

  • Validate

    • Domain

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Unfortunately the domain name you have selected is not available. Please select an alternative.

      • Validation rules

  • Display

    • Search icon

      • On click display re-run validation

    • Available/error banner

      • Display when FIO Domain is available

      • Display on validation error

    • FIO Domain section

      • Selected FIO Domain

      • Show price

      • Add to Cart link - display when FIO Domain is available

        • On click

          • Add FIO Domain to cart

          • Replace Add to Cart with Added

          • Add X

            • On click remove FIO Domain from cart and remove this section

    • Cart section

      • Checkout Now link - display when cart is not empty, hide when empty

        • On click

          • Display Cart Page (if more than 1 item in cart) or Checkout Page otherwise

            • If user not authenticated, display Create Account Page as overlay and all other registration steps as overlay.

      • Trash can icon

        • On click

          • On click remove FIO Address from cart

    • Register and Address

      • On click

        • Display FIO Address Selection Page

Mobile Special Handling

Visual

Functionality

Cost moved

Image Added
  • When FIO Address/Domain is viewed on mobile device, the following changes are applied:

    • Cost is moved from it’s own label to Available banner

    • Screen is automatically scrolled after clicking Get My FIO Address/Domain so that:

      • Available banner is on top of screen making Add to Cart and Checkout visible on screen

Checkout

Visual

Functionality

Cart

  • Versions

    • This page is only displayed if more than 1 FIO Address is in Cart or user has more than 1 FIO Wallet with balance greater than 0, otherwise skip and display Checkout Page

  • Collect

    • FIO Wallet name - only show if user has more than 1 FIO Wallet irrespective of balance

  • Display

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all FIO Addresses

    • Low Balance banner

      • If wallet balance is less than purchase amount due, display Low Balance error

        • Copy: “There are not enough FIO tokens in this FIO Wallet to complete the purchase. Needed: XXX.XX FIO, available in wallet: YYY.YY FIO. Please add FIO tokens.“

      • If multiple wallets exists:

        • At least 1 wallet has sufficient balance

          • Show wallet with largest balance

            • If multiple wallets with same balance show first in alphabetical order

        • No wallet has sufficient balance

          • Show first in alphabetical order

    • Pay with FIO link

      • On click display FIO Payment Page

    • Search for more FIO Addresses

      • On click

        • Display FIO Address Selection Page

FIO Payment

  • Display

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all items' cost in cart

    • FIO Wallet balance

      • FIO as obtained from /get_fio_balance

      • USDC calculated: FIO balance * Total USDC / Total FIO

      • If wallet balance is less than purchase amount due, display Cart page with Low Balance banner

    • Purchase link

      • On click

        • Run /get_fee

          • If prices have changed, display Cart page with updated pricing and Pricing update! banner.

        • Check user’s FIO balance

          • If wallet balance is less than purchase amount due, display Cart page with Low Balance banner

        • Collect

          • PIN code

        • Display Transaction Processing Page

        • Register Register FIO Address and FIO Domains

        • Display Registration Confirmation Page

Register FIO Address and FIO Domains

  • Free

    • Execute using Registration Site buy-address

    • Please note: API token has to be stored server-side

  • Paid

  • Exception handling

    • It’s possible that some items may be successful while other not

    • If All success display Payment Completed Page

    • If All error display Purchase Error Page

    • If mix display Partial Success Page

Registration Confirmation

  • Display

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all items' cost in cart

    • Close

      • When clicked display Authenticated Home Page

    • X

      • When clicked display Authenticated Home Page

Purchase Error

Same as Partial Success Page except:

  • Do not show Total cost Remaining banner

  • Modify Header copy to "Purchase error!"

  • Do not show Purchase Completed section.

  • Modify banner copy to "Purchase failed! Your purchase has failed due to an error. Your funds remain in your account and your registrations did not complete. Please try again later."

Partial Success

  • Displayed when some items in cart were not purchased due to errors.

  • Display

    • Items purchased

    • Items which had errors

  • Display

    • Try Again

      • the purchase of remaining items is retried and Purchase Interstitial is displayed.

    • X

      • When clicked display Authenticated Home Page

  • Remaining items are left in Cart