Free React Email Shipping Notification Template

import * as React from 'react';

import {
  Band,
  Brand,
  Callout,
  CalloutLabel,
  Display,
  EmailImage,
  EmailLayout,
  Eyebrow,
  Figure,
  OutlineButton,
  Plate,
  Prose,
  SectionTitle,
  Spacer,
  Tracker,
  TrackerStep,
} from './components';

export interface ShippingEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  eyebrow?: string;
  headline?: React.ReactNode;
  hero?: EmailImage;
  steps?: TrackerStep[];
  tracking?: {
    /** Carrier and service, above the number. */
    label: string;
    number: string;
    cta: { label: string; href: string };
  };
  /** Something to read while the parcel is in transit. */
  aside?: {
    eyebrow: string;
    title: string;
    body: string;
    cta: { label: string; href: string };
  };
}

/**
 * Shipping notification — where the parcel is on its rail, the tracking
 * number set large enough to read at a glance, and one useful thing to do
 * while it travels.
 */
export function ShippingEmail({
  brand,
  subject = 'Your coffee is on a truck',
  preview = 'Tracking inside. It smells extremely good in there.',
  eyebrow = 'Shipped · 25 August',
  headline = (
    <>
      It has left
      <br />
      the building
    </>
  ),
  hero = {
    src: 'https://images.unsplash.com/photo-1442512595331-e89e73853f31?w=1200&h=600&q=75&auto=format&fit=crop',
    alt: 'Roastery equipment',
    width: 600,
    height: 300,
  },
  steps = [
    { label: 'Roasted', date: 'Mon 24', done: true },
    { label: 'Packed', date: 'Mon 24', done: true },
    { label: 'In transit', date: 'Tue 25', done: true },
    { label: 'Delivered', date: 'Thu 27' },
  ],
  tracking = {
    label: 'Tracking number · USPS Priority',
    number: '9405 5118 9956 2041 7730',
    cta: { label: 'Track the package', href: '#' },
  },
  aside = {
    eyebrow: 'While you wait',
    title: 'Grind it right before you brew',
    body: 'Whole bean holds its aromatics for about three weeks. Ground coffee holds them for about twenty minutes. This is the single cheapest upgrade available to you.',
    cta: { label: 'Read the brew guide', href: '#' },
  },
}: ShippingEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="36px 40px 24px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display>{headline}</Display>
      </Band>

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

      <Band padding="0 40px 34px">
        <Tracker steps={steps} />
        <Spacer height={26} />
        <Callout>
          <CalloutLabel>{tracking.label}</CalloutLabel>
          <Figure size={26} letterSpacing=".08em" margin="0 0 16px">
            {tracking.number}
          </Figure>
          <OutlineButton href={tracking.cta.href} align="center">
            {tracking.cta.label}
          </OutlineButton>
        </Callout>
      </Band>

      <Band tone="dark" align="center">
        <Eyebrow tone="dark">{aside.eyebrow}</Eyebrow>
        <SectionTitle tone="dark">{aside.title}</SectionTitle>
        <Prose
          tone="dark"
          size={14}
          lineHeight={1.65}
          margin="0 auto 22px"
          maxWidth={400}
        >
          {aside.body}
        </Prose>
        <OutlineButton href={aside.cta.href} tone="dark" align="center">
          {aside.cta.label}
        </OutlineButton>
      </Band>
    </EmailLayout>
  );
}

export default ShippingEmail;