Cleanup

2024-03-24 02:23:22 +08:00
parent 648d77b430
commit bce3479368
589 changed files with 37067 additions and 9596 deletions
--- a/packages/emails/src/account-delete.email.tsx
+++ b/packages/emails/src/account-delete.email.tsx
@@ -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>,
+  );
+}
--- a/packages/emails/src/index.ts
+++ b/packages/emails/src/index.ts
@@ -0,0 +1,2 @@
+export * from './invite.email';
+export * from './account-delete.email';
--- a/packages/emails/src/invite.email.tsx
+++ b/packages/emails/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>,
+  );
+}