This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Move FormattedMonetaryAmount to the components package
#11230
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
opr
added
status: needs review
type: enhancement
woocommercebot
requested review from
a team and
tarhi-saad
and removed request for
a team
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
assets/js/base/components/index.ts
|
|
Size Change: -18.2 kB (-1%) Total Size: 1.54 MB
ℹ️ View Unchanged
|
tarhi-saad
reviewed
Oct 17, 2023
There was a problem hiding this comment.
Thank you, @opr, for working on this PR! The code looks good. There is only one issue with the last testing step:
- Repeat steps 5, 6, 7 but with the
All Products block.
The All Products block doesn't show up on the front-end, and the browser console shows the following error:
Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at getProps (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8484)
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11961
at NodeList.forEach (<anonymous>)
at i (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11937)
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:7951
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8013
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8367
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8517
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8521
I encountered the same problem with the released version of the Woo Blocks plugin. Therefore, I believe this error isn't tied to the modifications in this PR. Can you guide me on how to proceed with the final testing step?
opr
force-pushed
the
update/move-formatted-monetary-amount
branch
from
3aba694
to
dd73a5f
Compare
| import type { ReactElement, ReactNode } from 'react'; | ||
| import type { Currency } from '@woocommerce/price-format'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './style.scss'; | ||
| import FormattedMonetaryAmount from '../../../../components/formatted-monetary-amount'; |
There was a problem hiding this comment.
For my learning why we're not able to import this as below?
import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
There was a problem hiding this comment.
That's because it causes a circular dependency, since this file is in the @woocommerce/blocks-checkout package, loading from the @woocommerce/blocks-components package will cause the packages/components/index.js file to load, which in turn loads packages/components/checkbox-list which in turn imports CheckboxControl from packages/checkout/components which in turn loads packages/checkout/components/totals/item/index.tsx 😁
Hope that's easy to understand, if not feel free to load the packages/checkout/components/totals/item/index.tsx file and follow the dependency as if it were being loaded from the components package (packages/components/index.js) and see where it leads you.
There was a problem hiding this comment.
Gotcha! Thank you for detailed explanation. 🙂
opr
force-pushed
the
update/move-formatted-monetary-amount
branch
from
dd73a5f
to
407f175
Compare
tarhi-saad
approved these changes
Oct 18, 2023
There was a problem hiding this comment.
The
All Products blockdoesn't show up on the front-end, and the browser console shows the following error:
Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at getProps (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8484) at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11961 at NodeList.forEach (<anonymous>) at i (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11937) at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:7951 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8013 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8367 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8517 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8521
I encountered the same problem with the released version of the Woo Blocks plugin. Therefore, I believe this error isn't tied to the modifications in this PR. Can you guide me on how to proceed with the final testing step?
I think this bug was fixed yesterday in this PR: #11273. I was able to do the last testing step successfully! It looks good for me!
github-actions
bot
added
status: ready to merge
and removed
status: needs review
labels
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
This PR is based on #11214 (update/checkbox-component)
Moves the
FormattedMonetaryAmountto the components package and updates imports used across the project to reflect the new location:ProductSaleBadgerenderPackageRateOptioninShippingRatesControlPackageTotalsFooterItemPriceSliderProductPricecheckout-pickup-options-blockcheckout-shipping-method-blockcheckout-shipping-methods-blockTotalsItem(This is not imported from@woocommerce/blocks-componentsbut it does use a relative import because of circular dependecies)Why
As more developers integrate their extensions with WooCommerce Blocks, the case for reusing components grows. Rather than recreating components developers can access
wc.blocksComponentsand get the ones we need.Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Filter by PriceandProducts (Beta)blocks to a page on your site.All Products block.Screenshots or screencast
N/A
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog