saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved payment buttons

Browse Source
This commit is contained in:
austinkelsay 2024-08-17 16:29:37 -05:00
parent 374bef5a51
commit 054adf6869
2 changed files with 124 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/bitcoinConnect/CoursePaymentButton.js
View File

@ -1,13 +1,15 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog'; // Import Dialog component
import { initializeBitcoinConnect } from './BitcoinConnect'; import { initializeBitcoinConnect } from './BitcoinConnect';
import { LightningAddress } from '@getalby/lightning-tools'; import { LightningAddress } from '@getalby/lightning-tools';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
import axios from 'axios'; // Import axios for API calls import axios from 'axios'; // Import axios for API calls
const PayButton = dynamic( const Payment = dynamic(
() => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton), () => import('@getalby/bitcoin-connect-react').then((mod) => mod.Payment),
{ {
ssr: false, ssr: false,
} }
@ -17,8 +19,8 @@ const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }
const [invoice, setInvoice] = useState(null); const [invoice, setInvoice] = useState(null);
const [userId, setUserId] = useState(null); const [userId, setUserId] = useState(null);
const { showToast } = useToast(); const { showToast } = useToast();
const [pollingInterval, setPollingInterval] = useState(null);
const { data: session } = useSession(); const { data: session } = useSession();
const [dialogVisible, setDialogVisible] = useState(false); // New state for dialog visibility
useEffect(() => { useEffect(() => {
if (session?.user) { if (session?.user) {
@ -47,36 +49,7 @@ const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }
fetchInvoice(); fetchInvoice();
}, [lnAddress, amount, onError, showToast]); }, [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) => { const handlePaymentSuccess = async (response) => {
stopPolling();
await closeModal();
try { try {
const purchaseData = { const purchaseData = {
userId: userId, userId: userId,
@ -97,51 +70,36 @@ const CoursePaymentButton = ({ lnAddress, amount, onSuccess, onError, courseId }
showToast('error', 'Purchase Update Failed', 'Payment was successful, but failed to update user purchases.'); showToast('error', 'Purchase Update Failed', 'Payment was successful, but failed to update user purchases.');
if (onError) onError(error); if (onError) onError(error);
} }
}; setDialogVisible(false); // Close the dialog on successful payment
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 ( return (
<div className="flex items-center"> <>
{invoice ? ( <Button
<PayButton label={`Pay ${amount} sats`}
invoice={invoice.paymentRequest} onClick={() => setDialogVisible(true)}
onClick={handleModalOpen} disabled={!invoice}
onPaid={handlePaymentSuccess} severity='info'
onModalClose={handleModalClose} className='text-[#f8f8ff] text-sm'
title={`Pay ${amount} sats`} />
<Dialog
visible={dialogVisible}
onHide={() => setDialogVisible(false)}
header="Make Payment"
style={{ width: '50vw' }}
> >
Pay Now {invoice ? (
</PayButton> <Payment
invoice={invoice.paymentRequest}
onPaid={handlePaymentSuccess}
paymentMethods='all'
title={`Pay ${amount} sats`}
/>
) : ( ) : (
<button disabled className="p-2 bg-gray-500 text-white rounded"> <p>Loading payment details...</p>
Loading...
</button>
)} )}
<span className="ml-2 text-white text-lg">{amount} sats</span> </Dialog>
</div> </>
); );
}; };

110
src/components/bitcoinConnect/ResourcePaymentButton.js
View File

@ -1,24 +1,24 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { initializeBitcoinConnect } from './BitcoinConnect'; import { initializeBitcoinConnect } from './BitcoinConnect';
import { LightningAddress } from '@getalby/lightning-tools'; import { LightningAddress } from '@getalby/lightning-tools';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
import axios from 'axios'; // Import axios for API calls import axios from 'axios';
const PayButton = dynamic( const Payment = dynamic(
() => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton), () => import('@getalby/bitcoin-connect-react').then((mod) => mod.Payment),
{ { ssr: false }
ssr: false,
}
); );
const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resourceId }) => { const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resourceId }) => {
const [invoice, setInvoice] = useState(null); const [invoice, setInvoice] = useState(null);
const [userId, setUserId] = useState(null); const [userId, setUserId] = useState(null);
const { showToast } = useToast(); const { showToast } = useToast();
const [pollingInterval, setPollingInterval] = useState(null);
const { data: session } = useSession(); const { data: session } = useSession();
const [dialogVisible, setDialogVisible] = useState(false);
useEffect(() => { useEffect(() => {
if (session?.user) { if (session?.user) {
@ -47,45 +47,14 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
fetchInvoice(); fetchInvoice();
}, [lnAddress, amount, onError, showToast]); }, [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) => { const handlePaymentSuccess = async (response) => {
stopPolling();
await closeModal();
try { try {
// Create a new purchase record
const purchaseData = { const purchaseData = {
userId: userId, userId: userId,
resourceId: resourceId, 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); const result = await axios.post('/api/purchase/resource', purchaseData);
if (result.status === 200) { if (result.status === 200) {
@ -99,51 +68,36 @@ const ResourcePaymentButton = ({ lnAddress, amount, onSuccess, onError, resource
showToast('error', 'Purchase Update Failed', 'Payment was successful, but failed to update user purchases.'); showToast('error', 'Purchase Update Failed', 'Payment was successful, but failed to update user purchases.');
if (onError) onError(error); if (onError) onError(error);
} }
}; setDialogVisible(false);
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 ( return (
<div className="flex items-center"> <>
{invoice ? ( <Button
<PayButton label={`Pay ${amount} sats`}
invoice={invoice.paymentRequest} icon="pi pi-wallet"
onClick={handleModalOpen} onClick={() => setDialogVisible(true)}
onPaid={handlePaymentSuccess} disabled={!invoice}
onModalClose={handleModalClose} className="p-2 bg-blue-500 text-white rounded"
title={`Pay ${amount} sats`} />
<Dialog
visible={dialogVisible}
onHide={() => setDialogVisible(false)}
header="Make Payment"
style={{ width: '50vw' }}
> >
Pay Now {invoice ? (
</PayButton> <Payment
invoice={invoice.paymentRequest}
onPaid={handlePaymentSuccess}
paymentMethods='all'
title={`Pay ${amount} sats`}
/>
) : ( ) : (
<button disabled className="p-2 bg-gray-500 text-white rounded"> <p>Loading payment details...</p>
Loading...
</button>
)} )}
<span className="ml-2 text-white text-lg">{amount} sats</span> </Dialog>
</div> </>
); );
}; };