feat: improve consulting booking UX - allow single slot selection
- Add pending slot state to distinguish between selected and confirmed slots - First click: slot shows as pending (amber) with "Pilih" label - Second click (same slot): confirms single slot selection - Second click (different slot): creates range from pending to clicked slot - Fix "Body already consumed" error in OAuth token refresh - Enhance admin consulting slot display with category and notes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
@@ -67,12 +67,13 @@ export default function ConsultingBooking() {
|
||||
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1));
|
||||
|
||||
// NEW: Range selection instead of array
|
||||
// Range selection with pending slot
|
||||
interface TimeRange {
|
||||
start: string | null;
|
||||
end: string | null;
|
||||
}
|
||||
const [selectedRange, setSelectedRange] = useState<TimeRange>({ start: null, end: null });
|
||||
const [pendingSlot, setPendingSlot] = useState<string | null>(null);
|
||||
|
||||
const [selectedCategory, setSelectedCategory] = useState('');
|
||||
const [notes, setNotes] = useState('');
|
||||
@@ -192,7 +193,12 @@ export default function ConsultingBooking() {
|
||||
}, [selectedDate, workhours, confirmedSlots, webinars, settings]);
|
||||
|
||||
// Helper: Get all slots between start and end (inclusive)
|
||||
// Now supports single slot selection where start = end
|
||||
const getSlotsInRange = useMemo(() => {
|
||||
// If there's a pending slot but no confirmed range, don't show any slots as selected
|
||||
if (pendingSlot && !selectedRange.start) return [];
|
||||
|
||||
// If only start is set (no end), don't show any slots as selected yet
|
||||
if (!selectedRange.start || !selectedRange.end) return [];
|
||||
|
||||
const startIndex = availableSlots.findIndex(s => s.start === selectedRange.start);
|
||||
@@ -203,65 +209,74 @@ export default function ConsultingBooking() {
|
||||
return availableSlots
|
||||
.slice(startIndex, endIndex + 1)
|
||||
.map(s => s.start);
|
||||
}, [selectedRange, availableSlots]);
|
||||
}, [selectedRange, availableSlots, pendingSlot]);
|
||||
|
||||
// NEW: Range selection handler
|
||||
// Range selection handler with pending slot UX
|
||||
const handleSlotClick = (slotStart: string) => {
|
||||
const slot = availableSlots.find(s => s.start === slotStart);
|
||||
if (!slot || !slot.available) return;
|
||||
|
||||
setSelectedRange(prev => {
|
||||
// CASE 1: No selection yet → Set start time
|
||||
if (!prev.start) {
|
||||
return { start: slotStart, end: null };
|
||||
}
|
||||
|
||||
// CASE 2: Only start selected → Set end time
|
||||
if (!prev.end) {
|
||||
if (slotStart === prev.start) {
|
||||
// Clicked same slot → Clear selection
|
||||
return { start: null, end: null };
|
||||
}
|
||||
// Ensure end is after start
|
||||
const startIndex = availableSlots.findIndex(s => s.start === prev.start);
|
||||
// If there's a pending slot
|
||||
if (pendingSlot) {
|
||||
if (slotStart === pendingSlot) {
|
||||
// Clicked same slot again → Confirm single slot selection
|
||||
setSelectedRange({ start: slotStart, end: slotStart });
|
||||
setPendingSlot(null);
|
||||
} else {
|
||||
// Clicked different slot → First becomes start, second becomes end
|
||||
const pendingIndex = availableSlots.findIndex(s => s.start === pendingSlot);
|
||||
const clickIndex = availableSlots.findIndex(s => s.start === slotStart);
|
||||
|
||||
if (clickIndex < startIndex) {
|
||||
// Clicked before start → Make new start, old start becomes end
|
||||
return { start: slotStart, end: prev.start };
|
||||
if (clickIndex < pendingIndex) {
|
||||
// Clicked before pending → Make clicked slot start, pending becomes end
|
||||
setSelectedRange({ start: slotStart, end: pendingSlot });
|
||||
} else {
|
||||
// Clicked after pending → Pending is start, clicked is end
|
||||
setSelectedRange({ start: pendingSlot, end: slotStart });
|
||||
}
|
||||
|
||||
return { start: prev.start, end: slotStart };
|
||||
setPendingSlot(null);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// CASE 3: Both selected (changing range)
|
||||
const startIndex = availableSlots.findIndex(s => s.start === prev.start);
|
||||
const endIndex = availableSlots.findIndex(s => s.start === prev.end);
|
||||
// No pending slot - check if we're modifying existing selection
|
||||
if (selectedRange.start && selectedRange.end) {
|
||||
const startIndex = availableSlots.findIndex(s => s.start === selectedRange.start);
|
||||
const endIndex = availableSlots.findIndex(s => s.start === selectedRange.end);
|
||||
const clickIndex = availableSlots.findIndex(s => s.start === slotStart);
|
||||
|
||||
// Clicked start time → Clear all
|
||||
if (slotStart === prev.start) {
|
||||
return { start: null, end: null };
|
||||
if (slotStart === selectedRange.start) {
|
||||
setSelectedRange({ start: null, end: null });
|
||||
return;
|
||||
}
|
||||
|
||||
// Clicked end time → Update end
|
||||
if (slotStart === prev.end) {
|
||||
return { start: prev.start, end: null };
|
||||
// Clicked end time → Remove end, keep start as pending
|
||||
if (slotStart === selectedRange.end) {
|
||||
setPendingSlot(selectedRange.start);
|
||||
setSelectedRange({ start: null, end: null });
|
||||
return;
|
||||
}
|
||||
|
||||
// Clicked before start → New start, old start becomes end
|
||||
if (clickIndex < startIndex) {
|
||||
return { start: slotStart, end: prev.start };
|
||||
setSelectedRange({ start: slotStart, end: selectedRange.start });
|
||||
return;
|
||||
}
|
||||
|
||||
// Clicked after end → New end
|
||||
if (clickIndex > endIndex) {
|
||||
return { start: prev.start, end: slotStart };
|
||||
setSelectedRange({ start: selectedRange.start, end: slotStart });
|
||||
return;
|
||||
}
|
||||
|
||||
// Clicked within range → Update end to clicked slot
|
||||
return { start: prev.start, end: slotStart };
|
||||
});
|
||||
setSelectedRange({ start: selectedRange.start, end: slotStart });
|
||||
return;
|
||||
}
|
||||
|
||||
// No selection at all → Set as pending
|
||||
setPendingSlot(slotStart);
|
||||
};
|
||||
|
||||
// Calculate total blocks from range
|
||||
@@ -447,7 +462,7 @@ export default function ConsultingBooking() {
|
||||
Slot Waktu - {format(selectedDate, 'EEEE, d MMMM yyyy', { locale: id })}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Klik slot awal dan akhir untuk memilih rentang waktu. {settings.consulting_block_duration_minutes} menit per blok.
|
||||
Klik satu slot untuk memilih, klik lagi untuk konfirmasi. Atau klik dua slot berbeda untuk rentang waktu. {settings.consulting_block_duration_minutes} menit per blok.
|
||||
{webinars.length > 0 && (
|
||||
<span className="block mt-1 text-amber-600 dark:text-amber-400">
|
||||
⚠️ {webinars.length} webinar terjadwal - beberapa slot mungkin tidak tersedia
|
||||
@@ -464,6 +479,7 @@ export default function ConsultingBooking() {
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-0">
|
||||
{availableSlots.map((slot, index) => {
|
||||
const isSelected = getSlotsInRange.includes(slot.start);
|
||||
const isPending = slot.start === pendingSlot;
|
||||
const isStart = slot.start === selectedRange.start;
|
||||
const isEnd = slot.start === selectedRange.end;
|
||||
const isMiddle = isSelected && !isStart && !isEnd;
|
||||
@@ -475,6 +491,11 @@ export default function ConsultingBooking() {
|
||||
// Determine border radius for seamless connection
|
||||
let className = "border-2 h-10";
|
||||
|
||||
// Add special styling for pending slot
|
||||
if (isPending) {
|
||||
className += " bg-amber-500 hover:bg-amber-600 text-white border-amber-600";
|
||||
}
|
||||
|
||||
if (isStart) {
|
||||
// First selected slot - right side should connect
|
||||
className += index < availableSlots.length - 1 && availableSlots[index + 1]?.start === getSlotsInRange[1]
|
||||
@@ -491,14 +512,15 @@ export default function ConsultingBooking() {
|
||||
return (
|
||||
<Button
|
||||
key={slot.start}
|
||||
variant={variant}
|
||||
variant={isPending ? "default" : variant}
|
||||
disabled={!slot.available}
|
||||
onClick={() => slot.available && handleSlotClick(slot.start)}
|
||||
className={className}
|
||||
>
|
||||
{isStart && <span className="text-xs opacity-70">Mulai</span>}
|
||||
{!isStart && !isEnd && slot.start}
|
||||
{isEnd && <span className="text-xs opacity-70">Selesai</span>}
|
||||
{isPending && <span className="text-xs opacity-70">Pilih</span>}
|
||||
{isStart && !isPending && <span className="text-xs opacity-70">Mulai</span>}
|
||||
{!isPending && !isStart && !isEnd && slot.start}
|
||||
{isEnd && !isPending && <span className="text-xs opacity-70">Selesai</span>}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
@@ -610,6 +632,21 @@ export default function ConsultingBooking() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pendingSlot && !selectedRange.start && (
|
||||
<div className="pt-4 border-t">
|
||||
<p className="text-sm text-muted-foreground mb-2">Slot dipilih:</p>
|
||||
|
||||
{/* Show pending slot */}
|
||||
<div className="bg-amber-500/10 p-3 rounded-lg border-2 border-amber-500/20">
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-muted-foreground">Klik lagi untuk konfirmasi, atau pilih slot lain</p>
|
||||
<p className="font-bold text-lg text-amber-600">{pendingSlot}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">1 blok = {settings.consulting_block_duration_minutes} menit ({formatIDR(settings.consulting_block_price)})</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-4 border-t">
|
||||
<div className="flex justify-between text-lg font-bold">
|
||||
<span>Total</span>
|
||||
|
||||
Reference in New Issue
Block a user