Skip to content

Commit d65a7cd

Browse files
payamnjpayamnj
authored
Merge pull request #332 from AvaCodeSolutions/feat/331/enrollment-message
feat: #331 show message for enrollment verification
2 parents 00828e8 + 3057707 commit d65a7cd

File tree

3 files changed

+53
-49
lines changed

3 files changed

+53
-49
lines changed

‎django_email_learning/public/views.py‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,10 @@ def get_context_data(self, **kwargs) -> dict: # type: ignore[no-untyped-def]
150150
"email": _("email"),
151151
"cancel": _("Cancel"),
152152
"submit": _("Submit"),
153-
"enrollment_success": _("You are enrolled in this course."),
153+
"enrollment_success": _(
154+
"We've sent a confirmation email to verify your enrollment. Please check your inbox and follow the link to complete the process. \
155+
Don't see it? Check your Spam or Junk folder."
156+
),
154157
"enrollment_failed": _("Enrollment failed. Please try again."),
155158
"no_courses_available": _("No courses available."),
156159
"email_required": _("Email is required"),
@@ -245,7 +248,10 @@ def get_context_data(self, **kwargs) -> dict: # type: ignore[no-untyped-def]
245248
"email": _("email"),
246249
"cancel": _("Cancel"),
247250
"submit": _("Submit"),
248-
"enrollment_success": _("You are enrolled in this course."),
251+
"enrollment_success": _(
252+
"We've sent a confirmation email to verify your enrollment. Please check your inbox and follow the link to complete the process. \
253+
Don't see it? Check your Spam or Junk folder."
254+
),
249255
"enrollment_failed": _("Enrollment failed. Please try again."),
250256
"email_required": _("Email is required"),
251257
"email_invalid": _("Please enter a valid email address"),

‎frontend/public/course/Course.jsx‎

Lines changed: 32 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
22
import render from '../../src/render.jsx';
33
import Layout from '../components/Layout.jsx';
44
import EnrollmentForm from '../components/EnrollmentForm.jsx';
5-
import { Box, Button, Card, Chip, Container, Dialog, Grid, Link, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material';
5+
import { Alert, Box, Button, Card, Chip, Container, Dialog, Grid, Link, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material';
66
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
77
import { alpha, ThemeProvider } from '@mui/material/styles';
88
import { useAppContext } from '../../src/render.jsx';
@@ -14,6 +14,7 @@ function Course() {
1414
const [displayModal, setDisplayModal] = useState(false);
1515
const [modalContent, setModalContent] = useState(null);
1616
const [enrolled, setEnrolled] = useState(false);
17+
const [showEnrollmentAlert, setShowEnrollmentAlert] = useState(false);
1718
const [showFixedEnrollBar, setShowFixedEnrollBar] = useState(false);
1819
const topEnrollButtonRef = useRef(null);
1920

@@ -61,6 +62,8 @@ function Course() {
6162
setDisplayModal(false);
6263
setModalContent(null);
6364
setEnrolled(true);
65+
setShowEnrollmentAlert(true);
66+
scrollTo({ top: 0, behavior: 'smooth' });
6467
}
6568

6669
return <ThemeProvider theme={lightTheme}><Layout>
@@ -143,17 +146,7 @@ function Course() {
143146
mx: { xs: 'auto', md: 0 },
144147
}}
145148
>
146-
{enrolled ? (
147-
<Chip
148-
label={localeMessages['enrollment_success']}
149-
sx={(theme) => ({
150-
backgroundColor: alpha(theme.palette.success.main, 0.18),
151-
color: theme.palette.common.white,
152-
fontWeight: 600,
153-
backdropFilter: 'blur(8px)',
154-
})}
155-
/>
156-
) : (
149+
{!enrolled && (
157150
<Button
158151
variant="contained"
159152
color="primary"
@@ -173,6 +166,15 @@ function Course() {
173166
</Stack>
174167
</Box>
175168
</Box>
169+
{enrolled && showEnrollmentAlert && (
170+
<Alert
171+
severity="success"
172+
onClose={() => setShowEnrollmentAlert(false)}
173+
sx={{ mb: 4, direction: courseDirection }}
174+
>
175+
{localeMessages['enrollment_success']}
176+
</Alert>
177+
)}
176178

177179
{/* Course Info Section */}
178180
<Box
@@ -186,7 +188,7 @@ function Course() {
186188
direction: courseDirection,
187189
}}
188190
>
189-
<Stack spacing={2}>
191+
<Stack spacing={{ xs: 2, md: 5 }}>
190192

191193
{course.description && (
192194
<Typography
@@ -196,27 +198,12 @@ function Course() {
196198
/>
197199
)}
198200

199-
{course.target_audience && (
200-
<Box sx={{ py: 1 }}>
201-
<Typography variant="h2" sx={{ mb: 1, direction: courseDirection, fontSize: '1.25rem', fontWeight: 600 }}>
202-
{localeMessages['target_audience_title']}
203-
</Typography>
204-
<Typography
205-
variant="body2"
206-
sx={{ color: 'text.secondary', direction: courseDirection }}
207-
dangerouslySetInnerHTML={{ __html: course.target_audience }}
208-
/>
209-
</Box>
210-
)}
211-
212201
{/* Organization Info */}
213202
<Box
214203
sx={{
215204
p: 2,
216-
borderRadius: 1.5,
205+
borderRadius: 2,
217206
backgroundColor: "white",
218-
mt: 2,
219-
direction: courseDirection,
220207
}}
221208
>
222209
<Grid container spacing={2}>
@@ -251,6 +238,20 @@ function Course() {
251238
</Grid>
252239
</Grid>
253240
</Box>
241+
242+
{course.target_audience && (
243+
<Box sx={{ py: 1 }}>
244+
<Typography variant="h2" sx={{ mb: 1, direction: courseDirection, fontSize: '1.25rem', fontWeight: 600 }}>
245+
{localeMessages['target_audience_title']}
246+
</Typography>
247+
<Typography
248+
variant="body2"
249+
sx={{ color: 'text.secondary', direction: courseDirection }}
250+
dangerouslySetInnerHTML={{ __html: course.target_audience }}
251+
/>
252+
</Box>
253+
)}
254+
254255
</Stack>
255256
</Box>
256257

@@ -312,7 +313,7 @@ function Course() {
312313

313314
{course.external_references && course.external_references.length > 0 && (
314315
<Box my={4}>
315-
<Typography variant="h2" sx={{ mb: 2, direction: courseDirection }}>
316+
<Typography variant="h2" sx={{ direction: courseDirection }}>
316317
{localeMessages['external_references_title']}
317318
</Typography>
318319
<Card
@@ -401,15 +402,7 @@ function Course() {
401402
{course.title}
402403
</Typography>
403404
<Box>
404-
{enrolled ? (
405-
<Chip
406-
label={localeMessages['enrollment_success']}
407-
sx={(theme) => ({
408-
backgroundColor: alpha(theme.palette.success.main, 0.15),
409-
color: theme.palette.success.main,
410-
})}
411-
/>
412-
) : (
405+
{!enrolled &&(
413406
<Button
414407
variant="contained"
415408
color="primary"

‎frontend/public/organization/Organization.jsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
22
import render from '../../src/render.jsx';
33
import Layout from '../components/Layout.jsx';
44
import EnrollmentForm from '../components/EnrollmentForm.jsx';
5-
import { Box, Button, Card, CardContent, CardMedia, Chip, Dialog, Grid, Stack, Typography, Link } from '@mui/material';
5+
import { Alert, Box, Button, Card, CardContent, CardMedia, Dialog, Grid, Stack, Typography, Link } from '@mui/material';
66
import LanguageIcon from '@mui/icons-material/Language';
77
import { alpha, ThemeProvider } from '@mui/material/styles';
88
import { useAppContext } from '../../src/render.jsx';
@@ -14,6 +14,7 @@ function Organization() {
1414
const [displayModal, setDisplayModal] = useState(false);
1515
const [modalContent, setModalContent] = useState(null);
1616
const [courses, setCourses] = useState([]);
17+
const [showSuccessMessage, setShowSuccessMessage] = useState(false);
1718

1819
const { organization, enrollApiUrl, localeMessages } = useAppContext();
1920

@@ -39,6 +40,7 @@ function Organization() {
3940
return c;
4041
});
4142
setCourses(updatedCourses);
43+
setShowSuccessMessage(true);
4244
}
4345

4446

@@ -63,6 +65,16 @@ function Organization() {
6365
<Typography variant="body1" sx={{ color: 'text.secondary' }} dangerouslySetInnerHTML={{ __html: organization["description"] }} />
6466
</Stack>
6567
</Box>
68+
{showSuccessMessage && (
69+
<Alert
70+
severity="success"
71+
onClose={() => setShowSuccessMessage(false)}
72+
sx={{ mb: 4 }}
73+
>
74+
{localeMessages['enrollment_success']}
75+
</Alert>
76+
)}
77+
6678
<Box my={4}>
6779
<Typography variant="h2" sx={{ mb: 2 }}>{localeMessages['courses']}</Typography>
6880
{ courses.length > 0 ? (
@@ -138,13 +150,6 @@ function Organization() {
138150
dangerouslySetInnerHTML={{ __html: course.description }}
139151
/>
140152
<Box sx={{ mt: 'auto', pt: 1 }}>
141-
{course.enrolled && (<>
142-
<Chip
143-
label={localeMessages['enrollment_success']}
144-
size="small"
145-
sx={(theme) => ({ mb: 1., backgroundColor: alpha(theme.palette.success.main, 0.15), color: theme.palette.success.main })}
146-
/><br /></>
147-
)}
148153
<Button
149154
variant="contained"
150155
color="secondary"

0 commit comments

Comments
 (0)