Skip to content

Commit

Permalink
chore(email): update styling, copy, urls (#2141)
Browse files Browse the repository at this point in the history
* chore(email): update styling, copy, urls

* update urls

* fix class name

* remove unused imports, update date previews

* [autofix.ci] apply automated fixes

* make James the signer of all emails

* add biome ignore to prevent it from breaking an import

* add biome ignore to other component

* Update copy and links to use Dub

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: James Perkins <[email protected]>
Co-authored-by: James P <[email protected]>
  • Loading branch information
4 people authored Oct 2, 2024
1 parent 527c6ae commit b7f9828
Show file tree
Hide file tree
Showing 11 changed files with 309 additions and 255 deletions.
69 changes: 27 additions & 42 deletions internal/resend/emails/payment_issue.tsx
Original file line number Diff line number Diff line change
@@ -1,68 +1,53 @@
"use client";
import { Button } from "@react-email/button";
import { Container } from "@react-email/container";
import { Head } from "@react-email/head";
import { Heading } from "@react-email/heading";
import { Hr } from "@react-email/hr";
import { Html } from "@react-email/html";
import { Link } from "@react-email/link";
import { Section } from "@react-email/section";
import { Tailwind } from "@react-email/tailwind";
import { Text } from "@react-email/text";
import React from "react";
import tailwindConfig from "../tailwind.config";
import { Layout } from "../src/components/layout";
import { Signature } from "../src/components/signature";
export type Props = {
username: string;
date: string;
};

export function PaymentIssue({ username, date }: Props) {
return (
<Tailwind config={tailwindConfig}>
<Html className="font-sans text-zinc-800">
<Head />
<Section className="bg-white">
<Container className="container mx-auto">
<Heading className="font-sans text-2xl text-semibold">
There was an issue with your payment.
</Heading>
<Text>Hey {username},</Text>
<Text>
We had trouble processing your payment on {date}. Please update your payment
information below to prevent your account from being downgraded.
</Text>
<Layout>
<Heading className="font-sans text-3xl text-semibold text-center">
There was an issue with your payment.
</Heading>
<Text>Hey {username},</Text>
<Text>
We had trouble processing your payment on {date}. Please update your payment information
below to prevent your account from being downgraded.
</Text>

<Container className="flex items-center justify-center my-8">
<Button
href="https://unkey.dev/app/settings/billing/stripe"
className="px-4 py-2 text-white bg-black rounded"
>
Update payment information
</Button>
</Container>
<Section className="text-center py-3">
<Button
href="https://app.unkey.com/settings/billing/stripe"
className="bg-gray-900 text-gray-50 rounded-lg p-3 w-2/3"
>
Update payment information
</Button>
</Section>

<Hr />
<Text>
Need help? Please reach out to{" "}
<Link href="mailto:[email protected]">[email protected]</Link> or just reply to this
email.
</Text>
<Hr />
<Text>
Need help? Please reach out to{" "}
<Link href="mailto:[email protected]">[email protected]</Link> or just reply to this email.
</Text>

<Text>
Cheers,
<br />
Andreas
</Text>
</Container>
</Section>
</Html>
</Tailwind>
<Signature signedBy="James" />
</Layout>
);
}

PaymentIssue.PreviewProps = {
username: "Mr. Pilkington",
date: "2024 03 08",
date: "Tue Oct 01 2024", // Date().toDateString
} satisfies Props;

export default PaymentIssue;
83 changes: 42 additions & 41 deletions internal/resend/emails/secret_scanning_key_detected.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
"use client";
import { Button } from "@react-email/button";
import { Container } from "@react-email/container";
import { Head } from "@react-email/head";
import { Heading } from "@react-email/heading";
import { Hr } from "@react-email/hr";
import { Html } from "@react-email/html";
import { Link } from "@react-email/link";
import { Section } from "@react-email/section";
import { Tailwind } from "@react-email/tailwind";
import { Text } from "@react-email/text";
import React from "react";
import tailwindConfig from "../tailwind.config";
import { Layout } from "../src/components/layout";
import { Signature } from "../src/components/signature";
export type Props = {
date: string;
source: string;
Expand All @@ -19,45 +16,49 @@ export type Props = {

export function SecretScanningKeyDetected({ date, source, url }: Props) {
return (
<Tailwind config={tailwindConfig}>
<Html className="font-sans text-zinc-800">
<Head />
<Section className="bg-white">
<Container className="container mx-auto">
<Heading className="font-sans text-2xl text-semibold">
Alert! One of your keys was found to be leaked.
</Heading>
<Text>Hello</Text>
<Text>Github has found one of your keys has been leaked. Details are as follows:</Text>
<Text>- Source: {source} </Text>
<Text>- Date: {date} </Text>
<Text>- URL: {url} </Text>
<Container className="flex items-center justify-center my-8">
<Button href={url} className="px-4 py-2 text-white bg-black rounded">
Go to source
</Button>
</Container>
<Hr />
<Text>
You can disable the Root Key in your dashboard by following our docs listed here:{" "}
<Link href="https://www.unkey.com/docs/security/root-keys">here.</Link> If you have
any problems or questions, please reach out to
<Link href="mailto:[email protected]">[email protected]</Link> or just reply to this
email.
</Text>
<Text>
Cheers,
<br />
James
</Text>
</Container>
</Section>
</Html>
</Tailwind>
<Layout>
<Heading className="font-sans text-3xl text-semibold text-center">
Warning! One of your keys was leaked!
</Heading>
<Text>Hi there!</Text>
<Text>Github found that one of your keys has been leaked. Details are as follows:</Text>
<ul className="pb-4">
<li className="pt-4">
{" "}
<strong>Source:</strong> {source}{" "}
</li>
<li className="pt-4">
{" "}
<strong>Date:</strong> {date}{" "}
</li>
<li className="pt-4">
{" "}
<strong>URL:</strong> {url}
</li>
</ul>
<Section className="text-center py-3">
<Button href={url} className="bg-gray-900 text-gray-50 rounded-lg p-3 w-2/3">
Go to source
</Button>
</Section>
<Hr />
<Text>
You can disable the Root Key in your dashboard by following our docs available at{" "}
<Link href="https://www.unkey.com/docs/security/root-keys">
https://www.unkey.com/docs/security/root-keys
</Link>
.
</Text>
<Text>
Need help? Please reach out to{" "}
<Link href="mailto:[email protected]">[email protected]</Link> or just reply to this email.
</Text>
<Signature signedBy="James" />
</Layout>
);
}
SecretScanningKeyDetected.PreviewProps = {
date: "7/12/2024",
date: "Tue Oct 01 2024", // Date().toDateString
source: "commit",
url: "http://unkey.com",
} satisfies Props;
Expand Down
75 changes: 30 additions & 45 deletions internal/resend/emails/subscription_ended.tsx
Original file line number Diff line number Diff line change
@@ -1,64 +1,49 @@
"use client";
import { Button } from "@react-email/button";
import { Container } from "@react-email/container";
import { Head } from "@react-email/head";
import { Heading } from "@react-email/heading";
import { Hr } from "@react-email/hr";
import { Html } from "@react-email/html";
import { Section } from "@react-email/section";
import { Tailwind } from "@react-email/tailwind";
import { Text } from "@react-email/text";
import React from "react";
import tailwindConfig from "../tailwind.config";
import { Layout } from "../src/components/layout";
import { Signature } from "../src/components/signature";
export type Props = {
username: string;
};

export function SubscriptionEnded({ username }: Props) {
return (
<Tailwind config={tailwindConfig}>
<Html className="font-sans text-zinc-800">
<Head />
<Section className="bg-white">
<Container className="container mx-auto">
<Heading className="font-sans text-2xl text-semibold">
Your Unkey subscription has ended.
</Heading>
<Text>Hey {username},</Text>
<Text>
We're reaching out to let you know that your trial period has come to an end for Unkey
Pro. We have downgraded the workspace to free, which means you lose access to the
workspace, but we will retain all your team and key data.
</Text>
<Text>
If you want to continue with Unkey Pro, click the button below, and you can add your
credit card.
</Text>
<Layout>
<Heading className="font-sans text-3xl text-semibold text-center">
Your Unkey subscription has ended.
</Heading>
<Text>Hey {username},</Text>
<Text>
We're reaching out to let you know that your trial period has come to an end for Unkey Pro.
We have downgraded the workspace to Free, which means you lose access to the workspace, but
we will retain all your team and key data.
</Text>
<Text>
If you want to continue with Unkey Pro, click the button below, and you can add your credit
card.
</Text>

<Container className="flex items-center justify-center my-8">
<Button
href="https://unkey.dev/app/settings/billing"
className="px-4 py-2 text-white bg-black rounded"
>
Upgrade Now
</Button>
</Container>
<Section className="text-center py-3">
<Button
href="https://app.unkey.com/settings/billing"
className="bg-gray-900 text-gray-50 rounded-lg p-3 w-2/3"
>
Upgrade Now
</Button>
</Section>

<Hr />
<Text>
If you have any feedback, please reply to this email. We would love to hear all about
it.
</Text>
<Hr />
<Text>
If you have any feedback, please reply to this email. We would love to hear all about it.
</Text>

<Text>
Cheers,
<br />
Andreas
</Text>
</Container>
</Section>
</Html>
</Tailwind>
<Signature signedBy="James" />
</Layout>
);
}

Expand Down
Loading

1 comment on commit b7f9828

@vercel
Copy link

@vercel vercel bot commented on b7f9828 Oct 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

planetfall – ./apps/planetfall

planetfall-unkey.vercel.app
planetfall.unkey.dev
planetfall-git-main-unkey.vercel.app
planetfall-two.vercel.app

Please sign in to comment.