Commit Graph

329 Commits

Author SHA1 Message Date
Darren Ethier 1e6abded42 re-enable @wordpress/no-unused-vars-before-return eslint rule and fix violations (https://github.com/woocommerce/woocommerce-blocks/pull/3202) 2020-09-26 17:00:54 -04:00
Darren Ethier ba6a2e2ace re-enable @wordpress/valid-sprintf eslint rule and fix violations (https://github.com/woocommerce/woocommerce-blocks/pull/3201) 2020-09-26 16:05:00 -04:00
Darren Ethier a6750e0388 Fix esLint rule violations for @wordpress/i18n-translator-comments rule. (https://github.com/woocommerce/woocommerce-blocks/pull/3200)
* re-enable linting for @wordpress/i18n-translator-comments rule

* fix violations for the `@wordpress/i18n-translator-comments` eslint rule
2020-09-26 15:38:17 -04:00
renovate[bot] 1dc8442a31 Update dependency wordpress-element to v2.17.1 (https://github.com/woocommerce/woocommerce-blocks/pull/3104)
* Update dependency wordpress-element to v2.17.1

* update experimental function to stable version

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-09-26 09:51:21 -04:00
Darren Ethier f915c7c8a3 re-enable dependency grouping linting and fix errors (https://github.com/woocommerce/woocommerce-blocks/pull/3167) 2020-09-21 09:43:10 -04:00
Darren Ethier 9115160c2f Enable and fix all jsdoc rule violations (https://github.com/woocommerce/woocommerce-blocks/pull/3168)
* add param jsdocs to satisfy jsdoc require-param rule

* Fix jsdoc-checktypes rule violations

* fix jsdoc/require-param-type rule violations

* fix jsdoc/check-param-names violations

* fix jsdoc/require-property-description rule violations

* fix rule violations for jsdoc/valid-types rule

* fix rule violations for jsdoc/require-property rule

* fix jsdoc/no-undefined-types rule violations

* fix jsdoc/check-types rule violations

* fix jsdoc/require-returns-description rule violation

* enable jsdoc/require-returns-type rule

* fix jsdoc/newline-after-description rule violations
2020-09-20 19:54:08 -04:00
Albert Juhé Lluveras 261844d05b Use noticeContexts from useEmitResponse instead of hardcoded values (https://github.com/woocommerce/woocommerce-blocks/pull/3161) 2020-09-18 14:39:32 -04:00
Albert Juhé Lluveras d641d2e1a4 Don't throw an error when registering a payment method fails (https://github.com/woocommerce/woocommerce-blocks/pull/3134)
* Show all payment methods when it's an admin and let the error boundary handle errors

* Use StoreNoticesContainer in Payment method error boundary so notices have styling

* Filter out saved payment methods for admin users if they don't accept payments

* Simplify update options logic

* For admins, only show payment methods that errored but canPay was not false

* Simplify how new payment method option is appended

* Wrap canMakePayment in a try catch block to handle payment methods that throw an error

* Add an id to payment method error boundary errors

* Add an error boundary to express payment methods

* Hardcode failing content and savePaymentInfo to false if the payment method failed

* Add some new comments

* Add a notice instead of registering the payment method if it fails and user is admin

* Throw error early if stripe failed to load

* Split express and standard payment method error notices

* Don't add payment methods in the editor and instead add a notice

* Fix error id

* Use noticeContext constant

* Add missing JSdoc param

* Remove unnecessary removeNotice
2020-09-18 12:27:54 +02:00
Albert Juhé Lluveras a285376e96 Fix State label for Spain (https://github.com/woocommerce/woocommerce-blocks/pull/3147) 2020-09-16 10:50:24 +02:00
Albert Juhé Lluveras 76ebf9c860 Merge ProductPrice atomic block and component (https://github.com/woocommerce/woocommerce-blocks/pull/3065)
* 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>
2020-09-14 12:56:10 +02:00
Darren Ethier 69ba8161b6 Add @woocommerce/eslint-plugin dependency (https://github.com/woocommerce/woocommerce-blocks/pull/3115)
* convert eslint config to use @woocommerce/eslint-plugin

- removes unnecessary dependencies
- adds e2e-tests/specs to eslint ignore (they are automatically generated)
- turns off rules that will be handled in subsequent pulls (to avoid a mammoth changeset for review).
- NOTE: prettier config needs left in because of a bug with the existing version of `@wordpress/eslint-plugin` pulled in (fixed in https://github.com/WordPress/gutenberg/pull/25068) so I left the file for now.

* prettier fixes.

* remove obsolete plugin and fixes for eslint update

This branch brings an update to eslint which also changes some syntax with plugins. So this commit:

- fixes featuer-flag plugin syntax.
- removed obsolete dependency-group plugin (which is now in the `@woocommerce/eslint-plugin` configuration.

* add to-do comment

* fixes for test runs

- this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run.

* fixes for test runs

- this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run.

* include prettier alias as a dependency

This has to be done because prettier is installed with storybook and thus the alias setup in `@wordpress/scripts` is over-ridden by the storybook import.

* another attempt at e2e-test-fix

* add some debugging and temporarily just add one e2e config test for travis

* more debugging

* try installing full puppeteer and see if fixes

* fix package-lock?

* setupSettings separately from other fixture loading

* add debugging of files

* add another console.log (hopefully trigger travis)

* split out blockPage creation to it’s own as well

* fixed! remove debugging and re-enable travis configs for entire test suite

* fix config and rename e2e-tests to e2e

- fixes the failing product-search test
- tests/e2e-tests was redundant, I changed to `tests/e2e` (this follows a file pattern change made in woocommerce core as well).

* add todo for some eslint properties

* remove unnecessary early function execution

* revert earlier commit and remove duplicate call to createBlockPages
2020-09-07 13:31:10 -04:00
Albert Juhé Lluveras a9bcdb7d08 Create DebouncedValidatedTextInput component (https://github.com/woocommerce/woocommerce-blocks/pull/3108)
* Fix wrong Form component name

* Split CheckoutForm into smaller components for each step

* Centralize call to useCheckoutAddress

* Create DebouncedValidatedTextInput component

* Rename some variables
2020-09-07 19:03:04 +02:00
Albert Juhé Lluveras 1e75a866d8 Split Checkout form component into smaller files (II) (https://github.com/woocommerce/woocommerce-blocks/pull/3106)
* Fix wrong Form component name

* Split CheckoutForm into smaller components for each step

* Centralize call to useCheckoutAddress
2020-09-07 17:43:05 +02:00
Albert Juhé Lluveras fa593359bf Fix Cart&Checkout layout broken in some themes (https://github.com/woocommerce/woocommerce-blocks/pull/3111) 2020-09-07 17:39:53 +02:00
Albert Juhé Lluveras dfd57b0ee8 useMemo for complex computations in Country/State inputs (https://github.com/woocommerce/woocommerce-blocks/pull/3107) 2020-09-03 10:02:26 +02:00
Albert Juhé Lluveras 80400e50da Split Checkout block component into smaller files (https://github.com/woocommerce/woocommerce-blocks/pull/3062)
* Rename CheckoutForm to Form

* Create CheckoutForm component

* Simplify directory structure

* Add docs about class name changes

* Add PropTypes to CheckoutForm

* Update skeleton class name

* Extract LoginPrompt

* Move loginToCheckoutUrl to a constant

* Move replaced class name docs to 3.4.0 specific file
2020-08-31 12:17:42 +02:00
Rua Haszard 77aa2a33a3 clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025)
* add high-level docs about our components & remove stale detail info

* use current collection/folder naming in docs:
- let's rename js/components in a separate PR
- split paragraphs on to separate lines to improve future diffs

* rename storybook.md => components.md and update link/summary

* tweak component collection docs:
- base have more stringent requirements, since they can be used anywhere
- editor components are less strict and can assume editor context

* clarify js/base/components readme in line with main doc

* remove line about editor components being specialised to woo blocks
2020-08-27 08:15:16 +12:00
Albert Juhé Lluveras 8bb217cec6 Show express payment methods in the Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/3004)
* 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
2020-08-20 16:14:12 +02:00
Seghir Nadir 85ed96b58e Add dark colors support to Cart & Checkout controls (https://github.com/woocommerce/woocommerce-blocks/pull/2981)
* add dark styles setting

* add attributes to blocks

* add colors to input and select

* cover rest of items

* tweak select contrast

* fix ie11 issue

* fix focus

* include checkbox styles

* fix extra spacing after phone number

* add styling to quantity selector

* remove extra rule

* remove editor styles for radio control

* use border-color

* rename variables and classes and wording

* adjust colors

* provide tighter control over colors

* remove redudant outline rule

* add more variables

* add support for order note

* use variables for textarea

* move dark mode panel to last
2020-08-14 12:08:16 +01:00
Albert Juhé Lluveras a16af68975 Hide saved payment methods if their gateway is disabled (https://github.com/woocommerce/woocommerce-blocks/pull/2975)
* Hide saved payment methods if their gateway is disabled

* Fix wrong type-def

* Remove extra blank line

* Rename var

* Use FILTER_VALIDATE_BOOLEAN instead of comparing to 'yes'

* Use data from Payment Method context instead of reading setting from the server

* Use data from Payment Method context instead of reading setting from the server
2020-08-11 15:43:03 +02:00
Albert Juhé Lluveras 339c0532f1 Fix text input and select error styles on focus (https://github.com/woocommerce/woocommerce-blocks/pull/2974) 2020-08-11 11:55:26 +02:00
Seghir Nadir 145db3ff5d fix issue with no margins on phone input (https://github.com/woocommerce/woocommerce-blocks/pull/2989)
* 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.
2020-08-11 10:00:53 +01:00
Seghir Nadir fc9f6fe71a Use SVG for checkbox (https://github.com/woocommerce/woocommerce-blocks/pull/2320)
* use svg for checkbox

* update borders

* switch to rems

* define a rem function

* fix ie11 issue

* fix focus

* add ie hack

* fix spacing and switch to em

* switch to rem
2020-08-11 09:59:59 +01:00
Rua Haszard e18c036f5e use static pos for payment errors so they push out other content: (https://github.com/woocommerce/woocommerce-blocks/pull/2977)
- default styling for validation errors is absolute
- this requires the layout provides appropriate space for errors
- payment form is too compact to provide room for errors,
  - especially when checkout is narrow due to window or theme
2020-08-07 07:30:27 +12:00
Seghir Nadir 96819fc2d2 account for negative sale values (https://github.com/woocommerce/woocommerce-blocks/pull/2955) 2020-08-05 11:27:59 +01:00
Albert Juhé Lluveras 3d0d6cab87 Add autocapitalize attribute to Address Form fields (https://github.com/woocommerce/woocommerce-blocks/pull/2884)
* Add autocapitalize attribute to Address Form fields

* Set autocapitalize attribute to 'sentences' in address form
2020-08-03 10:53:42 +02:00
Albert Juhé Lluveras 311d8ddf12 Add 'Order notes' to Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/2877)
* Add Checkout Order notes (UI)

* Add Checkout Order notes (context)

* Add missing useEffect dependencies

* Remove duplicate toggle in editor

* Minor fixes

* Check whether orderNotes have changed before creating a new state object

* Rename showCounter to showStepNumber

* Rename 'onChange' with 'onTextChange'

* Add comment and tests to FormStep component

* Rename 'with-counter' to 'with-step-number'

* Fix wrong prop

* Make it so order notes are persisted when toggling the checkbox

* Update type-defs

* Set showStepNumber default value to true
2020-07-31 17:17:01 +02:00
Mike Jolley 36c1bb7361 Add to cart context provider (https://github.com/woocommerce/woocommerce-blocks/pull/2903)
* Provider progress

* Revert nonce change for debugging

* Working emitters

* Fix dismiss link alignment in notices

* Fix button state and double adds

* Remove old context file

* Add type defs

* Fix context name

* Leftovers from merge

* Hooks up the variation picker to cart context

* Group event emitters in context

* Fix external product display

* Pass product through to VariationAttributes

* Pass around dispatchers

* Update assets/js/base/context/add-to-cart-form/form-state/reducer.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Update assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Update assets/js/base/context/add-to-cart-form/form-state/reducer.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* remove placeholder comment

* content->container

* Clarify variation method comment

* update comment

* Switch nesting of providers

* Variation attribute utils test coverage

* If nothing is selected yet, just return all variations.

* Comments to explain loops

* Use refs to avoid recalculation of attributes on every render

* Update memo usage

* typo

* move mock data to test file

* Switch to useShallowEqual

* trigger cart fragment refresh after add to cart

* Decode option entities

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-07-30 11:57:22 +01:00
Rua Haszard 2cc98391a0 add hover style to ensure consistent margin/padding for order summary so it doesn't jump on mouseover (https://github.com/woocommerce/woocommerce-blocks/pull/2921)
* add hover style to ensure consistent margin/padding for order summary

* decrease specificity of panel__button hover/active etc styles
2020-07-29 11:50:06 +02:00
Mike Jolley cd9f7e0ccb ⚛️ Introduce Product Element Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2871)
* Product selection when out of context for price and title blocks

* Move product element name/description/icons to constant files

* Add attributes and hocs to all elements

* Standalone block rendering

* Add a placeholder if title has no content

* Revert "Add a placeholder if title has no content"

This reverts commit 29115154b33eedc661ccd3cc758acdbc5041ffbc.

* parentClassName is not always present

* Loading state

* Wrap description in P

* Fixed loading styles when nested

* Maintain product shape in useProductData

* feature gate elements from showing in inserter

* fix feature flag

* include price PR

* edit withProductSelector to be a hoc

* fix lint issue

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-07-22 13:20:54 +01:00
Albert Juhé Lluveras ff2f135e7e Make stylesheets order consistent between build and dev (https://github.com/woocommerce/woocommerce-blocks/pull/2818)
* Add specific webpack config for styles

* Remove style.scss file from story

* Fix storybook

* Extract progressbarplugin config

* Add back ignore-loader

* Fix styling entries

* Cleanup

* Simplify webpack-entries.js

* Add appropiate exclude handles to styling config

* Add back MergeExtractFilesPlugin

* Unify style entries suffix

* Fix experimental flag

* Replace MergeExtractFiles plugin with RemoveFiles

* Prevent duplicate reviews frontend scripts

* Fix unnecessary files being created

* Remove editor.js file generate by MiniCssExtractPlugin

* Remove CSS generation from payment methods config

* Remove unnecessary config

* Simplify styling entries name

* Cleanup

* Refactor webpack-entries
2020-07-22 14:05:56 +02:00
Albert Juhé Lluveras a69a50856a Cart & Checkout: fix '0' visible when product stock was 0 and it allowed backorders (https://github.com/woocommerce/woocommerce-blocks/pull/2891) 2020-07-21 17:41:14 +02:00
Albert Juhé Lluveras 4ef64a4453 Fix Credit Card input font size in some themes (https://github.com/woocommerce/woocommerce-blocks/pull/2869)
* Fix Credit Card input font size in some themes

* Fix spacing between credit card icon and input label

* Fix min-width of credit card input fields

* Improvements to the way credit card input fields are resized

* Simplify min-width
2020-07-20 13:56:22 +02:00
Albert Juhé Lluveras d894fed1df Cart block: show products on backorder (https://github.com/woocommerce/woocommerce-blocks/pull/2833)
* 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
2020-07-14 17:25:53 +02:00
Mike Jolley be513c8875 Lazy Loading Atomic Components (https://github.com/woocommerce/woocommerce-blocks/pull/2777)
* Implement lazy loading with basics spinner

* Add chunkFilename

* chunkFilename breaks render

* Suspense at inner block level

* Suspense for all products block

* Update assets/js/atomic/blocks/component-init.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Handle lazy components in registerBlockComponent

* update tests

* Update locks

* Update assets/js/blocks-registry/block-components/register-block-component.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-07-14 12:35:15 +01:00
Albert Juhé Lluveras 0f43c3af0f Remove classes from dashicons (https://github.com/woocommerce/woocommerce-blocks/pull/2848) 2020-07-10 14:20:57 -04:00
Albert Juhé Lluveras 8c06276b00 Unify Chip styles (https://github.com/woocommerce/woocommerce-blocks/pull/2765)
* Improve cross character used in dropdown selector

* Add is-open and has-checked classes to dropdown selector so we stop relying on complex pseudoselector combinations

* Update Chip component with new props

* Update Chip styles

* Update dropdown selector selected chip with the Chip component

* Update active filters chip with the Chip component

* Style fixes

* Update snapshots and add tests

* Change onRemove prop signature

* Fix wrong bottom margin

* Fix misaligned remove icon

* Update assets/js/base/components/chip/index.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Update assets/js/base/components/chip/index.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Add missing default prop

* Prettier

* Ensure showScreenReaderText is a bool

* Rename removeOnClick with removeOnAnyClick

* Update snapshots

* Fix Chip aria-label logic

* Split Chip and RemovableChip

* Replace chip close character with an icon

* Fix outdated comment

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-07-10 11:09:49 +02:00
Mike Jolley d25d233f27 Replace usage of `cart-checkout/button` with `@woocommerce/base-components/button` (https://github.com/woocommerce/woocommerce-blocks/pull/2781)
* Change to base component

* Remove todo
2020-06-25 16:50:48 +01:00
Albert Juhé Lluveras 3fae904643 Use WooCommerce thumbnail images in Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2755)
* Remove legacy files

* Use thumbnail product image for Cart, Checkout and Reviews blocks

* Add option to toggle between full size and cropped image to the Atomic Product image block
2020-06-23 13:25:28 +01:00
Albert Juhé Lluveras b74b85dc03 Remove text color from Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2745)
* Remove text color from Cart and Checkout blocks

* Fix Cart price column misalignement. woocommerce/woocommerce-blocks#2744
2020-06-23 11:13:53 +01:00
Albert Juhé Lluveras dfa6fca924 Cart & Checkout: show shipping method prices with taxes depending on settings (https://github.com/woocommerce/woocommerce-blocks/pull/2748) 2020-06-22 10:47:35 +02:00
Albert Juhé Lluveras 610e082f9c Update base/components classnames (https://github.com/woocommerce/woocommerce-blocks/pull/2711)
* 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
2020-06-17 11:53:42 +02:00
Mike Jolley 09aa20d0d3 Introduce Atomic Add to Cart Block (https://github.com/woocommerce/woocommerce-blocks/pull/2705)
* Form/button stucture

* Use registerBlockComponent

* Context for add to cart form

* Working cart button

* Tidy up button component

* Add todos

* Revert reg block

* Hide stock indicator if not purchasable

* Hide terms if empty

* Add url and type to API

* Skip default category from term response

* Rename form element

* Form for product types

* Tidy up context provider and expand todos

* No longer using qty icon

* Update todos

* Correct text domain

* registerExperimentalBlockType

* Duplicate method

* Remove prevent default

* Update docblock

* Description for button code
2020-06-17 10:52:03 +01:00
Albert Juhé Lluveras 2004c48c5e Remove background color from Express Checkout title (https://github.com/woocommerce/woocommerce-blocks/pull/2704)
* Remove background color from Express Checkout title

* Fix Express checkout title padding not visible on npm run build

* Add explanatory comment
2020-06-15 13:39:46 +02:00
Albert Juhé Lluveras f46bc68f6e Fix Cart and Checkout sidebar styling issues (https://github.com/woocommerce/woocommerce-blocks/pull/2694)
* 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
2020-06-12 14:07:02 +02:00
Albert Juhé Lluveras 1a0c50078a Add theming docs (https://github.com/woocommerce/woocommerce-blocks/pull/2691)
* Add theming docs

* Update some components to the new class name structure

* Add docs about class name updates

* Update coding guidelines

* Minor improvements

* Update docs/theming/class-names-update-280.md

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-06-11 19:38:31 +02:00
Albert Juhé Lluveras 9b05b19028 Add aria-expanded to Change address button (https://github.com/woocommerce/woocommerce-blocks/pull/2603) 2020-06-10 15:38:39 +02:00
Albert Juhé Lluveras f68f11c6ca Update Checkout step progress indicator design (https://github.com/woocommerce/woocommerce-blocks/pull/2649) 2020-06-08 13:13:34 +02:00
Albert Juhé Lluveras c4e7191269 Fix credit card validation errors alignment (https://github.com/woocommerce/woocommerce-blocks/pull/2662)
* Use same margin-bottom in credit card input as in checkout inputs

* Set cursor:text for Checkout input labels

* Increase line height of expiry and cvc input validation errors in large viewports

* Increase height of expiry and cvc input validation errors in small viewports
2020-06-08 12:55:10 +02:00
Albert Juhé Lluveras 40426cbf93 Fix styling issues introduced in woocommerce/woocommerce-blocks#2597 and woocommerce/woocommerce-blocks#2619 (https://github.com/woocommerce/woocommerce-blocks/pull/2652)
* 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)
2020-06-08 11:28:58 +02:00
Darren Ethier 2bbe2e63c6 Fix retrying after failed payment processed server side. (https://github.com/woocommerce/woocommerce-blocks/pull/2655)
* add state for selected saved token in payment data

* add handling for flipping payment status back to pristine when checkout has error

If payment status is successful client side, but the checkout state goes into an error after server side processing, then we reset payment status to pristine to allow for reprocessing of payment method client side.

This is skipped for saved payment method tokens because they effectively are _only_ processed server side.
2020-06-07 16:47:16 -04:00
Albert Juhé Lluveras eaeedd31e0 Update item count badge styles (https://github.com/woocommerce/woocommerce-blocks/pull/2619)
* 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
2020-06-05 17:03:48 +02:00
Mike Jolley da58a8b44f Add Inner Block Rendering and Atomic Block Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2607)
* Register Atomic Blocks and save some block content

* renderInnerBlocks utility

* Frontend Rendering

* Clean up atomic block classnames

* Move shared styles

* Create a hoc for attribute mapping

* Rename some unpluralised class names

* Remove prefixes from atomic component class names

* Updated styles

* Update styles from master

* Revert product list styles

* 2020 fixes

* Separate renderFrontend from renderInnerBlocks

* Lazy loading of components

* Tweak loading classes

* FIx all products loading state

* Revert lazy implementation - creates too many unneccessary files due to webpack config

* Cleanup

* Remove wcBlocksBuildUrl

* Move call to register_atomic_blocks

* Remove duplicate key

* reuse render frontend

* Corectly handle frontend attribute mapping to keep editor working

* Style updates

* Update side effects

* Remove width style from rating to fix alignment

* Move ssr grid styles to main stylesheet

* Put back prefixed classnames

* 2020 styling fixes

* Create frontend files instead of doing it all in block map

* Update assets/js/atomic/utils/get-block-map.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/atomic/utils/render-parent-block.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Fix last child alignment regardless of block type

* More specificity fixes

* 2020 button alignment

* static fix to prevent offsets

* fix placeholder image in firefox

* Issues reported in feedback

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-06-05 13:18:16 +01:00
Albert Juhé Lluveras 77b68795d8 Update Cart & Checkout heading styles (https://github.com/woocommerce/woocommerce-blocks/pull/2597)
* 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
2020-06-05 12:00:19 +02:00
Albert Juhé Lluveras 8a65d7297b Make sure Select styles don't change on hover (https://github.com/woocommerce/woocommerce-blocks/pull/2647) 2020-06-05 11:12:34 +02:00
Albert Juhé Lluveras 13e79f21b4 Fix product grid blocks markup & design inconsistencies (https://github.com/woocommerce/woocommerce-blocks/pull/2428)
* Fix Sale badge markup discrepancy. Fixes woocommerce/woocommerce-blocks#2107

* Fix product link markup discrepancy

* Use same class name for ratings markup in product grid blocks

* Remove editor specific class name for product title

* Unify price layout between product grid blocks and All Products block

* Change specificity raising classes to avoid editor class names

* Make small images fill the available width in product grid blocks

* Avoid increasing selector specificity in the frontend

* Undo AbstractProductGrid.php template changes

* Do not remove .wc-block-grid__product-rating__stars from CSS

* Add theming docs
2020-06-02 17:06:28 +02:00
Mike Jolley 28d516050e Add context support to Atomic Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2592)
* Bulk rename InnerBlockConfiguration to InnerBlockLayout context

* Refactor button to use context and handle null product data

* Move preview data to context

* Update blocks to support context

* fix button

* Update assets/js/atomic/blocks/product/title/block.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* remove falsey check

* Update product retrieval code

* Update product prop usage

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-06-02 12:14:46 +01:00
Albert Juhé Lluveras a6da13920d Fix Cart sidebar styles after font size changes (https://github.com/woocommerce/woocommerce-blocks/pull/2593)
* Fix Cart sidebar styles after font size changes

* Margin/padding cleanup
2020-06-02 09:33:10 +02:00
Albert Juhé Lluveras 31b5f4e00c Fixes to Twenty Twenty product grid styles (https://github.com/woocommerce/woocommerce-blocks/pull/2573)
* Remove underline from discounted prices

* Fix position of on sale badge in Twenty Twenty

* Make sure we reset styles from Core

* Fix image on sale badge not correctly positioned

* Fix sale badge alignment when they are on in the right
2020-06-02 09:18:34 +02:00
Albert Juhé Lluveras 00b0a81874 Make filter font sizes named (https://github.com/woocommerce/woocommerce-blocks/pull/2594) 2020-06-01 06:45:40 +02:00
Mike Jolley 18480b0d68 Add layour editor to the single product block (https://github.com/woocommerce/woocommerce-blocks/pull/2586) 2020-05-29 12:28:04 +01:00
Albert Juhé Lluveras d1685bda7b Use named font sizes instead of values in px (https://github.com/woocommerce/woocommerce-blocks/pull/2533)
* 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>
2020-05-29 12:16:33 +02:00
Mike Jolley 2dc0e8112a Create shared contexts handle for inner blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2568)
* Create shared contexts

* At to jest config
2020-05-28 11:02:10 +01:00
Albert Juhé Lluveras bc51052b04 Checkout steps improvements (https://github.com/woocommerce/woocommerce-blocks/pull/2530)
* Don't render step heading content if there is no content

* Make checkout step headings h2

* Add empty alt value to form step counter
2020-05-27 16:48:23 +02:00
Darren Ethier a5b6061dcc Ensure all inline @todos in code are covered by issues and obsolete @todos removed. (https://github.com/woocommerce/woocommerce-blocks/pull/2557)
* Remove todos for colors (see woocommerce/woocommerce-blocks#1331)

* remove todo for payment method express payments placeholder

No placeholder is needed because we don’t want to show this at all if there are no payment methods setup (or initialized based on `canMakePayment`). The payment methods step will have instructions in the editor for users to setup their payment methods.

So this todo was invalid.

* Remove todo comment for useStoreOrder (see woocommerce/woocommerce-blocks#2555)

* remove obsolete todos for usePaymentMethodInterface

* changed todo into a Note for the useQueryState tests

With focused work happening on tests, this is better as a note that can be picked up when this file is touched again.

* remove obsolete todo from payment method registration validation

* remove todo covered by created issue (see woocommerce/woocommerce-blocks#2166)

* remove obsolete todo for stripe utils

* Convert todo to a Note for Checkout Block php registration

For now, I think having the comment block noting what is happening here is sufficient. Whether or not we extend the blocks to cover the other endpoints is something that will surface in future planning and putting in an issue right now coudl be premature (and likely just land the issue in the icebox)

* Remove todo related to ReserveStock covered by woocommerce/woocommerce-blocks#2556

* Remove todo in AbstractRoute covered by issue in WooCommerce project

see https://github.com/woocommerce/woocommerce/pull/26219 for the issue.

* Convert todo to note for wp_version check in Library class
2020-05-26 13:31:33 -04:00
Albert Juhé Lluveras 79359e7056 Fix Cart style discrepancies (editor-frontend) (https://github.com/woocommerce/woocommerce-blocks/pull/2486)
* 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'
2020-05-25 18:45:38 +02:00
Darren Ethier ce1e334c56 Fix broken dynamic address fields dependent on locale for selected country. (https://github.com/woocommerce/woocommerce-blocks/pull/2547)
* add missing dependency

* Don’t include all defaultAddressFields in address field config
2020-05-25 07:00:26 -04:00
Darren Ethier a5bca5708c Reakit tab already handles selecting the default tab if it isn’t set. (https://github.com/woocommerce/woocommerce-blocks/pull/2545) 2020-05-22 15:32:41 -04:00
Darren Ethier 5668f58f2c Include `onSubmit` handler for CheckoutForm component. (https://github.com/woocommerce/woocommerce-blocks/pull/2532)
* include `onSubmit` handler for CheckoutForm component and implement

* remove redundant preventDefault
2020-05-22 10:51:38 -04:00
Albert Juhé Lluveras 6d1cb26d63 Import TwentyTwenty block styles from Core (https://github.com/woocommerce/woocommerce-blocks/pull/2513)
* Add TwentyTwenty styles from Core

* Increase product on sale selector specificity

* Add theme class name to admin

* Fix some more style discrepancies

* Use em instead of rem
2020-05-21 19:09:50 +02:00
Albert Juhé Lluveras 60c0ebfdb7 Fix misalignment between value and label in form components (https://github.com/woocommerce/woocommerce-blocks/pull/2518)
* Fix misalignment between value and label in form components

* Do the calculation in SCSS
2020-05-20 15:54:37 +02:00
Albert Juhé Lluveras 0dc7e9e6f1 Fix decimal ratings not correctly displayed (https://github.com/woocommerce/woocommerce-blocks/pull/2507)
* Fix decimal ratings not correctly displayed

* Fix aria label rounding ratings
2020-05-19 17:24:20 +02:00
Albert Juhé Lluveras 8f2003df4b Remove some unique font-size (https://github.com/woocommerce/woocommerce-blocks/pull/2498)
* Remove font-sizes which are already inherited

* Remove font sizes from buttons with no text

* Make summary item quantity font-size 12px
2020-05-19 08:06:35 -04:00
Albert Juhé Lluveras 1fea56d8cd Remove class 'button' from Button component (https://github.com/woocommerce/woocommerce-blocks/pull/2494) 2020-05-18 12:53:57 +02:00
Seghir Nadir c48518de54 Use Reakit in payment tabs (https://github.com/woocommerce/woocommerce-blocks/pull/2371)
* WIP

* convert to reakit

* rebase and fix styling issues

* add forget initialTabName

* delete button and force manual select

* fix git diff problem in package-lock

* directly render tabs

* fix regression

* gaurd against unset values

* update reakit and guard against empty tabs
2020-05-15 14:55:17 -04:00
Albert Juhé Lluveras 11981947c5 Add CSS resets for better theme compatibility (https://github.com/woocommerce/woocommerce-blocks/pull/2478) 2020-05-14 11:07:21 +02:00
Mike Jolley 24035a1508 Update Stripe Method to display generic icon and text in label, with cards below (https://github.com/woocommerce/woocommerce-blocks/pull/2466)
* Support card alignment as a prop

* Add generic card icon to stripe

* Add icons to stripe content

* Update styles

* Label element with icon whitelist

* Update assets/js/base/components/payment-methods/payment-methods.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Remove activePaymentMethod

* Remove spread operator

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-05-13 16:48:03 +01:00
Darren Ethier 0f53b24f1a Fix regression for payment methods in incognito mode. (https://github.com/woocommerce/woocommerce-blocks/pull/2473)
* ensure we set initial tab if it’s not set

* set appropriate defaults for supports if we don’t have payment method configuration object yet.
2020-05-13 05:34:05 -04:00
Mike Jolley 9a7658179b Refactor `usePaymentMethodRegistration` to ensure payment methods are populated once initialization is true (https://github.com/woocommerce/woocommerce-blocks/pull/2467)
* Refactor usePaymentMethodRegistration so initialisation happens at same point as dispatch

* Update NoPaymentMethods conditonal

* Suggested changes to payment init
2020-05-12 12:40:08 -04:00
Rua Haszard fd91263986 Allow shopper to save Stripe payment method in user account for subsequent purchases (https://github.com/woocommerce/woocommerce-blocks/pull/2453)
* always default "save my card for next time" checkbox to unchecked:

This is based on the previous checkout behaviour.
I.e. the shopper has to actively opt-in to save their card.

* Implement "save payment method for next purchase" in checkout:

- send "save card" option using existing post key
  - wc-stripe-new-payment-method
- comment out inappropriate use of "save" when using a saved card (tbc)

* don't hard code the payment gateway name in 'save payment method' key

* refactor "save payment info" checkbox so payment methods can opt-in:

- Add options.allowSavePaymentToken to payment method
registration / config.
- Opt-in in Stripe CC, it allows saved cards.
- Remove render of "save my card" checkbox from Stripe CC UI component.
- Render "save my card" checkbox automatically in payment method tab
(based on allowSavePaymentToken option).
+ todo/follow up comments

* rejig "save my payment method" behaviour so it's generic:

- Any payment method that supports "save" can opt-in:
  - options.allowSavePaymentToken = true/false
  - handle `wc-XXX-new-payment-method` key server side to persist
- Add support in payment context/state reducer for storing checkbox
state, expose value and action via context
- Convert state flag to appropriate API key/value in payment processor
- Remove previous stripe-specific implementation
+ bonus add comment to payment context about preserving state in
PRISTINE action

* rename payment method "allow save" option, more consistent with UI

* remove last vestiges of gateway-specific "save card" impl:

- No need to pass CheckboxControl to payment methods; checkbox is
now handled automatically by checkout.
- Remove shouldSavePayment prop passing through various layers of
stripe payment processing code. (Now handled in context/processor.)

* change new option property name and shape. Also adds validation.

* update type-defs

* use more reliable `activePaymentMethod` for saved payment method

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-05-12 11:12:28 -04:00
Mike Jolley 73abba295e Use display table instead of flex in radio control group (https://github.com/woocommerce/woocommerce-blocks/pull/2461)
* Use display table instead of flex

* Target direct child span only
2020-05-12 15:17:02 +01:00
Albert Juhé Lluveras 53c64600a3 Remove Shipping totals editor.scss file (https://github.com/woocommerce/woocommerce-blocks/pull/2465) 2020-05-12 15:56:09 +02:00
Mike Jolley 1d154364cb Introduce ContainerQueryContextProvider - hide order summary on mobile (https://github.com/woocommerce/woocommerce-blocks/pull/2432)
* Add ContainerQueryContextProvider

* Implement ContainerQueryContextProvider

* Rename based on feedback

* Update assets/js/type-defs/contexts.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/type-defs/contexts.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-05-11 17:07:22 +01:00
Darren Ethier 4ad741329b Fix saved payment method selection not working for purchases. (https://github.com/woocommerce/woocommerce-blocks/pull/2425)
* fix arguments

* only set payment status to pristine if it isn’t already successful

* add server side handling for saved tokens

* ensure correct gateway is selected when using saved card:
- reset the active payment method when user selects saved payment method
(card); this ensures that the correct gateway is used when switching
from another gateway to a saved card

* enhance radiocontrol to receive option specific change events.

* implement specific option change events

This commit:

- ensures selecting a saved payment option updates active payment method for the selected option.
- Sets the saved token key for the selected option correctly.

* remove unnecessary php side code

* fix bug with default saved payment option not applying:

When the payment options are initialised, we now call the onChange
handler for the default (`is_default`) option. This triggers payment
success() so checkout succeeds with default payment method, even if user
doesn't touch payment options.

* fix effect dependencies

Co-authored-by: Rua Haszard <rua.haszard@automattic.com>
2020-05-11 09:29:57 -04:00
Darren Ethier e7781ba407 Fixes regression with payment method validation (https://github.com/woocommerce/woocommerce-blocks/pull/2450)
* add typedefs for store notice context

* improve useStoreNotices hook so returned interfaces are fairly constant

* fix dependencies, defaults, and add types

* fix dependencies

* fix dependencies

* improve functions exposed on validation context so they are more constant

* fixing dependencies

* normalize tokenId to string everywhere

Assuming the token is a number is a bad idea because it is feasible that source for some payment methods could be a string. Also when retrieved as an input value, the id will be a string anyways.
2020-05-10 19:41:10 -04:00
Albert Juhé Lluveras e970e4e86f SCSS mixins cleanup (https://github.com/woocommerce/woocommerce-blocks/pull/2405)
* Cleanup some old mixins

* Make font-size() mixin use parameters with units

* Remove hover-state mixin

* Cleanup mixins file
2020-05-07 10:48:38 +02:00
Mike Jolley 4436bdd23f Allow text inputs to focus on mount (https://github.com/woocommerce/woocommerce-blocks/pull/2416) 2020-05-06 15:04:00 -04:00
Mike Jolley dd811b1491 Update Stripe/payment payment notices (https://github.com/woocommerce/woocommerce-blocks/pull/2417)
* Update notices to say `card` instead of `card's`

* Track isEmpty per field so placeholders are not visible when focusing and defocusing other fields

* Make payment notices non-dissmissable, and removed on payment method switch

* Don't add validation notices

* implement nullish coalescing operator

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-05-06 14:58:31 -04:00
Mike Jolley 74a4e55075 Remove API summaries in favour of client side code (https://github.com/woocommerce/woocommerce-blocks/pull/2387)
* 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>
2020-05-06 11:30:15 +01:00
Mike Jolley 87e8b26e6f Store billing address to local state and persist globally to prevent loss of data (https://github.com/woocommerce/woocommerce-blocks/pull/2374)
* Remove unused shippingAsBilling prop from billing data context

* Move functions out of component and add docblocks

* Local address state

* Refactor into new custom hook

* Remove TODO and code fixed in core

* useShallowEqual to prevent updates on all field changes

* Fix stale validation errors

* cleanup

* Should be setting local state not global state for email and phone

* Combine useEffects and pass correct deps

* Update assets/js/base/hooks/checkout/use-checkout-address.js

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* Prettier

* Move validation update check into updateValidationError

* Fix state updaters

* Fix context definition for setShippingAddress

* Fix validation updates

* errorId dep

* Reapply changes to checkout block

* Update equality checks

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-05-06 11:21:30 +01:00
Albert Juhé Lluveras 30c281c524 Use container queries to load Cart and Checkout responsive styles (https://github.com/woocommerce/woocommerce-blocks/pull/2370)
* 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
2020-05-05 10:10:02 +02:00
Rua Haszard 9d0217419c decode html entities in ProductName component (https://github.com/woocommerce/woocommerce-blocks/pull/2389) 2020-05-04 15:44:23 -04:00
Albert Juhé Lluveras b5497147d5 Fix long product names regression (https://github.com/woocommerce/woocommerce-blocks/pull/2391) 2020-05-04 17:15:32 +02:00
Mike Jolley bf8cff6f50 Rename the discount section when discount total is zero (https://github.com/woocommerce/woocommerce-blocks/pull/2367)
* Rename the discount section when discount total is zero

* Cleanup variable naming
2020-05-01 10:59:27 +01:00
Mike Jolley 5a39df880f Fix summary styles and margins/padding woocommerce/woocommerce-blocks#2340 (https://github.com/woocommerce/woocommerce-blocks/pull/2368) 2020-05-01 10:31:09 +01:00
Albert Juhé Lluveras 9e7623567e Make all font sizes accessible + add docs about font-size() mixin (https://github.com/woocommerce/woocommerce-blocks/pull/2291)
* Switch all font-sizes to use the mixin

* Add notice in coding-guidelines to use accessible font sizes

* Fix label alignment in forms with big font-sizes

* Fix Stripe input boxes font-size not being responsive

* Fix select overflowing in small font sizes

* Add rem function from woocommerce/woocommerce-blocks#2320

* Make the font-size() mixin set relative line-height values

* Convert several magic numbers to use the new mixins

* Update docs

* Update input/select paddings to use the rem mixin

* Add lineHeight comment

* Interpolate rem() mixin inside calc

* Make input padding use only relative units
2020-04-30 12:18:12 +02:00
Mike Jolley 1fd0fa79a9 Payment methods `placeOrderButtonLabel` config (https://github.com/woocommerce/woocommerce-blocks/pull/2362)
* Add payment method configs

* Remove submitLabel

* Enhance useCheckoutSubmit to handle button text

* copy paste error
2020-04-30 10:52:36 +01:00
Albert Juhé Lluveras fce0e2d71c Fix Cart block interaction in the editor (mobile) (https://github.com/woocommerce/woocommerce-blocks/pull/2354)
* Prevent SnackbarList from loading in the editor

* Fix snackbar styles leaking into the editor

* Prevent 'Proceed to Checkout' button being fixed to the bottom in the editor
2020-04-29 17:45:29 +02:00
Mike Jolley 95809b30bb Update payment method config to include icons (https://github.com/woocommerce/woocommerce-blocks/pull/2267)
* Remove strong and cleanup existing configs

* Fix TS validation for blocks-registry

* Allow label to be string

* Split up button and icons for cart

* Make icons and payment methods available on cart page

* Fix payment method enqueuing

* Icon normalization and Stripe implementation

* PayPal Icon

* adjust spacing

* Fix string handling

* Remove paypal icon config

* Check for an object before creating icon

* Add payment icons to Stripe label

* Update common-icons.js

* Update Cart.php

* Update jest.config.json
2020-04-29 11:57:58 +01:00
Albert Juhé Lluveras 60cf16a334 Fix low stock badge not breaking in a new line (https://github.com/woocommerce/woocommerce-blocks/pull/2348) 2020-04-29 12:57:04 +02:00