Fix: Display donation receipt in Form Grid modal after offline gateway redirect

[JoshuaHungDinh]

Resolves: GIVE-931

Description

DonationFormBlock Reference: https://github.com/impress-org/givewp/blob/develop/src/DonationForms/Blocks/DonationFormBlock/resources/app/Components/ModalForm.tsx

Problem:
The issue occurs when offline gateways (e.g., Stripe Payment Element) trigger a page refresh after a donation is processed. This refresh happens when the gateway redirects the user back to the initial page, causing any open modals (including the modal rendering the donation receipt) to close.

Solution:
To resolve this, the PR introduces the following approach:

An event listener that checks the redirect/donation completed status on page load via the URL search params was included. If the user is coming from a redirected gateway (e.g., after completing the donation), the appropriate modal is programmatically re-opened by matching givewp-embed-id from the url params.

Affects

Donation Form Grid.

Visuals

https://www.loom.com/share/66a45b64fa2c4e31bbf9280acfc2458d?sid=f63b847a-097f-4a28-9bf5-6f242da06184

Testing Instructions

• Create a page with the Donation Form Grid block.
• Verify regular donations process, complete and show the correct receipt view within the modal.
• Process a donation specifically with an Offline Gateway (Ex. Stripe payment element), verify the receipt view also displays in the modal and completing a donation. The modal should reopen automatically for the user after completing the donation process.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Self Review of code and UX completed

[jonwaldstein]

@JoshuaHungDinh did you see my note in Jira about the missing data attribute? i'm curious if you looked into that and if going that route would simplify this.

[JoshuaHungDinh]

@jonwaldstein I looked into the givewp-embed-id but was unable to fix the issue by including it on the anchor. I found that stripe payment element is hooked into afterCreatePayment during the form submission. From that hook stripe.confirmPayment is being called and handling the redirect.

I was looking into some information that suggests we might be able to intercept the redirect & localize it within a container but ultimately put this PR together based off the ModalForm since we were at the end of the sprint.

[jonwaldstein]

@JoshuaHungDinh okay, sounds like the form grid is built differently than our form block. One more thing to test would be the form grid alongside a donation form block on a page to make sure the modal is opening the correctly submitted form.

The gateway api provides a success url with params to notify the page of a completed donation, show the confirmation page and which element/embed was used to donate.

Some other params you might also want to check for:

• givewp-event = donation-completed
• givewp-listener = show-donation-confirmation-receipt