tf-checkout-react 1.0.99-beta.20 → 1.0.99-beta.23

package/dist/api/index.d.ts

@@ -35,5 +35,6 @@ export declare const removeFromResale: (hash: string) => Promise<AxiosResponse<a
 export declare const postReferralVisits: (eventId: string, referralId: string) => Promise<AxiosResponse<any, any>>;
 export declare const logout: () => Promise<AxiosResponse<any, any>>;
 export declare const processTicket: (hash: string) => Promise<AxiosResponse<any, any>>;
+export declare const declineInvitation: (hash: string) => Promise<AxiosResponse<any, any>>;
 export declare const sendRSVPInfo: (eventId: number, data: any) => Promise<AxiosResponse<any, any>>;
 export {};

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

@@ -16,5 +16,5 @@ export interface ICustomField {
 interface IOtherProps {
     [key: string]: any;
 }
-export declare const CustomField: ({ label, type, field, selectOptions, form: { touched, errors, submitCount }, theme, }: ICustomField & IOtherProps) => JSX.Element;
+export declare const CustomField: ({ label, type, field, selectOptions, form: { touched, errors, submitCount }, theme, inputProps: pInputProps, InputProps, inputRef, }: ICustomField & IOtherProps) => JSX.Element;
 export {};

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { FieldInputProps, FormikProps } from 'formik';
+export interface IDatePickerFieldProps {
+    label: string;
+    field: FieldInputProps<any>;
+    form: FormikProps<any>;
+    theme: 'dark' | 'light';
+    useCompact?: boolean;
+}
+interface IOtherProps {
+    [key: string]: any;
+}
+export declare const DatePickerField: ({ label, field, form, theme, useCompact, }: IDatePickerFieldProps & IOtherProps) => JSX.Element;
+export {};

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

@@ -3,6 +3,8 @@ import { AxiosError } from 'axios';
 export interface ITicketResaleContainer {
     onProcessTicketSuccess: (res: any) => void;
     onProcessTicketError: (e: AxiosError) => void;
+    onDeclineTicketPurchaseSuccess: (res: any) => void;
+    onDeclineTicketPurchaseError: (e: AxiosError) => void;
     orderHash?: string;
 }
-export declare const TicketResaleContainer: ({ onProcessTicketSuccess, onProcessTicketError, orderHash, }: ITicketResaleContainer) => JSX.Element;
+export declare const TicketResaleContainer: ({ onProcessTicketSuccess, onProcessTicketError, onDeclineTicketPurchaseSuccess, onDeclineTicketPurchaseError, orderHash, }: ITicketResaleContainer) => JSX.Element;

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

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import './style.css';
 interface ITicketsSectionProps {
     ticketsList: any;
     selectedTickets: any;
     handleTicketSelect: any;
     sortBySoldOut: boolean;
+    ticketsHeaderComponent?: ReactNode;
 }
-export declare const TicketsSection: ({ ticketsList, selectedTickets, handleTicketSelect, sortBySoldOut, }: ITicketsSectionProps) => JSX.Element;
+export declare const TicketsSection: ({ ticketsList, selectedTickets, handleTicketSelect, sortBySoldOut, ticketsHeaderComponent }: ITicketsSectionProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { AxiosError } from 'axios';
 import './style.css';
 import { ThemeOptions } from '@mui/material';
@@ -39,6 +39,7 @@ export interface IGetTickets {
     disableCountdownLeadingZero?: boolean;
     isLoggedIn?: boolean;
     actionsSectionComponent?: any;
+    ticketsHeaderComponent?: ReactNode;
 }
 export interface ITicket {
     id: string | number;
@@ -47,5 +48,5 @@ export interface ITicket {
 export interface ISelectedTickets {
     [key: string]: string | number;
 }
-export declare const TicketsContainer: ({ onLoginSuccess, getTicketsLabel, eventId, onAddToCartSuccess, contentStyle, onAddToCartError, onGetTicketsSuccess, onGetTicketsError, onLogoutSuccess, onLogoutError, theme, queryPromoCode, isPromotionsEnabled, themeOptions, isAccessCodeEnabled, hideSessionButtons, hideWaitingList, enableBillingInfoAutoCreate, isButtonScrollable, sortBySoldOut, disableCountdownLeadingZero, isLoggedIn, actionsSectionComponent: ActionsSectionComponent }: IGetTickets) => JSX.Element;
+export declare const TicketsContainer: ({ onLoginSuccess, getTicketsLabel, eventId, onAddToCartSuccess, contentStyle, onAddToCartError, onGetTicketsSuccess, onGetTicketsError, onLogoutSuccess, onLogoutError, theme, queryPromoCode, isPromotionsEnabled, themeOptions, isAccessCodeEnabled, hideSessionButtons, hideWaitingList, enableBillingInfoAutoCreate, isButtonScrollable, sortBySoldOut, disableCountdownLeadingZero, isLoggedIn, actionsSectionComponent: ActionsSectionComponent, ticketsHeaderComponent }: IGetTickets) => JSX.Element;
 export {};

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

@@ -27,7 +27,6 @@ var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel')
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
 var styles = require('@mui/styles');
 var TextField = _interopDefault(require('@mui/material/TextField'));
-var moment = _interopDefault(require('moment-timezone'));
 var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Select = _interopDefault(require('@mui/material/Select'));
@@ -36,6 +35,9 @@ var Backdrop = _interopDefault(require('@mui/material/Backdrop'));
 var Countdown$1 = _interopDefault(require('react-countdown'));
 var _isNumber = _interopDefault(require('lodash/isNumber'));
 var SVG = _interopDefault(require('react-inlinesvg'));
+var DatePicker = _interopDefault(require('@mui/lab/DatePicker'));
+var AdapterMoment = _interopDefault(require('@mui/lab/AdapterMoment'));
+var LocalizationProvider = _interopDefault(require('@mui/lab/LocalizationProvider'));
 var Container = _interopDefault(require('@mui/material/Container'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
 var reactStripeJs = require('@stripe/react-stripe-js');
@@ -48,6 +50,7 @@ var jwt_decode = _interopDefault(require('jwt-decode'));
 var _sortBy = _interopDefault(require('lodash/sortBy'));
 var FormControl = _interopDefault(require('@mui/material/FormControl'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
+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'));
@@ -1436,6 +1439,9 @@ var logout = function logout() {
 var processTicket = function processTicket(hash) {
   return publicRequest.post("v1/ticket/" + hash + "/process/");
 };
+var declineInvitation = function declineInvitation(hash) {
+  return publicRequest.post("v1/ticket/" + hash + "/decline");
+};
 var sendRSVPInfo = function sendRSVPInfo(eventId, data) {
   return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
 };
@@ -1867,6 +1873,7 @@ var createRegisterFormData = function createRegisterFormData(values, checkoutBod
   bodyFormData.append('password_confirmation', values.confirmPassword);
   bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
   bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+  bodyFormData.append('check_cart_expiration', 'true');
 
   _forEach(checkoutBody.attributes, function (item, key) {
     bodyFormData.append(key, item);
@@ -2041,7 +2048,12 @@ var CustomField = function CustomField(_ref) {
       touched = _ref$form.touched,
       errors = _ref$form.errors,
       submitCount = _ref$form.submitCount,
-      theme = _ref.theme;
+      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 isSelectField = type === 'select';
 
   var error = _get(errors, field.name);
@@ -2051,11 +2063,6 @@ var CustomField = function CustomField(_ref) {
   var inputProps = {
     sx: customTheme == null ? void 0 : customTheme.input
   };
-
-  if (type === 'date') {
-    inputProps.max = moment().format('YYYY-MM-DD');
-  }
-
   return React__default.createElement(TextField, Object.assign({
     id: field.name,
     label: label,
@@ -2072,10 +2079,11 @@ var CustomField = function CustomField(_ref) {
       }
     },
     InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input,
-      shrink: field.name === 'holderAge' ? true : undefined
+      sx: customTheme == null ? void 0 : customTheme.input
     },
-    inputProps: inputProps
+    InputProps: InputProps,
+    inputProps: _extends({}, inputProps, pInputProps),
+    inputRef: inputRef
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React__default.createElement("option", {
       key: option.value,
@@ -2378,6 +2386,79 @@ var SnackbarAlert = function SnackbarAlert(_ref) {
   }, message)));
 };
 
+var DATE_SIZE = 32;
+var compactStyles = {
+  '& > div': {
+    minWidth: 256
+  },
+  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
+    width: 256
+  },
+  '& .MuiTypography-caption': {
+    width: DATE_SIZE,
+    margin: 0
+  },
+  '& .PrivatePickersSlideTransition-root': {
+    minHeight: DATE_SIZE * 6
+  },
+  '& .PrivatePickersSlideTransition-root [role="row"]': {
+    margin: 0
+  },
+  '& .MuiPickersDay-dayWithMargin': {
+    margin: 0
+  },
+  '& .MuiPickersDay-root': {
+    width: DATE_SIZE,
+    height: DATE_SIZE
+  }
+};
+var compactStyleTheme = /*#__PURE__*/styles$1.createTheme({
+  components: {
+    MuiPaper: {
+      defaultProps: {
+        sx: compactStyles
+      }
+    }
+  }
+});
+var DatePickerField = function DatePickerField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      form = _ref.form,
+      theme = _ref.theme,
+      _ref$useCompact = _ref.useCompact,
+      useCompact = _ref$useCompact === void 0 ? true : _ref$useCompact;
+  return React__default.createElement(styles$1.ThemeProvider, {
+    theme: useCompact ? compactStyleTheme : {}
+  }, React__default.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, React__default.createElement(DatePicker, {
+    value: field.value || '',
+    onChange: function onChange(value) {
+      return form.setFieldValue(field.name, value);
+    },
+    PopperProps: {
+      placement: 'bottom-start'
+    },
+    showDaysOutsideCurrentMonth: true,
+    disableFuture: true,
+    inputFormat: "DD/MM/YYYY",
+    mask: "__/__/____",
+    renderInput: function renderInput(params) {
+      return React__default.createElement(CustomField, Object.assign({}, params, {
+        inputProps: _extends({}, params.inputProps, {
+          placeholder: 'dd/mm/yyyy'
+        }),
+        theme: theme,
+        field: field,
+        form: form,
+        label: label,
+        type: "tel"
+      }));
+    }
+  })));
+};
+
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -3181,7 +3262,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             validate: getValidateFunctions(element, states, props.values),
             setFieldValue: props.setFieldValue,
             onBlur: props.handleBlur,
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : CustomField,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
             selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
             theme: theme
           })));
@@ -4287,9 +4368,10 @@ var TicketsSection = function TicketsSection(_ref) {
   var ticketsList = _ref.ticketsList,
       selectedTickets = _ref.selectedTickets,
       handleTicketSelect = _ref.handleTicketSelect,
-      sortBySoldOut = _ref.sortBySoldOut;
+      sortBySoldOut = _ref.sortBySoldOut,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent;
   var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
-  return React__default.createElement(React__default.Fragment, null, sortedTicketsList.map(function (ticket, i, arr) {
+  return React__default.createElement(React__default.Fragment, null, ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
     var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
 
     var ticketSelect = function ticketSelect(event) {
@@ -4757,7 +4839,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
       disableCountdownLeadingZero = _ref$disableCountdown === void 0 ? false : _ref$disableCountdown,
       _ref$isLoggedIn = _ref.isLoggedIn,
       isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
-      ActionsSectionComponent = _ref.actionsSectionComponent;
+      ActionsSectionComponent = _ref.actionsSectionComponent,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent;
 
   var _useState = React.useState({}),
       selectedTickets = _useState[0],
@@ -5159,7 +5242,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
   var bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0;
   var wrappedActionsSectionComponent = React__default.isValidElement(ActionsSectionComponent) ? React__default.cloneElement(ActionsSectionComponent, {
-    handleGetTicketClick: handleGetTicketClick
+    handleGetTicketClick: handleGetTicketClick,
+    isTicketOnSale: isTicketOnSale
   }) : null;
   var externalUrl = event == null ? void 0 : event.redirectUrl;
   var eventSaleIsNotStarted = !(event != null && event.salesStarted) && (event == null ? void 0 : event.salesStart);
@@ -5176,7 +5260,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
-    sortBySoldOut: sortBySoldOut
+    sortBySoldOut: sortBySoldOut,
+    ticketsHeaderComponent: ticketsHeaderComponent
   }), externalUrl ? null : isSalesClosed ? React__default.createElement("p", {
     className: "event-closed-message " + (!isLoggedIn ? 'event-closed-on-bottom' : '')
   }, "Sales for this event are closed.") : eventSaleIsNotStarted ? React__default.createElement(Countdown, {
@@ -6052,75 +6137,110 @@ var TicketResaleContainer = function TicketResaleContainer(_ref) {
       onProcessTicketSuccess = _ref$onProcessTicketS === void 0 ? function () {} : _ref$onProcessTicketS,
       _ref$onProcessTicketE = _ref.onProcessTicketError,
       onProcessTicketError = _ref$onProcessTicketE === void 0 ? function () {} : _ref$onProcessTicketE,
+      _ref$onDeclineTicketP = _ref.onDeclineTicketPurchaseSuccess,
+      onDeclineTicketPurchaseSuccess = _ref$onDeclineTicketP === void 0 ? function () {} : _ref$onDeclineTicketP,
+      _ref$onDeclineTicketP2 = _ref.onDeclineTicketPurchaseError,
+      onDeclineTicketPurchaseError = _ref$onDeclineTicketP2 === void 0 ? function () {} : _ref$onDeclineTicketP2,
       orderHash = _ref.orderHash;
   var isWindowDefined = typeof window !== 'undefined';
 
-  var _useState = React.useState(null),
+  var _useState = React.useState(''),
       error = _useState[0],
       setError = _useState[1];
 
+  var _useState2 = React.useState(''),
+      successMessage = _useState2[0],
+      setSuccessMessage = _useState2[1];
+
   React.useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var params, hash, response, data, age_required, names_required, event_id, _error$response, _error$response$data;
+      var params, hash, isDeclined, response, _error$response, _error$response$data, _response, data, age_required, names_required, event_id, _error$response2, _error$response2$data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               if (!isWindowDefined) {
-                _context.next = 23;
+                _context.next = 38;
                 break;
               }
 
               params = new URL("" + window.location).searchParams;
               hash = params.get('invitation_hash') || orderHash || null;
+              isDeclined = params.get('decline') || false;
 
               if (!hash) {
-                _context.next = 22;
+                _context.next = 37;
                 break;
               }
 
-              _context.prev = 4;
-              _context.next = 7;
-              return processTicket(hash);
+              if (!isDeclined) {
+                _context.next = 19;
+                break;
+              }
 
-            case 7:
+              _context.prev = 6;
+              _context.next = 9;
+              return declineInvitation(hash);
+
+            case 9:
               response = _context.sent;
-              data = _get(response, 'data.data.attributes');
+              onDeclineTicketPurchaseSuccess(response);
+              setSuccessMessage("Thanks for letting us know! We'll offer this ticket to someone else!");
+              _context.next = 18;
+              break;
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](6);
+              setError(_context.t0 == null ? void 0 : (_error$response = _context.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message);
+              onDeclineTicketPurchaseError(_context.t0.response);
+
+            case 18:
+              return _context.abrupt("return");
+
+            case 19:
+              _context.prev = 19;
+              _context.next = 22;
+              return processTicket(hash);
+
+            case 22:
+              _response = _context.sent;
+              data = _get(_response, 'data.data.attributes');
               age_required = _get(data, 'age_required', false);
               names_required = _get(data, 'names_required', false);
               event_id = _get(data, 'event_id');
-              onProcessTicketSuccess(response.data);
+              onProcessTicketSuccess(_response.data);
               window.location.href = "/billing/billing-info/?age_required=" + age_required + "&names_required=" + names_required + "&event_id=" + event_id;
-              _context.next = 20;
+              _context.next = 35;
               break;
 
-            case 16:
-              _context.prev = 16;
-              _context.t0 = _context["catch"](4);
-              setError(_context.t0 == null ? void 0 : (_error$response = _context.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message);
-              onProcessTicketError(_context.t0.response);
+            case 31:
+              _context.prev = 31;
+              _context.t1 = _context["catch"](19);
+              setError(_context.t1 == null ? void 0 : (_error$response2 = _context.t1.response) == null ? void 0 : (_error$response2$data = _error$response2.data) == null ? void 0 : _error$response2$data.message);
+              onProcessTicketError(_context.t1.response);
 
-            case 20:
-              _context.next = 23;
+            case 35:
+              _context.next = 38;
               break;
 
-            case 22:
+            case 37:
               window.location.href = '/';
 
-            case 23:
+            case 38:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 16]]);
+      }, _callee, null, [[6, 14], [19, 31]]);
     }))();
   }, []);
   return React__default.createElement("div", {
     className: "ticket-resale-page"
   }, React__default.createElement("div", {
-    className: "error-block"
-  }, React__default.createElement("h3", null, error)));
+    className: "" + (successMessage ? 'success-block' : 'error-block')
+  }, React__default.createElement("h3", null, successMessage ? successMessage : error)));
 };
 
 var style$3 = {