-
- 
-
-
-
+
+
+ {hourlyRateLabel ? {hourlyRateLabel} : null}
+
- {(about || locations.length > 0) && (
- {name}
- {status &&
+ })
+
- {hourlyRate &&
+
+
- {rating && (
- {coachName}
+ {resolveRating(coach) ? ( + +
-
- )}
- {location && (
-
-
- )}
- {distance && {distance}
}
+
+
{hourlyRate}
}
-
- {about && ;
+ const requestDate = record.requested_at || record.request_date || record.created_at || record.createdAt || null;
+ const requestLabel = requestDate ? moment(requestDate).format("MMM D, YYYY") : "Recently requested";
+ const avatar = resolveAvatar(coach);
+
+ return (
+
+
+ );
+};
+
+const buildQueryParams = (search: string) => ({
search: search.trim(),
- location: location.trim(),
});
const MyCoachesPage = () => {
+ const { user } = useAuth();
+ const playerToken =
+ user?.session?.access_token ?? user?.access_token ?? user?.token ?? null;
const [coaches, setCoaches] = useState([]);
const [search, setSearch] = useState("");
- const [location, setLocation] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const debouncedSearch = useDebouncedValue(search, 300);
- const debouncedLocation = useDebouncedValue(location, 300);
-
- const hasFilters = useMemo(
- () => Boolean(debouncedSearch.trim() || debouncedLocation.trim()),
- [debouncedLocation, debouncedSearch],
- );
const fetchCoaches = useCallback(async () => {
setLoading(true);
@@ -242,7 +630,7 @@ const MyCoachesPage = () => {
const data = await getPlayerCoaches({
perPage: 25,
page: 1,
- ...buildQueryParams(debouncedSearch, debouncedLocation),
+ ...buildQueryParams(debouncedSearch),
});
setCoaches(data);
} catch (err) {
@@ -252,85 +640,131 @@ const MyCoachesPage = () => {
} finally {
setLoading(false);
}
- }, [debouncedLocation, debouncedSearch]);
+ }, [debouncedSearch]);
useEffect(() => {
fetchCoaches();
}, [fetchCoaches]);
- const showEmpty = !loading && !error && coaches.length === 0;
+ const confirmedCoaches = useMemo(
+ () => coaches.filter((coach) => !isPendingCoach(coach)),
+ [coaches],
+ );
+ const pendingCoaches = useMemo(
+ () => coaches.filter((coach) => isPendingCoach(coach)),
+ [coaches],
+ );
+
+ const filteredConfirmed = useMemo(() => {
+ const query = debouncedSearch.trim().toLowerCase();
+ if (!query) return confirmedCoaches;
+ return confirmedCoaches.filter((coach) => resolveName(coach).toLowerCase().includes(query));
+ }, [confirmedCoaches, debouncedSearch]);
+
+ const showEmpty = !loading && !error && confirmedCoaches.length === 0 && pendingCoaches.length === 0;
return (
{about}
} - {locations.length > 0 && ( -
- {locations.map((loc) => (
-
- {loc}
-
- ))}
-
- )}
+ {upcomingLesson ? (
+
+
- )}
+ ) : null}
-
- {coachId && (
-
- View profile
+
+
+
+ {groupClasses.length ? (
+
+
+
+ ) : null}
+
+ {error ?
+
+
+
+ {hourlyRateLabel ? {hourlyRateLabel} : null}
+ Private lessons
+ Select a time to book quickly.
+
+ {loadingSlots && !privateSlots.length ? (
+
+
+ All times
+
+ ) : null}
+ {privateSlots.slice(0, PRIVATE_SLOT_LIMIT).map((slot) => {
+ const isSelected = selection?.type === "private" && selection.slot.id === slot.id;
+ return (
+
+ );
+ })}
+ {!loadingSlots && !privateSlots.length ? (
+ No upcoming private slots in the next two weeks.
+ ) : null} +
+
+
+
+ Group classes
+ Join a class with available spots.
+
+ {groupClasses.map((lesson) => {
+ const isSelected = selection?.type === "group" && selection.lesson.id === lesson.id;
+ return (
+
+ );
+ })}
+
+
+ All classes {error}
: null} + + ); }; -const buildQueryParams = (search: string, location: string) => ({ +const PendingCoachRow = ({ coach }: { coach: PlayerCoach }) => { + const initials = resolveName(coach).slice(0, 2).toUpperCase(); + const record = coach as Record
+
+
+ {avatar ? : {initials}}
+
+
+
+ {resolveName(coach)}
+Awaiting approval · Requested {requestLabel}
+
+
+
+
+
-
-
+
+
+
+ {upcomingLesson ? (
+
+
+
+ {groupClasses.length ? (
+
+
+ ) : null}
+
+ {error ?
+ );
+};
+
const PlayerCoachListPage = () => {
const { user } = useAuth();
const playerToken =
user?.session?.access_token ?? user?.access_token ?? user?.token ?? null;
- const [activeTab, setActiveTab] = useState("all");
+ const [activeTab, setActiveTab] = useState("my");
const [allCoachPlayers, setAllCoachPlayers] = useState([]);
const [addedCoachPlayers, setAddedCoachPlayers] = useState([]);
const [allCoachesPage, setAllCoachesPage] = useState(1);
@@ -1930,13 +2375,27 @@ const PlayerCoachListPage = () => {
const isActiveLoading = activeTab === "all" ? allMiniLoader : addedMiniLoader;
const activeListEnd = activeTab === "all" ? isAllCoachesListEnd : isMyCoachesListEnd;
const activeSentinelRef = activeTab === "all" ? allListSentinelRef : myListSentinelRef;
+ const pendingCoaches = useMemo(
+ () => addedCoachPlayers.filter((coach) => normalizeRosterStatus(coach) === "pending"),
+ [addedCoachPlayers],
+ );
+ const confirmedMyCoaches = useMemo(
+ () => addedCoachPlayers.filter((coach) => normalizeRosterStatus(coach) !== "pending"),
+ [addedCoachPlayers],
+ );
const featuredCoaches = activeTab === "all" ? activeList.slice(0, 2) : [];
- const remainingCoaches = activeTab === "all" ? activeList.slice(2) : activeList;
+ const remainingCoaches = activeTab === "all" ? activeList.slice(2) : confirmedMyCoaches;
const resultsHeading = activeTab === "all" ? "All Coaches" : "My Coaches";
const resultsDescription =
activeTab === "all"
? "Browse certified coaches tailored to your goals."
- : "Coaches you have already connected with.";
+ : "Book time with coaches you already work with—no discovery required.";
+ const heroTitle =
+ activeTab === "my" ? "Book your next lesson in seconds" : "Find Your Perfect Coach";
+ const heroSubtitle =
+ activeTab === "my"
+ ? "See real availability, pick a time, and confirm without leaving this page."
+ : "Get matched with certified tennis professionals in your area.";
const showInitialLoader = isActiveLoading && !activeList.length;
const showEmptyState = !isActiveLoading && !activeList.length;
@@ -2030,174 +2489,259 @@ const PlayerCoachListPage = () => {
return (
-
);
diff --git a/src/pages/PlayerCoachListPage.css b/src/pages/PlayerCoachListPage.css
index 2c72ef5b..1458ff20 100644
--- a/src/pages/PlayerCoachListPage.css
+++ b/src/pages/PlayerCoachListPage.css
@@ -26,6 +26,92 @@
overflow: hidden;
}
+.my-booking-hero {
+ position: relative;
+ display: grid;
+ gap: 20px;
+ grid-template-columns: 1fr;
+ padding: 32px 28px;
+ border-radius: 28px;
+ background: linear-gradient(120deg, #ede9fe 0%, #e0f2fe 45%, #f0fdf4 100%);
+ border: 1px solid #e5e7eb;
+ box-shadow: 0 18px 36px rgba(0, 0, 0, 0.06);
+}
+
+@media (min-width: 960px) {
+ .my-booking-hero {
+ grid-template-columns: 2fr 1fr;
+ align-items: stretch;
+ padding: 40px 44px;
+ }
+}
+
+.my-booking-hero__content {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.my-booking-hero__chips {
+ display: inline-flex;
+ gap: 10px;
+ padding: 6px;
+ background: rgba(91, 95, 199, 0.08);
+ border-radius: 999px;
+ width: fit-content;
+}
+
+.my-booking-hero__meta {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 14px;
+ padding: 14px;
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.75);
+ border: 1px solid #e5e7eb;
+}
+
+.my-booking-hero__meta .label {
+ margin: 0 0 6px;
+ font-size: 12px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: #6b7280;
+}
+
+.my-booking-hero__meta-value {
+ margin: 0;
+ font-size: 26px;
+ font-weight: 700;
+ color: #5b5fc7;
+}
+
+.my-booking-hero__cta {
+ align-self: stretch;
+ padding: 18px;
+ border-radius: 20px;
+ background: #0f172a;
+ color: #f8fafc;
+ display: grid;
+ gap: 10px;
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
+}
+
+.my-booking-hero__badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: fit-content;
+ padding: 6px 10px;
+ border-radius: 10px;
+ background: #5b5fc7;
+ color: #ffffff;
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+
@media (min-width: 1024px) {
.coach-hero {
flex-direction: row;
@@ -157,6 +243,36 @@
gap: 16px;
}
+.my-booking-toolbar {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 16px;
+ border-radius: 16px;
+ background: #ffffff;
+ border: 1px solid #e5e7eb;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+}
+
+.my-booking-toolbar__controls {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+ .my-booking-toolbar__controls {
+ grid-template-columns: minmax(260px, 1fr) auto;
+ align-items: center;
+ }
+}
+
+.my-booking-toolbar__hint {
+ margin: 0;
+ color: #6b7280;
+ font-size: 14px;
+}
+
.coach-controls-bar {
display: grid;
gap: 12px;
@@ -1136,3 +1252,397 @@
padding: 20px;
}
}
+
+.my-coaches-grid {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+}
+
+.my-coach-card {
+ background: #ffffff;
+ border: 1px solid #e5e7eb;
+ border-radius: 14px;
+ padding: 18px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.my-coach-card__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+}
+
+.my-coach-card__identity {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.my-coach-card__avatar {
+ width: 52px;
+ height: 52px;
+ border-radius: 50%;
+ background: #eef2ff;
+ display: grid;
+ place-items: center;
+ font-weight: 700;
+ color: #4b5563;
+ overflow: hidden;
+}
+
+.my-coach-card__avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.my-coach-card__eyebrow {
+ font-size: 12px;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: #6b7280;
+ margin: 0;
+}
+
+.my-coach-card__name {
+ margin: 2px 0 4px;
+ font-size: 18px;
+ font-weight: 700;
+ color: #1f2937;
+}
+
+.my-coach-card__location {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ color: #4b5563;
+}
+
+.my-coach-card__rate {
+ background: #eef2ff;
+ color: #4338ca;
+ padding: 8px 12px;
+ border-radius: 8px;
+ font-weight: 700;
+ font-size: 13px;
+}
+
+.my-coach-card__banner {
+ border-radius: 12px;
+ padding: 10px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.my-coach-card__banner.private {
+ background: #f5f3ff;
+ color: #4338ca;
+}
+
+.my-coach-card__banner.group {
+ background: #ecfdf3;
+ color: #047857;
+}
+
+.my-coach-card__banner-label {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+}
+
+.my-coach-card__banner-content {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-weight: 600;
+}
+
+.my-coach-card__pill {
+ background: rgba(91, 95, 199, 0.12);
+ color: #1f2937;
+ padding: 4px 8px;
+ border-radius: 8px;
+ font-size: 12px;
+}
+
+.my-coach-card__section {
+ border: 1px solid #e5e7eb;
+ border-radius: 12px;
+ padding: 12px;
+ background: #f9fafb;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.my-coach-card__section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+}
+
+.my-coach-card__section-header.group {
+ border-bottom: 1px solid #e5e7eb;
+ padding-bottom: 6px;
+}
+
+.my-coach-card__section-title .label {
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: #6b7280;
+ margin-bottom: 4px;
+}
+
+.my-coach-card__section-title p {
+ margin: 0;
+ color: #4b5563;
+ font-size: 14px;
+}
+
+.my-coach-card__badge {
+ background: #5b5fc7;
+ color: #ffffff;
+ padding: 6px 10px;
+ border-radius: 8px;
+ font-weight: 700;
+ font-size: 12px;
+}
+
+.my-coach-card__slots {
+ display: grid;
+ gap: 8px;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+}
+
+.my-coach-card__slot {
+ border: 1px solid #d1d5db;
+ border-radius: 10px;
+ padding: 10px;
+ background: #ffffff;
+ text-align: left;
+ cursor: pointer;
+ transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
+}
+
+.my-coach-card__slot:hover {
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+ transform: translateY(-2px);
+}
+
+.my-coach-card__slot.selected {
+ border-color: #5b5fc7;
+ background: #eef2ff;
+}
+
+.my-coach-card__slot-day {
+ font-size: 12px;
+ color: #6b7280;
+}
+
+.my-coach-card__slot-time {
+ font-weight: 700;
+ color: #1f2937;
+}
+
+.my-coach-card__muted {
+ color: #6b7280;
+ font-size: 14px;
+ margin: 4px 0 0;
+}
+
+.my-coach-card__loading {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: #4b5563;
+ font-size: 14px;
+}
+
+.my-coach-card__link {
+ background: none;
+ border: none;
+ color: #5b5fc7;
+ font-weight: 700;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-size: 13px;
+}
+
+.my-coach-card__link.group {
+ color: #047857;
+}
+
+.my-coach-card__classes {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.my-coach-card__class {
+ border: 1px solid #d1d5db;
+ background: #ffffff;
+ border-radius: 10px;
+ padding: 10px;
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ text-align: left;
+ cursor: pointer;
+}
+
+.my-coach-card__class.selected {
+ border-color: #10b981;
+ background: #ecfdf3;
+}
+
+.my-coach-card__class-title {
+ font-weight: 700;
+ color: #065f46;
+ margin-bottom: 4px;
+}
+
+.my-coach-card__class-meta {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ color: #4b5563;
+ font-size: 13px;
+}
+
+.my-coach-card__class-price {
+ font-weight: 700;
+ color: #065f46;
+ align-self: center;
+}
+
+.my-coach-card__error {
+ color: #b45309;
+ font-size: 13px;
+ margin: 0;
+}
+
+.my-coach-card__cta {
+ width: 100%;
+ padding: 12px;
+ border-radius: 12px;
+ border: none;
+ font-weight: 700;
+ font-size: 15px;
+ cursor: pointer;
+ transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.my-coach-card__cta.private {
+ background: #5b5fc7;
+ color: #ffffff;
+ box-shadow: 0 8px 24px rgba(91, 95, 199, 0.25);
+}
+
+.my-coach-card__cta.group {
+ background: #10b981;
+ color: #ffffff;
+ box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
+}
+
+.my-coach-card__cta.disabled {
+ background: #e5e7eb;
+ color: #6b7280;
+ cursor: not-allowed;
+}
+
+.my-coach-card__cta:disabled {
+ background: #e5e7eb;
+ color: #9ca3af;
+ cursor: not-allowed;
+}
+
+.pending-coaches {
+ margin-top: 16px;
+}
+
+.pending-coaches__list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.pending-coach-row {
+ border: 1px solid #e5e7eb;
+ border-radius: 12px;
+ padding: 12px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #ffffff;
+}
+
+.pending-coach-row__identity {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.pending-coach-row__avatar {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: #f3f4f6;
+ display: grid;
+ place-items: center;
+ font-weight: 700;
+ color: #4b5563;
+ overflow: hidden;
+}
+
+.pending-coach-row__avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.pending-coach-row__name {
+ margin: 0;
+ font-weight: 700;
+ color: #111827;
+}
+
+.pending-coach-row__status {
+ margin: 2px 0 0;
+ color: #6b7280;
+ font-size: 13px;
+}
+
+.pending-coach-row__actions {
+ display: flex;
+ gap: 10px;
+}
+
+.pending-coach-row__actions .ghost {
+ border: 1px solid #e5e7eb;
+ background: #ffffff;
+ border-radius: 10px;
+ padding: 8px 12px;
+ font-weight: 600;
+ color: #1f2937;
+}
+
+.pending-coach-row__actions .text {
+ background: none;
+ border: none;
+ color: #b45309;
+ font-weight: 700;
+}
diff --git a/src/pages/PlayerCoachListPage.jsx b/src/pages/PlayerCoachListPage.jsx
index 783e925a..23f8094b 100644
--- a/src/pages/PlayerCoachListPage.jsx
+++ b/src/pages/PlayerCoachListPage.jsx
@@ -8,10 +8,11 @@ import {
} from "react";
import Autocomplete from "react-google-autocomplete";
import { createPortal } from "react-dom";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
import {
ArrowRight,
Calendar,
+ Clock3,
Loader2,
MapPin,
RefreshCcw,
@@ -20,14 +21,23 @@ import {
Star,
Users2,
} from "lucide-react";
+import moment from "moment";
import api, { unwrap } from "../services/api";
import { API_BASE_URL } from "../api/config";
import { useAuth } from "../context/AuthContext";
import useDebouncedValue from "../hooks/useDebouncedValue";
+import {
+ fetchAvailableLessons,
+ fetchCoachLessonsByDate,
+ fetchCoachSchedule,
+} from "../api/playerLessons";
import "./PlayerCoachListPage.css";
const PER_PAGE = 10;
const DEFAULT_RADIUS = 10;
+const AVAILABILITY_WINDOW_DAYS = 12;
+const PRIVATE_SLOT_LIMIT = 4;
+const AVAILABILITY_LOOKAHEAD_DAYS = 16;
const DYNAMIC_FILTERS_ENDPOINT =
import.meta.env.VITE_PLAYER_FILTERS_ENDPOINT ?? "/player/filters";
const ENABLE_DYNAMIC_FILTERS =
@@ -48,6 +58,111 @@ const sanitizeLocationSearch = (location) => {
return label;
};
+const normalizeScheduleDay = (day) => (day ?? "").trim().toUpperCase();
+
+const buildScheduleMoment = (isoDate, time) => {
+ if (!isoDate || !time) return null;
+ const normalizedTime = time.length === 5 ? `${time}:00` : time;
+ const combined = moment(
+ `${isoDate}T${normalizedTime}`,
+ ["YYYY-MM-DDTHH:mm:ss", "YYYY-MM-DDTHH:mm"],
+ true,
+ );
+ return combined.isValid() ? combined : null;
+};
+
+const resolveScheduleLocation = (entry) => {
+ const candidates = [entry.location, entry.location_name, entry.court_name, entry.court];
+ const postalRegex = /\b\d{5}(?:-\d{4})?\b/;
+ const label = candidates.find(
+ (candidate) => typeof candidate === "string" && candidate.trim() && !postalRegex.test(candidate.trim()),
+ );
+ return label?.trim();
+};
+
+const buildSlotsFromScheduleEntry = (entry, isoDate, priceLabel = "$0", fallbackIndex = 0) => {
+ const startMoment = buildScheduleMoment(isoDate, entry.from);
+ if (!startMoment) return [];
+ const endMoment = buildScheduleMoment(isoDate, entry.to);
+ const slotIdBase =
+ entry.id !== undefined && entry.id !== null ? String(entry.id) : `${fallbackIndex}`;
+ const slots = [];
+
+ if (endMoment && endMoment.isAfter(startMoment)) {
+ let cursor = startMoment.clone();
+ let segmentIndex = 0;
+ while (cursor.isBefore(endMoment)) {
+ const segmentEnd = cursor.clone().add(1, "hour");
+ if (segmentEnd.isAfter(endMoment)) break;
+ slots.push({
+ id: `${isoDate}-${slotIdBase}-seg-${segmentIndex}`,
+ time: cursor.format("h:mm A"),
+ lessonType: "private",
+ duration: `${segmentEnd.diff(cursor, "minutes")} min`,
+ price: priceLabel,
+ spotsRemaining: 1,
+ location: resolveScheduleLocation(entry),
+ scheduleMeta: {
+ startDateTime: cursor.clone().utc().toISOString(),
+ endDateTime: segmentEnd.clone().utc().toISOString(),
+ startDateTimeTz: cursor.toISOString(),
+ endDateTimeTz: segmentEnd.toISOString(),
+ locationId: entry.location_id,
+ court: entry.court ?? null,
+ },
+ });
+ cursor = segmentEnd;
+ segmentIndex += 1;
+ }
+ }
+
+ if (slots.length) return slots;
+
+ const durationMinutes = endMoment ? Math.max(endMoment.diff(startMoment, "minutes"), 0) : null;
+ const computedDuration =
+ durationMinutes && Number.isFinite(durationMinutes) && durationMinutes > 0 ? durationMinutes : 60;
+ const derivedEndMoment = endMoment ?? startMoment.clone().add(computedDuration, "minutes");
+
+ return [
+ {
+ id: `${isoDate}-${slotIdBase}`,
+ time: startMoment.format("h:mm A"),
+ lessonType: "private",
+ duration: `${computedDuration} min`,
+ price: priceLabel,
+ spotsRemaining: 1,
+ location: resolveScheduleLocation(entry),
+ scheduleMeta: {
+ startDateTime: startMoment.clone().utc().toISOString(),
+ endDateTime: derivedEndMoment.clone().utc().toISOString(),
+ startDateTimeTz: startMoment.toISOString(),
+ endDateTimeTz: derivedEndMoment.toISOString(),
+ locationId: entry.location_id,
+ court: entry.court ?? null,
+ },
+ },
+ ];
+};
+
+const pickCoachLocationLabel = (coach) => {
+ if (!coach) return "";
+ const postalRegex = /\b\d{5}(?:-\d{4})?\b/;
+ const candidates = [
+ ...(Array.isArray(coach.locationPlaces) ? coach.locationPlaces.map((item) => item?.label) : []),
+ ...(Array.isArray(coach.locationList) ? coach.locationList : []),
+ coach.location,
+ coach.location_name,
+ coach.facility,
+ coach.city && coach.state ? `${coach.city}, ${coach.state}` : null,
+ coach.city,
+ coach.state,
+ ];
+ const label = candidates.find(
+ (entry) => typeof entry === "string" && entry.trim() && !postalRegex.test(entry.trim()),
+ );
+ return label?.trim() ?? "Location TBD";
+};
+
const parseCoachList = (payload) => {
if (!payload) return [];
if (Array.isArray(payload)) return payload;
@@ -1264,11 +1379,341 @@ const CoachCard = ({ coach, variant = "standard" }) => {
);
};
+const MyCoachBookingCard = ({ coach, authToken }) => {
+ const [privateSlots, setPrivateSlots] = useState([]);
+ const [groupClasses, setGroupClasses] = useState([]);
+ const [selection, setSelection] = useState(null);
+ const [loadingSlots, setLoadingSlots] = useState(false);
+ const [error, setError] = useState(null);
+ const navigate = useNavigate();
+
+ const coachName = coach?.name ?? "Coach";
+ const locationLabel = pickCoachLocationLabel(coach);
+ const hourlyRateLabel = coach?.hourlyRate || (coach?.hourlyRateValue ? `$${coach.hourlyRateValue.toFixed(0)}/hr` : "");
+
+ const upcomingLesson = useMemo(() => {
+ const dateCandidate =
+ coach?.next_lesson_date ||
+ coach?.nextLessonDate ||
+ coach?.next_lesson_day ||
+ coach?.nextLessonDay;
+ const timeCandidate = coach?.next_lesson_time || coach?.nextLessonTime;
+ const typeCandidate = (coach?.next_lesson_type || coach?.nextLessonType || "").toString().toLowerCase();
+ const isGroup = typeCandidate.includes("group");
+ const isPrivate = typeCandidate.includes("private") || (!typeCandidate && !isGroup);
+ if (!dateCandidate && !timeCandidate) return null;
+ return {
+ date: dateCandidate,
+ time: timeCandidate,
+ label: [dateCandidate, timeCandidate].filter(Boolean).join(" · "),
+ tone: isGroup ? "group" : isPrivate ? "private" : "info",
+ };
+ }, [coach?.nextLessonDate, coach?.nextLessonDay, coach?.nextLessonTime, coach?.nextLessonType, coach?.next_lesson_date, coach?.next_lesson_day, coach?.next_lesson_time, coach?.next_lesson_type]);
+
+ useEffect(() => {
+ if (!coach?.id) return;
+ let cancelled = false;
+ const loadAvailability = async () => {
+ setLoadingSlots(true);
+ setError(null);
+ const collectedSlots = [];
+ const hourlyLabel = hourlyRateLabel || "$0";
+
+ for (let offset = 0; offset < AVAILABILITY_LOOKAHEAD_DAYS; offset += 1) {
+ if (collectedSlots.length >= PRIVATE_SLOT_LIMIT) break;
+ const dateMoment = moment().add(offset, "days");
+ const isoDate = dateMoment.format("YYYY-MM-DD");
+ const weekday = dateMoment.format("dddd").toUpperCase();
+ let scheduleEntries = [];
+ try {
+ scheduleEntries = await fetchCoachSchedule({
+ token: authToken ?? "",
+ coachId: coach.id,
+ day: weekday,
+ });
+ } catch (err) {
+ scheduleEntries = [];
+ }
+
+ if (!scheduleEntries.length) continue;
+
+ let bookedLessons = [];
+ try {
+ bookedLessons = await fetchCoachLessonsByDate({
+ token: authToken ?? undefined,
+ coachId: coach.id,
+ date: isoDate,
+ });
+ } catch (err) {
+ bookedLessons = [];
+ }
+
+ const bookedTimes = new Set(
+ bookedLessons
+ .map((lesson) => moment(lesson.start_date_time).format("HH:mm"))
+ .filter(Boolean),
+ );
+
+ const dailySlots = scheduleEntries
+ .flatMap((entry, index) => buildSlotsFromScheduleEntry(entry, isoDate, hourlyLabel, index))
+ .filter((slot) => {
+ const slotStart = slot.scheduleMeta?.startDateTimeTz
+ ? moment(slot.scheduleMeta.startDateTimeTz).format("HH:mm")
+ : moment(`${isoDate} ${slot.time}`, ["YYYY-MM-DD h:mm A", "YYYY-MM-DD HH:mm"]).format("HH:mm");
+ return slotStart ? !bookedTimes.has(slotStart) : true;
+ })
+ .map((slot) => ({
+ ...slot,
+ isoDate,
+ dayLabel: dateMoment.format("ddd"),
+ }));
+
+ collectedSlots.push(...dailySlots);
+ }
+
+ if (!cancelled) {
+ setPrivateSlots(collectedSlots.slice(0, PRIVATE_SLOT_LIMIT));
+ }
+
+ try {
+ const startIso = moment().format("YYYY-MM-DD");
+ const endIso = moment().add(AVAILABILITY_WINDOW_DAYS, "days").format("YYYY-MM-DD");
+ const lessonsResponse = await fetchAvailableLessons({
+ token: authToken ?? "",
+ start_date: startIso,
+ end_date: endIso,
+ coach_id: Number(coach.id),
+ });
+ const lessonData = Array.isArray(lessonsResponse?.data) ? lessonsResponse.data : [];
+ const groups = lessonData
+ .filter((lesson) => {
+ const typeLabel = (lesson.lesson_type_name ?? lesson.metadata?.title ?? "").toString().toLowerCase();
+ return typeLabel.includes("group") || (lesson.player_limit ?? 1) > 1;
+ })
+ .map((lesson) => ({
+ id: lesson.id,
+ title: lesson.metadata?.title ?? lesson.metadata_title ?? lesson.lesson_type_name ?? "Group Class",
+ start: moment(lesson.start_date_time),
+ end: moment(lesson.end_date_time),
+ duration: lesson.end_date_time
+ ? `${moment(lesson.end_date_time).diff(moment(lesson.start_date_time), "minutes")} min`
+ : "60 min",
+ spotsRemaining:
+ Math.max((lesson.player_limit ?? 0) - (lesson.current_player_count ?? 0), 0) || null,
+ price: lesson.price_per_person ?? null,
+ location: lesson.location_name,
+ }));
+ if (!cancelled) {
+ setGroupClasses(groups);
+ }
+ } catch (err) {
+ if (!cancelled) {
+ setGroupClasses([]);
+ setError("Unable to load availability right now.");
+ }
+ } finally {
+ if (!cancelled) {
+ setLoadingSlots(false);
+ }
+ }
+ };
+
+ void loadAvailability();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [authToken, coach.id, hourlyRateLabel]);
+
+ const buttonLabel = useMemo(() => {
+ if (!selection) return "Select a time to book";
+ if (selection.type === "group") {
+ const pricePart = selection.lesson.price ? ` — $${selection.lesson.price}` : "";
+ return `Book ${selection.lesson.title}${pricePart}`;
+ }
+ return `Book Private — ${selection.slot.dayLabel} at ${selection.slot.time} — ${selection.slot.price}`;
+ }, [selection]);
+
+ const buttonTone = selection?.type === "group" ? "group" : selection ? "private" : "disabled";
+
+ const handleBook = useCallback(() => {
+ if (!selection) return;
+ const destination = `/coaches/${coach.slug || coach.id}`;
+
+ if (selection.type === "group") {
+ navigate(`${destination}?lessonId=${selection.lesson.id}&type=group`, {
+ state: {
+ preselectedLesson: selection.lesson,
+ coach,
+ },
+ });
+ return;
+ }
+
+ const start = selection.slot.scheduleMeta?.startDateTimeTz;
+ const end = selection.slot.scheduleMeta?.endDateTimeTz;
+ const query = [
+ "bookingType=private",
+ start ? `start=${encodeURIComponent(start)}` : null,
+ end ? `end=${encodeURIComponent(end)}` : null,
+ ]
+ .filter(Boolean)
+ .join("&");
+
+ navigate(query ? `${destination}?${query}` : destination, {
+ state: {
+ preselectedSlot: selection.slot,
+ coach,
+ },
+ });
+ }, [coach, navigate, selection]);
+
+ return (
+ Roster
-My coaches
-- Keep track of the coaches you are working with and jump to their profiles quickly. +
+
+
-
-
+ {filteredConfirmed.map((coach) => (
+
+ )}
- {loading && (
-
+
+ )}
+
+
-
- My Coaches
+Book your next lesson fast
++ Tap a slot on a coach card to prefill the booking button instantly.
+
+
+
+ Browse all coaches
+
+
+
+
+
+ Connected coaches
+{confirmedCoaches.length}
+
+
+ Pending approvals
+{pendingCoaches.length}
+
-
+ )}
- {error &&
-
-
-
+
+
+ {error &&
-
+
+
+
+ Lightning-fast booking
+ Skip discovery mode—this page is built to confirm your next lesson quickly.
+
+
+
+
+ Select a time on any card to activate the booking button.
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+ ))}
+
+ )}
+
+ {showEmpty && (
+
- {Array.from({ length: 4 }).map((_, index) => (
-
- ))}
-
- )}
-
- {showEmpty && (
-
- {coaches.map((coach) => (
-
- )}
+ {!loading && !error && pendingCoaches.length > 0 && (
+
+
+ Pending Approval
+Requests that are awaiting coach confirmation.
+-
+ {pendingCoaches.map((coach) => (
+
+
+ {hourlyRateLabel ? {hourlyRateLabel} : null}
+ {coach?.avatar ? 
: {coachName.slice(0, 1)}}
+
+
+ My Coach
+{coachName}
+
+
+
+
+ ) : null}
+
+ Upcoming lesson
+
+
+
+
+
+
+ {hourlyRateLabel ? {hourlyRateLabel} : null}
+ Private lessons
+ Select a time to book quickly.
+
+ {loadingSlots && !privateSlots.length ? (
+
+
+ All times
+
+ ) : null}
+ {privateSlots.slice(0, PRIVATE_SLOT_LIMIT).map((slot) => {
+ const isSelected = selection?.type === "private" && selection.slot.id === slot.id;
+ return (
+
+ );
+ })}
+ {!loadingSlots && !privateSlots.length ? (
+ No upcoming private slots in the next two weeks.
+ ) : null} +
+
+
+
+ Group classes
+ Join a class with available spots.
+
+ {groupClasses.map((lesson) => {
+ const isSelected = selection?.type === "group" && selection.lesson.id === lesson.id;
+ return (
+
+ );
+ })}
+
+
+ All classes {error}
: null} + + +
-
-
-
-
Player Experience
-Find Your Perfect Coach
-- Get matched with certified tennis professionals in your area. -
-
+ {activeTab === "my" ? (
+
+
+ ) : (
+
+
+ )}
+
+ {activeTab === "my" ? (
+
+
+ ) : (
+
+
-
+
+ My Coaches
+Book your next lesson in seconds
++ See real availability, pick a time, and confirm without leaving this page. +
+
+
+
+
+
+
+
+
+ Connected coaches
+{confirmedMyCoaches.length}
+
+
+ Pending approvals
+{pendingCoaches.length}
+
+
+ Lightning-fast booking
+ Tap a slot on a coach card to prefill the booking button instantly.
+
+
+ Player Experience
+{heroTitle}
+{heroSubtitle}
+
+
+
+
+ -
+
- Available Coaches +
- {heroStats.available.toLocaleString()} +
- Avg Rating +
- {heroStats.avgRating ?? "—"} +
- Avg Hourly Rate +
- {heroStats.avgHourlyRate ?? "—"} +
- Lessons Booked +
- {heroStats.lessons ?? "—"} +
+
+
+
+
+
+
+
+
+
+
+
+ Select a time on any card to activate the booking button.
+
+
+
-
+
+
+
-
-
- Available Coaches -
- {heroStats.available.toLocaleString()} -
- Avg Rating -
- {heroStats.avgRating ?? "—"} -
- Avg Hourly Rate -
- {heroStats.avgHourlyRate ?? "—"} -
- Lessons Booked -
- {heroStats.lessons ?? "—"} -
-
-
-
-
-
-
-
-
-