forked from mrwyndham/fastpocket
125 lines
4.0 KiB
JavaScript
125 lines
4.0 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { toast } from "react-toastify";
|
||
import { useRouter } from "next/navigation";
|
||
import { useQRCode } from "next-qrcode";
|
||
import { createManagementSubscriptionSession, getSubscriptions } from "@/app/actions";
|
||
import pb from "@/lib/pocketbase";
|
||
import { Subscription, User } from "@/types";
|
||
|
||
function AccountContent({ user }) {
|
||
const router = useRouter();
|
||
const { Canvas } = useQRCode();
|
||
|
||
const [subscription, setSubscription] = useState();
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
if (!user) {
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
try {
|
||
setLoading(true);
|
||
const subscriptions = await getSubscriptions();
|
||
if (subscriptions.length > 0) {
|
||
setSubscription(subscriptions[0]);
|
||
}
|
||
setLoading(false);
|
||
} catch (err) {
|
||
setLoading(false);
|
||
}
|
||
})();
|
||
}, [user]);
|
||
|
||
const manageSubscription = async () => {
|
||
try {
|
||
const managementSession = await createManagementSubscriptionSession();
|
||
router.push(managementSession.url);
|
||
} catch (error) {
|
||
if (error instanceof Error) {
|
||
toast.error(error.message, {
|
||
position: "bottom-left",
|
||
autoClose: 5000,
|
||
hideProgressBar: false,
|
||
closeOnClick: true,
|
||
pauseOnHover: true,
|
||
draggable: true,
|
||
progress: undefined,
|
||
theme: "colored",
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
return loading ? (
|
||
<div className="flex flex-col"></div>
|
||
) : (
|
||
<div className="flex flex-col">
|
||
<div className="max-w-6xl mx-auto mb-12 h-full w-full px-6">
|
||
<div className="w-full bg-base-200 p-8 rounded text-base-content">
|
||
<h3 className="font-accent text-xl text-secondary mb-2">
|
||
Your Subscription
|
||
</h3>
|
||
{subscription && subscription.status !== "canceled" ? (
|
||
<>
|
||
<h2 className="text-3xl mb-3 font-heading font-bold">
|
||
{subscription?.product?.name}
|
||
</h2>
|
||
<p className="text-lg mb-4">
|
||
{subscription.product?.description}
|
||
</p>
|
||
<button
|
||
onClick={manageSubscription}
|
||
className="btn btn-sm text-base-content capitalize !rounded-md bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8"
|
||
>
|
||
Manage Subscription
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<p className="text-lg text-base-content mb-4">
|
||
{"You haven’t upgraded your workflow yet"}
|
||
</p>
|
||
<div className="flex flex-row gap-2 flex-wrap">
|
||
<button
|
||
onClick={() => router.push("/pricing")}
|
||
className="btn btn-sm btn-neutral text-primary-content capitalize bg-gradient-to-r from-primary to-secondary border-none"
|
||
>
|
||
Upgrade
|
||
</button>
|
||
<button
|
||
onClick={manageSubscription}
|
||
className="btn btn-sm btn-secondary text-primary-content capitalize border-none"
|
||
>
|
||
Manage Purchases
|
||
</button>
|
||
<button
|
||
onClick={() =>
|
||
document.getElementById("password-reset-modal")?.click()
|
||
}
|
||
className="btn btn-sm btn-secondary md:ml-auto text-primary-content capitalize border-none"
|
||
>
|
||
Reset Password
|
||
</button>
|
||
<button
|
||
onClick={() =>
|
||
document.getElementById("email-change-modal")?.click()
|
||
}
|
||
className="btn btn-sm btn-secondary text-primary-content capitalize border-none"
|
||
>
|
||
Change Email
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default AccountContent;
|