tf-checkout-react 1.3.25 → 1.3.27

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

@@ -48,5 +48,6 @@ export interface IBillingInfoPage {
     showForgotPasswordButton?: boolean;
     showSignUpButton?: boolean;
     brandOptIn?: boolean;
+    showPoweredByImage?: boolean;
 }
-export declare const BillingInfoContainer: React.MemoExoticComponent<({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, hideLogo, themeOptions, onErrorClose, hideErrorsAlertSection, onSkipBillingPage, skipPage, canSkipHolderNames, onForgotPasswordSuccess, onForgotPasswordError, shouldFetchCountries, onCountdownFinish, enableTimer, logo, showForgotPasswordButton, showSignUpButton, brandOptIn, }: IBillingInfoPage) => JSX.Element>;
+export declare const BillingInfoContainer: React.MemoExoticComponent<({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, hideLogo, themeOptions, onErrorClose, hideErrorsAlertSection, onSkipBillingPage, skipPage, canSkipHolderNames, onForgotPasswordSuccess, onForgotPasswordError, shouldFetchCountries, onCountdownFinish, enableTimer, logo, showForgotPasswordButton, showSignUpButton, brandOptIn, showPoweredByImage, }: IBillingInfoPage) => JSX.Element>;

package/dist/components/common/CustomField.d.ts

@@ -12,6 +12,9 @@ export interface ICustomField {
     theme: 'dark' | 'light';
     type?: string;
     selectOptions?: ISelectOption[];
+    inputRef?: {
+        current: HTMLInputElement | null;
+    } | ((node: HTMLInputElement | null) => void);
 }
 interface IOtherProps {
     [key: string]: any;

package/dist/components/common/PoweredBy.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PoweredBy: () => JSX.Element;

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

@@ -1,11 +1,12 @@
-import { FC } from 'react';
-import { AxiosError } from 'axios';
 import './style.css';
+import { AxiosError } from 'axios';
+import { FC } from 'react';
 interface IForgotPasswordProps {
     onClose: () => void;
     onLogin: () => void;
     onForgotPasswordSuccess: (res: any) => void;
     onForgotPasswordError: (e: AxiosError) => void;
+    showPoweredByImage?: boolean;
 }
 export declare const ForgotPasswordModal: FC<IForgotPasswordProps>;
 export {};

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

@@ -16,6 +16,7 @@ interface Props {
     logo?: string;
     showForgotPasswordButton?: boolean;
     showSignUpButton?: boolean;
+    showPoweredByImage?: boolean;
 }
 interface IUserData {
     id: string;

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

@@ -1,11 +1,12 @@
-import { FC } from 'react';
-import { AxiosError } from 'axios';
 import './style.css';
+import { AxiosError } from 'axios';
+import { FC } from 'react';
 interface Props {
     onClose: () => void;
     onRegister: () => void;
     onGetProfileDataSuccess: (res: any) => void;
     onGetProfileDataError: (e: AxiosError) => void;
+    showPoweredByImage?: boolean;
 }
 export declare const RegisterModal: FC<Props>;
 export {};

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

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { AxiosError } from 'axios';
 import './style.css';
+import { AxiosError } from 'axios';
+import { FC } from 'react';
 interface ISignupProps {
     onClose: () => void;
     onLogin: () => void;
@@ -9,6 +9,7 @@ interface ISignupProps {
         refreshToken: string;
     }) => void;
     onRegisterError: (e: AxiosError, email: string) => void;
+    showPoweredByImage?: boolean;
 }
 export declare const SignupModal: FC<ISignupProps>;
 export {};

package/dist/index.d.ts

@@ -13,3 +13,4 @@ export { RsvpContainer } from './components/rsvpContainer';
 export { ResetPasswordContainer } from './components/resetPasswordContainer';
 export { ForgotPasswordModal } from './components/forgotPasswordModal';
 export { AddonsContainter } from './components/addonsContainer';
+export { PoweredBy } from './components/common/PoweredBy';

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

@@ -25,6 +25,8 @@ var AdapterMoment = require('@mui/x-date-pickers/AdapterMoment');
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var TextField = _interopDefault(require('@mui/material/TextField'));
 var styles$1 = require('@mui/styles');
+var _isFunction = _interopDefault(require('lodash/isFunction'));
+var _isObject = _interopDefault(require('lodash/isObject'));
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
@@ -1613,28 +1615,33 @@ var emailValidator = function emailValidator(email) {
   return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
 };
 
-var CustomField = function CustomField(_ref) {
-  var label = _ref.label,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      field = _ref.field,
-      _ref$selectOptions = _ref.selectOptions,
-      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      submitCount = _ref$form.submitCount,
-      theme = _ref.theme,
-      _ref$inputProps = _ref.inputProps,
-      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
-      _ref$InputProps = _ref.InputProps,
-      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
-      inputRef = _ref.inputRef;
+var CustomField = function CustomField(_ref2) {
+  var _ref$current;
+
+  var label = _ref2.label,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'text' : _ref2$type,
+      field = _ref2.field,
+      _ref2$selectOptions = _ref2.selectOptions,
+      selectOptions = _ref2$selectOptions === void 0 ? [] : _ref2$selectOptions,
+      _ref2$form = _ref2.form,
+      touched = _ref2$form.touched,
+      errors = _ref2$form.errors,
+      submitCount = _ref2$form.submitCount,
+      theme = _ref2.theme,
+      _ref2$inputProps = _ref2.inputProps,
+      pInputProps = _ref2$inputProps === void 0 ? {} : _ref2$inputProps,
+      _ref2$InputProps = _ref2.InputProps,
+      InputProps = _ref2$InputProps === void 0 ? {} : _ref2$InputProps,
+      inputRef = _ref2.inputRef;
 
   var _useState = React.useState(Boolean(field.value)),
       isShrinked = _useState[0],
       setIsShrinked = _useState[1];
 
+  var _ref = React.useRef(null);
+
+  var isAutoFilled = (_ref$current = _ref.current) == null ? void 0 : _ref$current.matches(':-webkit-autofill');
   var isSelectField = type === 'select';
 
   var error = _get(errors, field.name);
@@ -1644,6 +1651,13 @@ var CustomField = function CustomField(_ref) {
   var inputProps = {
     sx: customTheme == null ? void 0 : customTheme.input
   };
+  React.useEffect(function () {
+    if (_isFunction(inputRef)) {
+      inputRef(_ref.current);
+    } else if (_isObject(inputRef)) {
+      inputRef.current = _ref.current;
+    }
+  });
   return React__default.createElement(TextField, Object.assign({
     placeholder: "",
     id: field.name,
@@ -1665,11 +1679,11 @@ var CustomField = function CustomField(_ref) {
     },
     InputLabelProps: {
       sx: customTheme == null ? void 0 : customTheme.input,
-      shrink: isShrinked || Boolean(field.value)
+      shrink: isShrinked || Boolean(field.value) || isAutoFilled
     },
     InputProps: InputProps,
     inputProps: _extends({}, inputProps, pInputProps),
-    inputRef: inputRef
+    inputRef: _ref
   }, field, {
     onBlur: function onBlur(e) {
       setIsShrinked(Boolean(field.value));
@@ -2008,6 +2022,20 @@ var SnackbarAlert = function SnackbarAlert(_ref) {
   }, message)));
 };
 
+var PoweredBy = function PoweredBy() {
+  return React__default.createElement("div", {
+    className: "powered-container"
+  }, React__default.createElement("div", {
+    className: 'powered-text'
+  }, "Powered By"), React__default.createElement("img", {
+    className: 'powered-img',
+    alt: "The Ticket Fairy",
+    src: "https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg"
+  }), React__default.createElement("div", {
+    className: 'powered-ttf'
+  }, "The", React__default.createElement("strong", null, "Ticket"), "Fairy"));
+};
+
 var style = {
   position: 'absolute',
   top: '50%',
@@ -2030,7 +2058,9 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
       _ref$onForgotPassword = _ref.onForgotPasswordSuccess,
       onForgotPasswordSuccess = _ref$onForgotPassword === void 0 ? function () {} : _ref$onForgotPassword,
       _ref$onForgotPassword2 = _ref.onForgotPasswordError,
-      onForgotPasswordError = _ref$onForgotPassword2 === void 0 ? function () {} : _ref$onForgotPassword2;
+      onForgotPasswordError = _ref$onForgotPassword2 === void 0 ? function () {} : _ref$onForgotPassword2,
+      _ref$showPoweredByIma = _ref.showPoweredByImage,
+      showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
   var _useState = React.useState(false),
       loading = _useState[0],
@@ -2127,7 +2157,7 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
       className: "login"
     }, React__default.createElement("span", {
       onClick: onLogin
-    }, "Back to Log In")));
+    }, "Back to Log In")), showPoweredByImage ? React__default.createElement(PoweredBy, null) : null);
   }))));
 };
 
@@ -2177,7 +2207,9 @@ var LoginModal = function LoginModal(_ref) {
       _ref$showForgotPasswo = _ref.showForgotPasswordButton,
       showForgotPasswordButton = _ref$showForgotPasswo === void 0 ? false : _ref$showForgotPasswo,
       _ref$showSignUpButton = _ref.showSignUpButton,
-      showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton;
+      showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton,
+      _ref$showPoweredByIma = _ref.showPoweredByImage,
+      showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
   var _useState = React.useState(''),
       error = _useState[0],
@@ -2337,7 +2369,7 @@ var LoginModal = function LoginModal(_ref) {
     }, React__default.createElement("span", {
       "aria-hidden": "true",
       onClick: onSignup
-    }, "Sign up"))));
+    }, "Sign up")), showPoweredByImage ? React__default.createElement(PoweredBy, null) : null));
   }))));
 };
 
@@ -2367,7 +2399,9 @@ var SignupModal = function SignupModal(_ref) {
       _ref$onRegisterSucces = _ref.onRegisterSuccess,
       onRegisterSuccess = _ref$onRegisterSucces === void 0 ? function () {} : _ref$onRegisterSucces,
       _ref$onRegisterError = _ref.onRegisterError,
-      onRegisterError = _ref$onRegisterError === void 0 ? function () {} : _ref$onRegisterError;
+      onRegisterError = _ref$onRegisterError === void 0 ? function () {} : _ref$onRegisterError,
+      _ref$showPoweredByIma = _ref.showPoweredByImage,
+      showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
   var _useState = React.useState(false),
       loading = _useState[0],
@@ -2512,7 +2546,7 @@ var SignupModal = function SignupModal(_ref) {
       className: "login"
     }, React__default.createElement("span", {
       onClick: onLogin
-    }, "Login")));
+    }, "Login")), showPoweredByImage ? React__default.createElement(PoweredBy, null) : null);
   }))));
 };
 
@@ -2997,7 +3031,9 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
       _ref4$showSignUpButto = _ref4.showSignUpButton,
       showSignUpButton = _ref4$showSignUpButto === void 0 ? false : _ref4$showSignUpButto,
       _ref4$brandOptIn = _ref4.brandOptIn,
-      brandOptIn = _ref4$brandOptIn === void 0 ? false : _ref4$brandOptIn;
+      brandOptIn = _ref4$brandOptIn === void 0 ? false : _ref4$brandOptIn,
+      _ref4$showPoweredByIm = _ref4.showPoweredByImage,
+      showPoweredByImage = _ref4$showPoweredByIm === void 0 ? false : _ref4$showPoweredByIm;
 
   var _useState = React.useState(false),
       isNewUser = _useState[0],
@@ -3787,7 +3823,8 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     onSignup: function onSignup() {
       setShowModalLogin(false);
       setShowModalSignup(true);
-    }
+    },
+    showPoweredByImage: showPoweredByImage
   }), showModalSignup && React__default.createElement(SignupModal, {
     onClose: function onClose() {
       setShowModalSignup(false);
@@ -3797,7 +3834,8 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
       setShowModalLogin(true);
     },
     onRegisterSuccess: onRegisterSuccess,
-    onRegisterError: onRegisterError
+    onRegisterError: onRegisterError,
+    showPoweredByImage: showPoweredByImage
   }), showModalForgotPassword && React__default.createElement(ForgotPasswordModal, {
     onClose: function onClose() {
       setShowModalForgotPassword(false);
@@ -3807,7 +3845,8 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
       setShowModalLogin(true);
     },
     onForgotPasswordSuccess: onForgotPasswordSuccess,
-    onForgotPasswordError: onForgotPasswordError
+    onForgotPasswordError: onForgotPasswordError,
+    showPoweredByImage: showPoweredByImage
   }));
 });
 
@@ -5429,7 +5468,12 @@ var TicketsSection = function TicketsSection(_ref) {
       ticketsHeaderComponent = _ref.ticketsHeaderComponent,
       hideTicketsHeader = _ref.hideTicketsHeader;
   var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
+  var showGroup = !!sortedTicketsList.find(function (ticket) {
+    return ticket.groupName;
+  });
   return React__default.createElement(React__default.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
+    var _arr;
+
     var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
 
     var ticketSelect = function ticketSelect(event) {
@@ -5445,8 +5489,12 @@ var TicketsSection = function TicketsSection(_ref) {
 
     var ticketIsFree = +ticket.price === 0;
     var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "\xA3 " + (+ticket.price).toFixed(2);
-    return React__default.createElement("div", {
-      key: ticket.id || ticket.name,
+    var isNewGroupTicket = (ticket == null ? void 0 : ticket.groupName) !== ((_arr = arr[i - 1]) == null ? void 0 : _arr.groupName);
+    return React__default.createElement(React__default.Fragment, {
+      key: ticket.id || ticket.name
+    }, showGroup && isNewGroupTicket ? React__default.createElement("div", {
+      className: 'event-detail__tier group-title'
+    }, ticket.groupName || '') : null, React__default.createElement("div", {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React__default.createElement("div", {
       className: "event-detail__tier-name"
@@ -5470,7 +5518,7 @@ var TicketsSection = function TicketsSection(_ref) {
       prevTicketTier: arr[i - 1],
       selectedTickets: selectedTickets,
       handleTicketSelect: ticketSelect
-    }))));
+    })))));
   }));
 };
 
@@ -8218,6 +8266,7 @@ exports.LoginModal = LoginModal;
 exports.MyTicketsContainer = MyTicketsContainer;
 exports.OrderDetailsContainer = OrderDetailsContainer;
 exports.PaymentContainer = PaymentContainer;
+exports.PoweredBy = PoweredBy;
 exports.RedirectModal = RedirectModal;
 exports.ResetPasswordContainer = ResetPasswordContainer;
 exports.RsvpContainer = RsvpContainer;