feat: Better pricing wording

reacherhq · Dec 28, 2024 · 42d7ae6 · 42d7ae6
1 parent d0a83be
commit 42d7ae6
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 131 deletions.
diff --git a/src/app/[lang]/pricing/Card.module.css b/src/app/[lang]/pricing/Card.module.css
@@ -2,10 +2,6 @@
 	padding-top: 24px !important;
 }
 
-.icon {
-	margin-right: 16px;
-}
-
 .mo {
 	font-size: 1.25rem;
 }
diff --git a/src/app/[lang]/pricing/Card.tsx b/src/app/[lang]/pricing/Card.tsx
@@ -1,16 +1,13 @@
 import { Card as GCard, Divider, Spacer, Text } from "@geist-ui/react";
-import Check from "@geist-ui/react-icons/check";
 import React from "react";
 
 import styles from "./Card.module.css";
 import { Dictionary } from "@/dictionaries";
 
 export interface CardProps extends React.HTMLProps<HTMLDivElement> {
 	d: Dictionary;
-	body?: React.ReactElement;
 	cta?: React.ReactElement;
-	extra?: React.ReactElement;
-	features?: (string | React.ReactElement)[];
+	features?: React.ReactElement[];
 	header?: string | React.ReactElement;
 	price?: string | React.ReactElement;
 	subtitle?: React.ReactElement;
@@ -19,17 +16,7 @@ export interface CardProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export function Card(props: CardProps): React.ReactElement {
-	const {
-		cta,
-		header,
-		features,
-		extra,
-		price,
-		title,
-		subtitle,
-		body,
-		footer,
-	} = props;
+	const { cta, header, features, price, title, subtitle, footer } = props;
 	const d = props.d.pricing;
 
 	return (
@@ -59,29 +46,8 @@ export function Card(props: CardProps): React.ReactElement {
 			<Divider />
 			<Spacer />
 
-			{extra}
+			{features}
 
-			<div>
-				<Text b small>
-					{d.cards.what_you_get}
-				</Text>
-				<Spacer />
-				{features?.map((f, i) => (
-					<div key={i}>
-						<div className="flex align-center">
-							<div>
-								<Check className={styles.icon} width={24} />
-							</div>
-							<Text small>{f}</Text>
-						</div>
-						<Spacer h={0.5} />
-					</div>
-				))}
-			</div>
-
-			{body}
-
-			{footer && <Divider />}
 			{footer && <div>{footer}</div>}
 		</GCard>
 	);

diff --git a/src/app/[lang]/pricing/Commercial.tsx b/src/app/[lang]/pricing/Commercial.tsx
@@ -1,10 +1,9 @@
 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";
+import { Text } from "@geist-ui/react";
 import Markdown from "marked-react";
 import { SpanRenderer } from "@/components/Markdown";
+import { Features } from "./Features";
 
 export function Commercial(
 	props: Omit<ProductCardProps, "title">
@@ -14,52 +13,30 @@ export function Commercial(
 	return (
 		<ProductCard
 			{...props}
-			extra={
-				<div>
-					<Text b small>
-						{d.what_need_to_do}
-					</Text>
-					<Spacer />
-					<div className="flex align-center">
-						<div>
-							<Check className={styles.icon} width={24} />
-						</div>
-						<Text small>
-							<Markdown renderer={SpanRenderer}>
-								{d.purchase_server}
-							</Markdown>
-						</Text>
-					</div>
-					<Spacer />
-				</div>
-			}
 			features={[
-				<Markdown renderer={SpanRenderer} key="licenseFeatures-3">
-					{d.unlimited_emails}
-				</Markdown>,
-				<Markdown renderer={SpanRenderer} key="licenseFeatures-1">
-					{d.bulk}
-				</Markdown>,
-				d.no_data_reacher,
-				<Markdown renderer={SpanRenderer} key="licenseFeatures-4">
-					{d.support}
-				</Markdown>,
-				<Markdown renderer={SpanRenderer} key="licenseFeatures-6">
-					{d.terms}
-				</Markdown>,
+				<Features
+					key="what-needs-to-do"
+					title={d.what_need_to_do}
+					features={[d.purchase_server]}
+				/>,
+				<Features
+					key="what-you-get"
+					title={d.what_you_get}
+					features={[
+						d.unlimited_emails,
+						d.bulk,
+						d.no_data_reacher,
+						d.support,
+						d.terms,
+					]}
+				/>,
+				<Features
+					key="commercial-license-trial"
+					title={d.free_trial}
+					features={[d["10k_per_day"], d.proxy, d.data_shared]}
+				/>,
 			]}
-			footer={
-				<div className="flex">
-					<div>
-						<Info className={styles.icon} width={24} />
-					</div>
-					<Text small>
-						<Markdown renderer={SpanRenderer}>
-							{d.free_trial}
-						</Markdown>
-					</Text>
-				</div>
-			}
+			ctaInFooter
 			header={
 				<Text b small type="success">
 					{d.overtitle}

diff --git a/src/app/[lang]/pricing/Features.module.css b/src/app/[lang]/pricing/Features.module.css
@@ -0,0 +1,3 @@
+.icon {
+	margin-right: 16px;
+}
diff --git a/src/app/[lang]/pricing/Features.tsx b/src/app/[lang]/pricing/Features.tsx
@@ -0,0 +1,38 @@
+import { Spacer, Text } from "@geist-ui/react";
+import React from "react";
+
+import styles from "./Features.module.css";
+import { Check } from "@geist-ui/react-icons";
+import Markdown from "marked-react";
+import { SpanRenderer } from "@/components/Markdown";
+
+export function Features({
+	features,
+	title,
+}: {
+	features: string[];
+	title: string;
+}) {
+	return (
+		<>
+			<Text b small>
+				{title}
+			</Text>
+			<Spacer />
+			{features?.map((f, i) => (
+				<div key={i}>
+					<div className="flex align-center">
+						<div className={styles.icon}>
+							<Check width={24} />
+						</div>
+						<Text small>
+							<Markdown renderer={SpanRenderer}>{f}</Markdown>
+						</Text>
+					</div>
+					<Spacer h={0.5} />
+				</div>
+			))}
+			<Spacer />
+		</>
+	);
+}
diff --git a/src/app/[lang]/pricing/ProductCard.tsx b/src/app/[lang]/pricing/ProductCard.tsx
@@ -13,14 +13,15 @@ import { DLink } from "@/components/DLink";
 
 export interface ProductCardProps {
 	d: Dictionary;
+	ctaInFooter?: boolean;
 	currency: string;
 	isLoggedIn: boolean;
 	product: ProductWithPrice;
 	subscription: Tables<"subscriptions"> | null;
 	extra?: React.ReactElement;
 	header?: React.ReactElement;
 	footer?: React.ReactElement;
-	features?: (string | React.ReactElement)[];
+	features?: React.ReactElement[];
 	subtitle?: React.ReactElement;
 	ctaLabel: string;
 }
@@ -31,6 +32,8 @@ export function ProductCard({
 	product,
 	subscription,
 	ctaLabel,
+	ctaInFooter,
+	footer,
 	...props
 }: ProductCardProps): React.ReactElement {
 	const [priceIdLoading, setPriceIdLoading] = useState<string | false>();
@@ -81,7 +84,7 @@ export function ProductCard({
 		minimumFractionDigits: 0,
 	}).format(price.unit_amount / 100);
 
-	const b = (
+	const ctaButton = (
 		<Button
 			className="full-width"
 			disabled={!!priceIdLoading || active}
@@ -114,10 +117,10 @@ export function ProductCard({
 		<Card
 			cta={
 				isLoggedIn ? (
-					b
+					ctaButton
 				) : (
 					<DLink d={props.d} href="/signup" className="full-width">
-						{b}
+						{ctaButton}
 					</DLink>
 				)
 			}
@@ -128,6 +131,7 @@ export function ProductCard({
 				product.name ||
 				"No Product"
 			} // The latter should never happen
+			footer={footer ? footer : ctaInFooter ? ctaButton : undefined}
 			{...props}
 		/>
 	);

diff --git a/src/app/[lang]/pricing/SaaS100k.tsx b/src/app/[lang]/pricing/SaaS100k.tsx
@@ -2,9 +2,7 @@ import React from "react";
 import { Text } from "@geist-ui/react";
 import { ProductCard } from "./ProductCard";
 import type { ProductCardProps } from "./ProductCard";
-import Markdown from "marked-react";
-import { SpanRenderer } from "@/components/Markdown";
-import { ENABLE_BULK } from "@/util/helpers";
+import { Features } from "./Features";
 
 export function SaaS100k(
 	props: Omit<ProductCardProps, "title">
@@ -20,22 +18,18 @@ export function SaaS100k(
 				</Text>
 			}
 			features={[
-				ENABLE_BULK ? (
-					<Markdown renderer={SpanRenderer} key="licenseFeatures-1">
-						{d.bulk}
-					</Markdown>
-				) : (
-					""
-				),
-				d.reacher_ip,
-				<Markdown renderer={SpanRenderer} key="saasFeatures-2">
-					{d.full_feature}
-				</Markdown>,
-				<Markdown renderer={SpanRenderer} key="customer-support">
-					{d.support}
-				</Markdown>,
-				d.cancel,
-			].filter((x) => !!x)}
+				<Features
+					key="what-you-get"
+					title={d.what_you_get}
+					features={[
+						d.bulk,
+						d.reacher_ip,
+						d.full_feature,
+						d.support,
+						d.cancel,
+					]}
+				/>,
+			]}
 			subtitle={<span>{d.subtitle}</span>}
 		/>
 	);

diff --git a/src/app/[lang]/pricing/SaaS10k.tsx b/src/app/[lang]/pricing/SaaS10k.tsx
@@ -2,8 +2,7 @@ import React from "react";
 import { Text } from "@geist-ui/react";
 import { ProductCard } from "./ProductCard";
 import type { ProductCardProps } from "./ProductCard";
-import Markdown from "marked-react";
-import { SpanRenderer } from "@/components/Markdown";
+import { Features } from "./Features";
 
 export function SaaS10k(
 	props: Omit<ProductCardProps, "title">
@@ -19,14 +18,16 @@ export function SaaS10k(
 				</Text>
 			}
 			features={[
-				d.reacher_ip,
-				<Markdown renderer={SpanRenderer} key="saasFeatures-2">
-					{d.full_feature}
-				</Markdown>,
-				<Markdown renderer={SpanRenderer} key="customer-support">
-					{d.support}
-				</Markdown>,
-				d.cancel,
+				<Features
+					key="what-you-get"
+					title={d.what_you_get}
+					features={[
+						d.reacher_ip,
+						d.full_feature,
+						d.support,
+						d.cancel,
+					]}
+				/>,
 			]}
 			subtitle={<span>{d.subtitle}</span>}
 		/>