tf-checkout-react 1.0.80 → 1.0.81

package/package.json

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

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'
@@ -48,6 +49,7 @@ import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { FormikPhoneNumberField } from '../common/FormikPhoneNumberField'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
+import { usePrevious } from '../../hooks/usePrevious'
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
@@ -260,9 +262,13 @@ 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')) {
+  // Get prevProps
+  const prevData = usePrevious(data)
+
+  if (!_get(dataWithUniqueIds, '[0].uniqueId') || !_isEqual(prevData, data)) {
     setDataWithUniqueIds(assingUniqueIds(data))
   }
 
@@ -371,6 +377,7 @@ export const BillingInfoContainer = ({
             country: _get(userData, 'country', '') || "1",
             state: _get(userData, 'state', '') || "1",
             brand_opt_in: optedInFieldValue,
+            ttf_opt_in: ttfOptIn,
           },
           userValues
         )}
@@ -628,12 +635,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 +702,10 @@ export const BillingInfoContainer = ({
           userExpired={userExpired}
           onAuthorizeSuccess={onAuthorizeSuccess}
           onAuthorizeError={onAuthorizeError}
-          onGetProfileDataSuccess={onGetProfileDataSuccess}
+          onGetProfileDataSuccess={(data: any) => {
+            fetchCart()
+            onGetProfileDataSuccess(data)
+          }}
           onGetProfileDataError={onGetProfileDataError}
         />
       )}
@@ -707,7 +717,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/hooks/usePrevious.tsx

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react"
+
+export const usePrevious = <T extends unknown>(value: T): T | undefined => {
+  const ref = useRef<T>()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}

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