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

package/src/components/billing-info-container/style.css

@@ -1,150 +0,0 @@
-.button-container {
-  display: flex;
-  padding: 20px;
-  justify-content: center;
-}
-
-.billing-info-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-.billing-info-container .is-half {
-  width: 49%;
-}
-
-.billing-info-container p {
-  color: #000;
-}
-
-.billing-info-container .main-header {
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-.billing-info-container__twoFields {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-}
-.billing-info-container__singleField {
-  margin-top: 15px;
-}
-button {
-  margin-top: 10px;
-}
-
-.account-actions-block {
-  margin-top: 10px;
-  color: #182026;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
-    Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-}
-
-.MuiButtonBase-root.MuiButton-root,
-.MuiButtonBase-root.MuiButton-root:hover,
-.login-register-button {
-  width: 49%;
-  margin-top: 10px;
-  min-height: 46px;
-  background-color: #212529;
-  font-size: 26px;
-  border: #f28051;
-  border-radius: 5px;
-  color: #fff;
-  position: relative;
-  display: block;
-  cursor: pointer;
-  font-family: Inter-Bold;
-  font-weight: 700;
-  text-transform: uppercase;
-  /* font-size: 1rem; */
-  padding: 14px 12px 12px;
-  line-height: 1.15;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  outline: none;
-}
-
-.logo-image-container {
-  width: 49%;
-  margin-top: 5px;
-  text-align: center;
-}
-
-.logo-image-container img {
-  height: 30px;
-}
-
-.login-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.login-register-button:hover {
-  background-color: #505050 !important;
-  border-color: #505050 !important;
-}
-
-.login-register-block {
-  display: flex;
-  justify-content: space-between;
-}
-
-@media only screen and (max-width: 820px) {
-  .billing-info-container {
-    width: 90%;
-  }
-  .billing-info-container .main-header {
-    font-size: 1.5rem;
-  }
-}
-
-.email-checking {
-  margin-bottom: 15px;
-}
-
-.billing-info-container .email-registered-message {
-  border: 2px solid #000 !important;
-  border-radius: 5px !important;
-  padding: 12px !important;
-  margin-top: 10px !important;
-  margin-bottom: 15px !important;
-  background-color: #fff !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  clear: both !important;
-  display: block !important;
-  box-sizing: border-box !important;
-}
-
-.billing-info-container .email-registered-text {
-  color: #000 !important;
-  font-size: 11px !important;
-  line-height: 1.3 !important;
-  margin: 0 0 10px 0 !important;
-  font-weight: 400 !important;
-}
-
-.billing-info-container .email-login-button.MuiButton-root.MuiButton-contained {
-  width: 100% !important;
-  min-height: 40px !important;
-  background-color: #212529 !important;
-  font-size: 13px !important;
-  border: none !important;
-  border-radius: 5px !important;
-  color: #fff !important;
-  cursor: pointer !important;
-  font-weight: 700 !important;
-  text-transform: uppercase !important;
-  padding: 10px 12px !important;
-  line-height: 1.15 !important;
-  text-align: center !important;
-  box-shadow: none !important;
-}
-
-.billing-info-container .email-login-button.MuiButton-root.MuiButton-contained:hover {
-  background-color: #505050 !important;
-  box-shadow: none !important;
-}

package/src/components/billing-info-container/utils.tsx

@@ -1,413 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { FormikErrors, FormikValues } from 'formik'
-import _flatMapDeep from 'lodash/flatMapDeep'
-import _forEach from 'lodash/forEach'
-import _get from 'lodash/get'
-import _isArray from 'lodash/isArray'
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-import { nanoid } from 'nanoid'
-import React from 'react'
-
-import { AttributesConfig } from '../../api'
-import { IGroupItem } from '../../types'
-import { CONFIGS } from '../../utils'
-import { combineValidators, requiredValidator } from '../../validators'
-import {
-  CheckboxField,
-  CustomField,
-  DatePickerField,
-  PhoneNumberField,
-  RadioGroupField,
-  SelectField,
-} from '../common/index'
-
-export interface ILoggedInValues {
-  emailLogged?: string;
-  firstNameLogged?: string;
-  lastNameLogged?: string;
-  phoneLogged?: string;
-}
-
-export interface IValues {
-  [key: string]: any;
-}
-
-export const getInitialValues = (
-  data: any = [],
-  propsInitialValues: IValues = {},
-  userValues: any = {},
-  ticketHoldersFields: any = {},
-  ticketsQuantity: any = []
-): IValues => {
-  const results = _flatMapDeep(data, ({ fields }) =>
-    _map(fields, ({ groupItems }) =>
-      _map(groupItems, ({ name, value }) => ({ name, value }))
-    )
-  )
-
-  // Add Ticket Holder default values for custom fields
-  const ticketHoldersCustomFields =
-    ticketHoldersFields?.fields?.find((groupItem: any) => groupItem.customFields)
-      ?.groupItems || []
-  const ticketHoldersCustomFieldsInitValues = {} as IValues
-  const selectedTicketsCount =
-    ticketsQuantity.length || localStorage.getItem('selectedTicketsQuantity') || 0
-
-  if (!_isEmpty(ticketHoldersCustomFields)) {
-    for (const customField of ticketHoldersCustomFields) {
-      for (let i = 0; i < selectedTicketsCount; i++) {
-        const fieldName = `${customField.name}-${i}`
-        const fieldValue = customField.value
-        ticketHoldersCustomFieldsInitValues[fieldName] = fieldValue
-      }
-    }
-  }
-
-  const initialValues: IValues = {}
-  _forEach(results, groupItem => {
-    const { name, value } = groupItem
-    initialValues[name] = value || propsInitialValues[name] || userValues[name] || ''
-  })
-
-  // set logged in user as first ticket holder
-  initialValues['holderFirstName-0'] =
-    propsInitialValues.firstName || userValues.firstName || ''
-  initialValues['holderLastName-0'] =
-    propsInitialValues.lastName || userValues.lastName || ''
-  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || ''
-  initialValues['holderPhone-0'] = propsInitialValues.phone || userValues.phone || ''
-
-  return { ...initialValues, ...ticketHoldersCustomFieldsInitValues }
-}
-
-export const createRegisterFormData = (
-  values: IValues = {},
-  checkoutBody: { attributes: { [key: string]: any } },
-  flagFreeTicket = false
-): FormData => {
-  const bodyFormData = new FormData()
-  bodyFormData.append('first_name', values.firstName)
-  bodyFormData.append('last_name', values.lastName)
-  bodyFormData.append('email', values.email)
-  bodyFormData.append('password', values.password)
-  bodyFormData.append('password_confirmation', values.confirmPassword)
-  bodyFormData.append(
-    'client_id',
-    CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
-  )
-  bodyFormData.append(
-    'client_secret',
-    CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
-  )
-  bodyFormData.append('check_cart_expiration', 'true')
-
-  _forEach(checkoutBody.attributes, (item: any, key: string) => {
-    if (
-      !(flagFreeTicket && ['country', 'state', 'city', 'street_address'].includes(key))
-    ) {
-      bodyFormData.append(key, item)
-    }
-  })
-
-  return bodyFormData
-}
-
-export interface ICheckoutBody {
-  attributes: {
-    [key: string]: any;
-  };
-  data_capture?: {
-    [key: string]: any;
-  };
-}
-
-interface IticketHolder {
-  first_name?: string;
-  last_name?: string;
-  phone?: string;
-  email?: string;
-}
-
-export const createCheckoutDataBody = (
-  ticketsQuantity: number,
-  values: IValues = {},
-  logedInValues: ILoggedInValues = {},
-  includeDob = false
-): ICheckoutBody => {
-  const { firstName, lastName, holderAge, confirmEmail, confirmPassword, ...restValues } =
-    values
-
-  const holders = []
-  let ticket_holders: IticketHolder[] = []
-
-  for (let i = 0; i <= ticketsQuantity; i++) {
-    const individualHolder = Object.fromEntries(
-      Object.entries(values).filter(([key, _val]) => key.includes(String(i)))
-    )
-    holders.push(individualHolder)
-  }
-
-  const filteredHolders = holders.filter(holder => Object.entries(holder).length > 0)
-  ticket_holders = filteredHolders.map((item, index) => ({
-    first_name: !index
-      ? item[`holderFirstName-${index}`] || logedInValues.firstNameLogged || ''
-      : item[`holderFirstName-${index}`] || '',
-    last_name: !index
-      ? item[`holderLastName-${index}`] || logedInValues.lastNameLogged || ''
-      : item[`holderLastName-${index}`] || '',
-    phone: !index
-      ? item[`holderPhone-${index}`] || logedInValues.phoneLogged || ''
-      : item[`holderPhone-${index}`] || '',
-    email: !index
-      ? item[`holderEmail-${index}`] || logedInValues.emailLogged || ''
-      : item[`holderEmail-${index}`] || '',
-  }))
-
-  const filteredRestValue: { [key: string]: any } = {}
-  _forEach(restValues, (value, key) => {
-    if (!key.includes('holder')) {
-      filteredRestValue[key] = value
-    }
-  })
-
-  const body: ICheckoutBody = {
-    attributes: {
-      ...filteredRestValue,
-      email: restValues.email || logedInValues.emailLogged,
-      confirm_email: restValues.email || logedInValues.emailLogged,
-      first_name: firstName || logedInValues.firstNameLogged,
-      last_name: lastName || logedInValues.lastNameLogged,
-      ticket_holders,
-    },
-  }
-
-  if (includeDob) {
-    const holderAgeDate = new Date(holderAge)
-    body.attributes.dob_day = holderAgeDate.getDate()
-    body.attributes.dob_month = holderAgeDate.getMonth() + 1
-    body.attributes.dob_year = holderAgeDate.getFullYear()
-  }
-  return body
-}
-
-export const getValidateFunctions = (
-  element: IGroupItem,
-  states: Array<{ [key: string]: any }>,
-  values: FormikValues,
-  errors: FormikErrors<any>
-) => {
-  const validationFunctions: any[] = []
-
-  if (element.required) {
-    if (element.name !== 'state' || (element.name === 'state' && states.length)) {
-      validationFunctions.push(requiredValidator)
-    }
-  }
-
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate)
-  }
-
-  if (element.name === 'phone') {
-    const invalidPhone = () =>
-      errors.phone === 'Invalid phone number' ? 'Invalid phone number' : null
-    validationFunctions.push(invalidPhone)
-  }
-
-  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 assingUniqueIds = (data: any): any => {
-  if (_get(data[0], 'uniqueId')) {
-    return data
-  }
-
-  return _map(data, (item: any) => {
-    _forEach(item, (itemValue: string, key) => {
-      if (_isArray(itemValue) && !itemValue.some(item => typeof item === 'string')) {
-        item[key] = assingUniqueIds(itemValue)
-      }
-    })
-
-    return { ...item, uniqueId: nanoid() }
-  })
-}
-
-export const isRequiredField = (
-  element: IGroupItem,
-  configs?: null | AttributesConfig
-) => {
-  const { name, required } = element
-  const flagRequirePhone = _get(configs, 'phone_required', false)
-  const collectMandatoryWalletAddress = _get(
-    configs,
-    'collect_mandatory_wallet_address',
-    false
-  )
-
-  if (
-    required ||
-    (name === 'phone' && flagRequirePhone) ||
-    (name === 'data_capture[wallet_address]' && !collectMandatoryWalletAddress)
-  ) {
-    return true
-  }
-
-  return false
-}
-
-export const getFieldLabel = (element: IGroupItem, configs?: null | AttributesConfig) => {
-  if (isRequiredField(element, configs) || React.isValidElement(element.label)) {
-    return element.label
-  }
-
-  return `${element.label} (optional)`
-}
-
-export const getFieldComponent = (element: IGroupItem) => {
-  const type = _get(element, 'type', 'text')
-
-  const fieldComponentConfigs = {
-    checkbox: CheckboxField,
-    select: CustomField, // Temp change untill refactoring
-    select_multi: SelectField,
-    phone: PhoneNumberField,
-    date: DatePickerField,
-    radio: RadioGroupField,
-    text: CustomField,
-  }
-
-  const fieldComponent = _get(fieldComponentConfigs, type, CustomField)
-  return fieldComponent
-}
-
-/**
- * Renders a React component with the provided props
- * @param Component - The React component to render
- * @param props - The props to apply to the component
- * @returns JSX element with applied props
- */
-export const renderComponentWithProps = <T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T
-): React.ReactElement<T> => <Component {...props} />
-
-export const filterBillingInfoFields = (
-  fields: IGroupItem[],
-  options: {
-    showDOB: boolean;
-    hideTtfOptIn: boolean;
-    hidePhoneField: boolean;
-    flagRequirePhone: boolean;
-    collectMandatoryWalletAddress: boolean;
-    collectMandatoryJobTitle: boolean;
-    collectMandatoryBusinessCategory: boolean;
-    collectMandatoryCompany: boolean;
-    collectMandatoryInstagram: boolean;
-    flagFreeTicket: boolean;
-    hideWalletAddressField: boolean;
-    hideJobTitleField: boolean;
-    hideBusinessCategoryField: boolean;
-    hideCompanyField: boolean;
-    hideInstagramField: boolean;
-  }
-) => {
-  const {
-    showDOB,
-    hideTtfOptIn,
-    hidePhoneField,
-    flagRequirePhone,
-    collectMandatoryWalletAddress,
-    collectMandatoryJobTitle,
-    collectMandatoryBusinessCategory,
-    collectMandatoryCompany,
-    collectMandatoryInstagram,
-    flagFreeTicket,
-    hideWalletAddressField,
-    hideJobTitleField,
-    hideBusinessCategoryField,
-    hideCompanyField,
-    hideInstagramField,
-  } = options
-  return fields.filter(el => {
-    if (el.name === 'holderAge' && !showDOB) {
-      return false
-    }
-    if (el.name === 'ttf_opt_in' && hideTtfOptIn) {
-      return false
-    }
-    if (el.name === 'phone') {
-      if (!hidePhoneField) {
-        el.required = flagRequirePhone
-      } else {
-        return false
-      }
-    }
-    if (el.name === 'data_capture[wallet_address]') {
-      if (collectMandatoryWalletAddress) {
-        el.required = true
-      }
-    }
-    if (el.name === 'data_capture[jobTitle]') {
-      if (collectMandatoryJobTitle) {
-        el.required = true
-      }
-    }
-    if (el.name === 'data_capture[businessCategory]') {
-      if (collectMandatoryBusinessCategory) {
-        el.required = true
-      }
-    }
-    if (el.name === 'data_capture[company]') {
-      if (collectMandatoryCompany) {
-        el.required = true
-      }
-    }
-    if (el.name === 'data_capture[instagram]') {
-      if (collectMandatoryInstagram) {
-        el.required = true
-      }
-    }
-    if (['street_address', 'country', 'state', 'city'].includes(el.name)) {
-      if (flagFreeTicket) {
-        el.required = false
-        return false
-      }
-    }
-    if (
-      hideWalletAddressField &&
-      (el.name === 'wallet-address-info' || el.name === 'data_capture[wallet_address]')
-    ) {
-      return false
-    }
-    if (hideJobTitleField && el.name === 'data_capture[jobTitle]') {
-      return false
-    }
-    if (hideBusinessCategoryField && el.name === 'data_capture[businessCategory]') {
-      return false
-    }
-    if (hideCompanyField && el.name === 'data_capture[company]') {
-      return false
-    }
-    if (
-      hideInstagramField &&
-      (el.name === 'data_capture[instagram]' || el.name === 'instagram-info')
-    ) {
-      return false
-    }
-    return true
-  })
-}

package/src/components/common/Checkbox.tsx

@@ -1,51 +0,0 @@
-import { FormControl, FormHelperText } from '@mui/material'
-import CheckboxMaterial from '@mui/material/Checkbox'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import FormGroup from '@mui/material/FormGroup'
-import { useTheme } from '@mui/styles'
-import { FieldInputProps } from 'formik'
-import React from 'react'
-
-export interface ICheckboxField {
-  label: string | number | JSX.Element;
-  field?: FieldInputProps<any>;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const Checkbox = ({
-  label,
-  field,
-  selectOptions,
-  theme,
-  setFieldValue,
-  disableDropdown,
-  setPhoneValidationIsLoading,
-  defaultCountry,
-  required,
-  uniqueId,
-  dateFormat,
-  datePlaceholder,
-  isCountryCodeEditable,
-  ...rest
-}: ICheckboxField & IOtherProps) => {
-  const customTheme: any = useTheme()
-  return (
-    <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ''])}>
-      <FormGroup>
-        <FormControlLabel
-          control={<CheckboxMaterial {...field} {...rest} />}
-          label={label}
-          componentsProps={{
-            typography: customTheme?.checkbox,
-          }}
-        />
-      </FormGroup>
-      {rest?.form?.errors && rest.form.errors[field?.name ?? ''] ? (
-        <FormHelperText>Required</FormHelperText>
-      ) : null}
-    </FormControl>
-  )
-}

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

@@ -1,41 +0,0 @@
-import { FormControl, FormHelperText } from '@mui/material'
-import Checkbox from '@mui/material/Checkbox'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import FormGroup from '@mui/material/FormGroup'
-import { useTheme } from '@mui/styles'
-import { FieldInputProps, FormikProps } from 'formik'
-import _get from 'lodash/get'
-import React from 'react'
-
-interface ICheckboxField {
-  label: string | number | JSX.Element;
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-}
-
-export const CheckboxField = ({
-  label,
-  field,
-  form: { touched, errors },
-}: ICheckboxField) => {
-  const isTouched = Boolean(_get(touched, field.name, false))
-  const errorText = _get(errors, field.name)
-  const hasError = isTouched && Boolean(errorText)
-  const customTheme: any = useTheme()
-
-  return (
-    <FormControl
-      className={`checkbox-field ${hasError ? 'required-checkbox-field' : ''}`}
-      error={hasError}
-    >
-      <FormGroup>
-        <FormControlLabel
-          control={<Checkbox {...field} checked={Boolean(field.value)} />}
-          label={label}
-          componentsProps={{ typography: customTheme?.checkbox }}
-        />
-      </FormGroup>
-      {hasError && <FormHelperText>Required</FormHelperText>}
-    </FormControl>
-  )
-}

package/src/components/common/CopyField.tsx

@@ -1,53 +0,0 @@
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React, { useRef } from 'react'
-
-interface ICopyFieldProps {
-  copyValue: string;
-  onLinkCopied?: () => void;
-  copyIconSrc?: string;
-  copyTitle?: string;
-  hasCopyIcon: boolean;
-  classNamePrefix?: string;
-  messageText?: string;
-}
-
-export const CopyField = (props: ICopyFieldProps) => {
-  const {
-    copyValue,
-    copyIconSrc = 'https://img.icons8.com/office/50/000000/copy.png',
-    copyTitle = 'Copy',
-    hasCopyIcon = false,
-    onLinkCopied = _identity,
-    classNamePrefix = '',
-    messageText = '',
-  } = props
-
-  const inputRef = useRef(null)
-
-  return (
-    <>
-      {messageText && <span className="message-text">{messageText}</span>}
-      <input
-        ref={inputRef}
-        className={`${classNamePrefix}_share-input`}
-        defaultValue={copyValue}
-        readOnly={true}
-      />
-      <div
-        className={`${classNamePrefix}_share-by-link-copy-icon`}
-        aria-hidden={true}
-        onClick={() => {
-          navigator.clipboard.writeText(_get(inputRef, 'current.value'))
-          onLinkCopied()
-        }}
-      >
-        {hasCopyIcon ? (
-          <img src={copyIconSrc} alt="copy" />
-        ) : (
-          <span className={`${classNamePrefix}_copy-icon`}>{copyTitle}</span>
-        )}
-      </div>
-    </>
-  )
-}