mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Improved payment buttons
This commit is contained in:
austinkelsay
parent
374bef5a51
commit
054adf6869
@ -1,148 +1,106 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Dialog } from 'primereact/dialog'; // Import Dialog component
|
||||
import { initializeBitcoinConnect } from './BitcoinConnect';
|
||||
import { LightningAddress } from '@getalby/lightning-tools';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import axios from 'axios'; // Import axios for API calls
|
||||
|
||||
const PayButton = dynamic(
|
||||
() => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
const Payment = dynamic(
|
||||
() => import('@getalby/bitcoin-connect-react').then((mod) => mod.Payment),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }) => {
|
||||
const [invoice, setInvoice] = useState(null);
|
||||
const [userId, setUserId] = useState(null);
|
||||
const { showToast } = useToast();
|
||||
const [pollingInterval, setPollingInterval] = useState(null);
|
||||
const { data: session } = useSession();
|
||||
const [invoice, setInvoice] = useState(null);
|
||||
const [userId, setUserId] = useState(null);
|
||||
const { showToast } = useToast();
|
||||
const { data: session } = useSession();
|
||||
const [dialogVisible, setDialogVisible] = useState(false); // New state for dialog visibility
|
||||
|
||||
useEffect(() => {
|
||||
if (session?.user) {
|
||||
setUserId(session.user.id);
|
||||
}
|
||||
}, [session]);
|
||||
useEffect(() => {
|
||||
if (session?.user) {
|
||||
setUserId(session.user.id);
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
useEffect(() => {
|
||||
initializeBitcoinConnect();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
initializeBitcoinConnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchInvoice = async () => {
|
||||
try {
|
||||
const ln = new LightningAddress(lnAddress);
|
||||
await ln.fetch();
|
||||
const invoice = await ln.requestInvoice({ satoshi: amount });
|
||||
setInvoice(invoice);
|
||||
} catch (error) {
|
||||
console.error('Error fetching invoice:', error);
|
||||
showToast('error', 'Invoice Error', 'Failed to fetch the invoice.');
|
||||
if (onError) onError(error);
|
||||
}
|
||||
useEffect(() => {
|
||||
const fetchInvoice = async () => {
|
||||
try {
|
||||
const ln = new LightningAddress(lnAddress);
|
||||
await ln.fetch();
|
||||
const invoice = await ln.requestInvoice({ satoshi: amount });
|
||||
setInvoice(invoice);
|
||||
} catch (error) {
|
||||
console.error('Error fetching invoice:', error);
|
||||
showToast('error', 'Invoice Error', 'Failed to fetch the invoice.');
|
||||
if (onError) onError(error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchInvoice();
|
||||
}, [lnAddress, amount, onError, showToast]);
|
||||
|
||||
const handlePaymentSuccess = async (response) => {
|
||||
try {
|
||||
const purchaseData = {
|
||||
userId: userId,
|
||||
courseId: courseId,
|
||||
amountPaid: parseInt(amount, 10)
|
||||
};
|
||||
|
||||
const result = await axios.post('/api/purchase/course', purchaseData);
|
||||
|
||||
if (result.status === 200) {
|
||||
showToast('success', 'Payment Successful', `Paid ${amount} sats and updated user purchases`);
|
||||
if (onSuccess) onSuccess(response);
|
||||
} else {
|
||||
throw new Error('Failed to update user purchases');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating user purchases:', error);
|
||||
showToast('error', 'Purchase Update Failed', 'Payment was successful, but failed to update user purchases.');
|
||||
if (onError) onError(error);
|
||||
}
|
||||
setDialogVisible(false); // Close the dialog on successful payment
|
||||
};
|
||||
|
||||
fetchInvoice();
|
||||
}, [lnAddress, amount, onError, showToast]);
|
||||
|
||||
const startPolling = (invoice) => {
|
||||
const intervalId = setInterval(async () => {
|
||||
try {
|
||||
const paid = await invoice.verifyPayment();
|
||||
console.log('Polling for payment - Paid:', paid);
|
||||
if (paid) {
|
||||
clearInterval(intervalId); // Stop polling
|
||||
handlePaymentSuccess(invoice);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Polling error:', error);
|
||||
clearInterval(intervalId); // Stop polling on error
|
||||
handlePaymentError(error);
|
||||
}
|
||||
}, 5000); // Poll every 5 seconds
|
||||
|
||||
setPollingInterval(intervalId);
|
||||
};
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
setPollingInterval(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaymentSuccess = async (response) => {
|
||||
stopPolling();
|
||||
await closeModal();
|
||||
|
||||
try {
|
||||
const purchaseData = {
|
||||
userId: userId,
|
||||
courseId: courseId,
|
||||
amountPaid: parseInt(amount, 10)
|
||||
};
|
||||
|
||||
const result = await axios.post('/api/purchase/course', purchaseData);
|
||||
|
||||
if (result.status === 200) {
|
||||
showToast('success', 'Payment Successful', `Paid ${amount} sats and updated user purchases`);
|
||||
if (onSuccess) onSuccess(response);
|
||||
} else {
|
||||
throw new Error('Failed to update user purchases');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating user purchases:', error);
|
||||
showToast('error', 'Purchase Update Failed', 'Payment was successful, but failed to update user purchases.');
|
||||
if (onError) onError(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaymentError = (error) => {
|
||||
console.error('Payment failed:', error);
|
||||
showToast('error', 'Payment Failed', error.message || 'An error occurred during payment.');
|
||||
if (onError) onError(error);
|
||||
stopPolling(); // Stop polling on error
|
||||
};
|
||||
|
||||
const handleModalOpen = () => {
|
||||
console.log('Modal opened');
|
||||
if (invoice) {
|
||||
startPolling(invoice); // Start polling when modal is opened
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalClose = () => {
|
||||
console.log('Modal closed');
|
||||
stopPolling(); // Stop polling when modal is closed
|
||||
};
|
||||
|
||||
const closeModal = async () => {
|
||||
const { closeModal } = await import('@getalby/bitcoin-connect-react');
|
||||
closeModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{invoice ? (
|
||||
<PayButton
|
||||
invoice={invoice.paymentRequest}
|
||||
onClick={handleModalOpen}
|
||||
onPaid={handlePaymentSuccess}
|
||||
onModalClose={handleModalClose}
|
||||
title={`Pay ${amount} sats`}
|
||||
>
|
||||
Pay Now
|
||||
</PayButton>
|
||||
) : (
|
||||
<button disabled className="p-2 bg-gray-500 text-white rounded">
|
||||
Loading...
|
||||
</button>
|
||||
)}
|
||||
<span className="ml-2 text-white text-lg">{amount} sats</span>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
label={`Pay ${amount} sats`}
|
||||
onClick={() => setDialogVisible(true)}
|
||||
disabled={!invoice}
|
||||
severity='info'
|
||||
className='text-[#f8f8ff] text-sm'
|
||||
/>
|
||||
<Dialog
|
||||
visible={dialogVisible}
|
||||
onHide={() => setDialogVisible(false)}
|
||||
header="Make Payment"
|
||||
style={{ width: '50vw' }}
|
||||
>
|
||||
{invoice ? (
|
||||
<Payment
|
||||
invoice={invoice.paymentRequest}
|
||||
onPaid={handlePaymentSuccess}
|
||||
paymentMethods='all'
|
||||
title={`Pay ${amount} sats`}
|
||||
/>
|
||||
) : (
|
||||
<p>Loading payment details...</p>
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoursePaymentButton;
|
||||
export default CoursePaymentButton;
|
||||
@ -1,24 +1,24 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { initializeBitcoinConnect } from './BitcoinConnect';
|
||||
import { LightningAddress } from '@getalby/lightning-tools';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import axios from 'axios'; // Import axios for API calls
|
||||
import axios from 'axios';
|
||||
|
||||
const PayButton = dynamic(
|
||||
() => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
const Payment = dynamic(
|
||||
() => import('@getalby/bitcoin-connect-react').then((mod) => mod.Payment),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resourceId }) => {
|
||||
const [invoice, setInvoice] = useState(null);
|
||||
const [userId, setUserId] = useState(null);
|
||||
const { showToast } = useToast();
|
||||
const [pollingInterval, setPollingInterval] = useState(null);
|
||||
const { data: session } = useSession();
|
||||
const [dialogVisible, setDialogVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (session?.user) {
|
||||
@ -47,45 +47,14 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
|
||||
fetchInvoice();
|
||||
}, [lnAddress, amount, onError, showToast]);
|
||||
|
||||
const startPolling = (invoice) => {
|
||||
const intervalId = setInterval(async () => {
|
||||
try {
|
||||
const paid = await invoice.verifyPayment();
|
||||
console.log('Polling for payment - Paid:', paid);
|
||||
if (paid) {
|
||||
clearInterval(intervalId); // Stop polling
|
||||
handlePaymentSuccess(invoice);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Polling error:', error);
|
||||
clearInterval(intervalId); // Stop polling on error
|
||||
handlePaymentError(error);
|
||||
}
|
||||
}, 5000); // Poll every 5 seconds
|
||||
|
||||
setPollingInterval(intervalId);
|
||||
};
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
setPollingInterval(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaymentSuccess = async (response) => {
|
||||
stopPolling();
|
||||
await closeModal();
|
||||
|
||||
try {
|
||||
// Create a new purchase record
|
||||
const purchaseData = {
|
||||
userId: userId,
|
||||
resourceId: resourceId,
|
||||
amountPaid: parseInt(amount, 10) // Convert amount to integer
|
||||
amountPaid: parseInt(amount, 10)
|
||||
};
|
||||
|
||||
// Make an API call to add the purchase to the user
|
||||
const result = await axios.post('/api/purchase/resource', purchaseData);
|
||||
|
||||
if (result.status === 200) {
|
||||
@ -99,52 +68,37 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
|
||||
showToast('error', 'Purchase Update Failed', 'Payment was successful, but failed to update user purchases.');
|
||||
if (onError) onError(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaymentError = (error) => {
|
||||
console.error('Payment failed:', error);
|
||||
showToast('error', 'Payment Failed', error.message || 'An error occurred during payment.');
|
||||
if (onError) onError(error);
|
||||
stopPolling(); // Stop polling on error
|
||||
};
|
||||
|
||||
const handleModalOpen = () => {
|
||||
console.log('Modal opened');
|
||||
if (invoice) {
|
||||
startPolling(invoice); // Start polling when modal is opened
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalClose = () => {
|
||||
console.log('Modal closed');
|
||||
stopPolling(); // Stop polling when modal is closed
|
||||
};
|
||||
|
||||
const closeModal = async () => {
|
||||
const { closeModal } = await import('@getalby/bitcoin-connect-react');
|
||||
closeModal();
|
||||
setDialogVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{invoice ? (
|
||||
<PayButton
|
||||
invoice={invoice.paymentRequest}
|
||||
onClick={handleModalOpen}
|
||||
onPaid={handlePaymentSuccess}
|
||||
onModalClose={handleModalClose}
|
||||
title={`Pay ${amount} sats`}
|
||||
>
|
||||
Pay Now
|
||||
</PayButton>
|
||||
) : (
|
||||
<button disabled className="p-2 bg-gray-500 text-white rounded">
|
||||
Loading...
|
||||
</button>
|
||||
)}
|
||||
<span className="ml-2 text-white text-lg">{amount} sats</span>
|
||||
</div>
|
||||
<>
|
||||
<Button
|
||||
label={`Pay ${amount} sats`}
|
||||
icon="pi pi-wallet"
|
||||
onClick={() => setDialogVisible(true)}
|
||||
disabled={!invoice}
|
||||
className="p-2 bg-blue-500 text-white rounded"
|
||||
/>
|
||||
<Dialog
|
||||
visible={dialogVisible}
|
||||
onHide={() => setDialogVisible(false)}
|
||||
header="Make Payment"
|
||||
style={{ width: '50vw' }}
|
||||
>
|
||||
{invoice ? (
|
||||
<Payment
|
||||
invoice={invoice.paymentRequest}
|
||||
onPaid={handlePaymentSuccess}
|
||||
paymentMethods='all'
|
||||
title={`Pay ${amount} sats`}
|
||||
/>
|
||||
) : (
|
||||
<p>Loading payment details...</p>
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResourcePaymentButton;
|
||||
export default ResourcePaymentButton;
|
||||
Loading…
x
Reference in New Issue
Block a user