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

package/dist/components/confirmationContainer/index.d.ts

@@ -24,4 +24,4 @@ export interface IConfirmationPage {
     orderHash?: string;
     confirmationLabels: IConfirmationLabels;
 }
-export declare const ConfirmationContainer: ({ confirmationLabels, hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied }: IConfirmationPage) => JSX.Element;
+export declare const ConfirmationContainer: ({ confirmationLabels, hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied, }: IConfirmationPage) => JSX.Element;

package/dist/hooks/usePixel.d.ts

@@ -0,0 +1 @@
+export declare const usePixel: (key: string, eventId: string | number) => Promise<void>;

package/dist/tf-checkout-react.cjs.development.js

@@ -1208,6 +1208,13 @@ var setLoggedUserData = function setLoggedUserData(data) {
   };
 };
 
+var createElementFromHTML = function createElementFromHTML(htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim(); // Change this to div.childNodes to support multiple top-level nodes.
+
+  return div.firstChild || '';
+};
+
 var isWindowDefined = typeof window !== 'undefined';
 var isDocumentDefined = typeof document !== 'undefined';
 
@@ -1609,6 +1616,64 @@ var getCheckoutPageConfigs = /*#__PURE__*/function () {
   };
 }();
 
+var usePixel = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(key, eventId) {
+    var getEventData;
+    return runtime_1.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            getEventData = /*#__PURE__*/function () {
+              var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+                var _document;
+
+                var eventResponse, event, pixel;
+                return runtime_1.wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return getEvent(eventId);
+
+                      case 2:
+                        eventResponse = _context.sent;
+                        event = _get(eventResponse, 'data.data.attributes');
+                        pixel = event[key];
+
+                        if ((_document = document) != null && _document.head && pixel) {
+                          document.head.append(createElementFromHTML(pixel));
+                        }
+
+                      case 6:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              }));
+
+              return function getEventData() {
+                return _ref2.apply(this, arguments);
+              };
+            }();
+
+            React.useEffect(function () {
+              getEventData();
+            }, []);
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function usePixel(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
 var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 var combineValidators = function combineValidators() {
   for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -3271,7 +3336,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
 
   var showDOB = getQueryVariable('age_required') === 'true';
   var showTicketHolders = getQueryVariable('names_required') === 'true';
-  var eventId = getQueryVariable('event_id');
+  var eventId = getQueryVariable('event_id') || '';
   var optedInFieldValue = brandOptIn ? brandOptIn : _get(cartInfoData, 'optedIn', false);
   var ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false));
 
@@ -3574,6 +3639,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     return item.code.toLowerCase() === defaultCountry;
   }) || {};
   var initialCountry = selectedCountry.id || _get(userData, 'country', '') || '1';
+  usePixel('checkoutPixels', eventId);
   return React__default.createElement(styles.ThemeProvider, {
     theme: themeMui
   }, (loading || isCountriesLoading) && React__default.createElement(Backdrop, {
@@ -4991,14 +5057,15 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       confirmationMain = _confirmationLabels$c2 === void 0 ? 'Your tickets are available in My Tickets section' : _confirmationLabels$c2,
       _confirmationLabels$c3 = confirmationLabels.confirmationHelper,
       confirmationHelper = _confirmationLabels$c3 === void 0 ? 'Please bring them with you to the event' : _confirmationLabels$c3;
+  usePixel('conversionPixels', data == null ? void 0 : data.product_id);
   return React__default.createElement("div", {
     className: "confirmation-page"
   }, data && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: 'header-container'
+    className: "header-container"
   }, React__default.createElement("div", {
-    className: 'header-product-image'
+    className: "header-product-image"
   }, React__default.createElement("img", {
-    className: 'product-image',
+    className: "product-image",
     src: data.product_image
   })), React__default.createElement("div", {
     className: "header-product-text"
@@ -5014,7 +5081,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, confirmationMain), React__default.createElement("span", {
     className: "helper"
   }, data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper))))), data.custom_confirmation_page_text && !data.custom_confirmation_page_text_full_replacement ? React__default.createElement("div", {
-    className: 'custom-confirmation-page-text',
+    className: "custom-confirmation-page-text",
     dangerouslySetInnerHTML: createMarkup(data.custom_confirmation_page_text)
   }) : null, data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "referral_text_image_section"
@@ -5033,7 +5100,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, " Invite friends "), "and we'll refund up to", React__default.createElement("span", {
     className: "strong-text"
   }, " 100% "), "of your ticket money, if they buy tickets as well!")), React__default.createElement("img", {
-    className: 'body-product-image',
+    className: "body-product-image",
     src: data.product_image,
     alt: "No Data"
   })), React__default.createElement("div", {
@@ -5067,7 +5134,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     src: "https://img.icons8.com/office/50/000000/copy.png",
     alt: "copy"
   }) : React__default.createElement("span", {
-    className: 'copy-icon'
+    className: "copy-icon"
   }, "Copy")))), (showDefaultShareButtons || !!shareButtons.length) && React__default.createElement(SocialButtons, {
     showDefaultShareButtons: showDefaultShareButtons,
     name: data.product_name,
@@ -5854,6 +5921,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   useCookieListener(X_TF_ECOMMERCE, function (value) {
     return setIsLogged(Boolean(value));
   });
+  usePixel('pagePixels', eventId);
   React.useEffect(function () {
     if (typeof window !== 'undefined') {
       var access_token = window.localStorage.getItem('access_token');