feat: add plan template picker for membership plan creation
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
- Add PlanTemplate type and listPlanTemplates API function - Create TemplateCard and TemplatePicker components - Modify PlanFormModal to accept initialValues from template - Update MembershipPlansComponent to show template picker first - Add missing translations (Venue Management, Club Management, etc.)master
Guillermo Pages
3 weeks ago
parent
826c42442e
commit
9f059bcbfe
@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import type { PlanTemplate } from '@/src/types/facility-admin';
|
||||
|
||||
interface TemplateCardProps {
|
||||
template: PlanTemplate;
|
||||
onSelect: () => void;
|
||||
}
|
||||
|
||||
export default function TemplateCard({ template, onSelect }: TemplateCardProps) {
|
||||
function formatPrice(cents: number): string {
|
||||
if (cents === 0) return 'Free';
|
||||
return `CHF ${(cents / 100).toFixed(0)}`;
|
||||
}
|
||||
|
||||
function formatBillingPeriod(period: string | null): string {
|
||||
if (!period) return '';
|
||||
if (period === 'monthly') return '/month';
|
||||
if (period === 'annual') return '/year';
|
||||
return '';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl border-2 border-gray-200 hover:border-purple-400 transition-all duration-200 p-5 flex flex-col h-full">
|
||||
{/* Template Name */}
|
||||
<h3 className="font-bold text-lg text-gray-800 mb-1">
|
||||
{template.name}
|
||||
</h3>
|
||||
|
||||
{/* Price */}
|
||||
<div className="text-2xl font-bold text-purple-600 mb-2">
|
||||
{formatPrice(template.suggested_price_cents)}
|
||||
<span className="text-sm font-normal text-gray-500">
|
||||
{formatBillingPeriod(template.billing_period)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{template.description && (
|
||||
<p className="text-sm text-gray-600 mb-4 flex-grow">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Entitlements Preview */}
|
||||
{Object.keys(template.default_entitlements).length > 0 && (
|
||||
<div className="text-xs text-gray-500 mb-4 space-y-1">
|
||||
{template.default_entitlements.max_active_bookings && (
|
||||
<div>Max {template.default_entitlements.max_active_bookings} active bookings</div>
|
||||
)}
|
||||
{template.default_entitlements.advance_window_days && (
|
||||
<div>Book {template.default_entitlements.advance_window_days} days ahead</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Button */}
|
||||
<button
|
||||
onClick={onSelect}
|
||||
className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white py-2.5 rounded-lg font-semibold transition-all duration-200"
|
||||
>
|
||||
Use Template
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Modal from '@/src/components/modals/Modal';
|
||||
import ModalHeader from '@/src/components/modals/ModalHeader';
|
||||
import ModalBody from '@/src/components/modals/ModalBody';
|
||||
import ModalFooter from '@/src/components/modals/ModalFooter';
|
||||
import { listPlanTemplates } from '@/src/lib/api/facility-admin';
|
||||
import type { PlanTemplate } from '@/src/types/facility-admin';
|
||||
import TemplateCard from './TemplateCard';
|
||||
|
||||
interface TemplatePickerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSelect: (template: PlanTemplate | null) => void;
|
||||
}
|
||||
|
||||
export default function TemplatePicker({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSelect
|
||||
}: TemplatePickerProps) {
|
||||
const [templates, setTemplates] = useState<PlanTemplate[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchTemplates();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
async function fetchTemplates() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const result = await listPlanTemplates();
|
||||
|
||||
if (result.success) {
|
||||
setTemplates(result.data);
|
||||
} else {
|
||||
setError(result.error.detail || 'Failed to load templates');
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
function handleSelectTemplate(template: PlanTemplate) {
|
||||
onSelect(template);
|
||||
onClose();
|
||||
}
|
||||
|
||||
function handleStartFromScratch() {
|
||||
onSelect(null);
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="lg">
|
||||
<ModalHeader onClose={onClose}>
|
||||
Choose a Template
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<div className="animate-spin h-8 w-8 border-4 border-purple-500 border-t-transparent rounded-full" />
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-500 mb-4">No templates available</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{templates.map(template => (
|
||||
<TemplateCard
|
||||
key={template.plan_template_id}
|
||||
template={template}
|
||||
onSelect={() => handleSelectTemplate(template)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-4 bg-white text-gray-500">or</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Start from Scratch */}
|
||||
<div className="text-center">
|
||||
<button
|
||||
onClick={handleStartFromScratch}
|
||||
className="px-6 py-3 border-2 border-gray-300 hover:border-purple-400 text-gray-700 hover:text-purple-600 rounded-lg font-semibold transition-all duration-200"
|
||||
>
|
||||
Start from Scratch
|
||||
</button>
|
||||
</div>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue