Moved around profile components, added ui for monthly and yearly

src/components/profile/UserSettings.js

@@ -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">

src/components/profile/subscription/SubscribeModal.js

@@ -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}

src/components/profile/subscription/UserSubscription.js

@@ -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">
+                    {user && <UserProfileCard user={user} />}
-                        {/* Subscription Status Messages */}
+                    <div className="mt-4">
-                        {subscribed && !user?.role?.nwc && (
+                        <SubscribeModal />
-                            <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>
-                        )}
                     </div>
                 </div>
 

src/pages/subscribe.js

@@ -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 ? (
+                <SubscribeModal />
-                    <>
-                        {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>
-                )}
             </div>
 
             {!session?.user && (