v2 drawer certification updates (#1823)

* update certification display in v2 drawer to match latest designs * don't show price info item if runs have differing data * MicroMasters not Micromasters * if there is no price for the certificate but it's indicated that one is included, display that * if resource is free, includes a certification but has no prices, still display the pill in the info item * generate migration for MicroMasters spelling change * fix certificate pill padding on mobile
mitodl · Nov 15, 2024 · b95a184 · b95a184
1 parent 099c469
commit b95a184
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 92 deletions.
diff --git a/frontends/api/src/generated/v1/api.ts b/frontends/api/src/generated/v1/api.ts
diff --git a/frontends/ol-components/src/components/LearningResourceCard/testUtils.ts b/frontends/ol-components/src/components/LearningResourceCard/testUtils.ts
@@ -67,6 +67,10 @@ const courses = {
       runs: [factories.learningResources.run()],
       free: true,
       certification: true,
+      certification_type: {
+        code: "completion",
+        name: "Certificate of Completion",
+      },
       resource_prices: [
         { amount: "0", currency: "USD" },
         { amount: "49", currency: "USD" },
@@ -77,6 +81,10 @@ const courses = {
       runs: [factories.learningResources.run()],
       free: true,
       certification: true,
+      certification_type: {
+        code: "completion",
+        name: "Certificate of Completion",
+      },
       resource_prices: [
         { amount: "0", currency: "USD" },
         { amount: "99", currency: "USD" },
@@ -125,6 +133,10 @@ const courses = {
       runs: [factories.learningResources.run()],
       free: false,
       certification: true,
+      certification_type: {
+        code: "completion",
+        name: "Certificate of Completion",
+      },
       resource_prices: [],
     }),
   },
@@ -141,13 +153,21 @@ const courses = {
       runs: [factories.learningResources.run()],
       free: false,
       certification: true,
+      certification_type: {
+        code: "completion",
+        name: "Certificate of Completion",
+      },
       resource_prices: [{ amount: "49", currency: "USD" }],
     }),
     withCertificatePriceRange: makeResource({
       resource_type: ResourceTypeEnum.Course,
       runs: [factories.learningResources.run()],
       free: false,
       certification: true,
+      certification_type: {
+        code: "completion",
+        name: "Certificate of Completion",
+      },
       resource_prices: [
         { amount: "49", currency: "USD" },
         { amount: "99", currency: "USD" },

diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.test.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.test.tsx
@@ -65,7 +65,10 @@ describe("Learning resource info section pricing", () => {
 
     screen.getByText("Paid")
     expect(screen.queryByText("Free")).toBeNull()
-    screen.getByText("Certificate included")
+    screen.getByText("Certificate:")
+    screen.getByText(
+      courses.unknownPrice.withCertificate.certification_type.name,
+    )
   })
 
   test("Paid course, no certificate", () => {
@@ -87,7 +90,8 @@ describe("Learning resource info section pricing", () => {
 
     screen.getByText("$49")
     expect(screen.queryByText("Paid")).toBeNull()
-    screen.getByText("Certificate included")
+    screen.getByText("Certificate:")
+    screen.getByText(courses.paid.withCerticateOnePrice.certification_type.name)
   })
 
   test("Paid course, with certificate, price range", () => {
@@ -100,7 +104,10 @@ describe("Learning resource info section pricing", () => {
 
     screen.getByText("$49 – $99")
     expect(screen.queryByText("Paid")).toBeNull()
-    screen.getByText("Certificate included")
+    screen.getByText("Certificate:")
+    screen.getByText(
+      courses.paid.withCertificatePriceRange.certification_type.name,
+    )
   })
 })
 
@@ -158,13 +165,14 @@ describe("Learning resource info section start date", () => {
     })
   })
 
-  test("If data is different, dates are not shown", () => {
+  test("If data is different, dates and prices are not shown", () => {
     const course = courses.multipleRuns.differentData
     render(<InfoSectionV2 resource={course} />, {
       wrapper: ThemeProvider,
     })
     const section = screen.getByTestId("drawer-info-items")
     expect(within(section).queryByText("Start Date:")).toBeNull()
+    expect(within(section).queryByText("Price:")).toBeNull()
   })
 
   test("Clicking the show more button should show more dates", async () => {

diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx
@@ -13,6 +13,7 @@ import {
   RiTranslate2,
   RiPresentationLine,
   RiAwardFill,
+  RiAwardLine,
 } from "@remixicon/react"
 import { LearningResource, ResourceTypeEnum } from "api"
 import {
@@ -128,7 +129,7 @@ const Certificate = styled.div({
     height: "16px",
   },
   [theme.breakpoints.down("sm")]: {
-    padding: "1px 2px",
+    padding: "4px 8px",
     ...theme.typography.subtitle4,
   },
 })
@@ -251,22 +252,44 @@ const INFO_ITEMS: InfoItemConfig = [
     label: "Price:",
     Icon: RiPriceTag3Line,
     selector: (resource: LearningResource) => {
-      const prices = getLearningResourcePrices(resource)
+      if (allRunsAreIdentical(resource)) {
+        const prices = getLearningResourcePrices(resource)
 
-      return (
-        <PriceDisplay>
-          <div>{prices.course.display}</div>
-          {resource.certification && (
-            <Certificate>
-              <RiAwardFill />
-              {prices.certificate.display
-                ? "Earn a certificate:"
-                : "Certificate included"}
-              <span>{prices.certificate.display}</span>
-            </Certificate>
-          )}
-        </PriceDisplay>
-      )
+        return (
+          <PriceDisplay>
+            <div>{resource.free ? "Free" : prices.course.display}</div>
+            {resource.certification && resource.free ? (
+              <>
+                {prices.certificate.display ? (
+                  <Certificate>
+                    <RiAwardFill />
+                    <span>Earn a certificate:</span>
+                    <span>{prices.certificate.display}</span>
+                  </Certificate>
+                ) : (
+                  <Certificate>
+                    <RiAwardLine />
+                    <span>Certificate</span>
+                  </Certificate>
+                )}
+              </>
+            ) : null}
+          </PriceDisplay>
+        )
+      } else return null
+    },
+  },
+  {
+    label: "Certificate:",
+    Icon: RiAwardLine,
+    selector: (resource: LearningResource) => {
+      return resource.certification_type && !resource.free ? (
+        <InfoItemValue
+          label={resource.certification_type.name}
+          index={1}
+          total={1}
+        />
+      ) : null
     },
   },
   {

diff --git a/learning_resources/constants.py b/learning_resources/constants.py
@@ -283,7 +283,7 @@ class LearningResourceDelivery(ExtendedEnum):
 class CertificationType(ExtendedEnum):
     """Enum for resource certification types"""
 
-    micromasters = "Micromasters Credential"
+    micromasters = "MicroMasters Credential"
     professional = "Professional Certificate"
     completion = "Certificate of Completion"
     none = "No Certificate"

diff --git a/learning_resources/migrations/0076_alter_learningresource_certification_type.py b/learning_resources/migrations/0076_alter_learningresource_certification_type.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.16 on 2024-11-13 22:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("learning_resources", "0075_learningresourcerun_instructors"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="learningresource",
+            name="certification_type",
+            field=models.CharField(
+                choices=[
+                    ("micromasters", "MicroMasters Credential"),
+                    ("professional", "Professional Certificate"),
+                    ("completion", "Certificate of Completion"),
+                    ("none", "No Certificate"),
+                ],
+                default="none",
+                max_length=24,
+            ),
+        ),
+    ]
diff --git a/openapi/specs/v1.yaml b/openapi/specs/v1.yaml
@@ -552,7 +552,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -1163,7 +1163,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -1567,7 +1567,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -1978,7 +1978,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -2371,7 +2371,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -3099,11 +3099,11 @@ paths:
             - none
             type: string
             description: |-
-              * `micromasters` - Micromasters Credential
+              * `micromasters` - MicroMasters Credential
               * `professional` - Professional Certificate
               * `completion` - Certificate of Completion
               * `none` - No Certificate
-        description: "The type of certificate             \n\n* `micromasters` - Micromasters\
+        description: "The type of certificate             \n\n* `micromasters` - MicroMasters\
           \ Credential\n* `professional` - Professional Certificate\n* `completion`\
           \ - Certificate of Completion\n* `none` - No Certificate"
       - in: query
@@ -3597,11 +3597,11 @@ paths:
             - none
             type: string
             description: |-
-              * `micromasters` - Micromasters Credential
+              * `micromasters` - MicroMasters Credential
               * `professional` - Professional Certificate
               * `completion` - Certificate of Completion
               * `none` - No Certificate
-        description: "The type of certificate             \n\n* `micromasters` - Micromasters\
+        description: "The type of certificate             \n\n* `micromasters` - MicroMasters\
           \ Credential\n* `professional` - Professional Certificate\n* `completion`\
           \ - Certificate of Completion\n* `none` - No Certificate"
       - in: query
@@ -4120,11 +4120,11 @@ paths:
             - none
             type: string
             description: |-
-              * `micromasters` - Micromasters Credential
+              * `micromasters` - MicroMasters Credential
               * `professional` - Professional Certificate
               * `completion` - Certificate of Completion
               * `none` - No Certificate
-        description: "The type of certificate             \n\n* `micromasters` - Micromasters\
+        description: "The type of certificate             \n\n* `micromasters` - MicroMasters\
           \ Credential\n* `professional` - Professional Certificate\n* `completion`\
           \ - Certificate of Completion\n* `none` - No Certificate"
       - in: query
@@ -4634,11 +4634,11 @@ paths:
             - none
             type: string
             description: |-
-              * `micromasters` - Micromasters Credential
+              * `micromasters` - MicroMasters Credential
               * `professional` - Professional Certificate
               * `completion` - Certificate of Completion
               * `none` - No Certificate
-        description: "The type of certificate             \n\n* `micromasters` - Micromasters\
+        description: "The type of certificate             \n\n* `micromasters` - MicroMasters\
           \ Credential\n* `professional` - Professional Certificate\n* `completion`\
           \ - Certificate of Completion\n* `none` - No Certificate"
       - in: query
@@ -5122,7 +5122,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -5866,7 +5866,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -6270,7 +6270,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -6761,7 +6761,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -7571,7 +7571,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -8041,7 +8041,7 @@ paths:
         description: |-
           The type of certification offered
 
-          * `micromasters` - Micromasters Credential
+          * `micromasters` - MicroMasters Credential
           * `professional` - Professional Certificate
           * `completion` - Certificate of Completion
           * `none` - No Certificate
@@ -8515,12 +8515,12 @@ components:
       - none
       type: string
       description: |-
-        * `micromasters` - Micromasters Credential
+        * `micromasters` - MicroMasters Credential
         * `professional` - Professional Certificate
         * `completion` - Certificate of Completion
         * `none` - No Certificate
       x-enum-descriptions:
-      - Micromasters Credential
+      - MicroMasters Credential
       - Professional Certificate
       - Certificate of Completion
       - No Certificate
@@ -11164,7 +11164,7 @@ components:
           items:
             $ref: '#/components/schemas/CertificationTypeEnum'
           description: "The type of certificate             \n\n* `micromasters` -\
-            \ Micromasters Credential\n* `professional` - Professional Certificate\n\
+            \ MicroMasters Credential\n* `professional` - Professional Certificate\n\
             * `completion` - Certificate of Completion\n* `none` - No Certificate"
         department:
           type: array