* Add TotalsWrapper component and associated styling
* Add TotalsWrapper around the subtotal, fees and discount
* Remove margins/paddings/borders from sidebar elements
This is to allow TotalsWrapper to be the component responsible for handling spacing and borders.
* Update styles to allow components to be wrapped in TotalsWrapper
* Move TotalsWrapper to checkout package
* Wrap all parts of Cart sidebar in TotalsWrapper
* Remove border from coupon panel
* Add has-bottom-border option to TotalsWrapper
* Wrap checkout sidebar components in TotalsWrapper
* Remove border/padding from order summary
* Add hasValidFills function
This will be used to check if a Slot has any fills that return truthy values.
* Remove borderSize and hasBottomBorder props from TotalsWrapper
* Wrap Slots in TotalsWrapper
* Update hasValidFills to check length of array
* Update tests and snapshots
* Only render tax totals if tax is more than 0
* Update cart/coupon/shipping design
* Add order summary heading
* Move and style discounts on checkout sidebar
* Add rate to tax lines
* Ensure the option to display taxes itemised is available to Cart block
* Output individual tax items below the total & add styles for this
* Add success notice under coupon input on successful coupon addition
* Add border to bottom of Totals footer
* Show success message when adding coupon
* Add padding to cart item rows
* Add preview data to cart for when taxes are enabled
* Add rate to cart response type
* Add showRateAfterTaxName attribute to Cart block
* Add control to cart block to show rate percentage after rate name
* Add rate % in cart totals only if option is toggled on
* Pass showRateAfterTaxName attribute down to TotalsTaxes
* Add showRateAfterTaxName to Checkout block
* Add control to block editor for showRateAfterTaxName on Checkout
* Pass showRateAfterTaxName down to TotalsTaxes in Checkout
* Change label for showing tax rates in cart and checkout blocks
* Add test to ensure Taxes section shows in Cart block
* Add tests for cart sidebar and rate percentages
* Remove order summary title from checkout sidebar
* Check if taxes are enabled before rendering the option to show rate %s
* Add ShippingVia component to show the selected rate in sidebar
* Remove value from individual tax rates
* Remove bold from Shipping via label
* Remove coupon added successfully message
* Ensure panel headings that are h2s are the same colour as others
* Clean up eslint warnings
* Show rate %s by default
* Update snapshots following design changes
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Show total sale badge in medium carts
* Add markup to cart line item row to enable it to be displayed as flex
* Add styling to display price and sale badge as flex
* Revert product price being displayed as block
* Rename sale badge and price wrapper
* Hide line-total sale badge on mobile
* Change class name on total price and sale badge wrapper again
* Replace filters with an extendibility API to hook into Cart and Checkout blocks
* Update docs
* Add a validate argument
* Add docs comments
* Add tests
* Add validation function
* Prefix validateElementOrString with __experimental
* Update experimental docs
* Typo
* Update comment
* Update JS docs
* Use an object for applyCheckoutFilter args
* Args doesn't need to be an object
* Wrap validation function execution in a try/catch block
* Only accept strings for the totalLabel filter
* Change applyCheckoutFilter signature
* Apply filters for subtotal and sale badge in CartLineItemRow
* Append suffix to prices and SaleBadge if passed in as a prop
* Add subtotal filter to OrderSummaryItem
* Add tests for OrderSummaryItem and ProductPrice
* Rename test for ProductPrice
* Update checkout filter registration plugin name
* Remove obsolete snapshop
* Remove suffix and change to format
This is because we want to make the entire price string editable, not just the part after it.
* Change formatting on SaleBadge to use createInterpolateElement
* Remove tests that are no longer needed.
* Update ProductPrice tests to reflect changes to format prop
* Check that subtotalPriceFormat contains <price/> in OrderSummaryItem
* Fix cart block styling to stop badges overflowing the container
* Add <price/> placeholder in OrderSummaryItem price filter
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Fix ShippingRatesControl not honoring renderOption prop
* Update order summary design
* Updates TotalsCoupon design
* Update Cart block sidebar title design
* Make values bold and labels regular in Cart and Checkout sidebar
* Update styles of shipping rates selector and radio control
* Remove unnecessary overflow rule in Panel content
* Fix shipping options in Checkout block
* Add some Twenty Twenty One fixes
* Fix saved payment methods display
* Remove top spacing no longer necessary in order summary quantity badge
* turn Totals title to bold
* Move right padding from product name to item description
* Take left margin off list items in product details
This is because in themes where a left margin is applied to li elements, the product detail/addon gets indented and it does not sit flush with the edge of the product details container. Adding this rule to the main wc-block-components-product-details rule will stop other themes indenting <li>s
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
* 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
* update input colors for dark and light mode + tweak padding and alignment
* update light input dropdown text color
* Fix lint errors
* Fix package lock.
* Use input-text-active for select options
* Make sizes responsive in radio control
* Unify border colors of text inputs, checkboxes and radio controls
* Unify radio control sizes in mobile/desktop
Co-authored-by: David Levin <davidlevin@Davids-MacBook-Pro-2.local>
Co-authored-by: budzanowski <bartosz.budzanowski@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Shown express payment methods in Cart block
* Fixes
* Create usePositionRelativeToViewport hook
* Typo
* Style fixes
* Remove footer push div
* Styling fixes
* Improve code clarity
* Split ExpressCheckoutFormControl into two components
* Rename visibilityObserver to referenceElement
* Replace 'useEffect' with 'useLayoutEffect'
* Add tests for usePositionRelativeToViewport
* Self-closing div
* Add explanatory comment
* Create a shim for IntersectionObserver
* Update express payment components class names
* Add todo comment to remove IntersectionObserver shim when we drop IE11 support
* fix issue with overlapping margins
* move styles out of select
* remove extra spacing
* remove extra spacing from cart
* move styles to state input and remove extra position.
* Reduce specificity of some button styles
* Submit container: make it possible for themes to change the shadow color without the need to rewrite shadow values
* Use background-color instead of background property in docs
* Add docs to style the button and the submit container
* Remove border from button
* Add back state styles to button component
* Docs improvements
* Undo unncessary changes in button component styles
* Add spaces
* 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
* 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)
* Honor heading styles in Cart and Checkout blocks
* Replace Panel with DisclosureWidget and remove Card
* Remove panel-style from main entry
* Rename DisclosureWidget props
* Simplify TitleTag assign
* Add aria-expanded attribute
* Rename DisclosureWidget to Panel
* Make Panel button clickable area smaller
* Fix specificity issues with Twenty Twenty
* Reset italics in reset-typography mixin
* Make C&C titles font size large
* Add padding to shipping options when in the sidebar
* Use named font sizes instead of values in px
* Convert rem mixin to em
* Remove unnecessary line-height
* 'Design' -> 'layout'
* Add comment to magic line-heihgt number
* Update a couple of class names to use BEM
* Use consistent name for SCSS variables
* Fix order summary line heights
* Update docs/contributors/coding-guidelines.md
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Fix different heading size of Cart block between frontend and editor
* Increase Cart submit button specificity so styles are applied in the editor
* Ensure buttons don't inherit borders
* Simplify styles
* Create Title component
* Rename 'level' prop to 'headingLevel'
* Use container queries to load Cart and Checkout responsive styles
* Update package-lock.json
* Make form-step react to container queries instead of media queries
* Make sidebar layout inner padding relative to the full-width
* Make container queries breakpoints smaller
- set appropriate padding for main cart container
- card padding is currently provided by Gutenberg component (?)
- overriding padding on totals card to match main container
* Add ending dot to sentence
* Open links to products from Cart and Checkut blocks in new tabs
* Makes sure product names are broken if they overflow the container
* Use native find instead of lodash method
* Update styles to better match designs
* Revert "Open links to products from Cart and Checkut blocks in new tabs"
This reverts commit 9b64aa5f2e81bf0cf09d5640a3cfe1cc1085c046.
* Fix product name overflowing remove menu on mobile
* Remove @todo comments from form step CSS
* Make letter-spacinguse em instead of px
* IE11: Correctly align text in quantity selector
* Fix long product names overflowing in Checkout block on IE11
* disable continue to checkout if item is being removed
* rename isPending and selectors/actions to isPendingDelete
* switch itemPendingDelete params order
* change to watching quantity changes not removal
* yield RECEIVE_REMOVED_ITEM
* update types and add return to select
* update tests
* switch params back
* only delete item after response from server
* update tests
* handle errors and unrelated unmounts
* disable row if is loading
* add payment-methods-demo config to sideEffects and install @wordpress/icons and @wordpress/primitives to be used directly.
* configure dependency extraction to ignore imports we want to use directly
* fix style issues for production builds
It looks like when a style is imported on the entrypoint of a component (or in a file with just exports), it get’s treeshaken from the final build _regardless of exception rules_.
* fix style imports from wordpress components
* fix loading skeleton showing on production builds
* fix block skeleton showing on production builds for cart
* import side effectful code
* add treatment for `@wordpress/warning` too
* fix typo
* exclude `settings/block` from sideEffects
* rollback `wordpress-components` update and keep sideEffects fixes
* remove unnecessary handle handling
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
* Fix address form layout broken because select was occupying too much space
* Fix shipping rates appearing in the Checkout sidebar
* Center button text
* Add missing props to sidebar-layout components
* Move specific CSS class to checkout block
* Add comment on top of @wordpress/components styles in webpack entry
* Make it so our styles load after vendor styles
* Remove unnecessary @todo comment
* Add Order Summary card to Checkout sidebar
* Improve responsive layout
* Increase cart.js bundlewatch size
* Remove wrong comment
* Remove unnecessary usage of useStoreCartItemQuantity
* Refactor layout so the product description can occupy more width
* Move paddings to the button so focus styles look better
* Move cart attributes to attributes file
* Stop feedback prompt jumping around; consolodate strings
* Update option labels and descriptions
* Match checkout save function
* hasShippingRate helper
* Refactor full cart/frontend views for shipping calc
* Add hasShippingAddress to useShippingRates hook
* Initial shipping calculator in totals row implementation
* Create cart context
* Update preview data to match API response
* Use context provider for cart
* Provide default cart item for placeholder with correct shape
* Remove outdated shape validation from cartlineitemrow
* Use preview data in editor context
* Tidy up components
* Tests/lint
* Update assets/js/base/components/totals/totals-shipping-item/has-shipping-rate.js
Co-Authored-By: Seghir Nadir <nadir.seghir@gmail.com>
* No need to camel case previewdata
* Use isValidElement
* Implement EditorContext
* Use select if no post is given
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
* sticky footer checkout submit button on mobile
* fix storefront footer icons overlaying sticky checkout CTA footer:
- bump z-index of sticky CTA container
- storefront icons have weird z-index due to css opacity
* hide storefront footer on woo cart page only
* remove storefront specific bug fix for sticky cart footer:
- will log this issue separately
* tidy cart totals layout on mobile:
- totals column is full width
- reset container (card) borders and padding
* increase specificity of mobile cart styles to ensure skeleton hides after load
* use "not loading" && "not skeleton" approach for more readable mobile style selector
* add a smaller min-width for cart column on smaller screens
* ensure full price is inline on mobile (when visible)
* ensure line item totals are bottom aligned even if quantity cell is huge
* revert price vertical alignment - in design they are aligned with quantity digit
* Persist previous shipping rates while loading
* Refactor ShippingRatesControl LoadingMask
* Show package name
* Simplify CSS to avoid using the adjacent selector
* Add comment to explain why 'selected' is hardcoded in the editor
* Rename package 'index' to 'key'
* Chip componet and styling
* Tests
* Move coupon code for API requests to body - fixes issues with coupon codes containing special characters
* Implement chip component in cart page
* Revert "Move coupon code for API requests to body - fixes issues with coupon codes containing special characters"
This reverts commit ac5a72f55d51d939bb989f3936e28cf993af19a6.
* Update comment
* prevent overflow
* Add screen reader text for coupon name
* Adjust icon alignment and padding/hit box
* update string
* Tidied up source code for line item row and fixed image placeholder support
* Return null if not rendering
* Add is loading state and className to cart block
* Hide title if there are no items
* Add placeholder rows when there are not items and cart is loading
* Pass though isLoading to cart
* Set defaults for cart item rows
* Style the placeholder elements
* Move placeholderRows
* Remove getPriceNumber
* Move decodeEntities
* Split up utils
* calculate regular price for line item and return in API `line_subtotal`
* restore `line_subtotal` api field to previous behaviour
* correctly handle discounts on cart line items:
- return product `prices` in cart items endpoint
- calculate full price and discount on client using product
regular_price * quantity in cart
* add product prices to preview cart API data
* show product sale price discount in "save" badge:
- previously we were displaying any effective discount, e.g. from coupons which apply to whole cart
- now this badge will only display discount due to product on sale - much simpler
* rename sale badge class (discount => sale)
* clarify docs for line_subtotal - includes sale prices, not coupons
* clarify line_total docs
* add prices to schema (fix unit test)
* fix schema unit test - return `prices` as object, consistent with `totals`
* Further line total rewording
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Thomas Roberts
Albert Juhé Lluveras
David Levin
Bartosz Budzanowski
Seghir Nadir
Rua Haszard
Albert Juhé Lluveras
Mike Jolley
Darren Ethier