* 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
* more setup configuration for rtl
* move default state for cart out of reducer
This also creates a file for default store states, it should make it easier to execute tests in various environments.
* Make sure there’s a default object for cart line item row
* set defaults for cartData
* add fetchMock as a global in eslint config
* add initial cart flow tests
This is just to get the ball rolling, the cart block needs more tests
* fix missing @wordpress/jest-console configs (because I overwrote the original configuration)
* update test because of change in branch
* switch import order
* add globals.d.ts file to declare globals we use.
This is a quick solution to prevent typescript linting warning about `fetchMock`. At some point we could also create a proper interface for it or import the types (if they exist) for the `jest-mock` package.
The new `globals.d.ts` file is excluded from published builds.
* Remove summary from API
* Add wordCountType to assets
* Update packages
* Remove summary from test data
* Featured product uses short desc
* Pass description instead of summary
* Use new Summary Component
* Component and tests
* Increased versititilty of methods
* Update assets/js/base/components/cart-checkout/product-summary/index.js
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
* Extra tests for html tags
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
* Add quantity limit at product level
* Stock checks only needed when backorders are disabled
* Use remaining stock, not stock qty in messages etc
* Prevent duplicate validation from core
* API - Block qty > 1 for sold individually products
* Add item validation for sold individually to block checkout
* Fix validation check
* Add client side limit if sold individually
* Prevent never ending loading on failed add to cart
* Change cart button for sold individually errors
* 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
* Make Product Price component accessible
* Render checkout form step number before the content instead of after
* Announce changes in the Shipping Rates Control results
* Render product name before product price in the Checkout sidebar
* Verify error element id exists before using it in describedBy
* Avoid reading 'Choose a shipping method' if no shipping methods are available
* Hide product image from screen readers if there is no alt text and make link not focusable
* Move Checkout block buttons below the sidebar
* Simplify selector
* Remove ternary to make code easier to understand
* Fix rebase issue
* Fix step number not visible for payment methods
* 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>
* remove throwing errors if there’s an error in state.
These type of errors should be surfaced to user as needed via an error notice, not as a blocking error boundary. Error boundary should only be for non-recoverable errors.
* prevent default behaviour for applyCoupon button
* fix proptypes declaration.
This ensures that when `lowStockRemaining` is included it’s either null or a number.
* Ensure backorders_allowed value is boolean.
* add missing properties to cart preview
- `useStoreCartItemQuantity` now receives the cartItem instead of the `cartItemKey` as an argument. I didn't notice in previous reviews how it's used in the context where we already have a cartItem so implementing this reduces complexity and makes the hook more precise for it's purpose.
- Add `backorders_allowed` to the CartItem schema for the API. This allows for client to have correct logic for maximum quantity when this value is true.
- Implement the above in the `CartLineItemRow` so that quantity picker is limited by the amount of stock remaining if that is available (`lowStockRemaining`) and the `backorders_allowed` is false.
- maximum quantity is currently hardcoded to a (filtered) value of `99` when other conditions don't apply (see related issue in woocommerce/woocommerce-blocks#1913)
* add typedefs for CartItem
* remove cartItem from StoreCartItem typedef
* Implement new typedef and fix defaults as well as returned object.
Now that `cartItem` is only used internally, the default set on the state only has to be the properties required internally in the hook.
* add typedefs for shared settings and implement typedef comments.
* change hook name
* rework the quantity change generator action so the UI updates quick:
- work in progress - still need to figure out how to debounce API call
- add new action for updating quantity for an item
- don't set cart item as pending while quantity is updating
- this leaves QuantitySelector enabled so user can click more/less
- use receiveCartItemQuantity to update quantity in UI before sending request
* debounce line item quantity first cut:
- use local state for quantity, so ui allows multiple clicks up/down
- debounce store updates (and server/API call)
* correct comment on cart item quantity reducer
* remove recieveCartItemQuantity - no longer needed
* remove delegation for deleted RECEIVE_CART_ITEM_QUANTITY
* only update quantity in component sideffect if it has changed:
- reduces unnecessary renders
* factor out debounced quantity update into cartItem hook (hat tip @senadir)
* use quantity from store, instead of passing in to hook +
+ fix latent bug in useStoreCartItem - the cartItem value is now object:
- was previously single-item array
- (note no client code is using this at present)
* tidy/refactor cart item hook - separate dispatch from select
* remove dud reset of item pending flag (came back in rebase)
* add quantity to StoreCartItem hook return value typedef
* fix js error when adding cart block in editor – cartItem not found
* fix typedef
* fix logic for debouncing
* don’t update quantity on server unnecessarily
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
* first cut - removing an item from cart:
- add actions to cart store for removing an item and keeping track of
pending removal API call
- add reducer logic for storing pending state on an item, and removing
an item
- expose removeCartItem on new useStoreCartItems hook
- hook it up to remove link / trashcan icon in row item
* disable cart quantity picker/remove link while API request in progress:
- expose cart item pending status from store using selector
- use selector to disable quantity related components in line item row
* add typedef for cart items store object provided by hook
* allow user to change quantity of cart items (first cut):
- add action for replacing a cart item in the store
- add generator action for changing quantity
- expose change quantity action on useStoreCartItems hook
- hook up to quantity UI in cart block
(work in progress)
* post-rebase fixes & fix broken typedef:
- rework cart item change quantity callback - now supplies item key like
remove callback
- fix hook StoreCartItem return value typedef - single item with
specified key, was array of all items
- add quantity JSDoc for changeCartItemQuantity action
- remove changeQuantity callback from UI (currently infinite looping)
* fix bug in recieveCartItem reducer - check keys for equality:
- was key === object
* fix invalid url in POST cart/items/quantity request
* hook up cart line item quantity to API:
- remove internal state/ref for QuantitySelector, is now a controlled
component
- call changeQuantity action from QuantitySelector change callback
* QuantitySelector no longer needs a ref to wrangle number input value
* hoist quantity state out of QuantitySelector into story (fix storybook)
* add product sold_individually option to cart item API response
* limit sold_individually items to 1 per cart/order:
- support optional max value in QuantitySelector
- set maximum dependent on sold_individually API field
* prevent user from requesting zero x cart item (API 500 errors):
- add minimum limit to QuantitySelector
- default limit to 1
+ fix bug with limiting to maximum value in number input change handler
* remove useStoreCartItems, zombie hook coming back from rebase 🧟♂️
* address various review feedback:
- inline undefined check, don't use lodash
- quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease
- also removed undefined check for minimum, as minimum has default 0
* use safer typeof check for presence of maximum prop
* first cut - removing an item from cart:
- add actions to cart store for removing an item and keeping track of
pending removal API call
- add reducer logic for storing pending state on an item, and removing
an item
- expose removeCartItem on new useStoreCartItems hook
- hook it up to remove link / trashcan icon in row item
* disable cart quantity picker/remove link while API request in progress:
- expose cart item pending status from store using selector
- use selector to disable quantity related components in line item row
* fix jsdoc - getCartItem returns undefined if not found
* add typedef for cart items store object provided by hook
* fix rebase error - key prop went awol
* orient useStoreCartItem hook to single cart item:
- simplify interface for client component
- isPending bool (was callback)
- removeItem callback no need to specify item key
+ reinstate disabled prop on remove link when updating (lost in rebase)
* move cart item pending state out of cartItems, preserve API state shape:
- pending is now stored as array of keys
- fix isItemQuantityPending selector (now much simpler)
* ensure react knows that our useSelect depends on cartItemKey
* 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>
* hook up cart items to API data in front end (first cut)
* correctly decode entities in product attributes in cart:
+ support unnamed attributes
* correctly render markup in cart line item descriptions:
- description api field is html, so use dangerouslySetInnerHTML
* fix PropTypes - cartItems, not items
* hook up cart totals area to API data +
+ move editor preview totals data to resource-previews (to match API)
* tweak/tidy todo comments for cart front end
* use shorter summary field for cart line item blurb
* render empty cart inner blocks on front end when shopper cart is empty
* ensure empty cart doesn't show while cart contents is loading
* decode entities in attribute names when rendering cart items
Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>
* factor out cart data to a custom hook + exit earlier while loading
* wrap preview/sample cart variation data for translation
* use RawHTML component for rendering cart line item summary +
+ linter whitespace tweak
Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
* add new icons and remove old ones
* add docs
* add notes and remove gridicons
* update to folderStarred
* typos
* reorder imports
* update prop name to srcElement
* validate element
* fix bad import
* lowecase folderStarred
* add propTypes
* Style mobile qty selector
* Add dedicated column for image and remove duplicate elements
* Tweak column headers
* Refactor cart styles to use CSS grid, and use nesting for organisation
* adjust column widths
* Remove unused div
* Fix wrapping and flexbox styles
* Add decodeEntities to alt attribute
* Use % basis
* Tweak min widths
* correct typography styles for remove link (based on design)
* add trashcan icon from material icons, for removing cart items on mobile
* add & style trash icon for remove cart item on mobile
* a11y - use darker grey for trashcan icon button to improve contrast
* rename IconDelete -> IconTrash
* remove unnecessary div
* use <button> for remove action buttons + add link-button scss mixin
* fix editor styles for cart line items - total column should be right-aligned
* fix various visual issues with cart line items table in editor:
- rows should align hard left and right (first/last child no padding)
- totals should be align-bottom on small screen
- correct vertical padding on column headings
- re-add row border separator lines
* show discount on cart line items (no styling)
* style line item discount badge + use correct colors for prices
* show full price inline on mobile
* move all responsive tweaks for cart prices to explicit breakpoints
* add nowrap to FormattedMoneyAmount so prices don't ever wrap
* fix misaligned full price on mobile when prices are large (edge case):
- if price strings are long, the full price stacks above line total
- previous right-margin on full price showed prices misaligned
* allow client code to add class(es) to FormattedMonetaryAmount
* add nowrap so discount badge doesn't wrap
* remove unnecessary span from discount badge +
+ more explicit `display` style for different price column elements
* show product variation attributes in cart line item + styling:
+ adjust font sizes & colors to match design
* show product description in cart line items…
- this commit also adds descriptions to test cart-items data
- note API does not currently return description/excerpt
* add a class to product attributes to allow custom styling
* render block on front end, add `Shopping cart` heading (baby steps)
* fake data for editing full cart + show line count in header
* add note about core/html using `is-active` class for toggle state
* reinstate work-in-progress full cart component (lost in rebase)
* reinstate full cart from master
* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block
* add cart items sample data + factor sample product image to module
* use sample cart data for item count
* basic table of cart line items (no styling)
* prettification
* show images for cart line items + initial table styling
* cart quantity selector component (work in progress)
* use state for cart product quantity, allow incr/decr from UI (WIP)
* replace WIP custom quantity control with number edit (temporary)
* correctly format cart line item total price
* align cart item columns with headings + indent image on desktop
* tweak css for cart line item padding on mobile so it's more explicit
* show cart line item full price if discounted
* add placeholder for cart remove item link
* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.
* only show cart items table header on desktop
* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)
* use standard $gap instead of 1em for padding/margins
* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column
* remove extraneous cart table padding on mobile
* comment about unused styles for quantity selector component
* add follow up issue for todo
* remove inappropriate href
* render srcset & sizes for cart line item product image
* remove todo comment
* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns
* cart line items column widths - product column is larger (60%)
* reinstate table row borders
* bottom-align line item price on mobile
* cart contents heading should be H2 + prettify
* remove unused QuantitySelector code/styles, rename main class in line with BEM
* defaults for QuantitySelector props
* variable/property name tidies - match conventions/API
* fix bug: line total price is only bottom-align on small screen
* move QuantitySelector to root of components, intended to be generally useful
* use lineItem directly for cart, specify shape in PropTypes
* rename cart components to align with "line item" rather than "product"
* rejig class names to better align with new component names & BEM style
* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)
* fix safari issue - cart product images displaying vertically stretched
* shift product name left margin from image, to account for no-image case
* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it
* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)
* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)
* remove redundant divs + use conventional `null` (when no full price)
* override editor styles to ensure cart product image is correct size
* move cart items editor style override to editor.css
* add an explicit readable heading for cart heading to match visual layout
Albert Juhé Lluveras
Darren Ethier
Mike Jolley
Seghir Nadir
Albert Juhé Lluveras
Rua Haszard