tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/components/resetPasswordContainer/index.tsx

@@ -1,102 +0,0 @@
-import './style.css'
-
-import { CircularProgress } from '@mui/material'
-import axios, { AxiosError } from 'axios'
-import { Field, Form, Formik } from 'formik'
-import _identity from 'lodash/identity'
-import React, { FC, useState } from 'react'
-import * as Yup from 'yup'
-
-import { resetPassword } from '../../api'
-import { CustomField } from '../common/CustomField'
-
-interface IResetPasswordProps {
-  token?: string;
-  onResetPasswordSuccess?: (res: any) => void;
-  onResetPasswordError?: (e: AxiosError) => void;
-}
-
-const Schema = Yup.object().shape({
-  password: Yup.string()
-    .min(8, 'Password must have 8+ characters')
-    .required('Required')
-    .matches(
-      new RegExp('^(?=.*[@$!%*#?&])'),
-      'Password must contain at least one special character'
-    ),
-  password_confirmation: Yup.string()
-    .required('Required')
-    .oneOf([Yup.ref('password'), null], 'Passwords must match'),
-})
-
-export const ResetPasswordContainer: FC<IResetPasswordProps> = ({
-  token: tokenProps = '',
-  onResetPasswordSuccess = _identity,
-  onResetPasswordError = _identity,
-}) => {
-  const [loading, setLoading] = useState(false)
-  return (
-    <div className="reset-password">
-      <div className="title">Change Password</div>
-      <Formik
-        initialValues={{ password: '', password_confirmation: '' }}
-        validationSchema={Schema}
-        onSubmit={async (values: any) => {
-          try {
-            setLoading(true)
-            let token
-            if (tokenProps) {
-              token = tokenProps
-            } else {
-              if (typeof window !== 'undefined') {
-                const params: URLSearchParams = new URL(`${window.location}`).searchParams
-                token = params.get('token')
-              }
-            }
-
-            const payload = {
-              token,
-              ...values,
-            }
-            const res = await resetPassword(payload)
-            onResetPasswordSuccess(res)
-          } catch (e) {
-            if (axios.isAxiosError(e)) {
-              onResetPasswordError(e)
-            }
-          } finally {
-            setLoading(false)
-          }
-        }}
-      >
-        {({ isValid, dirty }) => (
-          <Form>
-            <div className="body">
-              <div className="field-item">
-                <Field
-                  name="password"
-                  label="New Password"
-                  type="password"
-                  component={CustomField}
-                />
-              </div>
-              <div className="field-item">
-                <Field
-                  name="password_confirmation"
-                  label="Confirm Password"
-                  type="password"
-                  component={CustomField}
-                />
-              </div>
-            </div>
-            <div className="action-button">
-              <button type="submit" disabled={!(isValid && dirty)}>
-                {loading ? <CircularProgress size="22px" /> : 'Submit'}
-              </button>
-            </div>
-          </Form>
-        )}
-      </Formik>
-    </div>
-  )
-}

package/src/components/resetPasswordContainer/style.css

@@ -1,36 +0,0 @@
-.reset-password {
-  padding: 14px;
-  max-width: 300px;
-  margin: 0 auto;
-}
-.reset-password .title {
-  font-size: 20px;
-  font-weight: bold;
-}
-.reset-password .field-item {
-  margin-top: 14px;
-}
-.reset-password .action-button button {
-  padding: 10px;
-  width: 100%;
-  margin-top: 14px;
-  border: none;
-  border-radius: 0;
-  height: 45px;
-  font-weight: 600;
-  font-size: 26px;
-  line-height: 18px;
-  color: white;
-  cursor: pointer;
-  outline: none;
-  background-color: #212529;
-  text-transform: uppercase;
-}
-.reset-password .action-button button:hover:enabled {
-  background-color: #505050;
-  border-color: #505050;
-}
-.reset-password .action-button button[disabled] {
-  opacity: .7;
-  cursor: unset;
-}

package/src/components/rsvpContainer/index.tsx

@@ -1,126 +0,0 @@
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Modal from '@mui/material/Modal'
-import { Field, Form, Formik } from 'formik'
-import React, { useState } from 'react'
-
-import { sendRSVPInfo } from '../../api'
-import { isBrowser } from '../../utils'
-import { combineValidators, emailValidator, requiredValidator } from '../../validators'
-import { CustomField, Loader } from '../common/index'
-
-interface IRsvpContainerPage {
-  showSection?: boolean;
-  eventId: number;
-}
-
-interface IRSVPValuesTypes {
-  email: string;
-}
-
-const style: React.CSSProperties = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none',
-  padding: '14px',
-  maxHeight: '85vh',
-  overflow: 'auto',
-}
-
-export const RsvpContainer = ({ showSection = false, eventId }: IRsvpContainerPage) => {
-  const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
-  const parsedData = JSON.parse(userDataEncoded || '{}')
-
-  const [loading, setLoading] = useState(false)
-  const [modal, setModal] = useState({ isOpen: false, text: '' })
-
-  const handleModalClose = () => {
-    setModal({ isOpen: false, text: '' })
-  }
-
-  const handleSubmit = async (values: IRSVPValuesTypes) => {
-    try {
-      setLoading(true)
-
-      const requestData = { data: { email: values.email } }
-      const response = await sendRSVPInfo(eventId, requestData)
-
-      setModal({ isOpen: true, text: response.message })
-    } catch (error) {
-      if (error.response.status === 403) {
-        setModal({ isOpen: true, text: error.response.data?.message })
-      }
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  if (!showSection) {
-    return null
-  }
-
-  return (
-    <>
-      <Modal
-        open={modal.isOpen}
-        onClose={handleModalClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-        className="rsvp-modal"
-      >
-        <Box style={style} className="rsvp-modal-box">
-          <div className="rsvp-modal-container">
-            <div className="rsvp-modal-header">{modal.text}</div>
-            <div className="rsvp-modal-button">
-              <button type="button" onClick={handleModalClose}>
-                OK
-              </button>
-            </div>
-          </div>
-        </Box>
-      </Modal>
-      <div className="rsvp-container">
-        {loading ? (
-          <Loader />
-        ) : (
-          <>
-            <div className="rsvp-header">RSVP</div>
-            <div className="rsvp-email-container">
-              <Formik
-                initialValues={{
-                  email: parsedData?.email || '',
-                }}
-                onSubmit={handleSubmit}
-                enableReinitialize
-              >
-                <Form>
-                  <div className="rsvp-email-input-container">
-                    <Field
-                      name="email"
-                      label="EMAIL ADDRESS"
-                      type="email"
-                      validate={combineValidators(
-                        (value: string) =>
-                          requiredValidator(value, 'Please enter your Email'),
-                        (value: string) => emailValidator(value)
-                      )}
-                      component={CustomField}
-                    />
-                  </div>
-                  <div className="rsvp-button-container">
-                    <Button type="submit">RSVP</Button>
-                  </div>
-                </Form>
-              </Formik>
-            </div>
-          </>
-        )}
-      </div>
-    </>
-  )
-}

package/src/components/seatMapContainer/SeatMapComponent.tsx

@@ -1,77 +0,0 @@
-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 { Loader } from '../common'
-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,
-    isLoadingSeatMapData,
-  } = seatMapProps
-
-  useEffect(() => {
-    const parentElement = document.getElementById(mapContainerId || CONTAINER_DEFAULT_ID)
-
-    // Temp solution
-    window.tierPrices = tierPrices
-
-    if (parentElement) {
-      let mapComponent = null
-
-      if (!(seatData && statuses) || isLoadingSeatMapData) {
-        mapComponent = <Loader />
-      } else {
-        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

@@ -1,286 +0,0 @@
-import { CSSProperties } from '@emotion/serialize'
-import { 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 { createTheme, ThemeProvider } from '@mui/material/styles'
-import Tooltip from '@mui/material/Tooltip'
-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, { useState } from 'react'
-import { Button } from 'react-bootstrap'
-
-import { createFixedFloatNormalizer } from '../../normalizers'
-import { createMarkup } from '../../utils'
-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',
-    ticketInfoContent = 'Info',
-    selectedTickets,
-    handleTicketSelect,
-    currencySymbol,
-    tableMapEnabled = false,
-    guestCounts,
-    setGuestCounts,
-    isAddingToCart,
-  } = props
-
-  const [selectedTicketsInfo, setSelectedTicketsInfo] = useState<{
-    [seatId: string]: boolean | undefined;
-  }>({})
-
-  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)
-    }
-  }
-
-  const handleShowtTicketInfo = (seatId: string) => {
-    setSelectedTicketsInfo(prevState => ({ ...prevState, [seatId]: !prevState[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)
-            const showDescription = Boolean(selectedTicketData?.description)
-
-            // 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' }}>
-                      <div
-                        style={{
-                          width: '100%',
-                          display: 'flex',
-                          flexDirection: 'column',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        <div className="ticketPrice">
-                          Price:
-                          <span className="ticketPrice-value">
-                            {`${currencySymbol} ${finalPrice}`}
-                          </span>
-                          <span className="fees">
-                            {selectedTicketData.fee_included
-                              ? ' (incl. Fees)'
-                              : ' (excl. Fees)'}
-                          </span>
-                        </div>
-                        {!_isEmpty(selectedTicketData.ticket_type_deposit) && (
-                          <div className="ticketDeposit">
-                            Deposit:
-                            <span className="ticketPrice-value">
-                              {` ${selectedTicketData?.ticket_type_deposit}%`}
-                            </span>
-                          </div>
-                        )}
-                      </div>
-                      <div
-                        style={{
-                          width: '100%',
-                          display: 'flex',
-                          justifyContent: 'end',
-                          alignItems: 'center',
-                          marginRight: 16,
-                        }}
-                      >
-                        {showDescription && (
-                          <Tooltip
-                            title="View Ticket Info"
-                            placement="left"
-                            arrow
-                            componentsProps={{
-                              tooltip: {
-                                sx: {
-                                  backgroundColor: 'common.black',
-                                  marginRight: '6px !important',
-                                  '& .MuiTooltip-arrow': {
-                                    color: 'common.black',
-                                  },
-                                },
-                              },
-                            }}
-                          >
-                            <div
-                              className="ticket-info"
-                              onClick={() => handleShowtTicketInfo(dropdownData.seatId)}
-                              onKeyDown={() => handleShowtTicketInfo(dropdownData.seatId)}
-                            >
-                              {ticketInfoContent}
-                            </div>
-                          </Tooltip>
-                        )}
-                        {showGuestCountDropdown && (
-                          <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>
-                    {selectedTicketsInfo[dropdownData.seatId] && (
-                      <div
-                        className="ticket-description-content"
-                        dangerouslySetInnerHTML={createMarkup(
-                          selectedTicketData.description || ''
-                        )}
-                      />
-                    )}
-                  </>
-                )}
-              </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

@@ -1,66 +0,0 @@
-import _get from 'lodash/get'
-
-import { addToCart, getCheckoutPageConfigs, postOnCheckout } from '../../api'
-import { createCheckoutDataBodyWithDefaultHolder, isBrowser } from '../../utils'
-
-interface IAddToCartFuncProps {
-  eventId: string | number;
-  data: any;
-  ticketQuantity: number;
-  enableBillingInfoAutoCreate?: boolean;
-}
-
-export const addToCartFunc = async ({
-  eventId,
-  data,
-  ticketQuantity,
-  enableBillingInfoAutoCreate = true,
-}: IAddToCartFuncProps) => {
-  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,
-      has_add_on: hasAddOn = false,
-      free_ticket: freeTicket = false,
-    } = pageConfigsData
-
-    let hash: string | number | undefined = ''
-    let total: string | number | undefined = ''
-
-    isBrowser && window.localStorage.removeItem('add_ons')
-
-    if (skipBillingPage && !hasAddOn) {
-      // Get user data for checkout data
-      const userData =
-        isBrowser && window.localStorage.getItem('user_data')
-          ? JSON.parse(window.localStorage.getItem('user_data') || '')
-          : {}
-
-      const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-        ticketQuantity,
-        userData
-      )
-
-      const checkoutResponse = enableBillingInfoAutoCreate
-        ? await postOnCheckout(checkoutBody, freeTicket)
-        : null
-
-      hash = checkoutResponse?.data?.attributes?.hash || ''
-      total = checkoutResponse?.data?.attributes?.total || ''
-    }
-
-    return {
-      skip_billing_page: skipBillingPage,
-      event_id: String(eventId),
-      hash,
-      total,
-      hasAddOn,
-    }
-  }
-
-  return null
-}