tf-checkout-react 1.3.2 → 1.3.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.2",
+  "version": "1.3.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -779,7 +779,8 @@ export const BillingInfoContainer = React.memo(
                                             validate={getValidateFunctions(
                                               element,
                                               states,
-                                              props.values
+                                              props.values,
+                                              props.errors,
                                             )}
                                             setFieldValue={props.setFieldValue}
                                             onBlur={props.handleBlur}
@@ -829,14 +830,18 @@ export const BillingInfoContainer = React.memo(
                           return (
                             <div key={group.id}>
                               <div className={groupClassname}>
-                                {_map(groupItems, element => (
+                                {_map(groupItems, element => {
+                                  if (_includes(['holderFirstName', 'holderLastName'], element.name)) {
+                                    element.required = showTicketHolders
+                                  }
+                                  return (
                                   <div
                                     className={element.className}
                                     key={element.name}
                                   >
                                     <Field
                                       name={`${element.name}-${index}`}
-                                      label={element.label}
+                                      label={`${element.label}${element.required ? '' : ' (optional)'}`}
                                       type={element.type}
                                       component={
                                         element.type === 'checkbox'
@@ -855,9 +860,9 @@ export const BillingInfoContainer = React.memo(
                                         element.onValidate
                                           ? element.onValidate
                                           : () =>
-                                              props.errors[
-                                                `${element.name}-${index}`
-                                              ]
+                                            props.errors[
+                                              `${element.name}-${index}`
+                                            ]
                                       )}
                                       disableDropdown={element.disableDropdown}
                                       setPhoneValidationIsLoading={
@@ -865,7 +870,8 @@ export const BillingInfoContainer = React.memo(
                                       }
                                     />
                                   </div>
-                                ))}
+                                  )
+                                })}
                               </div>
                             </div>
                           )

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

@@ -8,7 +8,7 @@ import { CONFIGS } from '../../utils'
 import { IGroupItem } from '../../types'
 import { combineValidators, requiredValidator } from '../../validators'
 import { nanoid } from 'nanoid'
-import { FormikValues } from 'formik'
+import { FormikErrors, FormikValues } from 'formik'
 
 export interface ILoggedInValues {
   emailLogged?: string;
@@ -180,7 +180,8 @@ export const createCheckoutDataBody = (
 export const getValidateFunctions = (
   element: IGroupItem,
   states: Array<{ [key: string]: any }>,
-  values: FormikValues
+  values: FormikValues,
+  errors: FormikErrors<any>,
 ) => {
   const validationFunctions: any[] = []
 
@@ -197,6 +198,14 @@ export const getValidateFunctions = (
     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

package/src/components/common/DatePickerField.tsx

@@ -90,7 +90,13 @@ export const DatePickerField = ({
                 {...params}
                 inputProps={{ ...params.inputProps, placeholder: 'dd/mm/yyyy' }}
                 theme={theme}
-                field={field}
+                field={{
+                  ...field, onChange: (evt: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+                    if (params.inputProps && params.inputProps.onChange) {
+                      params.inputProps.onChange(evt);
+                    }
+                  }
+                }}
                 form={form}
                 label={label}
                 type="tel"

package/src/components/common/PhoneNumberField.tsx

@@ -29,6 +29,7 @@ export const PhoneNumberField = ({
     initialValues,
     setFieldValue,
     setFieldTouched,
+    setErrors,
   },
   disableDropdown = true,
   fill = false,
@@ -50,17 +51,27 @@ export const PhoneNumberField = ({
 
     debounceCb(async () => {
       try {
+        if (!values[field.name]) {
+          const newErrors = { ...errors }
+          delete newErrors[field.name]
+          setErrors(newErrors)
+          return
+        }
         if (values[field.name]) {
           await validatePhoneNumber(values[field.name])
         }
-        setFieldError(field.name, '')
+        if (errors[field.name]) {
+          const newErrors = { ...errors }
+          delete newErrors[field.name]
+          setErrors(newErrors)
+        }
       } catch (error) {
         const message = _get(
           error,
           'response.data.message',
           'Invalid phone number'
         )
-        if (values[field.name]) {
+        if (values[field.name] && errors[field.name] !== message) {
           setFieldError(field.name, message)
         }
       } finally {
@@ -93,6 +104,7 @@ export const PhoneNumberField = ({
         fullWidth
         autoFormat={false}
         disableAreaCodes={true}
+        countryCodeEditable={false}
       />
     </>
   )

package/src/components/confirmationContainer/index.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable react/no-unescaped-entities */
-import React, { useEffect, useRef, useState } from 'react'
 import './style.css'
-import _map from 'lodash/map'
+
+import { AxiosError } from 'axios'
 import _get from 'lodash/get'
-import { IReferralPromotion } from '../../types'
+import _map from 'lodash/map'
+import React, { useEffect, useRef, useState } from 'react'
+
 import { getConfirmationData } from '../../api'
-import { AxiosError } from 'axios'
+import { IReferralPromotion } from '../../types'
 import SocialButtons from './social-buttons'
 
 export interface IShareButton {
@@ -15,6 +17,13 @@ export interface IShareButton {
   shareData: any;
 }
 
+
+export interface IConfirmationLabels {
+  confirmationTitle?: string;
+  confirmationMain?: string;
+  confirmationHelper?: string;
+}
+
 export interface IConfirmationPage {
   hasCopyIcon?: boolean;
   isReferralEnabled: boolean;
@@ -25,9 +34,11 @@ export interface IConfirmationPage {
   onGetConfirmationDataError: (e: AxiosError) => void;
   onLinkCopied: () => void;
   orderHash?: string;
+  confirmationLabels: IConfirmationLabels;
 }
 
 export const ConfirmationContainer = ({
+  confirmationLabels,
   hasCopyIcon = true,
   isReferralEnabled,
   showDefaultShareButtons,
@@ -93,7 +104,11 @@ export const ConfirmationContainer = ({
     const newData = { ...data, personal_share_link: e.target.value }
     setData(newData)
   }
-
+  const {
+    confirmationTitle = 'Your Tickets are Confirmed!',
+    confirmationMain = 'Your tickets are available in My Tickets section',
+    confirmationHelper = 'Please bring them with you to the event',
+  } = confirmationLabels
   return (
     <div className="confirmation-page">
       {data && (
@@ -103,16 +118,17 @@ export const ConfirmationContainer = ({
               <img className='product-image' src={data.product_image}/>
             </div>
             <div className="header-product-text">
-              <p className="title">Your Tickets are Confirmed!</p>
+              <p className="title">{ confirmationTitle }</p>
               <div className="share-message-section">
                 {data.attach_tickets ? (
                   <span className="main">Your tickets have been emailed to you</span>
                 ) : (
-                  <span className="main">Your tickets are available in My Tickets section</span>
+                  <span className="main">{ confirmationMain }</span>
                 )}
-                <span className="helper">
-                  Please bring them with you to the event
-                </span>
+                {
+                 <span className="helper">
+                  {data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper }
+                </span>}
               </div>
             </div>
           </div>
@@ -166,7 +182,7 @@ export const ConfirmationContainer = ({
                               src="https://img.icons8.com/office/50/000000/copy.png"
                               alt="copy"
                             />: <span className='copy-icon'>Copy</span>}
-                            
+
                           </div>
                         </div>
                       </div>

package/src/components/ticketsContainer/index.tsx

@@ -356,20 +356,12 @@ export const TicketsContainer = ({
   const themeMui = createTheme(themeOptions)
 
   useEffect(() => {
-    isWindowDefined &&
-      window.document.addEventListener('custom-logout', handleLogout)
-    return () => {
-      isWindowDefined &&
-        window.document.removeEventListener('custom-logout', handleLogout)
-    }
-  }, [])
+    window.document.addEventListener('custom-login', handleExternalLogin)
+    window.document.addEventListener('custom-logout', handleLogout)
 
-  useEffect(() => {
-    isWindowDefined &&
-      window.document.addEventListener('custom-login', handleExternalLogin)
     return () => {
-      isWindowDefined &&
-        window.document.removeEventListener('custom-login', handleExternalLogin)
+      window.document.removeEventListener('custom-login', handleExternalLogin)
+      window.document.removeEventListener('custom-logout', handleLogout)
     }
   }, [])
 
@@ -400,20 +392,42 @@ export const TicketsContainer = ({
     _isEmpty(selectedTickets) ||
     Object.values(selectedTickets)[0] === 0
 
+  const isTicketAvailable = _some(
+    tickets,
+    ticket => ticket.displayTicket && !ticket.soldOut && ticket.salesStarted
+  )
+
   const wrappedActionsSectionComponent = React.isValidElement(
     ActionsSectionComponent
   )
     ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, {
         handleGetTicketClick,
         isTicketOnSale,
+        isTicketAvailable,
       })
     : null
 
   const externalUrl = event?.redirectUrl
-  const eventSaleIsNotStarted = !event?.salesStarted && event?.salesStart
+  const eventSaleIsNotStarted =
+    !event?.salesStarted && event?.salesStart && !isTicketAvailable
   const influencers = event?.referralsEnabled ? event?.referrals : []
   const previewKey = getQueryVariable('pk') || undefined
 
+  const canShowGetTicketBtn = () => {
+    if (
+      !wrappedActionsSectionComponent &&
+      !eventSaleIsNotStarted &&
+      isTicketOnSale &&
+      !event?.salesEnded &&
+      !externalUrl &&
+      !previewKey
+    ) {
+      return true
+    }
+
+    return false
+  }
+
   return (
     <ThemeProvider theme={themeMui}>
       {!isLoading && <ReferralLogic eventId={eventId} />}
@@ -485,24 +499,19 @@ export const TicketsContainer = ({
               />
             ) : null}
             {wrappedActionsSectionComponent}
-            {!wrappedActionsSectionComponent &&
-              !eventSaleIsNotStarted &&
-              isTicketOnSale &&
-              !event?.salesEnded &&
-              !externalUrl &&
-              !previewKey && (
-                <Button
-                  aria-hidden={true}
-                  className={`book-button 
+            {canShowGetTicketBtn() && (
+              <Button
+                aria-hidden={true}
+                className={`book-button 
                   ${bookButtonIsDisabled ? 'disabled' : ''}  
                   ${isButtonScrollable ? 'is-scrollable' : ''}
                   ${!isLoggedIn ? 'on-bottom' : ''}
                 `}
-                  onClick={handleGetTicketClick}
-                >
-                  {getTicketsLabel || 'GET TICKETS'}
-                </Button>
-              )}
+                onClick={handleGetTicketClick}
+              >
+                {getTicketsLabel || 'GET TICKETS'}
+              </Button>
+            )}
             {isLogged && !hideSessionButtons ? (
               <div className="session-wrapper">
                 <span className="session-container">