mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: use stripe connect for payments
This commit is contained in:
swve
parent
cdd893ca6f
commit
a8ba053447
17 changed files with 835 additions and 364 deletions
|
|
@ -3,18 +3,21 @@ import React, { useState, useEffect } from 'react';
|
|||
import { useOrg } from '@components/Contexts/OrgContext';
|
||||
import { SiStripe } from '@icons-pack/react-simple-icons'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext';
|
||||
import { getPaymentConfigs, createPaymentConfig, updatePaymentConfig, deletePaymentConfig } from '@services/payments/payments';
|
||||
import { getPaymentConfigs, initializePaymentConfig, updatePaymentConfig, deletePaymentConfig, updateStripeAccountID, getStripeOnboardingLink } from '@services/payments/payments';
|
||||
import FormLayout, { ButtonBlack, Input, Textarea, FormField, FormLabelAndMessage, Flex } from '@components/StyledElements/Form/Form';
|
||||
import { Check, Edit, Trash2 } from 'lucide-react';
|
||||
import { AlertTriangle, BarChart2, Check, Coins, CreditCard, Edit, ExternalLink, Info, Loader2, RefreshCcw, Trash2 } from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR, { mutate } from 'swr';
|
||||
import Modal from '@components/StyledElements/Modal/Modal';
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
|
||||
import { Button } from '@components/ui/button';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@components/ui/alert';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
const PaymentsConfigurationPage: React.FC = () => {
|
||||
const org = useOrg() as any;
|
||||
const session = useLHSession() as any;
|
||||
const router = useRouter();
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const { data: paymentConfigs, error, isLoading } = useSWR(
|
||||
() => (org && access_token ? [`/payments/${org.id}/config`, access_token] : null),
|
||||
|
|
@ -23,16 +26,21 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
|
||||
const stripeConfig = paymentConfigs?.find((config: any) => config.provider === 'stripe');
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isOnboarding, setIsOnboarding] = useState(false);
|
||||
const [isOnboardingLoading, setIsOnboardingLoading] = useState(false);
|
||||
|
||||
const enableStripe = async () => {
|
||||
try {
|
||||
setIsOnboarding(true);
|
||||
const newConfig = { provider: 'stripe', enabled: true };
|
||||
const config = await createPaymentConfig(org.id, newConfig, access_token);
|
||||
const config = await initializePaymentConfig(org.id, newConfig, 'stripe', access_token);
|
||||
toast.success('Stripe enabled successfully');
|
||||
mutate([`/payments/${org.id}/config`, access_token]);
|
||||
} catch (error) {
|
||||
console.error('Error enabling Stripe:', error);
|
||||
toast.error('Failed to enable Stripe');
|
||||
} finally {
|
||||
setIsOnboarding(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -51,6 +59,19 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleStripeOnboarding = async () => {
|
||||
try {
|
||||
setIsOnboardingLoading(true);
|
||||
const { connect_url } = await getStripeOnboardingLink(org.id, access_token, window.location.href);
|
||||
router.push(connect_url);
|
||||
} catch (error) {
|
||||
console.error('Error getting onboarding link:', error);
|
||||
toast.error('Failed to start Stripe onboarding');
|
||||
} finally {
|
||||
setIsOnboardingLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
|
@ -66,17 +87,88 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
<h1 className="font-bold text-xl text-gray-800">Payments Configuration</h1>
|
||||
<h2 className="text-gray-500 text-md">Manage your organization payments configuration</h2>
|
||||
</div>
|
||||
<div className="flex flex-col rounded-lg light-shadow">
|
||||
|
||||
<Alert className="mb-3 p-6 border-2 border-blue-100 bg-blue-50/50">
|
||||
|
||||
<AlertTitle className="text-lg font-semibold mb-2 flex items-center space-x-2"> <Info className="h-5 w-5 " /> <span>About the Stripe Integration</span></AlertTitle>
|
||||
<AlertDescription className="space-y-5">
|
||||
<div className="pl-2">
|
||||
<ul className="list-disc list-inside space-y-1 text-gray-600 pl-2">
|
||||
<li className="flex items-center space-x-2">
|
||||
<CreditCard className="h-4 w-4" />
|
||||
<span>Accept payments for courses and subscriptions</span>
|
||||
</li>
|
||||
<li className="flex items-center space-x-2">
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
<span>Manage recurring billing and subscriptions</span>
|
||||
</li>
|
||||
<li className="flex items-center space-x-2">
|
||||
<Coins className="h-4 w-4" />
|
||||
<span>Handle multiple currencies and payment methods</span>
|
||||
</li>
|
||||
<li className="flex items-center space-x-2">
|
||||
<BarChart2 className="h-4 w-4" />
|
||||
<span>Access detailed payment analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
href="https://stripe.com/docs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 inline-flex items-center font-medium transition-colors duration-200 pl-2"
|
||||
>
|
||||
Learn more about Stripe
|
||||
<ExternalLink className="ml-1.5 h-4 w-4" />
|
||||
</a>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="flex flex-col rounded-lg light-shadow">
|
||||
{stripeConfig ? (
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-indigo-500 to-purple-600 p-6 rounded-lg shadow-md">
|
||||
<div className="flex items-center space-x-3">
|
||||
<SiStripe className="text-white" size={32} />
|
||||
<span className="text-xl font-semibold text-white">Stripe is enabled</span>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xl font-semibold text-white">Stripe</span>
|
||||
{stripeConfig.provider_config?.stripe_account_id && stripeConfig.active ? (
|
||||
<div className="flex items-center space-x-1 bg-green-500/20 px-2 py-0.5 rounded-full">
|
||||
<div className="h-2 w-2 bg-green-500 rounded-full" />
|
||||
<span className="text-xs text-green-100">Connected</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-1 bg-red-500/20 px-2 py-0.5 rounded-full">
|
||||
<div className="h-2 w-2 bg-red-500 rounded-full" />
|
||||
<span className="text-xs text-red-100">Not Connected</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-white/80 text-sm">
|
||||
{stripeConfig.provider_config?.stripe_account_id ?
|
||||
`Linked Account: ${stripeConfig.provider_config.stripe_account_id}` :
|
||||
'Account ID not configured'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
{!stripeConfig.active && stripeConfig.provider_config?.stripe_account_id && (
|
||||
<Button
|
||||
onClick={handleStripeOnboarding}
|
||||
className="flex items-center space-x-2 px-4 py-2 bg-yellow-500 text-white text-sm rounded-full hover:bg-yellow-600 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed border-2 border-yellow-400 shadow-md"
|
||||
disabled={isOnboardingLoading}
|
||||
>
|
||||
{isOnboardingLoading ? (
|
||||
<Loader2 className="animate-spin h-4 w-4" />
|
||||
) : (
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
)}
|
||||
<span className="font-semibold">Complete Onboarding</span>
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={editConfig}
|
||||
className="flex items-center space-x-2 px-4 py-2 bg-white text-purple-700 text-sm rounded-full hover:bg-gray-100 transition duration-300"
|
||||
className="flex items-center space-x-2 px-4 py-2 bg-white text-purple-700 text-sm rounded-full hover:bg-gray-100 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Edit size={16} />
|
||||
<span>Edit Configuration</span>
|
||||
|
|
@ -86,7 +178,9 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
confirmationMessage="Are you sure you want to delete the Stripe configuration? This action cannot be undone."
|
||||
dialogTitle="Delete Stripe Configuration"
|
||||
dialogTrigger={
|
||||
<Button className="flex items-center space-x-2 bg-red-500 text-white text-sm rounded-full hover:bg-red-600 transition duration-300">
|
||||
<Button
|
||||
className="flex items-center space-x-2 bg-red-500 text-white text-sm rounded-full hover:bg-red-600 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
<span>Delete Configuration</span>
|
||||
</Button>
|
||||
|
|
@ -99,10 +193,20 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
) : (
|
||||
<Button
|
||||
onClick={enableStripe}
|
||||
className="flex items-center justify-center space-x-2 bg-gradient-to-r p-3 from-indigo-500 to-purple-600 text-white px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition duration-300 shadow-md"
|
||||
className="flex items-center justify-center space-x-2 bg-gradient-to-r p-3 from-indigo-500 to-purple-600 text-white px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transition duration-300 shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={isOnboarding}
|
||||
>
|
||||
<SiStripe size={24} />
|
||||
<span className="text-lg font-semibold">Enable Stripe</span>
|
||||
{isOnboarding ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" size={24} />
|
||||
<span className="text-lg font-semibold">Connecting to Stripe...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SiStripe size={24} />
|
||||
<span className="text-lg font-semibold">Enable Stripe</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -129,20 +233,15 @@ interface EditStripeConfigModalProps {
|
|||
}
|
||||
|
||||
const EditStripeConfigModal: React.FC<EditStripeConfigModalProps> = ({ orgId, configId, accessToken, isOpen, onClose }) => {
|
||||
const [stripePublishableKey, setStripePublishableKey] = useState('');
|
||||
const [stripeSecretKey, setStripeSecretKey] = useState('');
|
||||
const [stripeWebhookSecret, setStripeWebhookSecret] = useState('');
|
||||
const [stripeAccountId, setStripeAccountId] = useState('');
|
||||
|
||||
// Add this useEffect hook to fetch and set the existing configuration
|
||||
useEffect(() => {
|
||||
const fetchConfig = async () => {
|
||||
try {
|
||||
const config = await getPaymentConfigs(orgId, accessToken);
|
||||
const stripeConfig = config.find((c: any) => c.id === configId);
|
||||
if (stripeConfig && stripeConfig.provider_config) {
|
||||
setStripePublishableKey(stripeConfig.provider_config.stripe_publishable_key || '');
|
||||
setStripeSecretKey(stripeConfig.provider_config.stripe_secret_key || '');
|
||||
setStripeWebhookSecret(stripeConfig.provider_config.stripe_webhook_secret || '');
|
||||
setStripeAccountId(stripeConfig.provider_config.stripe_account_id || '');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching Stripe configuration:', error);
|
||||
|
|
@ -158,14 +257,9 @@ const EditStripeConfigModal: React.FC<EditStripeConfigModalProps> = ({ orgId, co
|
|||
const handleSubmit = async () => {
|
||||
try {
|
||||
const stripe_config = {
|
||||
stripe_publishable_key: stripePublishableKey,
|
||||
stripe_secret_key: stripeSecretKey,
|
||||
stripe_webhook_secret: stripeWebhookSecret,
|
||||
stripe_account_id: stripeAccountId,
|
||||
};
|
||||
const updatedConfig = {
|
||||
provider_config: stripe_config,
|
||||
};
|
||||
await updatePaymentConfig(orgId, configId, updatedConfig, accessToken);
|
||||
await updateStripeAccountID(orgId, stripe_config, accessToken);
|
||||
toast.success('Configuration updated successfully');
|
||||
mutate([`/payments/${orgId}/config`, accessToken]);
|
||||
onClose();
|
||||
|
|
@ -179,31 +273,13 @@ const EditStripeConfigModal: React.FC<EditStripeConfigModalProps> = ({ orgId, co
|
|||
<Modal isDialogOpen={isOpen} dialogTitle="Edit Stripe Configuration" dialogDescription='Edit your stripe configuration' onOpenChange={onClose}
|
||||
dialogContent={
|
||||
<FormLayout onSubmit={handleSubmit}>
|
||||
<FormField name="stripe-key">
|
||||
<FormLabelAndMessage label="Stripe Publishable Key" />
|
||||
<FormField name="stripe-account-id">
|
||||
<FormLabelAndMessage label="Stripe Account ID" />
|
||||
<Input
|
||||
type="text"
|
||||
value={stripePublishableKey}
|
||||
onChange={(e) => setStripePublishableKey(e.target.value)}
|
||||
placeholder="pk_test_..."
|
||||
/>
|
||||
</FormField>
|
||||
<FormField name="stripe-secret-key">
|
||||
<FormLabelAndMessage label="Stripe Secret Key" />
|
||||
<Input
|
||||
type="password"
|
||||
value={stripeSecretKey}
|
||||
onChange={(e) => setStripeSecretKey(e.target.value)}
|
||||
placeholder="sk_test_..."
|
||||
/>
|
||||
</FormField>
|
||||
<FormField name="stripe-webhook-secret">
|
||||
<FormLabelAndMessage label="Stripe Webhook Secret" />
|
||||
<Input
|
||||
type="password"
|
||||
value={stripeWebhookSecret}
|
||||
onChange={(e) => setStripeWebhookSecret(e.target.value)}
|
||||
placeholder="whsec_..."
|
||||
value={stripeAccountId}
|
||||
onChange={(e) => setStripeAccountId(e.target.value)}
|
||||
placeholder="acct_..."
|
||||
/>
|
||||
</FormField>
|
||||
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@ import PageLoading from '@components/Objects/Loaders/PageLoading'
|
|||
import { RefreshCcw, SquareCheck } from 'lucide-react'
|
||||
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
||||
import UserAvatar from '@components/Objects/UserAvatar'
|
||||
import { usePaymentsEnabled } from '@hooks/usePaymentsEnabled'
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
import { AlertTriangle, Settings, CreditCard, ShoppingCart, Users, ChevronRight } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import UnconfiguredPaymentsDisclaimer from '../../Pages/Payments/UnconfiguredPaymentsDisclaimer'
|
||||
|
||||
interface PaymentUserData {
|
||||
payment_user_id: number;
|
||||
|
|
@ -113,12 +118,19 @@ function PaymentsCustomersPage() {
|
|||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token
|
||||
const { isEnabled, isLoading } = usePaymentsEnabled()
|
||||
|
||||
const { data: customers, error, isLoading } = useSWR(
|
||||
const { data: customers, error, isLoading: customersLoading } = useSWR(
|
||||
org ? [`/payments/${org.id}/customers`, access_token] : null,
|
||||
([url, token]) => getOrgCustomers(org.id, token)
|
||||
)
|
||||
|
||||
if (!isEnabled && !isLoading) {
|
||||
return (
|
||||
<UnconfiguredPaymentsDisclaimer />
|
||||
)
|
||||
}
|
||||
|
||||
if (isLoading) return <PageLoading />
|
||||
if (error) return <div>Error loading customers</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,11 @@ import { Label } from '@components/ui/label';
|
|||
import { Badge } from '@components/ui/badge';
|
||||
import { getPaymentConfigs } from '@services/payments/payments';
|
||||
import ProductLinkedCourses from './SubComponents/ProductLinkedCourses';
|
||||
import { AlertTriangle, Settings, CreditCard, ShoppingCart, Users, ChevronRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { usePaymentsEnabled } from '@hooks/usePaymentsEnabled';
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
import UnconfiguredPaymentsDisclaimer from '../../Pages/Payments/UnconfiguredPaymentsDisclaimer';
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
|
|
@ -36,6 +41,7 @@ function PaymentsProductPage() {
|
|||
const [editingProductId, setEditingProductId] = useState<string | null>(null);
|
||||
const [expandedProducts, setExpandedProducts] = useState<{ [key: string]: boolean }>({});
|
||||
const [isStripeEnabled, setIsStripeEnabled] = useState(false);
|
||||
const { isEnabled, isLoading } = usePaymentsEnabled();
|
||||
|
||||
const { data: products, error } = useSWR(
|
||||
() => org && session ? [`/payments/${org.id}/products`, session.data?.tokens?.access_token] : null,
|
||||
|
|
@ -71,6 +77,12 @@ function PaymentsProductPage() {
|
|||
}));
|
||||
};
|
||||
|
||||
if (!isEnabled && !isLoading) {
|
||||
return (
|
||||
<UnconfiguredPaymentsDisclaimer />
|
||||
);
|
||||
}
|
||||
|
||||
if (error) return <div>Failed to load products</div>;
|
||||
if (!products) return <div>Loading...</div>;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue