Skip to content

Software Developer III Challenge

Jump to bottom
Nando Pena edited this page Feb 7, 2025 · 1 revision

For the software developer III challenge, you will be tasked with completing an "Order summary" page for the Microtech Store app. This work will be handled as an epic of many smaller stories. Once complete, customers will have a new page allowing them to confirm the purchase of the products they have selected.

To submit your work, create a new branch based off the main branch. Name your branch with your first and last name separated by a hyphen. You will submit a pull request against our main branch with your work. Each story should have its own atomic commit with the story name as the commit title. The order in which each story is completed is not strict, but some stories will obviously need to precede others.

Order summary page example mock-up

Your final order summary page should ultimately resemble (but won't exactly match) the example in this screenshot.

image

Stories

Order summary route

Description

As a customer
I want a unique route that takes me to an order summary page
So that I have an address I can visit to see my current order summary

Acceptance Criteria

  • When visiting http://localhost:4200/order-summary, I see a page with the header "Order summary"
  • Be thoughtful about where you put the page component
  • Ensure that the new page styling and layout is consistent with the existing pages

OrderItem component

Description

As a customer
I want a component showing a single product in my order 
So that I can easily distinguish the information about any item in my order

Acceptance Criteria

  • Create a new OrderItem component which takes a product value as a prop
  • OrderItem displays the product's title, category, price, and image
  • If an image is not displayed, a default image is shown instead. You will need to add a default image to the repo.
  • OrderItem displays a trash button
  • OrderItem takes an onDelete callback as a prop
  • Include unit tests for the follow cases:
    • A valid product includes a title, category, price, and image
    • A product displays a default image
    • An invalid product is handled in a non-fatal manner

Order summary OrderItems

Description

As a customer
I want to see a list of each product in my order 
So that I can verify that I have added the correct items to my order

Acceptance Criteria

  • The order summary page displays a column of OrderItems, one for each product in the order
  • Clicking the trash button for any OrderItem will display a confirmation modal
  • The confirmation modal will state "Are you sure you wish to remove from your order?"
  • If the user clicks "Cancel" the modal will close with no additional impacts
  • If the user clicks "Remove item" that product will be removed from the order and the modal will close
  • If the product is removed, a toast will be displayed indicating if the removal failed or succeeded
  • Include E2E tests for the follow cases:
    • Adding items to the order summary
    • Removing items from the order summary

Order summary costs

Description

As a customer
I want to see my order total costs
So that I know how much I will be paying for all my selected products

Acceptance Criteria

  • The order summary page displays a column with cost details
  • The Subtotal is displayed, which is the sum of all the product prices
  • Shipping is displayed, which is a flat %5 rate
  • Taxes is displayed, which is a flat 6.25% of the subtotal
  • Total is displayed, which is the subtotal plus shipping and taxes
  • Update the appropriate E2E tests for the follow cases:
    • Adding items to the order summary
    • Removing items from the order summary

Order confirmation

Description

As a customer
I want to confirm my order purchase
So that I can finalize the purchase my selected products

Acceptance Criteria

  • The order summary page displays a "Confirm order" button
  • When I press "Confirm order", a modal is displayed
  • The confirmation modal will state "Are you sure you wish to place this order?"
  • If the user clicks "Cancel" the modal will close with no additional impacts
  • If the user clicks "Place order" the order will be placed
  • If the order was placed, all products should be removed from the current order
  • If that succeeds, a toast will be displayed indicating "Order placed for X items"
  • If that fails, a failure toast will be displayed. All items should remain in the order

Order inventory update

Description

As a customer
I want to see updated inventory quantities after completing an order
So that the product list accurately reflects product availability

Acceptance Criteria

  • In addition to removing each product from the current order, the order submission process should reduce the quantity for the matching product in inventory.
  • For bonus points, implement this feature as an atomic transaction such that if one of the updates fails, none of the updates are applied

Clone this wiki locally