import { adminToast } from '@admin/components/ui/admin-toast'; import { CrudCreateLink } from '@admin/components/ui/crud-create-link'; import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table'; import { useCrudPermissions } from '@admin/hooks/use-crud-permissions'; import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal'; import { formHelpClassName } from '@admin/components/ui/field-styles'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import EditPricingPlan from '@admin/pages/pricing-plans/edit-pricing-plan'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type PlanRow = { id: number; name: string; description: string; price: string; billing_period: string; is_most_popular: boolean; sort_order: number; status: boolean; created_at: string; }; type PricingPlansIndexProps = { plans: PlanRow[]; }; function formatPrice(price: string, billingPeriod: string): string { const suffix = billingPeriod === 'year' ? '/year' : '/month'; return `${price}${suffix}`; } function PricingPlansIndex({ plans }: PricingPlansIndexProps) { const { canEdit, canDelete } = useCrudPermissions('pricing-plan'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; plan: PlanRow | null }>({ show: false, plan: null, }); const columns: DataTableColumn[] = [ { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Name', key: 'name', truncate: true }, { header: 'Description', key: 'description', truncate: true }, { header: 'Price', key: 'price', render: (row) => formatPrice(row.price, row.billing_period), }, { header: 'Popular', key: 'is_most_popular', render: (row) => (row.is_most_popular ? 'Yes' : '—'), }, { header: 'Status', key: 'status' }, ]; const handleEdit = async (row: PlanRow) => { try { const response = await fetch(`/admin/edit_pricing_plan/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch pricing plan'); } const planData = (await response.json()) as PlanRow; setInitialData(planData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load pricing plan details'); } }; return ( <>

Plans are shown on the homepage pricing section in ascending display order.

setDeleteModal({ show: true, plan: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No pricing plans found" />

setDeleteModal({ show: false, plan: null })} itemName={deleteModal.plan?.name ?? 'this pricing plan'} itemType="pricing plan" deleteEndpoint={`/admin/api/delete_pricing_plan/${deleteModal.plan?.id ?? ''}`} loadingMessage="Deleting pricing plan..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(PricingPlansIndex, { layout: dashboardPersistentLayout('Pricing plans', 'Manage service pricing tiers'), });