Free React Email Win-back Template

import * as React from 'react';

import {
  Band,
  Brand,
  Callout,
  CalloutLabel,
  Centered,
  Display,
  EmailImage,
  EmailLayout,
  Eyebrow,
  Figure,
  OutlineButton,
  Plate,
  ProductCardProps,
  ProductGrid,
  Prose,
  Spacer,
  TextLink,
  colors,
} from './components';

export interface WinbackEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  eyebrow?: string;
  headline?: React.ReactNode;
  hero?: EmailImage;
  body?: string;
  /** The comeback offer. */
  code?: { label: string; value: string };
  cta?: { label: string; href: string };
  /** What has changed since they left. */
  whatsNew?: {
    eyebrow: string;
    products: ProductCardProps[];
  };
  /** The honest alternative to unsubscribing. */
  downgrade?: {
    body: string;
    label: string;
    href: string;
  };
}

/**
 * Win-back — opens on the deep ground because the tone is different from
 * every other email in the sequence, offers a real discount, and ends by
 * offering less email rather than begging for attention.
 */
export function WinbackEmail({
  brand,
  subject = 'Your grinder has been very quiet',
  preview = 'Six months. 20% off. No hard feelings.',
  eyebrow = 'It has been six months',
  headline = (
    <>
      We are not
      <br />
      upset. Slightly
      <br />
      concerned.
    </>
  ),
  hero = {
    src: 'https://images.unsplash.com/photo-1518057111178-44a106bad636?w=1200&h=720&q=75&auto=format&fit=crop',
    alt: 'Hands holding a steaming mug',
    width: 600,
    height: 360,
  },
  body = 'Maybe you found a local roaster. Maybe you switched to tea, which we would respect out loud and question privately. Either way, here is 20% off anything on the site for the next ten days.',
  code = { label: 'Ten days, one use', value: 'COMEBACK20' },
  cta = { label: 'See what changed', href: '#' },
  whatsNew = {
    eyebrow: 'New since you left',
    products: [
      {
        image: {
          src: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Solstice',
          width: 600,
          height: 220,
        },
        name: 'Solstice',
        description: 'The release everyone argues about',
        price: '$21',
      },
      {
        image: {
          src: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Wildflower Honey',
          width: 600,
          height: 220,
        },
        name: 'Wildflower Honey',
        description: 'From the roof of the roastery',
        price: '$12',
      },
    ],
  },
  downgrade = {
    body: 'If you would rather hear from us less, that is a real option and we will not be weird about it.',
    label: 'Email me monthly instead',
    href: '#',
  },
}: WinbackEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band tone="dark" padding="44px 40px 28px" align="center">
        <Eyebrow tone="dark">{eyebrow}</Eyebrow>
        <Display tone="dark" size={44}>
          {headline}
        </Display>
      </Band>

      <Band padding="34px 40px 0">
        <Plate {...hero} />
      </Band>

      <Band padding="28px 40px 34px" align="center">
        <Prose>{body}</Prose>
        {code ? (
          <>
            <Callout variant="dashed">
              <CalloutLabel>{code.label}</CalloutLabel>
              <Figure>{code.value}</Figure>
            </Callout>
            <Spacer height={24} />
          </>
        ) : null}
        <OutlineButton href={cta.href} align="center">
          {cta.label}
        </OutlineButton>
      </Band>

      <Band tone="paper" padding="34px 40px 40px">
        <Centered>
          <Eyebrow>{whatsNew.eyebrow}</Eyebrow>
        </Centered>
        <Spacer height={18} />
        <ProductGrid products={whatsNew.products} />
      </Band>

      <Band tone="dark" padding="28px 40px 32px" align="center">
        <Prose size={13} margin="0 0 16px" color={colors.onDarkFaint}>
          {downgrade.body}
        </Prose>
        <TextLink href={downgrade.href} tone="dark">
          {downgrade.label}
        </TextLink>
      </Band>
    </EmailLayout>
  );
}

export default WinbackEmail;