Translation pricing

package.json

@@ -40,6 +40,7 @@
 		"encoding": "^0.1.13",
 		"mailgun-js": "^0.22.0",
 		"markdown-pdf": "^11.0.0",
+		"marked-react": "^2.0.0",
 		"mustache": "^4.2.0",
 		"next": "13",
 		"rate-limiter-flexible": "^2.4.1",

src/components/Markdown.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+export const SpanRenderer = {
+	paragraph(children: ReactNode) {
+		return <span>{children}</span>;
+	},
+};

src/components/Nav.module.css

@@ -27,6 +27,7 @@
 }
 
 .link {
+	color: inherit !important;
 	margin-left: 16px;
 	margin-right: 16px;
 }

src/components/Nav.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-
-import { Button, Link as GLink, Select, Spacer, Text } from "@geist-ui/react";
+import { Button, Select, Spacer, Text } from "@geist-ui/react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import React from "react";
@@ -45,23 +43,23 @@ export function Nav(): React.ReactElement {
 			<div className={styles.filler} />
 
 			<div>
-				<GLink
+				<Link
 					className={styles.link}
 					href="/pricing"
 					data-sa-link-event="nav:pricing:click"
 				>
 					{d.nav.pricing}
-				</GLink>
+				</Link>
 
-				<GLink
+				<Link
 					className={styles.link}
 					href="https://help.reacher.email"
 					target="_blank"
 					rel="noopener noreferrer"
 					data-sa-link-event="nav:help:click"
 				>
 					{d.nav.help}
-				</GLink>
+				</Link>
 				<Select
 					className={styles.language}
 					disableMatchWidth

src/components/ProductCard/Card.tsx → src/components/Pricing/Card.tsx

@@ -3,6 +3,8 @@ import { Check } from "@geist-ui/react-icons";
 import React from "react";
 
 import styles from "./Card.module.css";
+import { useRouter } from "next/router";
+import { dictionary } from "@/dictionaries";
 
 export interface CardProps extends React.HTMLProps<HTMLDivElement> {
 	body?: React.ReactElement;
@@ -27,6 +29,9 @@ export function Card({
 	body,
 	footer,
 }: CardProps): React.ReactElement {
+	const router = useRouter();
+	const d = dictionary(router.locale).pricing;
+
 	return (
 		<GCard className={styles.container}>
 			<Text className="text-center flex justify-center" small b>
@@ -44,7 +49,7 @@ export function Card({
 			<Text className="text-center" h3>
 				{price}
 				<Text className={styles.mo} span type="secondary">
-					/mo
+					{d.saas10k.price}
 				</Text>
 			</Text>
 			<Spacer y={2} />
@@ -58,7 +63,7 @@ export function Card({
 
 			<div>
 				<Text b small>
-					What you get:
+					{d.saas10k.what_you_get}
 				</Text>
 				<Spacer />
 				{features?.map((f, i) => (

src/components/Pricing/Commercial.tsx

@@ -0,0 +1,75 @@
+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 { useRouter } from "next/router";
+import { dictionary } from "@/dictionaries";
+import Markdown from "marked-react";
+import { SpanRenderer } from "../Markdown";
+
+export function Commercial(
+	props: Omit<ProductCardProps, "title">
+): React.ReactElement {
+	const router = useRouter();
+	const d = dictionary(router.locale).pricing.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>,
+			]}
+			footer={
+				<div className="flex">
+					<div>
+						<Info className={styles.icon} width={24} />
+					</div>
+					<Text small>
+						<Markdown renderer={SpanRenderer}>
+							{d.free_trial}
+						</Markdown>
+					</Text>
+				</div>
+			}
+			header={
+				<Text b small type="success">
+					{d.overtitle}
+				</Text>
+			}
+			subtitle={<Markdown renderer={SpanRenderer}>{d.subtitle}</Markdown>}
+			title={d.title}
+		/>
+	);
+}

src/components/ProductCard/ProductCard.tsx → src/components/Pricing/ProductCard.tsx

@@ -21,6 +21,7 @@ export interface ProductCardProps {
 	footer?: React.ReactElement;
 	features?: (string | React.ReactElement)[];
 	subtitle?: React.ReactElement;
+	title: string;
 }
 
 export function ProductCard({
@@ -107,7 +108,6 @@ export function ProductCard({
 			}
 			key={price.product_id}
 			price={priceString}
-			title={product.name || "No Product Name"} // Latter should never happen
 			{...props}
 		/>
 	);

src/components/Pricing/SaaS100k.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Text } from "@geist-ui/react";
+import { ProductCard } from "./ProductCard";
+import type { ProductCardProps } from "./ProductCard";
+import { useRouter } from "next/router";
+import { dictionary } from "@/dictionaries";
+import Markdown from "marked-react";
+import { SpanRenderer } from "../Markdown";
+
+export function SaaS100k(
+	props: Omit<ProductCardProps, "title">
+): React.ReactElement {
+	const router = useRouter();
+	const d = dictionary(router.locale).pricing.saas100k;
+
+	return (
+		<ProductCard
+			{...props}
+			header={
+				<Text b small type="warning">
+					{d.overtitle}
+				</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,
+			]}
+			subtitle={<span>{d.subtitle}</span>}
+			title={d.title}
+		/>
+	);
+}

src/components/Pricing/SaaS10k.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Text } from "@geist-ui/react";
+import { ProductCard } from "./ProductCard";
+import type { ProductCardProps } from "./ProductCard";
+import { useRouter } from "next/router";
+import { dictionary } from "@/dictionaries";
+import Markdown from "marked-react";
+import { SpanRenderer } from "../Markdown";
+
+export function SaaS10k(
+	props: Omit<ProductCardProps, "title">
+): React.ReactElement {
+	const router = useRouter();
+	const d = dictionary(router.locale).pricing.saas10k;
+
+	return (
+		<ProductCard
+			{...props}
+			header={
+				<Text b small>
+					{d.overtitle}
+				</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,
+			]}
+			subtitle={<span>{d.subtitle}</span>}
+			title={d.title}
+		/>
+	);
+}