pocket-id/email-templates/emails/api-key-expiring-soon.tsx

import { BaseTemplate } from '../components/base-template';
import CardHeader from '../components/card-header';
import { Muted, Paragraph } from '../components/text';
import { type SharedProps, sharedPreviewProps, sharedTemplateProps } from '../props';

interface ApiKeyExpiringData {
	name: string;
	apiKeyName: string;
	expiresAt: string;
}

interface ApiKeyExpiringEmailProps extends SharedProps {
	data: ApiKeyExpiringData;
}

export const ApiKeyExpiringEmail = ({ data, ...props }: ApiKeyExpiringEmailProps) => (
	<BaseTemplate {...props} preview={`Your API key ${data.apiKeyName} expires on ${data.expiresAt}`}>
		<CardHeader title="API key expiring soon" />
		<Paragraph>Hello {data.name},</Paragraph>
		<Paragraph>
			Your API key <strong>{data.apiKeyName}</strong> will expire on{' '}
			<strong>{data.expiresAt}</strong>. Anything that uses this key will stop working once it
			expires.
		</Paragraph>

		<Muted>
			To keep access, create a new API key in your {props.appName} account settings before then.
		</Muted>
	</BaseTemplate>
);

export default ApiKeyExpiringEmail;

ApiKeyExpiringEmail.TemplateProps = {
	...sharedTemplateProps,
	data: {
		name: '{{.Data.Name}}',
		apiKeyName: '{{.Data.ApiKeyName}}',
		expiresAt: '{{.Data.ExpiresAt.Format "2006-01-02 15:04:05 MST"}}'
	}
};

ApiKeyExpiringEmail.PreviewProps = {
	...sharedPreviewProps,
	data: {
		name: 'Elias',
		apiKeyName: 'CI deploy key',
		expiresAt: '2026-01-30 12:00:00 UTC'
	}
};