tf-checkout-react 1.6.6-beta.3 → 1.6.6-beta.31

package/src/components/billing-info-container/{utils.ts → utils.tsx}

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { FormikErrors, FormikValues } from 'formik'
 import _flatMapDeep from 'lodash/flatMapDeep'
 import _forEach from 'lodash/forEach'
@@ -288,3 +289,121 @@ export const getFieldComponent = (element: IGroupItem) => {
   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/CheckboxField/index.tsx

@@ -30,7 +30,7 @@ export const CheckboxField = ({
     >
       <FormGroup>
         <FormControlLabel
-          control={<Checkbox {...field} checked={field.value} />}
+          control={<Checkbox {...field} checked={Boolean(field.value)} />}
           label={label}
           componentsProps={{ typography: customTheme?.checkbox }}
         />

package/src/components/common/DatePickerField.tsx

@@ -1,4 +1,6 @@
+import { ThemeOptions } from '@mui/material'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { CSSProperties } from '@mui/styles'
 import { DatePicker } from '@mui/x-date-pickers'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
@@ -40,15 +42,23 @@ const compactStyles = {
   },
 }
 
-const compactStyleTheme = createTheme({
-  components: {
-    MuiPaper: {
-      defaultProps: {
-        sx: compactStyles,
-      },
-    },
-  },
-})
+const getTheme = (isCompact: boolean, baseThemeOptions?: object | null) => {
+  if (isCompact) {
+    return createTheme(
+      Object.assign(baseThemeOptions ?? {}, {
+        components: {
+          MuiPaper: {
+            defaultProps: {
+              sx: compactStyles,
+            },
+          },
+        },
+      })
+    )
+  }
+
+  return createTheme(baseThemeOptions ?? {})
+}
 
 export interface IDatePickerFieldProps {
   label: string;
@@ -56,6 +66,10 @@ export interface IDatePickerFieldProps {
   field: FieldInputProps<any>;
   form: FormikProps<any>;
   theme: 'dark' | 'light';
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
 
   useCompact?: boolean;
 }
@@ -70,10 +84,11 @@ export const DatePickerField = ({
   form,
   theme,
   useCompact = true,
+  themeOptions,
   dateFormat = 'DD/MM/YYYY',
   placeholder = 'dd/mm/yyyy',
 }: IDatePickerFieldProps & IOtherProps) => (
-  <ThemeProvider theme={useCompact ? compactStyleTheme : {}}>
+  <ThemeProvider theme={getTheme(useCompact, themeOptions ?? null)}>
     <LocalizationProvider dateAdapter={AdapterMoment}>
       <DatePicker
         value={field.value || ''}

package/src/components/common/SnackbarAlert.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
 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'
+  isOpen: boolean;
+  message: string;
+  type: AlertColor;
+  position?: SnackbarOrigin;
+  autoHideDuration?: number;
+  variant?: 'filled' | 'standard' | 'outlined';
 
-  onClose: () => void
+  onClose: () => void;
 }
 
 const SnackbarAlert = ({
@@ -20,35 +20,33 @@ const SnackbarAlert = ({
   autoHideDuration = 3000,
   variant,
   onClose,
-}: ISnackbarAlertProps) => {
-  return (
-    <div className="snackbar-alert-container">
-      <Snackbar
-        autoHideDuration={autoHideDuration}
-        open={isOpen}
-        anchorOrigin={position || { vertical: 'top', horizontal: 'center' }}
+}: 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={{
-          root: 'snackbar-alert-snackbar-root',
+          icon: 'snackbar-alert-icon',
+          root: 'snackbar-alert-alert-root',
+          action: 'snackbar-alert-action',
+          message: 'snackbar-alert-message',
+          filled: 'snackbar-alert-filled',
         }}
       >
-        <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>
-  )
-}
+        {message}
+      </Alert>
+    </Snackbar>
+  </div>
+)
 
 export default SnackbarAlert

package/src/components/confirmationContainer/index.tsx

@@ -239,7 +239,7 @@ export const ConfirmationContainer = ({
                             className="share-by-link-copy-icon"
                             onClick={() => {
                               navigator.clipboard.writeText(
-                                _get(inputRef, 'current.value')
+                                _get(inputRef, 'current.value') || ""
                               )
                               setShowCopyModal(true)
                               onLinkCopied()

package/src/components/countdown/index.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react'
-import moment from 'moment-timezone'
 import './style.css'
 
+import moment from 'moment-timezone'
+import React, { useEffect, useState } from 'react'
+
 interface CountdownTypes {
   startDate: string;
   timezone?: string;
@@ -13,9 +14,8 @@ interface CountdownTypes {
   isLoggedIn?: boolean;
 }
 
-const isTimeExpired = (startDate: string, timezone: string) => {
-  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'))
-}
+const isTimeExpired = (startDate: string, timezone: string) =>
+  !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'))
 
 function Countdown({
   startDate,
@@ -25,7 +25,7 @@ function Countdown({
   showMessage = false,
   disableLeadingZero = false,
   callback = () => {},
-  isLoggedIn
+  isLoggedIn,
 }: CountdownTypes) {
   const [duration, setDuration] = useState('')
   const [timeExpired, setTimeExpired] = useState(false)
@@ -35,11 +35,11 @@ function Countdown({
   }, [])
 
   useEffect(() => {
-    let timer: any;
+    let timer: any
 
-    if(!timeExpired) {
+    if (!timeExpired) {
       timer = setInterval(() => {
-        if(isTimeExpired(startDate, timezone)) {
+        if (isTimeExpired(startDate, timezone)) {
           clearInterval(timer)
           setTimeExpired(true)
           callback()
@@ -58,8 +58,8 @@ function Countdown({
           second: duration.seconds(),
         }
         let timeLeft = ''
-  
-        for(let date in dateArr) {
+
+        for (const date in dateArr) {
           const unit = dateArr[date] === 1 ? date : date + 's'
           let val = dateArr[date]
 
@@ -67,13 +67,13 @@ function Countdown({
             val = '0' + dateArr[date]
           }
 
-          if(timeLeft) {
+          if (timeLeft) {
             timeLeft += `, ${val} ${unit}`
-          } else if(dateArr[date]) {
+          } else if (dateArr[date]) {
             timeLeft += `${val} ${unit}`
           }
         }
-        
+
         setDuration(timeLeft)
       }, 1000)
     }
@@ -84,15 +84,15 @@ function Countdown({
 
   return (
     <>
-     {!timeExpired && duration && (
-      <div className={`countdown ${!isLoggedIn ? 'countdown-on-bottom' : ''}`}>
-        <div>
-          <p className='title'>{title}</p>
-          <p>{duration}</p>
+      {!timeExpired && duration && (
+        <div className={`countdown ${!isLoggedIn ? 'countdown-on-bottom' : ''}`}>
+          <div>
+            <p className="title">{title}</p>
+            <p>{duration}</p>
+          </div>
+          {showMessage && <p className="message">{message}</p>}
         </div>
-        {showMessage && <p className='message'>{message}</p>}
-      </div>
-     )}
+      )}
     </>
   )
 }

package/src/components/delegationsContainer/IssueComponent.tsx

@@ -1,4 +1,5 @@
 import axios, { AxiosError } from 'axios'
+import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _map from 'lodash/map'
 import React, { useEffect, useState } from 'react'
@@ -123,7 +124,7 @@ const IssueComponent = ({
                     resetForm()
                   } catch (e) {
                     if (axios.isAxiosError(e)) {
-                      const error = e?.response?.data?.message || 'Error'
+                      const error = _get(e, 'response.data.message') || 'Error'
                       setError(error)
                     } else if (e instanceof Error) {
                       setError(e?.message || 'Error')

package/src/components/forgotPasswordModal/index.tsx

@@ -3,6 +3,7 @@ import './style.css'
 import { Box, CircularProgress, Modal } from '@mui/material'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
+import _identity from 'lodash/identity'
 import React, { FC, useState } from 'react'
 import * as Yup from 'yup'
 
@@ -13,9 +14,10 @@ import { PoweredBy } from '../common/PoweredBy'
 export interface IForgotPasswordProps {
   onClose: () => void;
   onLoginButtonClick: () => void;
-  onForgotPasswordSuccess: (res: any) => void;
+  onForgotPasswordSuccess: (res: IAxiosResponseData) => void;
   onForgotPasswordError: (e: AxiosError) => void;
   showPoweredByImage?: boolean;
+  displaySuccessMessage?: boolean;
 }
 
 interface ValuesTypes {
@@ -39,21 +41,37 @@ const Schema = Yup.object().shape({
 })
 
 export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
-  onClose = () => {},
-  onLoginButtonClick = () => {},
-  onForgotPasswordSuccess = () => {},
-  onForgotPasswordError = () => {},
+  onClose = _identity,
+  onLoginButtonClick = _identity,
+  onForgotPasswordSuccess = _identity,
+  onForgotPasswordError = _identity,
   showPoweredByImage = false,
+  displaySuccessMessage = false,
 }) => {
   const [loading, setLoading] = useState(false)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+  const showSuccess = displaySuccessMessage && successMessage
 
   const onForgotPassword = async ({ email }: ValuesTypes) => {
+    if (showSuccess) {
+      setSuccessMessage(null)
+      onClose()
+      return
+    }
+
     try {
       setLoading(true)
       const { data } = await forgotPassword(email)
 
       onForgotPasswordSuccess(data)
-      onClose()
+
+      if (displaySuccessMessage && data?.success) {
+        setSuccessMessage(data?.message)
+      }
+
+      if (!displaySuccessMessage) {
+        onClose()
+      }
     } catch (e) {
       if (axios.isAxiosError(e)) {
         onForgotPasswordError(e)
@@ -63,12 +81,10 @@ export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
     }
   }
 
-  const _onClose = loading ? () => {} : onClose
-
   return (
     <Modal
       open={true}
-      onClose={_onClose}
+      onClose={loading ? _identity : onClose}
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
       className="forgot-password-modal"
@@ -85,16 +101,31 @@ export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
                 <div className="forgot-password-container">
                   <div className="title">Password Reset</div>
                   <div className="forgot-password-container__singleField">
-                    <Field name="email" label="Email" component={CustomField} />
+                    {showSuccess ? (
+                      <p id="forgot-password-success-message">{successMessage}</p>
+                    ) : (
+                      <Field name="email" label="Email" component={CustomField} />
+                    )}
                   </div>
                 </div>
                 <div className="forgot-password-action-button">
-                  <button type="submit" disabled={!(isValid && dirty)}>
-                    {loading ? <CircularProgress size="22px" /> : 'Submit'}
+                  <button
+                    type="submit"
+                    disabled={showSuccess ? false : !(isValid && dirty)}
+                  >
+                    {loading ? (
+                      <CircularProgress size="22px" />
+                    ) : showSuccess ? (
+                      'Close'
+                    ) : (
+                      'Submit'
+                    )}
                   </button>
                 </div>
                 <div className="login">
-                  <span onClick={onLoginButtonClick}>Back to Log In</span>
+                  <span aria-hidden onClick={onLoginButtonClick}>
+                    Back to Log In
+                  </span>
                 </div>
                 {showPoweredByImage ? <PoweredBy /> : null}
               </Form>

package/src/components/loginForm/index.tsx

@@ -106,7 +106,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
             onLoginSuccess(_get(authRes, 'data'))
           } catch (e) {
             if (axios.isAxiosError(e)) {
-              const error = e?.response?.data?.message || 'Error'
+              const error = _get(e, 'response.data.message') || 'Error'
               setError(error)
               onLoginError(e)
             } else if (e instanceof Error) {

package/src/components/loginModal/index.tsx

@@ -93,10 +93,10 @@ export const LoginModal: FC<Props> = ({
                   const event = new window.CustomEvent('tf-login')
                   window.document.dispatchEvent(event)
                 }
-                onLogin(_get(authRes, 'data.data'))
+                onLogin(_get(authRes, 'data.data', {}) as IProfileData)
               } catch (e) {
                 if (axios.isAxiosError(e)) {
-                  const error = e?.response?.data?.message || 'Error'
+                  const error = _get(e, 'response.data.message', 'Error')
                   setError(error)
                 } else if (e instanceof Error) {
                   setError(e?.message || 'Error')

package/src/components/loginModal/style.css

@@ -46,7 +46,9 @@
   background-color: #505050;
   border-color: #505050;
 }
-
+.login-logo-tff{
+    height: 60px;
+}
 .server_auth__error {
     color: red;
     padding-left: 25px;

package/src/components/myTicketsContainer/index.tsx

@@ -31,6 +31,7 @@ interface MyTicketsTypes {
   selectEventsLabel?: string;
   openLoginModal?: () => void;
   hideDetailsButton?: boolean;
+  customNoOrderContent?: React.ReactNode;
   columns?: IColumnData[];
 }
 
@@ -49,6 +50,7 @@ export const MyTicketsContainer = ({
   hideDetailsButton = false,
   columns = [],
   openLoginModal,
+  customNoOrderContent = null,
 }: MyTicketsTypes) => {
   const [data, setData] = useState<any>(null)
   const [loading, setLoading] = useState(true)
@@ -79,7 +81,7 @@ export const MyTicketsContainer = ({
       setData(data)
     } catch (error) {
       if (axios.isAxiosError(error)) {
-        if (error.response?.data.error === 'invalid_token') {
+        if (_get(error, 'response.data.error') === 'invalid_token') {
           if (isWindowDefined) {
             window.localStorage.removeItem('user_data')
             setUserExpired(true)
@@ -110,6 +112,15 @@ export const MyTicketsContainer = ({
     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}`}>
       <>
@@ -191,14 +202,7 @@ export const MyTicketsContainer = ({
         !loading && (
           <>
             <h2>My Ticket Orders</h2>
-            <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>
+            {noOrderContent}
           </>
         )
       )}