tf-checkout-react 1.6.6 → 1.7.2

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'
@@ -25,6 +26,7 @@ export interface ILoggedInValues {
   emailLogged?: string;
   firstNameLogged?: string;
   lastNameLogged?: string;
+  phoneLogged?: string;
 }
 
 export interface IValues {
@@ -74,6 +76,7 @@ export const getInitialValues = (
   initialValues['holderLastName-0'] =
     propsInitialValues.lastName || userValues.lastName || ''
   initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || ''
+  initialValues['holderPhone-0'] = propsInitialValues.phone || userValues.phone || ''
 
   return { ...initialValues, ...ticketHoldersCustomFieldsInitValues }
 }
@@ -153,7 +156,9 @@ export const createCheckoutDataBody = (
     last_name: !index
       ? item[`holderLastName-${index}`] || logedInValues.lastNameLogged || ''
       : item[`holderLastName-${index}`] || '',
-    phone: item[`holderPhone-${index}`] || '',
+    phone: !index
+      ? item[`holderPhone-${index}`] || logedInValues.phoneLogged || ''
+      : item[`holderPhone-${index}`] || '',
     email: !index
       ? item[`holderEmail-${index}`] || logedInValues.emailLogged || ''
       : item[`holderEmail-${index}`] || '',
@@ -288,3 +293,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/CustomField.tsx

@@ -1,4 +1,9 @@
 /* eslint-disable no-underscore-dangle */
+/* eslint-disable import/no-unresolved */
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
+import IconButton from '@mui/material/IconButton'
+import InputAdornment from '@mui/material/InputAdornment'
 import TextField from '@mui/material/TextField'
 import { useTheme } from '@mui/styles'
 import { FieldInputProps, FormikProps } from 'formik'
@@ -31,6 +36,7 @@ export interface ICustomField {
   minRows?: string | number;
   maxRows?: string | number;
 }
+
 export interface IOtherProps {
   [key: string]: any;
 }
@@ -52,9 +58,11 @@ export const CustomField = ({
   disabled,
 }: ICustomField & IOtherProps) => {
   const [isShrinked, setIsShrinked] = useState(Boolean(field.value))
+  const [showPassword, setShowPassword] = useState(false)
   const _ref = useRef<HTMLInputElement>(null)
   const isAutoFilled = _ref.current?.matches(':-webkit-autofill')
   const isSelectField = type === 'select'
+  const isPasswordField = type === 'password'
   const error = _get(errors, field.name)
   const isTouched =
     Boolean(_get(touched, field.name)) ||
@@ -63,6 +71,34 @@ export const CustomField = ({
   const customTheme: any = useTheme()
   const inputProps: any = { sx: customTheme?.input }
 
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword)
+  }
+
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+  }
+
+  const finalInputProps = isPasswordField
+    ? {
+        ...InputProps,
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+              edge="end"
+              size="small"
+              sx={{ color: customTheme?.input?.color || 'inherit' }}
+            >
+              {showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }
+    : InputProps
+
   useEffect(() => {
     if (_isFunction(inputRef)) {
       inputRef(_ref.current)
@@ -77,7 +113,7 @@ export const CustomField = ({
       placeholder=""
       id={field.name}
       label={label}
-      type={type}
+      type={isPasswordField ? (showPassword ? 'text' : 'password') : type}
       select={isSelectField}
       fullWidth={true}
       error={!!error && isTouched}
@@ -92,9 +128,9 @@ export const CustomField = ({
       }}
       InputLabelProps={{
         sx: customTheme?.input,
-        shrink: isShrinked || Boolean(field.value) || isAutoFilled,
+        shrink: isSelectField || isShrinked || Boolean(field.value) || isAutoFilled,
       }}
-      InputProps={InputProps}
+      InputProps={finalInputProps}
       inputProps={{ ...inputProps, ...pInputProps }}
       inputRef={_ref}
       multiline={multiline}

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/PhoneNumberField.tsx

@@ -32,6 +32,7 @@ export const PhoneNumberField = ({
     setFieldValue,
     setFieldTouched,
     setErrors,
+    submitCount,
   },
   disableDropdown = true,
   defaultCountry = 'us',
@@ -41,6 +42,7 @@ export const PhoneNumberField = ({
 }: 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(
@@ -103,8 +105,8 @@ export const PhoneNumberField = ({
         defaultCountry={defaultCountry}
         disableDropdown={disableDropdown}
         label={label}
-        error={!!error && (isTouched || fill)}
-        helperText={(isTouched || fill) && error}
+        error={!!error && (isTouched || fill || isSubmitAttempted)}
+        helperText={(isTouched || fill || isSubmitAttempted) && error}
         fullWidth
         autoFormat={false}
         disableAreaCodes={true}

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/config.ts

@@ -29,7 +29,6 @@ import {
   TelegramShareButton,
   TumblrIcon,
   TumblrShareButton,
-  TwitterIcon,
   TwitterShareButton,
   ViberIcon,
   ViberShareButton,
@@ -41,6 +40,7 @@ import {
   WhatsappShareButton,
   WorkplaceIcon,
   WorkplaceShareButton,
+  XIcon,
 } from 'react-share'
 
 import { InstagramIcon, SocialButton, SpotifyIcon } from '../common/socials'
@@ -51,7 +51,7 @@ const config: any = {
     component: FacebookMessengerShareButton,
     icon: FacebookMessengerIcon,
   },
-  twitter: { component: TwitterShareButton, icon: TwitterIcon },
+  twitter: { component: TwitterShareButton, icon: XIcon },
   linkedin: { component: LinkedinShareButton, icon: LinkedinIcon },
   pinterest: { component: PinterestShareButton, icon: PinterestIcon },
   vk: { component: VKShareButton, icon: VKIcon },
@@ -74,6 +74,6 @@ const config: any = {
   spotify: { component: SocialButton, icon: SpotifyIcon },
 }
 
-export default function(key: string) {
+export default function (key: string) {
   return config[key]
 }

package/src/components/confirmationContainer/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 import './style.css'
 
+import { Button } from '@mui/material'
 import axios, { AxiosError } from 'axios'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
@@ -24,6 +25,7 @@ export interface IShareButton {
   eventActionId?: string;
   oneTimeAction?: boolean;
   alreadyApplied?: boolean;
+  btnClassName?: string;
 }
 
 export interface IConfirmationLabels {
@@ -50,6 +52,8 @@ export interface IConfirmationPage {
   showReferralsInfoText?: boolean;
   showCopyInfoModal?: boolean;
   showPricingNoteSection?: boolean;
+  showOrderDetailsBtn?: boolean;
+  onOrderDetailsClick?: (data: ICheckoutCompleteData) => void;
 }
 
 export const ConfirmationContainer = ({
@@ -67,6 +71,8 @@ export const ConfirmationContainer = ({
   showReferralsInfoText = false,
   showCopyInfoModal = false,
   showPricingNoteSection = false,
+  showOrderDetailsBtn = false,
+  onOrderDetailsClick = _identity,
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
   const [data, setData] = useState<ICheckoutCompleteData | null>(null)
@@ -195,6 +201,19 @@ export const ConfirmationContainer = ({
               dangerouslySetInnerHTML={createMarkup(data.custom_confirmation_page_text)}
             />
           ) : null}
+          {showOrderDetailsBtn && (
+            <div className="order-details-button-container">
+              <Button
+                className="view-order-button"
+                variant="contained"
+                onClick={() => {
+                  onOrderDetailsClick(data)
+                }}
+              >
+                View Order
+              </Button>
+            </div>
+          )}
           {data.disable_referral === false && isReferralEnabled && (
             <>
               <div className="referral_text_image_section">
@@ -239,7 +258,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/confirmationContainer/social-buttons.tsx

@@ -14,6 +14,7 @@ const SocialComponent = ({
   onAfterShare,
   alreadyApplied,
   oneTimeAction,
+  btnClassName = '',
 }: IShareButton) => {
   const Component = config(platform)?.component
   const Icon = config(platform)?.icon
@@ -21,7 +22,7 @@ const SocialComponent = ({
   return (
     <>
       {Component && (
-        <Component {...shareData} disabled={isActionDisabled}>
+        <Component {...shareData} disabled={isActionDisabled} className={btnClassName}>
           <div
             onKeyDown={_identity}
             onClick={!isActionDisabled ? onAfterShare : _identity}
@@ -91,13 +92,14 @@ const SocialButtons = ({
             }}
           />
           <SocialComponent
-            mainLabel="Tweet to your"
-            subLabel="Followers"
+            mainLabel="Post on"
+            subLabel="X"
             platform="twitter"
             shareData={{
               title: name,
               url: shareLink,
             }}
+            btnClassName="twitter-btn"
           />
           <SocialComponent
             mainLabel="Message friends on"

package/src/components/confirmationContainer/style.css

@@ -26,14 +26,14 @@
 .confirmation-page .main {
   font-weight: 700;
   font-size: 15px;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
+    Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
 }
 .confirmation-page .helper {
   font-size: 14px;
   margin-top: 5px;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
+    Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
 }
 .confirmation-page .referral_text_image_section {
   display: flex;
@@ -89,7 +89,7 @@
 .confirmation-page .social-media-btns {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  grid-gap: 5px
+  grid-gap: 5px;
 }
 .confirmation-page .sharing-btn {
   min-width: 130px;
@@ -200,3 +200,7 @@
     width: 250px;
   }
 }
+
+.twitter-btn {
+  background-color: #000 !important;
+}

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>
-     )}
+      )}
     </>
   )
 }