Visible Elements

Visible Elements

Background color: Border Color HEX#AFB0B3
Cursor: not-allowed
All hover/focus styles are cleared

Enters this state when all required fields in the section are filled out adequately

Background color: Primary Color HEX#1C88C7
Cursor: Default
Normal hover/focus styles for button

Only visible when flipping a quote to an order.

When clicked, the quote gets added to the cart, allowing the user to add more products to the order.

Utilizes the same business rules/functionality as the current implementation of Continue Shopping.

default:
"Return to Cart"

If the user has a quote in their order:
"Return to Quote Center"

Default: empty
Field requirements: Each customer chooses if this is required or not for their orders
Max Length: 

Default: empty
Field requirements: Each customer chooses if this is required or not for their orders
Max Length: 

Section status indicator

• If the user filled in Job Name
  • "Job Name: " {job name}
  • Note: where {job name} is the value that the user entered in the Job Name Field

• If the user filled in PO#
  • "PO#: " {po}
  • Note: where {po} is the value that the user entered in the Purchase Order Field

On click: Shows the "My Addresses" modal opened to the "New Address" tab.

"My Addresses " {info-action-icon}

functionality should match current implementation of the locations search in job board.

• only searches "all addresses"
• results replace "recent addresses" and "all addresses"

• Shows the last 5 most recently used saved addresses.
• Sort Order: Most Recent first

Questions:

• TAX EXEMPT label will display in the same position and style as in the radio group.

• Billy - What is the format for how different saved International Addresses will be saved? (More of a question for IT)

• Lists all of the users saved addresses
• Sort Order: Alphabetical by Name, then Alpha-Numeric by Address

Questions:

• TAX EXEMPT label will display in the same position and style as in the radio group.
• Billy - What is the format for how different saved International Addresses will be saved? (More of a question for IT)

Default: empty

Field requirements: required

Default: empty

Field requirements: optional

Default: empty

Field requirements: required

Default: empty

Field requirements: optional

Zip/Postal Code Field

Default: empty

When the user has focus to the field, and enters the 5th digit the following will occur:

1. The City and State fields will be revealed beneath the Zip Code Field using the same style as the Zip Code Field.
   1. The system will attempt to auto-populate the City, State, and Country fields based upon the zip code
   2. Once the zip code field expands the City, State, and Country fields, they cannot be hidden. They stay visible.

• Field requirements: Required. Limit characters to 9 numeric digits
• Use input masking to separate the first 5 characters from the last 4 characters with a "-" if number of characters is greater than 5

• International Address fields will use the same styling and spacing as all of the other fields.
  
  • https://www.uxmatters.com/mt/archives/2008/06/international-address-fields-in-web-forms.php
  • From this article, we're using a combination of the "changing format" and the "generic format"

• If this is checked when the user pushes "Use This Address", it will be added to their saved addresses and will be available in future orders.
• If this is NOT checked, the address will only be made available for the current order

Same functionality as Close Modal Button

On Click: Adds the entered address to the Shipping Address Radio Group beneath their primary address

On click: Shows the "My Addresses" modal opened to the "Saved Address" tab.

Shows when the user has more than 5 saved addresses

Default: earliest available date

Header Section - Left and Right Arrows

On Click: advances or reduces the month by 1

Shows a list of month/year combo's up to a year out.

• Show's a calendar of the selected month/year
• Days that aren't selectable are disabled
  • What is selectable would be determined by the day of the week, time of day, business hours of selected branch (for pick up), and our business rules around these things.
• "Today" is marked with a disabled circle
• The currently selected day is marked with an active circle

Selecting a preset auto-selects that preset from the calendar.

After selecting a selectable day from the calendar or a preset from the preset section, the dropdown would close

Default: empty

Field requirements: optional

Field requirements: optional

Field requirements: optional

Default: checked

• When checked, the subtext will read: "This order will be shipped when all products are available."
• when unchecked, the subtext will read: "Products from this order will be shipped as they become available."

On click: Updates the summary text with entered values and sets the Shipping box to summary mode.

On click: Sets the Shipping box to summary mode without updating summary text.

Note: Not visible until opened from summary mode

"Pick Up From"

Note: Not visible until opened from summary mode

Default: Location from Job Board

Same functionality as the Locations Dropdown in Job Board

• Toggling the switch on will lock the locations dropdown and prevent availability modal from opening.
• Toggling the switch on will swap out the regular Pro Pick-Up form fields for the 1-hour specific fields, "Contact Name" and "Contact Phone"

Default: empty

Field requirements: required

Default: empty

Field requirements:

• required
• Character Limit: 10
  • use input masking to format the phone number

same as shipping section

Default: empty

Field requirements:

• optional
• Character Limit: 10
  • use input masking to format the phone number

same as shipping section

Default: checked

• When checked, the subtext will read: "I want to pickup this order once, when all products are available."
• when unchecked, the subtext will read: "I want to pickup products as they become available."

Note: Not visible until opened from summary mode

"Ship To"

Line 1: {Name}
Line 2: {Company}
Line 3: {Street Address} ","
Line 4: {City} ", " {State} " " {Zip}

{field-label} ": " {field-value}

• {field-label} is the label of the field the user filled out
• {field-value} is the value that the user entered

Note: Only shows if the user checked the ship complete checkbox

"Pick up From"

Store Location

Line 1: {Store-Street-Address}
Line 2: {Store City} ", " {Store State}

"Needed by: " {date-needed}

• {date-needed} is the date they selected from the dropdown

{field-label} ": " {field-value}

• {field-label} is the label of the field the user filled out
• {field-value} is the value that the user entered

Store Location

Line 1: {Store-Street-Address}
Line 2: {Store City} ", " {Store State}

"Contact: " {contact-name} " - " {contact-phone}

• {contact-name} is the value that the user entered for the Contact Name field
• {contact-phone} is the value that the user entered for the Contact Phone field

Heading: "SELECTED ACCOUNT"

Line 1-3: 

• This should match their most specific selection from Job Board:
• 

Line 4: {info-icon} " You can change your account from the cart."

Heading: "PAYMENT METHOD"

Credit on Account:

• {ferguson-weld-el} " Credit on Account " "Learn More"
  • {ferguson-weld-el} is the ferguson logo symbol
  • "Learn More" is a link to a page that explains more about charging to your Ferguson account

Credit Cards

• {card-type-image} " " {card-nickname} " ending in " {last-4-card-num} " - Exp " {exp-date}
  • {card-type-image} is the logo of the card's card type
  • {card-nickname} is the user-given nickname for the card
    • if a card doesn't have a nickname, use "card"
  • {last-4-card-num} is the last 4 digits of the card number
  • {exp-date} is the expiration date of the card in the format: MM/YY

"New Credit Card"

Field Requirements:

• Required
• Character Limit: 16 characters
  • Input masking to include a " " after every 4 characters

How to handle cards with less than or more than 16 characters:

• The best way to handle this would be to code the character limit as part of the "card-type" identification. For example, Once you know it's an AMEX card (based on the number they enter), in addition to showing the AMEX logo aligned to the right of the input, you would set the character limit to 15.

See 109 for Card Logos.

Note: Ferguson.com and Trilogie only accept MC, Visa, AMEX, and Discover.

"Expiration" Field

Field Requirements:

• Required
• 2 inputs styled as one
  • Caracter Limit: 2 numeric characters
  • auto-advance 

"Name on Card" Field

"Security Code" Field

Default: empty

Field requirements:

• Required
• Character Limit: 10
  • use input masking to format the phone number

• Tooltips show when the user hovers over the trigger element
• Tooltips continue to show as long as the user hovers over the trigger element, or the tooltip itself.
  • There should be a 200ms delay before hiding the tooltip when the user is no longer hovering over the trigger element, or the tooltip itself, to account for mistaken mouse-movements.

Billing Address

"Use Company Address" checkbox

• If checked, will use the same address tied to the current account they're on.
• If unchecked, will display the same form from the "New Address" Tab of the "My Addresses" Modal

"Save this payment information" checkbox

• If checked, system will save the payment method to be used on future orders
• If unchecked, the payment method will only be available to be used on the current order

Cancel Button

Same functionality as Close Modal Button

"Pay Using"

Heading: "SELECTED ACCOUNT"

Line 1-3: 

• This should match their most specific selection from Job Board:
• 

Line 4: {info-icon} " You can change your account from the cart."

On Click: Opens the Note modal

Utilize the same modal as current checkout

"Select all (" {number of items} " items)"

• by checking it, all products become checked
• by unchecking it, all products become unchecked

 "Net Price"

Comment: Billy - I need to check with analytics to know how opening in a new tab will affect datalayer and pathing. I think this is the best option for links away from checkout, but want to make sure it doesn't cause any datalayer issues. Workfront Request: https://ferguson.my.workfront.com/issue/view?ID=5bc0cf8400e6d3e654b81fa8305fbe3e

{web-display-name}

We need the other messages to decide which part is linked

We need the other messages to decide which part is linked

Default: quantity from cart

Field requirements:

• minimum value is 1
  • if user enters a value that is <= 0, it gets changed to 1 upon leaving the field
• Maximum value is determined by the product
  • if the user enters a value that is >= the product max, it gets changed to the product max upon leaving the field
• Steppers increment the quantity based on it's "multiples" requirements
  • If the user enters a value that doesn't match the "multiples" requirements, it gets changed to the next accepted quantity amount that would include the amount the user entered.
    • ex. "must be entered in multiples of 20"
      • user enters 22
      • changes to 40 when the user leaves the field
• minus stepper is disabled at the minimum value
• plus stepper is disabled at the maximum value

"Order Summary"

Each Row:

• Left Aligned:
  • {Price-Label} ":"
• Right Aligned:
  • "$" {Price-Amount}

Left Aligned:

• "Total:"

Right Aligned:

• "$" {Total-Amount}

"For help with orders or products, call "{Branch-Number}"."

"For technical help, call (888) 222-1785."

"Web order number: " {web-order-number}

"Copyright © " {current-year} " Ferguson Enterprises Inc. All rights reserved."

Terms of Site Use

Terms of Sale

Privacy & Security