fix(product-pages): gate program certificate row on certificate_available

The program InfoBox rendered "Certificate: Program certificate on
completion" unconditionally, claiming a certificate could be earned even
for a program with no paid enrollment mode (free-only, or no modes). Gate
the row on `program.certificate_available` — the API's own signal, computed
server-side as `any(mode.requires_payment)` — the same flag
MitxOnlineResourceCard already trusts.

Visibility stays independent of product data: a paid mode with no
purchasable product still shows its (odd) certificate card. That's a
bad-data combination we deliberately don't police in the frontend.

Pin the existing cert-row tests to certificate_available (the factory
default is a random boolean).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ChristopherChudzicki

frontends/main/src/app-pages/ProductPages/InfoBoxProgram.test.tsx

@@ -53,6 +53,7 @@ describe("InfoBoxProgram — both offering", () => {
         makeMode({ requires_payment: true }),
       ],
       products: [makeProduct()],
+      certificate_available: true,
     })
 
     renderWithProviders(<InfoBoxProgram program={program} />)
@@ -72,6 +73,7 @@ describe("InfoBoxProgram — paid-only offering", () => {
     const program = makeProgram({
       enrollment_modes: [makeMode({ requires_payment: true })],
       products: [makeProduct()],
+      certificate_available: true,
     })
 
     renderWithProviders(<InfoBoxProgram program={program} />)
@@ -161,9 +163,14 @@ describe("InfoBoxProgram — grid structure", () => {
 describe("InfoBoxProgram — no offering", () => {
   test("data-boxes=1 and no section divider when there's nothing to enroll in", async () => {
     setupAuth()
+    // Paid mode but no purchasable product: nothing enrollable, so one box and
+    // no divider. certificate_available tracks the paid mode independently of
+    // products, so the certificate row still renders — we don't police this
+    // bad-data combination.
     const program = makeProgram({
       enrollment_modes: [makeMode({ requires_payment: true })],
       products: [],
+      certificate_available: true,
     })
 
     renderWithProviders(<InfoBoxProgram program={program} />)

frontends/main/src/app-pages/ProductPages/ProductSummary.test.tsx

@@ -1109,7 +1109,7 @@ describe("ProgramSummary", () => {
   })
 
   test("shows the certificate row and no price row", () => {
-    const program = factories.programs.program()
+    const program = factories.programs.program({ certificate_available: true })
     renderWithProviders(<ProgramSummary tabletColumns={2} program={program} />)
 
     expect(
@@ -1120,6 +1120,13 @@ describe("ProgramSummary", () => {
     expect(screen.queryByTestId(TestIds.PriceRow)).not.toBeInTheDocument()
   })
 
+  test("hides the certificate row when no certificate is available", () => {
+    const program = factories.programs.program({ certificate_available: false })
+    renderWithProviders(<ProgramSummary tabletColumns={2} program={program} />)
+
+    expect(screen.queryByTestId(TestIds.CertificateRow)).not.toBeInTheDocument()
+  })
+
   test("orders metadata rows as requirements, format, duration, certificate", () => {
     const requirements = new RequirementTreeBuilder()
     const required = requirements.addOperator({ operator: "all_of" })
@@ -1137,6 +1144,7 @@ describe("ProgramSummary", () => {
         programs: { required: [], electives: [] },
       },
       req_tree: requirements.serialize(),
+      certificate_available: true,
     })
     const course = makeCourse({
       courseruns: [makeRun()],

frontends/main/src/app-pages/ProductPages/ProductSummary.tsx

@@ -715,7 +715,9 @@ const ProgramSummary: React.FC<{
       />
       <ProgramPaceRow courses={courses} data-testid={TestIds.PaceRow} />
       <ProgramDurationRow program={program} data-testid={TestIds.DurationRow} />
-      <CertificateRow data-testid={TestIds.CertificateRow} />
+      {program.certificate_available ? (
+        <CertificateRow data-testid={TestIds.CertificateRow} />
+      ) : null}
     </SummaryRows>
   )
 }