feat: Add Commercial License Trial (#489)

* SimpleAnalytics * Signup * Add signup more info * add support for /v1/trial
reacherhq · Dec 12, 2024 · ded9e0e · ded9e0e
1 parent 1adaf82
commit ded9e0e
Show file tree

Hide file tree

Showing 17 changed files with 301 additions and 46 deletions.
diff --git a/src/app/[lang]/dashboard/Dashboard.tsx b/src/app/[lang]/dashboard/Dashboard.tsx
@@ -5,15 +5,14 @@ import { Tabs, TabsProps } from "./Tabs";
 import { SAAS_10K_PRODUCT_ID } from "@/util/subs";
 import { SubscriptionHeader } from "./SubscriptionHeader";
 import { Dictionary } from "@/dictionaries";
-import { ENABLE_BULK } from "@/util/helpers";
 import { Tables } from "@/supabase/database.types";
 
 interface DashboardProps {
 	children: React.ReactNode;
 	d: Dictionary;
 	showApiUsage?: boolean;
 	subAndCalls: Tables<"sub_and_calls">;
-	tab: TabsProps["tab"] | false;
+	tab: TabsProps["tab"];
 }
 export function Dashboard({
 	children,
@@ -32,16 +31,14 @@ export function Dashboard({
 					<Spacer h={2} />
 				</>
 			)}
-			{tab !== false && ENABLE_BULK && (
-				<Tabs
-					d={d}
-					bulkDisabled={
-						!subAndCalls.subscription_id ||
-						subAndCalls.product_id === SAAS_10K_PRODUCT_ID
-					}
-					tab={tab}
-				/>
-			)}
+			<Tabs
+				d={d}
+				bulkDisabled={
+					!subAndCalls.subscription_id ||
+					subAndCalls.product_id === SAAS_10K_PRODUCT_ID
+				}
+				tab={tab}
+			/>
 			{children}
 		</Page>
 	);

diff --git a/src/app/[lang]/dashboard/StripeManageButton.tsx b/src/app/[lang]/dashboard/StripeManageButton.tsx
@@ -45,7 +45,7 @@ export function StripeMananageButton({
 			onClick={() => {
 				redirectToCustomerPortal().catch(sentryException);
 			}}
-			data-sa-link-event="dashboard:stripe-billing:click"
+			data-sa-link-event="dashboard_stripebilling_click"
 		>
 			<strong>{loading ? "Redirecting to Stripe..." : children}</strong>
 		</GLink>

diff --git a/src/app/[lang]/dashboard/SubscriptionHeader.tsx b/src/app/[lang]/dashboard/SubscriptionHeader.tsx
@@ -67,7 +67,7 @@ export function SubscriptionHeader({
 						<DLink
 							d={d}
 							href="/pricing"
-							data-sa-link-event="dashboard:upgrade:click"
+							data-sa-link-event="dashboard_upgrade_click"
 						>
 							<strong>{d.dashboard.header.upgrade}</strong>
 						</DLink>

diff --git a/src/app/[lang]/dashboard/Tabs.tsx b/src/app/[lang]/dashboard/Tabs.tsx
@@ -7,11 +7,13 @@ import Mail from "@geist-ui/react-icons/mail";
 import Database from "@geist-ui/react-icons/database";
 import Lock from "@geist-ui/react-icons/lock";
 import { useRouter } from "next/navigation";
+import { ENABLE_BULK } from "@/util/helpers";
+import { Package } from "@geist-ui/react-icons";
 
 export interface TabsProps {
 	d: Dictionary;
 	bulkDisabled: boolean;
-	tab: "verify" | "bulk" | "api";
+	tab: "verify" | "commercial_license" | "bulk";
 }
 
 export function Tabs({ bulkDisabled, tab, ...props }: TabsProps) {
@@ -33,22 +35,33 @@ export function Tabs({ bulkDisabled, tab, ...props }: TabsProps) {
 				}
 				value="verify"
 			/>
+			{ENABLE_BULK && (
+				<GTabs.Item
+					disabled={bulkDisabled}
+					label={
+						bulkDisabled ? (
+							<>
+								<Lock />
+								{d.bulk_locked}
+							</>
+						) : (
+							<>
+								<Database />
+								{d.bulk}
+							</>
+						)
+					}
+					value="bulk"
+				/>
+			)}
 			<GTabs.Item
-				disabled={bulkDisabled}
 				label={
-					bulkDisabled ? (
-						<>
-							<Lock />
-							{d.bulk_locked}
-						</>
-					) : (
-						<>
-							<Database />
-							{d.bulk}
-						</>
-					)
+					<>
+						<Package />
+						{d.commercial_license}
+					</>
 				}
-				value="bulk"
+				value="commercial_license"
 			/>
 		</GTabs>
 	);

diff --git a/src/app/[lang]/dashboard/commercial_license/GetStartedCommercial.tsx b/src/app/[lang]/dashboard/commercial_license/GetStartedCommercial.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Dictionary } from "@/dictionaries";
-import { Card, Text } from "@/components/Geist";
+import { Button, Card, Text } from "@/components/Geist";
 import Markdown from "marked-react";
 import React from "react";
 
@@ -13,6 +13,9 @@ export function GetStartedCommercial(props: { d: Dictionary }) {
 			<Text h3>{d.title}</Text>
 
 			<Markdown>{d.explanation}</Markdown>
+			<div className="text-center">
+				<Button type="success">Request a Free Trial</Button>
+			</div>
 		</Card>
 	);
 }
diff --git a/src/app/[lang]/dashboard/commercial_license/page.tsx b/src/app/[lang]/dashboard/commercial_license/page.tsx
@@ -23,7 +23,7 @@ export default async function CommercialLicensePage({
 			d={d}
 			subAndCalls={subAndCalls}
 			showApiUsage={false}
-			tab={false}
+			tab="commercial_license"
 		>
 			<GetStartedCommercial d={d} />
 		</Dashboard>

diff --git a/src/app/[lang]/dashboard/verify/GetStartedSaaS.tsx b/src/app/[lang]/dashboard/verify/GetStartedSaaS.tsx
@@ -36,7 +36,7 @@ export function GetStartedSaaS({
 	const d = props.d.dashboard.get_started_saas;
 
 	function handleVerify() {
-		window.sa_event && window.sa_event("dashboard:verify:click");
+		window.sa_event && window.sa_event("dashboard_verify_click");
 		if (!email) {
 			return;
 		}

diff --git a/src/app/[lang]/pricing/Plans.tsx b/src/app/[lang]/pricing/Plans.tsx
@@ -16,6 +16,7 @@ import type {
 	SubscriptionWithPrice,
 } from "@/supabase/supabaseServer";
 
+// Currently the 100K plan per month is disabled.
 const SHOW_100K = false;
 
 interface PlansProps {
@@ -61,6 +62,7 @@ export function Plans({ d, products, subscription, isLoggedIn }: PlansProps) {
 			<Grid xs={20} sm={6}>
 				<SaaS10k
 					d={d}
+					ctaLabel={d.pricing.cards.subscribe}
 					currency={currency}
 					isLoggedIn={isLoggedIn}
 					product={saas10kProduct}
@@ -75,6 +77,7 @@ export function Plans({ d, products, subscription, isLoggedIn }: PlansProps) {
 				<Grid xs={20} sm={6}>
 					<SaaS100k
 						d={d}
+						ctaLabel={d.pricing.cards.subscribe}
 						currency={currency}
 						isLoggedIn={isLoggedIn}
 						product={saas100kProduct}
@@ -90,6 +93,7 @@ export function Plans({ d, products, subscription, isLoggedIn }: PlansProps) {
 			<Grid xs={20} sm={6}>
 				<Commercial
 					d={d}
+					ctaLabel={d.pricing.cards.start_free_trial}
 					currency={currency}
 					isLoggedIn={isLoggedIn}
 					product={commercialProduct}

diff --git a/src/app/[lang]/pricing/ProductCard.tsx b/src/app/[lang]/pricing/ProductCard.tsx
@@ -22,13 +22,15 @@ export interface ProductCardProps {
 	footer?: React.ReactElement;
 	features?: (string | React.ReactElement)[];
 	subtitle?: React.ReactElement;
+	ctaLabel: string;
 }
 
 export function ProductCard({
 	currency,
 	isLoggedIn,
 	product,
 	subscription,
+	ctaLabel,
 	...props
 }: ProductCardProps): React.ReactElement {
 	const [priceIdLoading, setPriceIdLoading] = useState<string | false>();
@@ -86,10 +88,10 @@ export function ProductCard({
 			onClick={() => {
 				window.sa_event &&
 					window.sa_event(
-						`pricing:${
+						`pricing_${
 							product.id === COMMERCIAL_LICENSE_PRODUCT_ID
 								? "commercial"
-								: "saas"
+								: "saas10k"
 						}`
 					);
 				handleCheckout(price).catch(sentryException);
@@ -104,7 +106,7 @@ export function ProductCard({
 				? d.cards.current_plan
 				: isLoggedIn
 				? d.cards.select_plan_cta
-				: d.cards.get_started}
+				: ctaLabel}
 		</Button>
 	);