fix: Update Walmart SPOC certificate to display the correct program name

[ahtesham-quraish]

What are the relevant tickets?

https://github.com/mitodl/hq/issues/10565

Description (What does it do?)

For Walmart SPOC certificates - we are using the same template as the UAI programs which leads to an incorrectly generated certificate. We will need to replace "Universal Artificial Intelligence Module" with MIT CTL Supply Chain Education Program. Please note that this is for this SPOC only and should not affect the certificates for the true UAI programs.

We have applied the condition on this part SCx_WM from the course readable_id course-v1:MITxT+CTL.SCx_WM+1T2026

Screenshots (if appropriate):

How can this be tested?

• If you have mitxonline running locally and certificates set up, navigate to http://open.odl.local:8062/certificate/<"course"|"program">/<certificate_id>/pdf

• If not, grab a response from e.g. https://api.mitxonline.mit.edu/api/v2/course_certificates/19d376df-63e3-4924-81ad-722fc8638c57/ and return it in the certificateQueries.courseCertificatesRetrieve() hook queryFn and load http://open.odl.local:8062/certificate/course/19d376df-63e3-4924-81ad-722fc8638c57/

Additional Context

[Copilot]

Pull request overview

Updates certificate rendering logic so the Walmart SPOC course certificates display “MIT CTL Supply Chain Education Program” instead of the UAI program name, while keeping existing UAI certificate behavior intact.

Changes:

• Added a shared getCourseSpocInfo helper to detect the Walmart SPOC course (via readable_id) and derive program/certificate display strings.
• Updated both the PDF certificate route and the HTML certificate page to use the derived program name and adjust badge positioning for SPOC certificates.
• Added frontend test coverage for the Walmart SPOC certificate text, and updated the MitxOnline test factory to include readable_id.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontends/main/src/common/certificateUtils.ts	Adds centralized SPOC detection + derived certificate display fields
frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/route.tsx	Uses SPOC info to render correct program name and tweak badge layout in PDF
frontends/main/src/app/certificate/[certificateType]/[uuid]/page.tsx	Updates metadata generation to use the derived program name/display type
frontends/main/src/app-pages/CertificatePage/CertificatePage.tsx	Updates on-page certificate template to render the derived program name and adjust badge layout
frontends/main/src/app-pages/CertificatePage/CertificatePage.test.tsx	Adds regression test ensuring Walmart SPOC shows MIT CTL program name
frontends/api/src/test-utils/factories/mitxonline.ts	Adds readable_id to course certificate factory for SPOC detection/testing

---

You can also share your feedback on Copilot code review. Take the survey.

[pdpinch]

Sorry, I wasn't clear in my description. We're looking for a single template solution that will work for all cases.

1. Remove the type of certificate from the badge area. There is no longer a desire to differentiate between "module," "course" and "program" certificates (at least, not in this template).

2. The basic text of the certificate should be

This is to certify that
{full name}
has successfully completed all the requirements of
{course/program name}

3. (could be a separate PR) Instead of start and end dates, the certificate should have just one date, the issue date.

[sentry]

Bug: The "Universal Artificial Intelligence" branding is incorrectly removed from all certificates, instead of being conditionally removed only for the specified SPOC, due to missing conditional logic.
_{Severity: HIGH}

Suggested Fix

Implement the conditional logic to check if the certificate's readable_id corresponds to the Walmart SPOC (e.g., contains SCx_WM). Use this condition to pass an isSpoc prop to the certificate components. Then, use the isSpoc prop within the components to conditionally render the certificate's title and description, ensuring the "Universal Artificial Intelligence" text is only removed for the specific SPOC.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: frontends/main/src/app-pages/CertificatePage/CertificatePage.tsx#L527-L533

Potential issue: The implementation removes the "Universal Artificial Intelligence"
branding from all certificates, not just for the intended Walmart SPOC. The pull request
was meant to apply this change conditionally based on the course `readable_id`
containing `SCx_WM`, but the conditional logic was never implemented. Instead, the text
was removed globally in both the React component (`CertificatePage.tsx`) and the PDF
generation route (`pdf/route.tsx`). This is evidenced by the addition of an unused
`isSpoc` prop, which appears to be incomplete scaffolding for the intended feature. This
change contradicts the explicit requirement that it should only affect the specific SPOC
and not other UAI programs.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

[ahtesham-quraish]

Sorry, I wasn't clear in my description. We're looking for a single template solution that will work for all cases.

1. Remove the type of certificate from the badge area. There is no longer a desire to differentiate between "module," "course" and "program" certificates (at least, not in this template).
2. The basic text of the certificate should be

This is to certify that
{full name}
has successfully completed all the requirements of
{course/program name}

3. (could be a separate PR) Instead of start and end dates, the certificate should have just one date, the issue date.

I have incorporated the 1 and 2 point you can see the screenshot please.

[sentry]

Bug: The getCertificateInfo() function is hardcoded to always return "Certificate", causing all certificate types to display this generic label instead of their specific program or course names.
_{Severity: HIGH}

Suggested Fix

The getCertificateInfo() function should be modified to accept the certificate data object as a parameter. Inside the function, extract the readable_id and implement conditional logic to check if it corresponds to the SCx_WM course. Based on this check and the certificate type, return the appropriate display name, restoring the original dynamic behavior for all other certificates while applying the specific branding for the intended course.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: frontends/main/src/common/certificateUtils.ts#L1-L8

Potential issue: The new `getCertificateInfo()` function is implemented to always return
a hardcoded value of `{ displayType: "Certificate" }` and accepts no parameters. This
causes a global regression where all certificate types (e.g., "MicroMasters
Certificate", "XSeries Certificate") are now incorrectly displayed as just
"Certificate". The intended logic to conditionally change the display name for a
specific course (`SCx_WM`) was not implemented. Instead, the dynamic naming for all
other certificates was removed, affecting page titles, badge text, and metadata across
the entire platform.