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

package/src/components/common/NativeSelectFeild/index.tsx

@@ -1,86 +0,0 @@
-import { FormControl, FormHelperText, InputLabel } from '@mui/material'
-import Select from '@mui/material/Select'
-import { useTheme } from '@mui/styles'
-import { FieldInputProps, FormikProps } from 'formik'
-import _get from 'lodash/get'
-import _map from 'lodash/map'
-import React from 'react'
-
-export interface ISelectOption {
-  label: string | number;
-  value?: string | number;
-  [key: string]: any;
-}
-
-export interface ISelectField {
-  label: string;
-
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  theme: 'dark' | 'light';
-
-  // optional
-  type?: string;
-  selectOptions?: ISelectOption[];
-  onChange?: (e: any) => void;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const NativeSelectField = ({
-  label,
-  type = 'text',
-  field,
-  selectOptions = [] as ISelectOption[],
-  form: { touched, errors, setFieldValue },
-  theme,
-  onChange = () => {},
-}: ISelectField & IOtherProps) => {
-  const isTouched = Boolean(_get(touched, field.name))
-  const error = _get(errors, field.name)
-
-  const customTheme: any = useTheme()
-
-  return (
-    <FormControl fullWidth={true}>
-      <InputLabel
-        style={customTheme?.input}
-        htmlFor={field.name}
-        error={!!error && isTouched}
-        shrink={true}
-      >
-        {label}
-      </InputLabel>
-      <Select
-        id={field.name}
-        label={label}
-        type={type}
-        fullWidth={true}
-        error={!!error && isTouched}
-        inputProps={{
-          id: field.name,
-        }}
-        native={true}
-        className={`Mui-Select ${theme}`}
-        MenuProps={{ className: theme }}
-        {...field}
-        style={customTheme?.input}
-        onChange={e => {
-          onChange(e)
-          setFieldValue(field.name, e.target.value)
-        }}
-      >
-        {_map(selectOptions, option => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
-      </Select>
-      {isTouched && error ? (
-        <FormHelperText error={!!error && isTouched}>{error}</FormHelperText>
-      ) : null}
-    </FormControl>
-  )
-}

package/src/components/common/PhoneNumberField.tsx

@@ -1,117 +0,0 @@
-import { FieldInputProps, FormikProps } from 'formik'
-import _debounce from 'lodash/debounce'
-import _get from 'lodash/get'
-import MuiPhoneNumber from 'material-ui-phone-number'
-import React, { useCallback, useEffect } from 'react'
-
-import { validatePhoneNumber } from '../../api'
-
-export interface IPhoneNumberField {
-  label: string;
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  type: string;
-  disableDropdown: boolean;
-  fill: boolean;
-  setPhoneValidationIsLoading: (isLoading: boolean) => void;
-
-  // optional
-  defaultCountry?: string;
-  isCountryCodeEditable?: boolean;
-}
-
-export const PhoneNumberField = ({
-  label,
-  field,
-  form: {
-    errors,
-    touched,
-    setFieldError,
-    values,
-    initialValues,
-    setFieldValue,
-    setFieldTouched,
-    setErrors,
-    submitCount,
-  },
-  disableDropdown = true,
-  defaultCountry = 'us',
-  fill = false,
-  setPhoneValidationIsLoading,
-  isCountryCodeEditable,
-}: IPhoneNumberField) => {
-  const error = _get(errors, field.name)
-  const isTouched = Boolean(_get(touched, field.name))
-  const isSubmitAttempted = Boolean(submitCount && submitCount > 0)
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceCb = useCallback(
-    _debounce((cb: () => void) => void cb(), 1000),
-    []
-  )
-
-  useEffect(() => {
-    if (field.value) {
-      setPhoneValidationIsLoading(true)
-    }
-
-    debounceCb(async () => {
-      try {
-        if (!values[field.name]) {
-          const newErrors = { ...errors }
-          delete newErrors[field.name]
-          setErrors(newErrors)
-          return
-        }
-        if (values[field.name]) {
-          await validatePhoneNumber(values[field.name])
-        }
-        if (errors[field.name]) {
-          const newErrors = { ...errors }
-          delete newErrors[field.name]
-          setErrors(newErrors)
-        }
-      } catch (error) {
-        const message = _get(
-          error,
-          'response.data.message',
-          'Invalid phone number'
-        )
-        if (values[field.name] && errors[field.name] !== message) {
-          setFieldError(field.name, message)
-        }
-      } finally {
-        setPhoneValidationIsLoading(false)
-      }
-    })
-    // eslint-disable-next-line
-  }, [field.value])
-
-  return (
-    <>
-      <MuiPhoneNumber
-        name={field.name}
-        value={fill ? values[field.name] : initialValues[field.name]}
-        onChange={(value: any, country?: any) => {
-          if (`+${country?.dialCode}` === value || value === '+') {
-            setFieldValue(field.name, '')
-            setFieldError(field.name, '')
-          } else {
-            setFieldTouched(field.name, true)
-            setFieldValue(field.name, value)
-          }
-        }}
-        variant="outlined"
-        defaultCountry={defaultCountry}
-        disableDropdown={disableDropdown}
-        label={label}
-        error={!!error && (isTouched || fill || isSubmitAttempted)}
-        helperText={(isTouched || fill || isSubmitAttempted) && error}
-        fullWidth
-        autoFormat={false}
-        disableAreaCodes={true}
-        countryCodeEditable={isCountryCodeEditable}
-      />
-    </>
-  )
-}

package/src/components/common/PoweredBy.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-
-export const PoweredBy = () => (
-  <div className="powered-container">
-    <div className='powered-text'>Powered By</div>
-    <img
-      className='powered-img'
-      alt="The Ticket Fairy"
-      src={"https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg"}
-    />
-    <div className='powered-ttf'>
-      The<strong>Ticket</strong>Fairy
-    </div>
-  </div>
-)

package/src/components/common/RadioField.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import FormGroup from '@mui/material/FormGroup'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Radio from '@mui/material/Radio';
-import { FieldInputProps } from 'formik'
-import { useTheme } from '@mui/styles'
-
-export interface IRadioField {
-  label: string | number | JSX.Element;
-  field?: FieldInputProps<any>;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const RadioField = ({
-  label,
-  field,
-  theme,
-  disableDropdown,
-  ...rest
-}: IRadioField & IOtherProps) => {
-  const customTheme: any = useTheme()
-  return (
-    <FormGroup>
-      <FormControlLabel
-        control={<Radio {...field} {...rest} />}
-        label={label}
-        componentsProps={{
-          typography: customTheme?.checkbox
-        }}
-      />
-    </FormGroup>
-  )
-}

package/src/components/common/RadioGroupField/index.tsx

@@ -1,76 +0,0 @@
-import FormControl from '@mui/material/FormControl'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import FormHelperText from '@mui/material/FormHelperText'
-import FormLabel from '@mui/material/FormLabel'
-import Radio from '@mui/material/Radio'
-import RadioGroup from '@mui/material/RadioGroup'
-import { FieldInputProps, FormikProps } from 'formik'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React from 'react'
-
-export interface IRadio {
-  id: string | number;
-  label: string | number;
-  value: string | number;
-  [key: string]: any;
-}
-
-export interface IRadioGroupField {
-  label?: string;
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  radios: IRadio[];
-  disabled?: boolean;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const RadioGroupField = ({
-  label,
-  field,
-  radios = [],
-  disabled,
-  form: { touched, errors, setFieldValue },
-  onChange = _identity,
-}: IRadioGroupField) => {
-  const radioId = `radio-${field.name}`
-  const error = _get(errors, field.name)
-  const isTouched = Boolean(_get(touched, field.name))
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target as HTMLInputElement
-    setFieldValue(field.name, value)
-    onChange(e)
-  }
-
-  if (!radios) return null
-
-  return (
-    <FormControl disabled={disabled} error={isTouched && Boolean(error)}>
-      {isTouched && Boolean(error) ? (
-        <FormHelperText className="radio-error" error>
-          {error}
-        </FormHelperText>
-      ) : null}
-      {label && <FormLabel id={radioId}>{label}</FormLabel>}
-      <RadioGroup
-        aria-labelledby={radioId}
-        name={field.name}
-        value={field.value}
-        onChange={handleChange}
-      >
-        {radios.map(radio => {
-          const { id, label, value } = radio
-          return (
-            <FormControlLabel
-              key={id}
-              label={label}
-              value={value}
-              control={<Radio />}
-            />
-          )
-        })}
-      </RadioGroup>
-    </FormControl>
-  )
-}

package/src/components/common/RedirectModal.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import Modal from '@mui/material/Modal'
-import Box from '@mui/material/Box'
-
-interface IRedirectModal {
-  message: string
-  onClickOk: () => void
-}
-
-const style: React.CSSProperties = {
-  position: 'absolute',
-  top: '10%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none',
-  padding: '14px',
-  maxHeight: '85vh',
-  overflow: 'auto',
-}
-
-export const RedirectModal = ({
-  message = 'Your cart has expired. Please click on "OK" to return to the ticket selection page.',
-  onClickOk = () => {},
-}: IRedirectModal) => {
-  return (
-    <Modal
-      open={true}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className="redirect-modal"
-    >
-      <Box style={style}>
-        <p>{message}</p>
-        <div className="footer">
-          <button onClick={onClickOk}>OK</button>
-        </div>
-      </Box>
-    </Modal>
-  )
-}

package/src/components/common/SelectField/index.tsx

@@ -1,104 +0,0 @@
-import { FormControl, InputLabel } from '@mui/material'
-import Checkbox from '@mui/material/Checkbox'
-import FormHelperText from '@mui/material/FormHelperText'
-import ListItemText from '@mui/material/ListItemText'
-import MenuItem from '@mui/material/MenuItem'
-import OutlinedInput from '@mui/material/OutlinedInput'
-import Select, { SelectChangeEvent } from '@mui/material/Select'
-import { FieldInputProps, FormikProps } from 'formik'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _map from 'lodash/map'
-import React from 'react'
-
-interface ISelectOption {
-  id: string | number;
-  label: string | number;
-  value: string | number;
-}
-
-interface ISelectField {
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  options: ISelectOption[];
-
-  // optional
-  label?: string;
-  isMultiple?: boolean;
-  disabled?: boolean;
-  onChange?: (e: SelectChangeEvent<string[]>) => void;
-}
-
-function SelectField({
-  label,
-  isMultiple,
-  field,
-  form: { touched, errors, setFieldValue },
-  options = [],
-  disabled,
-  onChange = _identity,
-}: ISelectField) {
-  const { name, value = [] } = field
-  const selectId = `select-field-${name}`
-  const error = _get(errors, name)
-  const isTouched = Boolean(_get(touched, field.name))
-
-  const handleChange = (event: SelectChangeEvent<string[]>) => {
-    const {
-      target: { value },
-    } = event
-
-    setFieldValue(name, value)
-    onChange(event)
-  }
-
-  const getSelectedItemLabel = (selectedValue: any) => {
-    const selectedItem = options.find(option => option.value === selectedValue)
-    const label = _get(selectedItem, 'label', '')
-    return label
-  }
-
-  return (
-    <>
-      <FormControl
-        fullWidth={true}
-        disabled={disabled}
-        error={isTouched && Boolean(error)}
-      >
-        {label && <InputLabel id={selectId}>{label}</InputLabel>}
-        <Select
-          id={name}
-          labelId={selectId}
-          multiple={isMultiple}
-          value={value || []}
-          onChange={handleChange}
-          input={<OutlinedInput label={label} />}
-          renderValue={selected => {
-            if (isMultiple) {
-              const selectedLabels = _map(selected, (selectedValue: string) =>
-                getSelectedItemLabel(selectedValue)
-              )
-              return selectedLabels.join(', ')
-            }
-
-            const selectedLabel = getSelectedItemLabel(selected)
-            return selectedLabel
-          }}
-          sx={{ textAlign: 'start' }}
-        >
-          {options?.map((option: ISelectOption) => (
-            <MenuItem key={option.label} value={option.value}>
-              {isMultiple && <Checkbox checked={value.indexOf(option.value) > -1} />}
-              <ListItemText primary={option.label} />
-            </MenuItem>
-          ))}
-        </Select>
-        {isTouched && Boolean(error) ? (
-          <FormHelperText error>{error}</FormHelperText>
-        ) : null}
-      </FormControl>
-    </>
-  )
-}
-
-export { SelectField }

package/src/components/common/SnackbarAlert.tsx

@@ -1,52 +0,0 @@
-import { Alert, AlertColor, Snackbar, SnackbarOrigin } from '@mui/material'
-import React from 'react'
-
-interface ISnackbarAlertProps {
-  isOpen: boolean;
-  message: string;
-  type: AlertColor;
-  position?: SnackbarOrigin;
-  autoHideDuration?: number;
-  variant?: 'filled' | 'standard' | 'outlined';
-
-  onClose: () => void;
-}
-
-const SnackbarAlert = ({
-  isOpen,
-  message,
-  type,
-  position,
-  autoHideDuration = 3000,
-  variant,
-  onClose,
-}: ISnackbarAlertProps) => (
-  <div className="snackbar-alert-container">
-    <Snackbar
-      autoHideDuration={autoHideDuration}
-      open={isOpen}
-      anchorOrigin={position || { vertical: 'top', horizontal: 'center' }}
-      onClose={onClose}
-      classes={{
-        root: 'snackbar-alert-snackbar-root',
-      }}
-    >
-      <Alert
-        severity={type}
-        onClose={onClose}
-        variant={variant || 'filled'}
-        classes={{
-          icon: 'snackbar-alert-icon',
-          root: 'snackbar-alert-alert-root',
-          action: 'snackbar-alert-action',
-          message: 'snackbar-alert-message',
-          filled: 'snackbar-alert-filled',
-        }}
-      >
-        {message}
-      </Alert>
-    </Snackbar>
-  </div>
-)
-
-export default SnackbarAlert

package/src/components/common/index.tsx

@@ -1,11 +0,0 @@
-export { CheckboxField } from './CheckboxField'
-export { Checkbox } from './Checkbox'
-export { CustomField } from './CustomField'
-export { FormikPhoneNumberField } from './FormikPhoneNumberField'
-export { PhoneNumberField } from './PhoneNumberField'
-export { Loader } from './Loader'
-export { SelectField } from './SelectField'
-export { CopyMessageModal } from './CopyMessageModal'
-export { DatePickerField } from './DatePickerField'
-export { NativeSelectField } from './NativeSelectFeild'
-export { RadioGroupField } from './RadioGroupField'

package/src/components/common/socials.tsx

@@ -1,33 +0,0 @@
-import _identity from 'lodash/identity'
-import React from 'react'
-import SVG from 'react-inlinesvg'
-
-import { getImage } from '../../utils/getImage'
-
-interface IShareButtonProps {
-  url: string;
-  disabled: boolean;
-  children: Node;
-}
-
-export const SpotifyIcon = () => <SVG src={getImage('spotify.svg')} />
-
-export const InstagramIcon = () => <SVG src={getImage('instagram.svg')} />
-
-export const SocialButton = (props: IShareButtonProps) => {
-  const { children, url, disabled } = props
-
-  const handleClick = () => {
-    window.open(url)
-  }
-
-  return (
-    <button
-      className={`react-share__ShareButton ${disabled ? 'disabled-action' : ''}`}
-      type="button"
-      onClick={!disabled ? handleClick : _identity}
-    >
-      {children}
-    </button>
-  )
-}

package/src/components/confirmModal/index.tsx

@@ -1,60 +0,0 @@
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import CircularProgress from '@mui/material/CircularProgress'
-import Modal from '@mui/material/Modal'
-import _identity from 'lodash/identity'
-import React, { FC } from 'react'
-
-interface Props {
-  message: string;
-  loading?: boolean;
-  hideCancelBtn?: boolean;
-  onClose?: () => void;
-  onConfirm?: () => void;
-}
-
-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',
-}
-
-const ConfirmModal: FC<Props> = ({
-  message = '',
-  loading = false,
-  hideCancelBtn = false,
-  onClose = _identity,
-  onConfirm = _identity,
-}) => (
-  <Modal
-    open={true}
-    onClose={onClose}
-    aria-labelledby="modal-modal-title"
-    aria-describedby="modal-modal-description"
-    className="confirm-modal"
-  >
-    <Box style={style}>
-      <p>{message}</p>
-      <div className="footer">
-        {!hideCancelBtn && (
-          <Button onClick={onClose} disabled={loading}>
-            Cancel
-          </Button>
-        )}
-        <Button onClick={onConfirm}>
-          {loading ? <CircularProgress size="22px" /> : 'OK'}
-        </Button>
-      </div>
-    </Box>
-  </Modal>
-)
-
-export default ConfirmModal