Skip to content

Commit b95a184

Browse files
gumaercgumaerc
authored
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
1 parent 099c469 commit b95a184

File tree

7 files changed

+169
-92
lines changed

7 files changed

+169
-92
lines changed

‎frontends/api/src/generated/v1/api.ts

Lines changed: 49 additions & 49 deletions
Large diffs are not rendered by default.

‎frontends/ol-components/src/components/LearningResourceCard/testUtils.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ const courses = {
6767
runs: [factories.learningResources.run()],
6868
free: true,
6969
certification: true,
70+
certification_type: {
71+
code: "completion",
72+
name: "Certificate of Completion",
73+
},
7074
resource_prices: [
7175
{ amount: "0", currency: "USD" },
7276
{ amount: "49", currency: "USD" },
@@ -77,6 +81,10 @@ const courses = {
7781
runs: [factories.learningResources.run()],
7882
free: true,
7983
certification: true,
84+
certification_type: {
85+
code: "completion",
86+
name: "Certificate of Completion",
87+
},
8088
resource_prices: [
8189
{ amount: "0", currency: "USD" },
8290
{ amount: "99", currency: "USD" },
@@ -125,6 +133,10 @@ const courses = {
125133
runs: [factories.learningResources.run()],
126134
free: false,
127135
certification: true,
136+
certification_type: {
137+
code: "completion",
138+
name: "Certificate of Completion",
139+
},
128140
resource_prices: [],
129141
}),
130142
},
@@ -141,13 +153,21 @@ const courses = {
141153
runs: [factories.learningResources.run()],
142154
free: false,
143155
certification: true,
156+
certification_type: {
157+
code: "completion",
158+
name: "Certificate of Completion",
159+
},
144160
resource_prices: [{ amount: "49", currency: "USD" }],
145161
}),
146162
withCertificatePriceRange: makeResource({
147163
resource_type: ResourceTypeEnum.Course,
148164
runs: [factories.learningResources.run()],
149165
free: false,
150166
certification: true,
167+
certification_type: {
168+
code: "completion",
169+
name: "Certificate of Completion",
170+
},
151171
resource_prices: [
152172
{ amount: "49", currency: "USD" },
153173
{ amount: "99", currency: "USD" },

‎frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.test.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,10 @@ describe("Learning resource info section pricing", () => {
6565

6666
screen.getByText("Paid")
6767
expect(screen.queryByText("Free")).toBeNull()
68-
screen.getByText("Certificate included")
68+
screen.getByText("Certificate:")
69+
screen.getByText(
70+
courses.unknownPrice.withCertificate.certification_type.name,
71+
)
6972
})
7073

7174
test("Paid course, no certificate", () => {
@@ -87,7 +90,8 @@ describe("Learning resource info section pricing", () => {
8790

8891
screen.getByText("$49")
8992
expect(screen.queryByText("Paid")).toBeNull()
90-
screen.getByText("Certificate included")
93+
screen.getByText("Certificate:")
94+
screen.getByText(courses.paid.withCerticateOnePrice.certification_type.name)
9195
})
9296

9397
test("Paid course, with certificate, price range", () => {
@@ -100,7 +104,10 @@ describe("Learning resource info section pricing", () => {
100104

101105
screen.getByText("$49 – $99")
102106
expect(screen.queryByText("Paid")).toBeNull()
103-
screen.getByText("Certificate included")
107+
screen.getByText("Certificate:")
108+
screen.getByText(
109+
courses.paid.withCertificatePriceRange.certification_type.name,
110+
)
104111
})
105112
})
106113

@@ -158,13 +165,14 @@ describe("Learning resource info section start date", () => {
158165
})
159166
})
160167

161-
test("If data is different, dates are not shown", () => {
168+
test("If data is different, dates and prices are not shown", () => {
162169
const course = courses.multipleRuns.differentData
163170
render(<InfoSectionV2 resource={course} />, {
164171
wrapper: ThemeProvider,
165172
})
166173
const section = screen.getByTestId("drawer-info-items")
167174
expect(within(section).queryByText("Start Date:")).toBeNull()
175+
expect(within(section).queryByText("Price:")).toBeNull()
168176
})
169177

170178
test("Clicking the show more button should show more dates", async () => {

‎frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
RiTranslate2,
1414
RiPresentationLine,
1515
RiAwardFill,
16+
RiAwardLine,
1617
} from "@remixicon/react"
1718
import { LearningResource, ResourceTypeEnum } from "api"
1819
import {
@@ -128,7 +129,7 @@ const Certificate = styled.div({
128129
height: "16px",
129130
},
130131
[theme.breakpoints.down("sm")]: {
131-
padding: "1px 2px",
132+
padding: "4px 8px",
132133
...theme.typography.subtitle4,
133134
},
134135
})
@@ -251,22 +252,44 @@ const INFO_ITEMS: InfoItemConfig = [
251252
label: "Price:",
252253
Icon: RiPriceTag3Line,
253254
selector: (resource: LearningResource) => {
254-
const prices = getLearningResourcePrices(resource)
255+
if (allRunsAreIdentical(resource)) {
256+
const prices = getLearningResourcePrices(resource)
255257

256-
return (
257-
<PriceDisplay>
258-
<div>{prices.course.display}</div>
259-
{resource.certification && (
260-
<Certificate>
261-
<RiAwardFill />
262-
{prices.certificate.display
263-
? "Earn a certificate:"
264-
: "Certificate included"}
265-
<span>{prices.certificate.display}</span>
266-
</Certificate>
267-
)}
268-
</PriceDisplay>
269-
)
258+
return (
259+
<PriceDisplay>
260+
<div>{resource.free ? "Free" : prices.course.display}</div>
261+
{resource.certification && resource.free ? (
262+
<>
263+
{prices.certificate.display ? (
264+
<Certificate>
265+
<RiAwardFill />
266+
<span>Earn a certificate:</span>
267+
<span>{prices.certificate.display}</span>
268+
</Certificate>
269+
) : (
270+
<Certificate>
271+
<RiAwardLine />
272+
<span>Certificate</span>
273+
</Certificate>
274+
)}
275+
</>
276+
) : null}
277+
</PriceDisplay>
278+
)
279+
} else return null
280+
},
281+
},
282+
{
283+
label: "Certificate:",
284+
Icon: RiAwardLine,
285+
selector: (resource: LearningResource) => {
286+
return resource.certification_type && !resource.free ? (
287+
<InfoItemValue
288+
label={resource.certification_type.name}
289+
index={1}
290+
total={1}
291+
/>
292+
) : null
270293
},
271294
},
272295
{

‎learning_resources/constants.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ class LearningResourceDelivery(ExtendedEnum):
283283
class CertificationType(ExtendedEnum):
284284
"""Enum for resource certification types"""
285285

286-
micromasters = "Micromasters Credential"
286+
micromasters = "MicroMasters Credential"
287287
professional = "Professional Certificate"
288288
completion = "Certificate of Completion"
289289
none = "No Certificate"

‎learning_resources/migrations/0076_alter_learningresource_certification_type.py

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Generated by Django 4.2.16 on 2024-11-13 22:34
2+
3+
from django.db import migrations, models
4+
5+
6+
class Migration(migrations.Migration):
7+
dependencies = [
8+
("learning_resources", "0075_learningresourcerun_instructors"),
9+
]
10+
11+
operations = [
12+
migrations.AlterField(
13+
model_name="learningresource",
14+
name="certification_type",
15+
field=models.CharField(
16+
choices=[
17+
("micromasters", "MicroMasters Credential"),
18+
("professional", "Professional Certificate"),
19+
("completion", "Certificate of Completion"),
20+
("none", "No Certificate"),
21+
],
22+
default="none",
23+
max_length=24,
24+
),
25+
),
26+
]

‎openapi/specs/v1.yaml

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -552,7 +552,7 @@ paths:
552552
description: |-
553553
The type of certification offered
554554
555-
* `micromasters` - Micromasters Credential
555+
* `micromasters` - MicroMasters Credential
556556
* `professional` - Professional Certificate
557557
* `completion` - Certificate of Completion
558558
* `none` - No Certificate
@@ -1163,7 +1163,7 @@ paths:
11631163
description: |-
11641164
The type of certification offered
11651165
1166-
* `micromasters` - Micromasters Credential
1166+
* `micromasters` - MicroMasters Credential
11671167
* `professional` - Professional Certificate
11681168
* `completion` - Certificate of Completion
11691169
* `none` - No Certificate
@@ -1567,7 +1567,7 @@ paths:
15671567
description: |-
15681568
The type of certification offered
15691569
1570-
* `micromasters` - Micromasters Credential
1570+
* `micromasters` - MicroMasters Credential
15711571
* `professional` - Professional Certificate
15721572
* `completion` - Certificate of Completion
15731573
* `none` - No Certificate
@@ -1978,7 +1978,7 @@ paths:
19781978
description: |-
19791979
The type of certification offered
19801980
1981-
* `micromasters` - Micromasters Credential
1981+
* `micromasters` - MicroMasters Credential
19821982
* `professional` - Professional Certificate
19831983
* `completion` - Certificate of Completion
19841984
* `none` - No Certificate
@@ -2371,7 +2371,7 @@ paths:
23712371
description: |-
23722372
The type of certification offered
23732373
2374-
* `micromasters` - Micromasters Credential
2374+
* `micromasters` - MicroMasters Credential
23752375
* `professional` - Professional Certificate
23762376
* `completion` - Certificate of Completion
23772377
* `none` - No Certificate
@@ -3099,11 +3099,11 @@ paths:
30993099
- none
31003100
type: string
31013101
description: |-
3102-
* `micromasters` - Micromasters Credential
3102+
* `micromasters` - MicroMasters Credential
31033103
* `professional` - Professional Certificate
31043104
* `completion` - Certificate of Completion
31053105
* `none` - No Certificate
3106-
description: "The type of certificate \n\n* `micromasters` - Micromasters\
3106+
description: "The type of certificate \n\n* `micromasters` - MicroMasters\
31073107
\ Credential\n* `professional` - Professional Certificate\n* `completion`\
31083108
\ - Certificate of Completion\n* `none` - No Certificate"
31093109
- in: query
@@ -3597,11 +3597,11 @@ paths:
35973597
- none
35983598
type: string
35993599
description: |-
3600-
* `micromasters` - Micromasters Credential
3600+
* `micromasters` - MicroMasters Credential
36013601
* `professional` - Professional Certificate
36023602
* `completion` - Certificate of Completion
36033603
* `none` - No Certificate
3604-
description: "The type of certificate \n\n* `micromasters` - Micromasters\
3604+
description: "The type of certificate \n\n* `micromasters` - MicroMasters\
36053605
\ Credential\n* `professional` - Professional Certificate\n* `completion`\
36063606
\ - Certificate of Completion\n* `none` - No Certificate"
36073607
- in: query
@@ -4120,11 +4120,11 @@ paths:
41204120
- none
41214121
type: string
41224122
description: |-
4123-
* `micromasters` - Micromasters Credential
4123+
* `micromasters` - MicroMasters Credential
41244124
* `professional` - Professional Certificate
41254125
* `completion` - Certificate of Completion
41264126
* `none` - No Certificate
4127-
description: "The type of certificate \n\n* `micromasters` - Micromasters\
4127+
description: "The type of certificate \n\n* `micromasters` - MicroMasters\
41284128
\ Credential\n* `professional` - Professional Certificate\n* `completion`\
41294129
\ - Certificate of Completion\n* `none` - No Certificate"
41304130
- in: query
@@ -4634,11 +4634,11 @@ paths:
46344634
- none
46354635
type: string
46364636
description: |-
4637-
* `micromasters` - Micromasters Credential
4637+
* `micromasters` - MicroMasters Credential
46384638
* `professional` - Professional Certificate
46394639
* `completion` - Certificate of Completion
46404640
* `none` - No Certificate
4641-
description: "The type of certificate \n\n* `micromasters` - Micromasters\
4641+
description: "The type of certificate \n\n* `micromasters` - MicroMasters\
46424642
\ Credential\n* `professional` - Professional Certificate\n* `completion`\
46434643
\ - Certificate of Completion\n* `none` - No Certificate"
46444644
- in: query
@@ -5122,7 +5122,7 @@ paths:
51225122
description: |-
51235123
The type of certification offered
51245124
5125-
* `micromasters` - Micromasters Credential
5125+
* `micromasters` - MicroMasters Credential
51265126
* `professional` - Professional Certificate
51275127
* `completion` - Certificate of Completion
51285128
* `none` - No Certificate
@@ -5866,7 +5866,7 @@ paths:
58665866
description: |-
58675867
The type of certification offered
58685868
5869-
* `micromasters` - Micromasters Credential
5869+
* `micromasters` - MicroMasters Credential
58705870
* `professional` - Professional Certificate
58715871
* `completion` - Certificate of Completion
58725872
* `none` - No Certificate
@@ -6270,7 +6270,7 @@ paths:
62706270
description: |-
62716271
The type of certification offered
62726272
6273-
* `micromasters` - Micromasters Credential
6273+
* `micromasters` - MicroMasters Credential
62746274
* `professional` - Professional Certificate
62756275
* `completion` - Certificate of Completion
62766276
* `none` - No Certificate
@@ -6761,7 +6761,7 @@ paths:
67616761
description: |-
67626762
The type of certification offered
67636763
6764-
* `micromasters` - Micromasters Credential
6764+
* `micromasters` - MicroMasters Credential
67656765
* `professional` - Professional Certificate
67666766
* `completion` - Certificate of Completion
67676767
* `none` - No Certificate
@@ -7571,7 +7571,7 @@ paths:
75717571
description: |-
75727572
The type of certification offered
75737573
7574-
* `micromasters` - Micromasters Credential
7574+
* `micromasters` - MicroMasters Credential
75757575
* `professional` - Professional Certificate
75767576
* `completion` - Certificate of Completion
75777577
* `none` - No Certificate
@@ -8041,7 +8041,7 @@ paths:
80418041
description: |-
80428042
The type of certification offered
80438043
8044-
* `micromasters` - Micromasters Credential
8044+
* `micromasters` - MicroMasters Credential
80458045
* `professional` - Professional Certificate
80468046
* `completion` - Certificate of Completion
80478047
* `none` - No Certificate
@@ -8515,12 +8515,12 @@ components:
85158515
- none
85168516
type: string
85178517
description: |-
8518-
* `micromasters` - Micromasters Credential
8518+
* `micromasters` - MicroMasters Credential
85198519
* `professional` - Professional Certificate
85208520
* `completion` - Certificate of Completion
85218521
* `none` - No Certificate
85228522
x-enum-descriptions:
8523-
- Micromasters Credential
8523+
- MicroMasters Credential
85248524
- Professional Certificate
85258525
- Certificate of Completion
85268526
- No Certificate
@@ -11164,7 +11164,7 @@ components:
1116411164
items:
1116511165
$ref: '#/components/schemas/CertificationTypeEnum'
1116611166
description: "The type of certificate \n\n* `micromasters` -\
11167-
\ Micromasters Credential\n* `professional` - Professional Certificate\n\
11167+
\ MicroMasters Credential\n* `professional` - Professional Certificate\n\
1116811168
* `completion` - Certificate of Completion\n* `none` - No Certificate"
1116911169
department:
1117011170
type: array

0 commit comments

Comments
 (0)