Skip to content

feat: #331 show message for enrollment verification #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
payamnj merged 1 commit into from
Apr 6, 2026
Merged

feat: #331 show message for enrollment verification #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions django_email_learning/public/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,10 @@ def get_context_data(self, **kwargs) -> dict: # type: ignore[no-untyped-def]
"email": _("email"),
"cancel": _("Cancel"),
"submit": _("Submit"),
"enrollment_success": _("You are enrolled in this course."),
"enrollment_success": _(
"We've sent a confirmation email to verify your enrollment. Please check your inbox and follow the link to complete the process. \
Don't see it? Check your Spam or Junk folder."
),
"enrollment_failed": _("Enrollment failed. Please try again."),
"no_courses_available": _("No courses available."),
"email_required": _("Email is required"),
Expand Down Expand Up @@ -245,7 +248,10 @@ def get_context_data(self, **kwargs) -> dict: # type: ignore[no-untyped-def]
"email": _("email"),
"cancel": _("Cancel"),
"submit": _("Submit"),
"enrollment_success": _("You are enrolled in this course."),
"enrollment_success": _(
"We've sent a confirmation email to verify your enrollment. Please check your inbox and follow the link to complete the process. \
Don't see it? Check your Spam or Junk folder."
),
"enrollment_failed": _("Enrollment failed. Please try again."),
"email_required": _("Email is required"),
"email_invalid": _("Please enter a valid email address"),
Expand Down
71 changes: 32 additions & 39 deletions frontend/public/course/Course.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
import render from '../../src/render.jsx';
import Layout from '../components/Layout.jsx';
import EnrollmentForm from '../components/EnrollmentForm.jsx';
import { Box, Button, Card, Chip, Container, Dialog, Grid, Link, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material';
import { Alert, Box, Button, Card, Chip, Container, Dialog, Grid, Link, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { alpha, ThemeProvider } from '@mui/material/styles';
import { useAppContext } from '../../src/render.jsx';
Expand All @@ -14,6 +14,7 @@ function Course() {
const [displayModal, setDisplayModal] = useState(false);
const [modalContent, setModalContent] = useState(null);
const [enrolled, setEnrolled] = useState(false);
const [showEnrollmentAlert, setShowEnrollmentAlert] = useState(false);
const [showFixedEnrollBar, setShowFixedEnrollBar] = useState(false);
const topEnrollButtonRef = useRef(null);

Expand Down Expand Up @@ -61,6 +62,8 @@ function Course() {
setDisplayModal(false);
setModalContent(null);
setEnrolled(true);
setShowEnrollmentAlert(true);
scrollTo({ top: 0, behavior: 'smooth' });
}

return <ThemeProvider theme={lightTheme}><Layout>
Expand Down Expand Up @@ -143,17 +146,7 @@ function Course() {
mx: { xs: 'auto', md: 0 },
}}
>
{enrolled ? (
<Chip
label={localeMessages['enrollment_success']}
sx={(theme) => ({
backgroundColor: alpha(theme.palette.success.main, 0.18),
color: theme.palette.common.white,
fontWeight: 600,
backdropFilter: 'blur(8px)',
})}
/>
) : (
{!enrolled && (
<Button
variant="contained"
color="primary"
Expand All @@ -173,6 +166,15 @@ function Course() {
</Stack>
</Box>
</Box>
{enrolled && showEnrollmentAlert && (
<Alert
severity="success"
onClose={() => setShowEnrollmentAlert(false)}
sx={{ mb: 4, direction: courseDirection }}
>
{localeMessages['enrollment_success']}
</Alert>
)}

{/* Course Info Section */}
<Box
Expand All @@ -186,7 +188,7 @@ function Course() {
direction: courseDirection,
}}
>
<Stack spacing={2}>
<Stack spacing={{ xs: 2, md: 5 }}>

{course.description && (
<Typography
Expand All @@ -196,27 +198,12 @@ function Course() {
/>
)}

{course.target_audience && (
<Box sx={{ py: 1 }}>
<Typography variant="h2" sx={{ mb: 1, direction: courseDirection, fontSize: '1.25rem', fontWeight: 600 }}>
{localeMessages['target_audience_title']}
</Typography>
<Typography
variant="body2"
sx={{ color: 'text.secondary', direction: courseDirection }}
dangerouslySetInnerHTML={{ __html: course.target_audience }}
/>
</Box>
)}

{/* Organization Info */}
<Box
sx={{
p: 2,
borderRadius: 1.5,
borderRadius: 2,
backgroundColor: "white",
mt: 2,
direction: courseDirection,
}}
>
<Grid container spacing={2}>
Expand Down Expand Up @@ -251,6 +238,20 @@ function Course() {
</Grid>
</Grid>
</Box>

{course.target_audience && (
<Box sx={{ py: 1 }}>
<Typography variant="h2" sx={{ mb: 1, direction: courseDirection, fontSize: '1.25rem', fontWeight: 600 }}>
{localeMessages['target_audience_title']}
</Typography>
<Typography
variant="body2"
sx={{ color: 'text.secondary', direction: courseDirection }}
dangerouslySetInnerHTML={{ __html: course.target_audience }}
/>
</Box>
)}

</Stack>
</Box>

Expand Down Expand Up @@ -312,7 +313,7 @@ function Course() {

{course.external_references && course.external_references.length > 0 && (
<Box my={4}>
<Typography variant="h2" sx={{ mb: 2, direction: courseDirection }}>
<Typography variant="h2" sx={{ direction: courseDirection }}>
{localeMessages['external_references_title']}
</Typography>
<Card
Expand Down Expand Up @@ -401,15 +402,7 @@ function Course() {
{course.title}
</Typography>
<Box>
{enrolled ? (
<Chip
label={localeMessages['enrollment_success']}
sx={(theme) => ({
backgroundColor: alpha(theme.palette.success.main, 0.15),
color: theme.palette.success.main,
})}
/>
) : (
{!enrolled &&(
<Button
variant="contained"
color="primary"
Expand Down
21 changes: 13 additions & 8 deletions frontend/public/organization/Organization.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
import render from '../../src/render.jsx';
import Layout from '../components/Layout.jsx';
import EnrollmentForm from '../components/EnrollmentForm.jsx';
import { Box, Button, Card, CardContent, CardMedia, Chip, Dialog, Grid, Stack, Typography, Link } from '@mui/material';
import { Alert, Box, Button, Card, CardContent, CardMedia, Dialog, Grid, Stack, Typography, Link } from '@mui/material';
import LanguageIcon from '@mui/icons-material/Language';
import { alpha, ThemeProvider } from '@mui/material/styles';
import { useAppContext } from '../../src/render.jsx';
Expand All @@ -14,6 +14,7 @@ function Organization() {
const [displayModal, setDisplayModal] = useState(false);
const [modalContent, setModalContent] = useState(null);
const [courses, setCourses] = useState([]);
const [showSuccessMessage, setShowSuccessMessage] = useState(false);

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

Expand All @@ -39,6 +40,7 @@ function Organization() {
return c;
});
setCourses(updatedCourses);
setShowSuccessMessage(true);
}


Expand All @@ -63,6 +65,16 @@ function Organization() {
<Typography variant="body1" sx={{ color: 'text.secondary' }} dangerouslySetInnerHTML={{ __html: organization["description"] }} />
</Stack>
</Box>
{showSuccessMessage && (
<Alert
severity="success"
onClose={() => setShowSuccessMessage(false)}
sx={{ mb: 4 }}
>
{localeMessages['enrollment_success']}
</Alert>
)}

<Box my={4}>
<Typography variant="h2" sx={{ mb: 2 }}>{localeMessages['courses']}</Typography>
{ courses.length > 0 ? (
Expand Down Expand Up @@ -138,13 +150,6 @@ function Organization() {
dangerouslySetInnerHTML={{ __html: course.description }}
/>
<Box sx={{ mt: 'auto', pt: 1 }}>
{course.enrolled && (<>
<Chip
label={localeMessages['enrollment_success']}
size="small"
sx={(theme) => ({ mb: 1., backgroundColor: alpha(theme.palette.success.main, 0.15), color: theme.palette.success.main })}
/><br /></>
)}
<Button
variant="contained"
color="secondary"
Expand Down