tf-checkout-react 1.0.53 → 1.0.57

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

@@ -1281,7 +1281,11 @@ var LoginModal = function LoginModal(_ref) {
       onSubmit: props.handleSubmit
     }, React.createElement("div", {
       className: "modal-title"
-    }, "Login"), React.createElement("div", {
+    }, "Login"), React.createElement("img", {
+      className: "login-logo-tff",
+      src: "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
+      alt: ""
+    }), React.createElement("div", {
       className: "server_auth__error"
     }, error), alreadyHasUser && React.createElement("p", {
       className: "info-text-for-login"
@@ -1551,8 +1555,12 @@ var getInitialValues = function getInitialValues(data, propsInitialValues, userV
 
   _forEach(results, function (item) {
     initialValues[item] = propsInitialValues[item] || userValues[item] || '';
-  });
+  }); // set logged in user as first ticket holder
+
 
+  initialValues['holderFirstName-0'] = propsInitialValues.firstName || userValues.firstName || '';
+  initialValues['holderLastName-0'] = propsInitialValues.lastName || userValues.lastName || '';
+  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || '';
   return initialValues;
 };
 var createRegisterFormData = function createRegisterFormData(values, checkoutBody) {
@@ -1953,7 +1961,10 @@ var LogicRunner = function LogicRunner(_ref) {
               brand_opt_in: (parsedData == null ? void 0 : parsedData.brand_opt_in) || '',
               city: (parsedData == null ? void 0 : parsedData.city) || '',
               confirmPassword: '',
-              password: ''
+              password: '',
+              'holderFirstName-0': (parsedData == null ? void 0 : parsedData.first_name) || '',
+              'holderLastName-0': (parsedData == null ? void 0 : parsedData.last_name) || '',
+              'holderEmail-0': (parsedData == null ? void 0 : parsedData.email) || ''
             };
             setValues(mappedValues);
             setUserValues(mappedValues);
@@ -2010,47 +2021,56 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$onAuthorizeErro = _ref3.onAuthorizeError,
       onAuthorizeError = _ref3$onAuthorizeErro === void 0 ? function () {} : _ref3$onAuthorizeErro,
       _ref3$onLogin = _ref3.onLogin,
-      onLogin = _ref3$onLogin === void 0 ? function () {} : _ref3$onLogin;
-  var userData = typeof window !== 'undefined' && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
-  var access_token = typeof window !== 'undefined' && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
+      onLogin = _ref3$onLogin === void 0 ? function () {} : _ref3$onLogin,
+      _ref3$onLoginSuccess = _ref3.onLoginSuccess,
+      onLoginSuccess = _ref3$onLoginSuccess === void 0 ? function () {} : _ref3$onLoginSuccess,
+      _ref3$isLoggedIn = _ref3.isLoggedIn,
+      pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn;
+  var isWindowDefined = typeof window !== 'undefined';
+  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 _useState = useState(data),
       dataWithUniqueIds = _useState[0],
       setDataWithUniqueIds = _useState[1];
 
-  var _useState2 = useState({}),
-      cartInfoData = _useState2[0],
-      setCartInfo = _useState2[1];
+  var _useState2 = useState(!!access_token),
+      isLoggedIn = _useState2[0],
+      setIsLoggedIn = _useState2[1];
 
-  var _useState3 = useState([]),
-      countries = _useState3[0],
-      setCountries = _useState3[1];
+  var _useState3 = useState({}),
+      cartInfoData = _useState3[0],
+      setCartInfo = _useState3[1];
 
   var _useState4 = useState([]),
-      states = _useState4[0],
-      setStates = _useState4[1];
+      countries = _useState4[0],
+      setCountries = _useState4[1];
 
-  var _useState5 = useState(false),
-      showModalLogin = _useState5[0],
-      setShowModalLogin = _useState5[1];
+  var _useState5 = useState([]),
+      states = _useState5[0],
+      setStates = _useState5[1];
 
   var _useState6 = useState(false),
-      alreadyHasUser = _useState6[0],
-      setAlreadyHasUser = _useState6[1];
+      showModalLogin = _useState6[0],
+      setShowModalLogin = _useState6[1];
 
   var _useState7 = useState(false),
-      userExpired = _useState7[0],
-      setUserExpired = _useState7[1];
+      alreadyHasUser = _useState7[0],
+      setAlreadyHasUser = _useState7[1];
 
   var _useState8 = useState(false),
-      showModalRegister = _useState8[0],
-      setShowModalRegister = _useState8[1];
+      userExpired = _useState8[0],
+      setUserExpired = _useState8[1];
 
-  var _useState9 = useState([]),
-      ticketsQuantity = _useState9[0],
-      setTicketsQuantity = _useState9[1];
+  var _useState9 = useState(false),
+      showModalRegister = _useState9[0],
+      setShowModalRegister = _useState9[1];
+
+  var _useState10 = useState([]),
+      ticketsQuantity = _useState10[0],
+      setTicketsQuantity = _useState10[1];
 
-  var _useState10 = useState({
+  var _useState11 = useState({
     firstName: '',
     lastName: '',
     email: '',
@@ -2065,10 +2085,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     state: '',
     zip: ''
   }),
-      userValues = _useState10[0],
-      setUserValues = _useState10[1];
-
-  var isLoggedIn = !!access_token;
+      userValues = _useState11[0],
+      setUserValues = _useState11[1];
 
   var emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '');
 
@@ -2077,7 +2095,6 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   var lastNameLogged = _get(userData, 'last_name', '') || _get(userValues, 'last_name', '');
 
   var showDOB = getQueryVariable('age_required') === 'true';
-  var showTicketHolderName = getQueryVariable('names_required') === 'true';
   var eventId = getQueryVariable('event_id');
 
   var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
@@ -2098,8 +2115,13 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       qty += +item.quantity;
     });
     return qty;
-  }; //just once
+  };
 
+  useEffect(function () {
+    if ((pIsLoggedIn || access_token) && !isLoggedIn) {
+      setIsLoggedIn(true);
+    }
+  }, [pIsLoggedIn, isLoggedIn, access_token]); //just once
 
   useEffect(function () {
     // fetch countries data
@@ -2208,7 +2230,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             case 0:
               _context4.prev = 0;
 
-              if (!(typeof window !== 'undefined' && token)) {
+              if (!(isWindowDefined && token)) {
                 _context4.next = 10;
                 break;
               }
@@ -2289,7 +2311,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 _profileSpecifiedData = _get(updatedUserData, 'data.data');
                 _profileDataObj = setLoggedUserData(_profileSpecifiedData);
 
-                if (typeof window !== 'undefined') {
+                if (isWindowDefined) {
                   window.localStorage.setItem('user_data', JSON.stringify(_profileDataObj));
                 }
 
@@ -2367,7 +2389,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
 
-                if (typeof window !== 'undefined') {
+                if (isWindowDefined) {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                 }
 
@@ -2391,7 +2413,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
                 if (axios.isAxiosError(_context5.t1)) {
                   if (((_e$response2 = _context5.t1.response) == null ? void 0 : _e$response2.data.error) === 'invalid_token') {
-                    if (typeof window !== 'undefined') {
+                    if (isWindowDefined) {
                       window.localStorage.removeItem('user_data');
                       window.localStorage.removeItem('access_token');
                       setUserExpired(true);
@@ -2444,35 +2466,18 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       var label = item.label,
           labelClassName = item.labelClassName,
           fields = item.fields;
-
-      if (label === 'Ticket Holders' && !showTicketHolderName && !showDOB) {
-        return null;
-      }
-
       return React.createElement(React.Fragment, {
         key: item.uniqueId
       }, React.createElement("p", {
         className: labelClassName
       }, label), _map(fields, function (group) {
         var groupClassname = group.groupClassname,
-            groupItems = group.groupItems,
-            groupLabel = group.groupLabel,
-            groupLabelClassName = group.groupLabelClassName;
+            groupItems = group.groupItems;
         return React.createElement(React.Fragment, {
           key: group.uniqueId
-        }, !isLoggedIn && React.createElement("div", {
-          className: groupLabelClassName
-        }, groupLabel), React.createElement("div", {
+        }, React.createElement("div", {
           className: groupClassname
         }, _map(groupItems.filter(function (el) {
-          if (el.name === 'holderFirstName' && !showTicketHolderName) {
-            return false;
-          }
-
-          if (el.name === 'holderLastName' && !showTicketHolderName) {
-            return false;
-          }
-
           if (el.name === 'holderAge' && !showDOB) {
             return false;
           }
@@ -2483,7 +2488,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
           return true;
         }), function (element) {
-          return ['password', 'confirmPassword'].includes(element.name) && isLoggedIn ? null : React.createElement(React.Fragment, {
+          return ['password', 'confirmPassword', 'password-info'].includes(element.name) && isLoggedIn ? null : React.createElement(React.Fragment, {
             key: element.uniqueId
           }, element.name === 'email' ? React.createElement("div", {
             className: "email-checking"
@@ -2500,7 +2505,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
           })));
         })));
       }));
-    }), showTicketHolderName && React.createElement(React.Fragment, null, React.createElement("div", {
+    }), React.createElement("div", {
       className: "ticket-holders-fields"
     }, React.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
       return React.createElement("div", {
@@ -2526,7 +2531,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
           }));
         })));
       }));
-    }))), React.createElement("div", {
+    })), React.createElement("div", {
       className: "button-container"
     }, React.createElement(LoadingButton, {
       type: "submit",
@@ -2546,6 +2551,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     onLogin: function onLogin() {
       setShowModalLogin(false);
       setUserExpired(false);
+      onLoginSuccess();
     },
     alreadyHasUser: alreadyHasUser,
     userExpired: userExpired,
@@ -2645,6 +2651,9 @@ var options = {
       fontSize: '18px',
       color: '#ffffff',
       letterSpacing: '1px',
+      ':-webkit-autofill': {
+        color: '#ffffff'
+      },
       '::placeholder': {
         color: 'rgba(201, 201, 201, 0.5)'
       }
@@ -2660,7 +2669,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
       _ref$onSubmit = _ref.onSubmit,
       onSubmit = _ref$onSubmit === void 0 ? _identity : _ref$onSubmit,
       _ref$stripeCardOption = _ref.stripeCardOptions,
-      stripeCardOptions = _ref$stripeCardOption === void 0 ? options : _ref$stripeCardOption,
+      stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? null : _ref$error,
       stripe_client_secret = _ref.stripe_client_secret,
@@ -2683,6 +2692,14 @@ var CheckoutForm = function CheckoutForm(_ref) {
       stripeError = _useState2[0],
       setStripeError = _useState2[1];
 
+  var _useState3 = useState([]),
+      checkboxes = _useState3[0],
+      setCheckboxes = _useState3[1];
+
+  var _useState4 = useState(false),
+      allowSubmit = _useState4[0],
+      setAllowSubmit = _useState4[1];
+
   var handleSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(event) {
       var card, address, paymentMethodReq, _yield$stripe$confirm, _error;
@@ -2788,6 +2805,17 @@ var CheckoutForm = function CheckoutForm(_ref) {
     };
   }();
 
+  var handleCheckboxes = function handleCheckboxes(e) {
+    var checkbox = e.target;
+    var updatedCheckedState = checkboxes.map(function (item) {
+      var value = item.id === checkbox.name ? !item.checked : item.checked;
+      return _extends({}, item, {
+        checked: value
+      });
+    });
+    setCheckboxes(updatedCheckedState);
+  };
+
   var onChangePostalCode = function onChangePostalCode(e) {
     setPostalCode(e.target.value);
   };
@@ -2801,6 +2829,19 @@ var CheckoutForm = function CheckoutForm(_ref) {
       zipCode && setPostalCode(zipCode);
     }
   }, []);
+  useEffect(function () {
+    if (conditions.length) {
+      setCheckboxes(conditions);
+    }
+  }, [conditions]);
+  useEffect(function () {
+    if (checkboxes.length) {
+      var allChecked = checkboxes.every(function (item) {
+        return (item == null ? void 0 : item.checked) === true;
+      });
+      setAllowSubmit(allChecked);
+    }
+  }, [checkboxes]);
   var buttonIsDiabled = !stripe || !!error || isLoading;
   return React.createElement("div", {
     className: "stripe_payment_container"
@@ -2815,7 +2856,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Card number"), React.createElement(CardNumberElement, {
-    options: stripeCardOptions,
+    options: _extends({}, options, stripeCardOptions),
     onReady: _identity,
     onChange: _identity,
     onBlur: _identity,
@@ -2825,13 +2866,13 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React.createElement(CardExpiryElement, {
-    options: stripeCardOptions
+    options: _extends({}, options, stripeCardOptions)
   })), React.createElement("label", {
     className: "cvc_element"
   }, React.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React.createElement(CardCvcElement, {
-    options: stripeCardOptions
+    options: _extends({}, options, stripeCardOptions)
   })), React.createElement("label", {
     className: "zip_element"
   }, React.createElement("p", {
@@ -2841,7 +2882,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
     value: postalCode,
     onChange: onChangePostalCode,
     placeholder: "ZIP"
-  }))), conditions == null ? void 0 : conditions.map(function (checkbox) {
+  }))), checkboxes == null ? void 0 : checkboxes.map(function (checkbox) {
     return React.createElement("div", {
       className: 'billing-info-container__singleField',
       key: checkbox.id
@@ -2850,10 +2891,12 @@ var CheckoutForm = function CheckoutForm(_ref) {
     }, React.createElement(CheckboxField, {
       name: checkbox.id,
       label: checkbox.text,
-      required: true
+      required: true,
+      onChange: handleCheckboxes,
+      checked: checkbox.checked
     })));
   }), React.createElement("div", {
-    className: "payment_button " + (buttonIsDiabled ? 'disabled-payment-button' : '')
+    className: "payment_button " + (buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : '')
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
@@ -2895,7 +2938,9 @@ var PaymentContainer = function PaymentContainer(_ref) {
       _ref$onGetPaymentData2 = _ref.onGetPaymentDataError,
       onGetPaymentDataError = _ref$onGetPaymentData2 === void 0 ? function () {} : _ref$onGetPaymentData2,
       _ref$onPaymentError = _ref.onPaymentError,
-      onPaymentError = _ref$onPaymentError === void 0 ? function () {} : _ref$onPaymentError;
+      onPaymentError = _ref$onPaymentError === void 0 ? function () {} : _ref$onPaymentError,
+      _ref$stripeCardOption = _ref.stripeCardOptions,
+      stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption;
 
   var _useState = useState(initialReviewValues),
       reviewData = _useState[0],
@@ -2995,7 +3040,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
                 setConditions(conditionsInfo ? conditionsInfo.map(function (item) {
                   return {
                     id: nanoid(),
-                    text: item
+                    text: item,
+                    checked: false
                   };
                 }) : []);
 
@@ -3115,7 +3161,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     handleSetLoading: function handleSetLoading(value) {
       return setPaymentIsLoading(value);
     },
-    conditions: conditions
+    conditions: conditions,
+    stripeCardOptions: stripeCardOptions
   }))))));
 };
 
@@ -3184,7 +3231,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
         }
       }, _callee, null, [[4, 13]]);
     }))();
-  }, [onGetConfirmationDataSuccess, onGetConfirmationDataError]);
+  }, []);
   return React.createElement("div", {
     className: "confirmation-page"
   }, React.createElement("p", {
@@ -3422,7 +3469,7 @@ var TicketsSection = function TicketsSection(_ref) {
   }));
 };
 
-var css_248z$7 = ".style_waiting-list__2sJxM{padding:17px 35px 20px}.style_waiting-list__2sJxM .style_field-item__34MYc{margin-bottom:30px}.style_waiting-list__2sJxM .style_waiting-list-button__tO7D2{width:100%!important}.style_waiting-list__2sJxM .style_waiting-list-button__tO7D2:hover{background-color:#505050}.style_waiting-list__2sJxM .style_success-message__BvF3R h3{margin:10px 0}.style_waiting-list__2sJxM .style_success-message__BvF3R p{margin:0}";
+var css_248z$7 = ".style_waiting-list__2sJxM{padding:17px 35px 20px}.style_waiting-list__2sJxM .style_field-item__34MYc{margin-bottom:30px}.style_waiting-list__2sJxM .style_waiting-list-button__tO7D2{width:100%!important}.style_waiting-list__2sJxM .style_waiting-list-button__tO7D2:hover{background-color:#505050}.style_waiting-list__2sJxM .style_success-message__BvF3R h3{margin:10px 0}.style_waiting-list__2sJxM .style_success-message__BvF3R p{margin:0}.style_waiting-list__2sJxM .style_no-tickets-text__zGdaP{text-align:center}.style_waiting-list__2sJxM .style_added-success-message__FbPZS{font-size:22px}";
 styleInject(css_248z$7);
 
 var generateQuantity = function generateQuantity(n) {
@@ -3512,9 +3559,13 @@ var WaitingList = function WaitingList(_ref) {
 
   return React.createElement("div", {
     className: "waiting-list"
-  }, showSuccessMessage ? React.createElement("div", {
+  }, React.createElement("p", {
+    className: "no-tickets-text"
+  }, "No tickets are currently available for this event."), showSuccessMessage ? React.createElement("div", {
     className: "success-message"
-  }, React.createElement("h3", null, "You've been added to the waiting list!"), React.createElement("p", null, "You'll be notified if tickets become available.")) : React.createElement(React.Fragment, null, React.createElement("h2", null, "WAITING LIST"), React.createElement(Formik, {
+  }, React.createElement("p", {
+    className: "added-success-message"
+  }, "You've been added to the waiting list!"), React.createElement("p", null, "You'll be notified if tickets become available.")) : React.createElement(React.Fragment, null, React.createElement("h2", null, "WAITING LIST"), React.createElement(Formik, {
     initialValues: {
       ticketTypeId: '',
       quantity: '',