mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Merge pull request #276 from calendso/manage-subscription

Browse source
This commit is contained in:
Peer_Rich 2021-06-18 09:31:08 +01:00 committed by GitHub
commit 066032a219
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/ActiveLink.tsx
View file

@ -1,5 +1,4 @@
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import PropTypes from 'prop-types'
import Link from 'next/link' import Link from 'next/link'
import React, { Children } from 'react' import React, { Children } from 'react'

7
components/Settings.tsx
View file

@ -1,5 +1,5 @@
import ActiveLink from '../components/ActiveLink'; import ActiveLink from '../components/ActiveLink';
import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon } from '@heroicons/react/outline'; import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon, CreditCardIcon } from '@heroicons/react/outline';
export default function SettingsShell(props) { export default function SettingsShell(props) {
return ( return (
@ -37,6 +37,11 @@ export default function SettingsShell(props) {
<a><UserGroupIcon /> Teams</a> <a><UserGroupIcon /> Teams</a>
</ActiveLink> </ActiveLink>
{/* Change/remove me, if you're self-hosting */}
<ActiveLink href="/settings/billing">
<a><CreditCardIcon /> Billing</a>
</ActiveLink>
{/* <Link href="/settings/notifications"> {/* <Link href="/settings/notifications">
<a className={router.pathname == "/settings/notifications" ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"}> <a className={router.pathname == "/settings/notifications" ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"}>
<svg className={router.pathname == "/settings/notifications" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <svg className={router.pathname == "/settings/notifications" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">

66
pages/settings/billing.tsx Normal file
View file

@ -0,0 +1,66 @@
import Head from 'next/head';
import Shell from '../../components/Shell';
import SettingsShell from '../../components/Settings';
import prisma from '../../lib/prisma';
import {getSession, useSession} from 'next-auth/client';
export default function Billing(props) {
const [ session, loading ] = useSession();
if (loading) {
return <p className="text-gray-400">Loading...</p>;
}
return (
<Shell heading="Billing">
<Head>
<title>Billing | Calendso</title>
</Head>
<SettingsShell>
<div className="py-6 px-4 sm:p-6 lg:pb-8 lg:col-span-9">
<div className="mb-6">
<h2 className="text-lg leading-6 font-medium text-gray-900">
Change your Subscription
</h2>
<p className="mt-1 text-sm text-gray-500">
Cancel, update credit card or change plan
</p>
</div>
<div className="my-6">
<iframe
src="https://calendso.com/subscription-embed"
style={{minHeight: 800, width: "100%", border: 0 }}
/>
</div>
</div>
</SettingsShell>
</Shell>
);
}
export async function getServerSideProps(context) {
const session = await getSession(context);
if (!session) {
return { redirect: { permanent: false, destination: '/auth/login' } };
}
const user = await prisma.user.findFirst({
where: {
email: session.user.email,
},
select: {
id: true,
username: true,
name: true,
email: true,
bio: true,
avatar: true,
timeZone: true,
weekStart: true,
}
});
return {
props: {user}, // will be passed to the page component as props
}
}