* Create new vars to differentiate between single and multiple item price
This is because we need to display the subtotal of the item AND the total (subtotal * quantity)
* Add subtotal and move quantity picker
As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name.
* Move line item total to top of grid on mobile/medium/small
* Remove CSS for trash icon that is no longer used.
* Remove link style colour override from product name and make total bold
* Remove quantity column from CartLineItem
This is because the quantity picker is now displayed below the product metadata and name.
* Fix margins around quantity picker and its width
* Always disable link to product in OrderSummaryItem
* Add single price below product name in OrderSummaryItem
* Add styles for new OrderItemSummary design
* Move total into its own "column"
This is to stop product description text flowing under the total and making it look untidy.
* Add styles to cater for total price being its own column
* Convert precision after multiplication instead of before
* Remove unnecessary div from OrderSummaryItem
* Remove line height from product names on order summary
* Add more margin to the bottom of the product metadata div
* Delete trash icon
* Only remove margin from the bottom of last product-details
* Move quantity input to below product name in cart skeleton
* Add placeholder for individual price to Cart skeleton
* move items to package
* move components to package
* fix dep issue
* pass down classname
* move Panel and Price utils
* expose extensions
* fix import
* move cart call to inside slot
* fix unit tests
* fixes after rebase
* move ShippingRatesControl into packages/checkout
This fixes the `wc-blocks-checkout` circular dependency because `Package` was importing from `@woocommerce/checkout`.
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
* fix circular dependency in text-input
* fix circular dependency in chip component
* fix circular dependencies in AddressForm component
* fix circular dependencies in product-list
* fix circular dependencies in hooks
* fix circular dependencies in context
* Fix circular dependencies in components/cart-checkout
* fix use-checkout-submit test
- can’t mock the hook alias anymore
- account for undefined object returned from `usePaymentMethods`
The hasLink prop was removed from ProductName and disabled is used instead, this change makes the variable name more descriptive, and uses disabled to signal if the ProductName should link or not.
* Add catalog_visibility to CartItemSchema.php
This is used to get whether the product is visible in the catalogue, visible in the shop only, visible in search results only, or visible everywhere. We need to know this so we can pass it to the ProductImage and ProductName components.
* Remove links from CartLineItemRow if not visible in catalogue
Added catalog_visibility to lineItems prop, and when the product is not visible in the catalogue do not wrap product image in a link. Also pass down the hasLink prop to ProductName.
* Add hasLink prop to ProductName
When this prop is false we should not output the link around the product name. This is for when the product is hidden from the catalogue but we still want to show its name somewhere.
* Add tests and storybook for ProductName
* Add catalog_visibility check to OrderSummaryItem
When the catalogue visibility of a product is set to hidden or search, then the product name in the checkout sidebar should not be hyperlinked.
* Reverse logic for hiding link on product image & disabling link on name
Following a point from @budzanowski we do not need the hasLink prop, making use of disabled is probably a better idea.
* Remove tabindex from a in ProductName & output span if name is disabled
This change removes the need to pass a tabindex to the a in ProductName. This is because a disabled ProductName will now never output an a tag. When the ProductName is disabled a span is output instead, which has no tabindex by default.
This change also reverses the logic to decide whether the a or span should be output so as to make the code more readable and flow better.
* Update storybook and tests/snapshots for ProductName
* Merge ProductPrice atomic block and component
* Update assets/js/atomic/blocks/product-elements/price/block.js
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
* Update assets/js/atomic/blocks/product-elements/price/block.js
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
* If product price component has alignment, make it a block
* Make ProductPrice propTypes more specific
* Add align prop to loading product price
* Add stories to ProductPrice component
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
* Show backorder notice in the Cart block
* Don't render variation <div> if empty
* Create ProductBackorderNotification component
* Add product backorder notification to the checkout block
* Fix classname and comment
* Rename notification->badge and don't show low stock badge if backorder is shown
* Use ternary to dispaly backorder/low stock badge
* Update base/components classnames
* Fix class name conflict
* Fix some class names mismatch
* Fix review loading placeholder styles
* Fix docs format
* Update old class name
* Fix price slider regression
* Fix load more button component missing legacy class
* Fix wrong loading mask styles classname
* Remove 'checkout' from 'wc-block-components-checkout-payment-methods__save-card-info' classname
* Make it explicit legacy classes will be removed in the next major version
* Make product variation data styles belong to product metadata
* Improve docs sentence
* Order summary: Add spacing between product name and price name
* Remove border from shipping options in the side bar
* Add a hasBorder prop to Panel
* Checkout Order summary: remove margin product description
* Fix padding when there are multiple packages and remove old code
* Simplify selector
* Add margin botton to no shipping options notice
* Make sure Checkout titles are aligned when there are no express payment methods
* Update step heading margins according to new designs
* Move order summary styles to component style.scss
* Fix wrong class name in Order summary
* Move express payment methods a little bit higher
* Fix shipping options panel misaligned in the Cart sidebar
* Add right padding to panel button so text doesn't overlap the arrow
* Fix wrong class name in Order summary (II)
* Update item count badge styles
* Make sure item count badge doesn't break in multiple lines
* Make item count badge have white background
* Add docs
* Move order summary CSS properties outside of the sidebar class to reduce specificity
* Move Order summary to its own component
Thomas Roberts
Seghir Nadir
Darren Ethier
Albert Juhé Lluveras