tf-checkout-react 1.0.99-beta.19 → 1.0.99-beta.21

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

@@ -1,4 +1,4 @@
-import React, { Component, useState, useRef, useEffect, Fragment } from 'react';
+import React, { Component, useState, memo, useRef, useEffect, Fragment } from 'react';
 import { connect, Formik, Form, Field } from 'formik';
 import Button from '@mui/material/Button';
 import _identity from 'lodash-es/identity';
@@ -20,15 +20,17 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { useTheme } from '@mui/styles';
 import TextField$1 from '@mui/material/TextField';
-import moment from 'moment-timezone';
 import MuiPhoneNumber from 'material-ui-phone-number';
 import CircularProgress from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Backdrop from '@mui/material/Backdrop';
 import Countdown$1 from 'react-countdown';
 import _isNumber from 'lodash-es/isNumber';
 import SVG from 'react-inlinesvg';
+import DatePicker from '@mui/lab/DatePicker';
+import AdapterMoment from '@mui/lab/AdapterMoment';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 import Container from '@mui/material/Container';
 import Alert$1 from '@mui/material/Alert';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
@@ -41,6 +43,7 @@ import jwt_decode from 'jwt-decode';
 import _sortBy from 'lodash-es/sortBy';
 import FormControl$1 from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
+import moment from 'moment-timezone';
 import { ThemeProvider as ThemeProvider$1 } from '@mui/private-theming';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -1429,6 +1432,12 @@ 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);
+};
 
 var style = {
   position: 'absolute',
@@ -1857,6 +1866,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);
@@ -2031,7 +2041,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);
@@ -2041,11 +2056,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.createElement(TextField$1, Object.assign({
     id: field.name,
     label: label,
@@ -2062,10 +2072,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.createElement("option", {
       key: option.value,
@@ -2335,6 +2346,8 @@ var TimerWidget = function TimerWidget(_ref) {
   })))) : null;
 };
 
+var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
+
 var SnackbarAlert = function SnackbarAlert(_ref) {
   var isOpen = _ref.isOpen,
       message = _ref.message,
@@ -2371,6 +2384,77 @@ 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__*/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.createElement(ThemeProvider, {
+    theme: useCompact ? compactStyleTheme : {}
+  }, React.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, React.createElement(DatePicker, {
+    value: field.value || '',
+    onChange: function onChange(value) {
+      return form.setFieldValue(field.name, value);
+    },
+    PopperProps: {
+      placement: 'bottom-start'
+    },
+    showDaysOutsideCurrentMonth: true,
+    disableFuture: true,
+    renderInput: function renderInput(params) {
+      return React.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,
@@ -2913,7 +2997,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     open: true
   }, React.createElement(CircularProgress$1, {
     color: "inherit"
-  })), !!expirationTime && enableTimer && React.createElement(TimerWidget, {
+  })), !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
     expires_at: expirationTime,
     onCountdownFinish: onCountdownFinish
   }), React.createElement(Formik, {
@@ -3174,7 +3258,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
           })));
@@ -3785,7 +3869,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     theme: themeMui
   }, React.createElement("div", {
     className: "payment_page"
-  }, enableTimer && React.createElement(TimerWidget, {
+  }, enableTimer && React.createElement(TimerWidget$1, {
     expires_at: _get(reviewData, 'expires_at', 0),
     buyLoading: paymentIsLoading,
     onCountdownFinish: onCountdownFinish
@@ -5152,7 +5236,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
   var bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0;
   var wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent) ? React.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);
@@ -5196,7 +5281,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setShowPromoInput: setShowPromoInput,
     setCode: setCode,
     updateTickets: updateTickets
-  }) : null, wrappedActionsSectionComponent, !wrappedActionsSectionComponent && !eventSaleIsNotStarted && (isTicketOnSale || !(event != null && event.salesEnded)) && !externalUrl && React.createElement(Button$1, {
+  }) : null, wrappedActionsSectionComponent, !wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !(event != null && event.salesEnded) && !externalUrl && React.createElement(Button$1, {
     "aria-hidden": true,
     className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                  " + (!isLoggedIn ? 'on-bottom' : '') + "\n                ",
     onClick: handleGetTicketClick
@@ -6045,75 +6130,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 = useState(null),
+  var _useState = useState(''),
       error = _useState[0],
       setError = _useState[1];
 
+  var _useState2 = useState(''),
+      successMessage = _useState2[0],
+      setSuccessMessage = _useState2[1];
+
   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.createElement("div", {
     className: "ticket-resale-page"
   }, React.createElement("div", {
-    className: "error-block"
-  }, React.createElement("h3", null, error)));
+    className: "" + (successMessage ? 'success-block' : 'error-block')
+  }, React.createElement("h3", null, successMessage ? successMessage : error)));
 };
 
 var style$3 = {
@@ -6148,5 +6268,152 @@ var RedirectModal = function RedirectModal(_ref) {
   }, "OK"))));
 };
 
-export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, RedirectModal, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
+var style$4 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+};
+var RsvpContainer = function RsvpContainer(_ref) {
+  var _ref$showSection = _ref.showSection,
+      showSection = _ref$showSection === void 0 ? false : _ref$showSection,
+      eventId = _ref.eventId;
+  var userDataEncoded = typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : '';
+  var parsedData = JSON.parse(userDataEncoded || '{}');
+
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var _useState2 = useState({
+    isOpen: false,
+    text: ''
+  }),
+      modal = _useState2[0],
+      setModal = _useState2[1];
+
+  var handleModalClose = function handleModalClose() {
+    setModal({
+      isOpen: false,
+      text: ''
+    });
+  };
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var requestData, _yield$sendRSVPInfo, data, _error$response$data;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              requestData = {
+                data: {
+                  email: values.email
+                }
+              };
+              _context.next = 5;
+              return sendRSVPInfo(eventId, requestData);
+
+            case 5:
+              _yield$sendRSVPInfo = _context.sent;
+              data = _yield$sendRSVPInfo.data;
+              setModal({
+                isOpen: true,
+                text: data.message
+              });
+              _context.next = 13;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+
+              if (_context.t0.response.status === 403) {
+                setModal({
+                  isOpen: true,
+                  text: (_error$response$data = _context.t0.response.data) == null ? void 0 : _error$response$data.message
+                });
+              }
+
+            case 13:
+              _context.prev = 13;
+              setLoading(false);
+              return _context.finish(13);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10, 13, 16]]);
+    }));
+
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (!showSection) {
+    return null;
+  }
+
+  return React.createElement(React.Fragment, null, React.createElement(Modal, {
+    open: modal.isOpen,
+    onClose: handleModalClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "rsvp-modal"
+  }, React.createElement(Box, {
+    style: style$4,
+    className: "rsvp-modal-box"
+  }, React.createElement("div", {
+    className: "rsvp-modal-container"
+  }, React.createElement("div", {
+    className: "rsvp-modal-header"
+  }, modal.text), React.createElement("div", {
+    className: "rsvp-modal-button"
+  }, React.createElement("button", {
+    onClick: handleModalClose
+  }, "OK"))))), React.createElement("div", {
+    className: "rsvp-container"
+  }, loading ? React.createElement(Loader, null) : React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "rsvp-header"
+  }, "RSVP"), React.createElement("div", {
+    className: "rsvp-email-container"
+  }, React.createElement(Formik, {
+    initialValues: {
+      email: (parsedData == null ? void 0 : parsedData.email) || ''
+    },
+    onSubmit: handleSubmit,
+    enableReinitialize: true
+  }, React.createElement(Form, null, React.createElement("div", {
+    className: "rsvp-email-input-container"
+  }, React.createElement(Field, {
+    name: "email",
+    label: "EMAIL ADDRESS",
+    type: "email",
+    validate: combineValidators(function (value) {
+      return requiredValidator(value, 'Please enter your Email');
+    }, function (value) {
+      return emailValidator(value);
+    }),
+    component: CustomField
+  })), React.createElement("div", {
+    className: "rsvp-button-container"
+  }, React.createElement(Button, {
+    type: "submit"
+  }, "RSVP"))))))));
+};
+
+export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, RedirectModal, RsvpContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
 //# sourceMappingURL=tf-checkout-react.esm.js.map