tf-checkout-react 1.3.50 → 1.4.0

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
+}