Commit Graph

31 Commits

Author SHA1 Message Date
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
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
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
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
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
Darren Ethier a8c2a015b4 use noticeContext properties for notice area (https://github.com/woocommerce/woocommerce-blocks/pull/2241) 2020-04-17 10:39:24 +01:00
Darren Ethier 0501328902 Fix global validation error reporting and cheque payment method regressions (https://github.com/woocommerce/woocommerce-blocks/pull/2232)
* fix broken validation error handling after submit

* Add handling for when there are no observers for payment processing or all observers just return true.

* cheque no longer needs to hook into event emitter

* account for no data on complete status handling in reducer

* add handling for either no observers or all observers returning true for onAfterProcessingWithSuccess emitter
2020-04-15 11:43:03 -04:00
Albert Juhé Lluveras d5232c9903 Handle errors when loading payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/2228)
* Handle errors when loading payment methods

* Use an error boundary

* Fix missing initial state in block error boundary

* Cleanup

* Only show internal user messages if it's admin or in editor

* Fixes

* Add friendly error message
2020-04-15 17:15:56 +02:00
Rua Haszard ace2d2bd81 show preview "saved payment methods" in editor (https://github.com/woocommerce/woocommerce-blocks/pull/2151)
* factor out editor preview data for saved payment methods to previews

* add missing imports lost in rebase

* use editorcontext to provide preview data to payment method context

* remove unused `activePaymentMethod` prop in CheckoutProvider and PaymentMethodDataProvider

* don't set the preview saved card as the default

* fix js error with cart in editor - fix EditorContext, pass previewData:
- editor context preview prop has changed;
  - update cart to pass { previewCart } in previewData prop
- correctly destructure cart from previewData in useStoreCart hook
- correct typedefs
  - EditorProvider props.previewData - now just Object
  - similar for EditorDataContext
- correct default for activePaymentMethod state - empty string as before

* preselect 'use a new payment method' in checkout block editor preview

* update unit tests for changes to editor context
2020-04-15 12:05:01 +12:00
Darren Ethier 6069b9b90a Lazy load stripe.js and preserve payment method registration order. (https://github.com/woocommerce/woocommerce-blocks/pull/2214)
* remove stripe.js registration because it is lazy loaded via the library used.

* refactor payment method registration to preserve registration order.

* register payment method asset handles as dependency on editor script as well.
2020-04-14 18:44:31 -04:00
Darren Ethier 5850966894 Refactor checkout status and event emitters to support stripe intents and more complex payment methods. (https://github.com/woocommerce/woocommerce-blocks/pull/2189)
* initial mapping out of stripe payment intents

* rename checkout processing statuses to be clearer

* Add new status and refactor checkout complete behaviour.

* Make sure payment result data is included in checkout processing response

* add payment intent handling

Still testing

* make sure promise is returned

* include site url with endpoint

* modify setComplete status to optionally receive redirectUrl for changing in state at the same time as setting status

* fix typo in property retrieval

* add error handling for after checkout processing event

* add notices area for payment methods

* implement error handling for stripe intents

* hook into stripe error processing and include error in payment response

* clear notices so they don’t show in block and merge payment details

* add notice handling to payment context

* modify error processing in checkout processor

* handle errors with fallback in checkout state context

* hook into after processing for stripe cc error handling

* set checkout to idle status if before processing emitters result in error

* Add emit response type-defs and normalize expectations for observer responses

* improve doc block

* switch checkoutIsComplete check to checkoutAfterProcessing for payment complete status change

* remove unneeded event emitters and consolidate some logic

* fix idle status set logic
2020-04-14 12:52:23 -04:00
Darren Ethier e21883d69c Refactor logic for handling active payment method with express payment methods via checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2170)
* remove logic server side for getting payment method from paymentdata

* ensure stripe accounts for payment request type payment methods

* make sure legacy payment method handling always runs last

* add processedPaymentMethodId to payment method data context state

* switch checkout processor to use new processedPaymentMethod id for submission

* implement returning paymentMethodId from payment-request-express

* include paymentMethodId in stripe cc success return value

* include paymentMethodId in cheque success return value

* add active payment method setting and handling via checkout

express payment methods still need to implement:

- onClick when their button is clicked
- onClose when the express payment interface is closed (cancelled etc).

* don’t expose setActivePaymentMethod on the payment method interface

* remove/fix artifacts from earlier iterations of the pull

* rename `id` property to `name` property for payment method registration

* Revert "include paymentMethodId in cheque success return value"

This reverts commit fe4ee8aced6d67bbd9033263ce61844349d18250.

* Revert "include paymentMethodId in stripe cc success return value"

This reverts commit 359a1f0089866110ec204182f8ffa14ab099c425.

* Revert "implement returning paymentMethodId from payment-request-express"

This reverts commit 117c68980b0876dee0acc78cec7754ccfe2a9bb1.

* Revert "switch checkout processor to use new processedPaymentMethod id for submission"

This reverts commit c38a05b63626dfc1336c7bb0e86417b798a803d6.

* Revert "add processedPaymentMethodId to payment method data context state"

This reverts commit 3d7923e7297f3c76efde536d26eaf68464ba9583.

* improve isSuccess response check and variable name

* implement paymentMethodId config option

* doh php ain’t javascript

* add missing dependency from rebase
2020-04-09 11:22:34 -04:00
Darren Ethier 12b384374b Use cart data to provide country and currency_code for payment method registration config (https://github.com/woocommerce/woocommerce-blocks/pull/2169)
* use cart data to provide country and currency_code

* remove files that likely got added back in from a bad rebase.

* modify canMakePayment config property so it must be a function

* Feed cart data to registered payment methods `canMakePayment` function.

This can then be used by payment methods for determining whether to show the payment method or not.

* implement new canMakePayment signature for cheque

Now canMakePayment doesn’t need to be a promise (payment method registry will handle wrapping all values in a promise to treat them as promises.

* implement canMakePayment as a function
2020-04-09 07:44:29 -04:00
Darren Ethier d79f5ab271 Convert apple pay integration to payment request integration and finish implementation (https://github.com/woocommerce/woocommerce-blocks/pull/2127)
* add logic allowing payment method to be overridden via payment data in request

* hook in to trigger server side processing of stripe payment request

* improvements to shipping data context

- memoize event emitters
- split up emitted events (reduces how often events trigger)
- Include whether rate is being selected in exported data.

* expose `isSelectingRate` value to payment method interface

* fix typo in shipping emitters for emitter type

* include setting of shipping data in payment method success status call

- this also requires changing the nested order of providers in checkout provider

* fix priority logic for event emitters.

- lower priority is supposed to fire before higher priority.

* normalize postal code for comparisons

* move normalize functions into stripe-utils folder

* refactor stripePromise so that it provides a specific instance to each payment method.

This also provides it as a prop to the pm components.

* renadme apple pay express to payment request express

This adds full support for the stripe payment request api instead of just applePay (so GooglePay, MicrosoftPay and ApplePay are now supported).

Also adds numerous fixes to internal logic.

* add handling to skip core checkout validation logic if express payment method is handling payment

Express payment methods have their own internal validation so this removes the need for checkout validating fields. This is also necessary because checkout validation breaks the flow when making a payment using express payment methods because of the order of the flow for these methods.

* splitting out emmitter effects for checkout and improving logic

Splitting up effects limits the potential for firing off emitters more than needed.

* remove unnecessary ref definitions

* fix on cancel action erroring for payment request modal

* ensure unique stripe object for component and canPay

* set default total label if one isn’t configured on the server

* fix order of state changes

* simplify condition

* remove unnecessary dependency

* normalize to uppercase too

* simplify can make payment conditional

* update comment blocks
2020-04-08 12:36:04 -04:00
Darren Ethier bfdfa2f603 Move calculating state outside of checkout state (https://github.com/woocommerce/woocommerce-blocks/pull/2163)
* remove calculating as a checkout status (making it separate)

* include checkout is calculating for determining whether to flip payment status to process

* only change payment method state for status changes if needed

* fix reducer for shipping state

* include checkoutIsCalculating for determining whether to show validation errors in checkout block

* change where currentStatus is defined

* fix bug with saved payment method option
2020-04-08 11:46:34 -04:00
Rua Haszard 0b956e1a4f Revert "show a "preview" saved card in the editor (first cut!)"
This reverts commit f409908eda.

(Accidental push to master)
2020-04-08 12:12:00 +12:00
Rua Haszard f409908eda show a "preview" saved card in the editor (first cut!) 2020-04-08 12:04:23 +12:00
Albert Juhé Lluveras 8c7d4805a4 Show validation errors again (https://github.com/woocommerce/woocommerce-blocks/pull/2124)
* Make validation errors appear

* Make validation errors appear all at once

* Simplify diff

* Expose shippingErrorStatus from shipping context

* Memoize currentErrorStatus

* Pass currentErrorStatus to observers

* Add missing type-def property

* Fix typo in constant name

* Refactor emitEvent so false responses don't return true

* Make onCheckoutProcessing observers return errorMessage and validationErrors properties
2020-04-06 16:36:19 -04:00
Darren Ethier d108e5ea96 Update stripe payment methods to work with new event emitters (https://github.com/woocommerce/woocommerce-blocks/pull/2115)
* Add interface for setting an express payment error notice.

* fix typedefs

* remove usage of paymentstatus dispatcher from stripe cc

* remove usage of paymentstatus dispatcher from apple pay

* remove any existing express payment notice on click

* revert buggy change with abort payment call

- also ensure that completePayment sets applePayProcessing to false
2020-04-06 08:18:35 -04:00
Darren Ethier 30fb8bef28 Fix flaw with event emitters and complete checkout flow for the cheque payment method. (https://github.com/woocommerce/woocommerce-blocks/pull/2108)
* Allow for priority to be set on event emitters

* Add payment event emitters

* add new actions/status to checkout state context

* implement event emitters in payment data context

* refactor checkout state context to use new actions in event emitters

* refactor checkout processor to handle new event emitters

* fix type-defs for registered payment methods

* register observer for cheque payment method integration

* add inline todo

* fix sort

* fix tests and add test for priority usage in event emitters

* remove todo and just add explanatory comment

* condense sort logic

* lowercase test description

* abstract emitter callback to reduce code

* don’t process passed in errors if it’s undefined

* improve error response expectation for payment processing event observer
2020-04-03 07:50:54 -04:00
Albert Juhé Lluveras 73d1432b02 Hook up checkout validation with context (https://github.com/woocommerce/woocommerce-blocks/pull/2033)
* Hook up checkout validation with context

* Make sure hasValidationErrors is up to date in onCheckoutProcessing

* Move validation check inside CheckoutProcessor's processCheckout

* Make sure all checkout form fields have a unique ID

* Don't clear checkout context errors in shipping context

* Move CheckoutProcessor to the top so scrollToTop works

* Do not disable Place Order Button if there are errors

* Split checkValidation and processCheckout in Checkout Provider

* Refactor event emitter to use Maps

* Save payment method errors to validation context

* Show an notice when a payment method has an error

* Make sure JS errors during payment are displayed

* Remove error notice when payment method doesn't return an error anymore

* Make sure payment methods know if shipping and billing addresses are the same

* Make sure checkout is only processed if payment methods didn't fail

* Make sure state input also has an id

* Clear input and select errors on unmount

* Pass id to CountryInput and StateInput

* Fix function name

* Add missing default context values

* Move onCheckoutCompleteError effect to CheckoutBlock

* Remove conditional from shipping setHasError
2020-04-02 11:27:54 +02:00
Darren Ethier 2d53b2ace1 Refactor checkout context provider to be more flexible and implement CartProvider (https://github.com/woocommerce/woocommerce-blocks/pull/2083)
* Rename and move existing checkout provider to checkout-state provider.

This allows us to re-use the interface exposed on this provider for cart and checkout blocks.

* refactor checkout provider to implement the new checkout state provider.

* Add Cart provider and export

* fix type-defs

* fix editor context provider and ensure all `isEditor` checks come from this provider

* fix type definition

* implement cart provider
2020-04-01 05:27:53 -04:00
Darren Ethier fb3cae67e6 Implement Stripe CC and Stripe ApplePay payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/1983)
* Server side changes for payment method integrations

Including adding a stripe class temporarily

* update needed npm packages (and add some types)

* updates to contexts

* remove stepContent from payment config for payment methods

* update payment method interface and typedefs

Exposing a components property to pass along components that payment methods can use (so we keep styles consistent for them)

* add apple pay and stripe cc integration and remove paypal

* remove save payment checkbox from checkout block

It is handled by payment methods.

* Include an id prop for tabs

* fix activePaymentMethod pass through on rendered payment method element

also adds an id for the rendered tab

* add styles for payment method fields

If payment methods use these classes for their fields then the styles will get applied. It _could_ allow for consistent styling, we may have to provide design documentation for this?

These are styles in cases where payment methods have to use elements provided by the gateway (eg. Stripe elements). In future iterations we could look at providing components to payment methods to use (if they aren’t restricted by the gateway).

* fix rebase conflict

* do a test payment request for applePay to determine if the current browser supports it

* don’t console.error for stripe loading.

* Fix placeholder errors in the editor

* improve styling and add missing validation for inline card element

* update pacakge-lock

* rename payment-methods-demo folder to payment-methods-extension

* expose checkbox control on payment method interface

* export payment-methods-extension to it’s own asset build

This allows us to more accurately demonstrate how payment extensions would hook in to the blocks.

* don’t enqueue a style that doesn’t exist

* add full stop to comments and remove obsolete comment blcok

* fix spacing

* switch `activeContent` to `content` for payment method registration config
2020-03-30 08:07:49 -04:00
Mike Jolley 6d0ee74157 Add billing data context (https://github.com/woocommerce/woocommerce-blocks/pull/2027)
* Checkout class tidyup

* CheckoutProcessor placeholder

* ShippingMethodDataX to ShippingDataX

* Remove billing from checkout provider

* Remove billing data hook

* Remove billing from payment methods state

* Update typedefs

* Billing context

* Fix billing and shipping context persistence bugs

* Remove address form change

* Move phone back; another PR can deal with this

* Remove unused state
2020-03-26 13:31:09 +00:00
Darren Ethier 690f61ec93 Move payment method registration state to payment data context and add saved payment methods handling (https://github.com/woocommerce/woocommerce-blocks/pull/2029)
* Add saved-payment-method options handling and improve payment method registration initialization

* add server side exposure of saved customer payment methods

* fix reducer for express payment method state

* fix default for customerPaymentMethods
2020-03-26 07:11:46 -04:00
Seghir Nadir 2ba75fdc25 Refactor useBillingData to useCheckoutContext and hooking it up to form (https://github.com/woocommerce/woocommerce-blocks/pull/2002)
* Add line pricing for cart items in the API (https://github.com/woocommerce/woocommerce-blocks/pull/1979)

* Add line pricing for cart items

* Update checkout linePrice

* Fix tests

* Update schema - add dinero

* Implement dinero in cart totals

* Update preview and remove line totals

* Update package lock

* Update checkout review

* Fix preview and default data shapes

* return first and last name in shipping address

* remove shippingAsBilling option from editor settings

* remove billing data from store

* move to context

* hook billing to hook and sync with shipping

* add email to billingData

* hydrate billing data

* some refactors

* move hydrated billing data to reducer initial state and fix stale dependencies

* fix stale useCallback

* better checks in php types

* get isEditor from context

* update typedefs

* skip state update if nothing changed

* fix rebase

* update snapshots

* rebase package

* wrap setEmail in useCallback

* remove ValidationContextProvider

* fix docs

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2020-03-23 21:13:41 +01:00
Mike Jolley 128ac6d63d Refactor cart shipping settings and shipping calculator (https://github.com/woocommerce/woocommerce-blocks/pull/1943)
* 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>
2020-03-13 13:41:59 +00:00
Darren Ethier 2aa2093dfb Add contexts for checkout (https://github.com/woocommerce/woocommerce-blocks/pull/1915)
- restructures `@woocommerce/base-context` imports so it pulls from `index.js` in the `base/context` folder. That way tree-shaking will be used if possible. This also helps with organizing the folder structure a bit better for the new contexts.
- Fixes all the various imports through the code due to the above change.
- Adds `CheckoutContextProvider`, `useCheckoutContext` and related files.
- Adds `PaymentMethodDataProvider`, `usePaymentMethodDataContext` and related files.
- Adds `ShippingMethodDataProvider`, `useShippingMethodDataContext` and related files.
- Adds typedefs used for the various context interfaces.
2020-03-10 09:39:21 -04:00