Fix: Receipt header heading and description nested elements.

[gilbert-hernandez]

Resolves GIVE-3061

Description

Receipt header headings and descriptions added nested paragraph elements inside of the h1 and existing p tags after altering the settings for the heading and its description. This

Affects

The confirmation receipt heading in the visual builder and frontend.

Visuals

Here is the existing video of the problem: https://www.loom.com/share/c0b47c14211b40b5a5c491b5642ceada

Testing Instructions

Recreate the problem and ensure that the nested paragraph tags are stripped. The confirmation receipt header should use the correct styles after the content is altered from the default string.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[jonwaldstein]

@gilbert-hernandez i'd like to suggest a different approach. Although this will sort of fix the issue, it will hinder the intended flexibility of these fields. The idea here is customers can use the rich text field to edit the heading and description fields for the donation confirmation - but as you can see we hardcoded the tagName which kind of defeats the purpose of using a rich text 😏

People may want to add additional information to the donation confirmation that should actually render whatever tags they want to use (including p tags)

So what I would suggest, is we make these both wrapped in divs and let the rich text editor determine their tag. Then, we can update the initial styling here to target any tag. (people can always use custom css later to get specific).

I also don't like the fact we are hardcoding an h1 anyway.

We did something similar with the styling of the Form Header

Suggested change

	<Interweave tagName="h1" className="receipt-header-heading" content={stripWrappingParagraph(heading)} />
	<Interweave tagName="p" className="receipt-header-description" content={stripWrappingParagraph(description)} />
	<Interweave tagName="div" className="receipt-header-heading" content={heading} />
	<Interweave tagName="div" className="receipt-header-description" content={description} />

[gilbert-hernandez]

@jonwaldstein

That makes sense. I see now that the heading and description are wysiwyg components and the inline styles there will overrule the default style, which are applied to any child element with this update.

[jonwaldstein]

@gilbert-hernandez yup! thanks for the update.

[jonwaldstein]

@gilbert-hernandez oh one more thing - we typically add @unreleased above an existing @since tag to mark the change. You should be able to add one to this file

[jonwaldstein]

@gilbert-hernandez nice job, your a Give dev now!

2 final requests, otherwise ready for QA 🌈

• Add an @unreleased tag when available
• Update the PR title to reflect the new direction

[gilbert-hernandez]

@gilbert-hernandez nice job, your a Give dev now!

2 final requests, otherwise ready for QA 🌈

• Add an @unreleased tag when available
• Update the PR title to reflect the new direction

@jonwaldstein
About the @unreleased tag in the docblock, the existing docblock for the DonationReceipt function currently says @SInCE 3.0.0. Would this be to replace that @SInCE tag or would it be in addition to that?

UPDATE: Nevermind, I see your additional comments about it.

[jonwaldstein]

@gilbert-hernandez all good, yeah we add those @unreleased tags above the original @since tag with a brief message describing what has been changed. Then when releasing, those @unreleased tags get replaced with the actual release version.