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

package/src/components/preRegistration/utils.ts

@@ -1,163 +0,0 @@
-import { FormikValues } from 'formik'
-import _forEach from 'lodash/forEach'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-import _split from 'lodash/split'
-
-import {
-  combineValidators,
-  passwordValidator,
-  requiredValidator,
-} from '../../validators'
-import { IShareButton } from '../confirmationContainer'
-
-export const getValidateFunctions = ({
-  element,
-  values,
-}: {
-  element: IFormField;
-  values: FormikValues;
-}) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const validationFunctions: any[] = []
-  if (element.required) {
-    validationFunctions.push(requiredValidator)
-  }
-
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate)
-  }
-
-  if (element.name === 'password') {
-    validationFunctions.push(passwordValidator)
-  }
-
-  if (element.name === 'confirmEmail') {
-    const isSameEmail = (confirmEmail?: string) =>
-      values.email !== confirmEmail ? 'Please confirm your email address correctly' : null
-    validationFunctions.push(isSameEmail)
-  }
-
-  if (element.name === 'confirmPassword') {
-    const isSame = (confirmPassword?: string) =>
-      values.password !== confirmPassword ? 'Password confirmation does not match' : null
-    validationFunctions.push(isSame)
-  }
-
-  return combineValidators(...validationFunctions)
-}
-
-export const getFormInitialValues = (fieldsSections: IFormFieldsSection[]) => {
-  const initialValues: { [key: string]: string | number | boolean } = {}
-  const isWindowDefined = typeof window !== 'undefined'
-  const userData = JSON.parse(
-    isWindowDefined ? window.localStorage.getItem('user_data') || '{}' : '{}'
-  ) as IProfileData
-
-  _forEach(fieldsSections, item => {
-    _forEach(item.fields, fieldItem => {
-      switch (fieldItem.name) {
-        case 'country':
-        case 'numTickets':
-          initialValues[fieldItem.name] = 1
-          break
-        case 'brandOptIn':
-          initialValues[fieldItem.name] = true
-          break
-        case 'confirmEmail':
-          initialValues[fieldItem.name] =
-            _get(userData, fieldItem.name) || _get(userData, 'email') || ''
-          break
-        default:
-          initialValues[fieldItem.name] = _get(userData, fieldItem.name) || ''
-          break
-      }
-    })
-  })
-
-  return initialValues
-}
-
-export const updateFormFieldsAttributes = (
-  formFields: IFormFieldsSection[],
-  attributes?: IFieldAttribute
-) => {
-  if (attributes && !_isEmpty(attributes)) {
-    const updatedFormFields = _map(formFields, fieldSection => {
-      const fieldSectionAttributes = attributes[fieldSection.name] || {}
-
-      const updatedFields = _map(fieldSection.fields, fieldItem => {
-        const fieldItemAttributes = attributes[fieldItem.name] || {}
-        return { ...fieldItem, ...fieldItemAttributes }
-      })
-
-      return {
-        ...fieldSection,
-        ...fieldSectionAttributes,
-        fields: updatedFields,
-      }
-    })
-
-    return updatedFormFields
-  }
-  return formFields
-}
-
-export const shareOptionsAdapter = (
-  data: Array<IShareOptionsActionData>,
-  shareUrl: string
-) => {
-  const adaptedData: Array<IShareButton> = []
-  _forEach(data, option => {
-    if (option.action !== 'shared_url') {
-      const [platform, method] = _split(option.action, '_')
-      const mainLabel = method ? method[0].toUpperCase() + method.substring(1) : 'Share'
-      adaptedData.push({
-        mainLabel: option.action === 'twitter' ? 'Tweet' : mainLabel + ' on',
-        subLabel:
-          option.action === 'twitter'
-            ? ' to your followers'
-            : platform[0].toUpperCase() + platform.substring(1),
-        platform,
-        shareData: {
-          quote: 'as',
-          url: option.socialUrl || shareUrl,
-        },
-        points: option.point,
-        eventActionId: option.id,
-        oneTimeAction: option.oneTimeAction,
-        alreadyApplied: option.alreadyApplied,
-      })
-    }
-  })
-  return adaptedData
-}
-
-export const getShuffleMethodByName = (
-  tokenShuffleMethod: string
-): ((value: string) => string) => {
-  const reverseString = (value: string) => value.split('').reverse().join('')
-  const symmetricShuffleString = (value: string) => {
-    const lengthOfStr = value.length
-    const part1 = value.substring(0, lengthOfStr / 2)
-    return value.substring(lengthOfStr / 2) + part1
-  }
-  const shuffleEveryTwoSymbolsInString = (value: string): string => {
-    const words = value.split('')
-    let shuffledStr = ''
-    for (let i = 0; i < words.length; i += 2) {
-      shuffledStr = shuffledStr.concat(words[i + 1], words[i])
-    }
-    return shuffledStr
-  }
-
-  if (tokenShuffleMethod === 'reverse_string') {
-    return reverseString
-  } else if (tokenShuffleMethod === 'symmetric_shuffle_string') {
-    return symmetricShuffleString
-  } else if (tokenShuffleMethod === 'shuffle_every_two_symbols_in_string')
-    return shuffleEveryTwoSymbolsInString
-  return _identity
-}

package/src/components/registerForm/adapters/index.tsx

@@ -1,10 +0,0 @@
-import _map from 'lodash/map'
-
-export const collectStates = (states: any) => {
-  const mappedStates = _map(states, (item, key) => ({
-    label: item,
-    value: key,
-  }))
-
-  return mappedStates
-}

package/src/components/registerForm/constants.tsx

@@ -1,98 +0,0 @@
-import React from 'react'
-
-import { CONFIGS } from '../../utils'
-
-export const formDefaultFields: IFormFieldsSection[] = [
-  {
-    name: 'basic-info',
-    groupLabel: 'Create your account.',
-    groupLabelClassName: '',
-    groupClassName: '',
-    fields: [
-      {
-        className: 'half-width',
-        name: 'firstName',
-        label: 'First Name',
-        type: 'text',
-        required: true,
-        onValidate: null,
-      },
-      {
-        className: 'half-width',
-        name: 'lastName',
-        label: 'Last Name',
-        type: 'text',
-        required: true,
-        onValidate: null,
-      },
-      {
-        name: 'email',
-        label: 'Email',
-        type: 'email',
-        required: true,
-        onValidate: null,
-      },
-      {
-        name: 'confirmEmail',
-        label: 'Confirm Email',
-        type: 'email',
-        required: true,
-        onValidate: null,
-      },
-    ],
-  },
-  {
-    name: 'billing-info',
-    groupLabel: '',
-    groupLabelClassName: '',
-    groupClassName: '',
-    fields: [
-      {
-        className: 'half-width',
-        name: 'zip',
-        label: 'Post Code/Zip',
-        type: 'text',
-        required: true,
-        onValidate: null,
-      },
-      {
-        className: 'half-width',
-        name: 'country',
-        label: 'Country',
-        type: 'select',
-        required: true,
-        onValidate: null,
-      },
-    ],
-  },
-  {
-    name: 'password-info',
-    groupLabel: (
-      <div className="email-info-block">
-        <span>Choose a password for your new</span>
-        <b> {CONFIGS.CLIENT_NAME || 'Mana Common'} </b>
-        <span>account</span>
-      </div>
-    ),
-    groupLabelClassName: '',
-    groupClassName: '',
-    fields: [
-      {
-        className: 'half-width',
-        name: 'password',
-        label: 'Password',
-        type: 'password',
-        required: true,
-        onValidate: null,
-      },
-      {
-        className: 'half-width',
-        name: 'confirmPassword',
-        label: 'Confirm Password',
-        type: 'password',
-        required: true,
-        onValidate: null,
-      },
-    ],
-  },
-]

package/src/components/registerForm/index.tsx

@@ -1,188 +0,0 @@
-import { Button, CircularProgress } from '@mui/material'
-import axios, { AxiosError } from 'axios'
-import { Form, Formik, FormikValues } from 'formik'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _map from 'lodash/map'
-import React, { FC, useEffect, useState } from 'react'
-
-import { getCountries, getProfileData, getStates, register } from '../../api'
-import { CONFIGS, getFormInitialValues, getQueryVariable } from '../../utils'
-import { FieldsSection } from '../common/FieldSection'
-import { updateFormFieldsAttributes } from '../common/FieldSection/utils'
-import ConfirmModal from '../confirmModal'
-import { collectStates } from './adapters'
-import { formDefaultFields } from './constants'
-
-interface IRegistrationProps {
-  formFields?: Array<IFormFieldsSection>;
-  additionalFieldAttribute?: IFieldAttribute;
-  registrationType: string;
-  onGetCountriesSuccess?: (res: any) => void;
-  onGetCountriesError?: (e: AxiosError) => void;
-  onRegisterAccountSuccess?: (res: any) => void;
-  onRegisterAccountError?: (e: AxiosError) => void;
-  onGetStatesSuccess?: (res: any) => void;
-  onGetStatesError?: (e: AxiosError) => void;
-  customerEmail: string;
-}
-
-export const RegistrationForm: FC<IRegistrationProps> = ({
-  formFields,
-  additionalFieldAttribute,
-  registrationType,
-  customerEmail,
-  onGetCountriesSuccess = _identity,
-  onGetCountriesError = _identity,
-  onRegisterAccountSuccess = _identity,
-  onRegisterAccountError = _identity,
-  onGetStatesSuccess = _identity,
-  onGetStatesError = _identity,
-}) => {
-  const [errorMessage, setErrorMessage] = useState('')
-  const [countries, setCountries] = useState<{ [key: string]: string | number }[]>([])
-  const [states, setStates] = useState<{ [key: string]: string | number }[]>([])
-  const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(false)
-  const [showErrorModal, setshowErrorModal] = useState(false)
-
-  const updatedFormFields = updateFormFieldsAttributes(
-    formFields || formDefaultFields,
-    additionalFieldAttribute
-  )
-
-  // Fetch countries data
-  const fetchCountries = async () => {
-    try {
-      const res = await getCountries()
-      setCountries(
-        _map(res.data, item => ({
-          label: item.name,
-          value: item.id,
-        }))
-      )
-      onGetCountriesSuccess(res.data)
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        const errorMessage = _get(e, 'response.data.message') || 'Error'
-        setErrorMessage(errorMessage)
-        onGetCountriesError(e)
-      }
-    }
-  }
-
-  // Fetch states data
-  const fetchStates = async (countryId?: string | number) => {
-    try {
-      const fetchCountryId = countryId ? countryId : '1'
-      const res = await getStates(fetchCountryId)
-      const states = _get(res, 'data', [])
-      const mappedStates = collectStates(states)
-      setStates(mappedStates)
-      onGetStatesSuccess(res.data)
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        const errorMessage = _get(e, 'response.data.message', {}) as AxiosError
-        onGetStatesError(errorMessage)
-      }
-    }
-  }
-
-  const handleRegisterAccount = async (values: FormikValues) => {
-    const accessHash = getQueryVariable('hash') || ''
-
-    try {
-      const bodyFormData = new FormData()
-
-      bodyFormData.append('first_name', values.firstName)
-      bodyFormData.append('last_name', values.lastName)
-      bodyFormData.append('email', values.email)
-      bodyFormData.append('zip', values.zip)
-      bodyFormData.append('city', values.city)
-      bodyFormData.append('country', values.country)
-      bodyFormData.append('password', values.password)
-      bodyFormData.append('phone', values.phone || '')
-      bodyFormData.append('password_confirmation', values.confirmPassword)
-      bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
-      bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
-      bodyFormData.append('register_for', registrationType)
-      bodyFormData.append('delegation_access_hash', accessHash)
-
-      await register(bodyFormData)
-      const profileRes = await getProfileData()
-
-      window.localStorage.setItem('user_data', JSON.stringify(_get(profileRes, 'data')))
-      onRegisterAccountSuccess(profileRes)
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        const errorMessage = _get(e, 'response.data.message') || 'Error'
-        onRegisterAccountError(e)
-        setshowErrorModal(true)
-        setErrorMessage(errorMessage)
-      } else if (e instanceof Error) {
-        setErrorMessage(e?.message || 'Error')
-      }
-    }
-  }
-
-  useEffect(() => {
-    fetchCountries()
-    fetchStates()
-  }, [])
-
-  return (
-    <div className="register-form-container">
-      <h2>Create an account</h2>
-      <div className="register-sub-title">
-        To manage your tickets, please create an account:
-      </div>
-      {showErrorModal && (
-        <ConfirmModal
-          hideCancelBtn={true}
-          message={errorMessage}
-          onClose={() => (window.location.href = '/')}
-          onConfirm={() => (window.location.href = '/')}
-        />
-      )}
-      {errorMessage && <div className="register-error">{errorMessage}</div>}
-      <Formik
-        initialValues={{
-          ...getFormInitialValues(updatedFormFields),
-          email: customerEmail,
-        }}
-        enableReinitialize={true}
-        onSubmit={handleRegisterAccount}
-      >
-        {props => (
-          <Form>
-            <div className="register-body">
-              <FieldsSection
-                disableField={'email'}
-                containerClass="register"
-                formFields={updatedFormFields}
-                values={props.values}
-                setFieldValue={props.setFieldValue}
-                setPhoneValidationIsLoading={setPhoneValidationIsLoading}
-                countries={countries}
-                states={states}
-                onFieldChange={(name, value) => {
-                  if (name === 'country') {
-                    fetchStates(value)
-                  }
-                }}
-              />
-            </div>
-            <div className="button-container">
-              <Button
-                className="register-button"
-                type="submit"
-                disabled={props.isSubmitting || phoneValidationIsLoading}
-              >
-                {props.isSubmitting ? <CircularProgress size={26} /> : 'Create Account'}
-              </Button>
-            </div>
-          </Form>
-        )}
-      </Formik>
-    </div>
-  )
-}

package/src/components/registerModal/index.tsx

@@ -1,154 +0,0 @@
-import './style.css'
-
-import { AxiosError } from 'axios'
-import { Field, Form, Formik } from 'formik'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React, { FC } from 'react'
-
-import { getProfileData, register } from '../../api'
-import { CONFIGS } from '../../utils'
-import { requiredValidator } from '../../validators'
-import { CustomField } from '../common/CustomField'
-import { PoweredBy } from '../common/PoweredBy'
-
-interface Props {
-  onClose: () => void;
-  onRegister: () => void;
-  onGetProfileDataSuccess: (res: any) => void;
-  onGetProfileDataError: (e: AxiosError) => void;
-  showPoweredByImage?: boolean;
-}
-
-export const RegisterModal: FC<Props> = ({
-  onClose,
-  onGetProfileDataSuccess = _identity,
-  onGetProfileDataError = _identity,
-  showPoweredByImage = false,
-}) => (
-  <div
-    style={{
-      display: 'flex',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      left: 0,
-      backgroundColor: 'white',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 10,
-    }}
-  >
-    <Formik
-      initialValues={{
-        firstName: '',
-        lastName: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-      }}
-      onSubmit={async ({ firstName, lastName, email, password, confirmPassword }) => {
-        const bodyFormData = new FormData()
-        bodyFormData.append('first_name', firstName)
-        bodyFormData.append('last_name', lastName)
-        bodyFormData.append('email', email)
-        bodyFormData.append('password', password)
-        bodyFormData.append('password_confirmation', confirmPassword)
-        bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
-        bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
-        await register(bodyFormData)
-        let profileResponse = null
-
-        try {
-          profileResponse = await getProfileData()
-          onGetProfileDataSuccess(profileResponse.data)
-        } catch (e) {
-          onGetProfileDataError(e as AxiosError)
-          return
-        }
-
-        const profileSpecifiedData = _get(profileResponse, 'data')
-        const profileDataObj = {
-          id: profileSpecifiedData.id,
-          first_name: profileSpecifiedData.firstName,
-          last_name: profileSpecifiedData.lastName,
-          email: profileSpecifiedData.email,
-        }
-        if (typeof window !== 'undefined') {
-          window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
-        }
-        onClose()
-      }}
-    >
-      {props => (
-        <Form onSubmit={props.handleSubmit}>
-          <div className="register-container">
-            <div>Create account</div>
-            <button type="button" onClick={onClose}>
-              Close
-            </button>
-            <div className="register-container__twoFields">
-              <div className="is-half">
-                <Field
-                  name="firstName"
-                  label="First Name"
-                  type="text"
-                  component={CustomField}
-                  theme="light"
-                  validate={requiredValidator()}
-                />
-              </div>
-              <div className="is-half">
-                <Field
-                  name="lastName"
-                  label="Last Name"
-                  type="text"
-                  component={CustomField}
-                  theme="light"
-                  validate={requiredValidator()}
-                />
-              </div>
-            </div>
-            <div className="register-container__singleField">
-              <div className="">
-                <Field
-                  name="email"
-                  label="Email"
-                  type="email"
-                  component={CustomField}
-                  theme="light"
-                  validate={requiredValidator()}
-                />
-              </div>
-            </div>
-            <div className="register-container__twoFields">
-              <div className="is-half">
-                <Field
-                  name="password"
-                  label="Password"
-                  type="password"
-                  component={CustomField}
-                  theme="light"
-                  validate={requiredValidator()}
-                />
-              </div>
-              <div className="is-half">
-                <Field
-                  name="confirmPassword"
-                  label="Confirm Password"
-                  type="password"
-                  component={CustomField}
-                  theme="light"
-                  validate={requiredValidator()}
-                />
-              </div>
-            </div>
-          </div>
-          <button type="submit">Submit</button>
-          {showPoweredByImage ? <PoweredBy /> : null}
-        </Form>
-      )}
-    </Formik>
-  </div>
-)

package/src/components/registerModal/style.css

@@ -1,18 +0,0 @@
-.register-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-.register-container .is-half {
-  width: 49%;
-}
-.register-container__twoFields {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-}
-.register-container__singleField {
-  margin-top: 15px;
-}
-button {
-  margin-top: 10px;
-}