[RESPONSIVE - Component] Product availability

[prestascott]

Epic: #2
Desktop's issue: #56

Link to Figma prototype

UX and design explanations

It's important to mention the product availability in the product list, product page and cart page

• Only x left in stock -> product is in stock and the quantity is displayed when it's low
• x left in stock -> product is in stock and the quantity is displayed if the merchant wants to show it
• On backorder -> product isn't in stock but can be ordered
• Out of stock, Other product variations available -> product isn't in stock and can't be ordered, but the product is available in other variations (size, color, etc)
• Out of stock -> all the products aren't in stock and can't be ordered

Mockups

Home Page

Product Page

Category Page

Cart Page