feat: use stripe connect for payments

apps/web/components/Dashboard/Payments/PaymentsConfigurationPage.tsx

@@ -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' }}>

apps/web/components/Dashboard/Payments/PaymentsCustomersPage.tsx

@@ -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>
 

apps/web/components/Dashboard/Payments/PaymentsProductPage.tsx

@@ -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>;
 

apps/web/components/Hooks/usePaymentsEnabled.tsx

@@ -0,0 +1,26 @@
+// hooks/usePaymentsEnabled.ts
+import { useOrg } from '@components/Contexts/OrgContext';
+import { useLHSession } from '@components/Contexts/LHSessionContext';
+import useSWR from 'swr';
+import { getPaymentConfigs } from '@services/payments/payments';
+
+export function usePaymentsEnabled() {
+  const org = useOrg() as any;
+  const session = useLHSession() as any;
+  const access_token = session?.data?.tokens?.access_token;
+
+  const { data: paymentConfigs, error, isLoading } = useSWR(
+    org && access_token ? [`/payments/${org.id}/config`, access_token] : null,
+    ([url, token]) => getPaymentConfigs(org.id, token)
+  );
+
+  const isStripeEnabled = paymentConfigs?.some(
+    (config: any) => config.provider === 'stripe' && config.active
+  );
+
+  return {
+    isEnabled: !!isStripeEnabled,
+    isLoading,
+    error
+  };
+}

apps/web/components/Pages/Payments/UnconfiguredPaymentsDisclaimer.tsx

@@ -0,0 +1,48 @@
+import {  Settings, ChevronRight, CreditCard } from 'lucide-react'
+import { Alert, AlertTitle, AlertDescription } from '@components/ui/alert'
+import { AlertTriangle, ShoppingCart, Users } from 'lucide-react'
+import React from 'react'
+import Link from 'next/link'
+
+function UnconfiguredPaymentsDisclaimer() {
+  return (
+    <div className="h-full w-full bg-[#f8f8f8]">
+        <div className="ml-10 mr-10 mx-auto">
+          <Alert className="mb-3 p-6 border-2 border-yellow-200 bg-yellow-100/50 light-shadow">
+            <AlertTitle className="text-lg font-semibold mb-2 flex items-center space-x-2">
+              <AlertTriangle className="h-5 w-5" />
+              <span>Payments not yet properly configured</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>Configure Stripe to start accepting payments</span>
+                  </li>
+                  <li className="flex items-center space-x-2">
+                    <ShoppingCart className="h-4 w-4" />
+                    <span>Create and manage products</span>
+                  </li>
+                  <li className="flex items-center space-x-2">
+                    <Users className="h-4 w-4" />
+                    <span>Start selling to your customers</span>
+                  </li>
+                </ul>
+              </div>
+              <Link
+                href="./configuration" 
+                className="text-yellow-900 hover:text-yellow-700 inline-flex items-center font-medium transition-colors duration-200 pl-2"
+              >
+                <Settings className="h-4 w-4 mr-1.5" />
+                Go to Payment Configuration
+                <ChevronRight className="ml-1.5 h-4 w-4" />
+              </Link>
+            </AlertDescription>
+          </Alert>
+        </div>
+      </div>
+  )
+}
+
+export default UnconfiguredPaymentsDisclaimer

apps/web/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

apps/web/services/payments/payments.ts

@@ -20,9 +20,9 @@ export async function checkPaidAccess(courseId: number, orgId: number, access_to
   return res;
 }
 
-export async function createPaymentConfig(orgId: number, data: any, access_token: string) {
+export async function initializePaymentConfig(orgId: number, data: any, provider: string, access_token: string) {
   const result = await fetch(
-    `${getAPIUrl()}payments/${orgId}/config`,
+    `${getAPIUrl()}payments/${orgId}/config?provider=${provider}`,
     RequestBodyWithAuthHeader('POST', data, null, access_token)
   );
   const res = await errorHandling(result);
@@ -38,6 +38,24 @@ export async function updatePaymentConfig(orgId: number, id: string, data: any,
   return res;
 }
 
+export async function updateStripeAccountID(orgId: number, data: any, access_token: string) {
+  const result = await fetch(
+    `${getAPIUrl()}payments/${orgId}/stripe/account?stripe_account_id=${data.stripe_account_id}`,
+    RequestBodyWithAuthHeader('PUT', data, null, access_token)
+  );
+  const res = await errorHandling(result);
+  return res;
+}
+
+export async function getStripeOnboardingLink(orgId: number, access_token: string, redirect_uri: string) {
+  const result = await fetch(
+    `${getAPIUrl()}payments/${orgId}/stripe/connect/link?redirect_uri=${redirect_uri}`,
+    RequestBodyWithAuthHeader('POST', null, null, access_token)
+  );
+  const res = await errorHandling(result);
+  return res;
+}
+
 export async function deletePaymentConfig(orgId: number, id: string, access_token: string) {
   const result = await fetch(
     `${getAPIUrl()}payments/${orgId}/config?id=${id}`,

apps/web/tsconfig.json

@@ -26,6 +26,7 @@
       "@styles/*": ["styles/*"],
       "@services/*": ["services/*"],
       "@editor/*": ["components/Objects/Editor/*"],
+      "@hooks/*": ["components/Hooks/*"],
       "@/*": ["./*"]  
     }
   },