55 |
65 | {children}
66 |
15 |
20 | );
21 | };
22 |
23 | export default SignUpPage;
24 |
--------------------------------------------------------------------------------
/src/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import LoginPassword from "@/components/dashboard/authentication/login-password";
2 | import useTranslation from "next-translate/useTranslation";
3 | import Link from "next/link";
4 | import { useRouter } from "next/router";
5 | import useAuthCheck from "@/utils/use-auth-check";
6 |
7 | const LoginPage = () => {
8 | const { t } = useTranslation("authentication");
9 | const router = useRouter();
10 | const { redirectedFrom } = router.query;
11 |
12 | useAuthCheck(redirectedFrom as string);
13 |
14 | return (
15 |
16 |
21 | );
22 | };
23 |
24 | export default LoginPage;
25 |
--------------------------------------------------------------------------------
/supabase/tests/database/5-team-accounts-disabled.sql:
--------------------------------------------------------------------------------
1 | BEGIN;
2 | CREATE EXTENSION "basejump-supabase_test_helpers";
3 |
4 | select plan(1);
5 |
6 | -- make sure we're setup for enabling personal accounts
7 | update basejump.config
8 | set enable_team_accounts = false;
9 |
10 | --- we insert a user into auth.users and return the id into user_id to use
11 | select tests.create_supabase_user('test1');
12 |
13 | ------------
14 | --- Primary Owner
15 | ------------
16 | select tests.authenticate_as('test1');
17 |
18 | -- check to see if we can create an accoiunt
19 | select throws_ok(
20 | $$ insert into accounts (team_name, personal_account) values ('test team', false) $$,
21 | 'new row violates row-level security policy for table "accounts"'
22 | );
23 |
24 | SELECT *
25 | FROM finish();
26 |
27 | ROLLBACK;
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": false,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "jsx": "preserve",
20 | "baseUrl": ".",
21 | "paths": {
22 | "@/*": [
23 | "src/*"
24 | ],
25 | "@tests/*": [
26 | "__tests__/setup/*"
27 | ]
28 | },
29 | "incremental": true
30 | },
31 | "include": [
32 | "next-env.d.ts",
33 | "**/*.ts",
34 | "**/*.tsx"
35 | ],
36 | "exclude": [
37 | "node_modules"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/src/utils/api/use-user-profile.ts:
--------------------------------------------------------------------------------
1 | import { useSessionContext, useUser } from "@supabase/auth-helpers-react";
2 | import { useQuery } from "@tanstack/react-query";
3 | import handleSupabaseErrors from "@/utils/handle-supabase-errors";
4 | import { Database } from "@/types/supabase-types";
5 |
6 | export default function useUserProfile() {
7 | const user = useUser();
8 | const { supabaseClient } = useSessionContext();
9 | return useQuery
14 |
30 | );
31 | };
32 |
33 | export default FutureContentPlaceholder;
34 |
--------------------------------------------------------------------------------
/scripts/sync-stripe.ts:
--------------------------------------------------------------------------------
1 | import { stripe } from "@/utils/admin/stripe";
2 | import {
3 | upsertPriceRecord,
4 | upsertProductRecord,
5 | } from "@/utils/admin/stripe-billing-helpers";
6 |
7 | // check if stripe key is set, exit if not
8 | if (!process.env.STRIPE_SECRET_KEY) {
9 | console.log("No Stripe key found, skipping sync");
10 | process.exit(0);
11 | }
12 |
13 | // first we pull all products from Stripe and insert them into the billing_products table
14 | stripe.products
15 | .list()
16 | .then(async (products) => {
17 | for (const product of products.data) {
18 | await upsertProductRecord(product);
19 | }
20 | })
21 | .catch((e) => {
22 | console.log(e);
23 | });
24 |
25 | // then we pull all prices from Stripe and insert them into the billing_prices table
26 | stripe.prices
27 | .list()
28 | .then(async (prices) => {
29 | for (const price of prices.data) {
30 | await upsertPriceRecord(price);
31 | }
32 | })
33 | .catch((e) => {
34 | console.log(e);
35 | });
36 |
--------------------------------------------------------------------------------
/__tests__/utils/content-helpers.test.ts:
--------------------------------------------------------------------------------
1 | import { getContentPaths } from "@/utils/content/content-helpers";
2 |
3 | describe("Content Helpers", () => {
4 | it("Should know how to load and sort correct docs", async () => {
5 | const docs = await getContentPaths("en", "docs");
6 | // should not load unpublished docs
7 | expect(docs.length).toEqual(2);
8 | // should sort them by published date
9 | expect(docs[0].title).toEqual("Getting Started");
10 | // nextjs expects all dates to be strings
11 | expect(typeof docs[0].meta.published).toEqual("string");
12 | });
13 |
14 | it("Should know how to load and sort correct blogs", async () => {
15 | const blogs = await getContentPaths("en", "blog");
16 | // should not load unpublished blogs
17 | expect(blogs.length).toEqual(2);
18 | // should sort them by published date
19 | expect(blogs[0].title).toEqual("Article 1");
20 | // nextjs expects all dates to be strings
21 | expect(typeof blogs[0].meta.published).toEqual("string");
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/components/content-pages/content-layout.tsx:
--------------------------------------------------------------------------------
1 | import ContentHeader from "./content-header";
2 | import ContentFooter from "./content-footer";
3 | import { Drawer } from "react-daisyui";
4 | import { useToggle } from "react-use";
5 | import ContentHeaderMobile from "@/components/content-pages/content-header-mobile";
6 | import { useRouter } from "next/router";
7 | import { useEffect } from "react";
8 |
9 | const ContentLayout = ({ children }) => {
10 | const [isSidebarOpen, toggleSidebar] = useToggle(false);
11 | const router = useRouter();
12 |
13 | useEffect(() => {
14 | toggleSidebar(false);
15 | }, [router.asPath, toggleSidebar]);
16 | return (
17 | {title}
21 | {!!filePath && ( 22 |
23 |
28 | )}
29 | To edit this page, check it out at:
24 |
25 | {filePath}
26 |
27 | {children}
24 |
16 |
20 |
19 | {data?.map((invitation) => (
20 | refetch()}
22 | key={invitation.id}
23 | invitation={invitation}
24 | />
25 | ))}
26 |
27 | )}
28 |
29 | );
30 | };
31 |
32 | export default ListTeamInvitations;
33 |
--------------------------------------------------------------------------------
/src/utils/api/use-team-invitations.ts:
--------------------------------------------------------------------------------
1 | import { useSessionContext, useUser } from "@supabase/auth-helpers-react";
2 | import { useQuery, UseQueryOptions } from "@tanstack/react-query";
3 | import handleSupabaseErrors from "../handle-supabase-errors";
4 | import { Database } from "@/types/supabase-types";
5 |
6 | export default function useTeamInvitations(
7 | accountId: string,
8 | options?: UseQueryOptions<
9 | Database["public"]["Tables"]["invitations"]["Row"][]
10 | >
11 | ) {
12 | const user = useUser();
13 | const { supabaseClient } = useSessionContext();
14 | return useQuery
23 | {data?.map((member) => (
24 |
27 | )}
28 |
24 |
46 | );
47 | };
48 |
49 | export default Logo;
50 |
--------------------------------------------------------------------------------
/src/components/content-pages/content-meta.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import getFullRedirectUrl from "@/utils/get-full-redirect-url";
3 |
4 | type Props = {
5 | title: string;
6 | description: string;
7 | socialDescription?: string;
8 | socialImage?: string;
9 | };
10 |
11 | const ContentMeta = ({
12 | title,
13 | description,
14 | socialDescription,
15 | socialImage,
16 | }: Props) => {
17 | return (
18 |
19 |
30 |
37 | 43 | Basejump 44 |
45 |{children}
;
9 | };
10 |
11 | /**
12 | * Sets up the title for the dashboard content
13 | * @param children
14 | * @constructor
15 | */
16 | function Title({ children }) {
17 | return (
18 |
19 | {children}
20 |
21 | );
22 | }
23 |
24 | /**
25 | * Sets up the container for the dashboard content
26 | * Handles max-width and top border primarily
27 | * @param children
28 | * @constructor
29 | */
30 | function Content({ children }) {
31 | return (
32 |
33 |
35 | );
36 | }
37 |
38 | function Tabs({ children }) {
39 | return (
40 | {children}
34 |
41 |
43 | );
44 | }
45 |
46 | DashboardContent.Tabs = Tabs;
47 | DashboardContent.Title = Title;
48 | DashboardContent.Content = Content;
49 | export default DashboardContent;
50 |
--------------------------------------------------------------------------------
/src/pages/docs/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | getContentBySlug,
3 | getDocsNavigation,
4 | } from "@/utils/content/content-helpers";
5 | import { MDXRemote } from "next-mdx-remote";
6 | import { serialize } from "next-mdx-remote/serialize";
7 | import DocsLayout from "@/components/docs/docs-layout";
8 | import ContentMeta from "@/components/content-pages/content-meta";
9 |
10 | const DocsIndex = ({ navigation, content, title, meta }) => {
11 | return (
12 | {children}
42 |
20 |
23 | {title}
21 |
21 | {!!title && (
22 |
32 | );
33 |
34 | const SettingsCardFooter = ({ children }) => (
35 |
23 |
26 | )}
27 | {children}
28 | {disabled && (
29 |
30 | )}
31 | {title}
24 | {!!description &&{description}
} 25 |
36 | {children}
37 |
38 | );
39 |
40 | const SettingsCardBody = ({ children }) => (
41 | {children}
42 | );
43 |
44 | SettingsCard.Body = SettingsCardBody;
45 | SettingsCard.Footer = SettingsCardFooter;
46 |
47 | export default SettingsCard;
48 |
--------------------------------------------------------------------------------
/src/pages/api/og.tsx:
--------------------------------------------------------------------------------
1 | import { ImageResponse } from "@vercel/og";
2 | import { NextRequest } from "next/server";
3 |
4 | export const config = {
5 | runtime: "experimental-edge",
6 | };
7 |
8 | export default function SocialImage(req: NextRequest) {
9 | try {
10 | const { searchParams } = new URL(req.url);
11 |
12 | const hasTitle = searchParams.has("title");
13 | const title = hasTitle ? searchParams.get("title")?.slice(0, 100) : "";
14 | console.log("title found", title);
15 | return new ImageResponse(
16 | (
17 |
33 | {title}
34 |
35 | ),
36 | {
37 | width: 1200,
38 | height: 600,
39 | }
40 | );
41 | } catch (e) {
42 | console.log(`${e.message}`);
43 | return new Response(`Failed to generate an image`, {
44 | status: 500,
45 | });
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/core/input.tsx:
--------------------------------------------------------------------------------
1 | import { Input as InnerInput, InputProps } from "react-daisyui";
2 | import { ForwardedRef, forwardRef } from "react";
3 | import cx from "classnames";
4 |
5 | type Props = InputProps & {
6 | label?: string;
7 | helpText?: string;
8 | errorMessage?: string;
9 | };
10 | const Input = forwardRef(
11 | (
12 | { label, helpText, errorMessage, color, ...props }: Props,
13 | ref: ForwardedRef
17 |
26 |
43 | );
44 | }
45 | );
46 |
47 | Input.displayName = "Input";
48 |
49 | export default Input;
50 |
--------------------------------------------------------------------------------
/src/components/dashboard/accounts/personal-account-deactivated.tsx:
--------------------------------------------------------------------------------
1 | import ListTeams from "@/components/dashboard/profile/list-teams";
2 | import useTeamAccounts from "@/utils/api/use-team-accounts";
3 | import NewAccountForm from "@/components/dashboard/accounts/new-account-form";
4 | import Loader from "@/components/core/loader";
5 | import { useRouter } from "next/router";
6 | import useTranslation from "next-translate/useTranslation";
7 |
8 | const PersonalAccountDeactivated = () => {
9 | const { data, isLoading } = useTeamAccounts();
10 | const router = useRouter();
11 | const { t } = useTranslation("dashboard");
12 | return (
13 |
14 | {isLoading ? (
15 |
34 | );
35 | };
36 |
37 | export default PersonalAccountDeactivated;
38 |
--------------------------------------------------------------------------------
/src/utils/api/use-team-role.ts:
--------------------------------------------------------------------------------
1 | import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
2 | import { useQuery, UseQueryOptions } from "@tanstack/react-query";
3 | import handleSupabaseErrors from "../handle-supabase-errors";
4 | import { Database } from "@/types/supabase-types";
5 |
6 | export type UseTeamRoleResponse = {
7 | is_primary_owner: boolean;
8 | account_role: Database["public"]["Tables"]["account_user"]["Row"]["account_role"];
9 | };
10 |
11 | /**
12 | * Get the current user's role in a team
13 | * @param accountId
14 | * @param options
15 | */
16 | export default function useTeamRole(
17 | accountId: string,
18 | options?: UseQueryOptions
18 |
26 | router.push(`/dashboard/teams/${accountId}`)
27 | }
28 | />
29 |
30 | ) : (
31 | 19 | {t("personalAccountDeactivated.createFirstAccount")} 20 |
21 |22 | {t("personalAccountDeactivated.firstAccountDescription")} 23 |
24 |
29 |
31 | ) : (
32 | // Replace me with your content!
33 | Hosting has generously been provided by Vercel
51 | 56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/src/pages/blog/index.tsx:
--------------------------------------------------------------------------------
1 | import { getContentPaths } from "@/utils/content/content-helpers";
2 | import ContentMeta from "@/components/content-pages/content-meta";
3 | import useTranslation from "next-translate/useTranslation";
4 | import Link from "next/link";
5 | import { MDXRemote } from "next-mdx-remote";
6 | import { serialize } from "next-mdx-remote/serialize";
7 |
8 | const BlogIndex = ({ articles }) => {
9 | const { t } = useTranslation("content");
10 | return (
11 |
12 |
38 | );
39 | };
40 |
41 | export default BlogIndex;
42 |
43 | export async function getStaticProps({ params, locale, ...rest }) {
44 | const content = await getContentPaths(locale, "blog");
45 | const articles = [];
46 | for (const article of content) {
47 | articles.push({
48 | ...article,
49 | content: await serialize(article.content),
50 | });
51 | }
52 | return {
53 | props: {
54 | articles: articles.reverse(),
55 | },
56 | };
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/dashboard/teams/[accountId]/settings/members.tsx:
--------------------------------------------------------------------------------
1 | import AccountSettingsLayout from "@/components/dashboard/accounts/settings/account-settings-layout";
2 | import SettingsCard from "@/components/dashboard/shared/settings-card";
3 | import useTranslation from "next-translate/useTranslation";
4 | import InviteMember from "@/components/dashboard/accounts/settings/invite-member";
5 | import { useRouter } from "next/router";
6 | import ListMembers from "@/components/dashboard/accounts/settings/list-team-members";
7 | import ListTeamInvitations from "@/components/dashboard/accounts/settings/list-team-invitations";
8 | import useTeamInvitations from "@/utils/api/use-team-invitations";
9 | import useTeamAccount from "@/utils/api/use-team-account";
10 | import DashboardMeta from "@/components/dashboard/dashboard-meta";
11 |
12 | const TeamSettingsMembers = () => {
13 | const { t } = useTranslation("dashboard");
14 | const router = useRouter();
15 | const { accountId } = router.query;
16 | const { refetch } = useTeamInvitations(accountId as string);
17 | const { data } = useTeamAccount(accountId as string);
18 | return (
19 |
18 | {articles.map((article) => (
19 |
20 | {!!article.meta?.category && (
21 |
22 | {article.meta.category}
23 |
24 | )}
25 |
31 |
35 | ))}
36 |
37 |
24 |
28 |
36 |
38 |
29 | refetch()}
32 | />
33 |
34 |
18 | {[
19 | "incomplete_expired",
20 | "canceled",
21 | MANUAL_SUBSCRIPTION_REQUIRED,
22 | ].includes(subscriptionData?.status) && (
23 | <>
24 |
43 | );
44 | };
45 |
46 | export default AccountSubscriptionTakeover;
47 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | const nextJest = require("next/jest");
2 | const createJestConfig = nextJest({
3 | // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
4 | dir: "./",
5 | });
6 |
7 | // Add any custom config to be passed to Jest
8 | const customJestConfig = {
9 | // Add more setup options before each test is run
10 | setupFilesAfterEnv: ["25 | {t("accountSubscriptionTakeover.newSubscriptionTitle")} 26 |
27 |35 | {t( 36 | `accountSubscriptionTakeover.fixExistingSubscriptionTitle.${subscriptionData.status}` 37 | )} 38 |
39 |
27 |
28 |
29 |
30 | {t("profileButton.editProfile")}
36 |
37 | {
39 | await supabaseClient.auth.signOut();
40 | await router.push("/");
41 | }}
42 | >
43 | {t("shared.logOut")}
44 |
45 |
46 |
47 |
48 | );
49 | };
50 |
51 | export default DashboardProfileButton;
52 |
--------------------------------------------------------------------------------
/src/components/dashboard/sidebar/theme-selector.tsx:
--------------------------------------------------------------------------------
1 | import { MoonIcon, SunIcon } from "@heroicons/react/outline";
2 | import { Button, Dropdown } from "react-daisyui";
3 | import { useMemo } from "react";
4 | import useThemeStorage from "@/utils/use-theme-storage";
5 |
6 | export const AVAILABLE_THEMES = {
7 | light: {
8 | name: "Light",
9 | id: "light",
10 | Icon: SunIcon,
11 | },
12 | dark: {
13 | name: "Dark",
14 | id: "dark",
15 | Icon: MoonIcon,
16 | },
17 | night: {
18 | name: "Night",
19 | id: "night",
20 | Icon: MoonIcon,
21 | },
22 | dracula: {
23 | name: "Dracula",
24 | id: "dracula",
25 | Icon: MoonIcon,
26 | },
27 | };
28 |
29 | const ThemeSelector = () => {
30 | const { theme, setTheme, clearTheme } = useThemeStorage();
31 |
32 | const selectedTheme = useMemo(() => {
33 | return AVAILABLE_THEMES[theme];
34 | }, [theme]);
35 |
36 | return (
37 |
31 |
34 |
35 | {t("profileButton.loggedInAs")}
32 |{user?.email}
33 |
32 |
41 |
54 | {(!!helpText || !!errorMessage) && (
55 |
64 | )}
65 |
66 | );
67 | }
68 | );
69 |
70 | Select.displayName = "Select";
71 |
72 | export default Select;
73 |
--------------------------------------------------------------------------------
/src/components/dashboard/accounts/account-subscription-takeover/new-subscription.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, useState } from "react";
2 | import useAccountBillingOptions from "@/utils/api/use-account-billing-options";
3 | import { Button, ButtonGroup } from "react-daisyui";
4 | import useTranslation from "next-translate/useTranslation";
5 | import IndividualSubscriptionPlan from "@/components/dashboard/accounts/account-subscription-takeover/individual-subscription-plan";
6 |
7 | const NewSubscription = ({ currentAccount }) => {
8 | const [activeTab, setActiveTab] = useState(null);
9 | const [tabs, setTabs] = useState([]);
10 | const { t } = useTranslation("dashboard");
11 |
12 | const { data } = useAccountBillingOptions(currentAccount?.account_id, {
13 | onSuccess(data) {
14 | const options = new Set(data?.map((option) => option.interval));
15 | setTabs(Array.from(options));
16 | if (!activeTab || !options.has(activeTab)) {
17 | setActiveTab(Array.from(options)[0]);
18 | }
19 | },
20 | });
21 |
22 | const currentOptions = useMemo(() => {
23 | return data?.filter((option) => option.interval === activeTab) || [];
24 | }, [data, activeTab]);
25 |
26 | return (
27 |
28 |
29 | {tabs.map((tab) => (
30 |
37 | ))}
38 |
39 |
49 | );
50 | };
51 |
52 | export default NewSubscription;
53 |
--------------------------------------------------------------------------------
/src/components/dashboard/authentication/login-password.tsx:
--------------------------------------------------------------------------------
1 | import { useForm } from "react-hook-form";
2 | import { Button } from "react-daisyui";
3 | import useTranslation from "next-translate/useTranslation";
4 | import Input from "@/components/core/input";
5 | import { toast } from "react-toastify";
6 | import { DASHBOARD_PATH } from "@/types/auth";
7 | import { useRouter } from "next/router";
8 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
9 |
10 | type LOGIN_FORM = {
11 | email: string;
12 | password: string;
13 | };
14 |
15 | type Props = {
16 | redirectTo?: string;
17 | buttonText?: string;
18 | };
19 |
20 | const LoginPassword = ({ redirectTo = DASHBOARD_PATH, buttonText }: Props) => {
21 | const { t } = useTranslation("authentication");
22 | const router = useRouter();
23 | const supabaseClient = useSupabaseClient();
24 | const {
25 | register,
26 | handleSubmit,
27 | formState: { isSubmitting },
28 | } = useForm
40 | {currentOptions.map((option) => (
41 |
48 |
37 | {isLoading ? (
38 |
55 | );
56 | };
57 |
58 | export default Invitation;
59 |
--------------------------------------------------------------------------------
/src/components/dashboard/accounts/new-account-form.tsx:
--------------------------------------------------------------------------------
1 | import { useForm } from "react-hook-form";
2 | import { toast } from "react-toastify";
3 | import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
4 | import Input from "@/components/core/input";
5 | import { Button } from "react-daisyui";
6 | import useTranslation from "next-translate/useTranslation";
7 | import { Database } from "@/types/supabase-types";
8 |
9 | type Props = {
10 | onComplete: (accountId: string) => void;
11 | };
12 |
13 | type FORM_DATA = {
14 | name: string;
15 | };
16 |
17 | const NewAccountForm = ({ onComplete }: Props) => {
18 | const user = useUser();
19 | const supabaseClient = useSupabaseClient{t("invitation.invalid")}
41 | ) : ( 42 | <> 43 |{t("invitation.title")}
44 |{data?.team_name}
45 | 52 | 53 | )} 54 |
25 |
52 | );
53 | };
54 |
55 | export default SidebarMenu;
56 |
--------------------------------------------------------------------------------
/src/pages/api/billing/setup.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from "next";
2 | import { stripe } from "@/utils/admin/stripe";
3 | import getFullRedirectUrl from "@/utils/get-full-redirect-url";
4 | import { withApiAuth } from "@supabase/auth-helpers-nextjs";
5 | import { ACCOUNT_ROLES } from "@/types/auth";
6 | import { createOrRetrieveCustomer } from "@/utils/admin/stripe-billing-helpers";
7 |
8 | const BillingSetup = async (
9 | req: NextApiRequest,
10 | res: NextApiResponse,
11 | supabaseServerClient
12 | ) => {
13 | if (req.method !== "POST") {
14 | return res.status(405).json({ error: "Method Not Allowed" });
15 | }
16 |
17 | const { accountId, priceId } = req.body;
18 |
19 | if (!accountId) {
20 | return res.status(400).json({ error: "Missing account ID" });
21 | }
22 |
23 | const {
24 | data: { user },
25 | } = await supabaseServerClient.auth.getUser();
26 |
27 | const { data: currentUserRole } = await supabaseServerClient
28 | .rpc("current_user_account_role", {
29 | lookup_account_id: accountId,
30 | })
31 | .single();
32 |
33 | // only owners are allowed to update billing subscriptions
34 | if (currentUserRole?.account_role !== ACCOUNT_ROLES.owner) {
35 | return res.status(404).json({ error: "Account not found" });
36 | }
37 |
38 | const customerId = await createOrRetrieveCustomer({
39 | accountId,
40 | email: user.email,
41 | });
42 |
43 | const session = await stripe.checkout.sessions.create({
44 | payment_method_types: ["card"],
45 | customer: customerId,
46 | line_items: [{ price: priceId, quantity: 1 }],
47 | mode: "subscription",
48 | success_url: getFullRedirectUrl(
49 | currentUserRole.is_personal_account
50 | ? "/dashboard/billing"
51 | : `/dashboard/teams/${accountId}/settings/billing`
52 | ),
53 | cancel_url: getFullRedirectUrl(
54 | currentUserRole.is_personal_account
55 | ? "/dashboard/billing"
56 | : `/dashboard/teams/${accountId}/settings/billing`
57 | ),
58 | });
59 | res.status(200).json({ url: session.url });
60 | };
61 |
62 | export default withApiAuth(BillingSetup);
63 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Basejump",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next",
6 | "build": "yarn sync-stripe && next build",
7 | "start": "next start",
8 | "lint": "next lint",
9 | "type-check": "tsc",
10 | "test": "NEXT_PUBLIC_SUPABASE_URL=http://localhost NEXT_PUBLIC_SUPABASE_ANON_KEY=anon-key jest",
11 | "generate-types": "supabase gen types typescript --local > ./src/types/supabase-types.ts && eslint ./src/types/supabase-types.ts --fix",
12 | "sync-stripe": "npx tsx scripts/sync-stripe.ts"
13 | },
14 | "dependencies": {
15 | "@heroicons/react": "^1.0.6",
16 | "@supabase/auth-helpers-nextjs": "^0.5.1",
17 | "@supabase/auth-helpers-react": "^0.3.1",
18 | "@supabase/supabase-js": "^2.0.5",
19 | "@tanstack/react-query": "^4.14.5",
20 | "@vercel/og": "^0.0.20",
21 | "classnames": "^2.3.2",
22 | "date-fns": "^2.29.3",
23 | "gray-matter": "^4.0.3",
24 | "next": "13.0.2",
25 | "next-mdx-remote": "^4.2.0",
26 | "next-translate": "^1.6.0",
27 | "react": "^18.2.0",
28 | "react-daisyui": "^2.4.6",
29 | "react-dom": "^18.2.0",
30 | "react-hook-form": "^7.39.1",
31 | "react-toastify": "^9.1.1",
32 | "react-use": "^17.4.0",
33 | "stripe": "^10.16.0",
34 | "tailwind-merge": "^1.8.0"
35 | },
36 | "devDependencies": {
37 | "@tailwindcss/typography": "^0.5.8",
38 | "@testing-library/jest-dom": "^5.16.5",
39 | "@testing-library/react": "^13.4.0",
40 | "@types/jest": "^29.2.2",
41 | "@types/node": "^18.11.9",
42 | "@types/react": "^18.0.25",
43 | "@types/react-dom": "^18.0.8",
44 | "autoprefixer": "^10.4.13",
45 | "daisyui": "^2.38.1",
46 | "eslint": "8.27.0",
47 | "eslint-config-next": "13.0.2",
48 | "eslint-config-prettier": "^8.5.0",
49 | "eslint-plugin-prettier": "^4.2.1",
50 | "jest": "29.3.0",
51 | "jest-environment-jsdom": "29.3.0",
52 | "jest-fetch-mock": "^3.0.3",
53 | "next-transpile-modules": "^10.0.0",
54 | "postcss": "^8.4.18",
55 | "prettier": "^2.7.1",
56 | "tailwindcss": "^3.2.2",
57 | "ts-jest": "^29.0.3",
58 | "typescript": "^4.8.4"
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/dashboard/accounts/settings/account-settings-layout.tsx:
--------------------------------------------------------------------------------
1 | import DashboardContent from "@/components/dashboard/shared/dashboard-content";
2 | import useTranslation from "next-translate/useTranslation";
3 | import { useRouter } from "next/router";
4 | import { useMemo } from "react";
5 | import Link from "next/link";
6 | import cx from "classnames";
7 |
8 | const AccountSettingsLayout = ({ children }) => {
9 | const { t } = useTranslation("dashboard");
10 | const router = useRouter();
11 | const { accountId } = router.query;
12 | const tabs = useMemo(() => {
13 | return [
14 | {
15 | label: t("teamAccountSettings.tabs.general"),
16 | href: `/dashboard/teams/${accountId}/settings`,
17 | isActive: router.asPath === `/dashboard/teams/${accountId}/settings`,
18 | },
19 | {
20 | label: t("teamAccountSettings.tabs.members"),
21 | href: `/dashboard/teams/${accountId}/settings/members`,
22 | isActive:
23 | router.asPath === `/dashboard/teams/${accountId}/settings/members`,
24 | },
25 | {
26 | label: t("teamAccountSettings.tabs.billing"),
27 | href: `/dashboard/teams/${accountId}/settings/billing`,
28 | isActive:
29 | router.asPath === `/dashboard/teams/${accountId}/settings/billing`,
30 | },
31 | ];
32 | }, [accountId, router.asPath, t]);
33 | return (
34 |
26 |
46 |
47 |
27 |
37 |
38 |
40 | {currentAccount?.team_account === true ? (
41 |
48 |
51 |
40 | {tabs.map(({ label, href, isActive }) => (
41 |
48 | {label}
49 |
50 | ))}
51 |
52 |
20 |
61 | );
62 | };
63 |
64 | export default DocsSidebar;
65 |
--------------------------------------------------------------------------------
/src/components/content-pages/content-header.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Navbar } from "react-daisyui";
2 | import Link from "next/link";
3 | import { useUser } from "@supabase/auth-helpers-react";
4 | import { useRouter } from "next/router";
5 | import Logo from "@/components/basejump-default-content/logo";
6 | import useTranslation from "next-translate/useTranslation";
7 | import { MenuIcon } from "@heroicons/react/outline";
8 | import useHeaderNavigation from "@/utils/content/use-header-navigation";
9 |
10 | type Props = {
11 | toggleSidebar: () => void;
12 | };
13 |
14 | const ContentHeader = ({ toggleSidebar }: Props) => {
15 | const user = useUser();
16 | const router = useRouter();
17 |
18 | const { t } = useTranslation("content");
19 |
20 | const navigation = useHeaderNavigation();
21 |
22 | return (
23 |
21 |
25 |
29 |
60 |
25 | {router.asPath !== "/" && (
26 |
27 |
43 |
31 | {navigation.map((nav) => (
32 |
38 | {nav.title}
39 |
40 | ))}
41 |
42 |
44 | {!!user ? (
45 |
46 | {t("dashboard")}
47 |
48 | ) : (
49 | <>
50 |
51 | {t("login")}
52 |
53 |
54 | {t("signUp")}
55 |
56 |
57 | )}
58 |
59 |
60 |
63 |
64 |
15 |
42 | );
43 | };
44 |
45 | export default BlogShow;
46 |
47 | export async function getStaticProps({ params, locale, ...rest }) {
48 | const blog = await getContentBySlug(params.slug?.[0], {
49 | locale,
50 | contentType: "blog",
51 | });
52 |
53 | const content = await serialize(blog.content);
54 | return {
55 | props: {
56 | ...blog,
57 | content,
58 | },
59 | };
60 | }
61 |
62 | export async function getStaticPaths({ locales }) {
63 | const paths = [];
64 | for (const locale of locales) {
65 | const filePaths = await getContentPaths(locale, "blog");
66 | filePaths.forEach((filePath) => {
67 | paths.push({
68 | params: {
69 | slug: [filePath.slug],
70 | },
71 | locale,
72 | });
73 | });
74 | }
75 |
76 | return {
77 | paths,
78 | fallback: false,
79 | };
80 | }
81 |
--------------------------------------------------------------------------------
/src/pages/docs/[...slug].tsx:
--------------------------------------------------------------------------------
1 | import {
2 | getContentBySlug,
3 | getContentPaths,
4 | getDocsNavigation,
5 | } from "@/utils/content/content-helpers";
6 | import { MDXRemote } from "next-mdx-remote";
7 | import { serialize } from "next-mdx-remote/serialize";
8 | import DocsLayout from "@/components/docs/docs-layout";
9 | import ContentMeta from "@/components/content-pages/content-meta";
10 |
11 | const DocsShow = ({ navigation, content, title, meta }) => {
12 | return (
13 |
22 |
36 | {!!meta?.category && (
37 | {meta.category}
38 | )}
39 | -
23 |
- 24 | 25 | {t("home")} 26 | 27 | 28 |
- 29 | 30 | {t("blog")} 31 | 32 | 33 |
- {title} 34 |
{title}
40 |
21 | {!!meta?.category && (
22 |
23 | {meta.category}
24 |
25 | )}
26 |
29 | {title}
27 |
25 |
71 | );
72 | };
73 |
74 | export default ContentHeaderMobile;
75 |
--------------------------------------------------------------------------------
/content/blog/en/formatting-example.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Formatting Example"
3 | published: 2022-10-16
4 | category: "Example Category"
5 | description: "This is a quick example page showing the support for markdown elements"
6 | ---
7 |
8 | This is an example file showing off all the various Markdown elements
9 |
10 | ## Paragraphs
11 |
12 | Lorem ipsum dolor sit amet, *consectetur adipiscing elit*. Maecenas commodo mi fringilla, volutpat erat et, tristique
13 | metus. **Fusce quis hendrerit ipsum**. Phasellus convallis auctor turpis, at fringilla nibh blandit fermentum. Donec
14 | rhoncus
15 | consequat eros vel iaculis. Aenean nulla ex, aliquam euismod nibh ut, dignissim convallis est. Aenean dictum, libero ac
16 | sodales condimentum, arcu lacus porttitor metus, nec pellentesque velit elit id magna. Mauris lobortis vulputate mi ac
17 | tempus. Nullam vitae eros elit. Donec elementum facilisis cursus. Sed nulla massa, mollis id lacinia non, tristique quis
18 | ligula.
19 |
20 | Nulla a justo varius, tempor nibh a, tincidunt ligula. Duis ac augue sit amet dolor mattis pretium. Phasellus eu
21 | bibendum erat. Ut nec dolor non nunc ullamcorper luctus id eu libero. Phasellus nibh eros, laoreet quis eros non,
22 | malesuada vulputate arcu. In non tortor velit. Etiam feugiat, nisi nec bibendum fringilla, massa nisl egestas lectus,
23 | sed tincidunt nisi nunc a magna. Suspendisse faucibus sem non facilisis placerat. In hac habitasse platea dictumst.
24 | Pellentesque pharetra eu nibh in suscipit.
25 |
26 | ## Title Tags
27 |
28 | # # Title 1
29 |
30 | ## ## Title 2
31 |
32 | ### ### Title 3
33 |
34 | #### #### Title 4
35 |
36 |
26 |
70 |
27 |
28 |
39 |
69 | 37 | 38 | ## List items 39 | 40 | * bullet 41 | * list 42 | * Items 43 | * here 44 | 45 | 1. ordered 46 | 2. list 47 | 3. items 48 | 4. here 49 | 50 | ## Images 51 | 52 |  53 | 54 | ## Tables 55 | 56 | Tables can be added using standard HTML 57 | 58 |
| Name | 62 |Job | 63 |
|---|---|
| Jane | 68 |Pilot | 69 |
| John | 72 |Co-Pilot | 73 |
37 | 38 | ## List items 39 | 40 | * bullet 41 | * list 42 | * Items 43 | * here 44 | 45 | 1. ordered 46 | 2. list 47 | 3. items 48 | 4. here 49 | 50 | ## Images 51 | 52 |  53 | 54 | ## Tables 55 | 56 | Tables can be added using standard HTML 57 | 58 |
| Name | 62 |Job | 63 |
|---|---|
| Jane | 68 |Pilot | 69 |
| John | 72 |Co-Pilot | 73 |
38 |
45 | ) : (
46 | 39 | {t("accountSubscription.billingDisabled")} 40 |
41 |42 | {t("accountSubscription.billingDisabledDescription")} 43 |
44 |52 | {data?.plan_name} - {data?.status} 53 |
54 |55 | {t("accountSubscription.billingEmail", { 56 | email: data?.billing_email, 57 | })} 58 |
59 |
46 |
51 | ) : (
52 |
73 | )}
74 |
75 | );
76 | };
77 |
78 | export default LoginMagicLink;
79 |
--------------------------------------------------------------------------------
/src/components/dashboard/dashboard-layout.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from "react";
2 | import { Button, Drawer } from "react-daisyui";
3 | import SidebarMenu from "./sidebar/sidebar-menu";
4 | import useDashboardOverview from "@/utils/api/use-dashboard-overview";
5 | import { useRouter } from "next/router";
6 | import AccountSubscriptionTakeover from "@/components/dashboard/accounts/account-subscription-takeover/account-subscription-takeover";
7 | import useAccountBillingStatus from "@/utils/api/use-account-billing-status";
8 | import { MenuIcon } from "@heroicons/react/outline";
9 | import Logo from "@/components/basejump-default-content/logo";
10 |
11 | const DashboardLayout = ({ children }) => {
12 | const [isSidebarOpen, setIsSidebarOpen] = useState(false);
13 | const router = useRouter();
14 | const { accountId } = router.query;
15 |
16 | function toggleSidebar() {
17 | setIsSidebarOpen(!isSidebarOpen);
18 | }
19 |
20 | const { data, refetch: refetchDashboardOverview } = useDashboardOverview();
21 |
22 | useEffect(() => {
23 | /**
24 | * Close sidebar when route changes
25 | */
26 | setIsSidebarOpen(false);
27 | refetchDashboardOverview();
28 | }, [router.asPath, refetchDashboardOverview]);
29 | const currentAccount = useMemo(() => {
30 | if (!accountId) {
31 | return data?.find((a) => a.personal_account);
32 | }
33 | return data?.find((a) => a.account_id === accountId);
34 | }, [data, accountId]);
35 |
36 | const { data: subscriptionData } = useAccountBillingStatus(
37 | currentAccount?.account_id
38 | );
39 |
40 | return (
41 | {t("magicLink.checkEmail")}
47 | 50 |
42 |
54 |
67 |
68 | {subscriptionData?.billing_enabled &&
69 | !["active", "trialing"].includes(subscriptionData?.status) && (
70 |
73 | );
74 | };
75 |
76 | export default DashboardLayout;
77 |
--------------------------------------------------------------------------------
/src/components/dashboard/accounts/account-subscription-takeover/individual-subscription-plan.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "react-daisyui";
2 | import { useRouter } from "next/router";
3 | import { UseAccountBillingOptionsResponse } from "@/utils/api/use-account-billing-options";
4 | import useTranslation from "next-translate/useTranslation";
5 | import { useMutation } from "@tanstack/react-query";
6 | import { UseDashboardOverviewResponse } from "@/utils/api/use-dashboard-overview";
7 | import { toast } from "react-toastify";
8 |
9 | type Props = {
10 | plan: UseAccountBillingOptionsResponse[0];
11 | currentAccount: UseDashboardOverviewResponse[0];
12 | };
13 | const IndividualSubscriptionPlan = ({ plan, currentAccount }: Props) => {
14 | const router = useRouter();
15 | const { t } = useTranslation("dashboard");
16 |
17 | const setupCheckoutLink = useMutation(
18 | async () => {
19 | const res = await fetch("/api/billing/setup", {
20 | method: "POST",
21 | headers: {
22 | "Content-Type": "application/json",
23 | },
24 | body: JSON.stringify({
25 | accountId: currentAccount?.account_id,
26 | priceId: plan.price_id,
27 | }),
28 | });
29 |
30 | const jsonResponse = await res.json();
31 |
32 | if (!res.ok) {
33 | throw new Error(jsonResponse.error);
34 | }
35 | return jsonResponse.url;
36 | },
37 | {
38 | onSuccess(url) {
39 | console.log("whoooop", url);
40 | if (!url) return;
41 | window.location.href = url;
42 | },
43 | onError(error: any) {
44 | toast.error(error.message);
45 | },
46 | }
47 | );
48 |
49 | return (
50 |
51 |
76 | );
77 | };
78 |
79 | export default IndividualSubscriptionPlan;
80 |
--------------------------------------------------------------------------------
/src/pages/api/billing/status.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from "next";
2 | import { createOrRetrieveSubscription } from "@/utils/admin/stripe-billing-helpers";
3 | import { withApiAuth } from "@supabase/auth-helpers-nextjs";
4 | import { MANUAL_SUBSCRIPTION_REQUIRED } from "@/types/billing";
5 | import { supabaseAdmin } from "@/utils/admin/supabase-admin-client";
6 |
7 | const BillingStatus = async (
8 | req: NextApiRequest,
9 | res: NextApiResponse,
10 | supabaseServerClient
11 | ) => {
12 | const { accountId } = req.query;
13 |
14 | if (!accountId) {
15 | return res.status(400).json({ error: "Missing account ID" });
16 | }
17 |
18 | const {
19 | data: { user },
20 | } = await supabaseServerClient.auth.getUser();
21 |
22 | const { data } = await supabaseServerClient
23 | .rpc("current_user_account_role", {
24 | lookup_account_id: accountId,
25 | })
26 | .single();
27 |
28 | const { data: config } = await supabaseAdmin
29 | .rpc("get_service_role_config")
30 | .single();
31 |
32 | if (!data) {
33 | return res.status(404).json({ error: "Account not found" });
34 | }
35 |
36 | // @ts-ignore
37 | if (config.enable_account_billing === false) {
38 | // If billing is disabled, return the account as active
39 | return res.status(200).json({
40 | subscription_id: null,
41 | subscription_active: true,
42 | status: "active",
43 | is_primary_owner: false,
44 | billing_email: null,
45 | plan_name: null,
46 | account_role: data.account_role,
47 | billing_enabled: false,
48 | });
49 | }
50 |
51 | try {
52 | const subscriptionData = await createOrRetrieveSubscription({
53 | accountId: accountId as string,
54 | email: user.email,
55 | });
56 | return res.status(200).json({
57 | subscription_id: subscriptionData.id,
58 | subscription_active: ["trialing", "active"].includes(
59 | subscriptionData.status
60 | ),
61 | plan_name: subscriptionData.plan_name,
62 | billing_email: subscriptionData.billing_email,
63 | status: subscriptionData.status,
64 | account_role: data?.account_role,
65 | is_primary_owner: data?.is_primary_owner,
66 | billing_enabled: true,
67 | });
68 | } catch (error) {
69 | if (error.message === MANUAL_SUBSCRIPTION_REQUIRED) {
70 | return res.status(200).json({
71 | subscription_id: null,
72 | subscription_active: false,
73 | plan_name: null,
74 | billing_email: null,
75 | status: MANUAL_SUBSCRIPTION_REQUIRED,
76 | account_role: data?.account_role,
77 | is_primary_owner: data?.is_primary_owner,
78 | billing_enabled: true,
79 | });
80 | }
81 | return res.status(500).json({ error: error.message });
82 | }
83 | };
84 |
85 | export default withApiAuth(BillingStatus);
86 |
--------------------------------------------------------------------------------
/src/components/dashboard/profile/list-teams.tsx:
--------------------------------------------------------------------------------
1 | import useTeamAccounts from "@/utils/api/use-team-accounts";
2 | import SettingsCard from "@/components/dashboard/shared/settings-card";
3 | import useTranslation from "next-translate/useTranslation";
4 | import Loader from "@/components/core/loader";
5 | import { DASHBOARD_PATH } from "@/types/auth";
6 | import { useRouter } from "next/router";
7 | import { useToggle } from "react-use";
8 | import NewAccountModal from "@/components/dashboard/accounts/new-account-modal";
9 | import { Button } from "react-daisyui";
10 | import Link from "next/link";
11 |
12 | const ListTeams = () => {
13 | const [newAccount, toggleNewAccount] = useToggle(false);
14 | const { t } = useTranslation("dashboard");
15 | const router = useRouter();
16 | const { data, isLoading, refetch } = useTeamAccounts();
17 |
18 | async function onAccountCreated(accountId: string) {
19 | await refetch();
20 | toggleNewAccount(false);
21 | await router.push(`${DASHBOARD_PATH}?accountId=${accountId}`);
22 | }
23 |
24 | return (
25 | <>
26 |
52 |
55 | {plan.product_name}
53 |{plan.product_description}
54 |
56 |
75 |
57 |
66 |
74 | 58 | {new Intl.NumberFormat(router.locale, { 59 | style: "currency", 60 | currency: plan.currency, 61 | minimumFractionDigits: 0, 62 | }).format((plan.price || 0) / 100)} 63 |
64 |/ {t(`newSubscriptions.intervals.${plan.interval}`)}
65 |
34 | {data?.map((account) => (
35 |
59 | )}
60 |
36 |
57 | ))}
58 |
37 |
40 | {account.team_name}
38 |{account.account_role}
39 |
41 |
46 | {t("listTeams.viewTeam")}
47 |
48 |
53 | {t("listTeams.manageTeam")}
54 |
55 |
56 |
17 |
45 |
46 |
18 |
27 | {!member.is_primary_owner && (
28 | {member.name}
19 |
20 | {member.is_primary_owner ? (
21 | {t("listTeamMembers.primaryOwner")}
22 | ) : (
23 | {member.account_role}
24 | )}
25 |
26 |
29 |
30 |
33 |
34 | toggleUpdateRole(true)}>
35 | {t("listTeamMembers.updateRole")}
36 |
37 | toggleRemoveMember(true)}>
38 | {t("listTeamMembers.removeMember")}
39 |
40 |
41 |
42 |
43 | )}
44 |
45 |
85 | );
86 | };
87 |
88 | export default IndividualTeamInvitation;
89 |
--------------------------------------------------------------------------------
/src/components/dashboard/accounts/settings/update-team-member-role.tsx:
--------------------------------------------------------------------------------
1 | import { useForm } from "react-hook-form";
2 | import { Button, Checkbox } from "react-daisyui";
3 | import useTranslation from "next-translate/useTranslation";
4 | import Select from "@/components/core/select";
5 | import { userTypeOptions } from "@/components/dashboard/accounts/settings/invite-member";
6 | import useTeamRole from "@/utils/api/use-team-role";
7 | import { UseTeamMembersResponse } from "@/utils/api/use-team-members";
8 | import { toast } from "react-toastify";
9 | import { useQueryClient } from "@tanstack/react-query";
10 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
11 | import { Database } from "@/types/supabase-types";
12 |
13 | type USER_ROLE_FORM = {
14 | account_role: Database["public"]["Tables"]["account_user"]["Row"]["account_role"];
15 | make_primary_owner?: boolean;
16 | };
17 |
18 | type Props = {
19 | member: UseTeamMembersResponse;
20 | onComplete?: () => void;
21 | };
22 |
23 | const UpdateTeamMemberRole = ({ member, onComplete }: Props) => {
24 | const { t } = useTranslation("dashboard");
25 | const supabaseClient = useSupabaseClient
46 |
64 | 47 | {t("listTeamInvitations.linkDescription", { 48 | date: formatDistance(new Date(invitation.created_at), new Date(), { 49 | addSuffix: true, 50 | }), 51 | })} 52 |
53 |
54 |
59 | {invitation.invitation_type}
60 |
61 | {invitation.account_role}
62 |
63 |
65 |
73 |
83 |
84 | {t("teamSelectMenu.personalAccount")}
62 |{t("teamSelectMenu.teams")}
70 |
83 |
86 | {t("teamSelectMenu.newAccount")}
85 |
121 |
131 | {t("inviteMember.linkGenerated")}
122 | 130 |