Add: Test Mode badge to Classic Checkout, Pay for Order, and Add Payment Method #9495
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: +454 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
danielmx-dev
requested review from
a team and
frosso
and removed request for
a team
danielmx-dev
changed the title
|
After reviewing my own screenshots I noticed that the badge looked a bit off, so I just pushed a commit to vertically center it.
Despite looking a bit off in the description screenshots, the badge should be properly centered now during testing. |
frosso
previously requested changes
Sep 30, 2024
|
|
||
| if ( is_checkout() || is_add_payment_method_page() ) { | ||
| if ( WC_Payments::mode()->is_test() ) { | ||
| $test_mode_badge = '<span class="test-mode badge">Test Mode</span>'; |
There was a problem hiding this comment.
We'll need to use the __() i18n wrapper, here
Updated to have i18n wrapper, added 8px spacing in 7b273a6 .
Re-assigning for internal review, as discussed in team meeting. |
frosso
requested review from
frosso and
a team
and removed request for
frosso and
a team
frosso
requested review from
frosso,
a team and
gpressutto5
and removed request for
frosso and
a team
|
@danielmx-dev @frosso FYI paJDYF-foh-p2#comment-26617 |
gpressutto5
requested changes
Oct 14, 2024
… is not enough space
|
I pushed an update to push the badge if there is not horizontal space.
If there's enough space the badge will appear next to the payment method title |
|
There are some themes that do not hide the radio button like Storefront does (e.g. twenty twenty-four), which was causing issues with the layout. I have updated the styles to make sure the styles look good in that scenario.
Since the payment methods other than card won't use the badge, I won't apply any of the new complex styles on them, to keep things simpler. |
|
The alignment of the title was a bit off so I added a couple of commits to fix it. It should be fine now. Storefront: Twenty twenty-four Twenty twenty-two |
6 tasks
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 #9487
Changes proposed in this Pull Request
Testing Instructions - Prerequisites
Testing Instructions - Checkout
Testing Instructions - Add Payment Method
Testing Instructions - Pay for order
Testing Instructions - Regression
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