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

package/src/components/loginModal/index.tsx

@@ -1,263 +0,0 @@
-import './style.css'
-
-import Box from '@mui/material/Box'
-import Modal from '@mui/material/Modal'
-import Tab from '@mui/material/Tab'
-import Tabs from '@mui/material/Tabs'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import axios, { AxiosError } from 'axios'
-import { Field, Form, Formik } from 'formik'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React, { FC, useState } from 'react'
-
-import { authorize, getProfileData } from '../../api'
-import { isBrowser, setLoggedUserData } from '../../utils'
-import { requiredValidator } from '../../validators'
-import { CustomField } from '../common/CustomField'
-import { PoweredBy } from '../common/PoweredBy'
-import { COLORS, MODAL_DIMENSIONS, TAB_STYLES } from './constants'
-import { SignUpForm } from './SignUpForm'
-
-export interface Props {
-  onClose: () => void;
-  onLogin: (res: IProfileData) => void;
-  alreadyHasUser?: boolean;
-  userExpired?: boolean;
-  onAuthorizeSuccess?: (res: any) => void;
-  onAuthorizeError?: (e: AxiosError) => void;
-  onGetProfileDataSuccess?: (res: any) => void;
-  onGetProfileDataError?: (e: AxiosError) => void;
-  onForgotPassword?: () => void;
-  onSignup?: () => void;
-  modalClassname?: string;
-  logo?: string;
-  showForgotPasswordButton?: boolean;
-  showSignUpButton?: boolean;
-  showPoweredByImage?: boolean;
-  registerUrl?: string;
-}
-
-const style: React.CSSProperties = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: MODAL_DIMENSIONS.WIDTH.DESKTOP,
-  backgroundColor: '#e3e3e3',
-  border: `1px solid ${COLORS.BORDER}`,
-  outline: 'none',
-}
-
-const mobileStyle: React.CSSProperties = {
-  ...style,
-  width: MODAL_DIMENSIONS.WIDTH.MOBILE,
-}
-
-export const LoginModal: FC<Props> = ({
-  onClose,
-  onLogin,
-  alreadyHasUser = false,
-  userExpired = false,
-  onGetProfileDataSuccess = _identity,
-  onGetProfileDataError = _identity,
-  onForgotPassword = _identity,
-  onSignup = _identity,
-  modalClassname = '',
-  logo,
-  showForgotPasswordButton = false,
-  showSignUpButton = false,
-  showPoweredByImage = false,
-}) => {
-  const [error, setError] = useState('')
-  const [activeTab, setActiveTab] = useState<'login' | 'signup'>('login')
-  const isMobile = useMediaQuery('(max-width:600px)')
-
-  // If onSignup is provided (custom callback), use old behavior
-  const useCustomSignup = onSignup !== _identity
-
-  const handleTabChange = (_event: React.SyntheticEvent, newValue: 'login' | 'signup') => {
-    setActiveTab(newValue)
-  }
-
-  return (
-    <Modal
-      open={true}
-      onClose={onClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className={`login-modal ${modalClassname}`}
-    >
-      <Box style={isMobile ? mobileStyle : style}
-        sx={{
-          '@media screen and (orientation:landscape)': {
-            maxHeight: '80vh',
-            overflowY: 'auto'
-          }
-        }}
-      >
-        <div>
-          {showSignUpButton && !useCustomSignup && (
-            <Tabs
-              value={activeTab}
-              onChange={handleTabChange}
-              variant="fullWidth"
-              sx={{
-                backgroundColor: TAB_STYLES.BACKGROUND_COLOR,
-                marginBottom: TAB_STYLES.MARGIN_BOTTOM,
-                '& .MuiTabs-indicator': {
-                  backgroundColor: TAB_STYLES.INDICATOR.BACKGROUND_COLOR,
-                },
-              }}
-            >
-              <Tab
-                label="Login"
-                value="login"
-                sx={{
-                  fontFamily: TAB_STYLES.LABEL.FONT_FAMILY,
-                  fontWeight: TAB_STYLES.LABEL.FONT_WEIGHT,
-                  fontSize: TAB_STYLES.LABEL.FONT_SIZE,
-                  textTransform: TAB_STYLES.LABEL.TEXT_TRANSFORM,
-                  color: TAB_STYLES.LABEL.COLOR,
-                  '&.Mui-selected': {
-                    color: TAB_STYLES.LABEL.SELECTED_COLOR,
-                  },
-                }}
-              />
-              <Tab
-                label="Sign Up"
-                value="signup"
-                sx={{
-                  fontFamily: TAB_STYLES.LABEL.FONT_FAMILY,
-                  fontWeight: TAB_STYLES.LABEL.FONT_WEIGHT,
-                  fontSize: TAB_STYLES.LABEL.FONT_SIZE,
-                  textTransform: TAB_STYLES.LABEL.TEXT_TRANSFORM,
-                  color: TAB_STYLES.LABEL.COLOR,
-                  '&.Mui-selected': {
-                    color: TAB_STYLES.LABEL.SELECTED_COLOR,
-                  },
-                }}
-              />
-            </Tabs>
-          )}
-
-          {activeTab === 'login' ? (
-            <Formik
-              initialValues={{ email: '', password: '' }}
-              onSubmit={async ({ email, password }) => {
-              try {
-                const body = { email, password }
-                const authRes = await authorize(body)
-                let profileResponse = null
-                try {
-                  profileResponse = await getProfileData()
-                  onGetProfileDataSuccess(profileResponse.data)
-                } catch (e) {
-                  if (axios.isAxiosError(e)) {
-                    onGetProfileDataError(e)
-                  }
-                  return
-                }
-
-                const profileSpecifiedData = profileResponse.data
-                const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                if (isBrowser) {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
-                  const event = new window.CustomEvent('tf-login')
-                  window.document.dispatchEvent(event)
-                }
-                onLogin(_get(authRes, 'data.data', {}) as IProfileData)
-              } catch (e) {
-                if (axios.isAxiosError(e)) {
-                  const error = _get(e, 'response.data.message', 'Error')
-                  setError(error)
-                } else if (e instanceof Error) {
-                  setError(e?.message || 'Error')
-                }
-              }
-            }}
-          >
-            {props => (
-              <Form onSubmit={props.handleSubmit}>
-                <div className="login-logo-container">
-                  <img
-                    className="login-logo-tff"
-                    src={
-                      logo ||
-                      'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
-                    }
-                    alt="logo"
-                  />
-                </div>
-                <div className="server_auth__error">{error}</div>
-                {alreadyHasUser && (
-                  <p className="info-text-for-login">
-                    It appears this email is already attached to an account. Please log in
-                    here to complete your registration.
-                  </p>
-                )}
-                {userExpired && (
-                  <p className="info-text-for-login">
-                    Your session has expired, please log in again.
-                  </p>
-                )}
-                <div className="login-modal-body">
-                  <div className="login-modal-body__email">
-                    <Field
-                      name="email"
-                      label="Email"
-                      type="email"
-                      component={CustomField}
-                      theme="light"
-                      validate={requiredValidator}
-                    />
-                  </div>
-                  <div className="login-modal-body__password">
-                    <Field
-                      name="password"
-                      label="Password"
-                      type="password"
-                      component={CustomField}
-                      theme="light"
-                      validate={requiredValidator}
-                    />
-                  </div>
-                  <div className="login-action-button">
-                    <button type="submit">Login</button>
-                  </div>
-                  {showForgotPasswordButton && (
-                    <div className="forgot-password">
-                      <span aria-hidden="true" onClick={onForgotPassword}>
-                        Forgot password?
-                      </span>
-                    </div>
-                  )}
-                  {showSignUpButton && useCustomSignup && (
-                    <div className="forgot-password">
-                      <span
-                        aria-hidden="true"
-                        onClick={onSignup}
-                        style={{ cursor: 'pointer' }}
-                      >
-                        Sign up
-                      </span>
-                    </div>
-                  )}
-                  {showPoweredByImage ? <PoweredBy /> : null}
-                </div>
-              </Form>
-            )}
-          </Formik>
-          ) : (
-            <SignUpForm
-              onSignUpSuccess={onLogin}
-              onGetProfileDataSuccess={onGetProfileDataSuccess}
-              onGetProfileDataError={onGetProfileDataError}
-              logo={logo}
-            />
-          )}
-        </div>
-      </Box>
-    </Modal>
-  )
-}

package/src/components/loginModal/style.css

@@ -1,116 +0,0 @@
-.modal-title {
-  padding-left: 25px;
-  background-color: #fff;
-  height: 49px;
-  display: flex;
-  align-items: center;
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 22px;
-  position: relative;
-}
-
-.login-modal-body {
-  padding: 15px 25px;
-  max-width: 100%;
-}
-
-.login-modal-body input {
-  background: white !important;
-}
-
-/* Fix for Grid layout */
-.login-modal-body.MuiGrid-container {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  width: 100%;
-}
-
-.login-modal-body .MuiGrid-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.login-modal-body__email {
-  margin-bottom: 20px;
-}
-
-.login-modal-body__password {
-  margin-bottom: 20px;
-}
-
-.login-action-button button {
-  padding: 10px;
-  width: 100%;
-  margin: 10px 0;
-  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;
-}
-.login-action-button button:hover {
-  background-color: #505050;
-  border-color: #505050;
-}
-.login-logo-tff{
-    height: 60px;
-}
-.server_auth__error {
-    color: red;
-    padding-left: 25px;
-    padding-top: 15px;
-    font-size: 12px;
-    font-family: Inter;
-    font-style: normal;
-}
-
-.info-text-for-login {
-    font-size: 14px;
-    padding-left: 10px;
-    margin-bottom: 4px;
-}
-.forgot-password {
-  text-align: center;
-}
-.forgot-password span,
-.forgot-password a {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-.forgot-password span:hover,
-.forgot-password a:hover {
-  text-decoration: underline;
-}
-
-/* Sign Up Form Specific Styles */
-.login-modal-body__name-fields {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.login-modal-body__first-name,
-.login-modal-body__last-name {
-  flex: 1;
-}
-
-.login-modal-body__password-confirmation {
-  margin-bottom: 20px;
-}
-
-.login-action-button button:disabled {
-  background-color: #999;
-  cursor: not-allowed;
-}
-
-.login-action-button button:disabled:hover {
-  background-color: #999;
-}

package/src/components/myTicketsContainer/index.tsx

@@ -1,228 +0,0 @@
-import './style.css'
-
-import Autocomplete from '@mui/material/Autocomplete'
-import CircularProgress from '@mui/material/CircularProgress'
-import Paper from '@mui/material/Paper'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
-import TableCell from '@mui/material/TableCell'
-import TableContainer from '@mui/material/TableContainer'
-import TableHead from '@mui/material/TableHead'
-import TablePagination from '@mui/material/TablePagination'
-import TableRow from '@mui/material/TableRow'
-import TextField from '@mui/material/TextField'
-import axios from 'axios'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React, { useEffect, useState } from 'react'
-
-import { getOrders } from '../../api'
-import { getCookieByName } from '../../utils'
-import { LoginModal } from '../loginModal'
-import MyTicketsRow from './row'
-import tableConfig from './tableConfig'
-
-interface MyTicketsTypes {
-  handleDetailsInfo: (id: string | number) => void;
-  onGetOrdersSuccess: (res: any) => void;
-  onGetOrdersError: (err: any) => void;
-  logo?: string;
-  theme?: 'light' | 'dark';
-  selectEventsLabel?: string;
-  openLoginModal?: () => void;
-  hideDetailsButton?: boolean;
-  customNoOrderContent?: React.ReactNode;
-  columns?: IColumnData[];
-}
-
-interface EventFilter {
-  event_name: string;
-  url_name: string;
-}
-
-export const MyTicketsContainer = ({
-  handleDetailsInfo = _identity,
-  onGetOrdersSuccess = _identity,
-  onGetOrdersError = _identity,
-  theme = 'dark',
-  selectEventsLabel = 'Events',
-  logo,
-  hideDetailsButton = false,
-  columns = [],
-  openLoginModal,
-  customNoOrderContent = null,
-}: MyTicketsTypes) => {
-  const [data, setData] = useState<any>(null)
-  const [loading, setLoading] = useState(true)
-  const [limit, setLimit] = useState(10)
-  const [filter, setFilter] = useState('')
-
-  const isWindowDefined = typeof window !== 'undefined'
-  const [isLogged, setIsLogged] = useState(
-    isWindowDefined ? !!getCookieByName('X-TF-ECOMMERCE') : false
-  )
-  const [showModalLogin, setShowModalLogin] = useState(false)
-  const [userExpired, setUserExpired] = useState(false)
-
-  //just once
-  useEffect(() => {
-    fetchData(1, limit, filter)
-  }, [isLogged])
-
-  const fetchData = async (page: number, limit: number, eventSlug: string) => {
-    try {
-      setLoading(true)
-      const response = await getOrders(page, limit, eventSlug)
-      onGetOrdersSuccess(response)
-
-      const data = _get(response, 'data.attributes')
-      data.page -= 1
-
-      setData(data)
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        if (_get(error, 'response.data.error') === 'invalid_token') {
-          if (isWindowDefined) {
-            window.localStorage.removeItem('user_data')
-            setUserExpired(true)
-            setShowModalLogin(true)
-          }
-        }
-      }
-      onGetOrdersError(error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleChangePage = (_event: any, newPage: number) => {
-    fetchData(newPage + 1, limit, filter)
-  }
-
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
-    fetchData(1, +event.target.value, filter)
-    setLimit(+event.target.value)
-  }
-
-  const onChange = (
-    _event: React.SyntheticEvent<Element, Event>,
-    eventFilter: EventFilter | null
-  ) => {
-    fetchData(1, limit, eventFilter?.url_name || '')
-    setFilter(eventFilter?.url_name || '')
-  }
-
-  const noOrderContent = customNoOrderContent || (<div className="no_orders_section">
-    <div className="nodata_title">
-      You have no current ticket orders on this account
-    </div>
-    <div className="nodata_subtitle">
-      Discover your next nite out <a href="/events">here</a>.
-    </div>
-  </div>)
-
-  return (
-    <div className={`my-ticket ${theme}`}>
-      <>
-        {showModalLogin || !isLogged ? (
-          openLoginModal ? (
-            openLoginModal()
-          ) : (
-            <LoginModal
-              onClose={() => {
-                setShowModalLogin(false)
-              }}
-              onLogin={() => {
-                setShowModalLogin(false)
-                setUserExpired(false)
-                setIsLogged(true)
-              }}
-              userExpired={userExpired}
-              logo={logo}
-              showForgotPasswordButton
-            />
-          )
-        ) : null}
-      </>
-      {data?.orders?.length ? (
-        <>
-          <h2>My Ticket Orders</h2>
-          <Autocomplete
-            disablePortal
-            id="combo-box-demo"
-            getOptionLabel={(option: EventFilter) => option.event_name}
-            onChange={onChange}
-            options={data.purchased_events}
-            sx={{ width: 300 }}
-            renderInput={params => <TextField {...params} label={selectEventsLabel} />}
-          />
-          {loading ? (
-            <div className="loading">
-              <CircularProgress />
-            </div>
-          ) : (
-            <>
-              <TableContainer component={Paper} className="my-ticket-table">
-                <Table aria-label="collapsible table">
-                  <TableHead>
-                    <TableRow>
-                      {tableConfig(columns).header.map(
-                        (column: string, index: number) => (
-                          <TableCell key={index}>{column}</TableCell>
-                        )
-                      )}
-                      {!hideDetailsButton && <TableCell />}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {data.orders?.map((row: RowItems) => (
-                      <MyTicketsRow
-                        key={row.id}
-                        row={row}
-                        handleDetailsInfo={handleDetailsInfo}
-                        columns={columns}
-                        hideDetailsButton={hideDetailsButton}
-                      />
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-              <TablePagination
-                rowsPerPageOptions={[10, 25, 100]}
-                component="div"
-                count={data.total_count}
-                rowsPerPage={limit}
-                page={data.page}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-              />
-            </>
-          )}
-        </>
-      ) : (
-        !loading && (
-          <>
-            <h2>My Ticket Orders</h2>
-            {noOrderContent}
-          </>
-        )
-      )}
-      <>
-        {showModalLogin && (
-          <LoginModal
-            onClose={() => {
-              setShowModalLogin(false)
-            }}
-            onLogin={() => {
-              setShowModalLogin(false)
-              setUserExpired(false)
-              setIsLogged(true)
-            }}
-            userExpired={userExpired}
-            showForgotPasswordButton
-          />
-        )}
-      </>
-    </div>
-  )
-}

package/src/components/myTicketsContainer/row.tsx

@@ -1,46 +0,0 @@
-import TableCell from '@mui/material/TableCell'
-import TableRow from '@mui/material/TableRow'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React from 'react'
-
-import tableConfig from './tableConfig'
-
-const Row = ({
-  row,
-  handleDetailsInfo,
-  columns = [],
-  hideDetailsButton,
-}: RowPropsTypes) => (
-  <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-    {tableConfig(columns).body.map((column: ITableBodyType, index: number) => (
-      <TableCell
-        component="th"
-        scope="row"
-        key={index}
-        onClick={e => {
-          const { columnProps, component }: IRowReturnType = column(row)
-          const onCellClick = columnProps?.onCellClick || _identity
-          const componentProps = _get(component, 'props', {})
-
-          onCellClick(componentProps, e)
-        }}
-      >
-        {column(row).component}
-      </TableCell>
-    ))}
-    {!hideDetailsButton && (
-      <TableCell component="th" scope="row">
-        <button
-          type="button"
-          className="order-details-button"
-          onClick={() => handleDetailsInfo(row.id)}
-        >
-          Details
-        </button>
-      </TableCell>
-    )}
-  </TableRow>
-)
-
-export default Row

package/src/components/myTicketsContainer/style.css

@@ -1,40 +0,0 @@
-.my-ticket {
-  padding: 30px;
-}
-.my-ticket-table {
-  margin-top: 30px;
-}
-.my-ticket .loading {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-.my-ticket .event-info {
-  display: flex;
-  align-items: center;
-}
-.my-ticket thead th {
-  font-weight: 700;
-}
-.my-ticket .event-info img {
-  width: 50px;
-  margin-right: 10px;
-}
-.my-ticket .order-details-button {
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  background-color: #32325d;
-  transition: all 150ms ease;
-  cursor: pointer;
-  padding: 10px 14px;
-}
-.my-ticket .order-details-button:hover {
-  background-color: #505050;
-}