tf-checkout-react 1.7.31 → 1.7.32-beta.2

package/dist/adapters/customFields.d.ts

@@ -4,6 +4,7 @@ export declare const optionsAdapter: (options: any) => {
     label: any;
     value: any;
 }[];
+export declare const ticketTypeIdsAdapter: (ticketTypes: unknown) => string[] | null;
 export declare const fieldDataAdapter: (field: IGroupItem) => IGroupItem;
 export declare const customFieldsDataAdapter: (data: any) => {
     ticketsFields: IGroupItem[];

package/dist/components/billing-info-container/index.d.ts

@@ -57,6 +57,8 @@ export interface IBillingInfoPage {
     isCountryCodeEditable?: boolean;
     customFieldsOrderKeys?: string[];
     customFieldsTicketHolderKeys?: string[];
+    /** Event to load custom fields for. Defaults to `?event_id`, then the cart's event. */
+    customFieldsEventId?: string | number;
     onPendingVerification?: () => void;
     includeAddons?: boolean;
     addonsProps?: IAddonContainterProps;

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

@@ -17,6 +17,7 @@ var _identity = _interopDefault(require('lodash/identity'));
 var _isEmpty = _interopDefault(require('lodash/isEmpty'));
 var _isEqual = _interopDefault(require('lodash/isEqual'));
 var _map = _interopDefault(require('lodash/map'));
+var _omit = _interopDefault(require('lodash/omit'));
 var nanoid = require('nanoid');
 var React = require('react');
 var React__default = _interopDefault(React);
@@ -931,6 +932,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 {
@@ -1006,6 +1026,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,
@@ -1023,6 +1048,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';
@@ -2237,7 +2266,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,
@@ -2249,6 +2278,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,
@@ -2269,18 +2299,59 @@ var withCustomFields = function withCustomFields(Children) {
     var _useState5 = React.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', []));
@@ -2289,24 +2360,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);
       };
     }();
     React.useEffect(function () {
@@ -6535,27 +6606,30 @@ var usePaymentRedirect = function usePaymentRedirect(_ref) {
   }, [stripeRef.current, setError, setLoading, removeReferralKey, removeAdditionalConfigs, handleSubmit, isBrowser]);
 };
 
+var SUCCESSFUL_INTENT_STATUSES = ['succeeded', 'processing', 'requires_capture'];
+var PAYMENT_FAILED_MESSAGE = 'Your payment was not completed. Please try again or use another payment method.';
+var PAYMENT_RECEIVED_MESSAGE = 'Your payment was received and we are confirming your order. ' + 'Please check your email for your tickets before trying again.';
 var useStripePayment = function useStripePayment(_ref) {
   var stripeRef = _ref.stripeRef,
     elementsRef = _ref.elementsRef,
-    setError = _ref.setError,
+    _setError = _ref.setError,
     isBrowser = _ref.isBrowser;
   var processPayment = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(paymentDataResponse, values, formikHelpers, checkoutResponse, checkoutUpdateResponse, paymentData) {
-      var attributes, isFreeTickets, updatedOrderData, eventId, _yield$elementsRef$cu, submitError, paymentContext, confirmParams, rawPhone, e164Phone, _yield$stripeRef$curr, confirmError, paymentResponse;
+      var attributes, isFreeTickets, updatedOrderData, eventId, _yield$elementsRef$cu, submitError, paymentContext, confirmParams, rawPhone, e164Phone, confirmResult, _confirmResult, confirmError, paymentIntent, paymentResponse;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             attributes = paymentData.attributes, isFreeTickets = paymentData.isFreeTickets, updatedOrderData = paymentData.updatedOrderData, eventId = paymentData.eventId;
             if (isFreeTickets) {
-              _context.next = 23;
+              _context.next = 33;
               break;
             }
             if (stripeRef.current) {
               _context.next = 5;
               break;
             }
-            setError('Stripe is not ready');
+            _setError('Stripe is not ready');
             return _context.abrupt("return", null);
           case 5:
             _context.next = 7;
@@ -6567,7 +6641,7 @@ var useStripePayment = function useStripePayment(_ref) {
               _context.next = 12;
               break;
             }
-            setError('' + (submitError == null ? void 0 : submitError.message));
+            _setError('' + (submitError == null ? void 0 : submitError.message));
             return _context.abrupt("return", null);
           case 12:
             // Step 2: Store payment context before potential redirect
@@ -6596,26 +6670,44 @@ var useStripePayment = function useStripePayment(_ref) {
                 }
               };
             }
-            _context.next = 18;
+            _context.prev = 16;
+            _context.next = 19;
             return stripeRef.current.confirmPayment({
               clientSecret: paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
               elements: elementsRef.current,
               confirmParams: confirmParams,
               redirect: 'if_required'
             });
-          case 18:
-            _yield$stripeRef$curr = _context.sent;
-            confirmError = _yield$stripeRef$curr.error;
+          case 19:
+            confirmResult = _context.sent;
+            _context.next = 26;
+            break;
+          case 22:
+            _context.prev = 22;
+            _context.t0 = _context["catch"](16);
+            // Stripe.js throws (instead of returning { error }) on integration errors
+            _setError(_get(_context.t0, 'message') || PAYMENT_FAILED_MESSAGE);
+            return _context.abrupt("return", null);
+          case 26:
+            _confirmResult = confirmResult, confirmError = _confirmResult.error, paymentIntent = _confirmResult.paymentIntent;
             if (!confirmError) {
-              _context.next = 23;
+              _context.next = 30;
               break;
             }
-            setError('' + (confirmError == null ? void 0 : confirmError.message));
+            _setError('' + (confirmError == null ? void 0 : confirmError.message));
             return _context.abrupt("return", null);
-          case 23:
+          case 30:
+            if (!(paymentIntent && !SUCCESSFUL_INTENT_STATUSES.includes(paymentIntent.status))) {
+              _context.next = 33;
+              break;
+            }
+            _setError(_get(paymentIntent, 'last_payment_error.message') || PAYMENT_FAILED_MESSAGE);
+            return _context.abrupt("return", null);
+          case 33:
             // Handle payment middleware for non-redirect payments
             paymentResponse = null;
-            _context.next = 26;
+            _context.prev = 34;
+            _context.next = 37;
             return handlePaymentMiddleWare(null, {}, {
               reviewData: attributes,
               isFreeTickets: isFreeTickets,
@@ -6625,7 +6717,9 @@ var useStripePayment = function useStripePayment(_ref) {
                 paymentResponse = data;
               },
               setPaymentIsLoading: _identity,
-              setError: _identity,
+              setError: function setError(message) {
+                if (message && isFreeTickets) _setError(message);
+              },
               orderData: updatedOrderData,
               eventId: eventId,
               isBrowser: isBrowser,
@@ -6633,13 +6727,29 @@ var useStripePayment = function useStripePayment(_ref) {
                 throw error;
               }
             });
-          case 26:
+          case 37:
+            _context.next = 45;
+            break;
+          case 39:
+            _context.prev = 39;
+            _context.t1 = _context["catch"](34);
+            if (!isFreeTickets) {
+              _context.next = 43;
+              break;
+            }
+            throw _context.t1;
+          case 43:
+            // Stripe has already taken the payment and the webhook will still settle the order,
+            // so never invite a retry (double charge) whatever the backend error looks like
+            _setError(PAYMENT_RECEIVED_MESSAGE);
+            return _context.abrupt("return", null);
+          case 45:
             return _context.abrupt("return", paymentResponse);
-          case 27:
+          case 46:
           case "end":
             return _context.stop();
         }
-      }, _callee);
+      }, _callee, null, [[16, 22], [34, 39]]);
     }));
     return function processPayment(_x, _x2, _x3, _x4, _x5, _x6) {
       return _ref2.apply(this, arguments);
@@ -7112,6 +7222,11 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
     checkoutUpdateData = _useState24[0],
     setCheckoutUpdateData = _useState24[1];
   var prevData = React.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 = React.useMemo(function () {
+    return getHolderTicketTypeIds(_get(checkoutUpdateData, 'cart_price_breakdown.tickets_price_breakdown'), ticketsQuantity.length);
+  }, [checkoutUpdateData, ticketsQuantity.length]);
   var addAddOnsInAttributes = React.useCallback(function (checkoutBody) {
     var selectedAddOns = window.localStorage.getItem('add_ons') || '{}';
     var addOnDataCapture = window.localStorage.getItem('add_on_data_capture') || '{}';
@@ -7427,12 +7542,20 @@ var BillingInfoContainer = /*#__PURE__*/React__default.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];
       });
@@ -7482,7 +7605,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.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 = React.useCallback(function () {
     localStorage.removeItem('referral_key');
   }, []);
@@ -7512,7 +7635,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
     }),
     processPayment = _useStripePayment.processPayment;
   var updateCheckoutWithAddOns = React.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) {
@@ -7527,9 +7650,9 @@ var BillingInfoContainer = /*#__PURE__*/React__default.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;
@@ -7573,11 +7696,11 @@ var BillingInfoContainer = /*#__PURE__*/React__default.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 = React.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:
@@ -7590,7 +7713,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
       }, _callee9);
     }));
     return function (_x2) {
-      return _ref14.apply(this, arguments);
+      return _ref15.apply(this, arguments);
     };
   }(), [updateCheckoutWithAddOns]);
   var onAddOnSelect = React.useCallback(function (id, value, _addon, fieldUpdates) {
@@ -8045,13 +8168,18 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
         key: _item
       }, React__default.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__default.createElement("div", {
           key: id
         }, React__default.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__default.createElement("div", {
             className: element.className,
             key: element.name