Free React Email Cancellation Template

import * as React from 'react';

import {
  Band,
  BodyText,
  Brand,
  colors,
  CTAButton,
  DataRow,
  DataTable,
  Display,
  EmailLayout,
  InlineLink,
  Kicker,
  Lead,
  Note,
} from './components';

export interface CancellationEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  /** The dates that matter after cancelling. */
  dates?: DataRow[];
  body?: React.ReactNode;
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Cancellation — confirms without arguing, gives the dates, and puts the data
 * export first. The offer to resume is one line, at the end, where it belongs.
 */
export function CancellationEmail({
  brand,
  subject = 'Your Sonar subscription is canceled',
  preview = 'Confirmed — access runs through Aug 31 and your export is ready.',
  label = 'Account',
  kicker = 'Cancellation confirmed',
  headline = (
    <>
      THAT’S
      <br />
      DONE.
    </>
  ),
  lead = 'Northwind’s Pro subscription is canceled. No further charges. Nothing else to do.',
  dates = [
    { label: 'Access continues through', value: 'Aug 31, 2026' },
    { label: 'Final invoice', value: '$0.00' },
    { label: 'Data retained until', value: 'Sep 30, 2026' },
  ],
  body = 'Grab your data before September 30 — full event history as CSV or Parquet, no gating.',
  cta = { label: 'Export my data', href: 'https://sonar.example.com/export' },
  note = (
    <>
      {'Changed your mind before Aug 31? '}
      <InlineLink href="https://sonar.example.com/billing/resume">
        Resume instantly
      </InlineLink>
      {' and nothing is lost. If you have 30 seconds, '}
      <InlineLink href="https://sonar.example.com/why">
        tell us why you left
      </InlineLink>
      {'.'}
    </>
  ),
}: CancellationEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="muted"
    >
      <Band tone="muted" padding="48px 32px 42px 32px">
        <Kicker color={colors.ink}>{kicker}</Kicker>
        <Display size={56}>{headline}</Display>
        <Lead>{lead}</Lead>
      </Band>

      <Band padding="36px 32px">
        <DataTable rows={dates} />
        <BodyText>{body}</BodyText>
        <CTAButton href={cta.href} background="ink" color="mint">
          {cta.label}
        </CTAButton>
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default CancellationEmail;