feat: improve products & subscriptions page

apps/api/src/db/payments/payments_products.py

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

apps/web/app/orgs/[orgslug]/dash/payments/[subpage]/page.tsx

@@ -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} />}
+            icon={<Gem size={16} />}
-            label="One-time Products"
+            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>

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

@@ -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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { getUriWithOrg } from '@services/config/config';
+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 flex-col h-full">
-                                    <div className="flex justify-between items-start">
+                                    <div className="flex justify-between items-start mb-2">
-                                        <h3 className="font-bold text-lg">{product.name}</h3>
+                                        <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>
+                                    <div className="flex-grow overflow-hidden">
-                                    <p className="mt-2 font-semibold">${product.amount.toFixed(2)}</p>
+                                        <div className={`transition-all duration-300 ease-in-out ${expandedProducts[product.id] ? 'max-h-[1000px]' : 'max-h-24'} overflow-hidden`}>
-                                    <p className="text-sm text-gray-500">{product.product_type}</p>
+                                            <p className="text-gray-600">
-                                    {product.benefits && (
+                                                {product.description}
-                                        <div className="mt-2">
+                                            </p>
-                                            <h4 className="font-semibold text-sm">Benefits:</h4>
+                                            {product.benefits && (
-                                            <p className="text-sm text-gray-600">{product.benefits}</p>
+                                                <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>) => {
+    useEffect(() => {
-        e.preventDefault();
+        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">
+        <Formik
-            <input
+            initialValues={initialValues}
-                type="text"
+            validationSchema={validationSchema}
-                value={name}
+            onSubmit={handleSubmit}
-                onChange={(e) => setName(e.target.value)}
+        >
-                className="w-full p-2 border rounded"
+            {({ isSubmitting, values, setFieldValue }) => (
-                placeholder="Product Name"
+                <Form className="space-y-4">
-            />
+                    <div className='px-1.5 py-2 flex-col space-y-3'>
-            <textarea
+                        <div>
-                value={description}
+                            <Label htmlFor="name">Product Name</Label>
-                onChange={(e) => setDescription(e.target.value)}
+                            <Field name="name" as={Input} placeholder="Product Name" />
-                className="w-full p-2 border rounded"
+                            <ErrorMessage name="name" component="div" className="text-red-500 text-sm mt-1" />
-                placeholder="Product Description"
+                        </div>
-            />
+
-            <input
+                        <div>
-                type="number"
+                            <Label htmlFor="description">Description</Label>
-                value={amount}
+                            <Field name="description" as={Textarea} placeholder="Product Description" />
-                onChange={(e) => setAmount(parseFloat(e.target.value))}
+                            <ErrorMessage name="description" component="div" className="text-red-500 text-sm mt-1" />
-                className="w-full p-2 border rounded"
+                        </div>
-                placeholder="Price"
+
-                step="0.01"
+                        <div className="flex space-x-2">
-            />
+                            <div className="flex-grow">
-            <textarea
+                                <Label htmlFor="amount">Price</Label>
-                value={benefits}
+                                <Field name="amount" as={Input} type="number" placeholder="Price" />
-                onChange={(e) => setBenefits(e.target.value)}
+                                <ErrorMessage name="amount" component="div" className="text-red-500 text-sm mt-1" />
-                className="w-full p-2 border rounded"
+                            </div>
-                placeholder="Product Benefits"
+                            <div className="w-1/3">
-            />
+                                <Label htmlFor="currency">Currency</Label>
-            <div className="flex justify-end space-x-2">
+                                <Select
-                <button type="button" onClick={onCancel} className="px-4 py-2 text-gray-600 border rounded">Cancel</button>
+                                    value={values.currency}
-                <button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded">Save</button>
+                                    onValueChange={(value) => setFieldValue('currency', value)}
-            </div>
+                                >
-        </form>
+                                    <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>
     );
 };
 

apps/web/components/Dashboard/Payments/SubComponents/CreateProductForm.tsx

@@ -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 { Formik, Form, Field, ErrorMessage } from 'formik';
-import * as Form from '@radix-ui/react-form';
+import * as Yup from 'yup';
-import { useFormik } from 'formik';
 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) => {
+  useEffect(() => {
-    const errors: any = {};
+    const allCurrencies = currencyCodes.data.map(currency => ({
+      code: currency.code,
+      name: `${currency.code} - ${currency.currency}`
+    }));
+    setCurrencies(allCurrencies);
+  }, []);
 
-    if (!values.name) {
+  const initialValues: ProductFormValues = {
-      errors.name = 'Required';
+    name: '',
-    }
+    description: '',
-
+    product_type: 'one_time',
-    if (!values.description) {
+    benefits: '',
-      errors.description = 'Required';
+    amount: 0,
-    }
+    currency: 'USD',
-
-    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 formik = useFormik<ProductFormValues>({
+  const handleSubmit = async (values: ProductFormValues, { setSubmitting, resetForm }: any) => {
-    initialValues: {
+    try {
-      name: '',
+      const res = await createProduct(org.id, values, session.data?.tokens?.access_token);
-      description: '',
+      if (res.success) {
-      product_type: 'one_time',
+        toast.success('Product created successfully');
-      benefits: '',
+        mutate([`/payments/${org.id}/products`, session.data?.tokens?.access_token]);
-      amount: 0,
+        resetForm();
-    },
+        onSuccess();
-    validate,
+      } else {
-    onSubmit: async (values) => {
+        toast.error('Failed to create product');
-      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);
       }
-    },
+    } 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">
+    <Formik
-      <FormLayout onSubmit={formik.handleSubmit}>
+      initialValues={initialValues}
-        <FormField name="name">
+      validationSchema={validationSchema}
-          <FormLabelAndMessage label="Product Name" message={formik.errors.name} />
+      onSubmit={handleSubmit}
-          <Form.Control asChild>
+    >
-            <Input
+      {({ isSubmitting, values, setFieldValue }) => (
-              onChange={formik.handleChange}
+        <Form className="space-y-4">
-              value={formik.values.name}
+          <div className='px-1.5 py-2 flex-col space-y-3'>
-              type="text"
+            <div>
-              required
+              <Label htmlFor="name">Product Name</Label>
-            />
+              <Field name="name" as={Input} placeholder="Product Name" />
-          </Form.Control>
+              <ErrorMessage name="name" component="div" className="text-red-500 text-sm mt-1" />
-        </FormField>
+            </div>
 
-        <FormField name="description">
+            <div>
-          <FormLabelAndMessage label="Description" message={formik.errors.description} />
+              <Label htmlFor="description">Description</Label>
-          <Form.Control asChild>
+              <Field name="description" as={Textarea} placeholder="Product Description" />
-            <Textarea
+              <ErrorMessage name="description" component="div" className="text-red-500 text-sm mt-1" />
-              onChange={formik.handleChange}
+            </div>
-              value={formik.values.description}
-              required
-            />
-          </Form.Control>
-        </FormField>
 
-        <FormField name="benefits">
+            <div className="flex space-x-2">
-          <FormLabelAndMessage label="Benefits" />
+              <div className="flex-grow">
-          <Form.Control asChild>
+                <Label htmlFor="amount">Price</Label>
-            <Textarea
+                <Field name="amount" as={Input} type="number" placeholder="Price" />
-              onChange={formik.handleChange}
+                <ErrorMessage name="amount" component="div" className="text-red-500 text-sm mt-1" />
-              value={formik.values.benefits}
+              </div>
-            />
+              <div className="w-1/3">
-          </Form.Control>
+                <Label htmlFor="currency">Currency</Label>
-        </FormField>
+                <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">
+            <div>
-          <FormLabelAndMessage label="Amount" message={formik.errors.amount} />
+              <Label htmlFor="product_type">Product Type</Label>
-          <Form.Control asChild>
+              <Select
-            <Input
+                value={values.product_type}
-              onChange={formik.handleChange}
+                onValueChange={(value) => setFieldValue('product_type', value)}
-              value={formik.values.amount}
+              >
-              type="number"
+                <SelectTrigger>
-              min="0"
+                  <SelectValue placeholder="Product Type" />
-              step="0.01"
+                </SelectTrigger>
-              required
+                <SelectContent>
-            />
+                  <SelectItem value="one_time">One Time</SelectItem>
-          </Form.Control>
+                  <SelectItem value="subscription">Subscription</SelectItem>
-        </FormField>
+                </SelectContent>
-        <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+              </Select>
-          <Form.Submit asChild>
+              <ErrorMessage name="product_type" component="div" className="text-red-500 text-sm mt-1" />
-            <ButtonBlack type="submit" disabled={isSubmitting}>
+            </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>
+            </Button>
-          </Form.Submit>
+          </div>
-        </Flex>
+        </Form>
-      </FormLayout>
+      )}
-    </div>
+    </Formik>
   );
 };
 

apps/web/components/Objects/Menus/DashMenu.tsx

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

apps/web/components/ui/badge.tsx

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

apps/web/package.json

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

apps/web/pnpm-lock.yaml

@@ -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-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)(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: {}