diff --git a/src/components/bitcoinConnect/SubscriptionPaymentButton.js b/src/components/bitcoinConnect/SubscriptionPaymentButton.js index d0ad66f..46b2906 100644 --- a/src/components/bitcoinConnect/SubscriptionPaymentButton.js +++ b/src/components/bitcoinConnect/SubscriptionPaymentButton.js @@ -18,7 +18,7 @@ const PaymentModal = dynamic( { ssr: false } ); -const SubscriptionPaymentButtons = ({ onSuccess, onError, onRecurringSubscriptionSuccess, setIsProcessing, oneTime = false, recurring = false, layout = "row" }) => { +const SubscriptionPaymentButtons = ({ onSuccess, onError, onRecurringSubscriptionSuccess, setIsProcessing, oneTime = false, recurring = false, layout = "row", selectedPlan = 'monthly' }) => { const [invoice, setInvoice] = useState(null); const [showRecurringOptions, setShowRecurringOptions] = useState(false); const [nwcInput, setNwcInput] = useState(''); @@ -27,7 +27,7 @@ const SubscriptionPaymentButtons = ({ onSuccess, onError, onRecurringSubscriptio const router = useRouter(); const lnAddress = process.env.NEXT_PUBLIC_LIGHTNING_ADDRESS; - const amount = 50000; + const amount = selectedPlan === 'yearly' ? 500000 : 50000; useEffect(() => { initializeBitcoinConnect(); @@ -92,9 +92,9 @@ const SubscriptionPaymentButtons = ({ onSuccess, onError, onRecurringSubscriptio const initNwcOptions = { name: "plebdevs.com", requestMethods: ['pay_invoice'], - maxAmount: 50000, + maxAmount: selectedPlan === 'yearly' ? 500000 : 50000, editable: false, - budgetRenewal: 'monthly', + budgetRenewal: selectedPlan === 'yearly' ? 'yearly' : 'monthly', expiresAt: yearFromNow, }; await newNwc.initNWC(initNwcOptions); @@ -257,7 +257,10 @@ const SubscriptionPaymentButtons = ({ onSuccess, onError, onRecurringSubscriptio or

Manually enter NWC URL

- *make sure you set a budget of at least 50000 sats and set budget renewal to monthly + + *make sure you set a budget of at least {selectedPlan === 'yearly' ? '500,000' : '50,000'} sats + and set budget renewal to {selectedPlan === 'yearly' ? 'yearly' : 'monthly'} + { +const RenewSubscription = ({ visible, onHide, subscribedUntil, selectedPlan }) => { const [isProcessing, setIsProcessing] = useState(false); const { data: session, update } = useSession(); const { showToast } = useToast(); @@ -70,6 +70,7 @@ const RenewSubscription = ({ visible, onHide, subscribedUntil }) => { onError={handleSubscriptionError} setIsProcessing={setIsProcessing} layout="col" + selectedPlan={selectedPlan} /> )} diff --git a/src/components/profile/subscription/SubscribeModal.js b/src/components/profile/subscription/SubscribeModal.js index 7393f5c..d2dafa9 100644 --- a/src/components/profile/subscription/SubscribeModal.js +++ b/src/components/profile/subscription/SubscribeModal.js @@ -235,9 +235,9 @@ const SubscribeModal = ({ user }) => { I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV! -
+
setSelectedPlan('monthly')} > @@ -252,7 +252,7 @@ const SubscribeModal = ({ user }) => {
setSelectedPlan('yearly')} > @@ -272,6 +272,7 @@ const SubscribeModal = ({ user }) => { onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess} onError={handleSubscriptionError} setIsProcessing={setIsProcessing} + selectedPlan={selectedPlan} /> )} @@ -291,6 +292,7 @@ const SubscribeModal = ({ user }) => { visible={renewSubscriptionVisible} onHide={() => setRenewSubscriptionVisible(false)} subscribedUntil={subscribedUntil} + selectedPlan={selectedPlan} /> { 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); @@ -34,6 +32,7 @@ const UserSubscription = () => { const [nip05Visible, setNip05Visible] = useState(false); const [cancelSubscriptionVisible, setCancelSubscriptionVisible] = useState(false); const [renewSubscriptionVisible, setRenewSubscriptionVisible] = useState(false); + const [selectedPlan, setSelectedPlan] = useState('monthly'); useEffect(() => { if (session && session?.user) { @@ -109,9 +108,10 @@ const UserSubscription = () => {
{/* Right Column - 78% */} -
+
+
{!subscribed && ( - + {isProcessing ? (
@@ -145,17 +145,53 @@ const UserSubscription = () => { I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!
+ + {/* Add new subscription option containers */} +
+
setSelectedPlan('monthly')} + > +
+
+ {selectedPlan === 'monthly' &&
} +
+ Monthly +
+
50,000 sats
+
+ +
setSelectedPlan('yearly')} + > +
+
+ {selectedPlan === 'yearly' &&
} +
+ Yearly +
+
500,000 sats
+
+
+
)} )} +
{subscribed && ( <> @@ -184,7 +220,7 @@ const UserSubscription = () => { )} - +

How does the subscription work?

@@ -227,6 +263,7 @@ const UserSubscription = () => { visible={renewSubscriptionVisible} onHide={() => setRenewSubscriptionVisible(false)} subscribedUntil={subscribedUntil} + selectedPlan={selectedPlan} /> { const { data: session, update } = useSession(); const { showToast } = useToast(); const router = useRouter(); - const menu = useRef(null); const windowWidth = useWindowWidth(); const [user, setUser] = useState(null); const [isProcessing, setIsProcessing] = useState(false); const [subscribed, setSubscribed] = useState(false); + const [selectedPlan, setSelectedPlan] = useState('monthly'); const [subscribedUntil, setSubscribedUntil] = useState(null); const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null); const [calendlyVisible, setCalendlyVisible] = useState(false); @@ -59,6 +59,7 @@ const Subscribe = () => { const apiResponse = await axios.put('/api/users/subscription', { userId: session.user.id, isSubscribed: true, + selectedPlan: selectedPlan, }); if (apiResponse.data) { await update(); @@ -93,34 +94,6 @@ const Subscribe = () => { } }; - const menuItems = [ - { - label: "Schedule 1:1", - icon: "pi pi-calendar", - command: () => 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: () => setCancelSubscriptionVisible(true), - }, - ]; - return (
{windowWidth < 768 && ( @@ -181,11 +154,45 @@ const Subscribe = () => { I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!
+ +
+
setSelectedPlan('monthly')} + > +
+
+ {selectedPlan === 'monthly' &&
} +
+ Monthly +
+
50,000 sats
+
+ +
setSelectedPlan('yearly')} + > +
+
+ {selectedPlan === 'yearly' &&
} +
+ Yearly +
+
500,000 sats
+
+
+
@@ -262,6 +269,7 @@ const Subscribe = () => { visible={renewSubscriptionVisible} onHide={() => setRenewSubscriptionVisible(false)} subscribedUntil={subscribedUntil} + selectedPlan={selectedPlan} />