[DEV-4454] Add download certificate functionality and changeset - #2298
Open
MarBert wants to merge 2 commits into
Open
[DEV-4454] Add download certificate functionality and changeset#2298MarBert wants to merge 2 commits into
MarBert wants to merge 2 commits into
Conversation
MarBert
requested review from
a team,
MarcoPonchia,
Sebastiano-Bertolin and
marcobottaro
as code owners
June 26, 2026 13:00
🦋 Changeset detectedLatest commit: bfc8ec1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
Jira Pull Request LinkThis Pull Request refers to the following Jira issue DEV-4454 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds client-side generation and download of webinar participation certificates (PDF) to the apps/nextjs-website Next.js application, integrating @react-pdf/renderer and extending the card CTA components to support action-based CTAs (not just navigation).
Changes:
- Add
@react-pdf/rendererdependency and implement aCertificateTemplatePDF layout. - Extend
CardsGrid/CtaCardto support CTAonClickhandlers and wire a download action fromCertificatesList. - Add new certificate-related i18n strings in
en.jsonandit.json, plus a changeset entry.
Reviewed changes
Copilot reviewed 8 out of 13 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds @react-pdf/renderer dependency to enable certificate PDF generation. |
| package-lock.json | Locks transitive dependencies introduced by @react-pdf/renderer. |
| apps/nextjs-website/src/messages/it.json | Adds certificate strings (currently needing Italian translations + typo fixes). |
| apps/nextjs-website/src/messages/en.json | Adds certificate strings (minor spacing issue in createdAt). |
| apps/nextjs-website/src/components/templates/CertificateTemplate/CertificateTemplate.tsx | New PDF template used to render the certificate document. |
| apps/nextjs-website/src/components/organisms/CertificatesList/CertificatesList.tsx | Adds download handler and filters webinars to those with available certificates. |
| apps/nextjs-website/src/components/molecules/CardsGrid/CardsGrid.tsx | Extends card props to pass a CTA onClick handler through to CtaCard. |
| apps/nextjs-website/src/components/atoms/CtaCard/CtaCard.tsx | Adds CTA onClick support (button action vs link navigation). |
| .changeset/early-apes-visit.md | Adds a changeset entry for the feature (currently marked as major). |
Comment on lines
+41
to
+48
| const url = URL.createObjectURL(blob); | ||
| const link = document.createElement('a'); | ||
| // eslint-disable-next-line functional/immutable-data | ||
| link.href = url; | ||
| // eslint-disable-next-line functional/immutable-data | ||
| link.download = 'documento.pdf'; | ||
| link.click(); | ||
| URL.revokeObjectURL(url); |
Comment on lines
+75
to
+78
| onClick: () => | ||
| handleDownload( | ||
| user?.attributes.given_name + ' ' + user?.attributes.family_name, | ||
| webinar.title, |
Comment on lines
+79
to
+82
| new Date(certificateCreatedAt || '').toLocaleString('it-IT', { | ||
| dateStyle: 'long', | ||
| timeStyle: 'short', | ||
| }), |
Comment on lines
+63
to
+69
| style={{ | ||
| paddingTop: '-24px', | ||
| fontFamily: 'Titillium Sans Pro', | ||
| fontWeight: 700, | ||
| fontSize: '80px', | ||
| color: palette.text.primary, | ||
| }} |
Comment on lines
+74
to
+80
| style={{ | ||
| paddingTop: '-48px', | ||
| fontFamily: 'Titillium Sans Pro', | ||
| fontWeight: 700, | ||
| fontSize: '36px', | ||
| color: palette.text.primary, | ||
| }} |
Comment on lines
+140
to
+141
| "attended": "Attended the online webinar via PagoPa's DevPortal:" | ||
| } |
Comment on lines
+136
to
+139
| "title": "CERTIFICATE", | ||
| "subtitle": "OF PARTICIPATION", | ||
| "createdAt": "Created at ", | ||
| "certification": "This certificate attests that:", |
Comment on lines
13
to
18
| title: string; | ||
| text: string; | ||
| href?: string; | ||
| onClick?: () => Promise<void>; | ||
| ctaLabel?: string; | ||
| endIcon?: React.ReactNode; |
Comment on lines
23
to
30
| readonly cta?: { | ||
| readonly target?: '_blank' | '_self' | '_parent' | '_top'; | ||
| readonly label: string | ReactNode; | ||
| readonly href?: string; | ||
| readonly onClick?: () => null | Promise<void>; | ||
| readonly variant?: 'text' | 'contained' | 'outlined'; | ||
| readonly endIcon?: ReactNode; | ||
| readonly style?: SxProps; |
Comment on lines
+1
to
+3
| --- | ||
| "nextjs-website": major | ||
| --- |
Contributor
|
This pull request is stale because it has been open for 14 days with no activity. If the pull request is still valid, please update it within 21 days to keep it open or merge it, otherwise it will be closed automatically. |
Contributor
|
This pull request was closed because it has been inactive for 21 days since being marked as stale. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
List of Changes
This pull request introduces a major new feature to the
nextjs-websiteapp: users can now download their webinar participation certificates as PDFs. The implementation leverages the@react-pdf/rendererpackage to generate certificates dynamically, integrates a newCertificateTemplatecomponent, and updates the UI components to support download actions. Additionally, translation files are enhanced to support certificate text in both English and Italian.Certificate Download Functionality:
@react-pdf/rendererpackage as a new dependency to enable PDF generation.CertificateTemplatecomponent using@react-pdf/rendererfor rendering certificate PDFs, including custom fonts and layout.handleDownloadfunction inCertificatesList.tsxto generate and trigger the download of the certificate PDF when the user clicks the CTA.UI Component Updates:
CtaCardandCardsGridcomponents to support anonClickhandler for CTA buttons, enabling actions like downloading certificates in addition to navigation. [1] [2] [3] [4] [5] [6]CertificatesListlogic to correctly filter and display only webinars with available certificates, and to pass the appropriate data to the download handler.Localization Improvements:
Changelog:
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: