Page Comparison

FIO Address Selection

• Versions

  • Authenticated header

  • Non-authenticated header

• Collect

  • Username

    • X appears when first character is entered

      • When licked it clears the content and disappears

  • Domain

    • Show domains owned by user in any FIO Wallet (sorted alphabetically)

    • Obtain the list from Registration Site API (sorted as returned)

    • Default to first domain in list

• Validate

  • Username

    • Convert onfocusout

      • Convert to lowercase

    • Validate onfocusout

      • On validation error

        • Display error message:

          • Username only allows letters, numbers and dash

          • This FIO Address is already registered.

    • Validation rules

      • Format: See validation rules

      • Availability: Obtain the from avail_check

  • 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

      • Format: See validation rules

      • Availability: Obtain the from avail_check

• Display

  • Item price - see Free FIO Address and USDC Price Computation

  • Domain pull-down

    • Add “Add Custom Domain” item at the end

      • On click

        • Display domain field as entry field

          • Show X - closes the entry field and display original pull-down

  • Search icon

    • On click display re-run validation

  • Available/error banner

    • Display when FIO Address is available

    • Display on validation error

  • FIO Address item and descriptor

  • Price - see Free FIO Address and USDC Price Computation

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

    • On click

      • Add FIO Address to cart

      • Replace Add to Cart with Added

      • Add X

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

    • If user searches for a new FIO Address this section disappears, even if FIO Address was added to cart.

  • Purchase Domain

    • On click

      • Display FIO Domain Selection Page

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

      • Format: See validation rules

      • Availability: Obtain the from avail_check

• Display

  • Search icon

    • On click display re-run validation

  • Available/error banner

    • Display when FIO Domain is available

    • Display on validation error

  • FIO Domain item and descriptor

  • Price - see Free FIO Address and USDC Price Computation

  • 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

  • Register and Address

    • On click

      • Display FIO Address Selection Page

Mini-cart

Image Removed

Loader Spec

Image Added

• Display

  • Loader Inactive State Button

    • If prices fail to load, the user will be presented with:

      • Inactive price state displayed in gray

      • Inactive “add to cart” button with loading icon displayed until the prices load

    • On price load, the button state should switch to Add to Cart active state

    • Reference for animation can be found here: https://assets10.lottiefiles.com/packages/lf20_fyye8szy.json

Mini-cart

Image Added

• Display

  • Items and Descriptors

    • Price - see Free FIO Address and USDC Price Computation

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

    • On click

      • User has only 1 Free FIO Address in mini-cart

        • Display Purchase Page

      • Otherwise

        • Display Cart Page

      • 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