refactor: inventory status fixes and updated UI design

[kieckhafer]

BLOCKED BY reactioncommerce/reaction#4859
You can test this now by using branch feat-kieckhafer-inventoryUpdates of the core app, but this should not be merged until #4859 is merged into rc8.

Resolves #374 & reactioncommerce/reaction#4840
Impact: minor
Type: style && refactor

Issue

• Inventory status badges were not displaying at all on the PDP.
• Once they were fixed, and statuses were displaying, they were still displaying in the old design
• Customers could add more inventory to their cart than was available

Solution

This update:

1. Fixed the existing badge statuses so the data was working correctly
2. Updated the GraphQL endpoint query to get more data which will be needed int he future (inventoryInStock, inventoryAvailableToSell)
3. Updated the UI to match the new designs of a "badgeless" inventory update (see PDP: Badge is not shown/respected on PDP #374 for designs)
4. Put a limit on the number of items a customer may purchase. The limit is equal to the new quantity data on each option / variant, inventoryAvailableToSell

Breaking changes

None

Testing

1. Open the operator app and storefront.
2. Change inventory on products to all different statuses: Sold out, low inventory, backorder, etc
3. See that the starterkit matches the designs and correctly displays the right status
4. See that you cannot choose a higher quantity of product to order than whatever is listed as the inventoryAvailableToSell on that particular variant / option