@devvistatech/devvista-kit 0.0.1

package/components/addOns/functional/CalendlyWidget.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+interface CalendlyWidgetProps {
+  calendlyUrl?: string;
+  title?: string;
+  subtitle?: string;
+  mobileHeight?: string;
+  desktopHeight?: string;
+}
+
+const CalendlyWidget = ({
+  calendlyUrl = process.env.CALENDLY_URL || '',
+  title = 'Book Your Free Consultation',
+  subtitle = 'Powered by Calendly • Takes just a moment to book!',
+  mobileHeight = '800px',
+  desktopHeight = '950px',
+}: CalendlyWidgetProps) => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [calendlyLoaded, setCalendlyLoaded] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://assets.calendly.com/assets/external/widget.js';
+    script.async = true;
+    script.onload = () => setCalendlyLoaded(true);
+    script.onerror = () => console.warn('Calendly script failed to load');
+    document.body.appendChild(script);
+
+    return () => {
+      if (document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!process.env.CALENDLY_URL) {
+      console.warn('CALENDLY_URL is not set in environment variables. Using fallback URL.');
+    }
+  }, []);
+
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-gray-900 to-indigo-900 py-24 relative overflow-hidden">
+
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-0 left-0 w-72 h-72 bg-indigo-500/20 rounded-full mix-blend-overlay filter blur-3xl"></div>
+        <div className="absolute bottom-0 right-0 w-72 h-72 bg-purple-500/20 rounded-full mix-blend-overlay filter blur-3xl"></div>
+      </div>
+
+      <section className="container mx-auto px-4 relative z-10 pt-28">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="max-w-3xl mx-auto"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-center mb-12 text-white">
+            {title.split(' ').map((word, index) => (
+              word.toLowerCase() === 'free' ? (
+                <span key={index} className="text-indigo-400">{word} </span>
+              ) : (
+                `${word} `
+              )
+            ))}
+          </h2>
+          <div className="bg-white/10 backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden border border-white/20">
+            <div
+              className="calendly-inline-widget"
+              data-url={calendlyUrl}
+              style={{
+                minWidth: '320px',
+                height: isMobile ? mobileHeight : desktopHeight,
+              }}
+            />
+          </div>
+          <p className="text-center mt-6 text-gray-300 text-sm">{subtitle}</p>
+          {!calendlyLoaded && (
+            <div className="text-center mt-4 bg-white/10 backdrop-blur-md rounded-lg p-3 max-w-sm mx-auto">
+              <p className="text-red-400 text-sm">
+                Loading booking widget... If it doesn’t appear, check your ad blocker or contact support.
+              </p>
+            </div>
+          )}
+        </motion.div>
+      </section>
+    </main>
+  );
+};
+
+export default CalendlyWidget;

package/components/addOns/functional/ClassList.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/other/card";
+import { ScheduleClass, WeeklySchedule } from "@/components/types";
+
+interface ClassDescription {
+  name: string;
+  desc: string;
+}
+
+export default function ClassList() {
+  const [classDescriptions, setClassDescriptions] = useState<ClassDescription[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const numberToDayKey: { [key: number]: string } = {
+    1: "Monday",
+    2: "Tuesday",
+    3: "Wednesday",
+    4: "Thursday",
+    5: "Friday",
+    6: "Saturday",
+    7: "Sunday",
+  };
+
+  const roundToNearestFiveMinutes = (time: string): string => {
+    if (!time) return "";
+    const [hours, minutes] = time.split(":").map(Number);
+    const roundedMinutes = Math.round(minutes / 5) * 5;
+    const adjustedHours = hours + Math.floor(roundedMinutes / 60);
+    const finalMinutes = roundedMinutes % 60;
+    return `${String(adjustedHours).padStart(2, "0")}:${String(finalMinutes).padStart(2, "0")}`;
+  };
+
+  const fetchEvents = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const response = await fetch("/api/schedule", {
+        headers: { "Content-Type": "application/json" },
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || `Failed to fetch events: ${response.status}`);
+      }
+
+      const result = await response.json();
+      const fetchedClasses = (result.data || []).map((event: any) => ({
+        id: event.id,
+        documentId: event.documentId,
+        name: event.title || "Untitled",
+        startTime: roundToNearestFiveMinutes(event.startTime || "00:00"),
+        endTime: roundToNearestFiveMinutes(event.endTime || "00:00"),
+        daysOfWeek: event.daysOfWeek || [],
+        classDescription: event.classDescription || "",
+      }));
+
+      const updatedSchedule: WeeklySchedule = {
+        Monday: [],
+        Tuesday: [],
+        Wednesday: [],
+        Thursday: [],
+        Friday: [],
+        Saturday: [],
+        Sunday: [],
+      };
+      fetchedClasses.forEach((cls: ScheduleClass) => {
+        cls.daysOfWeek.forEach((dayNum: number) => {
+          const dayKey = numberToDayKey[dayNum];
+          if (dayKey && updatedSchedule[dayKey]) {
+            updatedSchedule[dayKey].push({
+              name: cls.name,
+              startTime: cls.startTime,
+              endTime: cls.endTime,
+              id: cls.id,
+              documentId: cls.documentId,
+              daysOfWeek: cls.daysOfWeek,
+              classDescription: cls.classDescription,
+            });
+          }
+        });
+      });
+
+      const uniqueClassDescriptions: ClassDescription[] = Array.from(
+        new Map(
+          Object.values(updatedSchedule)
+            .flat()
+            .filter((cls): cls is ScheduleClass & { classDescription: string } =>
+              typeof cls.classDescription === "string" && cls.classDescription.length > 0
+            )
+            .map((cls) => [cls.name, { name: cls.name, desc: cls.classDescription }])
+        ).values()
+      );
+
+      setClassDescriptions(uniqueClassDescriptions);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClassClick = (className: string) => {
+    router.push("/schedule");
+  };
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  return (
+    <Card className="w-full max-w-xs min-h-[300px] rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-lg font-bold text-white">Our Services</CardTitle>
+      </CardHeader>
+      <CardContent className="p-6">
+        {isLoading ? (
+          <p className="text-gray-400 font-medium text-sm">Loading classes...</p>
+        ) : error ? (
+          <p className="text-red-400 font-medium text-sm">{error}</p>
+        ) : classDescriptions.length > 0 ? (
+          <ul className="space-y-4">
+            {classDescriptions.map((cls) => (
+              <li
+                key={cls.name}
+                className="text-gray-200 hover:text-blue-400 transition-colors cursor-pointer"
+                onClick={() => handleClassClick(cls.name)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === "Enter" && handleClassClick(cls.name)}
+              >
+                <span className="font-medium text-blue-300">{cls.name}</span>
+                <div className="text-sm text-white">{cls.desc}</div>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-gray-400 font-medium text-sm">No classes available.</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/components/addOns/functional/ClassPopup.tsx

@@ -0,0 +1,399 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { CancelButton, NextButton, SubmitButton } from '@/components/other/button'; 
+import { Input } from '@/components/other/input';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/other/dialog';
+import { Label } from '@/components/other/label';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useToast } from '@/hooks/use-toast';
+import { User, Mail, Phone, Loader2 } from 'lucide-react';
+
+interface ClassDetails {
+  id: string;
+  title: string;
+  time: string;
+  day: string;
+  ageGroup: string;
+}
+
+interface ClassPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  classDetails: ClassDetails | null;
+}
+
+interface FormData {
+  name: string;
+  phone: string;
+  email: string;
+  information: string;
+  date: string;
+}
+
+const formSchema = z.object({
+  name: z
+    .string()
+    .min(2, 'Name must be at least 2 characters')
+    .max(50, 'Name cannot exceed 50 characters')
+    .regex(/^[a-zA-Z\s-]+$/, 'Name can only contain letters, spaces, or hyphens'),
+  email: z
+    .string()
+    .email('Invalid email address')
+    .max(100, 'Email cannot exceed 100 characters'),
+  phone: z
+    .string()
+    .regex(
+      /^(\+?1\s?)?(\(?\d{3}\)?)[-.\s]?\d{3}[-.\s]?\d{4}$/,
+      'Please enter a valid phone number (e.g., 123-456-7890)'
+    )
+    .max(14, 'Phone number cannot exceed 14 characters')
+    .transform((val) => val.replace(/[-.\s()]/g, '').replace(/^1/, '')),
+  information: z.string().optional(),
+  date: z.string().optional(),
+});
+
+export const ClassPopup: React.FC<ClassPopupProps> = ({ isOpen, onClose, classDetails }) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const { toast } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    trigger,
+    clearErrors,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    mode: 'onBlur',
+    defaultValues: {
+      information: '',
+      name: '',
+      phone: '',
+      email: '',
+      date: '',
+    },
+  });
+
+  const formValues = watch();
+
+  useEffect(() => {
+    const event = new CustomEvent('modalStateChange', {
+      detail: { isOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isOpen]);
+
+  const formatClassDetails = (details: ClassDetails): string => {
+    return `${details.title} on ${details.day} at ${details.time} for ${details.ageGroup}`;
+  };
+
+  useEffect(() => {
+    if (classDetails) {
+      setValue('information', formatClassDetails(classDetails), { shouldValidate: false });
+      setValue('date', new Date().toISOString(), { shouldValidate: false });
+    } else {
+      setValue('information', '', {});
+      setValue('date', '', {});
+    }
+    clearErrors();
+  }, [classDetails, setValue, clearErrors]);
+
+  useEffect(() => {
+    clearErrors();
+  }, [currentStep, clearErrors]);
+
+  const validateStep = async () => {
+    const stepFields = steps[currentStep].fields;
+    const isValid = await trigger(stepFields as any, { shouldFocus: true });
+    if (!isValid && stepFields.some((field) => dirtyFields[field as keyof FormData])) {
+      toast({
+        title: 'Validation Error',
+        description: 'Please complete all required fields correctly.',
+        duration: 3000,
+        variant: 'destructive',
+      });
+    }
+    return isValid;
+  };
+
+  const nextStep = async () => {
+    const isValid = await validateStep();
+    if (isValid || currentStep === 0) {
+      setCurrentStep(currentStep + 1);
+      clearErrors();
+    }
+  };
+
+  const previousStep = () => {
+    setCurrentStep(currentStep - 1);
+    clearErrors();
+  };
+
+  const onFormSubmit = async (data: FormData) => {
+    try {
+      const response = await fetch('/api/trial-request', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        const errorMessage =
+          result.error?.message || result.error || 'Unable to submit request at this time';
+        throw new Error(errorMessage);
+      }
+
+      toast({
+        title: 'Success',
+        description: 'Trial request submitted successfully!',
+        duration: 3000,
+        variant: 'success',
+      });
+      reset();
+      setCurrentStep(0);
+      onClose();
+    } catch (error: any) {
+      console.error('Trial form submission error:', error);
+      toast({
+        title: 'Error',
+        description: error.message || 'Unable to submit request at this time',
+        duration: 3000,
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  const steps = [
+    {
+      title: 'Class Details',
+      fields: ['information'],
+      content: (
+        <div className="space-y-6">
+          {classDetails && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2, duration: 0.3 }}
+              className="mb-4 bg-gray-700/30 rounded-xl p-3 sm:p-4"
+            >
+              <h3 className="text-base sm:text-lg font-semibold text-white mb-2">
+                Would you like to try this class?
+              </h3>
+              <div className="text-xs sm:text-sm text-gray-300 space-y-0.5 sm:space-y-1">
+                <p className="flex items-center">
+                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Class: </span>
+                  <span className="font-medium">{classDetails.title || 'Untitled'}</span>
+                </p>
+                <p className="flex items-center">
+                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Day: </span>
+                  <span className="font-medium">{classDetails.day || 'TBD'}</span>
+                </p>
+                <p className="flex items-center">
+                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Time: </span>
+                  <span className="font-medium">{classDetails.time || 'TBD'}</span>
+                </p>
+                <p className="flex items-center">
+                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Age Group: </span>
+                  <span className="font-medium">{classDetails.ageGroup || 'All Ages'}</span>
+                </p>
+              </div>
+            </motion.div>
+          )}
+        </div>
+      ),
+    },
+    {
+      title: 'Personal Information',
+      fields: ['name', 'phone', 'email'],
+      content: (
+        <div className="space-y-6">
+          <div>
+            <Label htmlFor="name" className="text-xs sm:text-sm font-medium text-gray-200 block mb-2">
+              Name
+            </Label>
+            <div className="relative">
+              <User
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5"
+                aria-hidden="true"
+              />
+              <Input
+                {...register('name')}
+                value={formValues.name}
+                onChange={(e) => setValue('name', e.target.value)}
+                onBlur={() => trigger('name')}
+                placeholder="Enter your full name"
+                maxLength={50}
+                className={`pl-12 bg-gray-700/50 border-gray-600/50 text-white placeholder-gray-400 text-base h-10 sm:h-11 focus:ring-2 focus:ring-blue-600 rounded-lg ${
+                  errors.name && dirtyFields.name ? 'border-red-500 focus:ring-red-300' : ''
+                }`}
+                aria-invalid={!!errors.name && !!dirtyFields.name}
+                aria-describedby={errors.name && dirtyFields.name ? 'name-error' : undefined}
+              />
+            </div>
+            {errors.name && dirtyFields.name && (
+              <p id="name-error" className="text-[10px] sm:text-xs text-red-400 mt-1">
+                {errors.name.message}
+              </p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="phone" className="text-xs sm:text-sm font-medium text-gray-200 block mb-2">
+              Phone Number
+            </Label>
+            <div className="relative">
+              <Phone
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5"
+                aria-hidden="true"
+              />
+              <Input
+                {...register('phone')}
+                type="tel"
+                value={formValues.phone}
+                onChange={(e) => setValue('phone', e.target.value)}
+                onBlur={() => trigger('phone')}
+                placeholder="+1 (123) 456-7890"
+                maxLength={14}
+                className={`pl-12 bg-gray-700/50 border-gray-600/50 text-white placeholder-gray-400 text-base h-10 sm:h-11 focus:ring-2 focus:ring-blue-600 rounded-lg ${
+                  errors.phone && dirtyFields.phone ? 'border-red-500 focus:ring-red-300' : ''
+                }`}
+                aria-invalid={!!errors.phone && !!dirtyFields.phone}
+                aria-describedby={errors.phone && dirtyFields.phone ? 'phone-error' : undefined}
+              />
+            </div>
+            {errors.phone && dirtyFields.phone && (
+              <p id="phone-error" className="text-[10px] sm:text-xs text-red-400 mt-1">
+                {errors.phone.message}
+              </p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="email" className="text-xs sm:text-sm font-medium text-gray-200 block mb-2">
+              Email
+            </Label>
+            <div className="relative">
+              <Mail
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5"
+                aria-hidden="true"
+              />
+              <Input
+                {...register('email')}
+                type="email"
+                value={formValues.email}
+                onChange={(e) => setValue('email', e.target.value)}
+                onBlur={() => trigger('email')}
+                placeholder="you@example.com"
+                maxLength={100}
+                className={`pl-12 bg-gray-700/50 border-gray-600/50 text-white placeholder-gray-400 text-base h-10 sm:h-11 focus:ring-2 focus:ring-blue-600 rounded-lg ${
+                  errors.email && dirtyFields.email ? 'border-red-500 focus:ring-red-300' : ''
+                }`}
+                aria-invalid={!!errors.email && !!dirtyFields.email}
+                aria-describedby={errors.email && dirtyFields.email ? 'email-error' : undefined}
+              />
+            </div>
+            {errors.email && dirtyFields.email && (
+              <p id="email-error" className="text-[10px] sm:text-xs text-red-400 mt-1">
+                {errors.email.message}
+              </p>
+            )}
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        className="w-[90vw] max-w-[400px] sm:max-w-[450px] bg-gradient-to-b from-gray-800 to-gray-900 text-white rounded-2xl shadow-2xl border border-gray-700/50 p-0 overflow-hidden max-h-[90vh] flex flex-col"
+        aria-describedby="class-registration-dialog"
+      >
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+              className="flex flex-col flex-grow overflow-y-auto"
+            >
+              <DialogHeader className="p-4 sm:p-5 border-b border-gray-700/50">
+                <DialogTitle className="text-lg sm:text-xl font-bold text-white tracking-tight pb-4">
+                  Get More Info and Try The Class
+                </DialogTitle>
+                <div className="flex justify-center space-x-2 mt-2">
+                  {steps.map((_, index) => (
+                    <div
+                      key={index}
+                      className={`w-3 h-3 rounded-full ${
+                        index === currentStep
+                          ? 'bg-blue-600'
+                          : index < currentStep
+                          ? 'bg-green-500'
+                          : 'bg-gray-600'
+                      }`}
+                      aria-current={index === currentStep ? 'step' : undefined}
+                    />
+                  ))}
+                </div>
+              </DialogHeader>
+              <form
+                id="class-registration-form"
+                onSubmit={handleSubmit(onFormSubmit)}
+                className="p-4 sm:p-5 flex-grow overflow-y-auto"
+              >
+                {steps[currentStep].content}
+                <DialogFooter className="pt-4 sm:pt-5 border-t border-gray-700/50 flex justify-between gap-2 sm:gap-3 sticky bottom-0 bg-gray-900/90 pb-4 sm:pb-5">
+                  <CancelButton
+                    type="button"
+                    size="sm"
+                    onClick={currentStep === 0 ? onClose : previousStep}
+                    disabled={isSubmitting}
+                    aria-label={currentStep === 0 ? 'Cancel' : 'Previous step'}
+                  >
+                    {currentStep === 0 ? 'Cancel' : 'Previous'}
+                  </CancelButton>
+                  {currentStep === steps.length - 1 ? (
+                    <SubmitButton
+                      type="submit"
+                      size="sm"
+                      disabled={isSubmitting}
+                      aria-label="Submit form"
+                    >
+                      {isSubmitting ? (
+                        <>
+                          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                          Submitting...
+                        </>
+                      ) : (
+                        'Submit'
+                      )}
+                    </SubmitButton>
+                  ) : (
+                    <NextButton
+                      type="button"
+                      size="sm"
+                      onClick={nextStep}
+                      disabled={isSubmitting}
+                      aria-label="Next step"
+                    >
+                      Next
+                    </NextButton>
+                  )}
+                </DialogFooter>
+              </form>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </DialogContent>
+    </Dialog>
+  );
+};