Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: WooPay 'Save my info' spacing #7405

Merged
merged 6 commits into from
Oct 13, 2023
Merged

Conversation

frosso
Copy link
Contributor

@frosso frosso commented Oct 6, 2023

Changes proposed in this Pull Request

I noticed that WooPay's "Save my info" addins unnecessary spacing (via margins) to the checkout pages when no content is displayed.
As good citizens of the checkout pages, fixing to ensure consistent behavior compared to when WooPay is disabled or not available.

Cannot be tested via UTs.

Before/After - WooPay disabled - spacing is consistent:
Screenshot 2023-10-06 at 12 19 30 PM

Before - no payment method needed - "Save my info" is adding a margin-top:
Screenshot 2023-10-06 at 12 24 47 PM

Before - non-CC payment method is selected (or existing WooPay user is being used) - "Save my info" is adding a margin-top:
Screenshot 2023-10-04 at 3 41 03 PM

After - non-CC payment method is selected - "Save my info" is no longer adding a margin-top:
Screenshot 2023-10-04 at 3 39 07 PM

Before/After - CC Payment method is selected:
Screenshot 2023-10-04 at 3 39 19 PM

Testing instructions

  • Enable WooPay in the WC Payments settings
  • Enable other non-WooPayments payment methods (e.g.: cash on delivery)
  • Add a simple product to the cart, go to checkout
  • Select CC as a payment method
  • Enter a valid WooPay email
    • "Save my info" no longer displayed, notice spacing above "pay now" and below the payment methods
  • Enter a non-existing WooPay email
    • "Save my info" is displayed, notice the spacing
  • Select a non-CC payment method (e.g.: cash on delivery)
    • "Save my info" no longer displayed and no longer adding a margin-top

  • Run npm run changelog to add a changelog file, choose patch to 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.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@@ -6,7 +6,21 @@
display: flex;
flex-direction: column;
gap: $gap;
margin-top: $gap-large;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This margin was applied even when the "save my info" container didn't have any content.

@botwoo
Copy link
Collaborator

botwoo commented Oct 6, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7405 or branch name fix/woopay-save-my-info-styles in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

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:

  • Latest commit: 7bf94f7
  • Build time: 2023-10-13 07:22:55 UTC

Note: the build is updated when a new commit is pushed to this PR.

@frosso frosso marked this pull request as ready for review October 6, 2023 10:27
@@ -106,10 +115,6 @@
.save-details-form.place-order {
margin-top: $gap-smaller;
}

.woopay-save-new-user-container + .place-order {
margin-top: $gap-large !important;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removing uncommented !important is always good.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 6, 2023

Size Change: +139 B (0%)

Total Size: 1.43 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 36.4 kB +24 B (0%)
release/woocommerce-payments/dist/index.css 36.5 kB +24 B (0%)
release/woocommerce-payments/dist/settings-rtl.css 9.07 kB +21 B (0%)
release/woocommerce-payments/dist/settings.css 9.07 kB +20 B (0%)
release/woocommerce-payments/dist/woopay-rtl.css 3.87 kB +25 B (+1%)
release/woocommerce-payments/dist/woopay.css 3.87 kB +25 B (+1%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.04 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.8 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.8 kB
release/woocommerce-payments/dist/blocks-checkout.js 75.2 kB
release/woocommerce-payments/dist/checkout-rtl.css 440 B
release/woocommerce-payments/dist/checkout.css 441 B
release/woocommerce-payments/dist/checkout.js 29 kB
release/woocommerce-payments/dist/index.js 284 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 2.88 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.3 kB
release/woocommerce-payments/dist/multi-currency.css 2.88 kB
release/woocommerce-payments/dist/multi-currency.js 55 kB
release/woocommerce-payments/dist/order-rtl.css 676 B
release/woocommerce-payments/dist/order.css 679 B
release/woocommerce-payments/dist/order.js 41.1 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 690 B
release/woocommerce-payments/dist/payment-gateways.css 692 B
release/woocommerce-payments/dist/payment-gateways.js 38.6 kB
release/woocommerce-payments/dist/payment-request-rtl.css 146 B
release/woocommerce-payments/dist/payment-request.css 146 B
release/woocommerce-payments/dist/payment-request.js 13.1 kB
release/woocommerce-payments/dist/product-details.js 898 B
release/woocommerce-payments/dist/settings.js 234 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.6 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 22 kB
release/woocommerce-payments/dist/upe_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_checkout.css 441 B
release/woocommerce-payments/dist/upe_checkout.js 34.1 kB
release/woocommerce-payments/dist/upe_split_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_split_checkout.css 441 B
release/woocommerce-payments/dist/upe_split_checkout.js 34.6 kB
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js 37 kB
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css 1.8 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css 1.8 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 40.9 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css 1.8 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.css 1.8 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.js 42.5 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 146 B
release/woocommerce-payments/dist/woopay-express-button.css 146 B
release/woocommerce-payments/dist/woopay-express-button.js 52.1 kB
release/woocommerce-payments/dist/woopay.js 71.8 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.56 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.63 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

@frosso frosso requested review from a team and mdmoore and removed request for a team October 6, 2023 10:52
@frosso frosso self-assigned this Oct 12, 2023
Copy link
Member

@mdmoore mdmoore left a comment

Choose a reason for hiding this comment

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

LGTM! 🚢

@frosso frosso enabled auto-merge October 13, 2023 07:18
@frosso frosso added this pull request to the merge queue Oct 13, 2023
Merged via the queue into develop with commit f26f20c Oct 13, 2023
27 checks passed
@frosso frosso deleted the fix/woopay-save-my-info-styles branch October 13, 2023 07:42
RadoslavGeorgiev pushed a commit that referenced this pull request Oct 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants