d54a4024cb
refactor: Update header component to conditionally show shop navigation feat: Add environment variable check to control shop visibility in public and VIP shop pages refactor: Clean up VIP shop page by removing unused collections and featured products sections
166 lines
9.0 KiB
TypeScript
166 lines
9.0 KiB
TypeScript
"use client";
|
|
import React, { useMemo, useState } from 'react';
|
|
import PageLayout from '../../../components/PageLayout';
|
|
import useCoffeeManagement from '../hooks/useCoffeeManagement';
|
|
import { PhotoIcon } from '@heroicons/react/24/solid';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export default function CreateSubscriptionPage() {
|
|
const { createProduct } = useCoffeeManagement();
|
|
const router = useRouter();
|
|
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// form state
|
|
const [title, setTitle] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [price, setPrice] = useState(0);
|
|
const [state, setState] = useState<'available'|'unavailable'>('available');
|
|
const [pictureFile, setPictureFile] = useState<File | undefined>(undefined);
|
|
const [currency, setCurrency] = useState('EUR');
|
|
const [isFeatured, setIsFeatured] = useState(false);
|
|
// Fixed billing defaults (locked: month / 1)
|
|
const billingInterval: 'month' = 'month';
|
|
const intervalCount: number = 1;
|
|
|
|
const onCreate = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
try {
|
|
await createProduct({
|
|
title,
|
|
description,
|
|
price,
|
|
currency,
|
|
is_featured: isFeatured,
|
|
state: state === 'available',
|
|
pictureFile
|
|
});
|
|
router.push('/admin/subscriptions');
|
|
} catch (e: any) {
|
|
setError(e.message || 'Failed to create');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<PageLayout>
|
|
<div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
|
|
<main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
|
|
{/* Header */}
|
|
<header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Create Subscription</h1>
|
|
<p className="text-lg text-blue-700 mt-2">Add a new product or subscription plan.</p>
|
|
</div>
|
|
<Link href="/admin/subscriptions"
|
|
className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"/></svg>
|
|
Back to list
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
|
|
<form onSubmit={onCreate} className="space-y-8">
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
|
{/* Title */}
|
|
<div>
|
|
<label htmlFor="title" className="block text-sm font-medium text-blue-900">Title</label>
|
|
<input id="title" name="title" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
|
</div>
|
|
{/* Price */}
|
|
<div>
|
|
<label htmlFor="price" className="block text-sm font-medium text-blue-900">Price</label>
|
|
<input id="price" name="price" required min={0.01} step={0.01} className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Price" type="number" value={price} onChange={e => setPrice(Number(e.target.value))} />
|
|
</div>
|
|
{/* Currency */}
|
|
<div>
|
|
<label htmlFor="currency" className="block text-sm font-medium text-blue-900">Currency (e.g., EUR)</label>
|
|
<input id="currency" name="currency" required maxLength={3} pattern="[A-Za-z]{3}" className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="EUR" value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))} />
|
|
</div>
|
|
{/* Featured */}
|
|
<div className="flex items-center gap-2 mt-6">
|
|
<input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
|
|
<label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
|
|
</div>
|
|
{/* Fixed Billing (Locked) */}
|
|
<div className="sm:col-span-2">
|
|
<label className="block text-sm font-medium text-blue-900">Billing</label>
|
|
<p className="mt-1 text-xs text-gray-600">Fixed monthly billing (interval count = 1). These settings are locked.</p>
|
|
<div className="mt-2 flex gap-4">
|
|
<input disabled value={billingInterval} className="w-40 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
|
<input disabled value={intervalCount} className="w-24 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
|
</div>
|
|
</div>
|
|
{/* Availability */}
|
|
<div>
|
|
<label htmlFor="availability" className="block text-sm font-medium text-blue-900">Availability</label>
|
|
<select id="availability" name="availability" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black" value={state} onChange={e => setState(e.target.value as any)}>
|
|
<option value="available">Available</option>
|
|
<option value="unavailable">Unavailable</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div>
|
|
<label htmlFor="description" className="block text-sm font-medium text-blue-900">Description</label>
|
|
<textarea id="description" name="description" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" rows={3} placeholder="Describe the product" value={description} onChange={e => setDescription(e.target.value)} />
|
|
<p className="mt-1 text-xs text-gray-600">Shown to users in the shop and checkout.</p>
|
|
</div>
|
|
|
|
{/* Picture Upload */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-blue-900">Picture</label>
|
|
<div
|
|
className="mt-2 flex max-w-xl justify-center rounded-lg border border-dashed border-blue-300 px-6 py-10 bg-blue-50 cursor-pointer"
|
|
onClick={() => document.getElementById('file-upload')?.click()}
|
|
onDragOver={e => e.preventDefault()}
|
|
onDrop={e => {
|
|
e.preventDefault();
|
|
if (e.dataTransfer.files?.[0]) setPictureFile(e.dataTransfer.files[0]);
|
|
}}
|
|
>
|
|
<div className="text-center w-full">
|
|
<PhotoIcon aria-hidden="true" className="mx-auto h-12 w-12 text-blue-400" />
|
|
<div className="mt-4 text-sm text-blue-700">
|
|
<span>Drag and drop an image here</span>
|
|
</div>
|
|
<p className="text-xs text-blue-600 mt-2">PNG, JPG up to 10MB</p>
|
|
{pictureFile && (
|
|
<p className="mt-2 text-xs text-blue-900 font-medium">{pictureFile.name}</p>
|
|
)}
|
|
</div>
|
|
<input
|
|
id="file-upload"
|
|
name="file-upload"
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={e => setPictureFile(e.target.files?.[0])}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-end gap-x-4">
|
|
<Link href="/admin/subscriptions" className="text-sm font-medium text-blue-900 hover:text-blue-700">
|
|
Cancel
|
|
</Link>
|
|
<button type="submit" className="inline-flex justify-center rounded-lg bg-blue-900 px-5 py-3 text-sm font-semibold text-blue-50 shadow hover:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-900 transition">
|
|
Create
|
|
</button>
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</PageLayout>
|
|
);
|
|
}
|