mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-18 20:09:25 +00:00
feat: improve products & subscriptions page
This commit is contained in:
parent
c762d2333e
commit
412651e817
8 changed files with 380 additions and 195 deletions
|
|
@ -13,6 +13,7 @@ class PaymentsProductBase(SQLModel):
|
|||
product_type: PaymentProductTypeEnum = PaymentProductTypeEnum.ONE_TIME
|
||||
benefits: str = ""
|
||||
amount: float = 0.0
|
||||
currency: str = "USD"
|
||||
|
||||
class PaymentsProduct(PaymentsProductBase, table=True):
|
||||
id: Optional[int] = Field(default=None, primary_key=True)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { motion } from 'framer-motion'
|
|||
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
|
||||
import Link from 'next/link'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import { CreditCard, Settings, Repeat, BookOpen, Users, DollarSign } from 'lucide-react'
|
||||
import { CreditCard, Settings, Repeat, BookOpen, Users, DollarSign, Gem } from 'lucide-react'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import PaymentsConfigurationPage from '@components/Dashboard/Payments/PaymentsConfigurationPage'
|
||||
|
|
@ -52,7 +52,7 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full bg-[#f8f8f8]">
|
||||
<div className="h-screen w-full bg-[#f8f8f8] flex flex-col">
|
||||
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
|
||||
<BreadCrumbs type="payments" />
|
||||
<div className="my-2 py-3">
|
||||
|
|
@ -75,18 +75,11 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
|
|||
/>
|
||||
<TabLink
|
||||
href={getUriWithOrg(params.orgslug, '/dash/payments/paid-products')}
|
||||
icon={<BookOpen size={16} />}
|
||||
label="One-time Products"
|
||||
icon={<Gem size={16} />}
|
||||
label="Products & Subscriptions"
|
||||
isActive={selectedSubPage === 'paid-products'}
|
||||
onClick={() => setSelectedSubPage('paid-products')}
|
||||
/>
|
||||
<TabLink
|
||||
href={getUriWithOrg(params.orgslug, '/dash/payments/subscriptions')}
|
||||
icon={<Repeat size={16} />}
|
||||
label="Subscriptions"
|
||||
isActive={selectedSubPage === 'subscriptions'}
|
||||
onClick={() => setSelectedSubPage('subscriptions')}
|
||||
/>
|
||||
<TabLink
|
||||
href={getUriWithOrg(params.orgslug, '/dash/payments/configuration')}
|
||||
icon={<Settings size={16} />}
|
||||
|
|
@ -103,12 +96,11 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
|
|||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.1, type: 'spring', stiffness: 80 }}
|
||||
className="h-full overflow-y-auto"
|
||||
className="flex-1 overflow-y-auto"
|
||||
>
|
||||
{selectedSubPage === 'general' && <div>General</div>}
|
||||
{selectedSubPage === 'configuration' && <PaymentsConfigurationPage />}
|
||||
{selectedSubPage === 'paid-products' && <PaymentsProductPage />}
|
||||
{selectedSubPage === 'subscriptions' && <div>Subscriptions</div>}
|
||||
{selectedSubPage === 'customers' && <div>Customers</div>}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,38 @@
|
|||
'use client';
|
||||
import React, { useState } from 'react'
|
||||
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, deleteProduct, updateProduct } from '@services/payments/products';
|
||||
import CreateProductForm from '@components/Dashboard/Payments/SubComponents/CreateProductForm';
|
||||
import { Plus, Trash2, Pencil, DollarSign, Info } from 'lucide-react';
|
||||
import { Plus, Trash2, Pencil, Info, RefreshCcw, SquareCheck, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import Modal from '@components/StyledElements/Modal/Modal';
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
|
||||
import toast from 'react-hot-toast';
|
||||
import Link from 'next/link';
|
||||
import { getUriWithOrg } from '@services/config/config';
|
||||
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';
|
||||
|
||||
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 { data: products, error } = useSWR(
|
||||
() => org && session ? [`/payments/${org.id}/products`, session.data?.tokens?.access_token] : null,
|
||||
|
|
@ -33,22 +49,20 @@ function PaymentsProductPage() {
|
|||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Products</h1>
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className="mb-4 flex items-center space-x-2 px-2 py-1.5 rounded-md bg-gradient-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg hover:from-gray-300/50 hover:to-gray-100/80 transition duration-300"
|
||||
>
|
||||
<Plus size={18} />
|
||||
<span className="text-sm font-bold">Create New Product</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<Modal
|
||||
isDialogOpen={isCreateModalOpen}
|
||||
|
|
@ -62,7 +76,7 @@ function PaymentsProductPage() {
|
|||
|
||||
<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">
|
||||
<div key={product.id} className="bg-white p-4 rounded-lg nice-shadow flex flex-col h-full">
|
||||
{editingProductId === product.id ? (
|
||||
<EditProductForm
|
||||
product={product}
|
||||
|
|
@ -70,9 +84,15 @@ function PaymentsProductPage() {
|
|||
onCancel={() => setEditingProductId(null)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<h3 className="font-bold text-lg">{product.name}</h3>
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<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}</span>
|
||||
</Badge>
|
||||
<h3 className="font-bold text-lg">{product.name}</h3>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => setEditingProductId(product.id)}
|
||||
|
|
@ -94,86 +114,169 @@ function PaymentsProductPage() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600">{product.description}</p>
|
||||
<p className="mt-2 font-semibold">${product.amount.toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-500">{product.product_type}</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 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>
|
||||
<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 hover:from-gray-600 hover:to-gray-800 transition duration-300"
|
||||
>
|
||||
<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 [name, setName] = useState(product.name);
|
||||
const [description, setDescription] = useState(product.description);
|
||||
const [amount, setAmount] = useState(product.amount);
|
||||
const [benefits, setBenefits] = useState(product.benefits || '');
|
||||
const org = useOrg() as any;
|
||||
const session = useLHSession() as any;
|
||||
const [currencies, setCurrencies] = useState<{ code: string; name: string }[]>([]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
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, { name, description, amount, benefits }, session.data?.tokens?.access_token);
|
||||
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 (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="Product Name"
|
||||
/>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="Product Description"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(parseFloat(e.target.value))}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="Price"
|
||||
step="0.01"
|
||||
/>
|
||||
<textarea
|
||||
value={benefits}
|
||||
onChange={(e) => setBenefits(e.target.value)}
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="Product Benefits"
|
||||
/>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button type="button" onClick={onCancel} className="px-4 py-2 text-gray-600 border rounded">Cancel</button>
|
||||
<button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,138 +1,157 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useOrg } from '@components/Contexts/OrgContext';
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext';
|
||||
import { createProduct } from '@services/payments/products';
|
||||
import FormLayout, { ButtonBlack, Input, Textarea, FormField, FormLabelAndMessage, Flex } from '@components/StyledElements/Form/Form';
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import { useFormik } from 'formik';
|
||||
import { Formik, Form, Field, ErrorMessage } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import toast from 'react-hot-toast';
|
||||
import { mutate } from 'swr';
|
||||
import { getAPIUrl } from '@services/config/config';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import currencyCodes from 'currency-codes';
|
||||
|
||||
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'),
|
||||
product_type: Yup.string().oneOf(['one_time', 'subscription']).required('Product type is required'),
|
||||
});
|
||||
|
||||
interface ProductFormValues {
|
||||
name: string;
|
||||
description: string;
|
||||
product_type: string;
|
||||
product_type: 'one_time' | 'subscription';
|
||||
benefits: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
}
|
||||
|
||||
const CreateProductForm: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
|
||||
const org = useOrg() as any;
|
||||
const session = useLHSession() as any;
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [currencies, setCurrencies] = useState<{ code: string; name: string }[]>([]);
|
||||
|
||||
const validate = (values: any) => {
|
||||
const errors: any = {};
|
||||
useEffect(() => {
|
||||
const allCurrencies = currencyCodes.data.map(currency => ({
|
||||
code: currency.code,
|
||||
name: `${currency.code} - ${currency.currency}`
|
||||
}));
|
||||
setCurrencies(allCurrencies);
|
||||
}, []);
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = 'Required';
|
||||
}
|
||||
|
||||
if (!values.description) {
|
||||
errors.description = 'Required';
|
||||
}
|
||||
|
||||
if (!values.amount) {
|
||||
errors.amount = 'Required';
|
||||
} else {
|
||||
const numAmount = Number(values.amount);
|
||||
if (isNaN(numAmount) || numAmount <= 0) {
|
||||
errors.amount = 'Amount must be greater than 0';
|
||||
}
|
||||
}
|
||||
|
||||
return errors;
|
||||
const initialValues: ProductFormValues = {
|
||||
name: '',
|
||||
description: '',
|
||||
product_type: 'one_time',
|
||||
benefits: '',
|
||||
amount: 0,
|
||||
currency: 'USD',
|
||||
};
|
||||
|
||||
const formik = useFormik<ProductFormValues>({
|
||||
initialValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
product_type: 'one_time',
|
||||
benefits: '',
|
||||
amount: 0,
|
||||
},
|
||||
validate,
|
||||
onSubmit: async (values) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const res = await createProduct(org.id, values, session.data?.tokens?.access_token);
|
||||
if (res.success) {
|
||||
toast.success('Product created successfully');
|
||||
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
|
||||
formik.resetForm();
|
||||
onSuccess(); // Call the onSuccess function to close the modal
|
||||
} else {
|
||||
toast.error('Failed to create product');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating product:', error);
|
||||
toast.error('An error occurred while creating the product');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
const handleSubmit = async (values: ProductFormValues, { setSubmitting, resetForm }: any) => {
|
||||
try {
|
||||
const res = await createProduct(org.id, values, session.data?.tokens?.access_token);
|
||||
if (res.success) {
|
||||
toast.success('Product created successfully');
|
||||
mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
|
||||
resetForm();
|
||||
onSuccess();
|
||||
} else {
|
||||
toast.error('Failed to create product');
|
||||
}
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error creating product:', error);
|
||||
toast.error('An error occurred while creating the product');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-5">
|
||||
<FormLayout onSubmit={formik.handleSubmit}>
|
||||
<FormField name="name">
|
||||
<FormLabelAndMessage label="Product Name" message={formik.errors.name} />
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.name}
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<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>
|
||||
|
||||
<FormField name="description">
|
||||
<FormLabelAndMessage label="Description" message={formik.errors.description} />
|
||||
<Form.Control asChild>
|
||||
<Textarea
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.description}
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<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>
|
||||
|
||||
<FormField name="benefits">
|
||||
<FormLabelAndMessage label="Benefits" />
|
||||
<Form.Control asChild>
|
||||
<Textarea
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.benefits}
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<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>
|
||||
|
||||
<FormField name="amount">
|
||||
<FormLabelAndMessage label="Amount" message={formik.errors.amount} />
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.amount}
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||
<Form.Submit asChild>
|
||||
<ButtonBlack type="submit" disabled={isSubmitting}>
|
||||
<div>
|
||||
<Label htmlFor="product_type">Product Type</Label>
|
||||
<Select
|
||||
value={values.product_type}
|
||||
onValueChange={(value) => setFieldValue('product_type', value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Product Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="one_time">One Time</SelectItem>
|
||||
<SelectItem value="subscription">Subscription</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<ErrorMessage name="product_type" component="div" className="text-red-500 text-sm mt-1" />
|
||||
</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">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Creating...' : 'Create Product'}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
</FormLayout>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ function DashLeftMenu() {
|
|||
>
|
||||
<Link
|
||||
className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
|
||||
href={`/dash/payments/general`}
|
||||
href={`/dash/payments/customers`}
|
||||
>
|
||||
<CreditCard size={18} />
|
||||
</Link>
|
||||
|
|
|
|||
36
apps/web/components/ui/badge.tsx
Normal file
36
apps/web/components/ui/badge.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
"avvvatars-react": "^0.4.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"currency-codes": "^2.1.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"dompurify": "^3.1.7",
|
||||
"formik": "^2.4.6",
|
||||
|
|
|
|||
45
apps/web/pnpm-lock.yaml
generated
45
apps/web/pnpm-lock.yaml
generated
|
|
@ -121,6 +121,9 @@ importers:
|
|||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
currency-codes:
|
||||
specifier: ^2.1.0
|
||||
version: 2.1.0
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
|
|
@ -2961,6 +2964,9 @@ packages:
|
|||
integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==,
|
||||
}
|
||||
|
||||
currency-codes@2.1.0:
|
||||
resolution: {integrity: sha512-aASwFNP8VjZ0y0PWlSW7c9N/isYTLxK6OCbm7aVuQMk7dWO2zgup9KGiFQgeL9OGL5P/ulvCHcjQizmuEeZXtw==}
|
||||
|
||||
damerau-levenshtein@1.0.8:
|
||||
resolution:
|
||||
{
|
||||
|
|
@ -3497,6 +3503,9 @@ packages:
|
|||
}
|
||||
engines: { node: ">=10" }
|
||||
|
||||
first-match@0.0.1:
|
||||
resolution: {integrity: sha512-VvKbnaxrC0polTFDC+teKPTdl2mn6B/KUW+WB3C9RzKDeNwbzfLdnUz3FxC+tnjvus6bI0jWrWicQyVIPdS37A==}
|
||||
|
||||
flat-cache@3.2.0:
|
||||
resolution:
|
||||
{
|
||||
|
|
@ -4578,6 +4587,9 @@ packages:
|
|||
integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==,
|
||||
}
|
||||
|
||||
nub@0.0.0:
|
||||
resolution: {integrity: sha512-dK0Ss9C34R/vV0FfYJXuqDAqHlaW9fvWVufq9MmGF2umCuDbd5GRfRD9fpi/LiM0l4ZXf8IBB+RYmZExqCrf0w==}
|
||||
|
||||
oauth@0.9.15:
|
||||
resolution:
|
||||
{
|
||||
|
|
@ -8426,6 +8438,11 @@ snapshots:
|
|||
|
||||
csstype@3.1.3: {}
|
||||
|
||||
currency-codes@2.1.0:
|
||||
dependencies:
|
||||
first-match: 0.0.1
|
||||
nub: 0.0.0
|
||||
|
||||
damerau-levenshtein@1.0.8: {}
|
||||
|
||||
data-view-buffer@1.0.1:
|
||||
|
|
@ -8664,8 +8681,8 @@ snapshots:
|
|||
'@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.4.4)
|
||||
eslint: 8.57.1
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
|
||||
eslint-plugin-react: 7.37.1(eslint@8.57.1)
|
||||
eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
|
||||
|
|
@ -8684,49 +8701,61 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
|
||||
=======
|
||||
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
|
||||
>>>>>>> 2daf1db (feat: use shadcn inputs and modal)
|
||||
=======
|
||||
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1):
|
||||
>>>>>>> 02b3b9c (feat: improve products & subscriptions page)
|
||||
dependencies:
|
||||
'@nolyfill/is-core-module': 1.0.39
|
||||
debug: 4.3.7
|
||||
enhanced-resolve: 5.17.1
|
||||
eslint: 8.57.1
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
fast-glob: 3.3.2
|
||||
get-tsconfig: 4.8.1
|
||||
is-bun-module: 1.2.1
|
||||
is-glob: 4.0.3
|
||||
optionalDependencies:
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
|
||||
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
transitivePeerDependencies:
|
||||
- "@typescript-eslint/parser"
|
||||
- eslint-import-resolver-node
|
||||
- eslint-import-resolver-webpack
|
||||
- supports-color
|
||||
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
|
||||
=======
|
||||
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
|
||||
>>>>>>> 2daf1db (feat: use shadcn inputs and modal)
|
||||
=======
|
||||
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
|
||||
>>>>>>> 02b3b9c (feat: improve products & subscriptions page)
|
||||
dependencies:
|
||||
debug: 3.2.7
|
||||
optionalDependencies:
|
||||
'@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.4.4)
|
||||
eslint: 8.57.1
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
|
||||
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
|
||||
=======
|
||||
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
|
||||
>>>>>>> 2daf1db (feat: use shadcn inputs and modal)
|
||||
=======
|
||||
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
|
||||
>>>>>>> 02b3b9c (feat: improve products & subscriptions page)
|
||||
dependencies:
|
||||
'@rtsao/scc': 1.1.0
|
||||
array-includes: 3.1.8
|
||||
|
|
@ -8737,7 +8766,7 @@ snapshots:
|
|||
doctrine: 2.1.0
|
||||
eslint: 8.57.1
|
||||
eslint-import-resolver-node: 0.3.9
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
|
||||
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.9.0(eslint@8.57.1)(typescript@5.4.4))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
|
||||
hasown: 2.0.2
|
||||
is-core-module: 2.15.1
|
||||
is-glob: 4.0.3
|
||||
|
|
@ -8918,6 +8947,8 @@ snapshots:
|
|||
locate-path: 6.0.0
|
||||
path-exists: 4.0.0
|
||||
|
||||
first-match@0.0.1: {}
|
||||
|
||||
flat-cache@3.2.0:
|
||||
dependencies:
|
||||
flatted: 3.3.1
|
||||
|
|
@ -9521,6 +9552,8 @@ snapshots:
|
|||
|
||||
nprogress@0.2.0: {}
|
||||
|
||||
nub@0.0.0: {}
|
||||
|
||||
oauth@0.9.15: {}
|
||||
|
||||
object-assign@4.1.1: {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue