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.
2024-03-28 11:20:12 +08:00
parent 6048cc4759
commit 3ac4d3b00d
30 changed files with 290 additions and 264 deletions
--- a/packages/email-templates/src/invite.email.tsx
+++ b/packages/email-templates/src/invite.email.tsx
@@ -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>,
+  );
+}