tf-checkout-react 1.3.39-beta.2 → 1.3.40

package/dist/utils/htmlNodeFromString.d.ts

@@ -1 +1 @@
-export declare const createElementFromHTML: (htmlString: string) => ChildNode | "";
+export declare const createElementFromHTML: (htmlString: string) => NodeListOf<ChildNode>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.39-beta.2",
+  "version": "1.3.40",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -17,7 +17,10 @@
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
-    "analyze": "size-limit --why"
+    "analyze": "size-limit --why",
+    "release:beta": "npm version $(semver $(npm info $(npm info . name) version) -i prerelease --preid beta)",
+    "release:patch": "npm version $(semver $(npm info $(npm info . name) version) -i patch)",
+    "release:minor": "npm version $(semver $(npm info $(npm info . name) version) -i minor)"
   },
   "peerDependencies": {
     "react": ">=16"

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

@@ -520,7 +520,7 @@ export const BillingInfoContainer = React.memo(
     const initialCountry =
       selectedCountry.id || _get(userData, 'country', '') || '1'
 
-    usePixel('checkoutPixels', eventId)
+    usePixel(['checkoutPixels', 'brandCheckoutPixels'], eventId)
 
     return (
       <ThemeProvider theme={themeMui}>

package/src/components/confirmationContainer/index.tsx

@@ -111,7 +111,7 @@ export const ConfirmationContainer = ({
     confirmationHelper = 'Please bring them with you to the event',
   } = confirmationLabels
 
-  usePixel('conversionPixels', data?.product_id)
+  usePixel(['conversionPixels', 'brandConversionPixels'], data?.product_id)
 
   return (
     <div className="confirmation-page">

package/src/components/ticketsContainer/index.tsx

@@ -172,7 +172,7 @@ export const TicketsContainer = ({
   const ticketsContainerRef = useRef<HTMLDivElement>(null)
 
   useCookieListener(X_TF_ECOMMERCE, value => setIsLogged(Boolean(value)))
-  usePixel('pagePixels', eventId)
+  usePixel(['pagePixels', 'brandPagePixels'], eventId, event)
 
   useEffect(() => {
     if (typeof window !== 'undefined') {

package/src/hooks/usePixel.ts

@@ -1,20 +1,49 @@
+import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
 import { useEffect } from 'react'
 
 import { getEvent } from '../api'
 import { createElementFromHTML } from '../utils/htmlNodeFromString'
 
-export const usePixel = async (key: string, eventId: string | number) => {
-  const getEventData = async () => {
-    const eventResponse = await getEvent(eventId)
-    const event = _get(eventResponse, 'data.data.attributes')
-    const pixel = event[key]
+export const usePixel = async (
+  key: string | string[],
+  eventId: string | number,
+  alreadyLoadedEventData?: any
+) => {
+  const addPixel = (pixel: string) => {
     if (document?.head && pixel) {
-      document.head.append(createElementFromHTML(pixel))
+      const nodes = createElementFromHTML(pixel)
+      for (const element of Array.from(nodes)) {
+        document.head.append(element)
+      }
+    }
+  }
+
+  const getEventData = async () => {
+    if (!eventId) return
+    // Check if event data object passed or not. If not then the value will be undefined.
+    // If event data passed, then it's initial value will be null.
+    const isEventDataUndefined = alreadyLoadedEventData === undefined
+
+    const eventResponse = isEventDataUndefined ? await getEvent(eventId) : null
+
+    const event = isEventDataUndefined
+      ? _get(eventResponse, 'data.data.attributes', {})
+      : alreadyLoadedEventData || {}
+
+    if (typeof key === 'string') {
+      const pixel = event[key]
+      addPixel(pixel)
+    } else {
+      _forEach(key, item => {
+        const pixel = event[item]
+        addPixel(pixel)
+      })
     }
   }
 
   useEffect(() => {
     getEventData()
-  }, [])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventId, alreadyLoadedEventData])
 }

package/src/utils/htmlNodeFromString.ts

@@ -2,5 +2,5 @@ export const createElementFromHTML = (htmlString: string) => {
   const div = document.createElement('div')
   div.innerHTML = htmlString.trim()
   // Change this to div.childNodes to support multiple top-level nodes.
-  return div.firstChild || ''
+  return div.childNodes || []
 }