mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
303 lines
16 KiB
TypeScript
303 lines
16 KiB
TypeScript
'use client';
|
|
import React, { useState, useEffect } from 'react'
|
|
import currencyCodes from 'currency-codes';
|
|
import { useOrg } from '@components/Contexts/OrgContext';
|
|
import { useLHSession } from '@components/Contexts/LHSessionContext';
|
|
import useSWR, { mutate } from 'swr';
|
|
import { getProducts, updateProduct, archiveProduct } from '@services/payments/products';
|
|
import CreateProductForm from '@components/Dashboard/Payments/SubComponents/CreateProductForm';
|
|
import { Plus, Trash2, Pencil, Info, RefreshCcw, SquareCheck, ChevronDown, ChevronUp, Archive } from 'lucide-react';
|
|
import Modal from '@components/StyledElements/Modal/Modal';
|
|
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
|
|
import toast from 'react-hot-toast';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Formik, Form, Field, ErrorMessage } from 'formik';
|
|
import * as Yup from 'yup';
|
|
import { Label } from '@components/ui/label';
|
|
import { Badge } from '@components/ui/badge';
|
|
import { getPaymentConfigs } from '@services/payments/payments';
|
|
import ProductLinkedCourses from './SubComponents/ProductLinkedCourses';
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
name: Yup.string().required('Name is required'),
|
|
description: Yup.string().required('Description is required'),
|
|
amount: Yup.number().min(0, 'Amount must be positive').required('Amount is required'),
|
|
benefits: Yup.string(),
|
|
currency: Yup.string().required('Currency is required'),
|
|
});
|
|
|
|
function PaymentsProductPage() {
|
|
const org = useOrg() as any;
|
|
const session = useLHSession() as any;
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
const [editingProductId, setEditingProductId] = useState<string | null>(null);
|
|
const [expandedProducts, setExpandedProducts] = useState<{ [key: string]: boolean }>({});
|
|
const [isStripeEnabled, setIsStripeEnabled] = useState(false);
|
|
|
|
const { data: products, error } = useSWR(
|
|
() => org && session ? [`/payments/${org.id}/products`, session.data?.tokens?.access_token] : null,
|
|
([url, token]) => getProducts(org.id, token)
|
|
);
|
|
|
|
const { data: paymentConfigs, error: paymentConfigError } = useSWR(
|
|
() => org && session ? [`/payments/${org.id}/config`, session.data?.tokens?.access_token] : null,
|
|
([url, token]) => getPaymentConfigs(org.id, token)
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (paymentConfigs) {
|
|
const stripeConfig = paymentConfigs.find((config: any) => config.provider === 'stripe');
|
|
setIsStripeEnabled(!!stripeConfig);
|
|
}
|
|
}, [paymentConfigs]);
|
|
|
|
const handleArchiveProduct = async (productId: string) => {
|
|
const res = await archiveProduct(org.id, productId, session.data?.tokens?.access_token);
|
|
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
|
|
if (res.status === 200) {
|
|
toast.success('Product archived successfully');
|
|
} else {
|
|
toast.error(res.data.detail);
|
|
}
|
|
}
|
|
|
|
const toggleProductExpansion = (productId: string) => {
|
|
setExpandedProducts(prev => ({
|
|
...prev,
|
|
[productId]: !prev[productId]
|
|
}));
|
|
};
|
|
|
|
if (error) return <div>Failed to load products</div>;
|
|
if (!products) return <div>Loading...</div>;
|
|
|
|
return (
|
|
<div className="h-full w-full bg-[#f8f8f8]">
|
|
<div className="pl-10 pr-10 mx-auto">
|
|
|
|
|
|
<Modal
|
|
isDialogOpen={isCreateModalOpen}
|
|
onOpenChange={setIsCreateModalOpen}
|
|
dialogTitle="Create New Product"
|
|
dialogDescription="Add a new product to your organization"
|
|
dialogContent={
|
|
<CreateProductForm onSuccess={() => setIsCreateModalOpen(false)} />
|
|
}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{products.data.map((product: any) => (
|
|
<div key={product.id} className="bg-white p-4 rounded-lg nice-shadow flex flex-col h-full">
|
|
{editingProductId === product.id ? (
|
|
<EditProductForm
|
|
product={product}
|
|
onSuccess={() => setEditingProductId(null)}
|
|
onCancel={() => setEditingProductId(null)}
|
|
/>
|
|
) : (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<div className="flex flex-col space-y-1 items-start">
|
|
<Badge className='w-fit flex items-center space-x-2' variant="outline">
|
|
{product.product_type === 'subscription' ? <RefreshCcw size={12} /> : <SquareCheck size={12} />}
|
|
<span className='text-sm'>{product.product_type === 'subscription' ? 'Subscription' : 'One-time payment'}</span>
|
|
</Badge>
|
|
<h3 className="font-bold text-lg">{product.name}</h3>
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
<button
|
|
onClick={() => setEditingProductId(product.id)}
|
|
className={`text-blue-500 hover:text-blue-700 ${isStripeEnabled ? '' : 'opacity-50 cursor-not-allowed'}`}
|
|
disabled={!isStripeEnabled}
|
|
>
|
|
<Pencil size={16} />
|
|
</button>
|
|
<ConfirmationModal
|
|
confirmationButtonText="Archive Product"
|
|
confirmationMessage="Are you sure you want to archive this product?"
|
|
dialogTitle={`Archive ${product.name}?`}
|
|
dialogTrigger={
|
|
<button className="text-red-500 hover:text-red-700">
|
|
<Archive size={16} />
|
|
</button>
|
|
}
|
|
functionToExecute={() => handleArchiveProduct(product.id)}
|
|
status="warning"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-grow overflow-hidden">
|
|
<div className={`transition-all duration-300 ease-in-out ${expandedProducts[product.id] ? 'max-h-[1000px]' : 'max-h-24'} overflow-hidden`}>
|
|
<p className="text-gray-600">
|
|
{product.description}
|
|
</p>
|
|
{product.benefits && (
|
|
<div className="mt-2">
|
|
<h4 className="font-semibold text-sm">Benefits:</h4>
|
|
<p className="text-sm text-gray-600">
|
|
{product.benefits}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-2">
|
|
<button
|
|
onClick={() => toggleProductExpansion(product.id)}
|
|
className="text-slate-500 hover:text-slate-700 text-sm flex items-center"
|
|
>
|
|
{expandedProducts[product.id] ? (
|
|
<>
|
|
<ChevronUp size={16} />
|
|
<span>Show less</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<ChevronDown size={16} />
|
|
<span>Show more</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<ProductLinkedCourses productId={product.id} />
|
|
<div className="mt-2 flex items-center justify-between bg-gray-100 rounded-md p-2">
|
|
<span className="text-sm text-gray-600">Price:</span>
|
|
<span className="font-semibold text-lg">
|
|
{new Intl.NumberFormat('en-US', { style: 'currency', currency: product.currency }).format(product.amount)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{products.data.length === 0 && (
|
|
<div className="flex mx-auto space-x-2 font-semibold mt-3 text-gray-600 items-center">
|
|
<Info size={20} />
|
|
<p>No products available. Create a new product to get started.</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-center items-center py-10">
|
|
<button
|
|
onClick={() => setIsCreateModalOpen(true)}
|
|
className={`mb-4 flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-bl text-white font-medium from-gray-700 to-gray-900 border border-gray-600 shadow-gray-900/20 nice-shadow transition duration-300 ${isStripeEnabled ? 'hover:from-gray-600 hover:to-gray-800' : 'opacity-50 cursor-not-allowed'
|
|
}`}
|
|
disabled={!isStripeEnabled}
|
|
>
|
|
<Plus size={18} />
|
|
<span className="text-sm font-bold">Create New Product</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const EditProductForm = ({ product, onSuccess, onCancel }: { product: any, onSuccess: () => void, onCancel: () => void }) => {
|
|
const org = useOrg() as any;
|
|
const session = useLHSession() as any;
|
|
const [currencies, setCurrencies] = useState<{ code: string; name: string }[]>([]);
|
|
|
|
useEffect(() => {
|
|
const allCurrencies = currencyCodes.data.map(currency => ({
|
|
code: currency.code,
|
|
name: `${currency.code} - ${currency.currency}`
|
|
}));
|
|
setCurrencies(allCurrencies);
|
|
}, []);
|
|
|
|
const initialValues = {
|
|
name: product.name,
|
|
description: product.description,
|
|
amount: product.amount,
|
|
benefits: product.benefits || '',
|
|
currency: product.currency || '',
|
|
product_type: product.product_type,
|
|
};
|
|
|
|
const handleSubmit = async (values: typeof initialValues, { setSubmitting }: { setSubmitting: (isSubmitting: boolean) => void }) => {
|
|
try {
|
|
await updateProduct(org.id, product.id, values, session.data?.tokens?.access_token);
|
|
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
|
|
onSuccess();
|
|
toast.success('Product updated successfully');
|
|
} catch (error) {
|
|
toast.error('Failed to update product');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{({ isSubmitting, values, setFieldValue }) => (
|
|
<Form className="space-y-4">
|
|
<div className='px-1.5 py-2 flex-col space-y-3'>
|
|
<div>
|
|
<Label htmlFor="name">Product Name</Label>
|
|
<Field name="name" as={Input} placeholder="Product Name" />
|
|
<ErrorMessage name="name" component="div" className="text-red-500 text-sm mt-1" />
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="description">Description</Label>
|
|
<Field name="description" as={Textarea} placeholder="Product Description" />
|
|
<ErrorMessage name="description" component="div" className="text-red-500 text-sm mt-1" />
|
|
</div>
|
|
|
|
<div className="flex space-x-2">
|
|
<div className="flex-grow">
|
|
<Label htmlFor="amount">Price</Label>
|
|
<Field name="amount" as={Input} type="number" placeholder="Price" />
|
|
<ErrorMessage name="amount" component="div" className="text-red-500 text-sm mt-1" />
|
|
</div>
|
|
<div className="w-1/3">
|
|
<Label htmlFor="currency">Currency</Label>
|
|
<Select
|
|
value={values.currency}
|
|
onValueChange={(value) => setFieldValue('currency', value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Currency" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{currencies.map((currency) => (
|
|
<SelectItem key={currency.code} value={currency.code}>
|
|
{currency.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<ErrorMessage name="currency" component="div" className="text-red-500 text-sm mt-1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="benefits">Benefits</Label>
|
|
<Field name="benefits" as={Textarea} placeholder="Product Benefits" />
|
|
<ErrorMessage name="benefits" component="div" className="text-red-500 text-sm mt-1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2">
|
|
<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
);
|
|
};
|
|
|
|
export default PaymentsProductPage
|