@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/dist/app/schedule/page.jsx

@@ -0,0 +1,500 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState, useEffect } from "react";
+import { Card } from "@/components/other/card";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { motion } from "framer-motion";
+import Schedule from "@/components/addOns/functional/schedules/SchedulerForm";
+import ScheduleGrid from "@/components/addOns/functional/schedules/ScheduleGridTwoBasic";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { SCHEDULE_PAGE } from "../../lib/constants/schedule";
+export default function SchedulePage() {
+    var _this = this;
+    var _a = useState({
+        Monday: [],
+        Tuesday: [],
+        Wednesday: [],
+        Thursday: [],
+        Friday: [],
+        Saturday: [],
+        Sunday: [],
+    }), schedule = _a[0], setSchedule = _a[1];
+    var _b = useState(false), isModalOpen = _b[0], setIsModalOpen = _b[1];
+    var _c = useState(false), isConfirmDeleteOpen = _c[0], setIsConfirmDeleteOpen = _c[1];
+    var _d = useState(null), classToDelete = _d[0], setClassToDelete = _d[1];
+    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
+    var _f = useState(null), error = _f[0], setError = _f[1];
+    var _g = useState({
+        name: "",
+        startTime: "",
+        endTime: "",
+        daysOfWeek: [],
+        classDescription: "",
+        id: null,
+        documentId: null,
+    }), formData = _g[0], setFormData = _g[1];
+    var _h = useStrapiAuth(), user = _h.user, authLoading = _h.authLoading, checkSession = _h.checkSession;
+    var getToken = useAuth().getToken;
+    var isSignedIn = useUser().isSignedIn;
+    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId) || false;
+    var numberToDayKey = {
+        1: "Monday",
+        2: "Tuesday",
+        3: "Wednesday",
+        4: "Thursday",
+        5: "Friday",
+        6: "Saturday",
+        7: "Sunday",
+    };
+    useEffect(function () {
+        window.scrollTo(0, 0);
+    }, []);
+    useEffect(function () {
+        var handleLogin = function () { return checkSession(); };
+        var handleLogout = function () { return checkSession(); };
+        window.addEventListener("user-login", handleLogin);
+        window.addEventListener("user-logout", handleLogout);
+        return function () {
+            window.removeEventListener("user-login", handleLogin);
+            window.removeEventListener("user-logout", handleLogout);
+        };
+    }, [checkSession]);
+    useEffect(function () {
+        var event = new CustomEvent("modalStateChange", {
+            detail: { isOpen: isModalOpen || isConfirmDeleteOpen },
+        });
+        window.dispatchEvent(event);
+    }, [isModalOpen, isConfirmDeleteOpen]);
+    useEffect(function () {
+        if (isModalOpen || isConfirmDeleteOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return function () {
+            document.body.style.overflow = "";
+        };
+    }, [isModalOpen, isConfirmDeleteOpen]);
+    var roundToNearestFiveMinutes = function (time) {
+        if (!time)
+            return "";
+        var _a = time.split(":").map(Number), hours = _a[0], minutes = _a[1];
+        var roundedMinutes = Math.round(minutes / 5) * 5;
+        var adjustedHours = hours + Math.floor(roundedMinutes / 60);
+        var finalMinutes = roundedMinutes % 60;
+        return "".concat(String(adjustedHours).padStart(2, "0"), ":").concat(String(finalMinutes).padStart(2, "0"));
+    };
+    var fetchEvents = function () { return __awaiter(_this, void 0, void 0, function () {
+        var response, errorData, result, fetchedClasses, updatedSchedule_1, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 5, 6, 7]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, fetch("/api/schedule", {
+                            headers: { "Content-Type": "application/json" },
+                            cache: "no-store",
+                        })];
+                case 1:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.FETCH_EVENTS_FAILED.replace("${response.status}", response.status.toString()));
+                case 3: return [4 /*yield*/, response.json()];
+                case 4:
+                    result = _a.sent();
+                    fetchedClasses = (result.data || []).map(function (event) { return ({
+                        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 || "",
+                    }); });
+                    updatedSchedule_1 = {
+                        Monday: [],
+                        Tuesday: [],
+                        Wednesday: [],
+                        Thursday: [],
+                        Friday: [],
+                        Saturday: [],
+                        Sunday: [],
+                    };
+                    fetchedClasses.forEach(function (cls) {
+                        cls.daysOfWeek.forEach(function (dayNum) {
+                            var dayKey = numberToDayKey[dayNum];
+                            if (dayKey && updatedSchedule_1[dayKey]) {
+                                updatedSchedule_1[dayKey].push({
+                                    name: cls.name,
+                                    startTime: cls.startTime,
+                                    endTime: cls.endTime,
+                                    id: cls.id,
+                                    documentId: cls.documentId,
+                                    daysOfWeek: cls.daysOfWeek,
+                                    classDescription: cls.classDescription,
+                                });
+                            }
+                        });
+                    });
+                    setSchedule(updatedSchedule_1);
+                    return [3 /*break*/, 7];
+                case 5:
+                    err_1 = _a.sent();
+                    setError(err_1 instanceof Error ? err_1.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
+                    return [3 /*break*/, 7];
+                case 6:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        fetchEvents();
+    }, []);
+    var openModal = function (cls, day) {
+        if (!isAdmin)
+            return;
+        setFormData({
+            name: (cls === null || cls === void 0 ? void 0 : cls.name) || "",
+            startTime: (cls === null || cls === void 0 ? void 0 : cls.startTime) || "",
+            endTime: (cls === null || cls === void 0 ? void 0 : cls.endTime) || "",
+            daysOfWeek: cls ? cls.daysOfWeek : [],
+            classDescription: (cls === null || cls === void 0 ? void 0 : cls.classDescription) || "",
+            id: (cls === null || cls === void 0 ? void 0 : cls.id) || null,
+            documentId: (cls === null || cls === void 0 ? void 0 : cls.documentId) || null,
+        });
+        setIsModalOpen(true);
+    };
+    var handleSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        var token, response, errorData, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!isAdmin) {
+                        setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_MODIFY);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, getToken()];
+                case 1:
+                    token = _a.sent();
+                    if (!token) {
+                        setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
+                        return [2 /*return*/];
+                    }
+                    setIsLoading(true);
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 7, 8, 9]);
+                    return [4 /*yield*/, fetch("/api/schedule", {
+                            method: formData.documentId ? "PUT" : "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: JSON.stringify({
+                                documentId: formData.documentId,
+                                data: {
+                                    title: formData.name,
+                                    startTime: formData.startTime,
+                                    endTime: formData.endTime,
+                                    daysOfWeek: formData.daysOfWeek,
+                                    classDescription: formData.classDescription || null,
+                                },
+                            }),
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.SUBMIT_CLASS_FAILED.replace("${formData.documentId ? 'update' : 'create'}", formData.documentId ? "update" : "create"));
+                case 5: return [4 /*yield*/, fetchEvents()];
+                case 6:
+                    _a.sent();
+                    setIsModalOpen(false);
+                    setFormData({ name: "", startTime: "", endTime: "", daysOfWeek: [], classDescription: "", id: null, documentId: null });
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_2 = _a.sent();
+                    setError(err_2 instanceof Error ? err_2.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var deleteClass = function (id, documentId, day) { return __awaiter(_this, void 0, void 0, function () {
+        var token, response, errorData, err_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isAdmin) {
+                        setError(SCHEDULE_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, getToken()];
+                case 1:
+                    token = _a.sent();
+                    if (!token) {
+                        setError(SCHEDULE_PAGE.ERRORS.NO_TOKEN_PROVIDED);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 7, 8, 9]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, fetch("/api/schedule", {
+                            method: "DELETE",
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: JSON.stringify({ documentId: documentId }),
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || SCHEDULE_PAGE.ERRORS.DELETE_CLASS_FAILED.replace("${response.status}", response.status.toString()));
+                case 5: return [4 /*yield*/, fetchEvents()];
+                case 6:
+                    _a.sent();
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_3 = _a.sent();
+                    setError(err_3 instanceof Error ? err_3.message : SCHEDULE_PAGE.ERRORS.UNKNOWN_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var openConfirmDelete = function (id, documentId, day) {
+        if (!isAdmin)
+            return;
+        setClassToDelete({ id: id, documentId: documentId, day: day });
+        setIsConfirmDeleteOpen(true);
+    };
+    var handleConfirmDelete = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!classToDelete) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteClass(classToDelete.id, classToDelete.documentId, classToDelete.day)];
+                case 1:
+                    _a.sent();
+                    setIsConfirmDeleteOpen(false);
+                    setClassToDelete(null);
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelDelete = function () {
+        setIsConfirmDeleteOpen(false);
+        setClassToDelete(null);
+    };
+    var formatTime = function (time) {
+        if (!time)
+            return "";
+        return new Date("2023-01-01 ".concat(time)).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+    };
+    var uniqueClassDescriptions = Array.from(new Map(Object.values(schedule)
+        .flat()
+        .filter(function (cls) { return cls.classDescription; })
+        .map(function (cls) { return [cls.name, { name: cls.name, desc: cls.classDescription }]; })).values());
+    var membershipPlans = [
+        {
+            name: SCHEDULE_PAGE.UI.MEMBERSHIP_1_NAME,
+            desc: SCHEDULE_PAGE.UI.MEMBERSHIP_1_DESC,
+            pricing: [
+                SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_1,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_2,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_1_PRICING_3,
+            ],
+        },
+        {
+            name: SCHEDULE_PAGE.UI.MEMBERSHIP_2_NAME,
+            desc: SCHEDULE_PAGE.UI.MEMBERSHIP_2_DESC,
+            pricing: [
+                SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_1,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_2,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_2_PRICING_3,
+            ],
+        },
+        {
+            name: SCHEDULE_PAGE.UI.MEMBERSHIP_3_NAME,
+            desc: SCHEDULE_PAGE.UI.MEMBERSHIP_3_DESC,
+            pricing: [
+                SCHEDULE_PAGE.UI.MEMBERSHIP_3_PRICING_1,
+            ],
+        },
+        {
+            name: SCHEDULE_PAGE.UI.MEMBERSHIP_4_NAME,
+            desc: SCHEDULE_PAGE.UI.MEMBERSHIP_4_DESC,
+            pricing: [
+                SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_1,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_2,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_4_PRICING_3,
+            ],
+        },
+        {
+            name: SCHEDULE_PAGE.UI.MEMBERSHIP_5_NAME,
+            desc: SCHEDULE_PAGE.UI.MEMBERSHIP_5_DESC,
+            pricing: [
+                SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_1,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_2,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_5_PRICING_3,
+            ],
+        },
+        {
+            name: SCHEDULE_PAGE.UI.MEMBERSHIP_6_NAME,
+            desc: SCHEDULE_PAGE.UI.MEMBERSHIP_6_DESC,
+            pricing: [
+                SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_1,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_2,
+                SCHEDULE_PAGE.UI.MEMBERSHIP_6_PRICING_3,
+            ],
+        },
+    ];
+    var modalVariants = {
+        hidden: { opacity: 0, y: "100vh" },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+        exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+    };
+    if (authLoading || isLoading) {
+        return <Spinner />;
+    }
+    return (<div className="min-h-screen w-full bg-[#F7F7F7] relative overflow-hidden flex flex-col">
+      <style jsx>{"\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap\");\n\n        :root {\n          --jubilee: #F47C7C;\n          --natural-white: #F7F7F7;\n          --caviar: #2D2D2D;\n          --storm-cloud: #4A636E;\n          --exuberant-blue: #C71585;\n          --modern-purple: #D946EF;\n        }\n\n        * {\n          font-family: \"Inter\", system-ui, sans-serif;\n          box-sizing: border-box;\n        }\n\n        .gradient-text {\n          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n        }\n\n        @media (max-width: 1024px) {\n          .container-padding {\n            padding-left: 1.5rem;\n            padding-right: 1.5rem;\n            padding-top: 4rem;\n            padding-bottom: 4rem;\n          }\n\n          .main-heading {\n            font-size: 2.75rem;\n            margin-bottom: 2.5rem;\n          }\n\n          .content-text {\n            font-size: 1.125rem;\n          }\n        }\n\n        @media (max-width: 640px) {\n          .container-padding {\n            padding-left: 0.75rem;\n            padding-right: 0.75rem;\n            padding-top: 3rem;\n            padding-bottom: 3rem;\n          }\n\n          .main-heading {\n            font-size: 2rem;\n          }\n\n          .section-heading {\n            font-size: 1.75rem;\n          }\n\n          .content-text {\n            font-size: 1rem;\n          }\n\n          .modal-form input,\n          .modal-form select,\n          .modal-form textarea {\n            font-size: 0.875rem;\n            padding: 0.75rem;\n            border-radius: 0.5rem;\n          }\n\n          .modal-form button {\n            padding: 0.75rem 1rem;\n            font-size: 0.875rem;\n            border-radius: 0.5rem;\n          }\n\n          .modal-form label {\n            font-size: 0.875rem;\n          }\n\n          .modal-form .flex {\n            flex-direction: column;\n            gap: 0.5rem;\n          }\n\n          .modal-form select {\n            appearance: none;\n            background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A1A1AA'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E\");\n            background-repeat: no-repeat;\n            background-position: right 0.75rem center;\n            background-size: 1rem;\n          }\n\n          .modal-form input[type=\"checkbox\"] {\n            height: 1.25rem;\n            width: 1.25rem;\n          }\n\n          .modal-form textarea {\n            min-height: 80px;\n          }\n        }\n\n        @media (max-width: 320px) {\n          .container-padding {\n            padding-left: 0.5rem;\n            padding-right: 0.5rem;\n          }\n\n          .modal-form input,\n          .modal-form select,\n          .modal-form textarea {\n            font-size: 0.75rem;\n            padding: 0.5rem;\n          }\n\n          .modal-form button {\n            padding: 0.5rem 0.75rem;\n            font-size: 0.75rem;\n          }\n\n          .modal-form label {\n            font-size: 0.75rem;\n          }\n        }\n      "}</style>
+
+      <div className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-[#8c94af]">
+        <motion.h1 initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32">
+          {SCHEDULE_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+
+        {/* Membership Rates */}
+        <div>
+          <h2 className="text-2xl sm:text-3xl lg:text-6xl text-white font-black mb-6 tracking-wide drop-shadow-md section-heading" style={{
+            textShadow: "\n                -1px -1px 0 #000,\n                1px -1px 0 #000,\n                -1px 1px 0 #000,\n                1px 1px 0 #000,\n                0 2px 4px rgba(0, 0, 0, 0.4)\n              ",
+        }}>
+            {SCHEDULE_PAGE.UI.MEMBERSHIP_HEADING}
+          </h2>
+
+          <div className="mb-16 overflow-hidden p-6 bg-white-950/10 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl" role="region" aria-label="Membership plans">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {membershipPlans.map(function (plan) { return (<div key={plan.name}>
+                  <Card className="bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md rounded-2xl p-6 flex flex-col min-h-[12rem] sm:min-h-[12rem]">
+                    <h3 className="text-xl sm:text-4xl font-bold mb-3 text-white drop-shadow-sm content-text" style={{
+                textShadow: "\n                          -1px -1px 0 #000,\n                          1px -1px 0 #000,\n                          -1px 1px 0 #000,\n                          1px 1px 0 #000,\n                          0 2px 4px rgba(0, 0, 0, 0.4)\n                        ",
+            }}>
+                      {plan.name}
+                    </h3>
+                    <p className="text-white font-medium mb-4 flex-shrink-0 content-text">{plan.desc}</p>
+                    <ul className="space-y-2 font-medium flex-1 overflow-auto text-white content-text">
+                      {plan.pricing.map(function (price, idx) { return (<li key={idx} className="text-sm">{price}</li>); })}
+                    </ul>
+                  </Card>
+                </div>); })}
+            </div>
+          </div>
+
+          {/* Footer Text */}
+          <div className="mt-6 text-center">
+            <p className="text-md">
+              <strong>{SCHEDULE_PAGE.UI.FAMILY_RATES_BOLD}</strong> {SCHEDULE_PAGE.UI.FAMILY_RATES_TEXT}
+            </p>
+            <p className="mt-2 text-md italic">
+              <strong>{SCHEDULE_PAGE.UI.NOTE_BOLD}</strong> {SCHEDULE_PAGE.UI.NOTE_TEXT}
+            </p>
+          </div>
+        </div>
+
+        {/* Class Schedule */}
+        <ScheduleGrid schedule={schedule} isAdmin={isAdmin} error={error} openModal={openModal} openConfirmDelete={openConfirmDelete} formatTime={formatTime}/>
+
+        {/* Class Descriptions */}
+        <h2 className="text-2xl sm:text-3xl lg:text-6xl text-white font-black mb-6 tracking-wide drop-shadow-md section-heading" style={{
+            textShadow: "\n              -1px -1px 0 #000,\n              1px -1px 0 #000,\n              -1px 1px 0 #000,\n              1px 1px 0 #000,\n              0 2px 4px rgba(0, 0, 0, 0.4)\n            ",
+        }}>
+          {SCHEDULE_PAGE.UI.CLASSES_HEADING}
+        </h2>
+
+        <div className="mb-16 overflow-hidden p-6 bg-white-950/10 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl" role="region" aria-label="Membership plans">
+          <div className="grid md:grid-cols-2 gap-6">
+            {uniqueClassDescriptions.length > 0 ? (uniqueClassDescriptions.map(function (cls) { return (<div key={cls.name}>
+                  <Card className="bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md rounded-2xl p-6 flex flex-col min-h-[12rem] sm:min-h-[12rem]">
+                    <h3 className="text-xl sm:text-4xl font-bold mb-3 text-white drop-shadow-sm content-text" style={{
+                textShadow: "\n                          -1px -1px 0 #000,\n                          1px -1px 0 #000,\n                          -1px 1px 0 #000,\n                          1px 1px 0 #000,\n                          0 2px 4px rgba(0, 0, 0, 0.4)\n                        ",
+            }}>
+                      {cls.name}
+                    </h3>
+                    <p className="text-white font-medium flex-1 overflow-hidden text-ellipsis content-text">{cls.desc}</p>
+                  </Card>
+                </div>); })) : (<p className="text-center text-white text-lg content-text">{SCHEDULE_PAGE.UI.NO_CLASS_DESCRIPTIONS}</p>)}
+          </div>
+        </div>
+
+        {/* Admin Status Feedback, matching AboutSection */}
+        <div className="mt-4 text-center">
+          {authLoading || isLoading ? (<Spinner />) : isAdmin ? (<p className="text-gray-600 text-sm font-medium">
+              {SCHEDULE_PAGE.UI.ADMIN_LOGGED_IN_MESSAGE}
+            </p>) : user ? (<p className="text-gray-400 text-sm font-medium">
+            </p>) : (<p className="text-gray-400 text-sm font-medium">
+            </p>)}
+        </div>
+
+        {/* Render Schedule Modals */}
+        <Schedule isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} isConfirmDeleteOpen={isConfirmDeleteOpen} setIsConfirmDeleteOpen={setIsConfirmDeleteOpen} classToDelete={classToDelete} setClassToDelete={setClassToDelete} isLoading={isLoading} error={error} formData={formData} setFormData={setFormData} isAdmin={isAdmin} handleSubmit={handleSubmit} handleConfirmDelete={handleConfirmDelete} handleCancelDelete={handleCancelDelete} roundToNearestFiveMinutes={roundToNearestFiveMinutes} modalVariants={modalVariants}/>
+      </div>
+    </div>);
+}