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.

Sign up for GitHub

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

Jump to bottom

fix(ras-acc): correct spacing issue around saved credit cards #1980

Merged
merged 2 commits into from
Nov 29, 2024
Merged

fix(ras-acc): correct spacing issue around saved credit cards #1980

merged 2 commits into from
Nov 29, 2024

Conversation

laurelfulford
Copy link
Contributor

All Submissions:

Changes proposed in this Pull Request:

This PR fixes some spacing between elements when at least one credit card has been saved.

Just a warning: the styles in this PR ended up kind of funky because different payment options treat the same elements slightly differently (like placing them in slightly different spots in the markup).

See 1207817176293825-as-1208840400972712

How to test the changes in this Pull Request:

  1. Set up both Stripe and WooPay as payment options, so both can be tested.
  2. Set up a page with a regular product, and a donation block with at least One-Time and Monthly donations enabled.
  3. Under the Reader Revenue settings, enable the checkbox for the reader to pay the transaction fees.
  4. In an incognito window, run a few transactions as the reader, saving at least one credit card per payment processor.
  5. Run a donation transaction, and see how the radio-radio-checkbox version of the form looks for each payment processor:

CleanShot 2024-11-28 at 17 07 23

CleanShot 2024-11-28 at 17 07 34

  1. Apply this PR and run npm run build.
  2. Run through a few different transactions and make sure the spacing looks good in all cases. First run a simple product transaction and check the spacing with the saved credit card and new credit card fields opened for both payment providers -- this will show the 'Save credit card info' checkbox:

CleanShot 2024-11-28 at 17 08 44

CleanShot 2024-11-28 at 17 08 56

CleanShot 2024-11-28 at 17 09 08

CleanShot 2024-11-28 at 17 09 20

  1. Run a one-time donation and check the same spacing -- this will show a 'Save credit card info' and 'Pay transaction fees' checkbox:

CleanShot 2024-11-28 at 17 09 42

CleanShot 2024-11-28 at 17 10 02

CleanShot 2024-11-28 at 17 10 15

CleanShot 2024-11-28 at 17 10 25

  1. Run a monthly donation and check the same spacing -- this will show just the 'Pay transaction fees' checkbox:

CleanShot 2024-11-28 at 17 10 52

CleanShot 2024-11-28 at 17 11 02

CleanShot 2024-11-28 at 17 11 17

CleanShot 2024-11-28 at 17 11 29

  1. Navigate to the Reader Revenue settings and disable the option to collect transaction fees.
  2. Repeat the one-time and monthly donation transactions and confirm everything looks okay.
  3. Fire up a fresh incognito window and use the Sign In button to create an account.
  4. Repeat steps 8 - 11 (but without completing transaction so nothing is saved), and make sure everything still looks okay with no saved credit cards.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@laurelfulford laurelfulford requested a review from a team as a code owner November 29, 2024 01:16
@laurelfulford
Copy link
Contributor Author

@thomasguillot I just wanted to flag this one for you in case anything looks off. There isn't a mockup of where the credit card form is hidden, and we were experiencing some funky spacing (especially with the checkboxes visible).

Unfortunately the slightly different markup/treatment of the elements between the two payment gateways makes the CSS a bit of a pain 😬 I hope everything looks okay!

@thomasguillot
Copy link
Contributor

LGTM 👍

@laurelfulford laurelfulford merged commit 52a5c57 into trunk Nov 29, 2024
8 checks passed
@laurelfulford laurelfulford deleted the fix/ras-acc-saved-payment-spacing branch November 29, 2024 16:27
@github-actions GitHub Actions
Copy link

Hey @laurelfulford, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

matticbot pushed a commit that referenced this pull request Nov 29, 2024
@semantic-release-bot
chore(release): 4.5.0-alpha.1 [skip ci]
b0b3678 
# [4.5.0-alpha.1](v4.4.0...v4.5.0-alpha.1) (2024-11-29)

### Bug Fixes

* also search for coauthor posts by term slug ([#1954](#1954)) ([49357ff](49357ff))
* **ras-acc:** correct spacing issue around saved credit cards ([#1980](#1980)) ([52a5c57](52a5c57))
* **ras-acc:** fix display issues with Additional Fields ([#1979](#1979)) ([b9390ef](b9390ef))
* **ras-acc:** remove space caused by empty divs ([#1978](#1978)) ([8cb6ead](8cb6ead))

### Features

* add Bluesky support to the Author Profile, List blocks ([#1969](#1969)) ([d26a7e4](d26a7e4))
* add support for Newspack Guest Contributor in HPP blocks ([#1934](#1934)) ([c16849e](c16849e))
* merge RAS-ACC work into trunk ([#1977](#1977)) ([2eeaa89](2eeaa89))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 4.5.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Dec 9, 2024
@semantic-release-bot
chore(release): 4.5.0 [skip ci]
175c966 
# [4.5.0](v4.4.0...v4.5.0) (2024-12-09)

### Bug Fixes

* also search for coauthor posts by term slug ([#1954](#1954)) ([49357ff](49357ff))
* **modal-checkout:** allow all gateway assets ([#1988](#1988)) ([e371e30](e371e30))
* **modal-checkout:** handle paypal ([#1985](#1985)) ([9bb2b8c](9bb2b8c))
* **ras-acc:** correct spacing issue around saved credit cards ([#1980](#1980)) ([52a5c57](52a5c57))
* **ras-acc:** fix display issues with Additional Fields ([#1979](#1979)) ([b9390ef](b9390ef))
* **ras-acc:** remove space caused by empty divs ([#1978](#1978)) ([8cb6ead](8cb6ead))
* remove reCaptcha for WooCommere code from modal checkout ([#1984](#1984)) ([8e250eb](8e250eb))

### Features

* add Bluesky support to the Author Profile, List blocks ([#1969](#1969)) ([d26a7e4](d26a7e4))
* add CSS class to variation buttons for tracking ([#1989](#1989)) ([910e6b1](910e6b1))
* add support for Newspack Guest Contributor in HPP blocks ([#1934](#1934)) ([c16849e](c16849e))
* merge RAS-ACC work into trunk ([#1977](#1977)) ([2eeaa89](2eeaa89))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 4.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@leogermani leogermani leogermani approved these changes

Assignees
No one assigned
Labels
ras-acc testing released on @alpha released [Status] Approved [Status] Needs Design Review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@laurelfulford @thomasguillot @matticbot @leogermani