[DEV-4358] Add certificates page with grid and alert banner - #2295
Open
MarBert wants to merge 7 commits into
Open
[DEV-4358] Add certificates page with grid and alert banner#2295MarBert wants to merge 7 commits into
MarBert wants to merge 7 commits into
Conversation
MarBert
requested review from
MarcoPonchia,
Sebastiano-Bertolin and
marcobottaro
as code owners
June 25, 2026 08:35
🦋 Changeset detectedLatest commit: 79f7c1f 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-4358 |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new “Webinar certificate list” feature to the Next.js website, gated behind the existing isWebinarHeartbeatEnabled feature flag, and refactors some UI components to support the new page and alert/banner use cases.
Changes:
- Introduces
/profile/certificate-listand a newCertificatesListorganism to render certificate cards plus an informational banner. - Adds a reusable
GenericAlertBannerand refactorsLiveWebinarWarningBannerto use it. - Extends
CtaCard/CardsGridfor richer CTA/icon/content styling and adds i18n strings + profile menu entry.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/nextjs-website/src/messages/it.json | Adds Italian strings for the certificate list page. |
| apps/nextjs-website/src/messages/en.json | Adds English strings for the certificate list page. |
| apps/nextjs-website/src/lib/webinars/webinarSubscriptions.ts | Extends WebinarSubscription with certificateCreatedAt. |
| apps/nextjs-website/src/config.ts | Adds a conditional profile menu entry for the certificate list. |
| apps/nextjs-website/src/components/templates/WebinarDetailTemplate/WebinarDetailTemplate.tsx | Gates the certificate banner behind the feature flag. |
| apps/nextjs-website/src/components/organisms/WebinarsTemplate/WebinarsTemplate.tsx | Gates the certificate banner on the webinars list behind the feature flag. |
| apps/nextjs-website/src/components/organisms/CertificatesList/CertificatesList.tsx | New UI for rendering certificate cards and an info banner. |
| apps/nextjs-website/src/components/molecules/LiveWebinarWarningBanner/LiveWebinarWarningBanner.tsx | Refactors warning banner to use GenericAlertBanner. |
| apps/nextjs-website/src/components/molecules/GenericAlertBanner/GenericAlertBanner.tsx | Adds reusable dismissible warning banner component. |
| apps/nextjs-website/src/components/molecules/CardsGrid/CardsGrid.tsx | Extends card model to support end icons, images, and per-card styling. |
| apps/nextjs-website/src/components/atoms/CtaCard/CtaCard.tsx | Extends CTA button to support endIcon and custom styling; adds cardContentStyle. |
| apps/nextjs-website/src/app/[locale]/profile/certificate-list/page.tsx | Adds the new route and gates it behind the feature flag. |
| .changeset/wild-crews-rule.md | Declares a minor release for nextjs-website. |
Comment on lines
+131
to
+134
| "title": "Attestati Webinar", | ||
| "warning": "Perchè non vedo il mio attestato?", | ||
| "cta": "Scarica attestato", | ||
| "body": "Gli attestati dei webinar prima di maggio 2026 non sono disponibli.<br></br><br></br> Attenzione che per ottenere gli attestati dei nuovo webinar devi attivare il monitoraggio nella sezione <strong>Consensi e privacy</strong> e guardare almeno l’80% del webinar" |
Comment on lines
+131
to
+134
| "title": "Webinar Certifications", | ||
| "warning": "Why can't I see my certificate?", | ||
| "cta": "Download certificate", | ||
| "body": "Certificates for webinars prior to May 2026 are not available.<br></br><br></br>Please note that to obtain certificates for the new webinars, you must enable tracking in the <strong>Consents and privacy</strong> section and watch at least 80% of the webinar" |
Comment on lines
+31
to
+34
| width: '100%', | ||
| backgroundColor: palette.primaryAction.selected, | ||
| border: `1px ${palette.primaryAction.selected}`, | ||
| borderRadius: 2, |
Comment on lines
+21
to
+28
| const { webinarSubscriptions } = useUser(); | ||
|
|
||
| const subscribedWebinars = webinarSubscriptions?.map((webinar) => { | ||
| return webinar.certificateCreatedAt && webinar.webinarId; | ||
| }); | ||
| const filteredWebinars = webinars.filter((webinar) => { | ||
| return subscribedWebinars?.includes(webinar.slug) ? webinar : null; | ||
| }); |
Comment on lines
+38
to
+43
| <Box | ||
| borderRadius={'16px'} | ||
| component='img' | ||
| width={'100%'} | ||
| src={webinar.imagePath} | ||
| /> |
Comment on lines
+48
to
+54
| ctaStyle: { | ||
| fontWeight: 700, | ||
| fontSize: '16px', | ||
| letterSpacing: '0.3px', | ||
| fontStyle: 'bold', | ||
| pl: '0', | ||
| }, |
Comment on lines
+93
to
+98
| { | ||
| t.rich('profile.certificateList.body', { | ||
| strong: (chunks) => <strong>{chunks}</strong>, | ||
| br: () => <br></br>, | ||
| }) as string | ||
| } |
Comment on lines
+1
to
+15
| import React from 'react'; | ||
| import CertificatesList from '@/components/organisms/CertificatesList/CertificatesList'; | ||
| import { isWebinarHeartbeatEnabled } from '@/config'; | ||
| import { getVisibleInListWebinars } from '@/lib/api'; | ||
|
|
||
| const CertificateListPage = async (props: { | ||
| params: Promise<{ locale: string }>; | ||
| }) => { | ||
| const { locale } = await props.params; | ||
| const webinars = await getVisibleInListWebinars(locale); | ||
|
|
||
| return isWebinarHeartbeatEnabled ? ( | ||
| <CertificatesList webinars={webinars} /> | ||
| ) : null; | ||
| }; |
Comment on lines
21
to
26
| export type WebinarSubscription = { | ||
| readonly webinarId: string; | ||
| readonly username: string; | ||
| readonly createdAt: Date; | ||
| readonly certificateCreatedAt?: Date; | ||
| }; |
Comment on lines
+30
to
+36
| const cardsToShow = filteredWebinars.map((webinar) => { | ||
| return { | ||
| title: webinar.title, | ||
| text: '', | ||
| useSrc: false, | ||
| ctaLabel: t('profile.certificateList.cta'), | ||
| endIcon: <DownloadIcon />, |
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 new Webinar Certificate List feature to the Next.js website, which is conditionally displayed based on a feature flag. It also includes several UI enhancements to the card and alert components, making them more flexible and reusable. The changes ensure that the certificate list is only accessible when the relevant feature flag is enabled and integrates the new page into the profile menu. Additionally, the codebase sees improvements in component composition and internationalization support.
Webinar Certificate List Feature:
/profile/certificate-list) that displays certificates for webinars a user has attended, only if theisWebinarHeartbeatEnabledfeature flag is active. The page uses a newCertificatesListcomponent to filter and show relevant webinars, and is added to the profile menu conditionally. [1] [2] [3] apps/nextjs-website/src/app/[locale]/profile/certificate-list/page.tsxR1-R17)Component and UI Enhancements:
CtaCardandCardsGridcomponents to support additional styling and icon options, making them more versatile for use cases like the certificate cards. [1] [2] [3] [4] [5] [6] [7] [8] [9]GenericAlertBannercomponent for consistent alert messaging, and refactoredLiveWebinarWarningBannerto use it. [1] [2] [3] [4]Feature Flag Integration:
isWebinarHeartbeatEnabledflag is true, both in the webinars template and webinar detail template. [1] [2] [3]Internationalization:
Data Model Update:
WebinarSubscriptiontype to include an optionalcertificateCreatedAtfield, supporting the logic for displaying available certificates.Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: