mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-05-17 11:45:50 +00:00
Subscribe page has new profile layout, added hook for github repos
This commit is contained in:
austinkelsay
parent
e4a8b01eec
commit
273ff18a17
@ -15,7 +15,7 @@ const allTasks = [
|
|||||||
tier: 'Pleb',
|
tier: 'Pleb',
|
||||||
courseId: null,
|
courseId: null,
|
||||||
subTasks: [
|
subTasks: [
|
||||||
{ status: 'Create Your First GitHub Repo', completed: false },
|
{ status: 'Connect your GitHub account', completed: false },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -35,7 +35,7 @@ const allTasks = [
|
|||||||
courseId: 'f73c37f4-df2e-4f7d-a838-dce568c76136',
|
courseId: 'f73c37f4-df2e-4f7d-a838-dce568c76136',
|
||||||
subTasks: [
|
subTasks: [
|
||||||
{ status: 'Complete the course', completed: false },
|
{ status: 'Complete the course', completed: false },
|
||||||
{ status: 'Select your completed project', completed: false },
|
// { status: 'Select your completed project', completed: false },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -45,7 +45,7 @@ const allTasks = [
|
|||||||
courseId: 'f6825391-831c-44da-904a-9ac3d149b7be',
|
courseId: 'f6825391-831c-44da-904a-9ac3d149b7be',
|
||||||
subTasks: [
|
subTasks: [
|
||||||
{ status: 'Complete the course', completed: false },
|
{ status: 'Complete the course', completed: false },
|
||||||
{ status: 'Select your completed project', completed: false },
|
// { status: 'Select your completed project', completed: false },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@ -5,13 +5,11 @@ import { useToast } from '@/hooks/useToast';
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { Card } from 'primereact/card';
|
import { Card } from 'primereact/card';
|
||||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||||
import { Menu } from "primereact/menu";
|
|
||||||
import { Message } from "primereact/message";
|
import { Message } from "primereact/message";
|
||||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||||
import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
|
import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import NostrIcon from '../../../../public/images/nostr.png';
|
import NostrIcon from '../../../../public/images/nostr.png';
|
||||||
import { Badge } from 'primereact/badge';
|
|
||||||
import GenericButton from '@/components/buttons/GenericButton';
|
import GenericButton from '@/components/buttons/GenericButton';
|
||||||
import CancelSubscription from '@/components/profile/subscription/CancelSubscription';
|
import CancelSubscription from '@/components/profile/subscription/CancelSubscription';
|
||||||
import CalendlyEmbed from '@/components/profile/subscription/CalendlyEmbed';
|
import CalendlyEmbed from '@/components/profile/subscription/CalendlyEmbed';
|
||||||
@ -100,130 +98,141 @@ const UserSubscription = () => {
|
|||||||
{windowWidth < 768 && (
|
{windowWidth < 768 && (
|
||||||
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
|
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
|
||||||
)}
|
)}
|
||||||
<div className="mb-4 p-4 bg-gray-800 rounded-lg w-fit">
|
<div className="w-full flex flex-row max-lap:flex-col">
|
||||||
{subscribed && !user?.role?.nwc && (
|
{/* Left Column - 22% */}
|
||||||
<div className="flex flex-col">
|
<div className="w-[21%] h-full max-lap:w-full">
|
||||||
<Message className="w-fit" severity="success" text="Subscribed!" />
|
<div className="p-4 bg-gray-800 rounded-lg">
|
||||||
<p className="mt-4">Thank you for your support 🎉</p>
|
{/* Subscription Status Messages */}
|
||||||
<p className="text-sm text-gray-400">Pay-as-you-go subscription requires manual renewal on {subscribedUntil.toLocaleDateString()}</p>
|
{subscribed && !user?.role?.nwc && (
|
||||||
</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>
|
|
||||||
{!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">
|
|
||||||
<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 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>
|
|
||||||
<SubscriptionPaymentButtons
|
|
||||||
onSuccess={handleSubscriptionSuccess}
|
|
||||||
onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}
|
|
||||||
onError={handleSubscriptionError}
|
|
||||||
setIsProcessing={setIsProcessing}
|
|
||||||
layout={windowWidth < 768 ? "col" : "row"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</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">
|
||||||
<div className="flex flex-col gap-4">
|
<Message className="w-fit" severity="success" text="Subscribed!" />
|
||||||
<GenericButton severity="info" outlined className="w-fit text-start" label="Schedule 1:1" icon="pi pi-calendar" onClick={() => setCalendlyVisible(true)} />
|
<p className="mt-4">Thank you for your support 🎉</p>
|
||||||
<GenericButton severity="help" outlined className="w-fit text-start" label={user?.nip05 ? "Update Nostr NIP-05" : "Claim PlebDevs Nostr NIP-05"} icon="pi pi-at" onClick={() => setNip05Visible(true)} />
|
<p className="text-sm text-gray-400">Pay-as-you-go subscription requires manual renewal on {subscribedUntil.toLocaleDateString()}</p>
|
||||||
<GenericButton severity="warning" outlined className="w-fit text-start" label={user?.lightningAddress ? "Update Lightning Address" : "Claim PlebDevs Lightning Address"} icon={<i style={{ color: "orange" }} className="pi pi-bolt mr-2"></i>} onClick={() => setLightningAddressVisible(true)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
{subscribed && user?.role?.nwc && (
|
||||||
<Card title="Manage Subscription" className="mb-4">
|
<div className="flex flex-col">
|
||||||
<div className='flex flex-col gap-4'>
|
<Message className="w-fit" severity="success" text="Subscribed!" />
|
||||||
<GenericButton outlined className="w-fit" label="Renew Subscription" icon="pi pi-sync" onClick={() => setRenewSubscriptionVisible(true)} />
|
<p className="mt-4">Thank you for your support 🎉</p>
|
||||||
<GenericButton severity="danger" outlined className="w-fit" label="Cancel Subscription" icon="pi pi-trash" onClick={() => setCancelSubscriptionVisible(true)} />
|
<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>
|
||||||
|
|
||||||
|
{/* Right Column - 78% */}
|
||||||
|
<div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full">
|
||||||
|
{!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">
|
||||||
|
<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 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>
|
||||||
|
<SubscriptionPaymentButtons
|
||||||
|
onSuccess={handleSubscriptionSuccess}
|
||||||
|
onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}
|
||||||
|
onError={handleSubscriptionError}
|
||||||
|
setIsProcessing={setIsProcessing}
|
||||||
|
layout={windowWidth < 768 ? "col" : "row"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</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={user?.nip05 ? "Update Nostr NIP-05" : "Claim PlebDevs Nostr NIP-05"} icon="pi pi-at" onClick={() => setNip05Visible(true)} />
|
||||||
|
<GenericButton severity="warning" outlined className="w-fit text-start" label={user?.lightningAddress ? "Update Lightning Address" : "Claim PlebDevs 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 severity="danger" outlined className="w-fit" label="Cancel Subscription" icon="pi pi-trash" onClick={() => setCancelSubscriptionVisible(true)} />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Card title="Frequently Asked Questions" className="mb-6">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">How does the subscription work?</h3>
|
||||||
|
<p>Think of the subscriptions as a paetreon type model. You pay a monthly fee and in return you get access to premium features and all of the paid content. You can cancel at any time.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">How do I Subscribe? (Pay as you go)</h3>
|
||||||
|
<p>The pay as you go subscription is a one-time payment that gives you access to all of the premium features for one month. You will need to manually renew your subscription every month.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">How do I Subscribe? (Recurring)</h3>
|
||||||
|
<p>The recurring subscription option allows you to submit a Nostr Wallet Connect URI that will be used to automatically send the subscription fee every month. You can cancel at any time.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">Can I cancel my subscription?</h3>
|
||||||
|
<p>Yes, you can cancel your subscription at any time. Your access will remain active until the end of the current billing period.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">What happens if I don't renew my subscription?</h3>
|
||||||
|
<p>If you don't renew your subscription, your access to 1:1 calendar and paid content will be removed. However, you will still have access to your plebdevs Lightning Address, NIP-05, and any content that you paid for.</p>
|
||||||
|
</div>
|
||||||
|
{/* Add more FAQ items as needed */}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card title="Frequently Asked Questions" className="mb-6">
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold">How does the subscription work?</h3>
|
|
||||||
<p>Think of the subscriptions as a paetreon type model. You pay a monthly fee and in return you get access to premium features and all of the paid content. You can cancel at any time.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold">How do I Subscribe? (Pay as you go)</h3>
|
|
||||||
<p>The pay as you go subscription is a one-time payment that gives you access to all of the premium features for one month. You will need to manually renew your subscription every month.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold">How do I Subscribe? (Recurring)</h3>
|
|
||||||
<p>The recurring subscription option allows you to submit a Nostr Wallet Connect URI that will be used to automatically send the subscription fee every month. You can cancel at any time.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold">Can I cancel my subscription?</h3>
|
|
||||||
<p>Yes, you can cancel your subscription at any time. Your access will remain active until the end of the current billing period.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold">What happens if I don't renew my subscription?</h3>
|
|
||||||
<p>If you don't renew your subscription, your access to 1:1 calendar and paid content will be removed. However, you will still have access to your plebdevs Lightning Address, NIP-05, and any content that you paid for.</p>
|
|
||||||
</div>
|
|
||||||
{/* Add more FAQ items as needed */}
|
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
|
|
||||||
<CalendlyEmbed
|
<CalendlyEmbed
|
||||||
visible={calendlyVisible}
|
visible={calendlyVisible}
|
||||||
|
|||||||
33
src/hooks/githubQueries/useFetchGithubRepos.js
Normal file
33
src/hooks/githubQueries/useFetchGithubRepos.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Octokit } from "@octokit/rest";
|
||||||
|
import { throttling } from "@octokit/plugin-throttling";
|
||||||
|
|
||||||
|
const ThrottledOctokit = Octokit.plugin(throttling);
|
||||||
|
|
||||||
|
export function useFetchGithubRepos(accessToken) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['githubRepos', accessToken],
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!accessToken) return [];
|
||||||
|
|
||||||
|
const octokit = new ThrottledOctokit({
|
||||||
|
auth: accessToken,
|
||||||
|
throttle: {
|
||||||
|
onRateLimit: (retryAfter, options, octokit, retryCount) => {
|
||||||
|
if (retryCount < 2) return true;
|
||||||
|
},
|
||||||
|
onSecondaryRateLimit: (retryAfter, options, octokit) => true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data } = await octokit.repos.listForAuthenticatedUser({
|
||||||
|
sort: 'updated',
|
||||||
|
per_page: 100
|
||||||
|
});
|
||||||
|
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
staleTime: 1000 * 60 * 5, // 5 minutes
|
||||||
|
enabled: !!accessToken
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user