import { adminToast } from '@admin/components/ui/admin-toast'; import { CreatePageLayout } from '@admin/components/ui/create-page-layout'; import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table'; import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal'; import { formClassName } from '@admin/components/ui/field-styles'; import { useCrudPermissions } from '@admin/hooks/use-crud-permissions'; import { useFormResponse } from '@admin/hooks/use-form-response'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import { DEFAULT_PRICING_BILLING_PERIOD } from '@admin/lib/pricing-billing-periods'; import EditPricingPlan from '@admin/pages/pricing-plans/edit-pricing-plan'; import { PricingPlanFormFields } from '@admin/pages/pricing-plans/pricing-plan-form-fields'; import { Head, useForm } from '@inertiajs/react'; import { FormEvent, useState } from 'react'; type PlanSummary = { id: number; name: string; status: boolean; }; type PlanRecord = PlanSummary & { description?: string; feature_list?: string[] | null; price?: string | number; billing_period?: string; is_most_popular?: boolean; sort_order?: number; }; type CreatePricingPlanProps = { plans: PlanSummary[]; }; const sidebarColumns: DataTableColumn[] = [ { header: 'Name', key: 'name', truncate: true, className: 'w-[50%]' }, { header: 'Status', key: 'status', className: 'w-24' }, ]; const initialFormState = { name: '', description: '', feature_list: [] as string[], price: '', billing_period: DEFAULT_PRICING_BILLING_PERIOD, is_most_popular: false, sort_order: 0, status: true, }; function CreatePricingPlan({ plans }: CreatePricingPlanProps) { const { canEdit, canDelete } = useCrudPermissions('pricing-plan'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; plan: PlanSummary | null }>({ show: false, plan: null, }); const { data, setData, post, processing, errors, reset } = useForm(initialFormState); const action = useFormResponse({ onComplete: reset, loadingMessage: 'Creating pricing plan...' }); const handleEdit = async (row: PlanSummary) => { 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 PlanRecord; setInitialData(planData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load pricing plan details'); } }; const handleSubmit = (event: FormEvent) => { event.preventDefault(); post('/admin/api/create_pricing_plan', { onStart: action.onStart, onSuccess: action.onSuccess, onError: action.onError, preserveScroll: true, }); }; return ( <>

Add pricing plan

} sidebar={ setDeleteModal({ show: true, plan: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No pricing plans yet" /> } /> 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(CreatePricingPlan, { layout: dashboardPersistentLayout('Create pricing plan', 'Add a plan to the pricing section'), });