tf-checkout-react 1.6.6-beta.17 → 1.6.6-beta.19

package/dist/types/checkoutPageConfigs.d.ts

@@ -2,7 +2,7 @@ export interface ICheckoutPageConfigs {
     age_required: boolean;
     event_id: string;
     has_add_on: boolean;
-    minimum_age: number | string | null;
+    minimum_age?: number | string | null;
     names_required: boolean;
     phone_required: boolean;
     skip_billing_page: boolean;

package/dist/utils/customFields.d.ts

@@ -21,4 +21,15 @@ export declare const getDataWithCustomFields: (initialData: IBillingInfoData[],
         uniqueId?: string | undefined;
     };
 };
+export declare const getAddOnDataWithCustomFields: (customFields: any) => {
+    addOnDataWithCustomFields: {};
+} | {
+    addOnDataWithCustomFields: {
+        fields: {
+            id: number;
+            groupClassname: string;
+            groupItems: any[];
+        };
+    };
+};
 export declare const getFieldsKeys: (customFields: any) => any[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.6-beta.17",
+  "version": "1.6.6-beta.19",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/adapters/customFields.ts

@@ -61,10 +61,12 @@ export const fieldDataAdapter = (field: IGroupItem) => {
 export const customFieldsDataAdapter = (data: any) => {
   const adaptedTicketFields: Array<IGroupItem> = []
   const adaptedOrderFields: Array<IGroupItem> = []
+  const adaptedAddOnFields: Array<IGroupItem> = []
 
   _forEach(data, field => {
     const ticketFields = _get(field, 'ticket.group.fields')
     const orderFields = _get(field, 'order.group.fields')
+    const addOnFields = _get(field, 'add-on.group.fields')
 
     _forEach(ticketFields, ticketField => {
       adaptedTicketFields.push(fieldDataAdapter(ticketField))
@@ -73,7 +75,11 @@ export const customFieldsDataAdapter = (data: any) => {
     _forEach(orderFields, orderField => {
       adaptedOrderFields.push(fieldDataAdapter(orderField))
     })
+
+    _forEach(addOnFields, addOnField => {
+      adaptedAddOnFields.push(fieldDataAdapter(addOnField))
+    })
   })
 
-  return { ticketsFields: adaptedTicketFields, orderFields: adaptedOrderFields }
+  return { ticketsFields: adaptedTicketFields, orderFields: adaptedOrderFields, addOnFields: adaptedAddOnFields }
 }

package/src/api/common.ts

@@ -89,6 +89,12 @@ export const getTickets = async (
   return adaptedResponse.data
 }
 
+export const getTimeSlotsData = async (eventId: string | number): Promise<TimeSlotsResponse> => {
+  const response: AxiosResponse<TimeSlotsResponse, AxiosRequestConfig> =
+    await publicRequest.get(`/event/${eventId}/time-slot-groups-dates/`) // This endpoint currently works only for dashboard
+  return response.data
+}
+
 export const getCountries = async (): Promise<ICountriesResponse> => {
   const response: AxiosResponse<ICountriesResponse, AxiosRequestConfig> =
     await publicRequest.get('/countries/list')

package/src/api/index.ts

@@ -155,7 +155,7 @@ export const getCheckoutPageConfigs = async (): Promise<ResponseConfigs> => {
 
 
 export const getCustomFields = async (eventId: string) => {
-  const response = await publicRequest.get(`/v1/event/${eventId}/fields`)
+  const response = await publicRequest.get(`/v1/event/${eventId}/custom_fields`)
   const customFields = _get(response, 'data.data.attributes', [])
   const adaptedResponse = customFieldsDataAdapter(customFields)
   return adaptedResponse

package/src/components/addonsContainer/AddonComponent.tsx

@@ -1,15 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Field } from 'formik'
 import _identity from 'lodash/identity'
+import _isEmpty from 'lodash/isEmpty'
 import _isNull from 'lodash/isNull'
+import _map from 'lodash/map'
 import React from 'react'
 
+import { getFieldComponent, getFieldLabel, getValidateFunctions } from '../billing-info-container/utils'
 import { NativeSelectField } from '../common'
 
+// TO DO:
+// - Need to add custom fields validations
+// - Need to apply correct styles
+
 interface IAddonComponentProps {
   classNamePrefix: string;
   data: any;
   selectOptions: any;
   handleAddonChange?: (...res: any) => void;
+  addOnDataWithCustomFields: any;
+  configs: any;
+  values: any;
+  errors: any;
 }
 
 const AddonComponent = ({
@@ -17,6 +29,10 @@ const AddonComponent = ({
   data,
   selectOptions,
   handleAddonChange = _identity,
+  addOnDataWithCustomFields,
+  configs,
+  values,
+  errors,
 }: IAddonComponentProps) => {
   const { id, name, active, stock } = data
 
@@ -28,17 +44,55 @@ const AddonComponent = ({
           {!active || (!_isNull(stock) && stock <= 0) ? (
             <div className="sold_out">SOLD OUT</div>
           ) : (
-            <div className={`${classNamePrefix}_product_qty_select`}>
-              <Field
-                name={id}
-                selectOptions={selectOptions}
-                component={NativeSelectField}
-                onChange={(e: any) => {
-                  const { value } = e.target
-                  handleAddonChange(id, value)
-                }}
-              />
-            </div>
+            <>
+              <div className={`${classNamePrefix}_product_qty_select`}>
+                <Field
+                  name={id}
+                  selectOptions={selectOptions}
+                  component={NativeSelectField}
+                  onChange={(e: any) => {
+                    const { value } = e.target
+                    handleAddonChange(id, value)
+                  }}
+                />
+              </div>
+              {!_isEmpty(addOnDataWithCustomFields?.fields) && (
+                <div className="ticket-holders-fields">
+                  <h2>{addOnDataWithCustomFields.label}</h2>
+                  {_map(addOnDataWithCustomFields.fields, group => {
+                    const { id, groupClassname, groupItems } = group
+                    return (
+                      <div key={id}>
+                        <div className={groupClassname}>
+                          {_map(groupItems, element => (
+                            <div className={element.className} key={element.name}>
+                              <Field
+                                {...element}
+                                type={
+                                  element.type === 'radio' ||
+                                    element.type === 'checkbox'
+                                    ? undefined
+                                    : element.type
+                                }
+                                name={`${element.name}`}
+                                label={getFieldLabel(element, configs)}
+                                component={getFieldComponent(element)}
+                                validate={getValidateFunctions(
+                                  element,
+                                  [],
+                                  values,
+                                  errors
+                                )}
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>

package/src/components/addonsContainer/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/no-unescaped-entities */
 
 import { CircularProgress } from '@mui/material'
@@ -46,6 +47,8 @@ export interface IAddonContainterProps {
   onPendingVerification?: () => void;
   samePage?: boolean;
   descriptionTrigger?: "click" | "hover" | "always";
+  addOnDataWithCustomFields: any;
+  configs: any;
 }
 
 export interface ObjectLiteral {
@@ -66,6 +69,8 @@ export const AddonsContainter = ({
   onPendingVerification = _identity,
   samePage,
   descriptionTrigger = 'click',
+  addOnDataWithCustomFields,
+  configs,
 }: IAddonContainterProps) => {
   const eventId = getQueryVariable('event_id')
   const [addons, setAddons] = useState<any>([])
@@ -331,7 +336,7 @@ export const AddonsContainter = ({
               }
             } : undefined}
           >
-            {({ values }) => {
+            {({ values, errors }) => {
               const isConfirmDisabled = !isAtLeastOneAddonSelected(values)
 
               return (
@@ -417,7 +422,7 @@ export const AddonsContainter = ({
                               )}
                             </div>
                           </div>
-                          {(visibleDescription === addon.id || descriptionTrigger === 'always' ) && (
+                          {(visibleDescription === addon.id || descriptionTrigger === 'always') && (
                             <div
                               className={`${classNamePrefix}_product_desc`}
                               dangerouslySetInnerHTML={createMarkup(addon.description)}
@@ -435,6 +440,10 @@ export const AddonsContainter = ({
                                   handleAddonChange={(id, value) =>
                                     onFieldChange(id, value, addon)
                                   }
+                                  addOnDataWithCustomFields={addOnDataWithCustomFields}
+                                  configs={configs}
+                                  values={values}
+                                  errors={errors}
                                 />
                               ))
                             ) : (
@@ -447,6 +456,10 @@ export const AddonsContainter = ({
                                 handleAddonChange={(id, value) =>
                                   onFieldChange(id, value, addon)
                                 }
+                                addOnDataWithCustomFields={addOnDataWithCustomFields}
+                                configs={configs}
+                                values={values}
+                                errors={errors}
                               />
                             )}
                           </div>

package/src/components/billing-info-container/index.tsx

@@ -113,6 +113,7 @@ export interface IBillingInfoPage {
   onPendingVerification?: () => void;
   includeAddons?: boolean;
   addonsProps?: IAddonContainterProps;
+  addOnDataWithCustomFields?: any;
 }
 
 const LogicRunner: FC<{
@@ -136,72 +137,72 @@ const LogicRunner: FC<{
   shouldFetchCountries,
   brandOptIn,
 }) => {
-  const prevCountry = useRef(values.country)
-  useEffect(() => {
-    const fetchStates = async () => {
-      try {
-        const res = await getStates(values.country)
-        const mappedStates = _map(res.data, (item, key) => ({
-          label: item,
-          value: key,
-        }))
-        setStates(mappedStates)
-        if (prevCountry.current !== values.country) {
-          const stateExists = mappedStates.find(
-            state => state.value === values.state
-          )?.value
-          setFieldValue('state', stateExists ?? mappedStates[0]?.value ?? '')
-          prevCountry.current = values.country
-        }
-        onGetStatesSuccess(res.data)
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetStatesError(e)
+    const prevCountry = useRef(values.country)
+    useEffect(() => {
+      const fetchStates = async () => {
+        try {
+          const res = await getStates(values.country)
+          const mappedStates = _map(res.data, (item, key) => ({
+            label: item,
+            value: key,
+          }))
+          setStates(mappedStates)
+          if (prevCountry.current !== values.country) {
+            const stateExists = mappedStates.find(
+              state => state.value === values.state
+            )?.value
+            setFieldValue('state', stateExists ?? mappedStates[0]?.value ?? '')
+            prevCountry.current = values.country
+          }
+          onGetStatesSuccess(res.data)
+        } catch (e) {
+          if (axios.isAxiosError(e)) {
+            onGetStatesError(e)
+          }
         }
       }
-    }
-    shouldFetchCountries && fetchStates()
-  }, [values.country, setStates, setFieldValue])
-  const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
-  useEffect(() => {
-    // set user data from local storage
-    const getStoredUserData = () => {
-      if (isBrowser) {
-        if (userDataEncoded) {
-          try {
-            const parsedData = JSON.parse(userDataEncoded)
-            const mappedValues = {
-              firstName: parsedData?.first_name || parsedData?.firstName || '',
-              lastName: parsedData?.last_name || parsedData?.lastName || '',
-              email: parsedData?.email || '',
-              phone: parsedData?.phone || '',
-              confirmEmail: parsedData?.email || '',
-              state: parsedData?.state || '',
-              street_address: parsedData?.street_address || '',
-              country: parsedData?.country || '1',
-              zip: parsedData?.zip || '',
-              brand_opt_in: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
-              city: parsedData?.city || '',
-              confirmPassword: '',
-              password: '',
-              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
-              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
-              'holderEmail-0': parsedData?.email || '',
-            }
+      shouldFetchCountries && fetchStates()
+    }, [values.country, setStates, setFieldValue])
+    const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
+    useEffect(() => {
+      // set user data from local storage
+      const getStoredUserData = () => {
+        if (isBrowser) {
+          if (userDataEncoded) {
+            try {
+              const parsedData = JSON.parse(userDataEncoded)
+              const mappedValues = {
+                firstName: parsedData?.first_name || parsedData?.firstName || '',
+                lastName: parsedData?.last_name || parsedData?.lastName || '',
+                email: parsedData?.email || '',
+                phone: parsedData?.phone || '',
+                confirmEmail: parsedData?.email || '',
+                state: parsedData?.state || '',
+                street_address: parsedData?.street_address || '',
+                country: parsedData?.country || '1',
+                zip: parsedData?.zip || '',
+                brand_opt_in: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
+                city: parsedData?.city || '',
+                confirmPassword: '',
+                password: '',
+                'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
+                'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
+                'holderEmail-0': parsedData?.email || '',
+              }
 
-            const extraDataJSON = window.localStorage.getItem('extraData')
-            const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
+              const extraDataJSON = window.localStorage.getItem('extraData')
+              const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
 
-            setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
-            setUserValues(mappedValues)
-          } catch (e) {}
+              setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
+              setUserValues(mappedValues)
+            } catch (e) { }
+          }
         }
       }
-    }
-    getStoredUserData()
-  }, [userDataEncoded, setValues, setUserValues])
-  return null
-}
+      getStoredUserData()
+    }, [userDataEncoded, setValues, setUserValues])
+    return null
+  }
 
 const BillingInfoContainer = React.memo(
   ({
@@ -254,6 +255,7 @@ const BillingInfoContainer = React.memo(
     onGetCheckoutConfigsError = _identity,
     includeAddons = false,
     addonsProps,
+    addOnDataWithCustomFields,
   }: IBillingInfoPage) => {
     const [extraData, setExtraData] = useState(null)
     const [isConfigLoading, setIsConfigLoading] = useState(true)
@@ -625,7 +627,7 @@ const BillingInfoContainer = React.memo(
               {
                 country: initialCountry,
                 state: _get(userData, 'stateId', '') || '1',
-                brand_opt_in: optedInFieldValue,
+                brand_opt_in: Boolean(optedInFieldValue),
                 ttf_opt_in: ttfOptIn,
                 data_capture: {
                   instagram: _get(extraData, 'data_capture.instagram', ''),
@@ -867,7 +869,13 @@ const BillingInfoContainer = React.memo(
                       </div>
                     </div>
                   )}
-                  {includeAddons ? <AddonsContainter {...(addonsProps ?? {})} /> : null}
+                  {includeAddons ? (
+                    <AddonsContainter
+                      {...(addonsProps ?? {})}
+                      addOnDataWithCustomFields={addOnDataWithCustomFields}
+                      configs={configs}
+                    />
+                  ) : null}
                   {!cardLoading &&
                     _map(dataWithUniqueIds, item => {
                       const { label, labelClassName, fields } = item
@@ -974,9 +982,8 @@ const BillingInfoContainer = React.memo(
                                       ].includes(element.name) && isLoggedIn ? null : (
                                         <React.Fragment key={element.uniqueId}>
                                           <div
-                                            className={`${element.className} ${
-                                              props?.errors[element.name] || ''
-                                            }`}
+                                            className={`${element.className} ${props?.errors[element.name] || ''
+                                              }`}
                                           >
                                             {element.component ? (
                                               element.component
@@ -985,7 +992,7 @@ const BillingInfoContainer = React.memo(
                                                 {...element}
                                                 type={
                                                   element.type === 'radio' ||
-                                                  element.type === 'checkbox'
+                                                    element.type === 'checkbox'
                                                     ? undefined
                                                     : element.type
                                                 }
@@ -1007,11 +1014,11 @@ const BillingInfoContainer = React.memo(
                                                 selectOptions={
                                                   element.name === 'country'
                                                     ? _map(countries, item => ({
-                                                        value: item.id,
-                                                        label: item.name,
-                                                      }))
+                                                      value: item.id,
+                                                      label: item.name,
+                                                    }))
                                                     : element.name === 'state'
-                                                    ? [
+                                                      ? [
                                                         {
                                                           label: element.label,
                                                           value: '',
@@ -1019,7 +1026,7 @@ const BillingInfoContainer = React.memo(
                                                         },
                                                         ...states,
                                                       ]
-                                                    : element.selectOptions || []
+                                                      : element.selectOptions || []
                                                 }
                                                 theme={theme}
                                                 defaultCountry={
@@ -1059,7 +1066,7 @@ const BillingInfoContainer = React.memo(
                                         {...element}
                                         type={
                                           element.type === 'radio' ||
-                                          element.type === 'checkbox'
+                                            element.type === 'checkbox'
                                             ? undefined
                                             : element.type
                                         }

package/src/components/common/CheckboxField/index.tsx

@@ -30,7 +30,7 @@ export const CheckboxField = ({
     >
       <FormGroup>
         <FormControlLabel
-          control={<Checkbox {...field} checked={field.value} />}
+          control={<Checkbox {...field} checked={Boolean(field.value)} />}
           label={label}
           componentsProps={{ typography: customTheme?.checkbox }}
         />

package/src/components/ticketsContainer/TicketRow.tsx

@@ -83,7 +83,7 @@ export const TicketRow = ({
   // ticketTier.soldOut === false --> means that ticket is in the stock
   const isSoldOut =
     ticketTier.sold_out ||
-    !ticketTier.displayTicket ||
+    !(ticketTier.displayTicket || ticketTier.slotGroupId) ||
     ticketTier.soldOut ||
     ticketTier.soldOut === false
 

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -70,7 +70,7 @@ export const TicketsSection = ({
         const ticketPriceWithFees = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
         const ticketOldPrice = `${priceSymbol} ${(+ticket.oldPrice).toFixed(2)}`
 
-        const isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut
         const ticketSelect = (event: any) => {
           const { value } = event.target
           handleTicketSelect(ticket.id, value)
@@ -168,7 +168,7 @@ export const TicketsSection = ({
         const ticketPriceWithFees = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
         const ticketOldPrice = `${priceSymbol} ${(+ticket.oldPrice).toFixed(2)}`
 
-        const isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut
         const ticketSelect = (event: any) => {
           const { value } = event.target
           handleTicketSelect(ticket.id, value, true)

package/src/components/ticketsContainer/TimeSlotsSection.tsx

@@ -0,0 +1,118 @@
+/* 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 axios from "axios"
+import _isEmpty from 'lodash/isEmpty'
+import moment from "moment-timezone"
+import React, { Dispatch, ReactNode, SetStateAction, useState } from "react"
+
+import { TicketsSection } from "./TicketsSection"
+
+interface Ticket {
+	id: string | number;
+	type: string;
+	[key: string]: any;
+}
+
+interface Props {
+	event: any;
+	eventId: number;
+	availableDates: string[];
+
+	selectedTickets: any;
+	setSelectedTickets: Dispatch<SetStateAction<any>>;
+	handleTicketSelect: any;
+	sortBySoldOut: boolean;
+	hideTicketsHeader: boolean;
+	ticketsHeaderComponent?: ReactNode;
+	showGroupNameBlock?: boolean;
+	currencySybmol?: string;
+	isSeatMapAllowed?: boolean;
+}
+
+const TimeSlotsSection: React.FC<Props> = ({
+	event,
+	eventId,
+	availableDates,
+	selectedTickets,
+	setSelectedTickets,
+	handleTicketSelect,
+	sortBySoldOut,
+	hideTicketsHeader,
+	ticketsHeaderComponent,
+	showGroupNameBlock,
+	currencySybmol,
+	isSeatMapAllowed }) => {
+	const [selectedDate, setSelectedDate] = useState<string | null>(null)
+	const [tickets, setTickets] = useState<Ticket[]>([])
+	const [loading, setLoading] = useState(false)
+
+	const handleDateChange = async (date: string | null) => {
+		setSelectedDate(date)
+		if (date) {
+			setLoading(true)
+			try {
+				// Note this is temp endpoint
+				const response = await axios.get(`/api/time-slots`, {
+					params: {
+						eventId,
+						date: moment(date).format("YYYY-MM-DD"),
+					},
+				})
+				setTickets(response.data.tickets)
+				setSelectedTickets(response.data.tickets)
+			} catch (error) {
+				console.error("Error fetching time slots:", error)
+				setTickets([])
+				setSelectedTickets([])
+			} 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%" }}>
+					<TicketsSection
+						event={event}
+						ticketsList={tickets}
+						tableTickets={[]}
+						selectedTickets={selectedTickets}
+						handleTicketSelect={handleTicketSelect}
+						sortBySoldOut={sortBySoldOut}
+						ticketsHeaderComponent={ticketsHeaderComponent}
+						tableTicketsHeaderComponent={null}
+						hideTableTicketsHeader={true}
+						hideTicketsHeader={hideTicketsHeader || _isEmpty(tickets)}
+						showGroupNameBlock={showGroupNameBlock}
+						currencySybmol={currencySybmol}
+						isSeatMapAllowed={isSeatMapAllowed}
+					/>
+				</Box>
+			)}
+		</Box>
+	)
+}
+
+export default TimeSlotsSection