Free React Email Loyalty & Referral Template

import * as React from 'react';

import {
  Band,
  Brand,
  Callout,
  CalloutLabel,
  Centered,
  Columns,
  Display,
  EmailImage,
  EmailLayout,
  Eyebrow,
  Note,
  NumberedList,
  OutlineButton,
  Plate,
  ProgressBar,
  Prose,
  SectionTitle,
  Spacer,
  colors,
} from './components';

export interface LoyaltyReferralEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  eyebrow?: string;
  headline?: React.ReactNode;
  intro?: string;
  /** The referral link and the button that copies it. */
  referral?: {
    label: string;
    /** Everything before the customer's handle. */
    prefix: string;
    /** The handle, set in the accent. */
    handle: string;
    cta: { label: string; href: string };
  };
  /** Points, tier and what is left to the next one. */
  status?: {
    eyebrow: string;
    title: string;
    /** 0–100. */
    percent: number;
    caption: string;
    tiers: string[];
    cta: { label: string; href: string };
  };
  /** Where else the points work. */
  aside?: {
    image: EmailImage;
    title: string;
    body: string;
    cta: { label: string; href: string };
  };
}

/**
 * Loyalty and referral — the link at the top where it can be copied, the
 * points meter in the middle, and the tiers spelled out so the next one is
 * worth chasing.
 */
export function LoyaltyReferralEmail({
  brand,
  subject = 'Give $10, get $10',
  preview = 'Your friends drink instant coffee. You can fix that.',
  eyebrow = 'Chorus Club',
  headline = (
    <>
      Give $10.
      <br />
      Get $10.
    </>
  ),
  intro = 'Send a friend your link. They save ten dollars on their first order, you get ten dollars the moment it ships. There is no cap, which people have tested.',
  referral = {
    label: 'Your link',
    prefix: 'dawnchorus.co/r/',
    handle: 'marguerite',
    cta: { label: 'Copy and share', href: '#' },
  },
  status = {
    eyebrow: 'Where you stand',
    title: '412 points · Tier II',
    percent: 62,
    caption: '238 points to Tier III · free shipping for a year',
    tiers: [
      'Tier I — $5 back every 200 points',
      'Tier II — early access to limited roasts, and a free grind upgrade',
      'Tier III — free shipping for twelve months, and a bag on your birthday',
    ],
    cta: { label: 'View my rewards', href: '#' },
  },
  aside = {
    image: {
      src: 'https://images.unsplash.com/photo-1453614512568-c4024d13c247?w=1200&h=460&q=75&auto=format&fit=crop',
      alt: 'Coffee shop interior',
      width: 600,
      height: 230,
    },
    title: 'Points work in the café too',
    body: 'Scan your code at Wythe Avenue and it all counts. Yes, including the pastry. Especially the pastry.',
    cta: { label: 'Find the café', href: '#' },
  },
}: LoyaltyReferralEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="36px 40px 26px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display>{headline}</Display>
        <Prose margin="16px auto 0" maxWidth={400}>
          {intro}
        </Prose>
      </Band>

      <Band padding="0 40px 32px">
        <Callout>
          <CalloutLabel margin="0 0 8px">{referral.label}</CalloutLabel>
          <Note size={15} margin="0 0 16px" color={colors.ink}>
            {referral.prefix}
            <span style={{ color: colors.accent }}>{referral.handle}</span>
          </Note>
          <OutlineButton href={referral.cta.href} align="center">
            {referral.cta.label}
          </OutlineButton>
        </Callout>
      </Band>

      <Band tone="dark">
        <Centered>
          <Eyebrow tone="dark">{status.eyebrow}</Eyebrow>
          <SectionTitle tone="dark">{status.title}</SectionTitle>
        </Centered>
        <Spacer height={14} />
        <ProgressBar percent={status.percent} />
        <Note size={12} margin="10px 0 26px" color={colors.onDarkMuted} figures>
          {status.caption}
        </Note>
        <NumberedList items={status.tiers} />
        <Spacer height={24} />
        <Centered>
          <OutlineButton href={status.cta.href} tone="dark" align="center">
            {status.cta.label}
          </OutlineButton>
        </Centered>
      </Band>

      <Band padding="34px 40px 40px">
        <Columns
          left={<Plate {...aside.image} />}
          right={
            <>
              <SectionTitle>{aside.title}</SectionTitle>
              <Prose size={14} lineHeight={1.65} margin="0 0 14px">
                {aside.body}
              </Prose>
              <OutlineButton href={aside.cta.href}>
                {aside.cta.label}
              </OutlineButton>
            </>
          }
        />
      </Band>
    </EmailLayout>
  );
}

export default LoyaltyReferralEmail;