Skip to content

Commit

Permalink
made pricing toggle more responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@teetangh
teetangh committed Dec 12, 2024
1 parent 55e0a62 commit acaa3e4
Showing 1 changed file with 57 additions and 26 deletions.
83 changes: 57 additions & 26 deletions app/explore/experts/[consultantId]/components/PricingToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,21 @@ import {
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger
DialogTrigger,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { motion } from "framer-motion";
import { ClockIcon } from "lucide-react";
import { useSession } from "next-auth/react";
import { useMemo, useState } from "react";
import { PricingOption, defaultConsultationOptions, defaultSubscriptionOptions } from "../defaults";
import {
PricingOption,
defaultConsultationOptions,
defaultSubscriptionOptions,
} from "../defaults";
import { breakDownSlotsByDuration, formatTime } from "../utils";
import { TSlotTiming } from "@/types/slots";


interface PricingToggleProps {
consultationOptions?: PricingOption[];
subscriptionOptions?: PricingOption[];
Expand Down Expand Up @@ -69,19 +72,22 @@ export default function PricingToggle({
// Get the duration of the selected consultation option
const selectedDuration = useMemo(() => {
const option = consultationOptions.find(
opt => opt.title.toLowerCase().replace(" ", "-") === activeConsultationOption
(opt) =>
opt.title.toLowerCase().replace(" ", "-") === activeConsultationOption,
);
return option && option.duration ? parseInt(option.duration.split(" ")[0]) : 1;
return option && option.duration
? parseInt(option.duration.split(" ")[0])
: 1;
}, [activeConsultationOption, consultationOptions]);

// Sort and break down slot timings by duration
const availableSlots = useMemo(() => {
if (!selectedDate || !slotTimings.length) return [];

const selectedDay = selectedDate.getDay();

// First filter slots for the selected day
const daySlots = slotTimings.filter(slot => {
const daySlots = slotTimings.filter((slot) => {
const slotDate = new Date(slot.slotStartTimeInUTC);
return slotDate.getDay() === selectedDay;
});
Expand All @@ -100,7 +106,10 @@ export default function PricingToggle({
);
}

if (session?.user?.role && ["consultant", "staff"].includes(session.user.role.toLowerCase())) {
if (
session?.user?.role &&
["consultant", "staff"].includes(session.user.role.toLowerCase())
) {
return (
<div className="w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-900 to-black rounded-3xl shadow-2xl">
<div className="text-center text-gray-300 space-y-3">
Expand All @@ -123,19 +132,27 @@ export default function PricingToggle({
onValueChange={setActiveTab}
className="space-y-8"
>
<TabsList className="flex flex-wrap justify-center gap-4 bg-gray-800/50 rounded-full p-1 backdrop-blur-sm">
<TabsList className="inline-flex p-1.5 bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-gray-700/50 shadow-lg">
{consultationOptions.length > 0 && (
<TabsTrigger
value="consultation"
className={`${activeTab === "consultation" ? "bg-white text-black" : "text-white"} px-4 py-2 sm:px-6 sm:py-3 rounded-full transition-all duration-300 ease-in-out hover:bg-white/10`}
className={`${
activeTab === "consultation"
? "bg-white text-black shadow-sm"
: "text-gray-200 hover:text-white hover:bg-gray-700/50"
} px-6 py-2.5 rounded-xl font-medium transition-all duration-200 ease-out`}
>
Consultation
</TabsTrigger>
)}
{subscriptionOptions.length > 0 && (
<TabsTrigger
value="subscription"
className={`${activeTab === "subscription" ? "bg-white text-black" : "text-white"} px-4 py-2 sm:px-6 sm:py-3 rounded-full transition-all duration-300 ease-in-out hover:bg-white/10`}
className={`${
activeTab === "subscription"
? "bg-white text-black shadow-sm"
: "text-gray-200 hover:text-white hover:bg-gray-700/50"
} px-6 py-2.5 rounded-xl font-medium transition-all duration-200 ease-out`}
>
Subscription
</TabsTrigger>
Expand All @@ -149,12 +166,17 @@ export default function PricingToggle({
onValueChange={setActiveConsultationOption}
className="space-y-8"
>
<TabsList className="flex flex-wrap justify-center gap-4 bg-gray-800/50 rounded-full p-1 backdrop-blur-sm">
<TabsList className="inline-flex p-1 bg-gray-800/30 backdrop-blur-sm rounded-xl border border-gray-700/30 shadow-md">
{consultationOptions.map((option) => (
<TabsTrigger
key={option.title}
value={option.title.toLowerCase().replace(" ", "-")}
className={`${activeConsultationOption === option.title.toLowerCase().replace(" ", "-") ? "bg-white text-black" : "text-white"} px-4 py-2 sm:px-6 sm:py-3 rounded-full transition-all duration-300 ease-in-out hover:bg-white/10`}
className={`${
activeConsultationOption ===
option.title.toLowerCase().replace(" ", "-")
? "bg-white text-black shadow-sm"
: "text-gray-300 hover:text-white hover:bg-gray-700/30"
} px-5 py-2 rounded-lg font-medium transition-all duration-200 ease-out`}
>
{option.title}
</TabsTrigger>
Expand Down Expand Up @@ -205,16 +227,20 @@ export default function PricingToggle({
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] lg:max-w-[700px] bg-[#15171B] text-white p-0 border-0 rounded-lg">
<DialogHeader className="p-6 border-b border-gray-800">
<DialogTitle>Book {option.title} Consultation</DialogTitle>
<DialogTitle>
Book {option.title} Consultation
</DialogTitle>
<DialogDescription className="text-gray-400">
Select a date and time for your {option.duration} consultation
Select a date and time for your{" "}
{option.duration} consultation
</DialogDescription>
</DialogHeader>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
{/* Calendar Section */}
<div>
<h3 className="text-lg font-semibold mb-4 flex items-center">
<CalendarIcon className="mr-2 h-5 w-5" /> Select a Date
<CalendarIcon className="mr-2 h-5 w-5" />{" "}
Select a Date
</h3>
<div className="calendar-container bg-gray-800/60 p-4 rounded-lg">
<div className="flex justify-between items-center mb-4">
Expand Down Expand Up @@ -280,7 +306,8 @@ export default function PricingToggle({
{/* Time Slots Section */}
<div>
<h3 className="text-lg font-semibold mb-4 flex items-center">
<ClockIcon className="mr-2 h-5 w-5" /> Available {option.duration} Slots
<ClockIcon className="mr-2 h-5 w-5" />{" "}
Available {option.duration} Slots
</h3>
<div className="bg-gray-800/60 p-4 rounded-lg h-[400px] overflow-y-auto">
{availableSlots.length > 0 ? (
Expand All @@ -289,28 +316,28 @@ export default function PricingToggle({
<Button
key={`slot-${slot.slotId}`}
variant={
selectedSlot?.slotId ===
slot.slotId
selectedSlot?.slotId === slot.slotId
? "secondary"
: "outline"
}
onClick={() => setSelectedSlot(slot)}
className={`w-full justify-center text-sm py-3 ${
selectedSlot?.slotId ===
slot.slotId
selectedSlot?.slotId === slot.slotId
? "bg-gray-700 text-white border-gray-600"
: "bg-gray-800 text-white border-gray-700 hover:bg-gray-700/50"
}`}
>
{slot.localStartTime} - {slot.localEndTime}
{slot.localStartTime} -{" "}
{slot.localEndTime}
</Button>
))}
</div>
) : (
<div className="flex flex-col items-center justify-center h-full text-center">
<ClockIcon className="w-12 h-12 text-gray-500 mb-2" />
<p className="text-gray-400">
No available {option.duration} slots for this date.
No available {option.duration} slots for
this date.
<br />
Please select a different date.
</p>
Expand Down Expand Up @@ -356,12 +383,17 @@ export default function PricingToggle({
onValueChange={setActiveSubscriptionOption}
className="space-y-8"
>
<TabsList className="flex flex-wrap justify-center gap-4 bg-gray-800/50 rounded-full p-1 backdrop-blur-sm">
<TabsList className="inline-flex p-1 bg-gray-800/30 backdrop-blur-sm rounded-xl border border-gray-700/30 shadow-md">
{subscriptionOptions.map((option) => (
<TabsTrigger
key={option.title}
value={option.title.toLowerCase().replace(" ", "-")}
className={`${activeSubscriptionOption === option.title.toLowerCase().replace(" ", "-") ? "bg-white text-black" : "text-white"} px-4 py-2 sm:px-6 sm:py-3 rounded-full transition-all duration-300 ease-in-out hover:bg-white/10`}
className={`${
activeSubscriptionOption ===
option.title.toLowerCase().replace(" ", "-")
? "bg-white text-black shadow-sm"
: "text-gray-300 hover:text-white hover:bg-gray-700/30"
} px-5 py-2 rounded-lg font-medium transition-all duration-200 ease-out`}
>
{option.title.split(" ")[0]} {option.title.split(" ")[1]}
</TabsTrigger>
Expand Down Expand Up @@ -477,4 +509,3 @@ export default function PricingToggle({
</div>
);
}

0 comments on commit acaa3e4

Please sign in to comment.