Skip to content

Commit

Permalink
Merge pull request #510 from itsvick/notification-template
Browse files Browse the repository at this point in the history 
Issue #PS-0000 fix: Added Notification template management
  • Loading branch information
@itsvick
itsvick authored Feb 11, 2025
2 parents de61b46 + 15ecfd9 commit 874f945
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 53 deletions.
3 changes: 1 addition & 2 deletions src/components/notification-templates/AddTemplateForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ const notificationTypes = [
];

// Sample Email Template
const SAMPLE_EMAIL_TEMPLATE = `<p>Hello, <br/><br/>This is a sample email template. <br/><br/>Thanks, <br/>Team</p>`;

const SAMPLE_EMAIL_TEMPLATE = `<!DOCTYPE html><html> <head> <meta charset='UTF-8' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <title>Email Notification</title> </head> <body style=' font-family: Arial, sans-serif; margin: 0; padding: 30px 0px; background-color: #f5f5f5; ' > <table class='email-container' cellspacing='0' cellpadding='0' style=' width: 100%; border-radius: 15px; max-width: 600px; margin: 20px auto; background-color: #ffffff; border: 1px solid #ddd; ' > <tr> <td class='email-header' style='text-align: center; padding: 20px'> <img src='https://prahtam-images-data.s3.ap-south-1.amazonaws.com/image1056.png' alt='Pratham Logo' /> </td> </tr> <tr> <td> <hr class='divider' style='margin: 0; border: none; border-top: 3px solid #fbb03b' /> </td> </tr> <tr> <td class='email-body' style='padding: 20px'> <h1 class='email-title' style='font-size: 22px; color: #1f1b13; font-weight: bold' > Your Credentials for SCP Facilitator's Account </h1> <p class='email-text' style='font-size: 16px; color: #1f1b13; line-height: 1.6' > Dear {FirstName},<br />We are pleased to inform you that your account has been successfully created. Below are the login details: </p> <div class='email-highlight' style=' background-color: #f8efe7; border-left: 4px solid #fbb03b; padding: 10px; margin: 20px 0; border-radius: 8px; font-size: 14px; color: #333; line-height: 1.5; ' > <div> <div style='color: #4a4640; font-size: 12px; font-weight: 400'> Username: {UserName} </div> <div style=' color: #4a4640; font-size: 12px; font-weight: 400; margin-top: 5px; ' > Password: {Password} </div> </div> </div> <div> <p style='font-size:16px;color:#1f1b13;line-height:1.6;'> Please <a href='{appUrl}' style='color:#0d599e;font-weight:bold;text-decoration:none' target='_blank'>click here</a> to log in. We recommend resetting your password after your first login. </p> </div> </td> </tr> <tr> <td class='email-footer' style=' background-color: #f3edf7; padding: 20px; text-align: center; font-size: 12px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; ' > <p style=' font-size: 12px; color: #635e57; margin-bottom: 15px; font-weight: 400; ' > Pratham is an innovative learning organization created to improve the quality of education in India. </p> <div class='social-icons' style='margin: 15px 0'> <a href='https://www.linkedin.com/company/pratham/' style='margin: 0 5px' ><img src='https://prahtam-images-data.s3.ap-south-1.amazonaws.com/linkdIn.png' alt='LinkedIn' style='width: 24px; height: 24px' /></a> <a href='https://www.facebook.com/PrathamEducationFoundation' style='margin: 0 5px' ><img src='https://prahtam-images-data.s3.ap-south-1.amazonaws.com/facebooklogo.png' alt='Facebook' style='width: 24px; height: 24px' /></a> <a href='https://www.instagram.com/prathameducation' style='margin: 0 5px' ><img src='https://prahtam-images-data.s3.ap-south-1.amazonaws.com/instagramlogo.png' alt='Instagram' style='width: 24px; height: 24px' /></a> <a href='http://www.youtube.com/@PrathamEducationFoundation' style='margin: 0 5px' ><img src='https://prahtam-images-data.s3.ap-south-1.amazonaws.com/youtube-iconlogo.png' alt='YouTube' style='width: 24px; height: 24px' /></a> <a href='https://x.com/Pratham_India' style='margin: 0 5px' ><img src='https://prahtam-images-data.s3.ap-south-1.amazonaws.com/twitter-logo.png' alt='Twitter' style='width: 24px; height: 24px' /></a> </div> <p style=' line-height: 1.5; font-size: 12px; color: #635e57; margin-top: 10px; line-height: 1.5; font-weight: 400; ' > Y.B. Chavan Center, 4th Floor,<br /> Gen. J. Bhosale Marg, Nariman Point<br /> Mumbai, Maharashtra - 400021 </p> </td> </tr> </table> </body></html>`;
// Validation Schema
const validationSchema = yup.object().shape({
// context: yup.string().required('Context is required'),
Expand Down
32 changes: 11 additions & 21 deletions src/components/notification-templates/TemplatePreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,21 @@ const TemplatePreview: React.FC<TemplatePreviewProps> = ({ template = "" }) => {
return (
<Box
sx={{
padding: "16px",
// backgroundImage: "url('/images/mobile.png')",
background:'white',
backgroundSize: "cover",
width: "100%",
maxWidth: "420px",
mt: 4,
borderRadius: "8px",
height: "600px",
overflowY: "auto",
overflowX: "hidden",
}}
>
<Typography variant="h5" sx={{ fontWeight: 600, mb: 2 }}>
Preview
</Typography>
<Box sx={{
height: "500px",
width: "400px",
margin: "10px",
marginBottom: "200px",
}}>

<div dangerouslySetInnerHTML={{ __html: template }} />
</Box>
}}
>
<div className="mobile-frame">
<div className="notch"></div>
<div className="screen">
<div
className="content-main"
dangerouslySetInnerHTML={{ __html: template }}
></div>
</div>
</div>
</Box>
);
};
Expand Down
110 changes: 80 additions & 30 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ body {
margin: 0;
padding: 0;
font-family: Poppins, sans-serif !important;
background: #fff !important;
overflow-y: auto !important;
height: 100vh !important;
background: #fff !important;
overflow-y: auto !important;
height: 100vh !important;
}

@layer utilities {
Expand Down Expand Up @@ -152,7 +152,7 @@ h3,
h4,
h5,
h6,
p .css-1ydl6z0-MuiTypography-root .css-b7ovn5-MuiTypography-root .menu-list-content{
p .css-1ydl6z0-MuiTypography-root .css-b7ovn5-MuiTypography-root .menu-list-content {
font-family: Poppins, sans-serif !important;
}

Expand All @@ -179,66 +179,72 @@ p .css-1ydl6z0-MuiTypography-root .css-b7ovn5-MuiTypography-root .menu-list-con
font-weight: 400 !important;
}

.create-card{
.create-card {
min-height: 118px !important;
}

.img-fluid{ width: 100%;
height: auto;
max-width: 300px;
.img-fluid {
width: 100%;
height: auto;
max-width: 300px;
}

lib-editor .h-100vh{
lib-editor .h-100vh {
overflow-y: auto !important;
}

.swiper-button-next:after {
font-size: 16px !important;
color: #1E1B16!important;
color: #1E1B16 !important;
background-color: #EBE1D4 !important;
border-radius: 20% !important;
width: 20px!important;
border-radius: 20% !important;
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25)!important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
}

.swiper-button-next:hover:after {
background-color: #FDBE16 !important; /* Replace with your desired hover color */
background-color: #FDBE16 !important;
/* Replace with your desired hover color */
}


.swiper-button-prev:after {
font-size: 16px !important;
color: #1E1B16 !important;
color: #1E1B16 !important;
background-color: #EBE1D4 !important;
border-radius: 20% !important;
width: 20px !important;
border-radius: 20% !important;
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
}

.swiper-button-prev:hover:after {
background-color: #FDBE16 !important; /* Replace with your desired hover color */
background-color: #FDBE16 !important;
/* Replace with your desired hover color */
}

.swiper-pagination-bullet {
background-color: #CDC5BD !important;
width: 40px!important;
height: 4px!important;
border-radius: 8px!important;
opacity: 4 !important;
background-color: #CDC5BD !important;
width: 40px !important;
height: 4px !important;
border-radius: 8px !important;
opacity: 4 !important;
}

/* Highlight the active dot */
.swiper-pagination-bullet-active {
background-color: #FFC107 !important;
width: 40px !important;
background-color: #FFC107 !important;
width: 40px !important;
height: 4px !important;
border-radius: 8px !important;
opacity: 9 !important;
opacity: 9 !important;
}

/* .swiper-container {
Expand All @@ -248,9 +254,53 @@ lib-editor .h-100vh{


.swiper-pagination {
position: static !important; /* Reset default absolute positioning */

text-align: center;
position: static !important;
/* Reset default absolute positioning */

text-align: center;
}


/* iPhone-like frame */
.mobile-frame {
width: 380px;
height: 732px;
background: #000;
border-radius: 55px;
position: relative;
overflow: hidden;
border: 8px solid #333;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
}

/* Dynamic Island (Notch) */
.notch {
width: 120px;
height: 40px;
background: #222;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 20px;
}

/* Inner screen */
.screen {
flex: 1;
background: #fff;
border-radius: 45px;
overflow-y: auto;
padding: 0px;
}

.content-main {
padding: 10px;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
margin-top: 20px;
}

0 comments on commit 874f945

Please sign in to comment.