Use CMS Certificate Title for program LinkedIn "Add to Profile"

[zamanafzal]

What are the relevant tickets?

Follow-up to the certificate-title work (hq#11907, tracked in hq#11938).

Description

The LinkedIn "Add to Profile" link for a program certificate currently sends the program title as the credential name. This changes it to the CMS "Certificate Title" (CertificatePage.product_name), so the certification a learner adds to LinkedIn matches the title printed on the certificate and shown on the certificate page. Falls back to the program title when product_name is unset.

Reuses the getCertificateTitle helper (added in #3512) — the same resolver the certificate page heading, PDF, and metadata already use — so the LinkedIn name stays consistent with the displayed title.

• Programs only. The course branch of getCertificateLinkedInUrl is unchanged.
• This is the unsigned LinkedIn path, used when the viewer is not the cert owner, or when the certificate has no verifiable credential. When the owner has a signed verifiable credential, the LinkedIn name comes from the VC via getVerifiableCredentialLinkedInURL — which mitxonline #3698 updates to carry the same Certificate Title. Both paths therefore converge on the Certificate Title.

Change

frontends/main/src/common/certificateUtils.ts — getCertificateLinkedInUrl, program branch:

getCertificateTitle(
  (certificateData as V2ProgramCertificate).certificate_page?.product_name,
  (certificateData as V2ProgramCertificate).program.title,
)

How to test

Automated:

yarn test frontends/main/src/common/certificateUtils.test.ts

New getCertificateLinkedInUrl tests assert:

• program cert with a CMS product_name distinct from program.title → LinkedIn name param is the product_name;
• empty product_name → falls back to program.title;
• course cert → still uses the course title.

Manual:

1. Pick a program certificate whose CMS "Certificate Title" (product_name) differs from the program title (e.g. program title … MicroMasters, Certificate Title … MicroMasters Certificate).
2. Open its certificate page at /certificate/program/<uuid> and confirm the heading shows the Certificate Title.
3. Click Share → LinkedIn / Add to profile.
4. Inspect the LinkedIn "Add to Profile" URL (address bar, or right-click the option → copy link): the name= param should be the Certificate Title, not the bare program title.
5. (Most convincing) Change the "Certificate Title" in the MITx Online Wagtail admin to a distinct value, publish, reload the page, and confirm the LinkedIn name= follows the new title — proving it reads the CMS field live.

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Pull request overview

Updates the program-certificate LinkedIn “Add to Profile” URL generation to prefer the CMS “Certificate Title” (certificate_page.product_name) over the program title, to better align what learners add to LinkedIn with what’s shown on the certificate experience.

Changes:

• Program branch of getCertificateLinkedInUrl now uses getCertificateTitle(product_name, program.title) (course branch unchanged).
• Adds unit tests covering program product-name preference, fallback behavior, and course behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
frontends/main/src/common/certificateUtils.ts	Uses CMS certificate_page.product_name (via getCertificateTitle) for program LinkedIn credential name, with fallback to program title.
frontends/main/src/common/certificateUtils.test.ts	Adds tests asserting the LinkedIn name param behavior for program + course certificates.

[ahtesham-quraish]

the repeated (certificateData as V2ProgramCertificate) casts are a bit noisy; consider narrowing once to a local const program = certificateData as V2ProgramCertificate at the top of the program branch and reusing it for both certificate_page?.product_name and program.title for readability.

[ahtesham-quraish]

Looks good and Left few comments