From 8cbb23ce3a224b7ef0929977b2f2461348638e60 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Thu, 26 Sep 2024 18:06:27 -0500 Subject: [PATCH] Progress on subscribe page --- .../profile/subscription/UserSubscription.js | 208 +++++++++++------- 1 file changed, 129 insertions(+), 79 deletions(-) diff --git a/src/components/profile/subscription/UserSubscription.js b/src/components/profile/subscription/UserSubscription.js index 0a6fc25..47eec83 100644 --- a/src/components/profile/subscription/UserSubscription.js +++ b/src/components/profile/subscription/UserSubscription.js @@ -9,17 +9,38 @@ import { Menu } from "primereact/menu"; import { Message } from "primereact/message"; import { ProgressSpinner } from 'primereact/progressspinner'; import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton'; +import Image from 'next/image'; +import NostrIcon from '../../../../public/images/nostr.png'; +import { Badge } from 'primereact/badge'; +import GenericButton from '@/components/buttons/GenericButton'; +import CancelSubscription from '@/components/profile/subscription/CancelSubscription'; +import CalendlyEmbed from '@/components/profile/subscription/CalendlyEmbed'; +import Nip05Form from '@/components/profile/subscription/Nip05Form'; +import LightningAddressForm from '@/components/profile/subscription/LightningAddressForm'; +import RenewSubscription from '@/components/profile/subscription/RenewSubscription'; -const UserSubscription = ({ user }) => { +const UserSubscription = () => { const { data: session, update } = useSession(); const { showToast } = useToast(); const router = useRouter(); const windowWidth = useWindowWidth(); + const menu = useRef(null); + const [user, setUser] = useState(null); const [isProcessing, setIsProcessing] = useState(false); const [subscribed, setSubscribed] = useState(false); const [subscribedUntil, setSubscribedUntil] = useState(null); const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null); - const menu = useRef(null); + const [calendlyVisible, setCalendlyVisible] = useState(false); + const [lightningAddressVisible, setLightningAddressVisible] = useState(false); + const [nip05Visible, setNip05Visible] = useState(false); + const [cancelSubscriptionVisible, setCancelSubscriptionVisible] = useState(false); + const [renewSubscriptionVisible, setRenewSubscriptionVisible] = useState(false); + + useEffect(() => { + if (session && session?.user) { + setUser(session.user); + } + }, [session]) useEffect(() => { if (user && user.role) { @@ -34,22 +55,22 @@ const UserSubscription = ({ user }) => { } }, [user]); - const handleSubscriptionSuccess = async (paymentResponse) => { + const handleSubscriptionSuccess = async (response) => { setIsProcessing(true); try { - const response = await axios.post('/api/subscription/create', { - paymentResponse, + const apiResponse = await axios.put('/api/users/subscription', { + userId: session.user.id, + isSubscribed: true, }); - if (response.data.success) { - showToast('success', 'Subscription successful!'); + if (apiResponse.data) { await update(); - router.push('/dashboard'); + showToast('success', 'Subscription Successful', 'Your subscription has been activated.'); } else { - showToast('error', 'Subscription failed. Please try again.'); + throw new Error('Failed to update subscription status'); } } catch (error) { - console.error('Subscription error:', error); - showToast('error', 'An error occurred. Please try again.'); + console.error('Subscription update error:', error); + showToast('error', 'Subscription Update Failed', `Error: ${error.message}`); } finally { setIsProcessing(false); } @@ -57,72 +78,83 @@ const UserSubscription = ({ user }) => { const handleSubscriptionError = (error) => { console.error('Subscription error:', error); - showToast('error', 'An error occurred during subscription. Please try again.'); + showToast('error', 'Subscription Failed', `An error occurred: ${error.message}`); + setIsProcessing(false); }; - const handleRecurringSubscriptionSuccess = async (paymentResponse) => { + const handleRecurringSubscriptionSuccess = async () => { setIsProcessing(true); try { - const response = await axios.post('/api/subscription/recurring', { - paymentResponse, - }); - if (response.data.success) { - showToast('success', 'Recurring subscription set up successfully!'); - await update(); - router.push('/dashboard'); - } else { - showToast('error', 'Failed to set up recurring subscription. Please try again.'); - } + await update(); + showToast('success', 'Recurring Subscription Activated', 'Your recurring subscription has been set up successfully.'); } catch (error) { - console.error('Recurring subscription error:', error); - showToast('error', 'An error occurred. Please try again.'); + console.error('Session update error:', error); + showToast('error', 'Session Update Failed', `Error: ${error.message}`); } finally { setIsProcessing(false); } }; const menuItems = [ - { - label: "Renew Subscription", - icon: "pi pi-bolt", - command: () => { - // Add your renew functionality here - }, - }, { label: "Schedule 1:1", icon: "pi pi-calendar", command: () => { - // Add your schedule functionality here + setCalendlyVisible(true); + }, + }, + { + label: session?.user?.lightningAddress ? "Update PlebDevs Lightning Address" : "Claim PlebDevs Lightning Address", + icon: "pi pi-bolt", + command: () => { + setLightningAddressVisible(true); + }, + }, + { + label: session?.user?.nip05 ? "Update PlebDevs Nostr NIP-05" : "Claim PlebDevs Nostr NIP-05", + icon: "pi pi-at", + command: () => { + setNip05Visible(true); + }, + }, + { + label: "Renew Subscription", + icon: "pi pi-sync", + command: () => { + setRenewSubscriptionVisible(true); }, }, { label: "Cancel Subscription", icon: "pi pi-trash", command: () => { - // Add your cancel functionality here + setCancelSubscriptionVisible(true); }, }, ]; + useEffect(() => { + console.log(subscribed) + }, [subscribed]) + const subscriptionCardTitle = (
Plebdevs Subscription - menu.current.toggle(e)} - > - + {subscribed && ( + menu.current.toggle(e)} + > + )} +
); return (
- { - windowWidth < 768 && ( -

Subscription Management

- ) - } + {windowWidth < 768 && ( +

Subscription Management

+ )} {subscribed && (
@@ -151,46 +183,42 @@ const UserSubscription = ({ user }) => {
) : (
-

Choose your subscription plan:

-
- -

Monthly Subscription

-

Get access to all PlebDevs features / content one month at a time.

- - - -

Recurring Monthly Subscription

-

Setup auto recurring monthly payments for uninterrupted access.

- - +
+

Unlock Premium Benefits

+

Subscribe now and elevate your development journey!

+
+
+ + Access ALL current and future PlebDevs content +
+
+ + Personal mentorship & guidance and access to exclusive 1:1 booking calendar +
+
+ + Claim your own personal plebdevs.com Lightning Address +
+
+ Nostr + Claim your own personal plebdevs.com Nostr NIP-05 identity +
+
+
+ + I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV! +
+
)} - -
    -
  • Access to exclusive content
    • -
  • Priority support
    • -
  • Early access to new features
    • -
  • Community forums
    • -
- -
@@ -204,6 +232,28 @@ const UserSubscription = ({ user }) => { {/* Add more FAQ items as needed */}
+ + setCalendlyVisible(false)} + /> + setCancelSubscriptionVisible(false)} + /> + setRenewSubscriptionVisible(false)} + subscribedUntil={subscribedUntil} + /> + setNip05Visible(false)} + /> + setLightningAddressVisible(false)} + />
); };