Upgrade donation page #712
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
Enhances the donation page with a richer layout, new acknowledgement component, and styling tweaks to improve user engagement and readability.
- Introduces a reusable
ThankYouBlockfor post-donation messaging - Expands the donation form area with intro text, impact metrics, and testimonials
- Updates service-area and prework-button styling for consistent responsive layout
Reviewed Changes
Copilot reviewed 6 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/donate.tsx | Added ThankYouBlock, SEO description update |
| src/containers/service/layout-03/index.tsx | Reordered and grouped Tailwind classes |
| src/containers/prework-button/index.tsx | Adjusted class ordering in PreworkButton |
| src/containers/donate-form/layout-01/index.tsx | Expanded DonateFormArea with intro, metrics, and testimonials |
| src/components/forms/donate-form.tsx | Updated DonateForm layout, iframe params & styling |
| src/components/common/thank-you-block.tsx | New reusable thank-you component |
Files not reviewed (2)
- apple-developer-merchantid-domain-association: Language not supported
- src/data/authors/james-scott.json: Language not supported
Comments suppressed due to low confidence (3)
src/containers/prework-button/index.tsx:5
- [nitpick] Using a
<button>inside<Link>can confuse assistive tech. Consider using an<a>element styled as a button or wrapping the link around an<a>for proper semantics.
<Link href="https://github.com/Vets-Who-Code/Prework" passHref>
src/components/forms/donate-form.tsx:71
- The iframe
titleis generic (#VWC Donorbox). For screen readers, use a more descriptive title likeVets Who Code Donation Form.
<iframe
src/containers/donate-form/layout-01/index.tsx:19
- The new intro, metrics, and testimonial sections lack automated tests. Consider adding snapshot or integration tests to guard against future regressions.
{/* Intro Section */}
| {/* Intro Section */} | ||
| <div className="tw-mb-10 tw-text-center"> | ||
| {section_title && ( | ||
| <motion.h1 |
There was a problem hiding this comment.
The heading is hard-coded as “Support Our Mission” instead of using the dynamic section_title.title. Consider rendering section_title.title or removing the prop if it's no longer needed.
Copilot uses AI. Check for mistakes.
| @@ -11,27 +11,147 @@ type TProps = TSection & { | |||
| section_title?: SectionTitleType; | |||
| }; | |||
| }; | |||
| const DonateFormArea = ({ data: { section_title } }: TProps) => { | |||
|
|
|||
| const DonateFormArea = ({ data: { section_title }, space }: TProps) => { | |||
There was a problem hiding this comment.
[nitpick] This component combines multiple responsibilities (intro, metrics, form, testimonials). Splitting into smaller subcomponents will improve readability and reuse.
Copilot uses AI. Check for mistakes.
This pull request introduces significant updates to enhance the donation experience and improve the user interface for supporting veterans through coding education. Key changes include the addition of new components, improved layouts, and updated content to better communicate the impact of donations.
New Components and Features:
ThankYouBlockcomponent to display a customizable thank-you message, improving acknowledgment for supporters (src/components/common/thank-you-block.tsx, src/components/common/thank-you-block.tsxR1-R18).src/components/forms/donate-form.tsx, src/components/forms/donate-form.tsxL10-R159).Layout and Content Improvements:
DonateFormAreato include an introductory section with a mission statement, donation impact metrics, and testimonials, providing a more engaging and informative user experience (src/containers/donate-form/layout-01/index.tsx, src/containers/donate-form/layout-01/index.tsxL14-R154).Miscellaneous:
apple-developer-merchantid-domain-associationfile with a new configuration string, likely related to Apple Pay domain association for donations (apple-developer-merchantid-domain-association, apple-developer-merchantid-domain-associationR1).