From fdcebde98984dc36a5b94ff71de634eb9c99d494 Mon Sep 17 00:00:00 2001
From: Travis Vachon <travis.vachon@protocol.ai>
Date: Tue, 24 Oct 2023 02:07:01 -0700
Subject: [PATCH] feat: first pass at a plans page (#8)

Just get the embed working. Not super happy about how this behaves in a
responsive context, but a good start.
---
 .env.tpl                 |  2 ++
 src/app/page.tsx         |  6 +-----
 src/app/plans/page.tsx   | 11 +++++++++++
 src/components/Plans.tsx | 15 +++++++++++++++
 4 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 .env.tpl
 create mode 100644 src/app/plans/page.tsx
 create mode 100644 src/components/Plans.tsx

diff --git a/.env.tpl b/.env.tpl
new file mode 100644
index 0000000..b6af736
--- /dev/null
+++ b/.env.tpl
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1NzhdvF6A5ufQX5vKNZuRhie
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LO87hF6A5ufQX5viNsPTbuErzfavdrEFoBuaJJPfoIhzQXdOUdefwL70YewaXA32ZrSRbK4U4fqebC7SVtyeNcz00qmgNgueC
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1c50ff8..e414b29 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,15 +4,11 @@ import { useState } from 'react'
 import { DIDKey } from '@ucanto/interface'
 import { useKeyring } from '@w3ui/react-keyring'
 
-import { AuthenticationEnsurer } from '../components/Authenticator'
-import { DefaultLayout } from '../components/Layout'
-import { SpaceEnsurer } from '../components/SpaceEnsurer'
 import { SpaceSection } from '../components/SpaceSection'
-import { SpaceSelector } from '../components/SpaceSelector'
 
 export default function Home (): JSX.Element {
   const [share, setShare] = useState(false)
-  const [{ space, spaces }, { setCurrentSpace }] = useKeyring()
+  const [, { setCurrentSpace }] = useKeyring()
 
   function viewSpace (did: DIDKey): void {
     setShare(false)
diff --git a/src/app/plans/page.tsx b/src/app/plans/page.tsx
new file mode 100644
index 0000000..f63f862
--- /dev/null
+++ b/src/app/plans/page.tsx
@@ -0,0 +1,11 @@
+import Plans from '@/components/Plans'
+export default function PlansComponent () {
+  return (
+    <div className='flex flex-col items-center'>
+      <h1 className='text-4xl'>Plans</h1>
+      <div className='w-full overflow-x-scroll'>
+        <Plans />
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Plans.tsx b/src/components/Plans.tsx
new file mode 100644
index 0000000..87c71ce
--- /dev/null
+++ b/src/components/Plans.tsx
@@ -0,0 +1,15 @@
+import { createElement } from 'react'
+import Script from 'next/script'
+
+export default function Plans({className=''}) {
+  return (
+    <>
+      <Script async src="https://js.stripe.com/v3/pricing-table.js" />
+      {createElement('stripe-pricing-table', {
+        'pricing-table-id': process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID,
+        'publishable-key': process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
+        className
+      }, '')}
+    </>
+  )
+}
\ No newline at end of file