feat: Try new stripe Pricing Table (#486)

src/app/[lang]/pricing/ProductCard.tsx

@@ -35,8 +35,11 @@ export function ProductCard({
 	const d = props.d.pricing;
 
 	const active = !!subscription;
-	console.log("AAA", product.prices);
-	const price = product.prices.find(({ currency: c }) => currency === c);
+	// For the SAA10k and SaaS100k products, we also allow a yearly subscription.
+	// This is currently not implemented in the UI, but the backend supports it.
+	const price = product.prices.find(
+		({ currency: c, interval }) => currency === c && interval === "month"
+	);
 	if (!price || !price.unit_amount) {
 		return <p>Error: No price found for product {product.id}.</p>;
 	}

src/app/[lang]/pricing_new/StripePricingTable.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import React, { useEffect } from "react";
+
+export const StripePricingTable = () => {
+	useEffect(() => {
+		const script = document.createElement("script");
+		script.src = "https://js.stripe.com/v3/pricing-table.js";
+		script.async = true;
+		document.body.appendChild(script);
+		return () => {
+			document.body.removeChild(script);
+		};
+	}, []);
+
+	return React.createElement("stripe-pricing-table", {
+		"pricing-table-id": "prctbl_1OOqJhA852XqldwXWBnBH1qL",
+		"publishable-key": "pk_live_O6JxAuRV03zH5EC0V2aEqD1F00PqJvtIsb",
+	});
+};

src/app/[lang]/pricing_new/page.tsx

@@ -0,0 +1,36 @@
+import { Spacer, Text } from "@/components/Geist";
+import React from "react";
+import { dictionary } from "@/dictionaries";
+import { Nav } from "@/components/Nav/Nav";
+import { Footer } from "@/components/Footer";
+import { StripePricingTable } from "./StripePricingTable";
+
+export const metadata = {
+	title: "Pricing",
+};
+
+export default async function Pricing({
+	params: { lang },
+}: {
+	params: { lang: string };
+}) {
+	const d = await dictionary(lang);
+
+	return (
+		<>
+			<Nav d={d} />
+			<Spacer h={5} />
+			<Text className="text-center" h2>
+				{d.pricing.title}
+			</Text>
+			<Text p em className="text-center">
+				{d.pricing["30d_money_back"]}
+			</Text>
+
+			<Spacer h={2} />
+
+			<StripePricingTable />
+			<Footer d={d} />
+		</>
+	);
+}