excellarateinc / voyage-app-angular-ecommerce Goto Github PK

As a user, I need the ability to check out

1. User clicks on Cart icon
2. User clicks on Checkout
3. There is a Contact section that auto-populates the users (if it exists in database)
   ---- first and last name (concatenated)
   ---- email address
   ---- Company *

• Company:
  a. If LinkedIn profile is connected, pull in the Company name and store.
  b. The user is able to overwrite this field

4. User fills out the form with the following fields.
   Shipping (Header)
   Street Address
   Suite
   City, State,
   Zip Code

Payment (Header)
Defaults to a non-editable field which shows the Credit Balance available.
See the design in the link below.

All of these fields are required.

4. User clicks on "Complete Purchase" Button

Styling Requirements

1. Headers on the page (CONTACT, SHIPPING, PAYMENT) are uppercase
2. Helper text in the fields are lowercase
3. "COMPLETE PURCHASE" button is uppercase with background-color: #4CAF50

See link below for design:
https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114127804

As a user, I need the ability to view details on an item

1. On Products Page, user clicks on an item
2. Page loads with details on the item

• Price
• Product description
• Selection of size
• Quantity
• Add to Cart button

Estimate: 1 Day
Sprint:

As an Admin, I need the ability to invite people to the App.

1. Tap on the menu
2. Tap on Invite
3. There is a field where the Admin enters the phone number
4. Admin taps on "SEND INVITE"

### Functional UI Requirements:

• When the invite is sent, there is validation that the number is valid
• If the number is not valid, there is a snackbar message informing the user, "INVALID NUMBER. TRY AGAIN."
• If the number is valid, the user is routed to the shop page and a validation message appears, "INVITE SUCCESSFULLY SENT!"

### Functional Backend Requirements:

• There is a magic link that is generated and sent to the new user via SMS
• The user, when recieving this link via sms, when they click on it, it will take them to the shop.
• No registration is necessary because all that is needed for registration is a mobile phone number. In essence, the Invite process is the registration process for the user
• When the Admin sends the invite, we need to somehow capture in the database that "Tim was the one who invited User X" this info will be used later on when the user clicks on Contact Us. The Contact Us will show Tim's contact information.

https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114345575

Navigation Banner

1. Hamburger should display on the left side

2. Shopping care should display on the right side

3. The banner should be 2 divs
   --- Top div background-color: BF360C
   --- Bottom div background-color: F4511E
   --- Cart background color: BF360C

4. $500.00 Balance
   --- $500.00 Lato Light
   --- Balance Lato Thin

Go here t reference banner design:
https://app.uxpin.com/edit/8237417#?id_page=114123769

TBD

As a Voyage Ecommerce user
I want to view my cart
So I can see what I'm going to purchase, remove items and/or check out

• Create cart icon in the header with count of current cart items
• When clicked, navigate to cart page
• On the cart page
  • Call the API to get the cart items
  • Display each item, with a button to remove the item
  • Display "Check Out" button at the bottom. When clicked, call the API to check out and redirect to a "Thank you" page.

I need the ability to know my payment was successful

Text displays: "Your transaction was successful!"

SummaryCart
Total: xxx
Shipping & Handling: $0
Estimated Sales Tax: xxx
Order Total: $xx.xx

Button/Link "Shop Some Mo'"
(This button background color is #1565C0)

https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114129297

As a user, I need to view the items I have added to my cart so far.

1. User clicks on the Cart icon in the top right corner
2. The page header displays "SHOPPING CART"
3. There is a table that displays the following columns:

• A blank column (where the "x" will be stored denoting remove)
• QTY
• PRICE

4. There is a SUBTOTAL at the end of the table, which provides the sum cost of the products
5. There is a button at the bottom called "Checkout"

Styling

• All characters on the page should be uppercase
• The CHECKOUT button background color should be #4CAF50

The page should match this high-fidelity design:
https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114124529

As a user, I need the ability to navigate to different pages in the app.

From anywhere on the site, once the user has logged in, theese navigation items should added:

• Transfer Funds
• Send Money
• Shop
• Must add cart icon in the top left navigation --> should be to the left of Notification icon

Estimate: 1 Day

As a user, I need the ability to login.

1. Lighthouse Icon and "Lighthouse" displayed

2. There are 2 text fields, displayed as helper text:
   ---- username
   ---- password

3. There is a "LOGIN" button

4. There is a "FORGOT PASSWORD?" link

5. There is a "Sign in with LinkedIn" button

6. There is "Don't Have an account? Sign-up" Sign-up is a link to the Registration page

Styling Requirements:
-- LOGIN: Uppercase, Font-Family: Lato Regular, Background-Color: #F4511E
-- FORGOT PASSWORD?: Uppercase, font-color: #BF360C
-- Sign in with LinkedIn: background color: 0C65AB
-- Don't have an acount? Sign-Up: Sign-up font color: EE3918

Design:
https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114180988/simulate/sitemap

As a user, once I make a purchase, I need the ability to see the state of my order.

Functional Requirement:
Once the user makes an order, the default state is "ORDER PROCESSED"
When the user goes to this order page, they should see this:

https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114130814

When the package has been shipped and there is a link to the order, it should be displayed like this:
https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114190255

As a user, I need the ability to see a list of all of my orders.
(Users are able to make more than one order).

See mock-up:
https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114345990

As a user, I want to know more about the company that built the app.

1. User taps on hamburger menu
2. User taps on ABOUT LIGHTHOUSE
3. The page displays information on the company. Marketing copy is below:

We do legacy (support and modernization).

• 18 Years of enterprise experience
• 450+ Modernization projects

Think asset. Not Liability.
The greatest challenges in IT are operational, not technological.
By its very definition legacy software serves a valuable purpose. It's an asset. An aging one, to be sure, but not one to treat with a cavalier “rip and replace” approach. That’s because, for most organizations, the greatest challenges are operational, not technological. Designing the right business processes and aligning resources, both human and technology, are critical for a successful modernization effort.

4. There is a Learn Some Mo' button which takes users to the Lighthouse marketing site.

See high-fidelity prototype for UI requirements:
https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114346070

As a Voyage Ecommerce user
I want to see a summary of accounts when I log in
So that I know how much money I have in my accounts

• When the dashboard loads, call the API to get the summary of accounts
• Display each account with its info

Font Family: Lato Thin
Body Background Color: #F6F6F6
Navigation Background Color: #EBEBEB

As a Voyage Ecommerce user
I want to be able to transfer money between my accounts
So that I can re-balance my accounts as necessary

• Create a left sidebar item called "Transfers"
• Create transfers page that has dropdowns for
  • from account
  • to account
  • amount
  • memo
• Button for "Transfer" and "Cancel"
• Cancel returns to the dashboard
• Transfer calls the API to do the transfer
  • display errors if server returns error
  • display success message on 200 response

Very similar to #1

• Need a new sidebar item called "Send money"
• Create send money page that has the following fields
  • From Account
  • To Email Address
  • Amount
  • Memo
• Send Money button and Cancel button

This will call the API endpoint for external transfer

Show same success and error messages as the other issue.

As a Voyage Ecommerce user
I want to be able to view merchandise in the store
So that I can purchase products with my money

• Create a new sidebar item called "Store"
• Create the store landing page which displays the list of products for sale, which includes
  • Name
  • Description
  • Price
  • Image
  • Available Sizes (S, M, LG, XL)
• Display "Add to cart" button by each product, on click
  • Call the API to add the item to cart
  • Show success or error from API

As a user, I need the ability to edit my cart

1. User clicks on Cart icon
2. User clicks on remove

From the mobile phone

1. User clicks on Hamburger
2. The menu drops and extends down, Hamburger turns to X
   Menu displays:
   SHOP
   ORDERS
   PROFILE
   INVITE
   CONTACT US
   ABOUT LIGHTHOUSE

Styling:

1. Background-color of menu: F4511E
2. Text-transofrmation: uppercase
3. Font-family: Lato regular
4. Font-color: #ffffff

See design:
https://preview.uxpin.com/aec6c08d927ec6d8f1c1d054a0031f3991696cd1#/pages/114121148