tf-checkout-react 1.0.80 → 1.0.84

package/package.json

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

package/src/api/index.ts

@@ -224,8 +224,9 @@ export const getProfileData = (accessToken: any) =>
       },
     })
     .catch((e: any) => {
+      const errorType = e?.response?.data?.error
       if (isWindowDefined) {
-        const event = new window.CustomEvent('auth_error', e)
+        const event = new window.CustomEvent('auth_error', { detail: errorType })
         window.document.dispatchEvent(event)
       }
       return e

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

@@ -13,6 +13,7 @@ import _identity from 'lodash/identity'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _includes from 'lodash/includes'
+import _isEqual from 'lodash/isEqual'
 
 import './style.css'
 import { combineValidators, requiredValidator } from '../../validators'
@@ -26,6 +27,7 @@ import {
   register,
   setCustomHeader,
   getStates,
+  getPaymentData,
 } from '../../api'
 import { LoginModal } from '../loginModal'
 import { RegisterModal } from '../registerModal'
@@ -40,7 +42,7 @@ import {
 import { CustomField } from '../common/CustomField'
 import axios from 'axios'
 import { CheckboxField } from '../common/CheckboxField'
-import { CircularProgress, ThemeOptions } from '@mui/material'
+import { Alert, CircularProgress, ThemeOptions } from '@mui/material'
 import { nanoid } from 'nanoid'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 import { SelectField } from '../common/SelectField'
@@ -90,6 +92,7 @@ export interface IBillingInfoPage {
 
   onLogin?: () => void;
   onLoginSuccess?: () => void;
+  onErrorClose?: () => void;
 
   initialValues?: FormikValues;
   buttonName?: string;
@@ -115,7 +118,7 @@ const LogicRunner: FC<{
   setValues,
   setUserValues,
   onGetStatesSuccess,
-  onGetStatesError,
+  onGetStatesError
 }) => {
   const prevCountry = useRef(values.country)
   useEffect(() => {
@@ -209,7 +212,8 @@ export const BillingInfoContainer = ({
   isLoggedIn: pIsLoggedIn = false,
   accountInfoTitle = '',
   hideLogo,
-  themeOptions
+  themeOptions,
+  onErrorClose = () => {}
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -250,6 +254,7 @@ export const BillingInfoContainer = ({
     state: '',
     zip: '',
   })
+  const [error, setError] = useState(null)
   const emailLogged =
     _get(userData, 'email', '') || _get(userValues, 'email', '')
   const firstNameLogged =
@@ -260,12 +265,23 @@ export const BillingInfoContainer = ({
   const showDOB = getQueryVariable('age_required') === 'true'
   const eventId = getQueryVariable('event_id')
   const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
+  const ttfOptIn: boolean = _get(cartInfoData, 'ttfOptIn', false)
   const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
 
-  if (!_get(dataWithUniqueIds, '[0].uniqueId')) {
-    setDataWithUniqueIds(assingUniqueIds(data))
-  }
-
+  // Get prevProps
+  const prevData = useRef(data)
+  
+  useEffect(() => {
+    const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
+    const isEqualData = _isEqual(prevData.current, data)
+    if (!hasUniqueId || !isEqualData) {
+      setDataWithUniqueIds(assingUniqueIds(data))
+      if (!isEqualData) {
+        prevData.current = data
+      }
+    }
+  }, [dataWithUniqueIds, data])
+  
   const getQuantity = (cart: any = []) => {
     let qty: any = 0
     cart.forEach((item: any) => {
@@ -274,8 +290,11 @@ export const BillingInfoContainer = ({
     return qty
   }
 
-  const handleAuthErrors = useCallback(() => {
+  const handleAuthErrors = useCallback((e) => {
     setIsLoggedIn(false)
+    if (isWindowDefined && e?.detail === 'invalid_token') {
+      window.location.href = '/'
+    }
   }, [])
 
   useEffect(() => {
@@ -371,6 +390,7 @@ export const BillingInfoContainer = ({
             country: _get(userData, 'country', '') || "1",
             state: _get(userData, 'state', '') || "1",
             brand_opt_in: optedInFieldValue,
+            ttf_opt_in: ttfOptIn,
           },
           userValues
         )}
@@ -396,6 +416,7 @@ export const BillingInfoContainer = ({
                 showDOB
               )
               const res = await postOnCheckout(checkoutBody, access_token)
+              await getPaymentData(res.data.data.attributes.hash)
               handleSubmit(
                 values,
                 formikHelpers as FormikHelpers<any>,
@@ -480,6 +501,7 @@ export const BillingInfoContainer = ({
               checkoutBody,
               access_token_register
             )
+            await getPaymentData(res.data.data.attributes.hash)
             handleSubmit(
               values,
               formikHelpers as FormikHelpers<any>,
@@ -496,6 +518,12 @@ export const BillingInfoContainer = ({
                   setShowModalLogin(true)
                 }
               }
+              if (e.response?.data.message) {
+                if (typeof document !== undefined) {
+                  document.body.scrollTop = document.documentElement.scrollTop = 0
+                }
+                setError(_get(e, 'response.data.message'))
+              }
               onSubmitError(e)
             }
           }
@@ -514,6 +542,11 @@ export const BillingInfoContainer = ({
               onGetStatesError={onGetStatesError}
             />
             <div className={`billing-info-container ${theme}`}>
+              {error && (
+                <Alert severity="error" onClose={onErrorClose} variant="filled">
+                  {error}
+                </Alert>
+              )}
               {!isLoggedIn && (
                 <div className="account-actions-block">
                   <div>{accountInfoTitle}</div>
@@ -628,12 +661,12 @@ export const BillingInfoContainer = ({
                     {_map(ticketHoldersFields.fields, group => {
                       const { groupClassname, groupItems } = group
                       return (
-                        <div key={group.uniqueId}>
+                        <div key={group.id}>
                           <div className={groupClassname}>
                             {_map(groupItems, element => (
                               <div
                                 className={element.className}
-                                key={element.uniqueId}
+                                key={element.name}
                               >
                                 <Field
                                   name={`${element.name}-${index}`}
@@ -695,7 +728,10 @@ export const BillingInfoContainer = ({
           userExpired={userExpired}
           onAuthorizeSuccess={onAuthorizeSuccess}
           onAuthorizeError={onAuthorizeError}
-          onGetProfileDataSuccess={onGetProfileDataSuccess}
+          onGetProfileDataSuccess={(data: any) => {
+            fetchCart()
+            onGetProfileDataSuccess(data)
+          }}
           onGetProfileDataError={onGetProfileDataError}
         />
       )}
@@ -707,7 +743,10 @@ export const BillingInfoContainer = ({
           onRegister={() => {
             setShowModalRegister(false)
           }}
-          onGetProfileDataSuccess={onGetProfileDataSuccess}
+          onGetProfileDataSuccess={(data: any) => {
+            fetchCart()
+            onGetProfileDataSuccess(data)
+          }}
           onGetProfileDataError={onGetProfileDataError}
         />
       )}

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -25,6 +25,7 @@ export const PromoCodeSection = ({
   setShowPromoInput,
   isAccessCodeEnabled,
 }: IPromoCodeSectionProps) => {
+  const isPromoCodeHasValue = !!promoCode.trim()
 
   const renderInputField = () => {
       return (
@@ -42,15 +43,19 @@ export const PromoCodeSection = ({
                   setPromoCode(e.target.value)
                 }}
                 onKeyPress={event => {
-                  if (event.key === 'Enter') {
+                  if (event.key === 'Enter' && isPromoCodeHasValue) {
                     setPromoCodeUpdated(promoCode)
+                    setShowPromoInput(false)
                   }
                 }}
               />
               <Button
                 className="promo-submit-button"
                 onClick={() => {
-                  setPromoCodeUpdated(promoCode)
+                  if (isPromoCodeHasValue) {
+                    setPromoCodeUpdated(promoCode)
+                    setShowPromoInput(false)
+                  }
                 }}
               >
                 {isAccessCodeEnabled ? 'ENTER' : 'APPLY'}
@@ -70,7 +75,7 @@ export const PromoCodeSection = ({
           <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
         </div>
       ) : null}
-      {showPromoInput && !promoCodeIsApplied && (
+      {showPromoInput && (
         renderInputField()
       )}
       {isPromotionsEnabled && !showPromoInput && !isAccessCodeEnabled ? (

package/src/components/ticketsContainer/index.tsx

@@ -57,6 +57,7 @@ export interface IGetTickets {
   isPromotionsEnabled?: boolean;
   themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
   isAccessCodeEnabled?: boolean;
+  hideSessionButtons?: boolean;
 }
 
 export interface ITicket {
@@ -82,6 +83,7 @@ export const TicketsContainer = ({
   isPromotionsEnabled = true,
   themeOptions,
   isAccessCodeEnabled = false,
+  hideSessionButtons = false
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -154,6 +156,7 @@ export const TicketsContainer = ({
         setTickets(_get(attributes, 'tickets'))
         setShowWaitingList(attributes.showWaitingList)
         onGetTicketsSuccess(response.data)
+        setPromoCode('')
       }
       if (eventResponse.data.success) {
         const event = _get(eventResponse, 'data.data.attributes')
@@ -363,7 +366,7 @@ export const TicketsContainer = ({
                 {getTicketsLabel || 'GET TICKETS'}
               </Button>
             )}
-            {isLogged ? (
+            {isLogged && !hideSessionButtons ? (
               <div className="session-wrapper">
                 <span className="session-container">
                   <Button

package/src/utils/downloadPDF.tsx

@@ -12,11 +12,19 @@ export const downloadPDF = (pdfUrl: string) => {
   })
     .then(async response => {
       const blobValue = await response.blob()
-      return blobValue
+      const fileNameHeader = response.headers.get("content-disposition") || ''
+      const fileName = fileNameHeader.split('"')[1]
+      return { blobValue, fileName }
     })
-    .then(blobValue => {
+    .then(({ blobValue, fileName }) => {
+      if (!fileName) return
       const file = new Blob([blobValue], { type: 'application/pdf' })
       const fileURL = URL.createObjectURL(file)
-      window.open(fileURL)
+      const link = document.createElement('a')
+      link.href = fileURL
+      link.setAttribute('download', fileName)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
     })
 }