tf-checkout-react 1.0.66 → 1.0.70

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

@@ -1,15 +1,15 @@
-import React, { useState, Component, useCallback, useEffect, useRef, Fragment } from 'react';
-import { Formik, Form, Field, connect } from 'formik';
+import React, { Component, useState, useCallback, useEffect, useRef, Fragment } from 'react';
+import { connect, Formik, Form, Field } from 'formik';
 import LoadingButton from '@mui/lab/LoadingButton';
 import _identity from 'lodash-es/identity';
 import _map from 'lodash-es/map';
 import _get from 'lodash-es/get';
 import _includes from 'lodash-es/includes';
 import axios from 'axios';
+import _forEach from 'lodash-es/forEach';
 import { TextField, FormControl, InputLabel, FormHelperText, CircularProgress } from '@mui/material';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
-import _forEach from 'lodash-es/forEach';
 import _flatMapDeep from 'lodash-es/flatMapDeep';
 import _isArray from 'lodash-es/isArray';
 import { nanoid } from 'nanoid';
@@ -18,13 +18,14 @@ 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 MuiPhoneNumber from 'material-ui-phone-number';
 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';
 import { loadStripe } from '@stripe/stripe-js';
 import CircularProgress$1 from '@mui/material/CircularProgress';
-import SVG from 'react-inlinesvg';
+import { FacebookShareButton, FacebookIcon, FacebookMessengerShareButton, FacebookMessengerIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, PinterestShareButton, PinterestIcon, VKShareButton, VKIcon, OKShareButton, OKIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, RedditShareButton, RedditIcon, TumblrShareButton, TumblrIcon, MailruShareButton, MailruIcon, EmailShareButton, EmailIcon, LivejournalShareButton, LivejournalIcon, ViberShareButton, ViberIcon, WorkplaceShareButton, WorkplaceIcon, LineShareButton, LineIcon, PocketShareButton, PocketIcon, InstapaperShareButton, InstapaperIcon, WeiboShareButton, WeiboIcon, HatenaShareButton, HatenaIcon } from 'react-share';
 import _some from 'lodash-es/some';
 import _find from 'lodash-es/find';
 import _isEmpty from 'lodash-es/isEmpty';
@@ -916,17 +917,74 @@ var emailValidator = function emailValidator(email) {
   return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
 };
 
-// preview1
+var CONFIGS = {};
+var setConfigs = function setConfigs(configs) {
+  _forEach(configs, function (value, key) {
+    CONFIGS[key] = value;
+  });
+
+  publicRequest.setBaseUrl(CONFIGS.BASE_URL);
+};
+
+var getQueryVariable = function getQueryVariable(variable) {
+  if (typeof window !== 'undefined') {
+    var query = window.location.search.substring(1);
+    var vars = query.split('&');
+
+    for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split('=');
 
-var ENV = {
-  EVENT_ID: 9766,
-  BASE_URL: 'https://www.ticketfairy.com/api',
-  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
-  CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
-  STRIPE_PUBLISHABLE_KEY: 'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5'
+      if (pair[0] === variable) {
+        return pair[1];
+      }
+    }
+  }
+
+  return false;
 };
 
+var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ErrorFocusInternal, _Component);
+
+  function ErrorFocusInternal() {
+    var _this;
+
+    _this = _Component.apply(this, arguments) || this;
+
+    _this.render = function () {
+      return null;
+    };
+
+    return _this;
+  }
+
+  var _proto = ErrorFocusInternal.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _prevProps$formik = prevProps.formik,
+        isSubmitting = _prevProps$formik.isSubmitting,
+        isValidating = _prevProps$formik.isValidating,
+        errors = _prevProps$formik.errors;
+    var keys = Object.keys(errors);
+
+    if (keys.length > 0 && isSubmitting && !isValidating) {
+      var selector = "[name=\"" + keys[0] + "\"]";
+      var errorElement = document.querySelector(selector);
+
+      if (errorElement) {
+        errorElement.focus();
+      }
+    }
+  };
+
+  return ErrorFocusInternal;
+}(Component);
+
+var ErrorFocus = /*#__PURE__*/connect(ErrorFocusInternal);
+
 var isWindowDefined = typeof window !== 'undefined';
+var discardedOrigins = ['http://localhost', 'gtsb.io', 'gatsbyjs.io'];
+var origin = isWindowDefined && window.location.origin;
 var ttfHeaders = {
   Accept: 'application/vnd.api+json',
   'Content-Type': 'application/vnd.api+json'
@@ -936,12 +994,14 @@ if (isWindowDefined && localStorage.getItem('auth_guest_token')) {
   ttfHeaders['Authorization-Guest'] = /*#__PURE__*/localStorage.getItem('auth_guest_token');
 }
 
-if (isWindowDefined && window.location.origin !== 'https://www.houseofx.nyc' && window.location.origin !== 'https://tickets-staging.houseofx.nyc' && !window.location.origin.includes('http://localhost')) {
+if (isWindowDefined && !discardedOrigins.some(function (el) {
+  return origin && origin.includes(el);
+})) {
   ttfHeaders['X-Source-Origin'] = 'houseofx.nyc';
 }
 
 var publicRequest = /*#__PURE__*/axios.create({
-  baseURL: ENV.BASE_URL ,
+  baseURL: CONFIGS.BASE_URL || "https://www.ticketfairy.com/api",
   headers: ttfHeaders
 });
 publicRequest.interceptors.response.use(function (response) {
@@ -982,7 +1042,9 @@ publicRequest.interceptors.request.use(function (config) {
     config.headers = _updatedHeaders;
   }
 
-  if (isWindowDefined && window.location.origin !== 'https://www.houseofx.nyc' && window.location.origin !== 'https://tickets-staging.houseofx.nyc' && !window.location.origin.includes('http://localhost')) {
+  if (isWindowDefined && !discardedOrigins.some(function (el) {
+    return origin && origin.includes(el);
+  })) {
     var _updatedHeaders2 = _extends({}, config.headers, {
       'X-Source-Origin': 'houseofx.nyc'
     });
@@ -990,6 +1052,10 @@ publicRequest.interceptors.request.use(function (config) {
     config.headers = _updatedHeaders2;
   }
 
+  if (CONFIGS.BASE_URL) {
+    config.baseURL = CONFIGS.BASE_URL + '/api';
+  }
+
   return config;
 });
 
@@ -997,6 +1063,10 @@ publicRequest.setGuestToken = function (token) {
   return publicRequest.defaults.headers.common['Authorization-Guest'] = token;
 };
 
+publicRequest.setBaseUrl = function (baseUrl) {
+  return publicRequest.defaults.baseURL = baseUrl + '/api';
+};
+
 publicRequest.setAccessToken = function (token) {
   return publicRequest.defaults.headers.common.Authorization = token;
 };
@@ -1055,7 +1125,7 @@ var postOnCheckout = function postOnCheckout(data, accessToken) {
   return res;
 };
 var authorize = function authorize(data) {
-  return publicRequest.post("/v1/oauth/authorize-rn?client_id=" + (ENV.CLIENT_ID ), data);
+  return publicRequest.post("/v1/oauth/authorize-rn?client_id=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
 };
 var register = function register(data) {
   return publicRequest.post('/v1/oauth/register-rn', data);
@@ -1135,7 +1205,9 @@ var LoginModal = function LoginModal(_ref) {
       _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
       onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
       _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2;
+      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2,
+      _ref$modalClassname = _ref.modalClassname,
+      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname;
 
   var _useState = useState(''),
       error = _useState[0],
@@ -1145,7 +1217,8 @@ var LoginModal = function LoginModal(_ref) {
     open: true,
     onClose: onClose,
     "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description"
+    "aria-describedby": "modal-modal-description",
+    className: "login-modal " + modalClassname
   }, React.createElement(Box, {
     style: style
   }, React.createElement("div", null, React.createElement(Formik, {
@@ -1175,8 +1248,8 @@ var LoginModal = function LoginModal(_ref) {
                 bodyFormDataToken.append('code', resAutorize.data.data.code);
                 bodyFormDataToken.append('scope', 'profile');
                 bodyFormDataToken.append('grant_type', 'authorization_code');
-                bodyFormDataToken.append('client_id', ENV.CLIENT_ID );
-                bodyFormDataToken.append('client_secret', ENV.CLIENT_SECRET );
+                bodyFormDataToken.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+                bodyFormDataToken.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
                 resAccessToken = null;
                 _context.prev = 15;
                 _context.next = 18;
@@ -1361,8 +1434,8 @@ var RegisterModal = function RegisterModal(_ref) {
                 bodyFormData.append('email', email);
                 bodyFormData.append('password', password);
                 bodyFormData.append('password_confirmation', confirmPassword);
-                bodyFormData.append('client_id', ENV.CLIENT_ID );
-                bodyFormData.append('client_secret', ENV.CLIENT_SECRET );
+                bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+                bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
                 _context.next = 11;
                 return register(bodyFormData);
 
@@ -1560,8 +1633,8 @@ var createRegisterFormData = function createRegisterFormData(values, checkoutBod
   bodyFormData.append('email', values.email);
   bodyFormData.append('password', values.password);
   bodyFormData.append('password_confirmation', values.confirmPassword);
-  bodyFormData.append('client_id', ENV.CLIENT_ID );
-  bodyFormData.append('client_secret', ENV.CLIENT_SECRET );
+  bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+  bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
 
   _forEach(checkoutBody.attributes, function (item, key) {
     bodyFormData.append(key, item);
@@ -1742,23 +1815,6 @@ var CheckboxField = function CheckboxField(_ref) {
   }));
 };
 
-var getQueryVariable = function getQueryVariable(variable) {
-  if (typeof window !== 'undefined') {
-    var query = window.location.search.substring(1);
-    var vars = query.split('&');
-
-    for (var i = 0; i < vars.length; i++) {
-      var pair = vars[i].split('=');
-
-      if (pair[0] === variable) {
-        return pair[1];
-      }
-    }
-  }
-
-  return false;
-};
-
 var SelectField = function SelectField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
@@ -1805,44 +1861,108 @@ var SelectField = function SelectField(_ref) {
   }, error) : null);
 };
 
-var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(ErrorFocusInternal, _Component);
+var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
+  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
+};
+var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
+  return function (value) {
+    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
+  };
+};
+var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
+  if (currency === void 0) {
+    currency = '';
+  }
 
-  function ErrorFocusInternal() {
-    var _this;
+  switch (currency) {
+    case 'GBP':
+      return '£';
 
-    _this = _Component.apply(this, arguments) || this;
+    case 'EUR':
+      return '€';
 
-    _this.render = function () {
-      return null;
-    };
+    case 'INR':
+      return '₹';
 
-    return _this;
-  }
+    case 'JMD':
+      return 'J$';
 
-  var _proto = ErrorFocusInternal.prototype;
+    case 'NZD':
+      return 'NZ$';
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _prevProps$formik = prevProps.formik,
-        isSubmitting = _prevProps$formik.isSubmitting,
-        isValidating = _prevProps$formik.isValidating,
-        errors = _prevProps$formik.errors;
-    var keys = Object.keys(errors);
+    case 'MYR':
+      return 'RM';
 
-    if (keys.length > 0 && isSubmitting && !isValidating) {
-      var selector = "[name=\"" + keys[0] + "\"]";
-      var errorElement = document.querySelector(selector);
+    case 'MXN':
+      return 'Mex$';
 
-      if (errorElement) {
-        errorElement.focus();
-      }
-    }
-  };
+    case 'SGD':
+      return 'S$';
 
-  return ErrorFocusInternal;
-}(Component);
+    case 'AUD':
+      return 'A$';
 
-var ErrorFocus = /*#__PURE__*/connect(ErrorFocusInternal);
+    case 'ZAR':
+      return 'R';
+
+    case 'ke':
+      return 'Ksh';
+
+    case 'TRY':
+      return '₺';
+
+    case 'CAD':
+      return 'CA$';
+
+    case 'THB':
+      return '฿';
+
+    case 'ISK':
+      return 'Kr';
+
+    case 'SEK':
+      return 'kr';
+
+    default:
+      return 'US$';
+  }
+};
+var removePlusSign = function removePlusSign(string) {
+  if (string === void 0) {
+    string = '';
+  }
+
+  return string.replace('+', '');
+};
+
+var _excluded$2 = ["label", "field", "form", "setFieldValue"];
+var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      setFieldValue = _ref.setFieldValue,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  var error = _get(errors, field.name);
+
+  var isTouched = Boolean(_get(touched, field.name));
+  return React.createElement(MuiPhoneNumber, Object.assign({
+    name: 'phone',
+    onChange: function onChange(e) {
+      return setFieldValue("phone", removePlusSign(e));
+    },
+    variant: "outlined",
+    defaultCountry: 'us',
+    disableDropdown: true,
+    label: label,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
+    fullWidth: true,
+    autoFormat: false
+  }, rest));
+};
 
 var getImage = function getImage(name) {
   if (name === void 0) {
@@ -1876,7 +1996,7 @@ var LogicRunner = function LogicRunner(_ref) {
   useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var _mappedStates$0$label, _mappedStates$, res, mappedStates;
+        var _mappedStates$0$value, _mappedStates$, res, mappedStates;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -1888,14 +2008,14 @@ var LogicRunner = function LogicRunner(_ref) {
 
               case 3:
                 res = _context.sent;
-                mappedStates = _map(_get(res, 'data.data'), function (item) {
+                mappedStates = _map(_get(res, 'data.data'), function (item, key) {
                   return {
                     label: item,
-                    value: item
+                    value: key
                   };
                 });
                 setStates(mappedStates);
-                setFieldValue('state', (_mappedStates$0$label = (_mappedStates$ = mappedStates[0]) == null ? void 0 : _mappedStates$.label) != null ? _mappedStates$0$label : '');
+                setFieldValue('state', (_mappedStates$0$value = (_mappedStates$ = mappedStates[0]) == null ? void 0 : _mappedStates$.value) != null ? _mappedStates$0$value : '');
                 onGetStatesSuccess(res.data);
                 _context.next = 13;
                 break;
@@ -2496,16 +2616,16 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
         }), function (element) {
           return ['password', 'confirmPassword', 'password-info'].includes(element.name) && isLoggedIn ? null : React.createElement(React.Fragment, {
             key: element.uniqueId
-          }, element.name === 'email' ? React.createElement("div", {
-            className: "email-checking"
-          }, "IMPORTANT: Please double check that your\n                                        email address is correct. It's where we\n                                        send your confirmation and e-tickets to!") : null, React.createElement("div", {
+          }, React.createElement("div", {
             className: element.className
           }, element.component ? element.component : React.createElement(Field, {
             name: element.name,
             label: element.label,
             type: element.type,
             validate: getValidateFunctions(element, states),
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : CustomField,
+            setFieldValue: props.setFieldValue,
+            onBlur: props.handleBlur,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : CustomField,
             selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
             theme: theme
           })));
@@ -2577,73 +2697,6 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   }));
 };
 
-var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
-  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
-};
-var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
-  return function (value) {
-    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
-  };
-};
-var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
-  if (currency === void 0) {
-    currency = '';
-  }
-
-  switch (currency) {
-    case 'GBP':
-      return '£';
-
-    case 'EUR':
-      return '€';
-
-    case 'INR':
-      return '₹';
-
-    case 'JMD':
-      return 'J$';
-
-    case 'NZD':
-      return 'NZ$';
-
-    case 'MYR':
-      return 'RM';
-
-    case 'MXN':
-      return 'Mex$';
-
-    case 'SGD':
-      return 'S$';
-
-    case 'AUD':
-      return 'A$';
-
-    case 'ZAR':
-      return 'R';
-
-    case 'ke':
-      return 'Ksh';
-
-    case 'TRY':
-      return '₺';
-
-    case 'CAD':
-      return 'CA$';
-
-    case 'THB':
-      return '฿';
-
-    case 'ISK':
-      return 'Kr';
-
-    case 'SEK':
-      return 'kr';
-
-    default:
-      return 'US$';
-  }
-};
-
 var options = {
   style: {
     base: {
@@ -2840,9 +2893,11 @@ var CheckoutForm = function CheckoutForm(_ref) {
         return (item == null ? void 0 : item.checked) === true;
       });
       setAllowSubmit(allChecked);
+    } else {
+      setAllowSubmit(true);
     }
   }, [checkboxes]);
-  var buttonIsDiabled = !stripe || !!error || isLoading;
+  var buttonIsDiabled = !stripe || !!error || isLoading || !allowSubmit;
   return React.createElement("div", {
     className: "stripe_payment_container"
   }, !!stripeError && React.createElement("div", {
@@ -2896,16 +2951,15 @@ var CheckoutForm = function CheckoutForm(_ref) {
       checked: checkbox.checked
     })));
   }), React.createElement("div", {
-    className: "payment_button " + (buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : '')
+    className: "payment_button " + (buttonIsDiabled ? 'disabled-payment-button' : '')
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
   }, isLoading ? React.createElement(CircularProgress$1, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
 
-var testId = ENV.STRIPE_PUBLISHABLE_KEY ;
-var stripePromise = /*#__PURE__*/loadStripe(testId // 'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5'
-);
+var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT';
+var stripePromise = /*#__PURE__*/loadStripe(publishableKey);
 var initialOrderValues = {
   product_name: '',
   ticketType: '',
@@ -3176,31 +3230,187 @@ var PaymentContainer = function PaymentContainer(_ref) {
   })))))));
 };
 
-var defaultSvg = 'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg';
+var config = {
+  facebook: {
+    component: FacebookShareButton,
+    icon: FacebookIcon
+  },
+  messenger: {
+    component: FacebookMessengerShareButton,
+    icon: FacebookMessengerIcon
+  },
+  twitter: {
+    component: TwitterShareButton,
+    icon: TwitterIcon
+  },
+  linkedin: {
+    component: LinkedinShareButton,
+    icon: LinkedinIcon
+  },
+  pinterest: {
+    component: PinterestShareButton,
+    icon: PinterestIcon
+  },
+  vk: {
+    component: VKShareButton,
+    icon: VKIcon
+  },
+  ok: {
+    component: OKShareButton,
+    icon: OKIcon
+  },
+  telegram: {
+    component: TelegramShareButton,
+    icon: TelegramIcon
+  },
+  whatsapp: {
+    component: WhatsappShareButton,
+    icon: WhatsappIcon
+  },
+  reddit: {
+    component: RedditShareButton,
+    icon: RedditIcon
+  },
+  tumblr: {
+    component: TumblrShareButton,
+    icon: TumblrIcon
+  },
+  mailru: {
+    component: MailruShareButton,
+    icon: MailruIcon
+  },
+  email: {
+    component: EmailShareButton,
+    icon: EmailIcon
+  },
+  livejournal: {
+    component: LivejournalShareButton,
+    icon: LivejournalIcon
+  },
+  viber: {
+    component: ViberShareButton,
+    icon: ViberIcon
+  },
+  workplace: {
+    component: WorkplaceShareButton,
+    icon: WorkplaceIcon
+  },
+  line: {
+    component: LineShareButton,
+    icon: LineIcon
+  },
+  pocket: {
+    component: PocketShareButton,
+    icon: PocketIcon
+  },
+  instapaper: {
+    component: InstapaperShareButton,
+    icon: InstapaperIcon
+  },
+  weibo: {
+    component: WeiboShareButton,
+    icon: WeiboIcon
+  },
+  hatena: {
+    component: HatenaShareButton,
+    icon: HatenaIcon
+  }
+};
+function config$1 (key) {
+  return config[key];
+}
+
+var SocialComponent = function SocialComponent(_ref) {
+  var _config, _config2;
+
+  var mainLabel = _ref.mainLabel,
+      subLabel = _ref.subLabel,
+      platform = _ref.platform,
+      shareData = _ref.shareData;
+  var Component = (_config = config$1(platform)) == null ? void 0 : _config.component;
+  var Icon = (_config2 = config$1(platform)) == null ? void 0 : _config2.icon;
+  return React.createElement(React.Fragment, null, Component && React.createElement(Component, Object.assign({}, shareData), React.createElement("div", {
+    className: 'social-media-sharing'
+  }, React.createElement("div", {
+    className: 'share-icon'
+  }, React.createElement(Icon, {
+    size: 32,
+    round: true
+  })), React.createElement("span", {
+    className: "share-text"
+  }, mainLabel, React.createElement("br", null), " ", subLabel))));
+};
+
+var SocialButtons = function SocialButtons(_ref2) {
+  var showDefaultShareButtons = _ref2.showDefaultShareButtons,
+      shareLink = _ref2.shareLink,
+      name = _ref2.name,
+      appId = _ref2.appId,
+      shareButtons = _ref2.shareButtons;
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "convenient_buttons"
+  }, "or use one of these convenient buttons:"), React.createElement("div", {
+    className: "social-media-btns"
+  }, showDefaultShareButtons && React.createElement(React.Fragment, null, React.createElement(SocialComponent, {
+    mainLabel: 'Share on',
+    subLabel: 'Facebook',
+    platform: 'facebook',
+    shareData: {
+      quote: name,
+      url: shareLink
+    }
+  }), React.createElement(SocialComponent, {
+    mainLabel: 'Tweet to your',
+    subLabel: 'Followers',
+    platform: 'twitter',
+    shareData: {
+      title: name,
+      url: shareLink
+    }
+  }), React.createElement(SocialComponent, {
+    mainLabel: 'Message friends on',
+    subLabel: 'Facebook',
+    platform: 'messenger',
+    shareData: {
+      appId: appId,
+      url: shareLink
+    }
+  }), React.createElement(SocialComponent, {
+    mainLabel: 'Message friends on',
+    subLabel: 'Whatsapp',
+    platform: 'whatsapp',
+    shareData: {
+      title: name,
+      url: shareLink
+    }
+  })), shareButtons.map(function (shareButton, index) {
+    return React.createElement(SocialComponent, Object.assign({
+      key: index
+    }, shareButton));
+  })));
+};
+
 var ConfirmationContainer = function ConfirmationContainer(_ref) {
   var isReferralEnabled = _ref.isReferralEnabled,
-      _ref$referralPromotio = _ref.referralPromotions,
-      referralPromotions = _ref$referralPromotio === void 0 ? [] : _ref$referralPromotio,
+      showDefaultShareButtons = _ref.showDefaultShareButtons,
+      _ref$messengerAppId = _ref.messengerAppId,
+      messengerAppId = _ref$messengerAppId === void 0 ? '' : _ref$messengerAppId,
       _ref$shareButtons = _ref.shareButtons,
       shareButtons = _ref$shareButtons === void 0 ? [] : _ref$shareButtons,
-      _ref$shareLink = _ref.shareLink,
-      shareLink = _ref$shareLink === void 0 ? '' : _ref$shareLink,
       _ref$onGetConfirmatio = _ref.onGetConfirmationDataSuccess,
       onGetConfirmationDataSuccess = _ref$onGetConfirmatio === void 0 ? function () {} : _ref$onGetConfirmatio,
       _ref$onGetConfirmatio2 = _ref.onGetConfirmationDataError,
       onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2;
   var inputRef = useRef(null);
 
-  var _useState = useState({}),
+  var _useState = useState(null),
       data = _useState[0],
-      setData = _useState[1];
+      setData = _useState[1]; // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
 
-  var showShareButtons = Boolean(shareButtons.length);
-  var showReferralPromotions = Boolean(referralPromotions.length); // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
 
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var dataEncoded, dataDecoded, hash, response, _data;
+      var dataEncoded, dataDecoded, hash, _data$product_price, response, _data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -3209,7 +3419,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
               dataEncoded = typeof window !== 'undefined' && window.localStorage.getItem('checkoutData');
 
               if (!dataEncoded) {
-                _context.next = 16;
+                _context.next = 18;
                 break;
               }
 
@@ -3222,27 +3432,60 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
             case 7:
               response = _context.sent;
               _data = _get(response, 'data.data.attributes');
+              _data.personal_share_sales = _data.personal_share_sales.map(function (d) {
+                var salesData = {
+                  label: "If your friends buy " + d.sales + " tickets",
+                  price: ''
+                };
+
+                if (d.price === 0) {
+                  salesData.subLabel = 'Your ticket becomes';
+                  salesData.price = 'FREE!';
+                } else {
+                  var _d$price;
+
+                  salesData.subLabel = 'Your ticket goes down to';
+                  salesData.price = _data.currency.symbol + ((_d$price = d.price) == null ? void 0 : _d$price.toFixed(2));
+                }
+
+                return salesData;
+              });
+
+              _data.personal_share_sales.unshift({
+                label: 'Your ticket is currently',
+                price: _data.currency.symbol + ((_data$product_price = _data.product_price) == null ? void 0 : _data$product_price.toFixed(2))
+              });
+
               setData(_data);
               onGetConfirmationDataSuccess(response.data);
-              _context.next = 16;
+              _context.next = 18;
               break;
 
-            case 13:
-              _context.prev = 13;
+            case 15:
+              _context.prev = 15;
               _context.t0 = _context["catch"](4);
               onGetConfirmationDataError(_context.t0.response);
 
-            case 16:
+            case 18:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 13]]);
+      }, _callee, null, [[4, 15]]);
     }))();
   }, []);
+
+  var onChangeShareLink = function onChangeShareLink(e) {
+    var newData = _extends({}, data, {
+      personal_share_link: e.target.value
+    });
+
+    setData(newData);
+  };
+
   return React.createElement("div", {
     className: "confirmation-page"
-  }, React.createElement("p", {
+  }, data && React.createElement(React.Fragment, null, React.createElement("p", {
     className: "title"
   }, "Your Tickets are Confirmed!"), React.createElement("div", {
     className: "share-message-section"
@@ -3267,7 +3510,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, " Invite friends "), "and we'll refund up to", React.createElement("span", {
     className: "strong-text"
   }, " 100% "), "of your ticket money, if they buy tickets as well!")), React.createElement("img", {
-    src: "https://www.ticketfairy.com/uploaded/thumbnails/db_file_img_123847_400xauto.jpg",
+    src: data.product_image,
     alt: "No Data"
   })), React.createElement("div", {
     className: "share_wrapper"
@@ -3280,65 +3523,46 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, "How do you invite your friends?"), React.createElement("div", {
     className: "share_buttons"
   }, React.createElement("div", {
-    className: "sharing-btn share-by-link"
+    className: "share-by-link"
   }, React.createElement("h5", {
-    className: "sharing-btn share-by-link label"
+    className: "share-by-link label"
   }, "Send them this link:"), React.createElement("div", {
-    "aria-hidden": true,
-    className: "share-btn-inner share-by-link-copy",
-    onClick: function onClick() {
-      return navigator.clipboard.writeText(_get(inputRef, 'current.value'));
-    }
+    className: "share-btn-inner"
   }, React.createElement("input", {
     ref: inputRef,
     className: "share-input",
-    value: shareLink,
-    disabled: true
+    value: data.personal_share_link,
+    onChange: onChangeShareLink
   }), React.createElement("div", {
-    className: "svg_wrapper"
-  }, React.createElement(SVG, {
-    className: "share-icon",
-    width: "25px",
-    height: "25px",
-    fill: "#FFF",
-    src: defaultSvg
-  })))), showShareButtons && React.createElement("div", null, React.createElement("div", {
-    className: "convenient_buttons sharing-btn"
-  }, "or use one of these convenient buttons:"), React.createElement("div", {
-    className: "social-media-btns"
-  }, _map(shareButtons, function (shareButtonItem) {
-    return React.createElement("div", {
-      className: "sharing-btn " + shareButtonItem.containerClassName
-    }, React.createElement("div", {
-      "aria-hidden": true,
-      className: "share-btn-inner " + shareButtonItem.containerInnerClassName,
-      onClick: function onClick() {}
-    }, React.createElement(SVG, {
-      className: shareButtonItem.svgClassName || 'share-icon',
-      width: shareButtonItem.svgWidth || '40px',
-      height: shareButtonItem.svgHeight || '40px',
-      fill: shareButtonItem.svgFill || '#FFF',
-      src: shareButtonItem.svgSrc || defaultSvg
-    }), React.createElement("span", {
-      className: "share-text"
-    }, shareButtonItem.mainLabel, React.createElement("br", null), " ", shareButtonItem.subLabel)));
-  })))))), showReferralPromotions && React.createElement("div", {
+    className: 'share-by-link-copy-icon',
+    onClick: function onClick() {
+      return navigator.clipboard.writeText(_get(inputRef, 'current.value'));
+    }
+  }, React.createElement("img", {
+    src: "https://img.icons8.com/office/50/000000/copy.png",
+    alt: 'copy'
+  })))), (showDefaultShareButtons || !!shareButtons.length) && React.createElement(SocialButtons, {
+    showDefaultShareButtons: showDefaultShareButtons,
+    name: data.product_name,
+    appId: messengerAppId,
+    shareLink: data.personal_share_link,
+    shareButtons: shareButtons
+  })))), React.createElement("div", {
     className: "pricing-section"
   }, React.createElement("div", {
     className: "invitation_title"
-  }, "How much cheaper?"), _map(referralPromotions, function (pricing) {
-    var isFree = pricing.price === 'FREE';
+  }, "How much cheaper?"), _map(data.personal_share_sales, function (pricing, index) {
     return React.createElement("div", {
-      key: pricing.id,
-      className: "pricing-section_wrapper " + (isFree && 'free_price')
+      key: index,
+      className: 'pricing-section_wrapper'
     }, React.createElement("div", {
       className: "pricing-section_label"
-    }, pricing.label || 'Your ticket is currently', pricing.subLabel && React.createElement("div", {
+    }, pricing.label, pricing.subLabel && React.createElement("div", {
       className: "pricing-section_sublabel"
-    }, pricing.subLabel || 'Your ticket becomes')), React.createElement("div", {
+    }, pricing.subLabel)), React.createElement("div", {
       className: "pricing-section_price"
     }, ' ', pricing.price));
-  })))));
+  }))))));
 };
 
 var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount, multiplier) {
@@ -3492,7 +3716,8 @@ var generateQuantity = function generateQuantity(n) {
 
 var WaitingList = function WaitingList(_ref) {
   var _ref$tickets = _ref.tickets,
-      tickets = _ref$tickets === void 0 ? {} : _ref$tickets;
+      tickets = _ref$tickets === void 0 ? {} : _ref$tickets,
+      eventId = _ref.eventId;
 
   var _useState = useState(false),
       showSuccessMessage = _useState[0],
@@ -3512,7 +3737,7 @@ var WaitingList = function WaitingList(_ref) {
 
   var handleSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
-      var id, requestData, _yield$addToWaitingLi, data;
+      var requestData, _yield$addToWaitingLi, data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -3520,16 +3745,15 @@ var WaitingList = function WaitingList(_ref) {
             case 0:
               _context.prev = 0;
               setLoading(true);
-              id = ENV.EVENT_ID;
               requestData = {
                 data: {
                   attributes: values
                 }
               };
-              _context.next = 6;
-              return addToWaitingList(id, requestData);
+              _context.next = 5;
+              return addToWaitingList(eventId, requestData);
 
-            case 6:
+            case 5:
               _yield$addToWaitingLi = _context.sent;
               data = _yield$addToWaitingLi.data;
 
@@ -3537,24 +3761,24 @@ var WaitingList = function WaitingList(_ref) {
                 setShowSuccessMessage(true);
               }
 
-              _context.next = 13;
+              _context.next = 12;
               break;
 
-            case 11:
-              _context.prev = 11;
+            case 10:
+              _context.prev = 10;
               _context.t0 = _context["catch"](0);
 
-            case 13:
-              _context.prev = 13;
+            case 12:
+              _context.prev = 12;
               setLoading(false);
-              return _context.finish(13);
+              return _context.finish(12);
 
-            case 16:
+            case 15:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 11, 13, 16]]);
+      }, _callee, null, [[0, 10, 12, 15]]);
     }));
 
     return function handleSubmit(_x) {
@@ -3866,7 +4090,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     className: "get-tickets-page " + theme,
     style: contentStyle
   }, isLoading ? React.createElement(Loader, null) : React.createElement(React.Fragment, null, showWaitingList ? React.createElement(WaitingList, {
-    tickets: tickets
+    tickets: tickets,
+    eventId: eventId
   }) : React.createElement("div", null, React.createElement(TicketsSection, {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
@@ -4255,5 +4480,5 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }, "Return to Order History"))));
 };
 
-export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator };
+export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
 //# sourceMappingURL=tf-checkout-react.esm.js.map