From 3057707b70eb2e476209248a1fb8fbd875cf76a9 Mon Sep 17 00:00:00 2001
From: Payam <payam.nj@gmail.com>
Date: Mon, 6 Apr 2026 11:41:50 +0400
Subject: [PATCH] feat: #331 show message for enrollment verification

---
 django_email_learning/public/views.py         | 10 ++-
 frontend/public/course/Course.jsx             | 71 +++++++++----------
 frontend/public/organization/Organization.jsx | 21 +++---
 3 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/django_email_learning/public/views.py b/django_email_learning/public/views.py
index a78dba1..fff1340 100644
--- a/django_email_learning/public/views.py
+++ b/django_email_learning/public/views.py
@@ -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"),
@@ -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"),
diff --git a/frontend/public/course/Course.jsx b/frontend/public/course/Course.jsx
index c713f41..7b5703a 100644
--- a/frontend/public/course/Course.jsx
+++ b/frontend/public/course/Course.jsx
@@ -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';
@@ -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);
 
@@ -61,6 +62,8 @@ function Course() {
         setDisplayModal(false);
         setModalContent(null);
         setEnrolled(true);
+        setShowEnrollmentAlert(true);
+        scrollTo({ top: 0, behavior: 'smooth' });
     }
 
     return <ThemeProvider theme={lightTheme}><Layout>
@@ -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"
@@ -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
@@ -186,7 +188,7 @@ function Course() {
                 direction: courseDirection,
             }}
         >
-            <Stack spacing={2}>
+            <Stack spacing={{ xs: 2, md: 5 }}>
 
                 {course.description && (
                     <Typography
@@ -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}>
@@ -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>
 
@@ -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
@@ -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"
diff --git a/frontend/public/organization/Organization.jsx b/frontend/public/organization/Organization.jsx
index 9184ffa..de4a36d 100644
--- a/frontend/public/organization/Organization.jsx
+++ b/frontend/public/organization/Organization.jsx
@@ -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';
@@ -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();
 
@@ -39,6 +40,7 @@ function Organization() {
             return c;
         });
         setCourses(updatedCourses);
+        setShowSuccessMessage(true);
     }
 
 
@@ -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 ? (
@@ -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"