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

package/src/components/ticketsContainer/style.css

@@ -1,178 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-}
-.event-detail__tier {
-  padding: 17px 35px 20px;
-  background-color: #fff;
-}
-.event-detail__tier-name {
-  font-family: Inter-Bold;
-  font-weight: 700;
-  line-height: 1.3;
-  text-transform: uppercase;
-  padding-right: 20%;
-  color: black;
-  font-size: 0.85rem;
-  font-family: 'Bebas Neue';
-  letter-spacing: 0.2em;
-  margin-top: 16px;
-  margin-bottom: 8px;
-}
-.event-detail__tier-status {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-}
-.event-detail__tier-status.ticket-button {
-  color: #fff;
-  background-color: #212529;
-  border-color: #212529;
-  border-radius: 0;
-  border: 3px solid black;
-  letter-spacing: 0.2em;
-  font-weight: 700;
-  margin-bottom: 10px;
-  line-height: 1.5;
-  cursor: pointer;
-  width: 200px;
-}
-
-.event-tickets-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.event-detail__tier-status.ticket-button.true {
-  background-color: #c1c3c6;
-  border-color: #afb0b1;
-}
-.event-detail__tier-price {
-  font-family: Inter-Bold;
-  font-size: 1.5rem;
-  line-height: 1;
-  color: #000;
-  text-align: center;
-}
-
-.event-detail__tier-price p {
-  margin: 0;
-}
-
-.event-detail__tier-price .fees {
-  font-size: 14px;
-  text-align: left;
-  margin-top: 4px;
-}
-
-.event-detail__tier-price .old-price {
-  margin-bottom: 5px;
-  color: #f00;
-  text-decoration: line-through;
-  font-size: 1.3rem;
-}
-
-.alert-info {
-  border: 1px solid #fbeed5;
-  padding: 8px 15px;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-  color: #3a87ad;
-  font-size: 1em;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  border-radius: 4px;
-  margin: 0px 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.alert-info svg {
-  margin-right: 4px;
-}
-
-.event-detail__tier-state {
-  font-family: Inter-Bold;
-  font-weight: 300;
-  font-size: 0.75rem;
-  line-height: 1;
-  color: #30bc9d;
-  text-align: right;
-  text-transform: uppercase;
-}
-
-.event-detail__tier-state .ticket-not-started-message {
-  color: #000000;
-  text-transform: initial;
-  width: 50px;
-  text-align: left;
-}
-
-.promo-code-block input {
-  font-size: 14px;
-  padding: 1px 8px;
-}
-
-.book-button {
-  background-color: #212529;
-  display: block;
-  text-align: center;
-  width: 100%;
-  height: 50px;
-  font-size: 26px;
-  color: #fff;
-  cursor: pointer;
-  background-color: #212529;
-  border-color: #212529;
-  border-radius: 0;
-  border: 3px solid black;
-  letter-spacing: 0.2em;
-  font-weight: 700;
-  line-height: 1.5;
-  margin: 25px auto 10px auto;
-}
-.book-button:hover {
-  background-color: #505050;
-  border-color: #505050;
-}
-.loader-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.get-tickets-paper::-webkit-scrollbar {
-  width: 5px;
-}
-.get-tickets-paper::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-.get-tickets-paper::-webkit-scrollbar-thumb {
-  background: #888;
-}
-.get-tickets-paper::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-.get-tickets .get-tickets__selectbox {
-  width: 100%;
-}
-
-.disabled {
-  user-select: none;
-  pointer-events: none;
-}
-
-.hidden {
-  display: none;
-}
-
-.event-closed-message {
-  font-family: 'Bebas Neue';
-  letter-spacing: 0.5px;
-}

package/src/components/ticketsContainer/utils.ts

@@ -1,35 +0,0 @@
-export const getTicketSelectOptions = (maxCount = 10, minCount = 1, multiplier = 1) => {
-  const options = [{ label: 0, value: 0 }]
-  for (let i = minCount || 1; i <= Math.min(50, maxCount); i += multiplier) {
-    options.push({ label: i, value: i })
-  }
-  return options
-}
-
-interface eventDatesInfo {
-  salesStarted: boolean;
-  salesEnded: boolean;
-  presalesStarted: boolean;
-  presalesEnded: boolean;
-  presalesEnabled: boolean;
-}
-
-export const defineIsSalesClosed = (eventDatesInfo: eventDatesInfo): boolean => {
-  const { salesStarted, salesEnded, presalesStarted, presalesEnded, presalesEnabled } =
-    eventDatesInfo
-  let isSalesClosed = false
-  if (!salesStarted || (salesStarted && salesEnded)) {
-    isSalesClosed = true
-  }
-  if (presalesEnabled) {
-    if (
-      (!presalesStarted && !presalesEnded) ||
-      (presalesStarted && presalesEnded && !salesStarted)
-    ) {
-      isSalesClosed = true
-    } else {
-      isSalesClosed = false
-    }
-  }
-  return isSalesClosed
-}

package/src/components/timerWidget/index.tsx

@@ -1,97 +0,0 @@
-import './style.css'
-
-import _identity from 'lodash/identity'
-import React, { memo, useState } from 'react'
-import Countdown from 'react-countdown'
-import ReactDOM from 'react-dom'
-import SVG from 'react-inlinesvg'
-
-import Cross from '../../assets/images/cross.svg'
-import { showZero } from '../../utils/showZero'
-
-export interface ITimerWidgetPage {
-  expires_at: number;
-  buyLoading?: boolean;
-  onCountdownFinish?: () => void;
-  container?: string;
-}
-
-export interface IRenderer {
-  minutes: number;
-  seconds: number;
-  completed: number;
-  handleCountdownFinish: () => void;
-}
-
-const TimerWidget = ({
-  expires_at,
-  buyLoading,
-  onCountdownFinish = _identity,
-  container,
-}: ITimerWidgetPage) => {
-  const [showTimer, setShowTimer] = useState(true)
-
-  const handleCountdownFinish = () => {
-    setShowTimer(false)
-    if (!buyLoading) {
-      onCountdownFinish()
-    }
-  }
-
-  const renderer = ({
-    minutes,
-    seconds,
-    completed,
-    handleCountdownFinish,
-  }: IRenderer) => {
-    if (completed) {
-      handleCountdownFinish()
-      return null
-    }
-    return (
-      <span>
-        {showZero(minutes)}:{showZero(seconds)}
-      </span>
-    )
-  }
-
-  const hideTimer = () => {
-    const timerRl: HTMLElement | null = document.querySelector('.timer')
-    if (timerRl) {
-      timerRl.style.visibility = 'hidden'
-    }
-  }
-
-  const timerComponent = (
-    <div className="timer">
-      <div aria-hidden className="close-icon" onClick={hideTimer}>
-        <SVG src={Cross} width="10" height="10" fill="#fff" />
-      </div>
-      <div className="toast-message">
-        <p>Please complete your purchase before the timer reaches zero.</p>
-        <p className="countdown">
-          <Countdown
-            date={Date.now() + expires_at * 1000}
-            renderer={(props: any) =>
-              renderer({
-                ...props,
-                handleCountdownFinish,
-              })
-            }
-          />
-        </p>
-      </div>
-    </div>
-  )
-
-  return showTimer && !!expires_at
-    ? container
-      ? ReactDOM.createPortal(
-          timerComponent,
-          document.querySelector(container) as HTMLElement
-        )
-      : timerComponent
-    : null
-}
-
-export default memo(TimerWidget)

package/src/components/timerWidget/style.css

@@ -1,35 +0,0 @@
-.timer {
-  position: fixed;
-  pointer-events: auto;
-  background-color: #000000;
-  overflow: hidden;
-  margin: 0 0 6px;
-  padding: 15px 15px 15px 50px;
-  width: 300px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background-position: 15px center;
-  background-repeat: no-repeat;
-  -moz-box-shadow: 0 0 12px #999;
-  -webkit-box-shadow: 0 0 12px #999;
-  box-shadow: 0 0 12px #999;
-  max-width: 300px;
-  color: #fff;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);
-  right: 15px;
-  z-index: 9;
-}
-
-.timer .close-icon {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  display: flex;
-  cursor: pointer;
-}
-
-.timer .countdown {
-  font-weight: bold;
-  margin-top: 10px;
-}

package/src/components/waitingList/index.tsx

@@ -1,190 +0,0 @@
-import './style.css'
-
-import Button from '@mui/material/Button'
-import CircularProgress from '@mui/material/CircularProgress'
-import { Field, Form, Formik } from 'formik'
-import _find from 'lodash/find'
-import React, { useState } from 'react'
-
-import { addToWaitingList } from '../../api'
-import { isBrowser } from '../../utils'
-import { ErrorFocus } from '../../utils/formikErrorFocus'
-import {
-  combineValidators,
-  emailValidator,
-  requiredValidator,
-} from '../../validators'
-import { CustomField } from '../common/index'
-
-interface WaitingListProps {
-  tickets: any;
-  eventId: number;
-  defaultMaxQuantity: number;
-}
-
-interface WaitingListFields {
-  ticketTypeId: string;
-  quantity: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-}
-
-const generateQuantity = (n: number) => {
-  const quantityList = []
-  for (let i = 1; i <= n; i++) {
-    quantityList.push({ label: i, value: i })
-  }
-  return quantityList
-}
-
-const WaitingList = ({
-  tickets = {},
-  eventId,
-  defaultMaxQuantity = 10,
-}: WaitingListProps) => {
-  const userData =
-    isBrowser && window.localStorage.getItem('user_data')
-      ? JSON.parse(window.localStorage.getItem('user_data') || '')
-      : {}
-
-  const [showSuccessMessage, setShowSuccessMessage] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const ticketTypesList = Object.values(tickets).map((d: any) => ({
-    label: d.displayName,
-    value: d.id,
-  }))
-
-  const showTicketsField = Boolean(ticketTypesList.length)
-
-  const handleSubmit = async (values: WaitingListFields) => {
-    try {
-      setLoading(true)
-      const response = await addToWaitingList(eventId, { attributes: values })
-
-      if (response.success) {
-        setShowSuccessMessage(true)
-      }
-    } catch (error) {
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="waiting-list">
-      {showSuccessMessage ? (
-        <div className="success-message">
-          <p className="added-success-message">You&apos;ve been added to the waiting list!</p>
-          <p>You&apos;ll be notified if tickets become available.</p>
-        </div>
-      ) : (
-        <>
-          <h2>WAITING LIST</h2>
-          <Formik
-            initialValues={{
-              ticketTypeId: '',
-              quantity: '',
-              firstName: userData.first_name || '',
-              lastName: userData.last_name || '',
-              email: userData.email || '',
-            }}
-            onSubmit={handleSubmit}
-          >
-            {({ values, setFieldValue }) => {
-              const selectedTicket = _find(tickets, n => n.id === values.ticketTypeId)
-              return (
-                <Form>
-                  <ErrorFocus />
-                  {showTicketsField && (
-                    <>
-                      <div className="field-item">
-                        <Field
-                          name="ticketTypeId"
-                          label="Type of Ticket"
-                          type="select"
-                          component={CustomField}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                            setFieldValue('ticketTypeId', e.target.value)
-                            setFieldValue('quantity', '')
-                          }}
-                          selectOptions={[
-                            { label: 'Type of Ticket', value: '', disabled: true },
-                            ...ticketTypesList,
-                          ]}
-                        />
-                      </div>
-                      <div className="field-item">
-                        <Field
-                          name="quantity"
-                          label="Quantity Requested"
-                          type="select"
-                          component={CustomField}
-                          selectOptions={[
-                            {
-                              label: 'Quantity Requested',
-                              value: '',
-                              disabled: true,
-                            },
-                            ...generateQuantity(selectedTicket?.waitingListMaxQuantity || (defaultMaxQuantity ?? 10)
-                            ),
-                          ]}
-                        />
-                      </div>
-                    </>
-                  )}
-                  <div className="field-item">
-                    <Field
-                      name="firstName"
-                      label="First name"
-                      validate={(value: string) =>
-                        requiredValidator(value, 'Please enter your First name')
-                      }
-                      component={CustomField}
-                    />
-                  </div>
-                  <div className="field-item">
-                    <Field
-                      name="lastName"
-                      label="Last name"
-                      validate={(value: string) =>
-                        requiredValidator(value, 'Please enter your Last name')
-                      }
-                      component={CustomField}
-                    />
-                  </div>
-                  <div className="field-item">
-                    <Field
-                      name="email"
-                      label="Email"
-                      validate={combineValidators(
-                        (value: string) =>
-                          requiredValidator(value, 'Please enter your Email'),
-                        (value: string) => emailValidator(value)
-                      )}
-                      component={CustomField}
-                    />
-                  </div>
-
-                  <Button
-                    type="submit"
-                    variant="contained"
-                    className="waiting-list-button"
-                  >
-                    {loading ? (
-                      <CircularProgress size="22px" />
-                    ) : (
-                      'ADD TO WAITING LIST'
-                    )}
-                  </Button>
-                </Form>
-              )
-            }}
-          </Formik>
-        </>
-      )}
-    </div>
-  )
-}
-
-export default WaitingList

package/src/components/waitingList/style.css

@@ -1,27 +0,0 @@
-.waiting-list {
-  padding: 17px 35px 20px;
-}
-.waiting-list .field-item {
-  margin-bottom: 30px;
-}
-.waiting-list .waiting-list-button {
-  width: 100% !important;
-}
-.waiting-list .waiting-list-button:hover {
-  background-color: #505050;
-}
-.waiting-list .success-message {
-  text-align: center;
-  margin-bottom: 15px;
-}
-.waiting-list .success-message p {
-  margin: 0;
-}
-.waiting-list .no-tickets-text {
-  text-align: center;
-  font-weight: bold;
-}
-.waiting-list .added-success-message {
-  font-size: 22px;
-  margin-bottom: 10px;
-}

package/src/constants/index.ts

@@ -1,3 +0,0 @@
-export const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
-export const FEES_STYLES = { TRADITIONAL: 'TRADITIONAL', DISPLAY_BOTH: 'DISPLAY_BOTH', FINAL_WITH_BREAKDOWN: 'FINAL_WITH_BREAKDOWN' }
-export const DEFAULT_FEES_STYLE = FEES_STYLES.TRADITIONAL

package/src/env.ts

@@ -1,29 +0,0 @@
-// preview
-export const ENV = {
-  // EVENT_ID: 13090,
-  // BASE_URL: 'https://test.ticketfairy.com',
-  // CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
-  // CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
-  // STRIPE_PUBLISHABLE_KEY:
-  //   'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',
-  // BRAND_SLUG: 'test-mana-brand',
-  // X_SOURCE_ORIGIN: 'manacommon.com'
-  EVENT_ID: 6607,
-  BASE_URL: 'https://ttf.localhost',
-  CLIENT_ID: '11b907373250ac4813129922b039a828',
-  CLIENT_SECRET: '48118a9b8ffd4b120dc63861e6d6c0202fef4a5dbc46b53b',
-  STRIPE_PUBLISHABLE_KEY:
-    'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',
-  BRAND_SLUG: 'nop',
-  X_SOURCE_ORIGIN: 'ttf.localhost'
-}
-
-// prod
-export const ENV_PROD = {
-  EVENT_ID: 9766,
-  BASE_URL: 'https://www.ticketfairy.com',
-  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
-  CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
-  STRIPE_PUBLISHABLE_KEY:
-    'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5',
-}

package/src/hoc/CustomFields/index.tsx

@@ -1,85 +0,0 @@
-import { CircularProgress } from '@mui/material'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React, { useEffect, useState } from 'react'
-
-import { getCustomFields } from '../../api'
-import {
-  getDataWithCustomFields,
-  getFieldsKeys,
-  getQueryVariable,
-} from '../../utils'
-import { getAddOnDataWithCustomFields } from '../../utils/customFields'
-
-const withCustomFields = (Children: any) => (props: any) => {
-  const {
-    data = [],
-    ticketHoldersFields = {
-      id: 1,
-      fields: [],
-    },
-    skipCustomFields = true,
-    onGetCustomFieldsError = _identity,
-    onGetCustomFieldsSuccess = _identity,
-    ...args
-  } = props
-
-  const [lodaing, setLoading] = useState(!skipCustomFields)
-  const [customFieldsData, setCustomFieldsData] = useState({} as any)
-  const [customFieldsOrderKeys, setCustomFieldsOrderKeys] = useState([] as any)
-  const [customFieldsTicketHolderKeys, setCustomFieldsTicketHolderKeys] = useState([] as any)
-  const [customFieldsAddOnKeys, setCustomFieldsAddOnKeys] = useState([] as any)
-
-  const getFields = async () => {
-    try {
-      const eventId = getQueryVariable('event_id') || getQueryVariable("eventId") || ''
-      const customFields = await getCustomFields(eventId)
-
-      const orderFieldsKeys = getFieldsKeys(_get(customFields, 'orderFields', []))
-      const ticketHoldersFieldsKeys = getFieldsKeys(_get(customFields, 'ticketsFields', []))
-      const addOnFieldsKeys = getFieldsKeys(_get(customFields, 'addOnFields', []))
-
-      setCustomFieldsTicketHolderKeys(ticketHoldersFieldsKeys)
-      setCustomFieldsOrderKeys(orderFieldsKeys)
-      setCustomFieldsData(customFields)
-      setCustomFieldsAddOnKeys(addOnFieldsKeys)
-
-      onGetCustomFieldsSuccess(customFields)
-    } catch (e) {
-      onGetCustomFieldsError(e)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    if (!skipCustomFields) {
-      getFields()
-    }
-  }, [])
-
-  const {
-    dataWithCustomFields,
-    ticketHoldersWithCustomFields,
-  } = getDataWithCustomFields(data, ticketHoldersFields, customFieldsData)
-
-  const { addOnDataWithCustomFields } = getAddOnDataWithCustomFields(customFieldsData)
-
-  if (lodaing) {
-    return <CircularProgress size={50} />
-  }
-
-  return (
-    <Children
-      {...args}
-      data={dataWithCustomFields}
-      ticketHoldersFields={ticketHoldersWithCustomFields}
-      customFieldsOrderKeys={customFieldsOrderKeys}
-      customFieldsTicketHolderKeys={customFieldsTicketHolderKeys}
-      customFieldsAddOnKeys={customFieldsAddOnKeys}
-      addOnDataWithCustomFields={addOnDataWithCustomFields}
-    />
-  )
-}
-
-export { withCustomFields }

package/src/hoc/index.ts

@@ -1 +0,0 @@
-export { withCustomFields } from './CustomFields'

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { useCookieListener } from './useCookieListener'