[Woo POS] Initial mechanism to handle quantities and out of stock

[iamgabrielma]

Closes: #12750

Description

This PR adds an initial approach to handling quantities/available inventory between Product List and Cart:

• Adding products to the cart should reduce availability
• Removing products from the cart should restore availability
• Products with 0 quantity should be unavailable to add to cart

Changes

• Added stockQuantity property to the POSProduct model
• Update product card color and text if a product is out of stock
• Call to reduceInventory or to restoreInventory upon adding/removing products from cart.
• A bit unrelated to the PR: Added "Product List" title to the view, and created a FilterView and SearchView in the dashboard. Both are non-functional and mostly un-styled.

Testing instructions

Observe that:

• Adding products to the cart and reaching the 0 threshold updates the product card color and text, as well as disallows adding further products.
• Removing products from the cart restores original availability.
• Each product modification retains/updates its own inventory.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce iOS by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS
	Build Number	pr12767-09c8216
	Version	18.7
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	09c8216
	App Center Build	WooCommerce - Prototype Builds #9188

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[iamgabrielma]

This could simplified into an unique method for reducing/increasing, no strong reason to keep them separate at this point, just preference.

[bozidarsevo]

Checkout button goes off-screen when many items are added.

[bozidarsevo]

Checkout button goes off-screen when many items are added.

Looks like the "Cart" part is not a scroll view, so that would fix it!

[bozidarsevo]

Maybe make the whole view a button so that tapping the entire view content adds the product to cart?

var body: some View {
        Button(action: {
            onProductCardTapped?()
        }, label: {
            VStack {
                Text(product.name)
                    .foregroundStyle(Color.primaryBackground)
                Text(outOfStock ? "Out of Stock" : product.price)
                    .foregroundStyle(Color.primaryBackground)
                HStack(spacing: 8) {
                    QuantityBadgeView(product.stockQuantity)
                        .frame(width: 50, height: 50)
                    Spacer()
                    Button(action: {
                        onProductCardTapped?()
                    }, label: { })
                    .buttonStyle(POSPlusButtonStyle())
                    .frame(width: 56, height: 56)
                }
            }
            .frame(maxWidth: .infinity)
            .background(outOfStock ? Color.pink : Color.tertiaryBackground)
        })
        .buttonStyle(.plain)
    }

[iamgabrielma]

I'll leave this change out for the moment, since we have a specific button for the + and we do not know if tapping in the card itself should have a different behaviour (if any)

[iamgabrielma]

Thanks for the review!

Checkout button goes off-screen when many items are added.

Good catch! I've wrapped the product rows in a scroll view with 09c8216 , but future design iterations we may want to be more prominent about "there are more items down here!"

[bozidarsevo]

"there are more items down here!"

One of the good side effects of scroll view is that usually if there is more content we get a "cut-off" of the last item, so that indicates that there is more content :)