zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated account deletion process and refactor packages

Browse Source 
The primary update was on the process of account deletion where email notifications are now sent to users. The @kit/emails was also renamed to @kit/email-templates and adjustments were accordingly made on the relevant code and configuration files. In addition, package interaction was refactored to enhance readability and ease of maintenance. Some minor alterations were made on the User Interface, and code comments were updated.
This commit is contained in:
giancarlo
2024-03-28 11:20:12 +08:00
parent 6048cc4759
commit 3ac4d3b00d
30 changed files with 290 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/email-templates/README.md Normal file
View File

@@ -0,0 +1,5 @@
# Emails - @kit/email-templates
This package is responsible for managing email templates using the react.email library.
Here you can define email templates using React components and export them as a function that returns the email content.

38
packages/email-templates/package.json Normal file
View File

@@ -0,0 +1,38 @@
{
"name": "@kit/email-templates",
"private": true,
"version": "0.1.0",
"scripts": {
"clean": "git clean -xdf .turbo node_modules",
"format": "prettier --check \"**/*.{ts,tsx}\"",
"lint": "eslint .",
"typecheck": "tsc --noEmit"
},
"prettier": "@kit/prettier-config",
"exports": {
".": "./src/index.ts"
},
"dependencies": {
"@react-email/components": "0.0.15"
},
"devDependencies": {
"@kit/eslint-config": "0.2.0",
"@kit/prettier-config": "0.1.0",
"@kit/tailwind-config": "0.1.0",
"@kit/tsconfig": "0.1.0"
},
"eslintConfig": {
"root": true,
"extends": [
"@kit/eslint-config/base",
"@kit/eslint-config/react"
]
},
"typesVersions": {
"*": {
"*": [
"src/*"
]
}
}
}

62
packages/email-templates/src/account-delete.email.tsx Normal file
View File

@@ -0,0 +1,62 @@
import {
Body,
Container,
Head,
Heading,
Html,
Preview,
Tailwind,
Text,
render,
} from '@react-email/components';
interface Props {
productName: string;
userDisplayName: string;
}
export function renderAccountDeleteEmail(props: Props) {
const previewText = `We have deleted your ${props.productName} account`;
return render(
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="mx-auto my-auto bg-gray-50 font-sans">
<Container className="mx-auto my-[40px] w-[465px] rounded-lg border border-solid border-[#eaeaea] bg-white p-[20px]">
<Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-bold text-black">
{previewText}
</Heading>
<Text className="text-[14px] leading-[24px] text-black">
Hello {props.userDisplayName},
</Text>
<Text className="text-[14px] leading-[24px] text-black">
This is to confirm that we&apos;ve processed your request to
delete your account with {props.productName}.
</Text>
<Text className="text-[14px] leading-[24px] text-black">
We&apos;re sorry to see you go. Please note that this action is
irreversible, and we&apos;ll make sure to delete all of your data
from our systems.
</Text>
<Text className="text-[14px] leading-[24px] text-black">
We thank you again for using {props.productName}.
</Text>
<Text className="text-[14px] leading-[24px] text-black">
Best,
<br />
The {props.productName} Team
</Text>
</Container>
</Body>
</Tailwind>
</Html>,
);
}

2
packages/email-templates/src/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './invite.email';
export * from './account-delete.email';

90
packages/email-templates/src/invite.email.tsx Normal file
View File

@@ -0,0 +1,90 @@
import {
Body,
Button,
Column,
Container,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Row,
Section,
Tailwind,
Text,
render,
} from '@react-email/components';
interface Props {
organizationName: string;
organizationLogo?: string;
inviter: string | undefined;
invitedUserEmail: string;
link: string;
productName: string;
}
export function renderInviteEmail(props: Props) {
const previewText = `Join ${props.invitedUserEmail} on ${props.productName}`;
return render(
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="mx-auto my-auto bg-gray-50 font-sans">
<Container className="mx-auto my-[40px] w-[465px] rounded-lg border border-solid border-[#eaeaea] bg-white p-[20px]">
<Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
Join <strong>{props.organizationName}</strong> on{' '}
<strong>{props.productName}</strong>
</Heading>
<Text className="text-[14px] leading-[24px] text-black">
Hello {props.invitedUserEmail},
</Text>
<Text className="text-[14px] leading-[24px] text-black">
<strong>{props.inviter}</strong> has invited you to the{' '}
<strong>{props.organizationName}</strong> team on{' '}
<strong>{props.productName}</strong>.
</Text>
{props.organizationLogo && (
<Section>
<Row>
<Column align="center">
<Img
className="rounded-full"
src={props.organizationLogo}
width="64"
height="64"
/>
</Column>
</Row>
</Section>
)}
<Section className="mb-[32px] mt-[32px] text-center">
<Button
className="rounded bg-[#000000] px-[20px] py-[12px] text-center text-[12px] font-semibold text-white no-underline"
href={props.link}
>
Join {props.organizationName}
</Button>
</Section>
<Text className="text-[14px] leading-[24px] text-black">
or copy and paste this URL into your browser:{' '}
<Link href={props.link} className="text-blue-600 no-underline">
{props.link}
</Link>
</Text>
<Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
<Text className="text-[12px] leading-[24px] text-[#666666]">
This invitation was intended for{' '}
<span className="text-black">{props.invitedUserEmail}</span>.
</Text>
</Container>
</Body>
</Tailwind>
</Html>,
);
}

8
packages/email-templates/tsconfig.json Normal file
View File

@@ -0,0 +1,8 @@
{
"extends": "@kit/tsconfig/base.json",
"compilerOptions": {
"tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
},
"include": ["*.ts", "src"],
"exclude": ["node_modules"]
}