mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Moved around profile components, added ui for monthly and yearly
This commit is contained in:
austinkelsay
parent
e740b8e4ef
commit
ddb16c9401
@ -46,9 +46,6 @@ const UserSettings = () => {
|
||||
</p>
|
||||
<BitcoinConnectButton />
|
||||
</div>
|
||||
|
||||
{/* Subscription Modal */}
|
||||
{user && <SubscribeModal user={user} />}
|
||||
</div>
|
||||
|
||||
<div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">
|
||||
|
||||
@ -34,6 +34,7 @@ const SubscribeModal = ({ user }) => {
|
||||
const [nip05Visible, setNip05Visible] = useState(false);
|
||||
const [cancelSubscriptionVisible, setCancelSubscriptionVisible] = useState(false);
|
||||
const [renewSubscriptionVisible, setRenewSubscriptionVisible] = useState(false);
|
||||
const [selectedPlan, setSelectedPlan] = useState('monthly');
|
||||
|
||||
useEffect(() => {
|
||||
if (user && user.role) {
|
||||
@ -148,7 +149,17 @@ const SubscribeModal = ({ user }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card title={subscriptionCardTitle} className="w-full m-4 mx-auto border border-gray-700">
|
||||
<Card title={subscriptionCardTitle} className="w-full mx-auto border border-gray-700">
|
||||
{!session?.user && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="info" text="You must be logged in to subscribe" />
|
||||
<GenericButton
|
||||
label="Login"
|
||||
className="w-auto mt-4 text-[#f8f8ff]"
|
||||
onClick={() => router.push('/auth/signin')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{subscribed && !user?.role?.nwc && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="success" text="Subscribed!" />
|
||||
@ -163,7 +174,7 @@ const SubscribeModal = ({ user }) => {
|
||||
<p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
|
||||
</div>
|
||||
)}
|
||||
{(!subscribed && !subscriptionExpiredAt) && (
|
||||
{(!subscribed && !subscriptionExpiredAt && session?.user) && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="info" text="You currently have no active subscription" />
|
||||
<GenericButton
|
||||
@ -223,6 +234,39 @@ const SubscribeModal = ({ user }) => {
|
||||
<Badge value="BONUS" severity="success" className="mr-2 text-[#f8f8ff] font-bold"></Badge>
|
||||
<span className="text-center font-bold">I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4 mb-4">
|
||||
<div
|
||||
className={`p-4 border rounded-lg cursor-pointer transition-all duration-200 hover:border-blue-400
|
||||
${selectedPlan === 'monthly' ? 'border-blue-400 bg-blue-900/20' : 'border-gray-600'}`}
|
||||
onClick={() => setSelectedPlan('monthly')}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center
|
||||
${selectedPlan === 'monthly' ? 'border-blue-400' : 'border-gray-400'}`}>
|
||||
{selectedPlan === 'monthly' && <div className="w-2 h-2 rounded-full bg-blue-400"></div>}
|
||||
</div>
|
||||
<span className="font-semibold">Monthly</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">50,000 sats</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`p-4 border rounded-lg cursor-pointer transition-all duration-200 hover:border-blue-400
|
||||
${selectedPlan === 'yearly' ? 'border-blue-400 bg-blue-900/20' : 'border-gray-600'}`}
|
||||
onClick={() => setSelectedPlan('yearly')}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center
|
||||
${selectedPlan === 'yearly' ? 'border-blue-400' : 'border-gray-400'}`}>
|
||||
{selectedPlan === 'yearly' && <div className="w-2 h-2 rounded-full bg-blue-400"></div>}
|
||||
</div>
|
||||
<span className="font-semibold">Yearly</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">500,000 sats</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SubscriptionPaymentButtons
|
||||
onSuccess={handleSubscriptionSuccess}
|
||||
onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}
|
||||
|
||||
@ -5,8 +5,9 @@ import { useToast } from '@/hooks/useToast';
|
||||
import axios from 'axios';
|
||||
import { Card } from 'primereact/card';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import { Message } from "primereact/message";
|
||||
import SubscribeModal from '@/components/profile/subscription/SubscribeModal';
|
||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||
import UserProfileCard from '@/components/profile/UserProfileCard';
|
||||
import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
|
||||
import Image from 'next/image';
|
||||
import NostrIcon from '../../../../public/images/nostr.png';
|
||||
@ -101,32 +102,9 @@ const UserSubscription = () => {
|
||||
<div className="w-full flex flex-row max-lap:flex-col">
|
||||
{/* Left Column - 22% */}
|
||||
<div className="w-[21%] h-full max-lap:w-full">
|
||||
<div className="p-4 bg-gray-800 rounded-lg max-lap:mb-4">
|
||||
{/* Subscription Status Messages */}
|
||||
{subscribed && !user?.role?.nwc && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="success" text="Subscribed!" />
|
||||
<p className="mt-4">Thank you for your support 🎉</p>
|
||||
<p className="text-sm text-gray-400">Pay-as-you-go subscription requires manual renewal on {subscribedUntil.toLocaleDateString()}</p>
|
||||
</div>
|
||||
)}
|
||||
{subscribed && user?.role?.nwc && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="success" text="Subscribed!" />
|
||||
<p className="mt-4">Thank you for your support 🎉</p>
|
||||
<p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
|
||||
</div>
|
||||
)}
|
||||
{(!subscribed && !subscriptionExpiredAt) && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="info" text="You currently have no active subscription" />
|
||||
</div>
|
||||
)}
|
||||
{subscriptionExpiredAt && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
|
||||
</div>
|
||||
)}
|
||||
{user && <UserProfileCard user={user} />}
|
||||
<div className="mt-4">
|
||||
<SubscribeModal />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -4,9 +4,8 @@ import { useRouter } from 'next/router';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import axios from 'axios';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Message } from 'primereact/message';
|
||||
import SubscribeModal from '@/components/profile/subscription/SubscribeModal';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import { Menu } from "primereact/menu";
|
||||
import GenericButton from '@/components/buttons/GenericButton';
|
||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||
import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
|
||||
@ -122,61 +121,13 @@ const Subscribe = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const subscriptionCardTitleAndButton = (
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<span className="text-xl text-900 font-bold text-white">Plebdevs Subscription</span>
|
||||
<i
|
||||
className="pi pi-ellipsis-h text-2xlcursor-pointer hover:opacity-75"
|
||||
onClick={(e) => menu.current.toggle(e)}
|
||||
></i>
|
||||
<Menu model={menuItems} popup ref={menu} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const subscriptionCardTitle = (
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<span className="text-xl text-900 font-bold text-white">Plebdevs Subscription</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
{windowWidth < 768 && (
|
||||
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
|
||||
)}
|
||||
<div className="mb-4 p-4 bg-gray-800 rounded-lg w-fit">
|
||||
{session && session?.user ? (
|
||||
<>
|
||||
{subscribed && !user?.role?.nwc && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="success" text="Subscribed!" />
|
||||
<p className="mt-4">Thank you for your support 🎉</p>
|
||||
<p className="text-sm text-gray-400">Pay-as-you-go subscription must be manually renewed on {subscribedUntil.toLocaleDateString()}</p>
|
||||
</div>
|
||||
)}
|
||||
{subscribed && user?.role?.nwc && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="success" text="Subscribed!" />
|
||||
<p className="mt-4">Thank you for your support 🎉</p>
|
||||
<p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
|
||||
</div>
|
||||
)}
|
||||
{(!subscribed && !subscriptionExpiredAt) && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="info" text="You currently have no active subscription" />
|
||||
</div>
|
||||
)}
|
||||
{subscriptionExpiredAt && (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
<Message className="w-fit" severity="info" text="Login to manage your subscription" />
|
||||
</div>
|
||||
)}
|
||||
<SubscribeModal />
|
||||
</div>
|
||||
|
||||
{!session?.user && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user