Updated account deletion process and refactor packages

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

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>,
);
}