From edf672ac13c20527ea5e1767f5b145bcee93f802 Mon Sep 17 00:00:00 2001
From: jenniw <JenniWhitman@users.noreply.github.com>
Date: Tue, 16 Jan 2024 15:15:57 -0500
Subject: [PATCH] Explain Course Formats (#2054)

* updated components with links. need actual links.

* add in new links and archive

* program links

* fix fmt
---
 .../scss/product-page/product-details.scss    |  9 +++++
 .../public/src/components/CourseInfoBox.js    | 35 +++++++++++++++++--
 .../public/src/components/ProgramInfoBox.js   | 22 ++++++++++--
 3 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
index 0a91a68456..3f4bc41445 100644
--- a/frontend/public/scss/product-page/product-details.scss
+++ b/frontend/public/scss/product-page/product-details.scss
@@ -336,6 +336,14 @@ body.new-design {
             width: auto;
             flex-grow: 1;
 
+            .pacing-faq-link {
+              color: $home-page-dark-blue;
+              text-decoration-line: underline;
+              float: right;
+              padding: 0;
+              font-size: smaller;
+            }
+
             .enrollment-effort {
               font-size: smaller;
             }
@@ -346,6 +354,7 @@ body.new-design {
               margin-left: .5rem;
               padding: 3px;
               font-weight: normal;
+
             }
           }
           .more-enrollment-info {
diff --git a/frontend/public/src/components/CourseInfoBox.js b/frontend/public/src/components/CourseInfoBox.js
index b882c42cea..e02b195984 100644
--- a/frontend/public/src/components/CourseInfoBox.js
+++ b/frontend/public/src/components/CourseInfoBox.js
@@ -131,9 +131,38 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
               </div>
               <div className="enrollment-info-text">
                 {course.page.length}
-                {run && run.is_self_paced ? (
-                  <span className="badge badge-pacing">SELF-PACED</span>
-                ) : null}
+                {isArchived ? (
+                  <>
+                    <span className="badge badge-pacing">ARCHIVED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21995114519067-What-are-Archived-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                ) : run && run.is_self_paced ? (
+                  <>
+                    <span className="badge badge-pacing">SELF-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994872904475-What-are-Self-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    <span className="badge badge-pacing">INSTRUCTOR-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994938130075-What-are-Instructor-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                )}
+
                 {course.page.effort ? (
                   <>
                     <div className="enrollment-effort">
diff --git a/frontend/public/src/components/ProgramInfoBox.js b/frontend/public/src/components/ProgramInfoBox.js
index c473e9ba3e..f964e015a5 100644
--- a/frontend/public/src/components/ProgramInfoBox.js
+++ b/frontend/public/src/components/ProgramInfoBox.js
@@ -133,8 +133,26 @@ export default class ProgramInfoBox extends React.PureComponent<ProgramInfoBoxPr
               <div className="enrollment-info-text">
                 {program.page.length}
                 {run && run.is_self_paced ? (
-                  <span className="badge badge-pacing">SELF-PACED</span>
-                ) : null}
+                  <>
+                    <span className="badge badge-pacing">SELF-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994872904475-What-are-Self-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    <span className="badge badge-pacing">INSTRUCTOR-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994938130075-What-are-Instructor-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                )}
                 {program.page.effort ? (
                   <>
                     <div className="enrollment-effort">