Subscribe card, just need to add button functionality on ... menu

src/components/profile/subscription/UserSubscription.js

@@ -0,0 +1,106 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Button } from "primereact/button";
+import { Menu } from "primereact/menu";
+import { Message } from "primereact/message";
+import { Card } from "primereact/card";
+import SubscribeModal from "@/components/profile/subscription/SubscribeModal";
+
+const UserSubscription = ({ user }) => {
+    const [subscribeModalVisible, setSubscribeModalVisible] = useState(false);
+    const [subscribed, setSubscribed] = useState(false);
+    const [subscribedUntil, setSubscribedUntil] = useState(null);
+    const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null);
+    const menu = useRef(null);
+
+    useEffect(() => {
+        if (user && user.role) {
+            setSubscribed(user.role.subscribed);
+            const subscribedAt = new Date(user.role.lastPaymentAt);
+            const subscribedUntil = new Date(subscribedAt.getTime() + 31 * 24 * 60 * 60 * 1000);
+            setSubscribedUntil(subscribedUntil);
+            if (user.role.subscriptionExpiredAt) {
+                const expiredAt = new Date(user.role.subscriptionExpiredAt)
+                setSubscriptionExpiredAt(expiredAt);
+            }
+        }
+    }, [user]);
+
+    const menuItems = [
+        {
+            label: "Renew Subscription",
+            icon: "pi pi-bolt",
+            command: () => {
+                // Add your edit functionality here
+            },
+        },
+        {
+            label: "Schedule 1:1",
+            icon: "pi pi-calendar",
+            command: () => {
+                // Add your edit functionality here
+            },
+        },
+        {
+            label: "Cancel Subscription",
+            icon: "pi pi-trash",
+            command: () => {
+                // Add your delete functionality here
+            },
+        },
+    ];
+
+    const openSubscribeModal = () => {
+        setSubscribeModalVisible(true);
+    };
+
+    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>
+            <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>
+    );
+
+    return (
+        <>
+            <Card title={subscriptionCardTitle} className="w-fit m-8 mx-auto">
+                {subscribed && (
+                    <div className="flex flex-col">
+                        <Message className="w-fit" severity="success" text="Subscribed!" />
+                        <p className="mt-8">Thank you for your support 🎉</p>
+                        <p className="text-sm text-gray-400">Pay-as-you-go subscription will 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" />
+                        <Button
+                            label="Subscribe"
+                            className="w-auto mt-8 text-[#f8f8ff]"
+                            onClick={openSubscribeModal}
+                        />
+                    </div>
+                )}
+                {subscriptionExpiredAt && (
+                    <div className="flex flex-col">
+                        <Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
+                        <Button
+                            label="Subscribe"
+                            className="w-auto mt-8 text-[#f8f8ff]"
+                            onClick={openSubscribeModal}
+                        />
+                    </div>
+                )}
+            </Card>
+            <SubscribeModal
+                visible={subscribeModalVisible}
+                onHide={() => setSubscribeModalVisible(false)}
+            />
+        </>
+    );
+};
+
+export default UserSubscription;

src/pages/profile.js

@@ -4,6 +4,7 @@ import { DataTable } from "primereact/datatable";
 import { Menu } from "primereact/menu";
 import { Column } from "primereact/column";
 import { Message } from "primereact/message";
+import { Card } from "primereact/card";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { useSession } from 'next-auth/react';
 import { ProgressSpinner } from "primereact/progressspinner";
@@ -13,34 +14,18 @@ import { formatDateTime } from "@/utils/time";
 import UserContent from "@/components/profile/UserContent";
 import Image from "next/image";
 import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
-import SubscribeModal from "@/components/profile/SubscribeModal";
+import UserSubscription from "@/components/profile/subscription/UserSubscription";
 
 const Profile = () => {
     const [user, setUser] = useState(null);
-    const [subscribeModalVisible, setSubscribeModalVisible] = useState(false); // Add this state
-    const [subscribed, setSubscribed] = useState(false);
-    const [subscribedUntil, setSubscribedUntil] = useState(null);
-    const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null);
-
     const { data: session } = useSession();
     const { returnImageProxy } = useImageProxy();
     const { ndk } = useNDKContext();
     const menu = useRef(null);
 
     useEffect(() => {
-        if (session && session.user) {
+        if (session?.user) {
             setUser(session.user);
-            if (session.user.role) {
-                setSubscribed(session.user.role.subscribed);
-                const subscribedAt = new Date(session.user.role.lastPaymentAt);
-                // The user is subscribed until the date in subscribedAt + 31 days
-                const subscribedUntil = new Date(subscribedAt.getTime() + 31 * 24 * 60 * 60 * 1000);
-                setSubscribedUntil(subscribedUntil);
-                if (session.user.role.subscriptionExpiredAt) {
-                    const expiredAt = new Date(session.user.role.subscriptionExpiredAt)
-                    setSubscriptionExpiredAt(expiredAt);
-                }
-            }
         }
     }, [session]);
 
@@ -71,6 +56,17 @@ const Profile = () => {
         setSubscribeModalVisible(true);
     };
 
+    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>
+            <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>
+    );
+
     return (
         user && (
             <div className="w-[90vw] mx-auto max-tab:w-[100vw] max-mob:w-[100vw]">
@@ -100,35 +96,9 @@ const Profile = () => {
                         <h2 className="text-xl my-2">Connect Your Lightning Wallet</h2>
                         <BitcoinConnectButton />
                     </div>
-                    <div className="flex flex-col w-1/2 mx-auto my-4 justify-between items-center border-2 border-gray-700 bg-[#121212] p-8 rounded-md">
+                    {user && (
-                        {subscribed && (
+                        <UserSubscription user={user} />
-                            <>
-                                <Message severity="success" text="Subscribed!" />
-                                <p className="mt-8">Thank you for your support 🎉</p>
-                                <p className="text-sm text-gray-400">Pay-as-you-go subscription will renew on {subscribedUntil.toLocaleDateString()}</p>
-                            </>
                     )}
-                        {(!subscribed && !subscriptionExpiredAt) && (
-                            <>
-                                <Message severity="info" text="You currently have no active subscription" />
-                                <Button
-                                    label="Subscribe"
-                                    className="w-auto mt-8 text-[#f8f8ff]"
-                                    onClick={openSubscribeModal} // Add this onClick handler
-                                />
-                            </>
-                        )}
-                        {subscriptionExpiredAt && (
-                            <>
-                                <Message severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
-                                <Button
-                                    label="Subscribe"
-                                    className="w-auto mt-8 text-[#f8f8ff]"
-                                    onClick={openSubscribeModal} // Add this onClick handler
-                                />
-                            </>
-                        )}
-                    </div>
                 </div>
                 {!session || !session?.user || !ndk ? (
                     <ProgressSpinner />
@@ -153,11 +123,6 @@ const Profile = () => {
 
                 )}
                 <UserContent />
-                <SubscribeModal
-                    visible={subscribeModalVisible}
-                    onHide={() => setSubscribeModalVisible(false)}
-                />
-
             </div>
         )
     );

src/styles/globals.css

@@ -25,6 +25,14 @@ h3 {
   @apply text-h3 font-blinker;
 }
 
+p {
+  @apply font-blinker;
+}
+
+div {
+  @apply font-blinker;
+}
+
 .p-tabmenu .p-tabmenu-nav {
   background-color: transparent !important;
   border: none !important;