tf-checkout-react 1.3.34 → 1.3.36

package/dist/components/common/{SelectField.d.ts → NativeSelectFeild/index.d.ts}

@@ -17,5 +17,5 @@ export interface ISelectField {
 interface IOtherProps {
     [key: string]: any;
 }
-export declare const SelectField: ({ label, type, field, selectOptions, form: { touched, errors, setFieldValue }, theme, onChange, }: ISelectField & IOtherProps) => JSX.Element;
+export declare const NativeSelectField: ({ label, type, field, selectOptions, form: { touched, errors, setFieldValue }, theme, onChange, }: ISelectField & IOtherProps) => JSX.Element;
 export {};

package/dist/components/common/SelectField/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { SelectChangeEvent } from '@mui/material/Select';
+import { FieldInputProps, FormikProps } from 'formik';
+interface ISelectOption {
+    id: string | number;
+    name: string | number;
+    value: string | number;
+}
+interface ISelectField {
+    field: FieldInputProps<any>;
+    form: FormikProps<any>;
+    options: ISelectOption[];
+    label?: string;
+    isMultiple?: boolean;
+    onChange?: (e: SelectChangeEvent<string[]>) => void;
+}
+declare function SelectField({ label, isMultiple, field, form: { errors, setFieldValue }, options, onChange, }: ISelectField): JSX.Element;
+export { SelectField };

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

@@ -3,5 +3,6 @@ export { CustomField } from './CustomField';
 export { FormikPhoneNumberField } from './FormikPhoneNumberField';
 export { PhoneNumberField } from './PhoneNumberField';
 export { Loader } from './Loader';
-export { SelectField } from './SelectField';
+export { NativeSelectField } from './NativeSelectFeild';
 export { RadioGroupField } from './RadioGroupField';
+export { SelectField } from './SelectField';

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

@@ -1,6 +1,7 @@
 import './style.css';
 import { ReactNode } from 'react';
 interface ITicketsSectionProps {
+    event: any;
     ticketsList: any;
     selectedTickets: any;
     handleTicketSelect: any;
@@ -8,5 +9,5 @@ interface ITicketsSectionProps {
     ticketsHeaderComponent?: ReactNode;
     hideTicketsHeader: boolean;
 }
-export declare const TicketsSection: ({ ticketsList, selectedTickets, handleTicketSelect, sortBySoldOut, ticketsHeaderComponent, hideTicketsHeader }: ITicketsSectionProps) => JSX.Element;
+export declare const TicketsSection: ({ event, ticketsList, selectedTickets, handleTicketSelect, sortBySoldOut, ticketsHeaderComponent, hideTicketsHeader, }: ITicketsSectionProps) => JSX.Element;
 export {};

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

@@ -40,6 +40,9 @@ var FormHelperText = _interopDefault(require('@mui/material/FormHelperText'));
 var FormLabel = _interopDefault(require('@mui/material/FormLabel'));
 var Radio = _interopDefault(require('@mui/material/Radio'));
 var RadioGroup = _interopDefault(require('@mui/material/RadioGroup'));
+var ListItemText = _interopDefault(require('@mui/material/ListItemText'));
+var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
+var OutlinedInput = _interopDefault(require('@mui/material/OutlinedInput'));
 var Yup = require('yup');
 var Box = _interopDefault(require('@mui/material/Box'));
 var Modal = _interopDefault(require('@mui/material/Modal'));
@@ -59,7 +62,6 @@ var _some = _interopDefault(require('lodash/some'));
 var Button$1 = _interopDefault(require('react-bootstrap/Button'));
 var moment = _interopDefault(require('moment-timezone'));
 var _sortBy = _interopDefault(require('lodash/sortBy'));
-var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
 var Autocomplete = _interopDefault(require('@mui/material/Autocomplete'));
 var Paper = _interopDefault(require('@mui/material/Paper'));
 var Table = _interopDefault(require('@mui/material/Table'));
@@ -1620,10 +1622,24 @@ var combineValidators = function combineValidators() {
     }
   };
 };
+function isFalsy(item) {
+  try {
+    if (!item || // handles most, like false, 0, null, etc
+    typeof item == 'object' && Object.keys(item).length === 0 && // for empty objects, like {}, []
+    !(typeof item.addEventListener == 'function') // omit webpage elements
+    ) {
+      return true;
+    }
+  } catch (err) {
+    return true;
+  }
+
+  return false;
+}
 var requiredValidator = function requiredValidator(value, message) {
   var errorMessage = '';
 
-  if (!value) {
+  if (isFalsy(value)) {
     errorMessage = message || 'Required';
   }
 
@@ -1951,7 +1967,7 @@ function Loader() {
   }, React__default.createElement(CircularProgress, null));
 }
 
-var SelectField = function SelectField(_ref) {
+var NativeSelectField = function NativeSelectField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
@@ -2052,6 +2068,62 @@ var RadioGroupField = function RadioGroupField(_ref) {
   })));
 };
 
+function SelectField(_ref) {
+  var label = _ref.label,
+      isMultiple = _ref.isMultiple,
+      field = _ref.field,
+      _ref$form = _ref.form,
+      errors = _ref$form.errors,
+      setFieldValue = _ref$form.setFieldValue,
+      options = _ref.options,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? _identity : _ref$onChange;
+  var name = field.name,
+      value = field.value;
+  var selectId = "select-field-" + name;
+
+  var error = _get(errors, name);
+
+  var handleChange = function handleChange(event) {
+    var value = event.target.value;
+    setFieldValue(name, value);
+    onChange(event);
+  };
+
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.FormControl, {
+    fullWidth: true,
+    error: Boolean(error)
+  }, label && React__default.createElement(material.InputLabel, {
+    id: selectId
+  }, label), React__default.createElement(Select, {
+    id: name,
+    labelId: selectId,
+    multiple: isMultiple,
+    value: value,
+    onChange: handleChange,
+    input: React__default.createElement(OutlinedInput, {
+      label: label
+    }),
+    renderValue: function renderValue(selected) {
+      return isMultiple ? selected.join(', ') : selected;
+    },
+    sx: {
+      textAlign: 'start'
+    }
+  }, options.map(function (option) {
+    return React__default.createElement(MenuItem, {
+      key: option.name,
+      value: option.value
+    }, isMultiple && React__default.createElement(Checkbox, {
+      checked: value.indexOf(option.value) > -1
+    }), React__default.createElement(ListItemText, {
+      primary: option.name
+    }));
+  })), error ? React__default.createElement(FormHelperText, {
+    error: true
+  }, error) : null));
+}
+
 var SnackbarAlert = function SnackbarAlert(_ref) {
   var isOpen = _ref.isOpen,
       message = _ref.message,
@@ -3269,13 +3341,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
               case 3:
                 res = _context2.sent;
                 setCustomHeader(res);
-                setCountries(_map(_get(res, 'data.data'), function (item) {
-                  return {
-                    label: item.name,
-                    value: item.id,
-                    code: item.code
-                  };
-                }));
+                setCountries(_get(res, 'data.data'));
                 setIsCountriesLoading(false);
                 onGetCountriesSuccess(res.data);
                 _context2.next = 14;
@@ -3504,6 +3570,10 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     }
   }
 
+  var selectedCountry = _find(countries, function (item) {
+    return item.code.toLowerCase() === defaultCountry;
+  }) || {};
+  var initialCountry = selectedCountry.id || _get(userData, 'country', '') || '1';
   return React__default.createElement(styles.ThemeProvider, {
     theme: themeMui
   }, (loading || isCountriesLoading) && React__default.createElement(Backdrop, {
@@ -3520,9 +3590,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     onCountdownFinish: onCountdownFinish
   }), !isCountriesLoading && React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({
-      country: (_find(countries, function (item) {
-        return item.code.toLowerCase() === defaultCountry;
-      }) || {}).value || _get(userData, 'country', '') || '1',
+      country: initialCountry,
       state: _get(userData, 'state', '') || '1',
       brand_opt_in: optedInFieldValue,
       ttf_opt_in: ttfOptIn
@@ -3819,8 +3887,13 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
             validate: getValidateFunctions(element, states, props.values, props.errors),
             setFieldValue: props.setFieldValue,
             onBlur: props.handleBlur,
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? PhoneNumberField : element.type === 'date' ? DatePickerField : element.type === 'radio' ? RadioGroupField : CustomField,
-            selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? NativeSelectField : element.type === 'phone' ? PhoneNumberField : element.type === 'date' ? DatePickerField : element.type === 'radio' ? RadioGroupField : element.type === 'select_multi' ? SelectField : CustomField,
+            selectOptions: element.name === 'country' ? _map(countries, function (item) {
+              return {
+                value: item.id,
+                label: item.name
+              };
+            }) : element.name === 'state' ? states : [],
             radios: element.radios,
             theme: theme,
             disableDropdown: element.disableDropdown,
@@ -3933,7 +4006,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
 });
 
 var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
-  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
+  return !value ? '' : getCurrencySymbolByCurrency(currency) + " " + value;
 };
 var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
   return function (value) {
@@ -5575,12 +5648,17 @@ var TicketRow = function TicketRow(_ref) {
 };
 
 var TicketsSection = function TicketsSection(_ref) {
-  var ticketsList = _ref.ticketsList,
+  var _ref$event = _ref.event,
+      event = _ref$event === void 0 ? {
+    currency: 'GBP'
+  } : _ref$event,
+      ticketsList = _ref.ticketsList,
       selectedTickets = _ref.selectedTickets,
       handleTicketSelect = _ref.handleTicketSelect,
       sortBySoldOut = _ref.sortBySoldOut,
       ticketsHeaderComponent = _ref.ticketsHeaderComponent,
       hideTicketsHeader = _ref.hideTicketsHeader;
+  var currency = event.currency;
   var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
   var showGroup = !!sortedTicketsList.find(function (ticket) {
     return ticket.groupName;
@@ -5588,6 +5666,8 @@ var TicketsSection = function TicketsSection(_ref) {
   return React__default.createElement(React__default.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
     var _arr;
 
+    var ticketPrice = currencyNormalizerCreator((+ticket.price).toFixed(2), currency);
+    var ticketOldPrice = currencyNormalizerCreator((+ticket.oldPrice).toFixed(2), currency);
     var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
 
     var ticketSelect = function ticketSelect(event) {
@@ -5602,12 +5682,12 @@ var TicketsSection = function TicketsSection(_ref) {
     }
 
     var ticketIsFree = +ticket.price === 0;
-    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
+    var ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : ticketPrice;
     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'
+      className: "event-detail__tier group-title"
     }, ticket.groupName || '') : null, React__default.createElement("div", {
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React__default.createElement("div", {
@@ -5618,9 +5698,9 @@ var TicketsSection = function TicketsSection(_ref) {
       className: "event-detail__tier-price"
     }, ticketIsDiscounted && React__default.createElement("p", {
       className: "old-price"
-    }, "$ ", (+ticket.oldPrice).toFixed(2)), React__default.createElement("p", {
+    }, ticketOldPrice), React__default.createElement("p", {
       className: isSoldOut ? 'sold-out' : ''
-    }, ticketPrice), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
+    }, ticketPriceElem), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
       className: "fees"
     }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')), React__default.createElement("div", {
       className: "event-detail__tier-state",
@@ -6268,6 +6348,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }, error), isLoading ? React__default.createElement(Loader, null) : React__default.createElement("div", {
     ref: ticketsContainerRef
   }, !isSalesClosed && React__default.createElement(TicketsSection, {
+    event: event,
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
@@ -7623,7 +7704,7 @@ var AddonComponent = function AddonComponent(_ref) {
   }, React__default.createElement(formik.Field, {
     name: id,
     selectOptions: selectOptions,
-    component: SelectField,
+    component: NativeSelectField,
     onChange: function onChange(e) {
       var value = e.target.value;
       handleAddonChange(id, value);