tf-checkout-react 1.7.30 → 1.7.32-beta.0

package/dist/tf-checkout-react.esm.js

@@ -11,6 +11,7 @@ import _identity from 'lodash-es/identity';
 import _isEmpty from 'lodash-es/isEmpty';
 import _isEqual from 'lodash-es/isEqual';
 import _map from 'lodash-es/map';
+import _omit from 'lodash-es/omit';
 import { nanoid } from 'nanoid';
 import React, { Component, useState, useEffect, memo, useRef, useCallback, useMemo, Fragment } from 'react';
 import { Tooltip } from 'react-tooltip';
@@ -924,6 +925,25 @@ var getFieldsKeys = function getFieldsKeys(customFields) {
     return field.name;
   });
 };
+var getHolderTicketTypeIds = function getHolderTicketTypeIds(ticketsPriceBreakdown, holdersCount) {
+  if (!Array.isArray(ticketsPriceBreakdown)) return [];
+  var slots = [];
+  _forEach(ticketsPriceBreakdown, function (line) {
+    for (var i = 0; i < Number((line == null ? void 0 : line.quantity) || 0); i++) {
+      var _line$ticket_type_id;
+      slots.push(String((_line$ticket_type_id = line == null ? void 0 : line.ticket_type_id) != null ? _line$ticket_type_id : ''));
+    }
+  });
+  return slots.length === holdersCount ? slots : [];
+};
+/**
+ * Whether a ticket-holder custom field applies to a ticket of `ticketTypeId`.
+ * Unscoped fields apply to every ticket; an unknown ticket type fails open so a
+ * required field is never silently dropped.
+ */
+var customFieldAppliesToTicketType = function customFieldAppliesToTicketType(field, ticketTypeId) {
+  return !ticketTypeId || _isEmpty(field.ticketTypeIds) || (field.ticketTypeIds || []).includes(String(ticketTypeId));
+};
 
 var isJson = function isJson(value) {
   try {
@@ -999,6 +1019,11 @@ var optionsAdapter = function optionsAdapter(options) {
   });
   return adaptedOptions;
 };
+// `settings.ticketTypes` scopes a ticket field to those ticket types; absent or
+// empty means it applies to every ticket. Ids arrive as numbers, compare as strings.
+var ticketTypeIdsAdapter = function ticketTypeIdsAdapter(ticketTypes) {
+  return Array.isArray(ticketTypes) && ticketTypes.length ? ticketTypes.map(String) : null;
+};
 var fieldDataAdapter = function fieldDataAdapter(field) {
   var name = field.name,
     label = field.label,
@@ -1016,6 +1041,10 @@ var fieldDataAdapter = function fieldDataAdapter(field) {
     className: _get(restValues, 'settings.className', ''),
     value: _get(restValues, 'defaultValue')
   };
+  var ticketTypeIds = ticketTypeIdsAdapter(_get(restValues, 'settings.ticketTypes'));
+  if (ticketTypeIds) {
+    adaptedField.ticketTypeIds = ticketTypeIds;
+  }
   switch (type) {
     case 'textarea':
       adaptedField.type = 'text';
@@ -2230,7 +2259,7 @@ var checkCustomerOrder = /*#__PURE__*/function () {
   };
 }();
 
-var _excluded$1 = ["data", "ticketHoldersFields", "skipCustomFields", "onGetCustomFieldsError", "onGetCustomFieldsSuccess"];
+var _excluded$1 = ["data", "ticketHoldersFields", "skipCustomFields", "customFieldsEventId", "onGetCustomFieldsError", "onGetCustomFieldsSuccess"];
 var withCustomFields = function withCustomFields(Children) {
   return function (props) {
     var _props$data = props.data,
@@ -2242,6 +2271,7 @@ var withCustomFields = function withCustomFields(Children) {
       } : _props$ticketHoldersF,
       _props$skipCustomFiel = props.skipCustomFields,
       skipCustomFields = _props$skipCustomFiel === void 0 ? true : _props$skipCustomFiel,
+      eventIdProp = props.customFieldsEventId,
       _props$onGetCustomFie = props.onGetCustomFieldsError,
       onGetCustomFieldsError = _props$onGetCustomFie === void 0 ? _identity : _props$onGetCustomFie,
       _props$onGetCustomFie2 = props.onGetCustomFieldsSuccess,
@@ -2262,18 +2292,59 @@ var withCustomFields = function withCustomFields(Children) {
     var _useState5 = useState([]),
       customFieldsAddOnKeys = _useState5[0],
       setCustomFieldsAddOnKeys = _useState5[1];
-    var getFields = /*#__PURE__*/function () {
+    // The billing page URL often carries no event id (path routes, single-page
+    // checkouts), so fall back to the event the cart session belongs to. Without
+    // any id, the request would hit `/v1/event//custom_fields` and fail.
+    var resolveEventId = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var eventId, customFields, orderFieldsKeys, ticketHoldersFieldsKeys, addOnFieldsKeys;
+        var fromUrl, configs, fromCart;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.prev = 0;
-              eventId = getQueryVariable('event_id') || getQueryVariable("eventId") || '';
-              _context.next = 4;
+              fromUrl = getQueryVariable('event_id') || getQueryVariable('eventId');
+              if (!(eventIdProp || fromUrl)) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return", String(eventIdProp || fromUrl));
+            case 3:
+              _context.next = 5;
+              return getCheckoutPageConfigs();
+            case 5:
+              configs = _context.sent;
+              fromCart = _get(configs, 'data.attributes.event_id');
+              return _context.abrupt("return", fromCart ? String(fromCart) : '');
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function resolveEventId() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    var getFields = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var eventId, customFields, orderFieldsKeys, ticketHoldersFieldsKeys, addOnFieldsKeys;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return resolveEventId();
+            case 3:
+              eventId = _context2.sent;
+              if (eventId) {
+                _context2.next = 6;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 6:
+              _context2.next = 8;
               return getCustomFields(eventId);
-            case 4:
-              customFields = _context.sent;
+            case 8:
+              customFields = _context2.sent;
               orderFieldsKeys = getFieldsKeys(_get(customFields, 'orderFields', []));
               ticketHoldersFieldsKeys = getFieldsKeys(_get(customFields, 'ticketsFields', []));
               addOnFieldsKeys = getFieldsKeys(_get(customFields, 'addOnFields', []));
@@ -2282,24 +2353,24 @@ var withCustomFields = function withCustomFields(Children) {
               setCustomFieldsData(customFields);
               setCustomFieldsAddOnKeys(addOnFieldsKeys);
               onGetCustomFieldsSuccess(customFields);
-              _context.next = 18;
+              _context2.next = 22;
               break;
-            case 15:
-              _context.prev = 15;
-              _context.t0 = _context["catch"](0);
-              onGetCustomFieldsError(_context.t0);
-            case 18:
-              _context.prev = 18;
+            case 19:
+              _context2.prev = 19;
+              _context2.t0 = _context2["catch"](0);
+              onGetCustomFieldsError(_context2.t0);
+            case 22:
+              _context2.prev = 22;
               setLoading(false);
-              return _context.finish(18);
-            case 21:
+              return _context2.finish(22);
+            case 25:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, null, [[0, 15, 18, 21]]);
+        }, _callee2, null, [[0, 19, 22, 25]]);
       }));
       return function getFields() {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
     useEffect(function () {
@@ -7105,6 +7176,11 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
     checkoutUpdateData = _useState24[0],
     setCheckoutUpdateData = _useState24[1];
   var prevData = useRef(data);
+  // Ticket type of each holder slot — scopes ticket custom fields that list
+  // `ticketTypes` in their settings to the holders of those ticket types.
+  var holderTicketTypeIds = useMemo(function () {
+    return getHolderTicketTypeIds(_get(checkoutUpdateData, 'cart_price_breakdown.tickets_price_breakdown'), ticketsQuantity.length);
+  }, [checkoutUpdateData, ticketsQuantity.length]);
   var addAddOnsInAttributes = useCallback(function (checkoutBody) {
     var selectedAddOns = window.localStorage.getItem('add_ons') || '{}';
     var addOnDataCapture = window.localStorage.getItem('add_on_data_capture') || '{}';
@@ -7420,12 +7496,20 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
       (_checkoutBody$attribu = checkoutBody.attributes) == null ? true : delete _checkoutBody$attribu[attributeKey];
     });
     // Collect data_capture for Ticket Holders Fields
+    var ticketCustomGroup = _find(ticketHoldersFields.fields, 'customFields');
+    var ticketCustomFields = (ticketCustomGroup == null ? void 0 : ticketCustomGroup.groupItems) || [];
     _forEach(checkoutBody.attributes.ticket_holders, function (holder, holderIndex) {
       var holderDataCapture = {};
       _forEach(customFieldsTicketHolderKeys, function (customFieldKey) {
         var customFieldHolderName = customFieldKey + "-" + holderIndex;
-        var customFieldHolderKey = values[customFieldHolderName] || '';
-        holderDataCapture[customFieldKey] = customFieldHolderKey;
+        var field = _find(ticketCustomFields, function (_ref12) {
+          var name = _ref12.name;
+          return name === customFieldKey;
+        });
+        // Fields scoped to other ticket types were never shown to this holder.
+        if (!field || customFieldAppliesToTicketType(field, holderTicketTypeIds[+holderIndex])) {
+          holderDataCapture[customFieldKey] = values[customFieldHolderName] || '';
+        }
         // Delete holder specific value from values list
         delete checkoutBody.attributes[customFieldHolderName];
       });
@@ -7475,7 +7559,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
     return {
       attributes: mergedAttributes
     };
-  }, [showDOB, showTicketHolders, canSkipHolderNames, customFieldsOrderKeys, ticketsQuantity.length, emailLogged, firstNameLogged, lastNameLogged, phoneLogged, customFieldsTicketHolderKeys]);
+  }, [showDOB, showTicketHolders, canSkipHolderNames, customFieldsOrderKeys, ticketsQuantity.length, emailLogged, firstNameLogged, lastNameLogged, phoneLogged, customFieldsTicketHolderKeys, ticketHoldersFields, holderTicketTypeIds]);
   var removeReferralKey = useCallback(function () {
     localStorage.removeItem('referral_key');
   }, []);
@@ -7505,7 +7589,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
     }),
     processPayment = _useStripePayment.processPayment;
   var updateCheckoutWithAddOns = useCallback( /*#__PURE__*/function () {
-    var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(addOns) {
+    var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(addOns) {
       var mergedAddOns, _checkoutUpdateData, checkoutResponse, checkoutDataObj, updatedAttributes, errorMessage;
       return _regeneratorRuntime().wrap(function _callee8$(_context8) {
         while (1) switch (_context8.prev = _context8.next) {
@@ -7520,9 +7604,9 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
             return _context8.abrupt("return");
           case 3:
             mergedAddOns = _extends({}, singleCheckoutAddons); // Update existing entries and add new ones
-            Object.entries(addOns).forEach(function (_ref13) {
-              var key = _ref13[0],
-                value = _ref13[1];
+            Object.entries(addOns).forEach(function (_ref14) {
+              var key = _ref14[0],
+                value = _ref14[1];
               var amount = Number(value);
               if (amount) {
                 mergedAddOns[key] = amount;
@@ -7566,11 +7650,11 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
       }, _callee8, null, [[5, 13]]);
     }));
     return function (_x) {
-      return _ref12.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }(), [eventId, isSinglePageCheckout, onCheckoutUpdateError, onCheckoutUpdateSuccess]);
   var handleAddOnSelect = useCallback( /*#__PURE__*/function () {
-    var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(selectedAddOns) {
+    var _ref15 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(selectedAddOns) {
       return _regeneratorRuntime().wrap(function _callee9$(_context9) {
         while (1) switch (_context9.prev = _context9.next) {
           case 0:
@@ -7583,7 +7667,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
       }, _callee9);
     }));
     return function (_x2) {
-      return _ref14.apply(this, arguments);
+      return _ref15.apply(this, arguments);
     };
   }(), [updateCheckoutWithAddOns]);
   var onAddOnSelect = useCallback(function (id, value, _addon, fieldUpdates) {
@@ -8038,13 +8122,18 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref6) {
         key: _item
       }, React.createElement("h5", null, "Ticket ", index + 1), _map(ticketHoldersFields.fields, function (group) {
         var id = group.id,
-          groupClassname = group.groupClassname,
-          groupItems = group.groupItems;
+          groupClassname = group.groupClassname;
+        var groupItems = group.customFields ? group.groupItems.filter(function (item) {
+          return customFieldAppliesToTicketType(item, holderTicketTypeIds[index]);
+        }) : group.groupItems;
+        if (_isEmpty(groupItems)) return null;
         return React.createElement("div", {
           key: id
         }, React.createElement("div", {
           className: groupClassname
-        }, _map(groupItems, function (element) {
+        }, _map(groupItems, function (item) {
+          // Scoping metadata, not a Field prop.
+          var element = _omit(item, 'ticketTypeIds');
           return React.createElement("div", {
             className: element.className,
             key: element.name
@@ -10374,9 +10463,9 @@ var TicketsSection = function TicketsSection(_ref) {
     var ticketOldPriceWithFees = priceSymbol + " " + (+ticket.oldBasePrice).toFixed(2);
     var ticketOldPriceWithoutFees = priceSymbol + " " + (+ticket.oldCost).toFixed(2);
     var ticketFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost;
-    var ticketFinalPriceFormatted = priceSymbol + " " + Math.round(ticketFinalPrice);
+    var ticketFinalPriceFormatted = priceSymbol + " " + parseFloat(ticketFinalPrice.toFixed(2));
     var ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost;
-    var ticketOldFinalPriceFormatted = priceSymbol + " " + Math.round(ticketOldFinalPrice);
+    var ticketOldFinalPriceFormatted = priceSymbol + " " + parseFloat(ticketOldFinalPrice.toFixed(2));
     var ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2);
     var ticketBreakdown = !ticket.feeIncluded ? '(+ fees at checkout)' : !ticket.isForward ? null : parseFloat(ticketFeeAmount) > 0 ? "(" + priceSymbol + " " + (+ticket.cost).toFixed(2) + " + " + priceSymbol + " " + ticketFeeAmount + " fee)" : null;
     var isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut;
@@ -10458,9 +10547,9 @@ var TicketsSection = function TicketsSection(_ref) {
     var ticketOldPriceWithFees = priceSymbol + " " + (+ticket.oldBasePrice).toFixed(2);
     var ticketOldPriceWithoutFees = priceSymbol + " " + (+ticket.oldCost).toFixed(2);
     var ticketFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost;
-    var ticketFinalPriceFormatted = priceSymbol + " " + Math.round(ticketFinalPrice);
+    var ticketFinalPriceFormatted = priceSymbol + " " + parseFloat(ticketFinalPrice.toFixed(2));
     var ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost;
-    var ticketOldFinalPriceFormatted = priceSymbol + " " + Math.round(ticketOldFinalPrice);
+    var ticketOldFinalPriceFormatted = priceSymbol + " " + parseFloat(ticketOldFinalPrice.toFixed(2));
     var ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2);
     var ticketBreakdown = !ticket.feeIncluded ? '(+ fees at checkout)' : !ticket.isForward ? null : parseFloat(ticketFeeAmount) > 0 ? "(" + priceSymbol + " " + (+ticket.cost).toFixed(2) + " + " + priceSymbol + " " + ticketFeeAmount + " fee)" : null;
     var isSoldOut = ticket.sold_out || !(ticket.displayTicket || ticket.slotGroupId) || ticket.soldOut;
@@ -10576,9 +10665,9 @@ var TimeSlotTicketRow = function TimeSlotTicketRow(_ref) {
   var ticketOldPriceWithFees = priceSymbol + " " + (+ticket.oldBasePrice).toFixed(2);
   var ticketOldPriceWithoutFees = priceSymbol + " " + (+ticket.oldCost).toFixed(2);
   var ticketFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost;
-  var ticketFinalPriceFormatted = priceSymbol + " " + Math.round(ticketFinalPrice);
+  var ticketFinalPriceFormatted = priceSymbol + " " + parseFloat(ticketFinalPrice.toFixed(2));
   var ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward ? +(ticket.x_face_value || ticket.basePrice) : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost;
-  var ticketOldFinalPriceFormatted = priceSymbol + " " + Math.round(ticketOldFinalPrice);
+  var ticketOldFinalPriceFormatted = priceSymbol + " " + parseFloat(ticketOldFinalPrice.toFixed(2));
   var ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2);
   var ticketBreakdown = !ticket.feeIncluded ? '(+ fees at checkout)' : !ticket.isForward ? null : parseFloat(ticketFeeAmount) > 0 ? "(" + priceSymbol + " " + (+ticket.cost).toFixed(2) + " + " + priceSymbol + " " + ticketFeeAmount + " fee)" : null;
   var ticketIsDiscounted = false;