tf-checkout-react 1.0.78 → 1.0.79

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

@@ -4,7 +4,7 @@ import { FormikHelpers, FormikValues } from 'formik';
 import './style.css';
 import { IBillingInfoData } from '../../types';
 import { ThemeOptions } from '@mui/material';
-import { CSSProperties } from '@mui/styled-engine';
+import { CSSProperties } from '@mui/styles';
 export interface IBillingInfoPage {
     data?: IBillingInfoData[];
     ticketHoldersFields?: IBillingInfoData;

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

@@ -1,9 +1,11 @@
-import { CSSProperties } from 'react';
+/// <reference types="react" />
 import { AxiosError } from 'axios';
+import { StripeElementsOptions } from '@stripe/stripe-js';
 import './style.css';
 import { IPaymentField } from '../../types';
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js';
 import { ThemeOptions } from '@mui/material';
+import { CSSProperties } from "@mui/styles";
 export interface IPaymentPage {
     paymentFields: IPaymentField[];
     handlePayment: any;
@@ -20,5 +22,6 @@ export interface IPaymentPage {
         input?: CSSProperties;
         checkbox?: CSSProperties;
     };
+    elementsOptions?: StripeElementsOptions;
 }
-export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, stripeCardOptions, disableZipSection, themeOptions, }: IPaymentPage) => JSX.Element;
+export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, stripeCardOptions, disableZipSection, themeOptions, elementsOptions }: IPaymentPage) => JSX.Element;

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { AxiosError } from 'axios';
 import './style.css';
+import { ThemeOptions } from '@mui/material';
+import { CSSProperties } from '@mui/styles';
 interface CartSuccess {
     skip_billing_page: boolean;
     names_required: boolean;
@@ -20,6 +22,10 @@ export interface IGetTickets {
     theme?: 'light' | 'dark';
     queryPromoCode?: string;
     isPromotionsEnabled?: boolean;
+    themeOptions?: ThemeOptions & {
+        input?: CSSProperties;
+        checkbox?: CSSProperties;
+    };
 }
 export interface ITicket {
     id: string | number;
@@ -28,5 +34,5 @@ export interface ITicket {
 export interface ISelectedTickets {
     [key: string]: string | number;
 }
-export declare const TicketsContainer: ({ onLoginSuccess, getTicketsLabel, eventId, onAddToCartSuccess, contentStyle, onAddToCartError, onGetTicketsSuccess, onGetTicketsError, theme, queryPromoCode, isPromotionsEnabled, }: IGetTickets) => JSX.Element;
+export declare const TicketsContainer: ({ onLoginSuccess, getTicketsLabel, eventId, onAddToCartSuccess, contentStyle, onAddToCartError, onGetTicketsSuccess, onGetTicketsError, theme, queryPromoCode, isPromotionsEnabled, themeOptions, }: IGetTickets) => JSX.Element;
 export {};

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

@@ -45,6 +45,7 @@ var FormControl = _interopDefault(require('@mui/material/FormControl'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
 var SVG = _interopDefault(require('react-inlinesvg'));
 var moment = _interopDefault(require('moment-timezone'));
+var privateTheming = require('@mui/private-theming');
 var Table = _interopDefault(require('@mui/material/Table'));
 var TableBody = _interopDefault(require('@mui/material/TableBody'));
 var TableCell = _interopDefault(require('@mui/material/TableCell'));
@@ -1906,18 +1907,22 @@ var CustomField = function CustomField(_ref) {
 
 var _excluded$1 = ["label", "field", "selectOptions", "theme", "setFieldValue"];
 var CheckboxField = function CheckboxField(_ref) {
+  var _rest$form, _field$name, _rest$form2, _field$name2;
+
   var label = _ref.label,
       field = _ref.field,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var customTheme = styles.useTheme();
-  return React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
+  return React__default.createElement(material.FormControl, {
+    error: !!(rest != null && (_rest$form = rest.form) != null && _rest$form.errors && rest.form.errors[(_field$name = field == null ? void 0 : field.name) != null ? _field$name : ""])
+  }, React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
     control: React__default.createElement(Checkbox, Object.assign({}, field, rest)),
     label: label,
     componentsProps: {
       typography: customTheme == null ? void 0 : customTheme.checkbox
     }
-  }));
+  })), !!(rest != null && (_rest$form2 = rest.form) != null && _rest$form2.errors && rest.form.errors[(_field$name2 = field == null ? void 0 : field.name) != null ? _field$name2 : ""]) ? React__default.createElement(material.FormHelperText, null, "Required") : null);
 };
 
 var SelectField = function SelectField(_ref) {
@@ -3019,7 +3024,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "Card number"), React__default.createElement(reactStripeJs.CardNumberElement, {
-    options: _extends({}, options.style, stripeCardOptions),
+    options: _extends({}, options, stripeCardOptions),
     onReady: _identity,
     onChange: _identity,
     onBlur: _identity,
@@ -3029,13 +3034,13 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React__default.createElement(reactStripeJs.CardExpiryElement, {
-    options: _extends({}, options.style, stripeCardOptions)
+    options: _extends({}, options, stripeCardOptions)
   })), React__default.createElement("label", {
     className: "cvc_element"
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React__default.createElement(reactStripeJs.CardCvcElement, {
-    options: _extends({}, options.style, stripeCardOptions)
+    options: _extends({}, options, stripeCardOptions)
   })), !disableZipSection && React__default.createElement("label", {
     className: "zip_element"
   }, React__default.createElement("p", {
@@ -3127,7 +3132,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
       stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
       _ref$disableZipSectio = _ref.disableZipSection,
       disableZipSection = _ref$disableZipSectio === void 0 ? false : _ref$disableZipSectio,
-      themeOptions = _ref.themeOptions;
+      themeOptions = _ref.themeOptions,
+      elementsOptions = _ref.elementsOptions;
 
   var _useState = React.useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3348,7 +3354,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
   }, "Please provide your payment information"), showErrorText && React__default.createElement("p", {
     className: "payment_info__error"
   }, errorText), React__default.createElement("div", null, React__default.createElement(reactStripeJs.Elements, {
-    stripe: getStripePromise(reviewData)
+    stripe: getStripePromise(reviewData),
+    options: elementsOptions
   }, React__default.createElement(CheckoutForm, {
     stripe_client_secret: _get(reviewData, 'payment_method.stripe_client_secret'),
     total: orderData.total,
@@ -4167,7 +4174,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$queryPromoCode = _ref.queryPromoCode,
       queryPromoCode = _ref$queryPromoCode === void 0 ? '' : _ref$queryPromoCode,
       _ref$isPromotionsEnab = _ref.isPromotionsEnabled,
-      isPromotionsEnabled = _ref$isPromotionsEnab === void 0 ? true : _ref$isPromotionsEnab;
+      isPromotionsEnabled = _ref$isPromotionsEnab === void 0 ? true : _ref$isPromotionsEnab,
+      themeOptions = _ref.themeOptions;
 
   var _useState = React.useState({}),
       selectedTickets = _useState[0],
@@ -4460,6 +4468,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   var isAllTicketsSoldOut = !_some(tickets, function (item) {
     return !(item.sold_out || item.soldOut);
   });
+  var themeMui = material.createTheme(themeOptions);
   React.useEffect(function () {
     isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
     return function () {
@@ -4472,7 +4481,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
       isWindowDefined && window.document.removeEventListener('custom-login', handleExternalLogin);
     };
   }, []);
-  return React__default.createElement("div", {
+  return React__default.createElement(privateTheming.ThemeProvider, {
+    theme: themeMui
+  }, React__default.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
   }, isLoading ? React__default.createElement(Loader$1, null) : React__default.createElement("div", null, React__default.createElement(TicketsSection, {
@@ -4486,7 +4497,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     title: "Sales start in:",
     message: "No tickets are currently available for this event.",
     callback: updateTickets
-  }) : null, showWaitingList && React__default.createElement(WaitingList, {
+  }) : null, showWaitingList && event.salesStarted && React__default.createElement(WaitingList, {
     tickets: tickets,
     eventId: eventId
   }), React__default.createElement(PromoCodeSection, {
@@ -4519,7 +4530,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }, "Log out"))) : ''), showLoginModal ? React__default.createElement(LoginModal, {
     onClose: handleOnClose,
     onLogin: handleOnLogin
-  }) : null);
+  }) : null));
 };
 
 var EventInfoItem = function EventInfoItem(_ref) {