tf-checkout-react 1.0.63 → 1.0.64

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

@@ -1,4 +1,4 @@
-import React, { useState, Component, useEffect, useRef, Fragment } from 'react';
+import React, { useState, Component, useCallback, useEffect, useRef, Fragment } from 'react';
 import { Formik, Form, Field, connect } from 'formik';
 import LoadingButton from '@mui/lab/LoadingButton';
 import _identity from 'lodash-es/identity';
@@ -14,11 +14,11 @@ import _flatMapDeep from 'lodash-es/flatMapDeep';
 import _isArray from 'lodash-es/isArray';
 import { nanoid } from 'nanoid';
 import TextField$1 from '@mui/material/TextField';
-import { makeStyles } from '@mui/styles';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import Select from '@mui/material/Select';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import Alert from '@mui/material/Alert';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
@@ -917,14 +917,13 @@ var emailValidator = function emailValidator(email) {
 };
 
 // preview1
-
 var ENV = {
-  EVENT_ID: 9766,
-  BASE_URL: 'https://www.ticketfairy.com/api',
-  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
+  EVENT_ID: 3483,
+  BASE_URL: 'https://preview1.ttf.fluxtech.me/api',
+  CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
-  STRIPE_PUBLISHABLE_KEY: 'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5'
-};
+  STRIPE_PUBLISHABLE_KEY: 'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL'
+}; // prod
 
 var isWindowDefined = typeof window !== 'undefined';
 var ttfHeaders = {
@@ -1080,6 +1079,13 @@ var getProfileData = function getProfileData(accessToken) {
     headers: _extends({}, ttfHeaders, {
       Authorization: "Bearer " + accessToken
     })
+  })["catch"](function (e) {
+    if (isWindowDefined) {
+      var event = new window.CustomEvent('auth_error', e);
+      window.document.dispatchEvent(event);
+    }
+
+    return e;
   });
 };
 var getCountries = function getCountries() {
@@ -1682,13 +1688,6 @@ var assingUniqueIds = function assingUniqueIds(data) {
   });
 };
 
-var useStyles = /*#__PURE__*/makeStyles({
-  input: {
-    '&::placeholder': {
-      color: 'gray'
-    }
-  }
-});
 var CustomField = function CustomField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
@@ -1706,7 +1705,6 @@ var CustomField = function CustomField(_ref) {
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
-  var classes = useStyles();
   return React.createElement(TextField$1, Object.assign({
     id: field.name,
     label: label,
@@ -1715,11 +1713,6 @@ var CustomField = function CustomField(_ref) {
     fullWidth: true,
     error: !!error && isTouched,
     helperText: isTouched && error,
-    InputProps: {
-      classes: {
-        input: classes.input
-      }
-    },
     SelectProps: {
       "native": true,
       className: theme,
@@ -1765,13 +1758,6 @@ var getQueryVariable = function getQueryVariable(variable) {
   return false;
 };
 
-var useStyles$1 = /*#__PURE__*/makeStyles({
-  input: {
-    '&::placeholder': {
-      color: 'gray'
-    }
-  }
-});
 var SelectField = function SelectField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
@@ -1787,7 +1773,6 @@ var SelectField = function SelectField(_ref) {
 
   var error = _get(errors, field.name);
 
-  var classes = useStyles$1();
   return React.createElement(FormControl, {
     fullWidth: true
   }, React.createElement(InputLabel, {
@@ -1801,10 +1786,7 @@ var SelectField = function SelectField(_ref) {
     fullWidth: true,
     error: !!error && isTouched,
     inputProps: {
-      id: field.name,
-      classes: {
-        input: classes.input
-      }
+      id: field.name
     },
     "native": true,
     className: theme,
@@ -2025,7 +2007,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$onLoginSuccess = _ref3.onLoginSuccess,
       onLoginSuccess = _ref3$onLoginSuccess === void 0 ? function () {} : _ref3$onLoginSuccess,
       _ref3$isLoggedIn = _ref3.isLoggedIn,
-      pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn;
+      pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
+      fontFamily = _ref3.fontFamily;
+  var themeMui = createTheme({
+    typography: {
+      allVariants: {
+        fontFamily: fontFamily
+      }
+    }
+  });
   var isWindowDefined = typeof window !== 'undefined';
   var userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
@@ -2117,6 +2107,15 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     return qty;
   };
 
+  var handleAuthErrors = useCallback(function () {
+    setIsLoggedIn(false);
+  }, []);
+  useEffect(function () {
+    isWindowDefined && window.document.addEventListener("auth_error", handleAuthErrors);
+    return function () {
+      isWindowDefined && window.document.removeEventListener("auth_error", handleAuthErrors);
+    };
+  }, [handleAuthErrors]);
   useEffect(function () {
     if ((pIsLoggedIn || access_token) && !isLoggedIn) {
       setIsLoggedIn(true);
@@ -2274,7 +2273,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   useEffect(function () {
     fetchUserData(access_token);
   }, [access_token]);
-  return React.createElement(React.Fragment, null, React.createElement(Formik, {
+  return React.createElement(ThemeProvider, {
+    theme: themeMui
+  }, React.createElement(Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
       email: emailLogged,
       firstName: firstNameLogged,
@@ -2939,7 +2940,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
       _ref$onPaymentError = _ref.onPaymentError,
       onPaymentError = _ref$onPaymentError === void 0 ? function () {} : _ref$onPaymentError,
       _ref$stripeCardOption = _ref.stripeCardOptions,
-      stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption;
+      stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
+      fontFamily = _ref.fontFamily;
 
   var _useState = useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3114,7 +3116,16 @@ var PaymentContainer = function PaymentContainer(_ref) {
     };
   }();
 
-  return React.createElement("div", {
+  var themeMui = createTheme({
+    typography: {
+      allVariants: {
+        fontFamily: fontFamily
+      }
+    }
+  });
+  return React.createElement(ThemeProvider, {
+    theme: themeMui
+  }, React.createElement("div", {
     className: "payment_page"
   }, error && React.createElement(Alert, {
     severity: "error",
@@ -3162,7 +3173,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     },
     conditions: conditions,
     stripeCardOptions: stripeCardOptions
-  }))))));
+  })))))));
 };
 
 var defaultSvg = 'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg';
@@ -3373,6 +3384,9 @@ var TicketRow = function TicketRow(_ref) {
   }, React.createElement(FormControl$1, {
     fullWidth: true
   }, React.createElement(Select, {
+    sx: {
+      borderRadius: 0
+    },
     value: selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0,
     onChange: handleTicketSelect,
     displayEmpty: true,
@@ -3967,7 +3981,9 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
       _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
       onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
       _ref$onGetOrdersError = _ref.onGetOrdersError,
-      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError;
+      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'dark' : _ref$theme;
 
   var _useState = useState(null),
       data = _useState[0],
@@ -4050,9 +4066,9 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
   };
 
   return React.createElement("div", {
-    className: 'my-ticket'
+    className: "my-ticket " + theme
   }, loading && React.createElement("div", {
-    className: 'loading'
+    className: "loading"
   }, React.createElement(CircularProgress$1, null)), data && React.createElement(React.Fragment, null, React.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
@@ -4071,7 +4087,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     }
   }), React.createElement(TableContainer, {
     component: Paper,
-    className: 'my-ticket-table'
+    className: "my-ticket-table"
   }, React.createElement(Table, {
     "aria-label": "collapsible table"
   }, React.createElement(TableHead, null, React.createElement(TableRow, null, tableConfig().header.map(function (column, index) {
@@ -4140,7 +4156,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       _ref$onGetOrdersError = _ref.onGetOrdersError,
       onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError;
 
-  var _useState = useState(null),
+  var _useState = useState({}),
       data = _useState[0],
       setData = _useState[1];
 
@@ -4150,7 +4166,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
 
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var orderId, response, _data;
+      var orderId, params, response, _data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -4158,50 +4174,58 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
             case 0:
               _context.prev = 0;
               setLoading(true);
-              orderId = window.location.href.split('/').slice(-1)[0];
-              _context.next = 5;
+              orderId = '';
+
+              if (typeof window !== 'undefined') {
+                params = new URL("" + window.location).searchParams;
+                orderId = params.get('o') || '';
+              }
+
+              _context.next = 6;
               return getOrderDetails(orderId);
 
-            case 5:
+            case 6:
               response = _context.sent;
               onGetOrdersSuccess(response);
               _data = _get(response, 'data.data.attributes');
               setData(_data);
-              _context.next = 14;
+              _context.next = 15;
               break;
 
-            case 11:
-              _context.prev = 11;
+            case 12:
+              _context.prev = 12;
               _context.t0 = _context["catch"](0);
               onGetOrdersError(_context.t0);
 
-            case 14:
-              _context.prev = 14;
+            case 15:
+              _context.prev = 15;
               setLoading(false);
-              return _context.finish(14);
+              return _context.finish(15);
 
-            case 17:
+            case 18:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 11, 14, 17]]);
+      }, _callee, null, [[0, 12, 15, 18]]);
     }))();
   }, []);
   return React.createElement("div", {
     className: "order-details"
   }, loading ? React.createElement("div", {
-    className: 'loading'
+    className: "loading"
   }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
-    className: 'layout-title'
+    className: "layout-title"
   }, "Order Details"), React.createElement("div", {
-    className: 'order-summary-box'
+    className: "order-summary-box"
   }, React.createElement("h4", {
-    className: 'sub-title'
-  }, "Order Summary"), React.createElement("div", null, React.createElement("b", null, "Your personal share link for this event is:", " "), React.createElement("a", {
+    className: "sub-title"
+  }, "Order Summary"), React.createElement("div", {
+    className: "personal-link"
+  }, React.createElement("b", null, "Your personal share link for this event is: "), React.createElement("a", {
     href: data == null ? void 0 : data.personal_share_link,
-    target: '_blank',
-    rel: 'noreferrer'
+    target: "_blank",
+    rel: "noreferrer"
   }, data == null ? void 0 : data.personal_share_link)), React.createElement(TableContainer, {
     component: Paper
   }, React.createElement(Table, {
@@ -4215,10 +4239,20 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
       key: index
     }, React.createElement(TableCell, null, React.createElement("b", null, "Add-On: "), ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
   }), React.createElement(TableRow, {
-    className: 'total-row'
+    className: "total-row"
   }, React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null, "Total"), React.createElement(TableCell, null, getTotal(data))))))), React.createElement(TicketsTable, {
     tickets: data.tickets
-  })));
+  }), React.createElement("div", {
+    className: "return-button-container"
+  }, React.createElement("button", {
+    type: "button",
+    className: "return-button",
+    onClick: function onClick() {
+      if (typeof window !== 'undefined') {
+        window.location.assign('/orders');
+      }
+    }
+  }, "Return to Order History"))));
 };
 
 export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator };