Free React Email Review Request Template

import * as React from 'react';

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

export interface ReviewRequestEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  eyebrow?: string;
  headline?: React.ReactNode;
  /** What they bought, and when it arrived. */
  purchase?: {
    image: EmailImage;
    title: string;
    body: string;
  };
  rating?: {
    label: string;
    /** Deep-link each star to a prefilled review. */
    href?: (rating: number) => string;
    note?: string;
  };
  /** The incentive, stated plainly. */
  incentive?: {
    eyebrow: string;
    title: string;
    body: string;
    cta: { label: string; href: string };
  };
}

/**
 * Review request — a one-tap rating in the body of the email, and an honest
 * incentive for the people willing to write more than a star.
 */
export function ReviewRequestEmail({
  brand,
  subject = 'How was the Solstice?',
  preview = 'Two taps, and you make the next person’s decision easier.',
  eyebrow = 'You ordered this 14 days ago',
  headline = (
    <>
      Be honest
      <br />
      with us
    </>
  ),
  purchase = {
    image: {
      src: 'https://images.unsplash.com/photo-1610889556528-9a770e32642f?w=1200&h=480&q=75&auto=format&fit=crop',
      alt: 'Espresso in a cup',
      width: 600,
      height: 240,
    },
    title: 'Solstice · 12 oz',
    body: 'Delivered 9 August. Somewhere between then and now you formed an opinion. We would like it, including the unflattering version.',
  },
  rating = {
    label: 'Tap a rating',
    note: 'Takes about eleven seconds.',
  },
  incentive = {
    eyebrow: 'A small bribe',
    title: '$5 off your next bag',
    body: 'Leave a written review and we will drop five dollars on your account. It works whether you liked the coffee or not, which we think is the fair way to do it.',
    cta: { label: 'Write a review', href: '#' },
  },
}: ReviewRequestEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="36px 40px 24px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display>{headline}</Display>
      </Band>

      <Band padding="8px 40px 34px">
        <Columns
          left={<Plate {...purchase.image} />}
          right={
            <>
              <SectionTitle>{purchase.title}</SectionTitle>
              <Prose size={14} lineHeight={1.65} margin="0 0 18px">
                {purchase.body}
              </Prose>
            </>
          }
        />
        <Spacer height={26} />
        <Callout padding="26px 20px">
          <CalloutLabel margin="0 0 16px">{rating.label}</CalloutLabel>
          <StarRating href={rating.href} />
          {rating.note ? <Note margin="16px 0 0">{rating.note}</Note> : null}
        </Callout>
      </Band>

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

export default ReviewRequestEmail;