tf-checkout-react 1.4.17 → 1.4.18

package/dist/api/index.d.ts

@@ -43,7 +43,40 @@ export declare const sendRSVPInfo: (eventId: number, data: any) => Promise<Axios
 export declare const validatePhoneNumber: (phone: string) => Promise<any>;
 export declare const getAddons: (eventId: string) => Promise<any>;
 export declare const selectAddons: (data: any) => void;
-export declare const getCheckoutPageConfigs: () => Promise<any>;
+export interface AttributesConfig {
+    has_add_on: boolean;
+    names_required: boolean;
+    phone_required: boolean;
+    minimum_age?: any;
+    age_required: boolean;
+    hide_phone_field: boolean;
+    event_id: string;
+    free_ticket: boolean;
+    collect_mandatory_wallet_address: boolean;
+    collect_optional_wallet_address: boolean;
+    collect_mandatory_company: boolean;
+    collect_optional_company: boolean;
+    collect_mandatory_job_title: boolean;
+    collect_optional_job_title: boolean;
+    collect_mandatory_business_category: boolean;
+    collect_optional_business_category: boolean;
+    collect_mandatory_instagram: boolean;
+    collect_optional_instagram: boolean;
+    skip_billing_page: boolean;
+}
+export interface ConfigsData {
+    attributes: AttributesConfig;
+    relationships: any[];
+    type: string;
+}
+export interface ResponseConfigs {
+    data: ConfigsData;
+    success: boolean;
+    error: boolean;
+    message: string;
+    status: number;
+}
+export declare const getCheckoutPageConfigs: () => Promise<ResponseConfigs>;
 export declare const getSeatMapData: (eventId: string | number) => Promise<SeatMapDataResponse>;
 export declare const getSeatMapStatuses: (eventId: string | number) => Promise<SeatMapStatusesResponse>;
 export declare const reserveSeat: (eventId: string | number, tierId: string, seatId: string) => Promise<any>;

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

@@ -2859,7 +2859,9 @@ var LogicRunner = function LogicRunner(_ref) {
               'holderLastName-0': (parsedData == null ? void 0 : parsedData.last_name) || (parsedData == null ? void 0 : parsedData.lastName) || '',
               'holderEmail-0': (parsedData == null ? void 0 : parsedData.email) || ''
             };
-            setValues(_extends({}, values, mappedValues));
+            var extraDataJSON = window.localStorage.getItem('extraData');
+            var extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null;
+            setValues(_extends({}, values, mappedValues, extraData != null ? extraData : {}));
             setUserValues(mappedValues);
           } catch (e) {}
         }
@@ -2953,49 +2955,75 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     isCountryCodeEditable = _ref4$isCountryCodeEd === void 0 ? true : _ref4$isCountryCodeEd,
     _ref4$onPendingVerifi = _ref4.onPendingVerification,
     onPendingVerification = _ref4$onPendingVerifi === void 0 ? _identity : _ref4$onPendingVerifi;
-  var _useState = React.useState(false),
-    isNewUser = _useState[0],
-    setIsNewUser = _useState[1];
+  var _useState = React.useState(null),
+    extraData = _useState[0],
+    setExtraData = _useState[1];
+  var _useState2 = React.useState(true),
+    isConfigLoading = _useState2[0],
+    setIsConfigLoading = _useState2[1];
+  var _useState3 = React.useState(null),
+    configs = _useState3[0],
+    setConfigs = _useState3[1];
+  var _useState4 = React.useState(false),
+    isNewUser = _useState4[0],
+    setIsNewUser = _useState4[1];
   var themeMui = styles.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
+  React.useEffect(function () {
+    if (isWindowDefined) {
+      var _extraData = window.localStorage.getItem('extraData');
+      if (_extraData) {
+        setExtraData(JSON.parse(_extraData));
+      }
+    }
+    getCheckoutPageConfigs().then(function (data) {
+      var _data$data;
+      if (data != null && (_data$data = data.data) != null && _data$data.attributes) {
+        setConfigs(data.data.attributes);
+        setIsConfigLoading(false);
+      }
+    })["catch"](function () {
+      setIsConfigLoading(false);
+    });
+  }, [isWindowDefined]);
   var defaultCountry = isWindowDefined ? window.localStorage.getItem('eventCountry') : '';
   var userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
-  var _useState2 = React.useState(assingUniqueIds(data)),
-    dataWithUniqueIds = _useState2[0],
-    setDataWithUniqueIds = _useState2[1];
+  var _useState5 = React.useState(assingUniqueIds(data)),
+    dataWithUniqueIds = _useState5[0],
+    setDataWithUniqueIds = _useState5[1];
   var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
-  var _useState3 = React.useState(!!(pIsLoggedIn || xtfCookie)),
-    isLoggedIn = _useState3[0],
-    setIsLoggedIn = _useState3[1];
-  var _useState4 = React.useState({}),
-    cartInfoData = _useState4[0],
-    setCartInfo = _useState4[1];
-  var _useState5 = React.useState([]),
-    countries = _useState5[0],
-    setCountries = _useState5[1];
-  var _useState6 = React.useState([]),
-    states = _useState6[0],
-    setStates = _useState6[1];
-  var _useState7 = React.useState(false),
-    showModalLogin = _useState7[0],
-    setShowModalLogin = _useState7[1];
-  var _useState8 = React.useState(false),
-    alreadyHasUser = _useState8[0],
-    setAlreadyHasUser = _useState8[1];
-  var _useState9 = React.useState(false),
-    userExpired = _useState9[0],
-    setUserExpired = _useState9[1];
+  var _useState6 = React.useState(!!(pIsLoggedIn || xtfCookie)),
+    isLoggedIn = _useState6[0],
+    setIsLoggedIn = _useState6[1];
+  var _useState7 = React.useState({}),
+    cartInfoData = _useState7[0],
+    setCartInfo = _useState7[1];
+  var _useState8 = React.useState([]),
+    countries = _useState8[0],
+    setCountries = _useState8[1];
+  var _useState9 = React.useState([]),
+    states = _useState9[0],
+    setStates = _useState9[1];
   var _useState10 = React.useState(false),
-    showModalSignup = _useState10[0],
-    setShowModalSignup = _useState10[1];
+    showModalLogin = _useState10[0],
+    setShowModalLogin = _useState10[1];
   var _useState11 = React.useState(false),
-    showModalForgotPassword = _useState11[0],
-    setShowModalForgotPassword = _useState11[1];
-  var _useState12 = React.useState([]),
-    ticketsQuantity = _useState12[0],
-    setTicketsQuantity = _useState12[1];
-  var _useState13 = React.useState({
+    alreadyHasUser = _useState11[0],
+    setAlreadyHasUser = _useState11[1];
+  var _useState12 = React.useState(false),
+    userExpired = _useState12[0],
+    setUserExpired = _useState12[1];
+  var _useState13 = React.useState(false),
+    showModalSignup = _useState13[0],
+    setShowModalSignup = _useState13[1];
+  var _useState14 = React.useState(false),
+    showModalForgotPassword = _useState14[0],
+    setShowModalForgotPassword = _useState14[1];
+  var _useState15 = React.useState([]),
+    ticketsQuantity = _useState15[0],
+    setTicketsQuantity = _useState15[1];
+  var _useState16 = React.useState({
       firstName: '',
       lastName: '',
       email: '',
@@ -3010,43 +3038,55 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
       state: '',
       zip: ''
     }),
-    userValues = _useState13[0],
-    setUserValues = _useState13[1];
-  var _useState14 = React.useState(true),
-    loading = _useState14[0],
-    setLoading = _useState14[1];
-  var _useState15 = React.useState(false),
-    cardLoading = _useState15[0],
-    setCardLoading = _useState15[1];
-  var _useState16 = React.useState(true),
-    isCountriesLoading = _useState16[0],
-    setIsCountriesLoading = _useState16[1];
-  var _useState17 = React.useState(null),
-    error = _useState17[0],
-    setError = _useState17[1];
+    userValues = _useState16[0],
+    setUserValues = _useState16[1];
+  var _useState17 = React.useState(true),
+    loading = _useState17[0],
+    setLoading = _useState17[1];
   var _useState18 = React.useState(false),
-    phoneValidationIsLoading = _useState18[0],
-    setPhoneValidationIsLoading = _useState18[1];
+    cardLoading = _useState18[0],
+    setCardLoading = _useState18[1];
+  var _useState19 = React.useState(true),
+    isCountriesLoading = _useState19[0],
+    setIsCountriesLoading = _useState19[1];
+  var _useState20 = React.useState(null),
+    error = _useState20[0],
+    setError = _useState20[1];
+  var _useState21 = React.useState(false),
+    phoneValidationIsLoading = _useState21[0],
+    setPhoneValidationIsLoading = _useState21[1];
   var emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '');
   var firstNameLogged = _get(userData, 'first_name', '') || _get(userValues, 'first_name', '');
   var lastNameLogged = _get(userData, 'last_name', '') || _get(userValues, 'last_name', '');
-  var showDOB = getQueryVariable('age_required') === 'true';
-  var showTicketHolders = getQueryVariable('names_required') === 'true';
-  var eventId = getQueryVariable('event_id') || '';
+  var showDOB = configs == null ? void 0 : configs.age_required;
+  var showTicketHolders = configs == null ? void 0 : configs.names_required;
+  var eventId = configs == null ? void 0 : configs.event_id;
   var optedInFieldValue = brandOptIn ? brandOptIn : _get(cartInfoData, 'optedIn', false);
   var ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false));
   var isTable = Boolean(_get(cartInfoData, 'is_table', false));
   var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
   var expirationTime = _get(cartInfoData, 'expiresAt');
-  var flagRequirePhone = getQueryVariable('phone_required') === 'true';
-  var collectMandatoryWalletAddress = getQueryVariable('collect_mandatory_wallet_address') === 'true';
-  var collectOptionalWalletAddress = getQueryVariable('collect_optional_wallet_address') === 'true';
-  var flagFreeTicket = getQueryVariable('free_ticket') === 'true';
-  var hidePhoneField = getQueryVariable('hide_phone_field') === 'true';
+  var flagRequirePhone = configs == null ? void 0 : configs.phone_required;
+  var collectMandatoryWalletAddress = configs == null ? void 0 : configs.collect_mandatory_wallet_address;
+  var collectOptionalWalletAddress = configs == null ? void 0 : configs.collect_optional_wallet_address;
+  var flagFreeTicket = configs == null ? void 0 : configs.free_ticket;
+  var hidePhoneField = configs == null ? void 0 : configs.hide_phone_field;
   var hideWalletAddressField = !collectOptionalWalletAddress && !collectMandatoryWalletAddress;
-  var _useState19 = React.useState(),
-    pendingVerificationMessage = _useState19[0],
-    setPendingVerificationMessage = _useState19[1];
+  var collectMandatoryCompany = configs == null ? void 0 : configs.collect_mandatory_company;
+  var collectOptionalCompany = configs == null ? void 0 : configs.collect_optional_company;
+  var hideCompanyField = !collectOptionalCompany && !collectMandatoryCompany;
+  var collectMandatoryJobTitle = configs == null ? void 0 : configs.collect_mandatory_job_title;
+  var collectOptionalJobTitle = configs == null ? void 0 : configs.collect_optional_job_title;
+  var hideJobTitleField = !collectMandatoryJobTitle && !collectOptionalJobTitle;
+  var collectMandatoryInstagram = configs == null ? void 0 : configs.collect_mandatory_instagram;
+  var collectOptionalInstagram = configs == null ? void 0 : configs.collect_optional_instagram;
+  var hideInstagramField = !collectMandatoryInstagram && !collectOptionalInstagram;
+  var collectMandatoryBusinessCategory = configs == null ? void 0 : configs.collect_mandatory_business_category;
+  var collectOptionalBusinessCategory = configs == null ? void 0 : configs.collect_optional_business_category;
+  var hideBusinessCategoryField = !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory;
+  var _useState22 = React.useState(),
+    pendingVerificationMessage = _useState22[0],
+    setPendingVerificationMessage = _useState22[1];
   // Get prevProps
   var prevData = React.useRef(data);
   var addAddOnsInAttributes = function addAddOnsInAttributes(checkoutBody) {
@@ -3290,7 +3330,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   }) || {};
   var initialCountry = selectedCountry.id || _get(userData, 'country', '') || '1';
   var pageUrl = isBrowser ? window.location.href.split('?')[0] : '';
-  usePixel(eventId, {
+  usePixel(eventId || '', {
     page: 'billing',
     pageUrl: pageUrl
   });
@@ -3299,7 +3339,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   }
   return React__default.createElement(styles.ThemeProvider, {
     theme: themeMui
-  }, (loading || cardLoading || isCountriesLoading) && React__default.createElement(Backdrop, {
+  }, (loading || cardLoading || isCountriesLoading || isConfigLoading) && React__default.createElement(Backdrop, {
     sx: {
       color: '#fff',
       backgroundColor: '#000000bd',
@@ -3311,12 +3351,18 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   })), !!expirationTime && enableTimer && React__default.createElement(TimerWidget$1, {
     expires_at: expirationTime,
     onCountdownFinish: onCountdownFinish
-  }), !isCountriesLoading && React__default.createElement(formik.Formik, {
+  }), !isCountriesLoading && !isConfigLoading && React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({
       country: initialCountry,
       state: _get(userData, 'state', '') || '1',
       brand_opt_in: optedInFieldValue,
-      ttf_opt_in: ttfOptIn
+      ttf_opt_in: ttfOptIn,
+      data_capture: {
+        'instagram': _get(extraData, 'data_capture.instagram', ''),
+        'company': _get(extraData, 'data_capture.company', ''),
+        'businessCategory': _get(extraData, 'data_capture.businessCategory', ''),
+        'jobTitle': _get(extraData, 'data_capture.jobTitle', '')
+      }
     }, initialValues), userValues),
     enableReinitialize: false,
     onSubmit: function () {
@@ -3326,46 +3372,56 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
           while (1) switch (_context6.prev = _context6.next) {
             case 0:
               _context6.prev = 0;
+              if (isWindowDefined) {
+                window.localStorage.setItem('extraData', JSON.stringify({
+                  data_capture: {
+                    'instagram': _get(values, 'data_capture.instagram', ''),
+                    'company': _get(values, 'data_capture.company', ''),
+                    'businessCategory': _get(values, 'data_capture.businessCategory', ''),
+                    'jobTitle': _get(values, 'data_capture.jobTitle', '')
+                  }
+                }));
+              }
               if (!isLoggedIn) {
-                _context6.next = 17;
+                _context6.next = 18;
                 break;
               }
               _checkoutBody = collectCheckoutBody(values, userData);
               if (isWindowDefined) {
                 addAddOnsInAttributes(_checkoutBody);
               }
-              _context6.next = 6;
+              _context6.next = 7;
               return postOnCheckout(_checkoutBody, access_token, flagFreeTicket);
-            case 6:
+            case 7:
               _res = _context6.sent;
               removeReferralKey();
               // After checkout is successful recover updated profile and store it on local storage if needed
               if (!isWindowDefined) {
-                _context6.next = 15;
+                _context6.next = 16;
                 break;
               }
-              _context6.next = 11;
+              _context6.next = 12;
               return getProfileData(access_token);
-            case 11:
+            case 12:
               updatedUserData = _context6.sent;
               _profileSpecifiedData = _get(updatedUserData, 'data.data');
               _profileDataObj = setLoggedUserData$2(_profileSpecifiedData);
               window.localStorage.setItem('user_data', JSON.stringify(_profileDataObj));
-            case 15:
+            case 16:
               handleSubmit(values, formikHelpers, eventId, _res);
               return _context6.abrupt("return");
-            case 17:
+            case 18:
               checkoutBodyForRegistration = createCheckoutDataBody(ticketsQuantity.length, values, {
                 emailLogged: emailLogged,
                 firstNameLogged: firstNameLogged,
                 lastNameLogged: lastNameLogged
               }, showDOB);
               bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration, flagFreeTicket);
-              _context6.prev = 19;
+              _context6.prev = 20;
               setLoading(true);
-              _context6.next = 23;
+              _context6.next = 24;
               return register(bodyFormData);
-            case 23:
+            case 24:
               resRegister = _context6.sent;
               _xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce');
               accessToken = _get(resRegister, 'data.data.attributes.access_token');
@@ -3378,11 +3434,11 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 refreshToken: refreshToken,
                 userProfile: userProfile
               });
-              _context6.next = 37;
+              _context6.next = 38;
               break;
-            case 32:
-              _context6.prev = 32;
-              _context6.t0 = _context6["catch"](19);
+            case 33:
+              _context6.prev = 33;
+              _context6.t0 = _context6["catch"](20);
               setLoading(false);
               if ((_e$response3 = _context6.t0.response) != null && (_e$response3$data = _e$response3.data) != null && (_e$response3$data$dat = _e$response3$data.data) != null && _e$response3$data$dat.hasUnverifiedOrder) {
                 setPendingVerificationMessage((_e$response4 = _context6.t0.response) == null ? void 0 : (_e$response4$data = _e$response4.data) == null ? void 0 : _e$response4$data.message);
@@ -3406,10 +3462,10 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 onRegisterError(_context6.t0, values.email);
               }
               return _context6.abrupt("return");
-            case 37:
-              _context6.next = 39;
+            case 38:
+              _context6.next = 40;
               return getProfileData();
-            case 39:
+            case 40:
               profileData = _context6.sent;
               profileSpecifiedData = _get(profileData, 'data.data');
               profileDataObj = setLoggedUserData$2(profileSpecifiedData);
@@ -3420,16 +3476,16 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
               if (isWindowDefined) {
                 addAddOnsInAttributes(checkoutBody);
               }
-              _context6.next = 47;
+              _context6.next = 48;
               return postOnCheckout(checkoutBody, undefined, flagFreeTicket);
-            case 47:
+            case 48:
               res = _context6.sent;
               removeReferralKey();
               handleSubmit(values, formikHelpers, eventId, res);
-              _context6.next = 56;
+              _context6.next = 57;
               break;
-            case 52:
-              _context6.prev = 52;
+            case 53:
+              _context6.prev = 53;
               _context6.t1 = _context6["catch"](0);
               setLoading(false);
               if ((_e$response6 = _context6.t1.response) != null && (_e$response6$data = _e$response6.data) != null && (_e$response6$data$dat = _e$response6$data.data) != null && _e$response6$data$dat.hasUnverifiedOrder) {
@@ -3454,15 +3510,15 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 }
                 onSubmitError(_context6.t1);
               }
-            case 56:
-              _context6.prev = 56;
+            case 57:
+              _context6.prev = 57;
               setLoading(false);
-              return _context6.finish(56);
-            case 59:
+              return _context6.finish(57);
+            case 60:
             case "end":
               return _context6.stop();
           }
-        }, _callee6, null, [[0, 52, 56, 59], [19, 32]]);
+        }, _callee6, null, [[0, 53, 57, 60], [20, 33]]);
       }));
       function onSubmit(_x2, _x3) {
         return _onSubmit.apply(this, arguments);
@@ -3548,18 +3604,50 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
               el.required = true;
             }
           }
-          if (['street_address', 'country', 'state', 'city', 'zip'].includes(el.name)) {
+          if (el.name === 'data_capture[jobTitle]') {
+            if (collectMandatoryJobTitle) {
+              el.required = true;
+            }
+          }
+          if (el.name === 'data_capture[businessCategory]') {
+            if (collectMandatoryBusinessCategory) {
+              el.required = true;
+            }
+          }
+          if (el.name === 'data_capture[company]') {
+            if (collectMandatoryCompany) {
+              el.required = true;
+            }
+          }
+          if (el.name === 'data_capture[instagram]') {
+            if (collectMandatoryInstagram) {
+              el.required = true;
+            }
+          }
+          if (['street_address', 'country', 'state', 'city'].includes(el.name)) {
             if (flagFreeTicket) {
               el.required = false;
               return false;
             }
           }
-          if (hideWalletAddressField && el.name === 'wallet-address-info') {
+          if (hideWalletAddressField && (el.name === 'wallet-address-info' || el.name === 'data_capture[wallet_address]')) {
+            return false;
+          }
+          if (hideJobTitleField && el.name === 'data_capture[jobTitle]') {
+            return false;
+          }
+          if (hideBusinessCategoryField && el.name === 'data_capture[businessCategory]') {
+            return false;
+          }
+          if (hideCompanyField && el.name === 'data_capture[company]') {
+            return false;
+          }
+          if (hideInstagramField && (el.name === 'data_capture[instagram]' || el.name === 'instagram-info')) {
             return false;
           }
           return true;
         }), function (element) {
-          return ['password', 'confirmPassword', 'password-info'].includes(element.name) && isLoggedIn ? null : ['data_capture[wallet_address]'].includes(element.name) && hideWalletAddressField ? null : React__default.createElement(React__default.Fragment, {
+          return ['password', 'confirmPassword', 'password-info'].includes(element.name) && isLoggedIn ? null : React__default.createElement(React__default.Fragment, {
             key: element.uniqueId
           }, React__default.createElement("div", {
             className: element.className + " " + ((props == null ? void 0 : props.errors[element.name]) || '')
@@ -5613,6 +5701,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
           window.localStorage.removeItem('user_data');
         }
       }
+      window.localStorage.removeItem('extraData');
     }
   }, []);
   React.useEffect(function () {