Commit Graph

305 Commits

Author SHA1 Message Date
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
Mike Jolley b062a67faf Accept object parameters in renderFrontend util (https://github.com/woocommerce/woocommerce-blocks/pull/2567) 2020-05-27 11:11:30 +01: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
Darren Ethier 519ca4febd Fix Editor performance issues with checkout block. (https://github.com/woocommerce/woocommerce-blocks/pull/2495)
* add missing typedef

* make sure default shipping address is consistent with everywhere else

* fix test for new expectation
2020-05-15 08:48:45 -04:00
Albert Juhé Lluveras b59a6d56e3 Checkout block: fix error 'setIsSuppressed' in editor (https://github.com/woocommerce/woocommerce-blocks/pull/2492) 2020-05-15 07:09:36 -04:00
Darren Ethier e2d6e4a038 Fix shipping rate and address handling in Stripe payment request payment method. (https://github.com/woocommerce/woocommerce-blocks/pull/2484)
* fix dependencies

* refactor stripe payment-request to extract things into smaller units

- adds/fixes typedefs
- fixes dependencies
- improves logic.

* implement memoizing for functions.

* if same shipping address is selected, just call updateWith immediately

* add separate handler for failed shipping rate retrieval

* improve logic around shipping rate fail/success status

* add notice suppression logic to store notices.

- this is implemented in checkout processor to suppress notices when express payment methods are active.

* add error detection for shipping address errors and update the shipping status accordingly

* update type-def

* set billingData before shippingData

This is needed because of the shipping data and billing data sync logic in use-checkout-address.

* have to tighten dependencies to prevent unnecessary firing

With us now adding error status setters for shippping, the potential for the shipping status changes to trigger the effect went up. So tightening the dependencies to only the stati we care about prevent unnecessary effect calls.

* refactor event handlers to be named and remove all listeners.

This is an undocumented api on the stripe `paymentRequest.on` return value, but I’m trusting it will be relatively stable for this api.

The need for this is caused by the fact that without it, the listeners are re-registered on the paymentRequest event everytime the paymentRequest modal is closed and reopened.

* fix typo in doc block
2020-05-14 19:55:22 -04:00
Mike Jolley e5c500c70d Only set to pristine when checkout is idle, not when idle status changes (https://github.com/woocommerce/woocommerce-blocks/pull/2485) 2020-05-14 18:18:18 -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
Darren Ethier a5a62359d7 Fix all shipping address changes in stripe payment request timing out with no rate update. (https://github.com/woocommerce/woocommerce-blocks/pull/2482)
* remove unnecessary shipping field and shipping fields setter

* remove a commented out block

* account for billingData having values but billingFields not when shipping address changes.
2020-05-13 20:05:09 -04: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
Mike Jolley 2395137790 Ensure email and phone are persisted through `setBillingData` (https://github.com/woocommerce/woocommerce-blocks/pull/2477)
* Force inclusion of email and phone

* Update deps

* update deps
2020-05-13 15:39:26 +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
Darren Ethier ea3d817db1 Fix multiple extra stripe createSource requests than necessary (https://github.com/woocommerce/woocommerce-blocks/pull/2444)
* refactor to move payment processing into it’s own effect

- this is the first step in trying to improve the createSource behaviour.

* memoize setValidationErrors so onPaymentProcessing event effect doesn’t re-run unnecessarily.

* Update assets/js/payment-method-extensions/payment-methods/stripe/credit-card/use-payment-processing.js

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

* fix docs alignment

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-05-08 11:32:20 -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
Darren Ethier 88e397154d Add Todo Probot config (https://github.com/woocommerce/woocommerce-blocks/pull/2384)
* Add todo bot config

* tweak todo comment to test
2020-05-02 15:56:33 -04: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 2593c711ad Fix payment method error notices issues (https://github.com/woocommerce/woocommerce-blocks/pull/2352)
* Prevent payment method errors appearing twice. Fixes woocommerce/woocommerce-blocks#2327

* Remove payment method errors on submit. Fixes woocommerce/woocommerce-blocks#2217

* Simplify useEffect dependencies

* Pass context name to removeNotice
2020-04-30 11:43:56 +02: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