You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/pages/account.js

263 lines
6.2 KiB
JavaScript

// Theirs
import React from 'react'
import dynamic from 'next/dynamic'
import Head from 'next/head'
// Ours
import Button from '../components/Button'
import Page from '../components/Page'
import MenuButton from '../components/MenuButton'
import { MetaLinks } from '../components/Meta'
import { useAuth } from '../components/AuthContext'
import { loginGitHub, logout } from '../lib/client'
import { COLORS } from '../lib/constants'
const Billing = dynamic(() => import('../components/Billing'), {
loading: () => <div style={{ minHeight: '360px' }} />,
})
function logoutThunk() {
return logout
}
const soon = <span title="Coming Soon"></span>
function Plan({ selectBilling }) {
const user = useAuth()
function handleSelectFree() {
if (!user) {
loginGitHub()
}
}
function handleSelectUpgrade() {
if (!user) {
return loginGitHub()
}
selectBilling()
}
return (
<div className="plan">
<table>
<thead>
<tr>
<td />
<td>
<h3>Free</h3>
</td>
<td>
<h3 style={{ color: COLORS.BLUE }}>Diamond</h3>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>PNG/SVG Exports</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Full visual editor</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Custom backgrounds</td>
<td></td>
<td></td>
</tr>
<tr>
<td>GitHub Gist support</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Saved snippets</td>
<td>1000</td>
<td></td>
</tr>
<tr>
<td>Embed saved snippets</td>
<td></td>
<td></td>
</tr>
<tr>
<td>API Access {soon}</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Saved custom themes/presets {soon}</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Twitter card unfurls {soon}</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>FREE FOREVER</td>
<td>$5.00 / month</td>
</tr>
<tr>
<td></td>
<td>
<Button
large
margin="0 auto"
center
border
padding="4px 8px"
color="white"
disabled={user && user.plan === 'free'}
onClick={handleSelectFree}
>
{user ? 'Current' : 'Get Started'}
</Button>
</td>
<td>
<Button
large
margin="0 auto"
center
border
padding="4px 8px"
color={COLORS.BLUE}
disabled={user && user.plan === 'diamond'}
onClick={handleSelectUpgrade}
>
Upgrade
</Button>
</td>
</tr>
</tbody>
</table>
<style jsx>
{`
table {
width: 100%;
}
td {
font-size: 14px;
padding: 0.5rem 0.5rem 0.5rem 1rem;
}
tr:nth-of-type(odd) {
background: ${COLORS.HOVER};
}
thead tr {
background: ${COLORS.BLACK};
}
tr td:not(:last-of-type) {
border-right: 1px solid white;
}
tr td:not(:nth-child(1)) {
text-align: center;
padding: 0.5rem 1rem;
}
h3 {
margin: 0;
}
table :global(button) {
text-transform: uppercase;
font-size: 16px;
}
`}
</style>
</div>
)
}
function Settings() {
const [selected, select] = React.useState('Plan')
const user = useAuth()
function selectMenu(name) {
return () => select(name)
}
return (
<div className="editor">
<div className="settings-bottom">
<div className="settings-menu">
<MenuButton name="Plan" select={selectMenu} selected={selected}></MenuButton>
<MenuButton name="Billing" select={selectMenu} selected={selected}></MenuButton>
{/* <MenuButton name="API Keys" select={selectMenu} selected={selected} /> */}
{user && <MenuButton name="Sign Out" select={logoutThunk} selected={selected} noArrows />}
</div>
<div className="content">
{selected === 'Plan' && <Plan selectBilling={selectMenu('Billing')} />}
{selected === 'Billing' && <Billing />}
</div>
</div>
{user && <img className="avatar" src={user.photoURL} alt={user.displayName} />}
<style jsx>
{`
.editor {
position: relative;
background: ${COLORS.BLACK};
border: 3px solid ${COLORS.SECONDARY};
border-radius: 8px;
width: auto;
}
.settings-container {
position: relative;
}
.settings-bottom {
display: flex;
border-radius: 8px;
overflow: hidden;
}
.settings-menu {
display: flex;
flex-direction: column;
flex: 0 0 96px;
background-color: ${COLORS.DARK_GRAY};
}
.content {
width: 580px;
border-left: 3px solid ${COLORS.SECONDARY};
}
.avatar {
position: absolute;
width: 64px;
height: 64px;
border-radius: 50%;
background: ${COLORS.BLACK};
border: 3px solid ${COLORS.SECONDARY};
top: -40px;
right: -40px;
}
`}
</style>
</div>
)
}
function SettingsPage() {
return (
<Page flex={true}>
<Head>
<script src="https://js.stripe.com/v3/" />
</Head>
<MetaLinks />
<Settings />
</Page>
)
}
export default SettingsPage