Replace payment method logos component with the shared component from @woocommerce/onboarding
#9180
+4,329
−1,518
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
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: +92.2 kB (+7%) 🔍 Total Size: 1.42 MB
ℹ️ View Unchanged
|
anu-rock
reviewed
Jul 30, 2024
There was a problem hiding this comment.
Review checklist
| Parameter | Result |
|---|---|
| Approach | ✅ All good |
| Implementation | 👍 Left comments |
| Automated tests | I haven't verified the snapshots |
| Naming | ✅ All good |
| Typing | ✅ All good |
| Code comments | ✅ All good |
| Changelog | ✅ All good |
| Documentation | Not applicable |
| Testing instructions | ✅ All good |
| Manual testing |
Scenarios tested
| Scenario | Result | Screenshot |
|---|---|---|
Switched to this branch, ran npm i, ran npm start, disconnected my account, and opened the Payments page. |
❌ The PM logos component didn't appear normally, likely because of the missing core component (screenshot). Maybe I missed a step? |   |
| import { WooPaymentMethodsLogos } from 'components/payment-method-logos'; | ||
|
|
||
| const WooPaymentMethodsLogos = React.lazy( () => | ||
| import( '@woocommerce/onboarding' ).then( ( module ) => { |
There was a problem hiding this comment.
I'm curious why it has to be imported asynchronously.
There was a problem hiding this comment.
Oh shoot, just saw the post paJDYF-eod-p2 which answers my question. So, we are lazy loading this component for performance reasons.
package-lock.json
Outdated
There was a problem hiding this comment.
There seem to be a massive amount of changes in this file. What's the best way to verify these changes?
| @@ -3,7 +3,7 @@ | |||
| "outDir": "./dist/", // path to output directory | |||
| "sourceMap": true, // allow sourcemap support | |||
| "strict": true, // enable strict type checks as a best practice | |||
| "module": "es6", // specify module code generation | |||
| "module": "esnext", // specify module code generation | |||
There was a problem hiding this comment.
Why did we have to switch to esnext? Do you think it will have impact in rest of the codebase?
There was a problem hiding this comment.
I saw an explanation for this in paJDYF-eod-p2 👍 Nice discussion.
There was a problem hiding this comment.
If we are to go this route, the suggestion in the above post is to use es2020.
There was a problem hiding this comment.
Thank you Anurag. We are still discussing the best approach to handle it.
mordeth
added
the
status: blocked
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fixes #9002
Changes proposed in this Pull Request
This PR replaces the existing duplicate payment method logos component with the shared component from
@woocommerce/onboarding, implemented in the WooCommerce core. By using the shared component, we ensure consistency across the platform and reduce redundancy in the codebase.Testing instructions
Paymentspage.npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge