tf-checkout-react 1.6.6 → 1.7.1

package/src/components/ticketsContainer/TimeSlotsSection.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, CircularProgress, TextField } from '@mui/material'
+import { LocalizationProvider, StaticDatePicker as DatePicker } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import _isEmpty from 'lodash/isEmpty'
+import _map from 'lodash/map'
+import moment from 'moment-timezone'
+import React, { ReactNode, useState } from 'react'
+
+import { TicketsSection } from './TicketsSection'
+
+interface Props {
+  event: any;
+  eventId: number;
+  availableDates: string[];
+  selectedDate: string | null;
+  timeSlotGroups: { [key: string]: any[] };
+  setTimeSlotGroups: (value: { [key: string]: any[] }) => void;
+  setSelectedDate: (value: string | null) => void;
+  getTimeSlots: (date: string | null, type?: string) => Promise<void>;
+
+  selectedTickets: any;
+  handleTicketSelect: any;
+  sortBySoldOut: boolean;
+  hideTicketsHeader: boolean;
+  ticketsHeaderComponent?: ReactNode;
+  showGroupNameBlock?: boolean;
+  currencySymbol?: string;
+  isSeatMapAllowed?: boolean;
+}
+
+const TimeSlotsSection: React.FC<Props> = ({
+  event,
+  availableDates,
+  selectedDate,
+  timeSlotGroups,
+  setSelectedDate,
+  getTimeSlots,
+  selectedTickets,
+  handleTicketSelect,
+  sortBySoldOut,
+  hideTicketsHeader,
+  ticketsHeaderComponent,
+  showGroupNameBlock,
+  currencySymbol,
+  isSeatMapAllowed,
+}) => {
+  const [loading, setLoading] = useState(false)
+
+  const handleDateChange = async (date: string | null) => {
+    setSelectedDate(date)
+    if (date) {
+      setLoading(true)
+      try {
+        await getTimeSlots(date)
+      } catch (error) {
+        console.error('Error fetching time slots:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+  }
+
+  const isDateDisabled = (date: string) => {
+    const formattedDate = moment(date).format('YYYY-MM-DD')
+    return !availableDates.includes(formattedDate)
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
+        <DatePicker
+          value={selectedDate}
+          onChange={handleDateChange}
+          shouldDisableDate={isDateDisabled}
+          renderInput={params => <TextField {...params} />}
+          showToolbar={false}
+          componentsProps={{ actionBar: { actions: [] } }}
+          disablePast
+        />
+      </LocalizationProvider>
+      {loading ? (
+        <CircularProgress sx={{ marginTop: 2 }} />
+      ) : (
+        <Box
+          sx={{
+            marginTop: 2,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+          }}
+        >
+          {_map(Object.keys(timeSlotGroups).sort(), timeKey => (
+            <div key={timeKey} className="time-slot-block">
+              <div className="time-slot-date">{moment(timeKey).format('hh:mm A')}</div>
+              <TicketsSection
+                event={event}
+                ticketsList={timeSlotGroups[timeKey]}
+                tableTickets={[]}
+                selectedTickets={selectedTickets}
+                handleTicketSelect={handleTicketSelect}
+                sortBySoldOut={sortBySoldOut}
+                ticketsHeaderComponent={ticketsHeaderComponent}
+                tableTicketsHeaderComponent={null}
+                hideTableTicketsHeader={true}
+                hideTicketsHeader={hideTicketsHeader || _isEmpty(timeSlotGroups[timeKey])}
+                showGroupNameBlock={showGroupNameBlock}
+                currencySymbol={currencySymbol}
+                isSeatMapAllowed={isSeatMapAllowed}
+              />
+            </div>
+          ))}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default TimeSlotsSection