tf-checkout-react 1.4.24 → 1.4.25

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

@@ -44,8 +44,7 @@ export const getInitialValues = (
   const initialValues: IValues = {}
   _forEach(results, groupItem => {
     const { name, value } = groupItem
-    initialValues[name] =
-      value || propsInitialValues[name] || userValues[name] || ''
+    initialValues[name] = value || propsInitialValues[name] || userValues[name] || ''
   })
 
   // set logged in user as first ticket holder
@@ -53,8 +52,7 @@ export const getInitialValues = (
     propsInitialValues.firstName || userValues.firstName || ''
   initialValues['holderLastName-0'] =
     propsInitialValues.lastName || userValues.lastName || ''
-  initialValues['holderEmail-0'] =
-    propsInitialValues.email || userValues.email || ''
+  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || ''
 
   return initialValues
 }
@@ -100,22 +98,6 @@ interface ICheckoutBody {
   };
 }
 
-interface IUserData {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  city?: string;
-  country?: string;
-  countryId?: string;
-  phone?: string;
-  streetAddress?: string;
-  state?: string;
-  zip?: string;
-  zipCode?: string;
-  stateId?: string;
-}
-
 interface IticketHolder {
   first_name?: string;
   last_name?: string;
@@ -123,34 +105,14 @@ interface IticketHolder {
   email?: string;
 }
 
-export const setLoggedUserData = (data: IUserData) => ({
-  id: data.id,
-  first_name: data.firstName,
-  last_name: data.lastName,
-  email: data.email,
-  confirmEmail: data.email,
-  city: data?.city || '',
-  country: data?.countryId || data?.country || '',
-  phone: data?.phone || '',
-  street_address: data?.streetAddress || '',
-  state: data?.stateId || '',
-  zip: data?.zip || data?.zipCode || '',
-})
-
 export const createCheckoutDataBody = (
   ticketsQuantity: number,
   values: IValues = {},
   logedInValues: ILoggedInValues = {},
   includeDob = false
 ): ICheckoutBody => {
-  const {
-    firstName,
-    lastName,
-    holderAge,
-    confirmEmail,
-    confirmPassword,
-    ...restValues
-  } = values
+  const { firstName, lastName, holderAge, confirmEmail, confirmPassword, ...restValues } =
+    values
 
   const holders = []
   let ticket_holders: IticketHolder[] = []
@@ -162,9 +124,7 @@ export const createCheckoutDataBody = (
     holders.push(individualHolder)
   }
 
-  const filteredHolders = holders.filter(
-    holder => Object.entries(holder).length > 0
-  )
+  const filteredHolders = holders.filter(holder => Object.entries(holder).length > 0)
   ticket_holders = filteredHolders.map((item, index) => ({
     first_name: !index
       ? item[`holderFirstName-${index}`] || logedInValues.firstNameLogged || ''
@@ -214,10 +174,7 @@ export const getValidateFunctions = (
   const validationFunctions: any[] = []
 
   if (element.required) {
-    if (
-      element.name !== 'state' ||
-      (element.name === 'state' && states.length)
-    ) {
+    if (element.name !== 'state' || (element.name === 'state' && states.length)) {
       validationFunctions.push(requiredValidator)
     }
   }
@@ -234,17 +191,13 @@ export const getValidateFunctions = (
 
   if (element.name === 'confirmEmail') {
     const isSameEmail = (confirmEmail?: string) =>
-      values.email !== confirmEmail
-        ? 'Please confirm your email address correctly'
-        : null
+      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
+      values.password !== confirmPassword ? 'Password confirmation does not match' : null
     validationFunctions.push(isSame)
   }
 
@@ -258,10 +211,7 @@ export const assingUniqueIds = (data: any): any => {
 
   return _map(data, (item: any) => {
     _forEach(item, (itemValue: string, key) => {
-      if (
-        _isArray(itemValue) &&
-        !itemValue.some(item => typeof item === 'string')
-      ) {
+      if (_isArray(itemValue) && !itemValue.some(item => typeof item === 'string')) {
         item[key] = assingUniqueIds(itemValue)
       }
     })

package/src/components/common/CheckboxField.tsx

@@ -28,13 +28,12 @@ export const CheckboxField = ({
   uniqueId,
   dateFormat,
   datePlaceholder,
+  isCountryCodeEditable,
   ...rest
 }: ICheckboxField & IOtherProps) => {
   const customTheme: any = useTheme()
   return (
-    <FormControl
-      error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ''])}
-    >
+    <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ''])}>
       <FormGroup>
         <FormControlLabel
           control={<Checkbox {...field} {...rest} />}
@@ -44,7 +43,7 @@ export const CheckboxField = ({
           }}
         />
       </FormGroup>
-      {!!(rest?.form?.errors && rest.form.errors[field?.name ?? '']) ? (
+      {rest?.form?.errors && rest.form.errors[field?.name ?? ''] ? (
         <FormHelperText>Required</FormHelperText>
       ) : null}
     </FormControl>

package/src/components/common/CustomField.tsx

@@ -108,11 +108,7 @@ export const CustomField = ({
     >
       {isSelectField
         ? _map(selectOptions, option => (
-            <option
-              key={option.value}
-              value={option.value}
-              disabled={option.disabled}
-            >
+            <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
             </option>
           ))

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

@@ -73,11 +73,7 @@ export const NativeSelectField = ({
         }}
       >
         {_map(selectOptions, option => (
-          <option
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-          >
+          <option key={option.value} value={option.value} disabled={option.disabled}>
             {option.label}
           </option>
         ))}

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

@@ -88,9 +88,7 @@ function SelectField({
         >
           {options?.map((option: ISelectOption) => (
             <MenuItem key={option.label} value={option.value}>
-              {isMultiple && (
-                <Checkbox checked={value.indexOf(option.value) > -1} />
-              )}
+              {isMultiple && <Checkbox checked={value.indexOf(option.value) > -1} />}
               <ListItemText primary={option.label} />
             </MenuItem>
           ))}

package/src/components/confirmationContainer/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-/* eslint-disable react/no-unescaped-entities */
 import './style.css'
 
 import Modal from '@mui/material/Modal'
@@ -19,7 +18,12 @@ export interface IShareButton {
   mainLabel: string;
   subLabel: string;
   platform: string;
-  shareData: any;
+  shareData: {
+    quote?: string;
+    url?: string;
+    title?: string;
+    appId?: string;
+  };
 }
 
 export interface IConfirmationLabels {
@@ -37,7 +41,7 @@ export interface IConfirmationPage {
   showDefaultShareButtons: boolean;
   messengerAppId: string;
   shareButtons: IShareButton[];
-  onGetConfirmationDataSuccess: (res: any) => void;
+  onGetConfirmationDataSuccess: (res: ICheckoutCompleteData) => void;
   onGetConfirmationDataError: (e: AxiosError) => void;
   onLinkCopied: () => void;
   orderHash?: string;
@@ -65,7 +69,7 @@ export const ConfirmationContainer = ({
   showPricingNoteSection = false,
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
-  const [data, setData] = useState<any>(null)
+  const [data, setData] = useState<ICheckoutCompleteData | null>(null)
   const dataEncoded = (isBrowser && window.localStorage.getItem('checkoutData')) || ''
   const dataDecoded = dataEncoded ? JSON.parse(dataEncoded) : { hash: orderHash }
   const { hash } = dataDecoded
@@ -75,19 +79,19 @@ export const ConfirmationContainer = ({
     (async () => {
       if (hash) {
         try {
-          const response = await getConfirmationData(hash)
-          const data = _get(response, 'data.data.attributes')
-          data.personal_share_sales = data.personal_share_sales.map((d: any) => {
+          const confirmationDataResponse = await getConfirmationData(hash)
+          const data = confirmationDataResponse.data.attributes
+          data.personal_share_sales = data.personal_share_sales.map(salesItem => {
             const salesData: IReferralPromotion = {
-              label: `If your friends buy ${d.sales} tickets`,
+              label: `If your friends buy ${salesItem.sales} tickets`,
               price: '',
             }
-            if (d.price === 0) {
+            if (salesItem.price === 0) {
               salesData.subLabel = 'Your ticket becomes'
               salesData.price = 'FREE!'
             } else {
               salesData.subLabel = 'Your ticket goes down to'
-              salesData.price = data.currency.symbol + d.price?.toFixed(2)
+              salesData.price = data.currency.symbol + Number(salesItem.price).toFixed(2)
             }
 
             return salesData
@@ -97,13 +101,13 @@ export const ConfirmationContainer = ({
             price: data.currency.symbol + data.product_price?.toFixed(2),
           })
           setData(data)
-          onGetConfirmationDataSuccess(response.data)
+          onGetConfirmationDataSuccess(confirmationDataResponse.data.attributes)
         } catch (error) {
           onGetConfirmationDataError(error.response)
         }
       }
     })()
-  }, [])
+  }, [hash])
 
   const [showCopyModal, setShowCopyModal] = useState(false)
 
@@ -112,7 +116,10 @@ export const ConfirmationContainer = ({
   }
 
   const onChangeShareLink = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newData = { ...data, personal_share_link: e.target.value }
+    const newData = {
+      ...data,
+      personal_share_link: e.target.value,
+    } as ICheckoutCompleteData
     setData(newData)
   }
   const {

package/src/components/idVerificationContainer/index.tsx

@@ -14,7 +14,7 @@ import {
   GetNetverifyUrlResponseData,
   VerificationStatusResponseData,
 } from '../../types/verification'
-import { getQueryVariable, isJson } from '../../utils'
+import { getQueryVariable, isBrowser, isJson } from '../../utils'
 import Modal from '../common/ModalComponent'
 import { VERIFICATION_MESSAGES, VERIFICATION_STATUSES } from './constants'
 
@@ -48,9 +48,7 @@ export const IDVerification = (props: IDVerificationProps) => {
   } = props
 
   const [loadingStatus, setLoadingStatus] = useState(true)
-  const [verificationStatus, setVerificationStatus] = useState<string | null>(
-    null
-  )
+  const [verificationStatus, setVerificationStatus] = useState<string | null>(null)
   const [showModal, setShowModal] = useState(false)
   const [netverifyUrl, setNetverifyUrl] = useState<string | null>(null)
   const [modalData, setModalData] = useState({
@@ -171,9 +169,7 @@ export const IDVerification = (props: IDVerificationProps) => {
           getVerificationStatus()
         }, 10000)
       } catch (error) {
-        if (
-          error.response?.data?.message === VERIFICATION_MESSAGES.WRONG_CUSTOMER
-        ) {
+        if (error.response?.data?.message === VERIFICATION_MESSAGES.WRONG_CUSTOMER) {
           setVerificationStatus(VERIFICATION_STATUSES.WRONG_CUSTOMER)
           setModalData({
             displaModal: true,
@@ -199,18 +195,12 @@ export const IDVerification = (props: IDVerificationProps) => {
   }
 
   useEffect(() => {
-    const isWindowDefined = typeof window !== 'undefined'
     const orderHash = getQueryVariable('order_hash')
 
-    if (isWindowDefined) {
-      const checkoutData = JSON.parse(
-        window.localStorage.getItem('checkoutData') || '{}'
-      )
+    if (isBrowser) {
+      const checkoutData = JSON.parse(window.localStorage.getItem('checkoutData') || '{}')
       if (_isEmpty(checkoutData) && orderHash) {
-        window.localStorage.setItem(
-          'checkoutData',
-          JSON.stringify({ hash: orderHash })
-        )
+        window.localStorage.setItem('checkoutData', JSON.stringify({ hash: orderHash }))
       }
     }
   }, [])
@@ -226,9 +216,7 @@ export const IDVerification = (props: IDVerificationProps) => {
             </div>
           )}
           {verificationStatus === VERIFICATION_STATUSES.PENDING && (
-            <div className="verify-message">
-              {VERIFICATION_MESSAGES.PENDING}
-            </div>
+            <div className="verify-message">{VERIFICATION_MESSAGES.PENDING}</div>
           )}
           {!isAccountVerifiedOrPending && (
             <Button

package/src/components/loginForm/index.tsx

@@ -5,11 +5,7 @@ import _identity from 'lodash/identity'
 import React, { FC, useState } from 'react'
 
 import { authorize, getProfileData } from '../../api'
-import {
-  combineValidators,
-  emailValidator,
-  requiredValidator,
-} from '../../validators'
+import { combineValidators, emailValidator, requiredValidator } from '../../validators'
 import { CustomField } from '../common'
 
 export interface ILoginFormProps {
@@ -30,34 +26,34 @@ export interface ILoginFormProps {
   showSignUpButton?: boolean;
 }
 
-interface IUserData {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  city?: string;
-  country?: string;
-  countryId?: string;
-  phone?: string;
-  streetAddress?: string;
-  state?: string;
-  zip?: string;
-  zipCode?: string;
-  stateId?: string;
-}
+// interface IUserData {
+//   id: string;
+//   firstName: string;
+//   lastName: string;
+//   email: string;
+//   city?: string;
+//   country?: string;
+//   countryId?: string;
+//   phone?: string;
+//   streetAddress?: string;
+//   state?: string;
+//   zip?: string;
+//   zipCode?: string;
+//   stateId?: string;
+// }
 
-export const setLoggedUserData = (data: IUserData) => ({
+export const setLoggedUserData = (data: IProfileData) => ({
   id: data.id,
   first_name: data.firstName,
   last_name: data.lastName,
   email: data.email,
   confirmEmail: data.email,
   city: data?.city || '',
-  country: data?.countryId || data?.country || '',
+  country: data?.countryId || '',
   phone: data?.phone || '',
   street_address: data?.streetAddress || '',
   state: data?.stateId || '',
-  zip: data?.zip || data?.zipCode || '',
+  zip: data?.zipCode || '',
 })
 
 export const LoginForm: FC<ILoginFormProps> = ({
@@ -79,7 +75,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
 }) => {
   const [error, setError] = useState('')
   return (
-    <div className='login-modal'>
+    <div className="login-modal">
       <Formik
         initialValues={{ email: '', password: '' }}
         onSubmit={async ({ email, password }) => {
@@ -89,7 +85,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
             let profileResponse = null
             try {
               profileResponse = await getProfileData()
-              onGetProfileDataSuccess(_get(profileResponse, 'data.data'))
+              onGetProfileDataSuccess(_get(profileResponse, 'data'))
             } catch (e) {
               if (axios.isAxiosError(e)) {
                 onGetProfileDataError(e)
@@ -97,17 +93,14 @@ export const LoginForm: FC<ILoginFormProps> = ({
               return
             }
 
-            const profileSpecifiedData = _get(profileResponse, 'data.data')
+            const profileSpecifiedData = _get(profileResponse, 'data')
             const profileDataObj = setLoggedUserData(profileSpecifiedData)
             if (typeof window !== 'undefined') {
-              window.localStorage.setItem(
-                'user_data',
-                JSON.stringify(profileDataObj)
-              )
+              window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
               const event = new window.CustomEvent('tf-login')
               window.document.dispatchEvent(event)
             }
-            onLoginSuccess(_get(authRes, 'data.data'))
+            onLoginSuccess(_get(authRes, 'data'))
           } catch (e) {
             if (axios.isAxiosError(e)) {
               const error = e?.response?.data?.message || 'Error'
@@ -135,8 +128,8 @@ export const LoginForm: FC<ILoginFormProps> = ({
             <div className="server_auth__error">{error}</div>
             {alreadyHasUser && (
               <p className="info-text-for-login">
-                It appears this email is already attached to an account. Please
-                log in here to complete your registration.
+                It appears this email is already attached to an account. Please log in
+                here to complete your registration.
               </p>
             )}
             {userExpired && (
@@ -151,10 +144,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
                   label="Email"
                   type="email"
                   component={CustomField}
-                  validate={combineValidators(
-                    requiredValidator,
-                    emailValidator
-                  )}
+                  validate={combineValidators(requiredValidator, emailValidator)}
                 />
               </div>
               <div className="login-modal-body__password">
@@ -171,10 +161,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
               </div>
               {showForgotPasswordButton && (
                 <div className="forgot-password">
-                  <span
-                    aria-hidden="true"
-                    onClick={onForgotPasswordButtonClick}
-                  >
+                  <span aria-hidden="true" onClick={onForgotPasswordButtonClick}>
                     Forgot password?
                   </span>
                 </div>

package/src/components/loginModal/index.tsx

@@ -5,14 +5,11 @@ import Box from '@mui/material/Box'
 import Modal from '@mui/material/Modal'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
-import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import React, { FC, useState } from 'react'
 
-import {
-  authorize,
-  getProfileData,
-} from '../../api'
+import { authorize, getProfileData } from '../../api'
+import { isBrowser, setLoggedUserData } from '../../utils'
 import { requiredValidator } from '../../validators'
 import { PoweredBy } from '../common/PoweredBy'
 
@@ -44,35 +41,6 @@ const style: React.CSSProperties = {
   border: '1px solid white',
   outline: 'none',
 }
-interface IUserData {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  city?: string;
-  country?: string;
-  countryId?: string;
-  phone?: string;
-  streetAddress?: string;
-  state?: string;
-  zip?: string;
-  zipCode?: string;
-  stateId?: string;
-}
-
-export const setLoggedUserData = (data: IUserData) => ({
-  id: data.id,
-  first_name: data.firstName,
-  last_name: data.lastName,
-  email: data.email,
-  confirmEmail: data.email,
-  city: data?.city || '',
-  country: data?.countryId || data?.country || '',
-  phone: data?.phone || '',
-  street_address: data?.streetAddress || '',
-  state: data?.stateId || '',
-  zip: data?.zip || data?.zipCode || '',
-})
 
 export const LoginModal: FC<Props> = ({
   onClose,
@@ -117,13 +85,10 @@ export const LoginModal: FC<Props> = ({
                   return
                 }
 
-                const profileSpecifiedData = _get(profileResponse, 'data.data')
+                const profileSpecifiedData = profileResponse.data
                 const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem(
-                    'user_data',
-                    JSON.stringify(profileDataObj)
-                  )
+                if (isBrowser) {
+                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
                   const event = new window.CustomEvent('tf-login')
                   window.document.dispatchEvent(event)
                 }
@@ -141,18 +106,21 @@ export const LoginModal: FC<Props> = ({
             {props => (
               <Form onSubmit={props.handleSubmit}>
                 <div className="modal-title">Login</div>
-                <div className='login-logo-container'>
+                <div className="login-logo-container">
                   <img
                     className="login-logo-tff"
-                    src={logo || "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg"}
+                    src={
+                      logo ||
+                      'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
+                    }
                     alt="logo"
                   />
                 </div>
                 <div className="server_auth__error">{error}</div>
                 {alreadyHasUser && (
                   <p className="info-text-for-login">
-                    It appears this email is already attached to an account.
-                    Please log in here to complete your registration.
+                    It appears this email is already attached to an account. Please log in
+                    here to complete your registration.
                   </p>
                 )}
                 {userExpired && (
@@ -194,12 +162,16 @@ export const LoginModal: FC<Props> = ({
                   </div>
                   {showForgotPasswordButton && (
                     <div className="forgot-password">
-                      <span aria-hidden="true" onClick={onForgotPassword}>Forgot password?</span>
+                      <span aria-hidden="true" onClick={onForgotPassword}>
+                        Forgot password?
+                      </span>
                     </div>
                   )}
                   {showSignUpButton && (
                     <div className="forgot-password">
-                      <span aria-hidden="true" onClick={onSignup}>Sign up</span>
+                      <span aria-hidden="true" onClick={onSignup}>
+                        Sign up
+                      </span>
                     </div>
                   )}
                   {showPoweredByImage ? <PoweredBy /> : null}

package/src/components/myTicketsContainer/index.tsx

@@ -73,7 +73,7 @@ export const MyTicketsContainer = ({
       const response = await getOrders(page, limit, filter)
       onGetOrdersSuccess(response)
 
-      const data = _get(response, 'data.data.attributes')
+      const data = _get(response, 'data.attributes')
       data.page -= 1
 
       setData(data)

package/src/components/orderDetailsContainer/index.tsx

@@ -108,7 +108,7 @@ export const OrderDetailsContainer = ({
         const response = await getOrderDetails(String(orderId))
         onGetOrdersSuccess(response)
 
-        const data = _get(response, 'data.data.attributes')
+        const data = _get(response, 'data.attributes')
         setData(data)
       } catch (error) {
         onGetOrdersError(error)
@@ -154,7 +154,7 @@ export const OrderDetailsContainer = ({
       const response = await getOrderDetails(orderId)
       onGetOrdersSuccess(response)
 
-      const data = _get(response, 'data.data.attributes')
+      const data = _get(response, 'data.attributes')
       const updatedData = { ...data }
       updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
         if (ticket.hash === activeTicket.hash) {
@@ -194,7 +194,7 @@ export const OrderDetailsContainer = ({
       const response = await getOrderDetails(orderId)
       onGetOrdersSuccess(response)
 
-      const data = _get(response, 'data.data.attributes')
+      const data = _get(response, 'data.attributes')
       const updatedData = { ...data }
       updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
         if (ticket.hash === activeTicket.hash) {