woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js

171 lines
5.1 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
import { __ } from '@wordpress/i18n';
import {
useExpressPaymentMethods,
usePaymentMethodInterface,
} from '@woocommerce/base-context/hooks';
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 15:22:34 +00:00
import {
cloneElement,
isValidElement,
useCallback,
useRef,
} from '@wordpress/element';
Feature: Data Store Migration - Payments (https://github.com/woocommerce/woocommerce-blocks/pull/6619) * Move paymentMethodDataProvider into a data store (https://github.com/woocommerce/woocommerce-blocks/pull/6208) * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Use correct key in payment method data context * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Fix linting issues Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Alex Florisca <alex.florisca@automattic.com> * Rebase on the update/checkout-data-store branch & Fix failed payments (https://github.com/woocommerce/woocommerce-blocks/pull/6587) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Fix merge conflict error * Set & get the provider's state from our data store instead of React's useReducer (https://github.com/woocommerce/woocommerce-blocks/pull/6588) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Get payment method data directly from the data store instead of the usePaymentMethodDataContext hook (https://github.com/woocommerce/woocommerce-blocks/pull/6589) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Refactor the payment method data store & context (https://github.com/woocommerce/woocommerce-blocks/pull/6607) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context * Get enabled customer payment methods using data store selector * Remove remaining useReducer action from the dispatchers file * Update types and remove unused vars * Remove the payment method dispatchers hook * Refactor & clean up (remove unused files) * Remove commented line from payment methods types * Move event emitter into thunks Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Remove checkout-state after merge conflicts * Fix linting errors * Move types to types.ts * Move default states into respective store folders * Fix types and add comment * Move setExpressPaymentError to payment-methods store * fix express payment methods not showing up * Check if payment method is active from the state * Add comments * Remove commented out code in payment method data context * Display an error in the check-payment-methods directly from data store * Remove use-emit-response hook and move utils in event-emit/utils.ts * Use correct action property to remove payment methods * Fix formatting * Only try to initialize payment methods when cart is done loading * Add function to order payment methods from server * Add payment methods in the correct order * Prevent adding registered payment methods before cart is ready * Ensure payment methods get removed from state when deregistered * Reorder setting default payment methods to add customer methods first * Get customer methods from store not context * Remove error from payment-method state and associated selectors * Remove use-payment-method-registration and update the payment method state to remove the duplicated registeredPaymentMethods * Remove errorMessage from payment-methods store * Rename customerPaymentMethods -> savedPaymentMethods * Order payment methods when validating * Refactor payment-methods.js * Fix "Payment methods not set in editor" woocommerce/woocommerce-blocks#6655 bug We never get to load the payment methods object in the editor mode because there are no cart totals to load. * Initialize payment methods when available payments are loaded * Remove duplicate code * Fix data store state mutation anti-pattern A Redux rule is to never mutate the state in a reducer to avoid any unexpected results * Set availablePaymentMethods to the paymentMethods object Instead of its keys. We can get the keys using "Object.keys". * Use the available ordered payment methods The `getPaymentMethods` & `getExpressPaymentMethods` may include unordored & unavailable payment methods. * Get the correct value from the emit event response Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2022-07-08 05:53:24 +00:00
import { useEditorContext } from '@woocommerce/base-context';
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
import deprecated from '@wordpress/deprecated';
Feature: Data Store Migration - Payments (https://github.com/woocommerce/woocommerce-blocks/pull/6619) * Move paymentMethodDataProvider into a data store (https://github.com/woocommerce/woocommerce-blocks/pull/6208) * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Use correct key in payment method data context * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Fix linting issues Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Alex Florisca <alex.florisca@automattic.com> * Rebase on the update/checkout-data-store branch & Fix failed payments (https://github.com/woocommerce/woocommerce-blocks/pull/6587) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Fix merge conflict error * Set & get the provider's state from our data store instead of React's useReducer (https://github.com/woocommerce/woocommerce-blocks/pull/6588) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Get payment method data directly from the data store instead of the usePaymentMethodDataContext hook (https://github.com/woocommerce/woocommerce-blocks/pull/6589) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Refactor the payment method data store & context (https://github.com/woocommerce/woocommerce-blocks/pull/6607) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context * Get enabled customer payment methods using data store selector * Remove remaining useReducer action from the dispatchers file * Update types and remove unused vars * Remove the payment method dispatchers hook * Refactor & clean up (remove unused files) * Remove commented line from payment methods types * Move event emitter into thunks Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Remove checkout-state after merge conflicts * Fix linting errors * Move types to types.ts * Move default states into respective store folders * Fix types and add comment * Move setExpressPaymentError to payment-methods store * fix express payment methods not showing up * Check if payment method is active from the state * Add comments * Remove commented out code in payment method data context * Display an error in the check-payment-methods directly from data store * Remove use-emit-response hook and move utils in event-emit/utils.ts * Use correct action property to remove payment methods * Fix formatting * Only try to initialize payment methods when cart is done loading * Add function to order payment methods from server * Add payment methods in the correct order * Prevent adding registered payment methods before cart is ready * Ensure payment methods get removed from state when deregistered * Reorder setting default payment methods to add customer methods first * Get customer methods from store not context * Remove error from payment-method state and associated selectors * Remove use-payment-method-registration and update the payment method state to remove the duplicated registeredPaymentMethods * Remove errorMessage from payment-methods store * Rename customerPaymentMethods -> savedPaymentMethods * Order payment methods when validating * Refactor payment-methods.js * Fix "Payment methods not set in editor" woocommerce/woocommerce-blocks#6655 bug We never get to load the payment methods object in the editor mode because there are no cart totals to load. * Initialize payment methods when available payments are loaded * Remove duplicate code * Fix data store state mutation anti-pattern A Redux rule is to never mutate the state in a reducer to avoid any unexpected results * Set availablePaymentMethods to the paymentMethods object Instead of its keys. We can get the keys using "Object.keys". * Use the available ordered payment methods The `getPaymentMethods` & `getExpressPaymentMethods` may include unordored & unavailable payment methods. * Get the correct value from the emit event response Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2022-07-08 05:53:24 +00:00
import { useDispatch, useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import PaymentMethodErrorBoundary from './payment-method-error-boundary';
import { STORE_KEY as PAYMENT_STORE_KEY } from '../../../data/payment/constants';
const ExpressPaymentMethods = () => {
const { isEditor } = useEditorContext();
Feature: Data Store Migration - Payments (https://github.com/woocommerce/woocommerce-blocks/pull/6619) * Move paymentMethodDataProvider into a data store (https://github.com/woocommerce/woocommerce-blocks/pull/6208) * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Use correct key in payment method data context * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Fix linting issues Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Alex Florisca <alex.florisca@automattic.com> * Rebase on the update/checkout-data-store branch & Fix failed payments (https://github.com/woocommerce/woocommerce-blocks/pull/6587) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Fix merge conflict error * Set & get the provider's state from our data store instead of React's useReducer (https://github.com/woocommerce/woocommerce-blocks/pull/6588) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Get payment method data directly from the data store instead of the usePaymentMethodDataContext hook (https://github.com/woocommerce/woocommerce-blocks/pull/6589) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Refactor the payment method data store & context (https://github.com/woocommerce/woocommerce-blocks/pull/6607) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context * Get enabled customer payment methods using data store selector * Remove remaining useReducer action from the dispatchers file * Update types and remove unused vars * Remove the payment method dispatchers hook * Refactor & clean up (remove unused files) * Remove commented line from payment methods types * Move event emitter into thunks Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Remove checkout-state after merge conflicts * Fix linting errors * Move types to types.ts * Move default states into respective store folders * Fix types and add comment * Move setExpressPaymentError to payment-methods store * fix express payment methods not showing up * Check if payment method is active from the state * Add comments * Remove commented out code in payment method data context * Display an error in the check-payment-methods directly from data store * Remove use-emit-response hook and move utils in event-emit/utils.ts * Use correct action property to remove payment methods * Fix formatting * Only try to initialize payment methods when cart is done loading * Add function to order payment methods from server * Add payment methods in the correct order * Prevent adding registered payment methods before cart is ready * Ensure payment methods get removed from state when deregistered * Reorder setting default payment methods to add customer methods first * Get customer methods from store not context * Remove error from payment-method state and associated selectors * Remove use-payment-method-registration and update the payment method state to remove the duplicated registeredPaymentMethods * Remove errorMessage from payment-methods store * Rename customerPaymentMethods -> savedPaymentMethods * Order payment methods when validating * Refactor payment-methods.js * Fix "Payment methods not set in editor" woocommerce/woocommerce-blocks#6655 bug We never get to load the payment methods object in the editor mode because there are no cart totals to load. * Initialize payment methods when available payments are loaded * Remove duplicate code * Fix data store state mutation anti-pattern A Redux rule is to never mutate the state in a reducer to avoid any unexpected results * Set availablePaymentMethods to the paymentMethods object Instead of its keys. We can get the keys using "Object.keys". * Use the available ordered payment methods The `getPaymentMethods` & `getExpressPaymentMethods` may include unordored & unavailable payment methods. * Get the correct value from the emit event response Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2022-07-08 05:53:24 +00:00
const { activePaymentMethod, paymentMethodData } = useSelect(
( select ) => {
const store = select( PAYMENT_STORE_KEY );
Feature: Data Store Migration - Payments (https://github.com/woocommerce/woocommerce-blocks/pull/6619) * Move paymentMethodDataProvider into a data store (https://github.com/woocommerce/woocommerce-blocks/pull/6208) * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Use correct key in payment method data context * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Fix linting issues Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Alex Florisca <alex.florisca@automattic.com> * Rebase on the update/checkout-data-store branch & Fix failed payments (https://github.com/woocommerce/woocommerce-blocks/pull/6587) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Fix merge conflict error * Set & get the provider's state from our data store instead of React's useReducer (https://github.com/woocommerce/woocommerce-blocks/pull/6588) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Get payment method data directly from the data store instead of the usePaymentMethodDataContext hook (https://github.com/woocommerce/woocommerce-blocks/pull/6589) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Refactor the payment method data store & context (https://github.com/woocommerce/woocommerce-blocks/pull/6607) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context * Get enabled customer payment methods using data store selector * Remove remaining useReducer action from the dispatchers file * Update types and remove unused vars * Remove the payment method dispatchers hook * Refactor & clean up (remove unused files) * Remove commented line from payment methods types * Move event emitter into thunks Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Remove checkout-state after merge conflicts * Fix linting errors * Move types to types.ts * Move default states into respective store folders * Fix types and add comment * Move setExpressPaymentError to payment-methods store * fix express payment methods not showing up * Check if payment method is active from the state * Add comments * Remove commented out code in payment method data context * Display an error in the check-payment-methods directly from data store * Remove use-emit-response hook and move utils in event-emit/utils.ts * Use correct action property to remove payment methods * Fix formatting * Only try to initialize payment methods when cart is done loading * Add function to order payment methods from server * Add payment methods in the correct order * Prevent adding registered payment methods before cart is ready * Ensure payment methods get removed from state when deregistered * Reorder setting default payment methods to add customer methods first * Get customer methods from store not context * Remove error from payment-method state and associated selectors * Remove use-payment-method-registration and update the payment method state to remove the duplicated registeredPaymentMethods * Remove errorMessage from payment-methods store * Rename customerPaymentMethods -> savedPaymentMethods * Order payment methods when validating * Refactor payment-methods.js * Fix "Payment methods not set in editor" woocommerce/woocommerce-blocks#6655 bug We never get to load the payment methods object in the editor mode because there are no cart totals to load. * Initialize payment methods when available payments are loaded * Remove duplicate code * Fix data store state mutation anti-pattern A Redux rule is to never mutate the state in a reducer to avoid any unexpected results * Set availablePaymentMethods to the paymentMethods object Instead of its keys. We can get the keys using "Object.keys". * Use the available ordered payment methods The `getPaymentMethods` & `getExpressPaymentMethods` may include unordored & unavailable payment methods. * Get the correct value from the emit event response Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2022-07-08 05:53:24 +00:00
return {
activePaymentMethod: store.getActivePaymentMethod(),
paymentMethodData: store.getPaymentMethodData(),
};
}
);
const {
__internalSetActivePaymentMethod,
__internalSetPaymentStatus,
__internalSetExpressPaymentError,
} = useDispatch( PAYMENT_STORE_KEY );
const { paymentMethods } = useExpressPaymentMethods();
Feature: Data Store Migration - Payments (https://github.com/woocommerce/woocommerce-blocks/pull/6619) * Move paymentMethodDataProvider into a data store (https://github.com/woocommerce/woocommerce-blocks/pull/6208) * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Use correct key in payment method data context * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Fix linting issues Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Alex Florisca <alex.florisca@automattic.com> * Rebase on the update/checkout-data-store branch & Fix failed payments (https://github.com/woocommerce/woocommerce-blocks/pull/6587) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Fix merge conflict error * Set & get the provider's state from our data store instead of React's useReducer (https://github.com/woocommerce/woocommerce-blocks/pull/6588) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Get payment method data directly from the data store instead of the usePaymentMethodDataContext hook (https://github.com/woocommerce/woocommerce-blocks/pull/6589) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Refactor the payment method data store & context (https://github.com/woocommerce/woocommerce-blocks/pull/6607) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context * Get enabled customer payment methods using data store selector * Remove remaining useReducer action from the dispatchers file * Update types and remove unused vars * Remove the payment method dispatchers hook * Refactor & clean up (remove unused files) * Remove commented line from payment methods types * Move event emitter into thunks Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Remove checkout-state after merge conflicts * Fix linting errors * Move types to types.ts * Move default states into respective store folders * Fix types and add comment * Move setExpressPaymentError to payment-methods store * fix express payment methods not showing up * Check if payment method is active from the state * Add comments * Remove commented out code in payment method data context * Display an error in the check-payment-methods directly from data store * Remove use-emit-response hook and move utils in event-emit/utils.ts * Use correct action property to remove payment methods * Fix formatting * Only try to initialize payment methods when cart is done loading * Add function to order payment methods from server * Add payment methods in the correct order * Prevent adding registered payment methods before cart is ready * Ensure payment methods get removed from state when deregistered * Reorder setting default payment methods to add customer methods first * Get customer methods from store not context * Remove error from payment-method state and associated selectors * Remove use-payment-method-registration and update the payment method state to remove the duplicated registeredPaymentMethods * Remove errorMessage from payment-methods store * Rename customerPaymentMethods -> savedPaymentMethods * Order payment methods when validating * Refactor payment-methods.js * Fix "Payment methods not set in editor" woocommerce/woocommerce-blocks#6655 bug We never get to load the payment methods object in the editor mode because there are no cart totals to load. * Initialize payment methods when available payments are loaded * Remove duplicate code * Fix data store state mutation anti-pattern A Redux rule is to never mutate the state in a reducer to avoid any unexpected results * Set availablePaymentMethods to the paymentMethods object Instead of its keys. We can get the keys using "Object.keys". * Use the available ordered payment methods The `getPaymentMethods` & `getExpressPaymentMethods` may include unordored & unavailable payment methods. * Get the correct value from the emit event response Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2022-07-08 05:53:24 +00:00
const paymentMethodInterface = usePaymentMethodInterface();
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 15:22:34 +00:00
const previousActivePaymentMethod = useRef( activePaymentMethod );
const previousPaymentMethodData = useRef( paymentMethodData );
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 15:22:34 +00:00
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
/**
* onExpressPaymentClick should be triggered when the express payment button is clicked.
*
* This will store the previous active payment method, set the express method as active, and set the payment status
* to started.
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
*/
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 15:22:34 +00:00
const onExpressPaymentClick = useCallback(
( paymentMethodId ) => () => {
previousActivePaymentMethod.current = activePaymentMethod;
previousPaymentMethodData.current = paymentMethodData;
__internalSetPaymentStatus( { isStarted: true } );
__internalSetActivePaymentMethod( paymentMethodId );
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 15:22:34 +00:00
},
[
activePaymentMethod,
paymentMethodData,
__internalSetActivePaymentMethod,
__internalSetPaymentStatus,
]
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 15:22:34 +00:00
);
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
/**
* onExpressPaymentClose should be triggered when the express payment process is cancelled or closed.
*
* This restores the active method and returns the state to pristine.
*/
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 15:22:34 +00:00
const onExpressPaymentClose = useCallback( () => {
__internalSetPaymentStatus( { isPristine: true } );
__internalSetActivePaymentMethod(
previousActivePaymentMethod.current,
previousPaymentMethodData.current
);
}, [ __internalSetActivePaymentMethod, __internalSetPaymentStatus ] );
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
/**
* onExpressPaymentError should be triggered when the express payment process errors.
*
* This shows an error message then restores the active method and returns the state to pristine.
*/
const onExpressPaymentError = useCallback(
( errorMessage ) => {
__internalSetPaymentStatus( { hasError: true }, errorMessage );
__internalSetExpressPaymentError( errorMessage );
__internalSetActivePaymentMethod(
previousActivePaymentMethod.current,
previousPaymentMethodData.current
);
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
},
[
__internalSetActivePaymentMethod,
__internalSetPaymentStatus,
__internalSetExpressPaymentError,
]
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
);
/**
* Calling setExpressPaymentError directly is deprecated.
*/
const deprecatedSetExpressPaymentError = useCallback(
( errorMessage = '' ) => {
deprecated(
'Express Payment Methods should use the provided onError handler instead.',
{
alternative: 'onError',
plugin: 'woocommerce-gutenberg-products-block',
link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
}
);
if ( errorMessage ) {
onExpressPaymentError( errorMessage );
} else {
__internalSetExpressPaymentError( '' );
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
}
},
[ __internalSetExpressPaymentError, onExpressPaymentError ]
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
);
/**
* @todo Find a way to Memoize Express Payment Method Content
*
* Payment method content could potentially become a bottleneck if lots of logic is ran in the content component. It
* Currently re-renders excessively but is not easy to useMemo because paymentMethodInterface could become stale.
* paymentMethodInterface itself also updates on most renders.
*/
const entries = Object.entries( paymentMethods );
const content =
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
entries.length > 0 ? (
entries.map( ( [ id, paymentMethod ] ) => {
const expressPaymentMethod = isEditor
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
? paymentMethod.edit
: paymentMethod.content;
return isValidElement( expressPaymentMethod ) ? (
<li key={ id } id={ `express-payment-method-${ id }` }>
{ cloneElement( expressPaymentMethod, {
...paymentMethodInterface,
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 15:22:34 +00:00
onClick: onExpressPaymentClick( id ),
onClose: onExpressPaymentClose,
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
onError: onExpressPaymentError,
setExpressPaymentError:
deprecatedSetExpressPaymentError,
} ) }
</li>
) : null;
} )
) : (
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
<li key="noneRegistered">
{ __(
'No registered Payment Methods',
'woo-gutenberg-products-block'
) }
</li>
);
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
return (
<PaymentMethodErrorBoundary isEditor={ isEditor }>
<ul className="wc-block-components-express-payment__event-buttons">
{ content }
</ul>
</PaymentMethodErrorBoundary>
);
};
export default ExpressPaymentMethods;