tf-checkout-react 1.3.51 → 1.4.0

package/src/components/paymentContainer/index.tsx

@@ -56,7 +56,6 @@ const getStripePromise = (reviewData: any) => {
 
   return loadStripe(stripePublishableKey, options)
 }
-
 export interface IPaymentPage {
   paymentFields: IPaymentField[];
   handlePayment: any;
@@ -83,14 +82,18 @@ export interface IPaymentPage {
 }
 
 const initialOrderValues: IOrderData = {
+  id: '',
   product_name: '',
   ticketType: '',
   quantity: '',
   price: '',
   total: '',
   currency: '',
+  guest_count: '',
+  pay_now: '',
   add_ons: [] as IAddOn[],
 }
+
 const initialReviewValues = {
   order_details: {
     order_hash: '',
@@ -138,7 +141,8 @@ export const PaymentContainer = ({
   const eventId =
     getQueryVariable('event_id') || _get(reviewData, 'cart[0].product_id') || ''
   const { hash, total } = checkoutData
-  const isFreeTickets = !Number(total) && !Number(orderData.total)
+  const isFreeTickets =
+    (!Number(total) && !Number(orderData.total)) || !Number(orderData.pay_now)
 
   const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
   usePixel(eventId, { page: 'review', pageUrl })
@@ -154,7 +158,18 @@ export const PaymentContainer = ({
           const {
             tickets: [ticket],
           } = order_details
+
+          const orderDataArray = _map(order_details.tickets, item => ({
+            product_name: cart[0]?.product_name,
+            ticketType: item?.name,
+            quantity: item?.guest_count,
+            price: item?.price,
+            id: item.id,
+            count: item?.quantity,
+          }))
+
           const orderData = {
+            id: order_details?.id,
             product_name: cart[0]?.product_name,
             ticketType: ticket?.name,
             quantity: ticket?.quantity,
@@ -162,6 +177,10 @@ export const PaymentContainer = ({
             total: order_details?.total,
             currency: order_details?.currency,
             add_ons: order_details?.add_ons || [],
+            pay_now: order_details?.pay_now || '',
+            guest_count: order_details?.guest_count || null,
+            debt: order_details?.debt || null,
+            tableTypes: orderDataArray,
           }
           setOrderData(orderData)
           onGetPaymentDataSuccess(response.data)
@@ -213,6 +232,22 @@ export const PaymentContainer = ({
       if (paymentSuccessResponse.status === 200) {
         handlePayment(paymentSuccessResponse)
         setPaymentIsLoading(false)
+
+        // clear seat-map related data from localStorage
+        localStorage.removeItem('reservationData')
+        localStorage.removeItem(`reservationStart-${eventId}`)
+        localStorage.removeItem('ownReservations')
+        localStorage.removeItem('tierId')
+
+        const isWindowDefined = typeof window !== "undefined"
+        if (isWindowDefined) {
+          (window as any)?.dataLayer.push({
+            'event': 'Purchase',
+            'orderValue': orderData.total,
+            'orderCurrency': orderData.currency,
+            'orderId': orderData.id
+          })
+        }
       }
     } catch (e) {
       setError(_get(e, 'response.data.message'))
@@ -222,7 +257,47 @@ export const PaymentContainer = ({
   }
 
   const themeMui = createTheme(themeOptions)
-
+  const hasTableTypes = Boolean(Number(orderData.guest_count))
+  const paymentFieldsData = hasTableTypes
+    ? [
+        {
+          label: 'Event',
+          id: 'product_name',
+        },
+        {
+          label: '',
+          id: 'tableTypes',
+        },
+        {
+          label: 'Total (incl. fees, card processing and taxes)',
+          id: 'total',
+          normalizer: (value: string, currency: any) =>
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(value)),
+              currency
+            ),
+        },
+        {
+          label: 'Pay Now',
+          id: 'pay_now',
+          normalizer: (value: string, currency: any) =>
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(value)),
+              currency
+            ),
+        },
+        {
+          label: 'Pay On Check-in',
+          id: 'debt',
+          normalizer: (value: string, currency: any) =>
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(value)),
+              currency
+            ),
+        },
+      ]
+    : paymentFields
+  const isTable = orderData?.guest_count
   return (
     <ThemeProvider theme={themeMui}>
       <div className="payment_page">
@@ -241,10 +316,15 @@ export const PaymentContainer = ({
         {paymentDataIsLoading && <Loader />}
         {!paymentDataIsLoading && (
           <Container maxWidth="md">
-            {showFormTitle && <h1>{formTitle}</h1>}
+            {showFormTitle && (
+              <h1>{isTable ? 'Get Your Tables' : formTitle}</h1>
+            )}
             <div className="order_info_text">{orderInfoLabel}</div>
-            <div className="order_info_section">
-              {_map(paymentFields, field => {
+            <div
+              className="order_info_section"
+              style={{ display: hasTableTypes ? 'block' : 'grid' }}
+            >
+              {_map(paymentFieldsData, field => {
                 const {
                   id,
                   label,
@@ -253,39 +333,89 @@ export const PaymentContainer = ({
                 } = field
                 const { currency } = orderData
                 const value = orderData[id as keyof IOrderData]
+                let component = null
 
                 if (field.id === 'add_ons' && _isEmpty(value)) {
                   return false
                 }
 
-                return (
-                  <div key={id} className="order_info_block">
-                    <div className="order_info_title">{label}</div>
-                    <div className={`${className} order_info_text`}>
-                      {typeof value === 'string'
-                        ? normalizer(value, currency)
-                        : _map(value, item => (
-                            <div key={item.id} className="add-on-container">
-                              <span>{item.quantity}</span>
-                              <span className="add-on-x">{' x '}</span>
-                              <span>
-                                {item.groupName ? item.groupName + ' - ' : ''}
-                              </span>
-                              <span>{item.name}</span>
-                              <span>{' - '}</span>
-                              <span>
-                                {currencyNormalizerCreator(
-                                  createFixedFloatNormalizer(2)(
-                                    parseFloat(item.price)
-                                  ),
-                                  currency
-                                )}
-                              </span>
-                              <span className="add-on-each">{' each'}</span>
+                if (field.id === 'tableTypes') {
+                  const valueArray = value as Array<any>
+
+                  component = (
+                    <div
+                      key={id}
+                      className="order_info_block"
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                      }}
+                    >
+                      {_map(valueArray, tableTypeItem => (
+                        <div
+                          key={tableTypeItem.id}
+                          style={{
+                            display: 'grid',
+                            gridTemplateColumns: '33% 33% 33%',
+                            gridColumnGap: '10%',
+                          }}
+                        >
+                          <div className="order_info_block">
+                            <div className="order_info_title">Table Type</div>
+                            <div className={`${className} order_info_text`}>
+                              {tableTypeItem.ticketType}
+                            </div>
+                          </div>
+                          <div className="order_info_block">
+                            <div className="order_info_title">
+                              Number of Tables
+                            </div>
+                            <div className={`${className} order_info_text`}>
+                              {tableTypeItem.count}
+                            </div>
+                          </div>
+                          <div className="order_info_block">
+                            <div className="order_info_title">Guest Count</div>
+                            <div className={`${className} order_info_text`}>
+                              {tableTypeItem.quantity}
                             </div>
-                          ))}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )
+                }
+
+                return (
+                  component || (
+                    <div key={id} className="order_info_block">
+                      <div className="order_info_title">{label}</div>
+                      <div className={`${className} order_info_text`}>
+                        {typeof value === 'string'
+                          ? normalizer(value, currency)
+                          : _map(value, item => (
+                              <div key={item.id} className="add-on-container">
+                                <span>{item.quantity}</span>
+                                <span className="add-on-x">{' x '}</span>
+                                <span>
+                                  {item.groupName ? item.groupName + ' - ' : ''}
+                                </span>
+                                <span>{item.name}</span>
+                                <span>{' - '}</span>
+                                <span>
+                                  {currencyNormalizerCreator(
+                                    createFixedFloatNormalizer(2)(
+                                      parseFloat(item.price)
+                                    ),
+                                    currency
+                                  )}
+                                </span>
+                                <span className="add-on-each">{' each'}</span>
+                              </div>
+                            ))}
+                      </div>
                     </div>
-                  </div>
+                  )
                 )
               })}
             </div>
@@ -354,7 +484,11 @@ export const PaymentContainer = ({
                         reviewData,
                         'payment_method.stripe_client_secret'
                       )}
-                      total={orderData.total}
+                      total={
+                        orderData.guest_count
+                          ? orderData.pay_now
+                          : orderData.total
+                      }
                       onSubmit={handlePaymentMiddleWare}
                       error={error}
                       currency={orderData.currency}

package/src/components/seatMapContainer/SeatMapComponent.tsx

@@ -0,0 +1,73 @@
+import 'tf-seat-map-view/dist/index.css'
+
+import React, { useEffect } from 'react'
+import ReactDom from 'react-dom'
+import SeatMapView from 'tf-seat-map-view'
+
+import { getTierRelationsArray } from './utils'
+
+const CONTAINER_DEFAULT_ID = 'seat_map_default_container'
+
+// Temp solution
+declare global {
+  interface Window {
+    tierPrices: any;
+  }
+}
+
+export const SeatMapComponent = (props: ISeatMapContainerProps) => {
+  const { seatMapProps, mapContainerId } = props
+  const {
+    seatData,
+    statuses,
+    seatMapType = null,
+    seatMapEvents = {},
+    ticketTypeTierRelations = {},
+    tierPrices,
+    isReserving,
+    predefinedSeats,
+  } = seatMapProps
+
+  useEffect(() => {
+    const parentElement = document.getElementById(
+      mapContainerId || CONTAINER_DEFAULT_ID
+    )
+
+    // Temp solution
+    window.tierPrices = tierPrices
+
+    if (Boolean(parentElement)) {
+      const mapComponent = (
+        <SeatMapView
+          disabled={isReserving}
+          loading={isReserving}
+          events={seatMapEvents}
+          isSelectionOn={false}
+          seatData={seatData}
+          statuses={statuses}
+          ticketTypeTireRelationsArray={getTierRelationsArray(
+            ticketTypeTierRelations
+          )}
+          width={Math.min(parentElement?.clientWidth || 800, 800)}
+          height={Math.min(parentElement?.clientWidth || 800, 800)}
+          isBlockMap={seatMapType === 'block'}
+          isTableMap={seatMapType === 'table'}
+          predefinedSeats={predefinedSeats}
+        />
+      )
+
+      ReactDom.render(mapComponent, parentElement)
+    }
+  }, [
+    isReserving,
+    mapContainerId,
+    seatData,
+    seatMapEvents,
+    seatMapType,
+    tierPrices,
+    statuses,
+    ticketTypeTierRelations,
+  ])
+
+  return <div id={CONTAINER_DEFAULT_ID} />
+}

package/src/components/seatMapContainer/TicketsSection.tsx

@@ -0,0 +1,254 @@
+import { CSSProperties } from '@emotion/serialize'
+import { createTheme, Select, SelectChangeEvent,ThemeOptions } from '@mui/material'
+import CircularProgress from '@mui/material/CircularProgress'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import MenuItem from '@mui/material/MenuItem'
+import { ThemeProvider } from '@mui/private-theming'
+import _find from 'lodash/find'
+import _identity from 'lodash/identity'
+import _isEmpty from 'lodash/isEmpty'
+import _keys from 'lodash/keys'
+import _map from 'lodash/map'
+import _some from 'lodash/some'
+import React from 'react'
+import { Button } from 'react-bootstrap'
+
+import { createFixedFloatNormalizer } from '../../normalizers'
+import { getButtonLabel, getTicketDropdownData } from './utils'
+
+export const TicketsSection = (
+  props: ITicketsSectionProps & {
+    themeOptions?: ThemeOptions & {
+      input?: CSSProperties;
+      checkbox?: CSSProperties;
+    };
+  }
+) => {
+  const {
+    ticketTypeTierRelations,
+    reservedSeats,
+    theme = 'light',
+    getTicketsBtnLabel,
+    contentStyle = {},
+    isButtonScrollable = false,
+    themeOptions,
+    handleGetTicketClick,
+    handleCancelReservation,
+    ticketDeleteButtonContent = 'Delete',
+    selectedTickets,
+    handleTicketSelect,
+    currencySymbol,
+    tableMapEnabled = false,
+    guestCounts,
+    setGuestCounts,
+    isAddingToCart,
+  } = props
+
+  const bookButtonIsDisabled =
+    _some(selectedTickets, item => !item) ||
+    _isEmpty(reservedSeats) ||
+    reservedSeats.length !== _keys(selectedTickets).length
+  const themeMui = createTheme(themeOptions)
+
+  const ticketsDropdownsData = getTicketDropdownData(
+    reservedSeats,
+    ticketTypeTierRelations
+  )
+  const handleTicketChange = (event: SelectChangeEvent<string>, seatId: string) => {
+    const {
+      target: { value },
+    } = event
+
+    if (value !== 'default') {
+      handleTicketSelect(value, seatId)
+    }
+  }
+
+  return (
+    <ThemeProvider theme={themeMui}>
+      <div className={`get-tickets-page ${theme}`} style={contentStyle}>
+        <div className="tickets-section">
+          {_map(selectedTickets, (ticketItem: string, key: string) => {
+            const dropdownData =
+              _find(ticketsDropdownsData, item => item.seatId === key) ||
+              ({} as ITicketsDropdownsData)
+
+            const selectedTicketData = _find(
+              dropdownData.ticketsData,
+              ticket => ticket.ticket_type_id === ticketItem
+            ) as TicketTypeTierRelationsData
+
+            // guest count dropdown options
+            const startNum = Number(
+              selectedTicketData?.ticket_type_min_number_of_guests
+            )
+            const endNum = Number(
+              selectedTicketData?.ticket_type_max_number_of_guests
+            )
+            const numLength = endNum - startNum + 1
+            const showGuestCountDropdown = Boolean(startNum && endNum)
+
+            // prices
+            const guestPrice =
+              (guestCounts[dropdownData.seatId] - startNum) *
+              Number(selectedTicketData?.guest_price)
+
+            const finalPrice = createFixedFloatNormalizer(2)(
+              selectedTicketData?.ticket_type_price + guestPrice
+            )
+
+            return (
+              <div className="ticket" key={key}>
+                <div className="ticketsDropdowns">
+                  <Select
+                    value={ticketItem || 'default'}
+                    onChange={event =>
+                      handleTicketChange(event, dropdownData.seatId)
+                    }
+                    inputProps={{ 'aria-label': 'Without label' }}
+                    MenuProps={{
+                      PaperProps: {
+                        sx: { maxHeight: 150 },
+                        className: 'get-tickets-paper',
+                      },
+                    }}
+                    displayEmpty
+                    sx={{ borderRadius: 0 }}
+                  >
+                    <MenuItem value={'default'}>
+                      {`Please select ${
+                        tableMapEnabled ? 'Table Type' : 'Ticket Type'
+                      }`}
+                    </MenuItem>
+                    {_map(dropdownData.ticketsData, (option, index) => {
+                      if (option.ticket_type_id !== 'default') {
+                        return (
+                          <MenuItem value={option.ticket_type_id} key={index}>
+                            {option.ticket_type_name}
+                          </MenuItem>
+                        )
+                      }
+                      return null
+                    })}
+                  </Select>
+                  <Button
+                    className="ticket-delete"
+                    onClick={() => {
+                      handleCancelReservation(
+                        dropdownData.seatId,
+                        dropdownData.tierId
+                      )
+                    }}
+                  >
+                    {ticketDeleteButtonContent}
+                  </Button>
+                </div>
+                {selectedTicketData && (
+                  <div style={{ display: 'flex', flexDirection: 'row' }}>
+                    <div
+                      style={{
+                        width: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <div className="ticketPrice">
+                        Price:
+                        <span className="ticketPrice-value">
+                          {`${currencySymbol} ${finalPrice}`}
+                        </span>
+                      </div>
+                      {!_isEmpty(selectedTicketData.ticket_type_deposit) && (
+                        <div className="ticketDeposit">
+                          Deposit:
+                          <span className="ticketPrice-value">
+                            {` ${selectedTicketData?.ticket_type_deposit}%`}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    {showGuestCountDropdown && (
+                      <div
+                        style={{
+                          width: '100%',
+                          display: 'flex',
+                          justifyContent: 'end',
+                          marginRight: 16,
+                        }}
+                      >
+                        <FormControl
+                          variant="outlined"
+                          sx={{ m: 1, minWidth: 80 }}
+                        >
+                          <InputLabel
+                            id="demo-simple-select-standard-label"
+                            shrink
+                          >
+                            GUESTS
+                          </InputLabel>
+                          <Select
+                            label="GUESTS"
+                            labelId="demo-simple-select-standard-label"
+                            value={guestCounts[dropdownData.seatId] || startNum}
+                            onChange={event => {
+                              setGuestCounts({
+                                ...guestCounts,
+                                [dropdownData.seatId]: Number(
+                                  event.target.value
+                                ),
+                              })
+                            }}
+                            inputProps={{ 'aria-label': 'Without label' }}
+                            MenuProps={{
+                              PaperProps: {
+                                sx: { maxHeight: 150 },
+                                className: 'get-tickets-paper',
+                              },
+                            }}
+                            displayEmpty
+                            sx={{ borderRadius: 0 }}
+                          >
+                            {_map(
+                              Array.from(
+                                { length: numLength },
+                                (_, i) => startNum + i
+                              ),
+                              (option, index) => (
+                                <MenuItem value={option} key={index}>
+                                  {option}
+                                </MenuItem>
+                              )
+                            )}
+                          </Select>
+                        </FormControl>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+        <div>
+          <Button
+            className={`book-button
+              ${bookButtonIsDisabled ? 'disabled' : ''}
+              ${isButtonScrollable ? 'is-scrollable' : ''}
+            `}
+            onClick={!bookButtonIsDisabled ? handleGetTicketClick : _identity}
+            disabled={isAddingToCart}
+          >
+            {isAddingToCart ? (
+              <CircularProgress size={20} style={{ marginLeft: 10 }} />
+            ) : (
+              getTicketsBtnLabel ||
+              getButtonLabel(reservedSeats.length, tableMapEnabled)
+            )}
+          </Button>
+        </div>
+      </div>
+    </ThemeProvider>
+  )
+}

package/src/components/seatMapContainer/addToCart.ts

@@ -0,0 +1,82 @@
+import _get from 'lodash/get'
+
+import { addToCart, getCheckoutPageConfigs, postOnCheckout } from '../../api'
+import { createCheckoutDataBodyWithDefaultHolder } from '../../utils'
+
+interface IAddToCartFuncProps {
+  eventId: string | number;
+  data: any;
+  ticketQuantity: number;
+  enableBillingInfoAutoCreate?: boolean;
+}
+
+export const addToCartFunc = async ({
+  eventId,
+  data,
+  ticketQuantity,
+  enableBillingInfoAutoCreate = true,
+}: IAddToCartFuncProps) => {
+  const isWindowDefined = typeof window !== 'undefined'
+
+  const result = await addToCart(eventId, data)
+  const pageConfigsDataResponse = await getCheckoutPageConfigs()
+
+  if (result.status === 200 && pageConfigsDataResponse.status === 200) {
+    const pageConfigsData =
+      _get(pageConfigsDataResponse, 'data.attributes') || {}
+
+    const {
+      skip_billing_page: skipBillingPage = false,
+      names_required: nameIsRequired = false,
+      age_required: ageIsRequired = false,
+      phone_required: phoneIsRequired = false,
+      hide_phone_field: hidePhoneField = false,
+      has_add_on: hasAddOn = false,
+      free_ticket: freeTicket = false,
+      collect_optional_wallet_address: collectOptionalWalletAddress = false,
+      collect_mandatory_wallet_address: collectMandatoryWalletAddress = false,
+    } = pageConfigsData
+
+    let hash = ''
+    let total = ''
+
+    isWindowDefined && window.localStorage.removeItem('add_ons')
+
+    if (skipBillingPage && !hasAddOn) {
+      // Get user data for checkout data
+      const userData =
+        isWindowDefined && window.localStorage.getItem('user_data')
+          ? JSON.parse(window.localStorage.getItem('user_data') || '')
+          : {}
+
+      const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+        ticketQuantity,
+        userData
+      )
+
+      const checkoutResult = enableBillingInfoAutoCreate
+        ? await postOnCheckout(checkoutBody, undefined, freeTicket)
+        : null
+
+      hash = _get(checkoutResult, 'data.data.attributes.hash') || ''
+      total = _get(checkoutResult, 'data.data.attributes.total') || ''
+    }
+
+    return {
+      skip_billing_page: skipBillingPage,
+      names_required: nameIsRequired,
+      phone_required: phoneIsRequired,
+      age_required: ageIsRequired,
+      hide_phone_field: hidePhoneField,
+      free_ticket: freeTicket,
+      collect_optional_wallet_address: collectOptionalWalletAddress,
+      collect_mandatory_wallet_address: collectMandatoryWalletAddress,
+      event_id: String(eventId),
+      hash,
+      total,
+      hasAddOn,
+    }
+  }
+
+  return null
+}