From bcf6c9bf9aa66e7dcfc593128867d0834e22e520 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Fri, 27 Sep 2024 13:33:27 -0500
Subject: [PATCH] Improvements to subscription page

---
 src/components/profile/UserProfile.js         |  16 ++-
 src/components/profile/UserSettings.js        |  16 ++-
 .../profile/progress/UserProgress.js          |  40 +++---
 .../profile/subscription/UserSubscription.js  | 121 ++++++++++--------
 4 files changed, 110 insertions(+), 83 deletions(-)

diff --git a/src/components/profile/UserProfile.js b/src/components/profile/UserProfile.js
index 100aa3a..594eb14 100644
--- a/src/components/profile/UserProfile.js
+++ b/src/components/profile/UserProfile.js
@@ -94,12 +94,16 @@ const UserProfile = () => {
                         <Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
                         {nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
                     </h2>
-                    <h3 className="text-center text-xl my-2">
-                        <span className="font-bold">Lightning Address:</span> {user.lightningAddress.name}@plebdevs.com
-                    </h3>
-                    <h3 className="text-center text-xl my-2">
-                        <span className="font-bold">NIP-05:</span> {user.nip05.name}@plebdevs.com
-                    </h3>
+                    {user?.lightningAddress && (
+                        <h3 className="text-center text-xl my-2">
+                            <span className="font-bold">Lightning Address:</span> {user.lightningAddress.name}@plebdevs.com
+                        </h3>
+                    )}
+                    {user?.nip05 && (
+                        <h3 className="text-center text-xl my-2">
+                            <span className="font-bold">NIP-05:</span> {user.nip05.name}@plebdevs.com
+                        </h3>
+                    )}
                     {/* <GithubContributionChart username={"austinkelsay"} /> */}
                     <GithubContributionChartDisabled username={"austinkelsay"} />
                     <UserProgress />
diff --git a/src/components/profile/UserSettings.js b/src/components/profile/UserSettings.js
index 044c881..3bca702 100644
--- a/src/components/profile/UserSettings.js
+++ b/src/components/profile/UserSettings.js
@@ -181,12 +181,16 @@ const UserSettings = () => {
                         <Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
                         {nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
                     </h2>
-                    <h3 className="text-center text-xl my-2">
-                        <span className="font-bold">Lightning Address:</span> {user.lightningAddress.name}@plebdevs.com
-                    </h3>
-                    <h3 className="text-center text-xl my-2">
-                        <span className="font-bold">NIP-05:</span> {user.nip05.name}@plebdevs.com
-                    </h3>
+                    {user?.lightningAddress && (
+                        <h3 className="text-center text-xl my-2">
+                            <span className="font-bold">Lightning Address:</span> {user.lightningAddress.name}@plebdevs.com
+                        </h3>
+                    )}
+                    {user?.nip05 && (
+                        <h3 className="text-center text-xl my-2">
+                            <span className="font-bold">NIP-05:</span> {user.nip05.name}@plebdevs.com
+                        </h3>
+                    )}
                     <div className="flex flex-col w-1/2 mx-auto justify-between items-center">
                         <h2 className="text-xl my-2 max-mob:text-base max-tab:text-base">Connect Your Lightning Wallet</h2>
                         <BitcoinConnectButton />
diff --git a/src/components/profile/progress/UserProgress.js b/src/components/profile/progress/UserProgress.js
index b28c653..1e2fe13 100644
--- a/src/components/profile/progress/UserProgress.js
+++ b/src/components/profile/progress/UserProgress.js
@@ -3,6 +3,23 @@ import { ProgressBar } from 'primereact/progressbar';
 import { Accordion, AccordionTab } from 'primereact/accordion';
 import { useSession } from 'next-auth/react';
 
+const allTasks = [
+    { status: 'Create Account', completed: true, tier: 'Pleb', courseId: null },
+    {
+        status: 'PlebDevs Starter (Coming Soon)',
+        completed: false,
+        tier: 'New Dev',
+        courseId: null,
+        subTasks: [
+            { status: 'Connect GitHub', completed: false },
+            { status: 'Create First GitHub Repo', completed: false },
+            { status: 'Push Commit', completed: false }
+        ]
+    },
+    { status: 'PlebDevs Course 1', completed: false, tier: 'Junior Dev', courseId: 'd20e2e9b-5123-4a91-b27f-d75ea1d5811e' },
+    { status: 'PlebDevs Course 2', completed: false, tier: 'Plebdev', courseId: 'aa3b1641-ad2b-4ef4-9f0f-38951ae307b7' },
+];
+
 const UserProgress = () => {
     const [progress, setProgress] = useState(0);
     const [currentTier, setCurrentTier] = useState('Pleb');
@@ -15,30 +32,17 @@ const UserProgress = () => {
     useEffect(() => {
         if (session?.user) {
             const user = session.user;
-            const ids = user?.userCourses.map(course => course?.completed ? course.courseId : null).filter(id => id !== null);
+            const ids = user?.userCourses?.map(course => course?.completed ? course.courseId : null).filter(id => id !== null);
+            if (ids && ids.length > 0) {
             setCompletedCourses(ids);
             generateTasks(ids);
+            } else {
+                generateTasks([]);
+            }
         }
     }, [session]);
 
     const generateTasks = (completedCourseIds) => {
-        const allTasks = [
-            { status: 'Create Account', completed: true, tier: 'Pleb', courseId: null },
-            {
-                status: 'PlebDevs Starter (Coming Soon)',
-                completed: false,
-                tier: 'New Dev',
-                courseId: null,
-                subTasks: [
-                    { status: 'Connect GitHub', completed: false },
-                    { status: 'Create First GitHub Repo', completed: false },
-                    { status: 'Push Commit', completed: false }
-                ]
-            },
-            { status: 'PlebDevs Course 1', completed: false, tier: 'Junior Dev', courseId: 'd20e2e9b-5123-4a91-b27f-d75ea1d5811e' },
-            { status: 'PlebDevs Course 2', completed: false, tier: 'Plebdev', courseId: 'aa3b1641-ad2b-4ef4-9f0f-38951ae307b7' },
-        ];
-
         const updatedTasks = allTasks.map(task => ({
             ...task,
             completed: task.courseId === null || completedCourseIds.includes(task.courseId),
diff --git a/src/components/profile/subscription/UserSubscription.js b/src/components/profile/subscription/UserSubscription.js
index 47eec83..bb93643 100644
--- a/src/components/profile/subscription/UserSubscription.js
+++ b/src/components/profile/subscription/UserSubscription.js
@@ -137,25 +137,12 @@ const UserSubscription = () => {
         console.log(subscribed)
     }, [subscribed])
 
-    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>
-            {subscribed && (
-                <i
-                    className="pi pi-ellipsis-h text-2xl cursor-pointer hover:opacity-75"
-                    onClick={(e) => menu.current.toggle(e)}
-                ></i>
-            )}
-            <Menu model={menuItems} popup ref={menu} className="w-fit" />
-        </div>
-    );
-
     return (
         <div className="p-4">
             {windowWidth < 768 && (
                 <h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
             )}
-            <Card title={subscriptionCardTitle} className="mb-6">
+            <div className="mb-4 p-4 bg-gray-800 rounded-lg w-fit">
                 {subscribed && (
                     <div className="flex flex-col">
                         <Message className="w-fit" severity="success" text="Subscribed!" />
@@ -173,51 +160,79 @@ const UserSubscription = () => {
                         <Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
                     </div>
                 )}
-            </Card>
-
-            <Card title="Subscribe to PlebDevs" className="mb-6">
-                {isProcessing ? (
-                    <div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
-                        <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
-                        <span className="ml-2">Processing subscription...</span>
-                    </div>
-                ) : (
-                    <div className="flex flex-col">
-                        <div className="mb-4">
-                            <h2 className="text-2xl font-bold text-primary">Unlock Premium Benefits</h2>
-                            <p className="text-gray-400">Subscribe now and elevate your development journey!</p>
+            </div>
+            {!subscribed && (
+                <Card title="Subscribe to PlebDevs" className="mb-4">
+                    {isProcessing ? (
+                        <div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
+                            <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
+                            <span className="ml-2">Processing subscription...</span>
                         </div>
-                        <div className="flex flex-col gap-4 mb-4">
-                            <div className="flex items-center">
-                                <i className="pi pi-book text-2xl text-primary mr-2 text-blue-400"></i>
-                                <span>Access ALL current and future PlebDevs content</span>
+                    ) : (
+                        <div className="flex flex-col">
+                            <div className="mb-4">
+                                <h2 className="text-2xl font-bold text-primary">Unlock Premium Benefits</h2>
+                                <p className="text-gray-400">Subscribe now and elevate your development journey!</p>
                             </div>
-                            <div className="flex items-center">
-                                <i className="pi pi-calendar text-2xl text-primary mr-2 text-red-400"></i>
-                                <span>Personal mentorship & guidance and access to exclusive 1:1 booking calendar</span>
+                            <div className="flex flex-col gap-4 mb-4">
+                                <div className="flex items-center">
+                                    <i className="pi pi-book text-2xl text-primary mr-2 text-blue-400"></i>
+                                    <span>Access ALL current and future PlebDevs content</span>
+                                </div>
+                                <div className="flex items-center">
+                                    <i className="pi pi-calendar text-2xl text-primary mr-2 text-red-400"></i>
+                                    <span>Personal mentorship & guidance and access to exclusive 1:1 booking calendar</span>
+                                </div>
+                                <div className="flex items-center">
+                                    <i className="pi pi-bolt text-2xl text-primary mr-2 text-yellow-500"></i>
+                                    <span>Claim your own personal plebdevs.com Lightning Address</span>
+                                </div>
+                                <div className="flex items-center">
+                                    <Image src={NostrIcon} alt="Nostr" width={25} height={25} className='mr-2' />
+                                    <span>Claim your own personal plebdevs.com Nostr NIP-05 identity</span>
+                                </div>
+                                <div className="flex items-center">
+                                <i className="pi pi-star text-2xl text-primary mr-2 text-yellow-500"></i>
+                                <span>I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!</span>
                             </div>
-                            <div className="flex items-center">
-                                <i className="pi pi-bolt text-2xl text-primary mr-2 text-yellow-500"></i>
-                                <span>Claim your own personal plebdevs.com Lightning Address</span>
-                            </div>
-                            <div className="flex items-center">
-                                <Image src={NostrIcon} alt="Nostr" width={26} height={26} className='mr-2' />
-                                <span>Claim your own personal plebdevs.com Nostr NIP-05 identity</span>
                             </div>
+                            <SubscriptionPaymentButtons
+                                onSuccess={handleSubscriptionSuccess}
+                                onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}
+                                onError={handleSubscriptionError}
+                                setIsProcessing={setIsProcessing}
+                                layout={windowWidth < 768 ? "col" : "row"}
+                            />
                         </div>
-                        <div className="text-center mb-4 flex flex-row justify-start">
-                            <i className="pi pi-star text-2xl text-primary mr-2 text-yellow-500"></i>
-                            <span className="text-center font-bold">I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!</span>
+                    )}
+                </Card>
+            )}
+            {subscribed && (
+                <>
+                    <Card title="Subscription Benefits" className="mb-4">
+                        {isProcessing ? (
+                            <div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
+                                <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
+                                <span className="ml-2">Processing subscription...</span>
+                            </div>
+                        ) : (
+                            <div className="flex flex-col">
+                                <div className="flex flex-col gap-4">
+                                    <GenericButton severity="info" outlined className="w-fit text-start" label="Schedule 1:1" icon="pi pi-calendar" onClick={() => setCalendlyVisible(true)} />
+                                    <GenericButton severity="help" outlined className="w-fit text-start" label="Update Nostr NIP-05" icon="pi pi-at" onClick={() => setNip05Visible(true)} />
+                                    <GenericButton severity="warning" outlined className="w-fit text-start" label="Update Lightning Address" icon={<i style={{ color: "orange" }} className="pi pi-bolt mr-2"></i>} onClick={() => setLightningAddressVisible(true)} />
+                                </div>
+                            </div>
+                        )}
+                    </Card>
+                    <Card title="Manage Subscription" className="mb-4">
+                        <div className='flex flex-col gap-4'>
+                                <GenericButton outlined className="w-fit" label="Renew Subscription" icon="pi pi-sync" onClick={() => setRenewSubscriptionVisible(true)} />
+                                <GenericButton outlined className="w-fit" label="Cancel Subscription" icon="pi pi-trash" onClick={() => setCancelSubscriptionVisible(true)} />
                         </div>
-                        <SubscriptionPaymentButtons
-                            onSuccess={handleSubscriptionSuccess}
-                            onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}
-                            onError={handleSubscriptionError}
-                            setIsProcessing={setIsProcessing}
-                        />
-                    </div>
-                )}
-            </Card>
+                    </Card>
+                </>
+            )}
 
             <Card title="Frequently Asked Questions" className="mb-6">
                 <div className="flex flex-col gap-4">