tf-checkout-react 1.3.38-beta.3 → 1.3.39-beta.1

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

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

package/dist/components/confirmationContainer/social-buttons.d.ts

@@ -6,7 +6,6 @@ interface SocialButtonsTypes {
     appId: string;
     showDefaultShareButtons: boolean;
     shareButtons: IShareButton[];
-    clientLabel?: string;
 }
-declare const SocialButtons: ({ showDefaultShareButtons, shareLink, name, appId, shareButtons, clientLabel, }: SocialButtonsTypes) => JSX.Element;
+declare const SocialButtons: ({ showDefaultShareButtons, shareLink, name, appId, shareButtons }: SocialButtonsTypes) => JSX.Element;
 export default SocialButtons;

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, {
@@ -4840,40 +4906,39 @@ var SocialButtons = function SocialButtons(_ref2) {
       shareLink = _ref2.shareLink,
       name = _ref2.name,
       appId = _ref2.appId,
-      shareButtons = _ref2.shareButtons,
-      clientLabel = _ref2.clientLabel;
+      shareButtons = _ref2.shareButtons;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "convenient_buttons"
   }, "or use one of these convenient buttons:"), React__default.createElement("div", {
     className: "social-media-btns"
   }, showDefaultShareButtons && React__default.createElement(React__default.Fragment, null, React__default.createElement(SocialComponent, {
-    mainLabel: "Share on",
-    subLabel: "Facebook",
-    platform: "facebook",
+    mainLabel: 'Share on',
+    subLabel: 'Facebook',
+    platform: 'facebook',
     shareData: {
       quote: name,
       url: shareLink
     }
   }), React__default.createElement(SocialComponent, {
-    mainLabel: "Tweet to your",
-    subLabel: "Followers",
-    platform: "twitter",
+    mainLabel: 'Tweet to your',
+    subLabel: 'Followers',
+    platform: 'twitter',
     shareData: {
       title: name,
       url: shareLink
     }
   }), React__default.createElement(SocialComponent, {
-    mainLabel: "Message friends on",
-    subLabel: "Facebook",
-    platform: "messenger",
+    mainLabel: 'Message friends on',
+    subLabel: 'Facebook',
+    platform: 'messenger',
     shareData: {
       appId: appId,
       url: shareLink
     }
   }), React__default.createElement(SocialComponent, {
-    mainLabel: "Message friends on",
-    subLabel: "Whatsapp",
-    platform: "whatsapp",
+    mainLabel: 'Message friends on',
+    subLabel: 'Whatsapp',
+    platform: 'whatsapp',
     shareData: {
       title: name,
       url: shareLink
@@ -4882,9 +4947,7 @@ var SocialButtons = function SocialButtons(_ref2) {
     return React__default.createElement(SocialComponent, Object.assign({
       key: index
     }, shareButton));
-  })), (showDefaultShareButtons || shareButtons.length) && React__default.createElement("p", null, "We ", React__default.createElement("strong", null, "never"), " post on Facebook without your permission!"), React__default.createElement("p", {
-    className: "note-message"
-  }, React__default.createElement("span", null, "*Please note, only purchases made from a different", ' ', clientLabel || 'Ticket Fairy', " account can count towards your referrals"), React__default.createElement("span", null, ' ', "so please make sure you ask your friends to buy their own tickets using their own ", clientLabel || 'Ticket Fairy', " account!")));
+  })), (showDefaultShareButtons || shareButtons.length) && React__default.createElement("p", null, "We ", React__default.createElement("strong", null, "never"), " post on Facebook without your permission!"));
 };
 
 var ConfirmationContainer = function ConfirmationContainer(_ref) {
@@ -4903,8 +4966,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2,
       orderHash = _ref.orderHash,
       _ref$onLinkCopied = _ref.onLinkCopied,
-      onLinkCopied = _ref$onLinkCopied === void 0 ? function () {} : _ref$onLinkCopied,
-      clientLabel = _ref.clientLabel;
+      onLinkCopied = _ref$onLinkCopied === void 0 ? function () {} : _ref$onLinkCopied;
   var inputRef = React.useRef(null);
 
   var _useState = React.useState(null),
@@ -4981,14 +5043,6 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     }))();
   }, []);
 
-  var _useState2 = React.useState(false),
-      showCopyModal = _useState2[0],
-      setShowCopyModal = _useState2[1];
-
-  var onClose = function onClose() {
-    setShowCopyModal(false);
-  };
-
   var onChangeShareLink = function onChangeShareLink(e) {
     var newData = _extends({}, data, {
       personal_share_link: e.target.value
@@ -5003,30 +5057,14 @@ 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.product_id);
   return React__default.createElement("div", {
     className: "confirmation-page"
-  }, React__default.createElement(Modal, {
-    open: showCopyModal,
-    onClose: onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: "success-copy-modal"
-  }, React__default.createElement("div", {
-    className: "message-copy-success-box"
-  }, React__default.createElement("div", {
-    className: "message-copy-success"
-  }, React__default.createElement("span", null, "Copied to your clipboard! Now paste your link in a Snapchat message,"), React__default.createElement("span", null, "your Instagram bio, Whatsapp, Facebook or a text :)")), React__default.createElement("div", {
-    className: "footer"
-  }, React__default.createElement("button", {
-    className: "footer-button",
-    type: "button",
-    onClick: onClose
-  }, "OK")))), data && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }, data && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "header-container"
   }, React__default.createElement("div", {
     className: "header-product-image"
   }, React__default.createElement("img", {
-    alt: "",
     className: "product-image",
     src: data.product_image
   })), React__default.createElement("div", {
@@ -5090,7 +5128,6 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "share-by-link-copy-icon",
     onClick: function onClick() {
       navigator.clipboard.writeText(_get(inputRef, 'current.value'));
-      setShowCopyModal(true);
       onLinkCopied();
     }
   }, hasCopyIcon ? React__default.createElement("img", {
@@ -5103,8 +5140,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     name: data.product_name,
     appId: messengerAppId,
     shareLink: data.personal_share_link,
-    shareButtons: shareButtons,
-    clientLabel: clientLabel
+    shareButtons: shareButtons
   })))), React__default.createElement("div", {
     className: "pricing-section"
   }, React__default.createElement("div", {
@@ -5120,9 +5156,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     }, pricing.subLabel)), React__default.createElement("div", {
       className: "pricing-section_price"
     }, ' ', pricing.price));
-  }), React__default.createElement("div", {
-    className: "note-pricing-section"
-  }, "^ This is based on the most expensive ticket in your order."))))));
+  }))))));
 };
 
 var X_TF_ECOMMERCE = 'X-TF-ECOMMERCE';
@@ -5887,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');