Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Pass to payment methods a wrapper component that handles the loading state #5135

Merged
merged 1 commit into from
Nov 22, 2021

Conversation

ralucaStan
Copy link
Contributor

In order to have a consistent UI for loading state presented to shoppers in the C&C blocks, we need to provide registered payment methods a component that they could use while they don't want the payment method to be available.

This PR:

  • exposes the LoadingMask component via the payment method interface, under the components key
  • updates the docs listing the data that we pass to payment methods

Fixes #5013

Other Checks

  • I've updated this doc for any feature flags or experimental interfaces implemented in this pull request.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Images don't reflect the actual size in the page, they are made to support comparing the changes.

Before After
Screenshot 2021-11-12 at 18 00 12 Screenshot 2021-11-12 at 17 59 28 Screenshot 2021-11-12 at 17 59 52

Testing

  1. Register a payment method
  2. Make sure you have access to the LoadingMask component under the components key.

Performance Impact

Changelog

Pass to payment methods a wrapper component that handles the loading state

@rubikuserbot rubikuserbot requested a review from a team November 12, 2021 17:40
@github-actions
Copy link
Contributor

Size Change: +504 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters.js 8 kB +1 B (0%)
build/all-products-frontend.js 23.4 kB -1 B (0%)
build/all-products.js 38.3 kB +3 B (0%)
build/attribute-filter.js 12.1 kB +2 B (0%)
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.74 kB +15 B (0%)
build/cart-blocks/line-items-frontend.js 5.87 kB -2 B (0%)
build/cart-frontend.js 52.5 kB +8 B (0%)
build/cart.js 50.6 kB +142 B (0%)
build/checkout-blocks/actions-frontend.js 1.48 kB +1 B (0%)
build/checkout-blocks/order-summary-frontend.js 12.9 kB +1 B (0%)
build/checkout-blocks/payment-frontend.js 4.47 kB +185 B (+4%)
build/checkout-frontend.js 54.8 kB +4 B (0%)
build/checkout.js 53.8 kB +138 B (0%)
build/featured-product.js 9.43 kB -1 B (0%)
build/price-filter-frontend.js 14.2 kB -1 B (0%)
build/product-best-sellers.js 6.62 kB +1 B (0%)
build/product-category.js 7.49 kB +1 B (0%)
build/product-new.js 6.77 kB +1 B (0%)
build/product-top-rated.js 6.74 kB +1 B (0%)
build/single-product-frontend.js 26.9 kB -3 B (0%)
build/single-product.js 10 kB +3 B (0%)
build/wc-blocks-vendors.js 255 kB +5 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.18 kB
build/all-reviews.js 9.56 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 3.19 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart-frontend.js 8.34 kB
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 873 B
build/atomic-block-components/category-list-frontend.js 466 B
build/atomic-block-components/category-list.js 469 B
build/atomic-block-components/image-frontend.js 1.71 kB
build/atomic-block-components/image.js 1.36 kB
build/atomic-block-components/price-frontend.js 2.13 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 562 B
build/atomic-block-components/rating.js 566 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 390 B
build/atomic-block-components/sku.js 393 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 610 B
build/atomic-block-components/summary-frontend.js 907 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 468 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.48 kB
build/attribute-filter-frontend.js 18.1 kB
build/blocks-checkout.js 21.3 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/checkout-button-frontend.js 1.21 kB
build/cart-blocks/empty-cart-frontend.js 348 B
build/cart-blocks/express-payment-frontend.js 1.59 kB
build/cart-blocks/filled-cart-frontend.js 805 B
build/cart-blocks/items-frontend.js 302 B
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.4 kB
build/cart-blocks/totals-frontend.js 324 B
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.62 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 348 B
build/checkout-blocks/order-note-frontend.js 1.25 kB
build/checkout-blocks/shipping-address-frontend.js 2.72 kB
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB
build/checkout-blocks/terms-frontend.js 1.29 kB
build/checkout-blocks/totals-frontend.js 329 B
build/featured-category.js 7.74 kB
build/handpicked-products.js 6.27 kB
build/legacy-template.js 2.12 kB
build/mini-cart-component-frontend.js 44.4 kB
build/mini-cart-frontend.js 2.34 kB
build/mini-cart.js 5.72 kB
build/price-filter.js 9.65 kB
build/price-format.js 1.37 kB
build/product-categories.js 3.38 kB
build/product-on-sale.js 7.11 kB
build/product-search.js 2.71 kB
build/product-tag.js 6.6 kB
build/products-by-attribute.js 7.71 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.97 kB
build/stock-filter-frontend.js 8.62 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.1 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.03 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.7 kB
build/wc-blocks-editor-style.css 15.7 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.19 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.92 kB
build/wc-blocks-style-rtl.css 21 kB
build/wc-blocks-style.css 21 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Just to note, there is some overlap with #5177 where I've added proper typescript definitions. Should we combine documentation/descriptions and refer to the TS rather than repeating in a doc, or have both?

@github-actions github-actions bot added this to the 6.4.0 milestone Nov 19, 2021
@ralucaStan
Copy link
Contributor Author

Looks good to me. Just to note, there is some overlap with #5177 where I've added proper typescript definitions. Should we combine documentation/descriptions and refer to the TS rather than repeating in a doc, or have both?

I think there is some extra info in the docs and it might be worth keeping both. Also, as the payment gateways are a topic of interest it might help having this overview in the docs for somebody who just wants to learn more. We can reconsider later.

@ralucaStan ralucaStan merged commit e18bbfe into trunk Nov 22, 2021
@ralucaStan ralucaStan deleted the add/5013-loading-component branch November 22, 2021 09:41
@Aljullu Aljullu added category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. type: enhancement The issue is a request for an enhancement. block: checkout Issues related to the checkout block. labels Nov 22, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pass a loading component for payment methods to use via the payment method interface
3 participants