Skip to content

Commit

Permalink
feat: Add SaaS 100K plan (#473)
Browse files Browse the repository at this point in the history 
* Add 100k

* OK with new cards

* Add FAQ
  • Loading branch information
@amaury1093
amaury1093 authored Dec 13, 2023
1 parent 3870082 commit 6284f1e
Show file tree
Hide file tree
Showing 18 changed files with 459 additions and 299 deletions.
20 changes: 12 additions & 8 deletions src/components/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,13 @@ export function Dashboard({ products }: DashboardProps): React.ReactElement {
Thanks for using the Reacher{" "}
{productName(subscription?.prices?.products)}!
</Text>
{subscription && (
<>
<StripeMananageButton>
Manage Subscription
</StripeMananageButton>
</>
)}
<StripeMananageButton>Billing History</StripeMananageButton>
</div>
<div>
Expand All @@ -62,21 +69,18 @@ export function Dashboard({ products }: DashboardProps): React.ReactElement {
{formatDate(new Date(subscription.cancel_at))}
</Text>
)}
<div className="text-right">
{subscription ? (
<StripeMananageButton>
Manage Subscription
</StripeMananageButton>
) : (
{subscription?.prices?.products?.id !==
COMMERCIAL_LICENSE_PRODUCT_ID && (
<div className="text-right">
<GLink
color
href="/pricing"
data-sa-link-event="dashboard:upgrade:click"
>
<strong>Upgrade Plan</strong>
</GLink>
)}
</div>
</div>
)}
</div>
</section>

Expand Down
17 changes: 15 additions & 2 deletions src/components/Nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */

import { Link as GLink, Select, Spacer, Text } from "@geist-ui/react";
import { Button, Link as GLink, Select, Spacer, Text } from "@geist-ui/react";
import Image from "next/image";
import { useRouter } from "next/router";
import React from "react";
Expand All @@ -9,6 +9,7 @@ import logo from "../assets/logo/reacher.svg";
import { sentryException } from "@/util/sentry";
import { useUser } from "@/util/useUser";
import styles from "./Nav.module.css";
import Link from "next/link";

export function Nav(): React.ReactElement {
const { user, userDetails, signOut } = useUser();
Expand Down Expand Up @@ -64,7 +65,7 @@ export function Nav(): React.ReactElement {
Help Center
</GLink>
</div>
{user && (
{user ? (
<Select
className={styles.dropdown}
placeholder={userDetails?.full_name || user.email}
Expand All @@ -79,6 +80,18 @@ export function Nav(): React.ReactElement {
Log Out{" "}
</Select.Option>
</Select>
) : (
<>
<Link href="/login">
<Button auto>Login</Button>
</Link>
<Spacer x={0.5} />
<Link href="/signup">
<Button auto type="success">
Get Started - 50 free emails
</Button>
</Link>
</>
)}
</header>
);
Expand Down
18 changes: 11 additions & 7 deletions src/components/ProductCard/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,22 @@ import React from "react";
import styles from "./Card.module.css";

export interface CardProps extends React.HTMLProps<HTMLDivElement> {
body?: string | React.ReactChild;
cta?: string | React.ReactChild;
features?: (string | React.ReactChild)[];
header: string | React.ReactChild;
price?: string | React.ReactChild;
subtitle?: string | React.ReactChild;
footer?: string | React.ReactChild;
body?: React.ReactElement;
cta?: React.ReactElement;
extra?: React.ReactElement;
features?: (string | React.ReactElement)[];
header?: string | React.ReactElement;
price?: string | React.ReactElement;
subtitle?: React.ReactElement;
footer?: React.ReactElement;
title: string;
}

export function Card({
cta,
header,
features,
extra,
price,
title,
subtitle,
Expand Down Expand Up @@ -52,6 +54,8 @@ export function Card({
<Divider />
<Spacer />

{extra}

<div>
<Text b small>
What you get:
Expand Down
108 changes: 108 additions & 0 deletions src/components/ProductCard/Commercial.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import React from "react";
import { Check, Info } from "@geist-ui/react-icons";
import { ProductCard, ProductCardProps } from "./ProductCard";
import { Spacer, Text } from "@geist-ui/react";
import styles from "./Card.module.css";

export function Commercial(props: ProductCardProps): React.ReactElement {
return (
<ProductCard
{...props}
extra={
<div>
<Text b small>
What you need to do:
</Text>
<Spacer />
<div className="flex align-center">
<div>
<Check className={styles.icon} width={24} />
</div>
<Text small>
Purchase servers yourself to self-host Reacher.{" "}
<a
href="https://help.reacher.email/self-host-guide"
target="_blank"
rel="noopener noreferrer"
>
Read how
</a>
.
</Text>
</div>
<Spacer />
</div>
}
features={features}
footer={
<div className="flex">
<div>
<Info className={styles.icon} width={24} />
</div>
<Text small>
Want a <strong>free trial</strong> before committing?
Feel free to try self-hosting with the{" "}
<a
href="https://help.reacher.email/self-host-guide"
target="_blank"
rel="noopener noreferrer"
>
open-source guide
</a>
, and subscribe once you&apos;re ready.
</Text>
</div>
}
header={
<Text b small type="success">
🏠 Self-Hosted
</Text>
}
subtitle={
<span>
<strong>Unlimited</strong> email verifications / mo
</span>
}
/>
);
}

const features = [
<span key="licenseFeatures-3">
<strong>Unlimited</strong>{" "}
<a
href="https://help.reacher.email/email-attributes-inside-json"
target="_blank"
rel="noopener noreferrer"
>
full-featured
</a>{" "}
email verifications.
</span>,
<span key="licenseFeatures-1">
<strong>💪 Bulk</strong> email verifications.{" "}
<a
href="https://help.reacher.email/bulk-email-verification"
target="_blank"
rel="noopener noreferrer"
>
Read more.
</a>
</span>,
<span key="licenseFeatures-2">No data sent back to Reacher.</span>,

<span key="licenseFeatures-4">
<strong>Customer support</strong> via email/chat.
</span>,
<span key="licenseFeatures-6">
See{" "}
<a
href="https://help.reacher.email/reacher-licenses"
target="_blank"
rel="noopener noreferrer"
>
full terms and details
</a>
.
</span>,
];
59 changes: 28 additions & 31 deletions src/components/ProductCard/FreeTrial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,40 +26,37 @@ export function FreeTrial({
{active ? "Current Plan" : "Not available"}
</Button>
}
features={[
"50 email verifications per month.",
<span key="freeTrial-2">
<a
href="https://help.reacher.email/email-attributes-inside-json"
target="_blank"
rel="noopener noreferrer"
>
Full-featured
</a>{" "}
email verifications.
</span>,
<span key="freeTrial-3">
Support via{" "}
<a
href="https://github.com/reacherhq/check-if-email-exists"
target="_blank"
rel="noopener noreferrer"
>
Github Issues
</a>
.
</span>,
"No credit card required.",
]}
features={features}
header="Free Forever"
subtitle={
<span>
Use Reacher&apos;s servers with <br />
high IP reputation.
</span>
}
subtitle={<span>50 email verifications / mo</span>}
title={productName()}
price={priceString}
/>
);
}

const features = [
"Use Reacher's servers with high IP reputation.",
<span key="freeTrial-2">
<a
href="https://help.reacher.email/email-attributes-inside-json"
target="_blank"
rel="noopener noreferrer"
>
Full-featured
</a>{" "}
email verifications.
</span>,
<span key="freeTrial-3">
Support via{" "}
<a
href="https://github.com/reacherhq/check-if-email-exists"
target="_blank"
rel="noopener noreferrer"
>
Github Issues
</a>
.
</span>,
"No credit card required.",
];
Loading

1 comment on commit 6284f1e

@vercel
Copy link

@vercel vercel bot commented on 6284f1e Dec 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

webapp – ./

webapp-reacher.vercel.app
api.reacher.email
webapp-git-production-reacher.vercel.app
app.reacher.email

Please sign in to comment.