diff --git a/components/Dashboard.js b/components/Dashboard.js index 0acebbb..05eb391 100644 --- a/components/Dashboard.js +++ b/components/Dashboard.js @@ -4,49 +4,18 @@ You can add as many elements as you want. Don't forget to update your getProfile function with your new elements. */ -import { useEffect, useState } from "react"; - import Avatar from "./Avatar"; +import { PriceIds } from "utils/priceList"; import { supabase } from "../utils/supabaseClient"; import { toast } from "react-toastify"; +import { useState } from "react"; -export default function Account({ session }) { - const [loading, setLoading] = useState(true); - const [username, setUsername] = useState(null); - const [website, setWebsite] = useState(null); +export default function Account(props) { + const [loading, setLoading] = useState(false); + const [username, setUsername] = useState(props.profile.username); + const [website, setWebsite] = useState(props.profile.website); const [avatar_url, setAvatarUrl] = useState(null); - useEffect(() => { - getProfile(); - }, [session]); - - async function getProfile() { - try { - setLoading(true); - const user = supabase.auth.user(); - - let { data, error, status } = await supabase - .from("profiles") - .select(`username, website, avatar_url`) - .eq("id", user.id) - .single(); - - if (error && status !== 406) { - throw error; - } - - if (data) { - setUsername(data.username); - setWebsite(data.website); - setAvatarUrl(data.avatar_url); - } - } catch (error) { - alert(error.message); - } finally { - setLoading(false); - } - } - async function updateProfile({ username, website, avatar_url }) { try { setLoading(true); @@ -71,64 +40,71 @@ export default function Account({ session }) { alert(error.message); } finally { setLoading(false); - toast.success("Your profile has been updated") + toast.success("Your profile has been updated"); } } return ( -
- { - setAvatarUrl(url); - updateProfile({ username, website, avatar_url: url }); - }} - /> -
- - -
-
- - setUsername(e.target.value)} - /> -
-
- - setWebsite(e.target.value)} +
+
+ { + setAvatarUrl(url); + updateProfile({ username, website, avatar_url: url }); + }} /> +
+ + +
+
+ + setUsername(e.target.value)} + /> +
+
+ + setWebsite(e.target.value)} + /> +
+ +
+ +
-
- +
+

Your current plan

+

{props.plan.plan ? PriceIds[props.plan.plan] : "Free tier"}

); diff --git a/components/Pricing.js b/components/Pricing.js index 04762f2..27faa5d 100644 --- a/components/Pricing.js +++ b/components/Pricing.js @@ -6,6 +6,7 @@ You can switch between flat payment or subscription by setting the flat variable import { useEffect, useState } from "react"; import { Auth } from "@supabase/ui"; +import { Prices } from "utils/priceList"; import { Switch } from "@headlessui/react"; import axios from "axios"; import getStripe from "utils/stripe"; @@ -32,20 +33,7 @@ const Pricing = () => { ); } }, [user]); - const prices = { - personal: { - monthly: "price_1J5q2yDMjD0UnVmMXzEWYDnl", - anually: "price_1J5q45DMjD0UnVmMQxXHKGAv", - }, - team: { - monthly: "price_1J5q3GDMjD0UnVmMlHc5Eedq", - anually: "price_1J5q8zDMjD0UnVmMqsngM91X", - }, - pro: { - monthly: "price_1J5q3TDMjD0UnVmMJKX3nkDq", - anually: "price_1J5q9VDMjD0UnVmMIQtVDSZ9", - }, - }; + const flat = false; // Switch between subscription system or flat prices const pricing = { monthly: { @@ -165,7 +153,9 @@ const Pricing = () => { onClick={(e) => handleSubmit( e, - enabled ? prices.personal.anually : prices.personal.monthly + enabled + ? Prices.personal.anually.id + : Prices.personal.monthly.id ) }> Buy Now @@ -206,7 +196,9 @@ const Pricing = () => { onClick={(e) => handleSubmit( e, - enabled ? prices.team.anually : prices.team.monthly + enabled + ? Prices.team.anually.id + : Prices.team.monthly.id ) }> Buy Now @@ -247,7 +239,9 @@ const Pricing = () => { onClick={(e) => handleSubmit( e, - enabled ? prices.pro.anually : prices.pro.monthly + enabled + ? Prices.pro.anually.id + : Prices.pro.monthly.id ) }> Buy Now diff --git a/pages/dashboard.js b/pages/dashboard.js index 67f8cac..03710da 100644 --- a/pages/dashboard.js +++ b/pages/dashboard.js @@ -1,13 +1,14 @@ +import { getSub, supabase } from "../utils/supabaseClient"; import { useEffect, useState } from "react"; import Auth from "../components/Auth"; import Dashboard from "../components/Dashboard"; import Head from "next/head"; import Layout from "components/Layout"; -import { supabase } from "../utils/supabaseClient"; +import { createClient } from "@supabase/supabase-js"; import { useRouter } from "next/router"; -const DashboardPage = ({ user }) => { +const DashboardPage = ({ user, plan, profile }) => { const [session, setSession] = useState(null); const router = useRouter(); @@ -33,7 +34,7 @@ const DashboardPage = ({ user }) => { -
+ <>

Dashboard

@@ -44,20 +45,42 @@ const DashboardPage = ({ user }) => {
) : ( <> - + )} -
+
); }; export async function getServerSideProps({ req }) { - const { user } = await supabase.auth.api.getUserByCookie(req); + const supabaseAdmin = createClient( + process.env.NEXT_PUBLIC_SUPABASE_URL, + process.env.SUPABASE_ADMIN_KEY + ); + const { user } = await supabaseAdmin.auth.api.getUserByCookie(req); + // If the user exist, you will retrieve the user profile and if he/she's a paid user if (user) { - return { props: { user } }; + let { data: plan, error } = await supabaseAdmin + .from("subscriptions") + .select("paid_user, plan") + .eq("id", user.id) + .single(); + + let { data: profile, errorprofile } = await supabaseAdmin + .from("profiles") + .select(`username, website, avatar_url`) + .eq("id", user.id) + .single(); + + return { props: { user, plan, profile } }; } if (!user) { diff --git a/public/logopremium.svg b/public/logopremium.svg new file mode 100644 index 0000000..3de6eb8 --- /dev/null +++ b/public/logopremium.svg @@ -0,0 +1,35 @@ + + + + + + SupaNexTail + + + + + + + + + + + + + + + + + + + + + + + + + + + Premium + + diff --git a/utils/priceList.js b/utils/priceList.js new file mode 100644 index 0000000..f1fc454 --- /dev/null +++ b/utils/priceList.js @@ -0,0 +1,45 @@ +// You can store your price IDs from Stripe here + +const Prices = { + personal: { + monthly: { + id: "price_1J5q2yDMjD0UnVmMXzEWYDnl", + desc: "Personal plan (monthly)", + }, + anually: { + id: "price_1J5q45DMjD0UnVmMQxXHKGAv", + desc: "Personal plan (anually)", + }, + }, + team: { + monthly: { + id: "price_1J5q3GDMjD0UnVmMlHc5Eedq", + desc: "Team plan (monthly)", + }, + anually: { + id: "price_1J5q8zDMjD0UnVmMqsngM91X", + desc: "Team plan (anually)", + }, + }, + pro: { + monthly: { + id: "price_1J5q3TDMjD0UnVmMJKX3nkDq", + desc: "Pro plan (monthly)", + }, + anually: { + id: "price_1J5q9VDMjD0UnVmMIQtVDSZ9", + desc: "Pro plan (anually)", + }, + }, +}; + +const PriceIds = { + price_1J5q2yDMjD0UnVmMXzEWYDnl: "Personal plan (monthly)", + price_1J5q45DMjD0UnVmMQxXHKGAv: "Personal plan (anually)", + price_1J5q3GDMjD0UnVmMlHc5Eedq: "Team plan (monthly)", + price_1J5q8zDMjD0UnVmMqsngM91X: "Team plan (anually)", + price_1J5q3TDMjD0UnVmMJKX3nkDq: "Pro plan (monthly)", + price_1J5q9VDMjD0UnVmMIQtVDSZ9: "Pro plan (anually)", +}; + +export { Prices, PriceIds }; diff --git a/utils/supabaseClient.js b/utils/supabaseClient.js index e3fcf7f..db7f13f 100644 --- a/utils/supabaseClient.js +++ b/utils/supabaseClient.js @@ -1,6 +1,16 @@ -import { createClient } from '@supabase/supabase-js' +import { createClient } from "@supabase/supabase-js"; -const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL -const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY +const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL; +const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY; -export const supabase = createClient(supabaseUrl, supabaseAnonKey) \ No newline at end of file +export const supabase = createClient(supabaseUrl, supabaseAnonKey); + +// Check if a user has a paid plan +export const getSub = async () => { + let { data: subscriptions, error } = await supabase + .from("subscriptions") + .select("paid_user, plan"); + if (subscriptions) { + return subscriptions; + } +};