tf-checkout-react 1.4.26 → 1.5.0

package/src/components/preRegistration/constants.tsx

@@ -0,0 +1,161 @@
+import React from 'react'
+
+export const formFieldsNotLoggedIn: IFormFieldsSection[] = [
+  {
+    name: 'basic-info',
+    groupLabel: (
+      <>
+        <span>
+          If you want to enter your details manually, please type them below to create an
+          account, then click on
+        </span>
+        <b> Confirm Registration:</b>
+      </>
+    ),
+    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> 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,
+      },
+    ],
+  },
+]
+
+export const formFieldsLoggedIn: IFormFieldsSection[] = [
+  {
+    name: 'basic-info-logged-in',
+    groupLabel:
+      'To confirm your pre-registration for {event_name} simply click on the confirmation button below.',
+    groupLabelClassName: '',
+    groupClassName: '',
+    fields: [
+      {
+        name: 'email',
+        label: 'Email',
+        type: 'email',
+        required: true,
+        onValidate: null,
+      },
+      {
+        name: 'confirmEmail',
+        label: 'Confirm Email',
+        type: 'email',
+        required: true,
+        onValidate: null,
+      },
+    ],
+  },
+  {
+    name: 'billing-info-logged-in',
+    groupLabel: '',
+    groupLabelClassName: '',
+    groupClassName: '',
+    fields: [
+      {
+        name: 'numTickets',
+        label: 'How many tickets do you want to buy?',
+        type: 'select',
+        required: true,
+        options: new Array(10).fill(null).map((_, index) => ({
+          label: index + 1,
+          value: index + 1,
+        })),
+        onValidate: null,
+      },
+      {
+        name: 'holderAge',
+        label: 'Ticket Holder Age',
+        type: 'date',
+        required: true,
+        onValidate: null,
+      },
+      {
+        name: 'brandOptIn',
+        label: 'I would like to be updated on Mana Common news, events and offers.',
+        type: 'checkbox',
+      },
+    ],
+  },
+]

package/src/components/preRegistration/index.tsx

@@ -0,0 +1,274 @@
+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 { confirmPreRegistration, getCountries, getProfileData, register } from '../../api'
+import { useCookieListener } from '../../hooks/useCookieListener'
+import { CONFIGS, getCookieByName, getQueryVariable } from '../../utils'
+import SnackbarAlert from '../common/SnackbarAlert'
+import ConfirmModal from '../confirmModal'
+import { ForgotPasswordModal, IForgotPasswordProps } from '../forgotPasswordModal'
+import { LoginModal, Props } from '../loginModal'
+import { formFieldsLoggedIn, formFieldsNotLoggedIn } from './constants'
+import { FieldsSection } from './FieldsSection'
+import { getFormInitialValues, updateFormFieldsAttributes } from './utils'
+
+const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
+const isWindowDefined = typeof window !== 'undefined'
+
+interface IPreRegistrationProps extends Props, IForgotPasswordProps {
+  eventId: string | number;
+  formFields?: IFormFieldsSection[];
+  additionalFieldAttribute?: IFieldAttribute;
+  isPreregistrationStarted: boolean;
+  onGetCountriesSuccess?: (res: any) => void;
+  onGetCountriesError?: (e: AxiosError) => void;
+  onConfirmationSuccess?: (res: any) => void;
+  onConfirmationError?: (e: AxiosError) => void;
+  onLoginSuccess?: (res: any) => void;
+}
+
+export const PreRegistration: FC<IPreRegistrationProps> = ({
+  eventId,
+  formFields: pFormFields,
+  additionalFieldAttribute,
+  isPreregistrationStarted,
+  logo,
+  showForgotPasswordButton,
+  onLoginSuccess = _identity,
+  onForgotPasswordSuccess = _identity,
+  onForgotPasswordError = _identity,
+  onGetCountriesSuccess = _identity,
+  onGetCountriesError = _identity,
+  onConfirmationSuccess = _identity,
+  onConfirmationError = _identity,
+}) => {
+  const [error, setError] = useState('')
+  const [showModalLogin, setShowModalLogin] = useState(false)
+  const [alreadyHasUser, setAlreadyHasUser] = useState(false)
+  const [showModalForgotPassword, setShowModalForgotPassword] = useState(false)
+  const [countries, setCountries] = useState<{ [key: string]: string | number }[]>([])
+  const [isLoggedIn, setIsLoggedIn] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
+  const [confirmModalState, setConfirmModalState] = useState({ show: false, message: '' })
+  useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
+
+  const formFields = updateFormFieldsAttributes(
+    pFormFields || isLoggedIn ? formFieldsLoggedIn : formFieldsNotLoggedIn,
+    additionalFieldAttribute
+  )
+
+  useEffect(() => {
+    // fetch countries data
+    const fetchCountries = async () => {
+      try {
+        const res = await getCountries()
+        setCountries(
+          _map(_get(res, 'data'), item => ({
+            label: item.name,
+            value: Number(item.id),
+          }))
+        )
+        onGetCountriesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          const error = e?.response?.data?.message || 'Error'
+          setError(error)
+          onGetCountriesError(e)
+        }
+      }
+    }
+    fetchCountries()
+  }, [])
+
+  const hash = getQueryVariable('hash') || ''
+  const referrerId = getQueryVariable('referrer_id') || ''
+  return (
+    <div className="pre-registration-container">
+      <SnackbarAlert
+        type="error"
+        isOpen={!!error}
+        message={error || ''}
+        onClose={() => {
+          setError('')
+        }}
+      />
+      {confirmModalState.show && (
+        <ConfirmModal
+          hideCancelBtn
+          onConfirm={() => setConfirmModalState({ show: false, message: '' })}
+          message={confirmModalState.message}
+        />
+      )}
+      {!isLoggedIn && (
+        <div className="account-actions-block">
+          <div className="action-item">
+            <div>
+              <span>
+                Create (or log in to) your account, then click on Confirm Registration.
+              </span>
+              <span> If you have a</span>
+              <b> Mana Common </b>
+              <span>account and password already</span>
+            </div>
+          </div>
+          <div className="action-item login-block">
+            <button
+              className="login-register-button"
+              type="button"
+              onClick={() => {
+                setShowModalLogin(true)
+              }}
+            >
+              Login
+            </button>
+          </div>
+        </div>
+      )}
+      {showModalLogin && (
+        <LoginModal
+          logo={logo}
+          onClose={() => {
+            setShowModalLogin(false)
+          }}
+          onLogin={res => {
+            setShowModalLogin(false)
+            onLoginSuccess(res)
+          }}
+          showForgotPasswordButton={showForgotPasswordButton}
+          onForgotPassword={() => {
+            setShowModalLogin(false)
+            setShowModalForgotPassword(true)
+          }}
+          alreadyHasUser={alreadyHasUser}
+        />
+      )}
+      {showModalForgotPassword && (
+        <ForgotPasswordModal
+          onClose={() => {
+            setShowModalForgotPassword(false)
+          }}
+          onLoginButtonClick={() => {
+            setShowModalForgotPassword(false)
+            setShowModalLogin(true)
+          }}
+          onForgotPasswordSuccess={onForgotPasswordSuccess}
+          onForgotPasswordError={onForgotPasswordError}
+        />
+      )}
+      <h2>Pre-Registration</h2>
+      <Formik
+        initialValues={getFormInitialValues(formFields)}
+        enableReinitialize={true}
+        onSubmit={async (values: FormikValues) => {
+          try {
+            if (isLoggedIn) {
+              if (isPreregistrationStarted) {
+                const updatedValues = { ...values }
+                const holderAgeDate = new Date(values.holderAge)
+                updatedValues.dobDay = holderAgeDate.getDate()
+                updatedValues.dobMonth = holderAgeDate.getMonth() + 1
+                updatedValues.dobYear = holderAgeDate.getFullYear()
+                updatedValues.referrerId = referrerId
+                updatedValues.shareHash = hash
+                // remove date picker string value
+                delete updatedValues.holderAge
+
+                const confirmationData = await confirmPreRegistration(
+                  eventId,
+                  updatedValues as IConfirmPreRegistrationRequestData
+                )
+                if (isWindowDefined) {
+                  window.localStorage.setItem(
+                    'pre-registration-hash',
+                    _get(confirmationData, 'attributes.hash')
+                  )
+                }
+
+                onConfirmationSuccess(confirmationData)
+              } else {
+                setConfirmModalState({
+                  show: true,
+                  message: 'The preregistration has not started',
+                })
+              }
+            } else {
+              const bodyFormData = new FormData()
+              bodyFormData.append('first_name', values.firstName)
+              bodyFormData.append('last_name', values.lastName)
+              bodyFormData.append('email', values.email)
+              bodyFormData.append('confirm_email', values.confirmEmail)
+              bodyFormData.append('zip', values.zip)
+              bodyFormData.append('country', values.country)
+              bodyFormData.append('password', values.password)
+              bodyFormData.append('password_confirmation', values.confirmPassword)
+              bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
+              bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
+              bodyFormData.append('register_for', 'prereg')
+
+              const res = await register(bodyFormData)
+              const profileRes = await getProfileData()
+              onLoginSuccess(res.data)
+              if (isWindowDefined) {
+                window.localStorage.setItem(
+                  'user_data',
+                  JSON.stringify(_get(profileRes, 'data'))
+                )
+              }
+            }
+          } catch (e) {
+            let errorMessage = e?.message || 'Error'
+            const emailErrors = e?.response?.data?.message?.email
+
+            if (typeof e?.response?.data?.message === 'string') {
+              errorMessage = e?.response?.data?.message
+            }
+            if (emailErrors?.length > 0) {
+              if (emailErrors[0] === 'The email is already used') {
+                setShowModalLogin(true)
+                setAlreadyHasUser(true)
+              }
+            } else {
+              setError(errorMessage)
+            }
+
+            onConfirmationError(e)
+          }
+        }}
+      >
+        {props => (
+          <Form>
+            <div className="login-modal-body">
+              <FieldsSection
+                formFields={formFields}
+                values={props.values}
+                setFieldValue={props.setFieldValue}
+                containerClass="pre-registration"
+                countries={countries}
+              />
+            </div>
+            <div className="button-container">
+              <Button
+                type="submit"
+                variant="contained"
+                className="login-register-button"
+                disabled={props.isSubmitting}
+              >
+                {props.isSubmitting ? (
+                  <CircularProgress size={26} />
+                ) : isLoggedIn ? (
+                  'Confirm Pre-Registration'
+                ) : (
+                  'Create Account'
+                )}
+              </Button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  )
+}

package/src/components/preRegistration/utils.ts

@@ -0,0 +1,155 @@
+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, 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 === '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/ticketsContainer/ReferralLogic.tsx

@@ -14,7 +14,7 @@ export const ReferralLogic = (props: IReferralLogicProps) => {
 
     if (isWindowDefined) {
       const params: URLSearchParams = new URL(`${window.location}`).searchParams
-      const referralId = params.get('ttf_r') || ''
+      const referralId = params.get('ttf_r') || params.get('referrer_id') || ''
       const referralValue = [eventId, '.', referralId].join('')
       const isAlreadyCounted = localStorage.getItem('referral_key') === referralValue
 

package/src/components/ticketsContainer/TicketRow.tsx

@@ -7,14 +7,15 @@ import Select from '@mui/material/Select'
 import _get from 'lodash/get'
 import React from 'react'
 
-import { getTicketSelectOptions } from './utils'
+import { defineIsSalesClosed, getTicketSelectOptions } from './utils'
 
 interface ITicketRowProps {
   ticketTier: any;
   prevTicketTier: any;
   selectedTickets: any;
   handleTicketSelect: any;
-  isSeatMapAllowed?: any;
+  event: any;
+  isSeatMapAllowed?: boolean;
   tableType?: boolean;
 }
 
@@ -23,13 +24,20 @@ export const TicketRow = ({
   prevTicketTier,
   selectedTickets,
   handleTicketSelect,
+  event,
   isSeatMapAllowed,
   tableType,
 }: ITicketRowProps) => {
   const soldOutMessage = ticketTier.soldOutMessage
     ? `${ticketTier.soldOutMessage}`.toUpperCase()
     : 'SOLD OUT'
-  const isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded
+  const isSalesClosed = defineIsSalesClosed({
+    salesStarted: ticketTier.salesStarted,
+    salesEnded: ticketTier.salesEnded,
+    presalesStarted: event?.presalesStarted,
+    presalesEnded: event?.presalesEnded,
+    presalesEnabled: event?.presales_enabled,
+  })
   const maxCount = tableType ? ticketTier.maxGuests : ticketTier.maxQuantity
   const minCount = tableType ? ticketTier.minGuests : ticketTier.minQuantity
   const { multiplier } = ticketTier
@@ -48,11 +56,7 @@ export const TicketRow = ({
         <FormControl fullWidth>
           <Select
             sx={{ borderRadius: 0 }}
-            value={
-              selectedTickets[ticketTier.id]
-                ? selectedTickets[ticketTier.id]
-                : 0
-            }
+            value={selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0}
             onChange={handleTicketSelect}
             displayEmpty
             inputProps={{ 'aria-label': 'Without label' }}
@@ -87,14 +91,13 @@ export const TicketRow = ({
     returnValue = soldOutMessage
   } else if (isSalesClosed) {
     returnValue = ticketsClosedMessage
-  } else if (
-    canPurchaseTicket &&
-    isSeatMapAllowed &&
-    !isDirectPurchaseAllowed
-  ) {
+  } else if (canPurchaseTicket && isSeatMapAllowed && !isDirectPurchaseAllowed) {
     // Seat Map Tickets renderer logic
     returnValue = null
-  } else if (canPurchaseTicket) {
+  } else if (
+    canPurchaseTicket ||
+    (canPurchaseTicket && event?.presalesStarted && !event?.presalesEnded)
+  ) {
     returnValue = onSaleContent
   } else if (_get(prevTicketTier, 'in_stock')) {
     returnValue = 'SOON'

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -97,6 +97,7 @@ export const TicketsSection = ({
                     prevTicketTier={arr[i - 1]}
                     selectedTickets={selectedTickets}
                     handleTicketSelect={ticketSelect}
+                    event={event}
                   />
                 </div>
               </div>
@@ -161,6 +162,7 @@ export const TicketsSection = ({
                       selectedTickets={selectedTickets}
                       handleTicketSelect={ticketSelect}
                       isSeatMapAllowed={isSeatMapAllowed}
+                      event={event}
                     />
                   </div>
                 </div>