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

Convert product-elements/price to TypeScript #7683

Merged
merged 84 commits into from
Dec 23, 2022

Conversation

nielslange
Copy link
Member

While solving a merge conflict, I accidentally closed #7534. This is the updated version that solved the previous merge conflict.


Fixes #7092

Currently, the product-elements/price is still written in JS and is using prop-types for type checking. This PR aims to convert product-elements/price to TypeScript.

Testing

User Facing Testing

  1. Create a test page and add the Single Product block to it.
  2. Verify that the Product Price inner block is still visible.
  • Do not include in the Testing Notes

nielslange and others added 15 commits October 31, 2022 17:52
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
…hub.com:woocommerce/woocommerce-blocks into update/7092-convert-product-element-price-to-TS

# Conflicts:
#	assets/js/atomic/blocks/product-elements/price/edit.tsx
…thub.com:woocommerce/woocommerce-blocks into update/7092-convert-product-elements-price-to-TS

# Conflicts:
#	assets/js/atomic/blocks/product-elements/price/attributes.ts
#	assets/js/atomic/blocks/product-elements/price/edit.tsx
#	assets/js/atomic/blocks/product-elements/price/index.ts
#	checkstyle.xml
@nielslange nielslange added type: enhancement The issue is a request for an enhancement. type: cooldown Things that are queued for a cooldown period (assists with planning). labels Nov 15, 2022
@nielslange nielslange self-assigned this Nov 15, 2022
@rubikuserbot rubikuserbot requested a review from a team November 15, 2022 06:30
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7683.zip

@github-actions
Copy link
Contributor

github-actions bot commented Nov 15, 2022

TypeScript Errors Report

Files with errors: 429
Total errors: 2062

⚠️ ⚠️ This PR introduces new TS errors on 3 files:

assets/js/atomic/blocks/product-elements/image/test/block.test.tsx

assets/js/base/components/formatted-monetary-amount/index.tsx

assets/js/blocks/single-product/edit/layout-editor.tsx

@github-actions
Copy link
Contributor

github-actions bot commented Nov 15, 2022

Size Change: +175 B (0%)

Total Size: 1.01 MB

Filename Size Change
build/all-products-frontend.js 11.3 kB +1 B (0%)
build/all-products.js 33.3 kB +31 B (0%)
build/blocks-checkout.js 39.5 kB +12 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.53 kB +8 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB +7 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.25 kB +11 B (+1%)
build/cart-blocks/order-summary-shipping-frontend.js 14.6 kB +7 B (0%)
build/cart-frontend.js 28.1 kB +5 B (0%)
build/cart.js 46.3 kB +12 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB +7 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.25 kB +10 B (+1%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.6 kB +6 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.57 kB +6 B (0%)
build/checkout.js 40.3 kB +7 B (0%)
build/mini-cart-contents.js 16.6 kB -2 B (0%)
build/price-filter-frontend.js 13.6 kB +3 B (0%)
build/price-filter-wrapper-frontend.js 7.01 kB +4 B (0%)
build/price-filter.js 8.37 kB +5 B (0%)
build/product-add-to-cart.js 8.47 kB +1 B (0%)
build/product-image.js 3.94 kB -1 B (0%)
build/product-price-frontend.js 2.18 kB +14 B (+1%)
build/product-price.js 1.54 kB +8 B (+1%)
build/product-tag-list.js 498 B +1 B (0%)
build/reviews-by-category.js 11.2 kB +1 B (0%)
build/reviews-by-product.js 12.3 kB +1 B (0%)
build/single-product-frontend.js 17.3 kB +2 B (0%)
build/single-product.js 9.97 kB +5 B (0%)
build/wc-blocks-vendors.js 62.7 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.7 kB
build/attribute-filter-wrapper-frontend.js 7.67 kB
build/attribute-filter.js 12.3 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.37 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 343 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/checkout-blocks/actions-frontend.js 1.86 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.86 kB
build/checkout-blocks/billing-address-frontend.js 1.12 kB
build/checkout-blocks/contact-information-frontend.js 2 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.93 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.34 kB
build/checkout-blocks/shipping-address-frontend.js 1.11 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 29.4 kB
build/customer-account.js 3.08 kB
build/featured-category.js 13.1 kB
build/featured-product.js 13.3 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.21 kB
build/legacy-template.js 2.84 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 388 B
build/mini-cart-contents-block/footer-frontend.js 2.81 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.27 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 225 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.71 kB
build/product-best-sellers.js 7.58 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 441 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 2.17 kB
build/product-button.js 3.85 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 502 B
build/product-category.js 8.57 kB
build/product-image-frontend.js 2.16 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.9 kB
build/product-query.js 5.94 kB
build/product-rating-frontend.js 1.48 kB
build/product-rating.js 814 B
build/product-sale-badge-frontend.js 1.39 kB
build/product-sale-badge.js 815 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 1.13 kB
build/product-tag.js 8.06 kB
build/product-title-frontend.js 1.59 kB
build/product-title.js 3.31 kB
build/product-top-rated.js 7.82 kB
build/products-by-attribute.js 8.5 kB
build/rating-filter-frontend.js 21.2 kB
build/rating-filter-wrapper-frontend.js 6.19 kB
build/rating-filter.js 7.38 kB
build/reviews-frontend.js 6.88 kB
build/stock-filter-frontend.js 20.8 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/stock-filter.js 8.12 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--cde4eab5-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.82 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-data.js 21.1 kB
build/wc-blocks-editor-style-rtl.css 5.25 kB
build/wc-blocks-editor-style.css 5.25 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.7 kB
build/wc-blocks-style.css 24.7 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

Copy link
Member Author

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

@wavvves and @imanish003 While solving a merge conflict, I accidentally closed #7534. Would you mind reviewing this updated PR again?

assets/js/shared/context/product-data-context.js Outdated Show resolved Hide resolved
@@ -73,7 +73,7 @@ export const getCurrencyFromPriceResponse = (
// Currency data object, for example an API response containing currency formatting data.
currencyData?:
| CurrencyResponse
| Record< string, never >
| Record< string, never | unknown >
Copy link
Member Author

Choose a reason for hiding this comment

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

This part had been changed to prevent a TS error related to the prices attribute in the following section:

Comment on lines +2 to +3
productId?: number;
align?: 'left' | 'center' | 'right';
Copy link
Member Author

Choose a reason for hiding this comment

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

This part had been changed to prevent a TS error in the following section:

Comment on lines +2 to +5
productId?: number;
className?: string;
textAlign?: 'left' | 'center' | 'right';
isDescendentOfQueryLoop?: boolean;
Copy link
Member Author

Choose a reason for hiding this comment

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

The attributes are optional to prevent a TS error in the following section:

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 29, 2022
@nielslange nielslange removed the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 29, 2022
@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added status: stale Stale issues and PRs have had no updates for 60 days. and removed status: stale Stale issues and PRs have had no updates for 60 days. labels Dec 17, 2022
…to-TS

# Conflicts:
#	assets/js/atomic/blocks/product-elements/price/attributes.ts
#	assets/js/atomic/blocks/product-elements/price/block.tsx
#	assets/js/atomic/blocks/product-elements/price/index.ts
#	assets/js/atomic/blocks/product-elements/sale-badge/types.ts
#	checkstyle.xml
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7683.zip

@github-actions
Copy link
Contributor

github-actions bot commented Dec 22, 2022

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7683.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 425
  • Total errors: 2052

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/base/components/product-price/index.tsx

comments-aggregator

…to-TS

# Conflicts:
#	assets/js/blocks/single-product/block.tsx
#	assets/js/blocks/single-product/edit/layout-editor.tsx
#	assets/js/shared/context/product-data-context.tsx
#	checkstyle.xml
…thub.com:woocommerce/woocommerce-blocks into update/7092-convert-product-elements-price-to-TS
@wavvves wavvves self-requested a review December 23, 2022 14:57
Copy link
Contributor

@wavvves wavvves left a comment

Choose a reason for hiding this comment

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

Everything seems to be working properly

@nielslange
Copy link
Member Author

Thanks for your double-review, @wavvves! 🙌

@nielslange nielslange merged commit 285218b into trunk Dec 23, 2022
@nielslange nielslange deleted the update/7092-convert-product-elements-price-to-TS branch December 23, 2022 15:30
@sunyatasattva
Copy link
Contributor

We'll need to revise this, as some of this types are wrong. Too many arguments were made optional, but this causes the component to error out. For example: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/285218ba2664af06c852a47918f7461d51b76c1f/assets/js/base/components/product-price/index.tsx#L160

You can see TypeScript complains and, in fact, if you try it, the component errors out.

Should we add a new issue or reopen the original conversion issue?

@imanish003 imanish003 added this to the 9.3.0 milestone Jan 2, 2023
@imanish003 imanish003 added the skip-changelog PRs that you don't want to appear in the changelog. label Jan 2, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog. type: cooldown Things that are queued for a cooldown period (assists with planning). type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Convert product-elements/price to TypeScript
6 participants