feat(api): Add workspace removal notification email template

[Allan2000-Git]

User description

Description

This PR adds a project removal notification email template. It provides users with key information regarding the project removal, including project name and removal date.

Fixes #56

Dependencies

No new dependencies introduced.

Future Improvements

Make it consistent with Keyshade's theme.

Mentions

@rajdip-b

Screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

Enhancement, Dependencies

---

Description

• Added a new email template for notifying users when they are removed from a workspace, using @react-email/components.
• Implemented the removedFromWorkspace method in the mail service to send the new email template.
• Updated Jest configurations to support .tsx and .jsx files.
• Added new dependencies for React Email components and rendering, and updated React to version 18.3.1.
• Updated TypeScript configuration to enable JSX support.

---

Changes walkthrough 📝

	Relevant files
Enhancement	3 files workspace-removal.tsx Add workspace removal notification email template                apps/api/src/mail/emails/workspace-removal.tsx Added a new email template for notifying users of workspace removal. Utilized @react-email/components for email structure. Included workspace name and removal date in the email. +145/-0  interface.service.ts Extend mail service interface for workspace removal            apps/api/src/mail/services/interface.service.ts Added a new method removedFromWorkspace to the mail service interface. +6/-0      mail.service.ts Implement workspace removal email sending functionality    apps/api/src/mail/services/mail.service.ts Implemented removedFromWorkspace method to send workspace removal emails. Integrated @react-email/render for email rendering. +17/-1
Tests	1 files mock.service.ts Add mock service for workspace removal email                          apps/api/src/mail/services/mock.service.ts Added mock implementation for removedFromWorkspace method. +10/-0
Configuration changes	3 files jest.config.ts Update Jest config for JSX/TSX support                                      apps/api/jest.config.ts Updated Jest configuration to support .tsx and .jsx files. +2/-2      jest.e2e-config.ts Update Jest E2E config for JSX/TSX support                              apps/api/jest.e2e-config.ts Updated Jest E2E configuration to support .tsx and .jsx files. +2/-2      tsconfig.json Enable JSX support in TypeScript config                                    apps/api/tsconfig.json Enabled JSX support in TypeScript configuration. +2/-1
Dependencies	3 files package.json Add React Email dependencies and update React version        apps/api/package.json Added new dependencies for @react-email components and rendering. Updated React version to 18.3.1. +6/-0      package-lock.json Update package-lock for new email dependencies                      apps/api/package-lock.json Updated lock file to include new dependencies for email rendering. +2/-0      pnpm-lock.yaml Update pnpm lock file for React Email dependencies              pnpm-lock.yaml Updated lock file with new dependencies for React Email components. +483/-38

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

(Review updated until commit 055755c)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 56 - Fully compliant Compliant requirements: Created email template with project name and removal date variables Template sends notification when user is removed

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Bug The admin email address is accessed with non-null assertion (!). This could cause runtime errors if the environment variable is not set. Code Smell The email template hardcodes styling values. Consider extracting these into a shared styles configuration file for consistency and maintainability.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Latest suggestions up to 055755c
Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Add proper null checking for environment variables instead of using non-null assertion operator Add null check for email parameter in sendEmail call to prevent potential runtime errors when environment variable is undefined. apps/api/src/mail/services/mail.service.ts [138] -await this.sendEmail(process.env.ADMIN_EMAIL!, subject, body) +const adminEmail = process.env.ADMIN_EMAIL +if (!adminEmail) throw new Error('ADMIN_EMAIL environment variable is not set') +await this.sendEmail(adminEmail, subject, body) Apply this suggestion Suggestion importance[1-10]: 8 Why: The suggestion improves code safety by replacing the non-null assertion operator (!) with proper null checking, preventing potential runtime errors if the environment variable is undefined.	8
	Validate required email template parameters to prevent sending emails with missing information Add input validation for workspaceName and removedOn parameters to ensure they are not empty strings. apps/api/src/mail/emails/workspace-removal.tsx [18-21] export const RemovedFromWorkspaceEmail = ({ workspaceName, removedOn }: WorkspaceRemovalEmailProps) => { + if (!workspaceName?.trim() || !removedOn?.trim()) { + throw new Error('Workspace name and removal date are required') + } Apply this suggestion Suggestion importance[1-10]: 7 Why: Adding input validation for required parameters helps prevent sending incomplete or invalid emails, improving the robustness of the email template component.	7
General	Use exact dependency versions for email template packages to ensure consistent rendering The React Email dependencies should specify exact versions instead of using caret ranges (^) to ensure consistent email template rendering across deployments. This is critical for email templates that need to look identical every time. apps/api/package.json [37-39] -"@react-email/components": "^0.0.25", -"@react-email/preview": "0.0.11", -"@react-email/render": "^1.0.1", +"@react-email/components": "0.0.25", +"@react-email/preview": "0.0.11", +"@react-email/render": "1.0.1", Apply this suggestion Suggestion importance[1-10]: 7 Why: Using exact versions for email template dependencies is important for ensuring consistent email rendering across deployments. Version mismatches could lead to visual inconsistencies in production emails.	7

💡 Need additional feedback ? start a PR chat

---

Previous suggestions

✅ Suggestions up to commit 0a1f923

Category	Suggestion	Score
Error handling	Implement specific error handling for the email sending process Consider using a more specific error handling mechanism for the sendEmail method call. This will help in identifying and handling potential errors that may occur during the email sending process. apps/api/src/mail/services/mail.service.ts [261] -await this.sendEmail(email, subject, body) +try { + await this.sendEmail(email, subject, body); +} catch (error) { + this.logger.error(`Failed to send project removal email to ${email}`, error); + throw new Error('Failed to send project removal notification email'); +} Suggestion importance[1-10]: 8 Why: Adding specific error handling for the sendEmail method is a valuable enhancement. It improves the robustness of the code by allowing for better error tracking and handling, which is crucial for maintaining reliable email functionality.	8
Maintainability	✅ Extract the HTML email template into a separate file for better separation of concerns Suggestion Impact: The HTML email template was extracted from the inline definition to a separate component, which is then imported and rendered, aligning with the suggestion to improve separation of concerns. code diff: +import RemovedFromWorkspaceEmail from '../emails/workspace-removal' +import { render } from '@react-email/render' @Injectable() export class MailService implements IMailService { @@ -133,7 +135,7 @@ <p>keyshade Team</p> </body> ` - await this.sendEmail(process.env.ADMIN_EMAIL, subject, body) + await this.sendEmail(process.env.ADMIN_EMAIL!, subject, body) } async feedbackEmail(email: string, feedback: string): Promise<void> { @@ -158,106 +160,17 @@ await this.sendEmail(email, subject, body) } - async projectRemoval( + async removedFromWorkspace( email: string, - projectName: string, + workspaceName: string, removedOn: string ): Promise<void> { - const subject = 'Project Removal Notification' - const body = `<!DOCTYPE html> - <html lang="en"> - <head> - <style> - body { - font-family: 'Segoe UI', 'Roboto', sans-serif; - line-height: 1.6; - color: #04050a; - background-color: #fafafa; - margin: 0; - padding: 20px; - } + const subject = `Your access was revoked from ${workspaceName}` - table { - max-width: 600px; - margin: 0 auto; - background-color: #fff; - border-radius: 5px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - border-spacing: 0; - width: 100%; - } + const body = await render( + RemovedFromWorkspaceEmail({ removedOn, workspaceName }) + ) Consider extracting the HTML email template into a separate file and importing it. This will improve separation of concerns and make the code more maintainable. apps/api/src/mail/services/mail.service.ts [167-260] -const body = `<!DOCTYPE html> - <html lang="en"> - <head> - <style> - body { - font-family: 'Segoe UI', 'Roboto', sans-serif; - line-height: 1.6; - color: #04050a; - background-color: #fafafa; - margin: 0; - padding: 20px; - } - ... - </style> - </head> - <body> - ... - </body> - </html> -` +import { projectRemovalTemplate } from '../templates/projectRemoval.template'; +const body = projectRemovalTemplate(projectName, removedOn); + Suggestion importance[1-10]: 7 Why: Extracting the HTML email template into a separate file can enhance separation of concerns and improve maintainability. This suggestion is relevant and could significantly improve the code structure.	7
Enhancement	Use template literals for the entire HTML email template to improve readability and maintainability Consider using template literals for the entire HTML email template instead of concatenating strings. This will improve readability and make it easier to maintain the template. apps/api/src/mail/services/mail.service.ts [167-260] -const body = `<!DOCTYPE html> - <html lang="en"> - <head> - <style> - body { - font-family: 'Segoe UI', 'Roboto', sans-serif; - line-height: 1.6; - color: #04050a; - background-color: #fafafa; - margin: 0; - padding: 20px; - } - - table { - max-width: 600px; - margin: 0 auto; - background-color: #fff; - border-radius: 5px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - border-spacing: 0; - width: 100%; - } - - h1 { - color: #000; - margin-bottom: 20px; - font-size: 24px; - font-weight: 600; - } - - p { - margin-bottom: 15px; - color: #666; - } - - .p-40 { - padding: 40px; - } - - table tr td:first-child { - color: #000; - } - - table tr td:last-child { - color: #666; - } - - .info-table { - background-color: #fafafa; - border-radius: 5px; - margin-bottom: 20px; - } - - hr { - border: none; - border-top: 1px solid #eaeaea; - margin: 20px 0; - } - - .footer-text { - font-size: 12px; - color: #999; - text-align: center; - } - </style> - </head> - <body> - <table cellpadding="0" cellspacing="0" border="0" width="100%"> - <tr> - <td class="p-40"> - <h1>Project Removal Notification</h1> - <p>Dear User,</p> - <p>We hope this email finds you well. We wanted to inform you that your access to the following project has been removed:</p> - <table cellpadding="10" cellspacing="0" border="0" width="100%" style="background-color: #fafafa; border-radius: 5px; margin-bottom: 20px;"> - <tr> - <td>Project Name:</td> - <td>${projectName}</td> - </tr> - <tr> - <td>Removed On:</td> - <td>${removedOn}</td> - </tr> - </table> - <p>If you believe this action was taken in error or have any questions regarding this change, please don't hesitate to contact your project administrator or our support team.</p> - <p>We appreciate your understanding and thank you for your contributions to the project.</p> - <p>Best regards,<br>Team Keyshade</p> - <hr /> - <p class="footer-text">This is an automated message. Please do not reply to this email.</p> - </td> - </tr> - </table> - </body> - </html> +const body = ` +<!DOCTYPE html> +<html lang="en"> +<head> + <style> + body { + font-family: 'Segoe UI', 'Roboto', sans-serif; + line-height: 1.6; + color: #04050a; + background-color: #fafafa; + margin: 0; + padding: 20px; + } + table { + max-width: 600px; + margin: 0 auto; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + border-spacing: 0; + width: 100%; + } + h1 { + color: #000; + margin-bottom: 20px; + font-size: 24px; + font-weight: 600; + } + p { + margin-bottom: 15px; + color: #666; + } + .p-40 { + padding: 40px; + } + table tr td:first-child { + color: #000; + } + table tr td:last-child { + color: #666; + } + .info-table { + background-color: #fafafa; + border-radius: 5px; + margin-bottom: 20px; + } + hr { + border: none; + border-top: 1px solid #eaeaea; + margin: 20px 0; + } + .footer-text { + font-size: 12px; + color: #999; + text-align: center; + } + </style> +</head> +<body> + <table cellpadding="0" cellspacing="0" border="0" width="100%"> + <tr> + <td class="p-40"> + <h1>Project Removal Notification</h1> + <p>Dear User,</p> + <p>We hope this email finds you well. We wanted to inform you that your access to the following project has been removed:</p> + <table cellpadding="10" cellspacing="0" border="0" width="100%" style="background-color: #fafafa; border-radius: 5px; margin-bottom: 20px;"> + <tr> + <td>Project Name:</td> + <td>${projectName}</td> + </tr> + <tr> + <td>Removed On:</td> + <td>${removedOn}</td> + </tr> + </table> + <p>If you believe this action was taken in error or have any questions regarding this change, please don't hesitate to contact your project administrator or our support team.</p> + <p>We appreciate your understanding and thank you for your contributions to the project.</p> + <p>Best regards,<br>Team Keyshade</p> + <hr /> + <p class="footer-text">This is an automated message. Please do not reply to this email.</p> + </td> + </tr> + </table> +</body> +</html> ` Suggestion importance[1-10]: 5 Why: The suggestion to use template literals for the entire HTML email template is valid as it can improve readability and maintainability. However, the existing code already uses template literals, so the impact of this suggestion is minimal.	5

[rajdip-b]

Hey man! Nice work on the PR. Although, I think there's a bit of slack from our end. We created that issue at the very initial days. So it would be "Removal frrom Workspace" and not project. Can you please make the changes accordingly?

[Allan2000-Git]

Hey man! Nice work on the PR. Although, I think there's a bit of slack from our end. We created that issue at the very initial days. So it would be "Removal frrom Workspace" and not project. Can you please make the changes accordingly?

@rajdip-b Can you also share a URL of your logo if it's deployed on S3 or hosted anywhere, so that I can include in template. Also can you send the URL so that user can visit that page to know what workspaces he/she currently has, I can add a button also

[rajdip-b]

Hey man! Nice work on the PR. Although, I think there's a bit of slack from our end. We created that issue at the very initial days. So it would be "Removal frrom Workspace" and not project. Can you please make the changes accordingly?

@rajdip-b Can you also share a URL of your logo if it's deployed on S3 or hosted anywhere, so that I can include in template. Also can you send the URL so that user can visit that page to know what workspaces he/she currently has, I can add a button also

Unfortunately, currently we have none! This issue is a design issue so most of our things are in figma. Your PR will be closing the code-related stuff only. Eitherways, we will be working on a proper email template. So you won't need to worry too much about that.

[Allan2000-Git]

@rajdip-b I have made the changes. UI will now look like below ss

[rajdip-b]

@darksaiii @kriptonian1 thoughts on the UI?

[Allan2000-Git]

@darksaiii @kriptonian1 thoughts on the UI?

I'll have to create template using React email. Will update once completed

[Allan2000-Git]

@rajdip-b Where should I place the templates?

Should I create folder names templates in mail?

[rajdip-b]

Yes, I think that will work fine.

[rajdip-b]

• I'm not sure why we have the email in two files.
• We can reuse the CSS designs, so maybe you can move them into some place reusable

[Allan2000-Git]

@rajdip-b I'm facing issue. I have imported react component, but it's not detecting the component. Anything I'm missing?

[rajdip-b]

@kriptonian1 would be able to help you out in here, but he's on a leave until the upcoming Monday. So, im afraid your PR has to wait :/

[Allan2000-Git]

@kriptonian1 would be able to help you out in here, but he's on a leave until the upcoming Monday. So, im afraid your PR has to wait :/

Hey @rajdip-b, the issue is mail.service.ts is a typescript file, it won't detect JSX syntax. Maybe we will need to convert to JSX

[rajdip-b]

TSX sounds fine to me. Eitherways we shouldnt be using js

[kriptonian1]

React email supports typescript

[Allan2000-Git]

@rajdip-b @kriptonian1 Can you review it? UI looks the same as above image.

[rajdip-b]

@Allan2000-Git can you update your lockfile using pnpm i and push it?

[Allan2000-Git]

@rajdip-b Any idea why is this happening?
web:lint: Failed to load plugin 'turbo' declared in '.eslintrc.js » eslint-config-custom/next » C:\Users\HP\Documents\open-source\keyshade\node_modules\.pnpm\[email protected][email protected]\node_modules\eslint-config-turbo\index.js': Cannot convert undefined or null to object

[rajdip-b]

This might be because turbo was updated. try deleting all the node modules folder and do pnpm i

[Allan2000-Git]

No luck, its still the same error

[muntaxir4]

No luck, its still the same error

This is hopefully going to fix the lint issue. Update packages/eslint-config-custom/package.json to have the "eslint-config-turbo": "^2.3.1". This will reflect changes for the new turbo version.

[Allan2000-Git]

@rajdip-b Can you review the changes? Once merged, I can use this as a base codepath for creating other email templates

[codiumai-pr-agent-free]

Persistent review updated to latest commit 055755c

[rajdip-b]

@muntaxir4 tried the flow. He says he didn't get any emails after he left a workspace. Maybe you forgot to call the function in workspace-membership.service.ts?

[muntaxir4]

@rajdip-b Can you review the changes? Once merged, I can use this as a base codepath for creating other email templates

The sending of email upon removal from workspace isnt't implemented yet at https://github.com/keyshade-xyz/keyshade/blob/3a638239a216a7919254222c04fbac0391c85d43/apps/api/src/workspace-membership/service/workspace-membership.service.ts#L276C1-L293C6.

Creating a rough implementation for that, I was able to receive the desired email. Currently, the removedOn string will be a Date's ISO strring : 2024-11-27T18:39:41.793Z can you format it to be more readable?

UPDATE 1: Choose a type for removedOn (string/Date), preferably Date. Then format the removedOn to a more readable time.

[muntaxir4]

@Allan2000-Git I have pushed the changes that implements sending of email once user is removed from workspace. You may continue with formatting the removedOn, and then this PR could be merged.