tf-checkout-react 1.0.64 → 1.0.68

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FieldInputProps } from 'formik';
+export interface INumberInField {
+    label: string | number | JSX.Element;
+    field: FieldInputProps<any>;
+}
+interface IOtherProps {
+    [key: string]: any;
+}
+export declare const FormikPhoneNumberField: ({ label, field, form: { touched, errors }, setFieldValue, ...rest }: INumberInField & IOtherProps) => JSX.Element;
+export {};

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

@@ -1,24 +1,18 @@
 /// <reference types="react" />
 import './style.css';
-import { IReferralPromotion } from '../../types';
 import { AxiosError } from 'axios';
 export interface IShareButton {
     mainLabel: string;
     subLabel: string;
-    svgSrc: string;
-    containerClassName?: string;
-    containerInnerClassName?: string;
-    svgClassName?: string;
-    svgWidth?: string;
-    svgHeight?: string;
-    svgFill?: string;
+    icon: string;
+    link: string;
 }
 export interface IConfirmationPage {
-    referralPromotions: IReferralPromotion[];
-    shareLink: string;
     isReferralEnabled: boolean;
+    showDefaultShareButtons: boolean;
+    messengerAppId: string;
     shareButtons: IShareButton[];
     onGetConfirmationDataSuccess: (res: any) => void;
     onGetConfirmationDataError: (e: AxiosError) => void;
 }
-export declare const ConfirmationContainer: ({ isReferralEnabled, referralPromotions, shareButtons, shareLink, onGetConfirmationDataSuccess, onGetConfirmationDataError, }: IConfirmationPage) => JSX.Element;
+export declare const ConfirmationContainer: ({ isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, }: IConfirmationPage) => JSX.Element;

package/dist/components/confirmationContainer/social-buttons.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IShareButton } from './index';
+interface SocialButtonsTypes {
+    shareLink: string;
+    name: string;
+    appId: string;
+    showDefaultShareButtons: boolean;
+    shareButtons: IShareButton[];
+}
+declare const SocialButtons: ({ showDefaultShareButtons, shareLink, name, appId, shareButtons }: SocialButtonsTypes) => JSX.Element;
+export default SocialButtons;

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

@@ -10,6 +10,7 @@ interface Props {
     onAuthorizeError?: (e: AxiosError) => void;
     onGetProfileDataSuccess?: (res: any) => void;
     onGetProfileDataError?: (e: AxiosError) => void;
+    modalClassname?: string;
 }
 export declare const LoginModal: FC<Props>;
 export {};

package/dist/normalizers/index.d.ts

@@ -1,3 +1,4 @@
 export declare const currencyNormalizerCreator: (value: string | number, currency: string) => string;
 export declare const createFixedFloatNormalizer: (fixedValue: number) => (value: string | number) => string;
 export declare const getCurrencySymbolByCurrency: (currency?: string) => "£" | "€" | "₹" | "J$" | "NZ$" | "RM" | "Mex$" | "S$" | "A$" | "R" | "Ksh" | "₺" | "CA$" | "฿" | "Kr" | "kr" | "US$";
+export declare const removePlusSign: (string?: string) => string;

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

@@ -25,6 +25,7 @@ var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
 var Select = _interopDefault(require('@mui/material/Select'));
+var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
 var styles = require('@mui/material/styles');
 var Container = _interopDefault(require('@mui/material/Container'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
@@ -32,6 +33,7 @@ var reactStripeJs = require('@stripe/react-stripe-js');
 var stripeJs = require('@stripe/stripe-js');
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var SVG = _interopDefault(require('react-inlinesvg'));
+var reactShare = require('react-share');
 var _some = _interopDefault(require('lodash/some'));
 var _find = _interopDefault(require('lodash/find'));
 var _isEmpty = _interopDefault(require('lodash/isEmpty'));
@@ -923,16 +925,18 @@ var emailValidator = function emailValidator(email) {
   return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
 };
 
-// preview1
+// preview
 var ENV = {
   EVENT_ID: 3483,
-  BASE_URL: 'https://preview1.ttf.fluxtech.me/api',
+  BASE_URL: 'https://preview.ttf.fluxtech.me/api',
   CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
   STRIPE_PUBLISHABLE_KEY: 'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL'
 }; // prod
 
 var isWindowDefined = typeof window !== 'undefined';
+var allowedOrigins = ['http://localhost', 'gtsb.io', 'gatsbyjs.io', 'https://www.houseofx.nyc', 'https://tickets-staging.houseofx.nyc'];
+var origin = isWindowDefined && window.location.origin;
 var ttfHeaders = {
   Accept: 'application/vnd.api+json',
   'Content-Type': 'application/vnd.api+json'
@@ -942,7 +946,9 @@ 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 && !allowedOrigins.some(function (el) {
+  return origin && origin.includes(el);
+})) {
   ttfHeaders['X-Source-Origin'] = 'houseofx.nyc';
 }
 
@@ -988,7 +994,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 && !allowedOrigins.some(function (el) {
+    return origin && origin.includes(el);
+  })) {
     var _updatedHeaders2 = _extends({}, config.headers, {
       'X-Source-Origin': 'houseofx.nyc'
     });
@@ -1141,7 +1149,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 = React.useState(''),
       error = _useState[0],
@@ -1151,7 +1161,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__default.createElement(Box, {
     style: style
   }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
@@ -1850,6 +1861,109 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/formik.connect(ErrorFocusInternal);
 
+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 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__default.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) {
     name = '';
@@ -1877,7 +1991,7 @@ var LogicRunner = function LogicRunner(_ref) {
   React.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) {
@@ -1889,14 +2003,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;
@@ -2279,7 +2393,6 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     theme: themeMui
   }, React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
-      email: emailLogged,
       firstName: firstNameLogged,
       lastName: lastNameLogged,
       country: 1,
@@ -2507,7 +2620,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             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
           })));
@@ -2579,73 +2694,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: {
@@ -3178,31 +3226,108 @@ var PaymentContainer = function PaymentContainer(_ref) {
   })))))));
 };
 
-var defaultSvg = 'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg';
+var SocialButtons = function SocialButtons(_ref) {
+  var showDefaultShareButtons = _ref.showDefaultShareButtons,
+      shareLink = _ref.shareLink,
+      name = _ref.name,
+      appId = _ref.appId,
+      shareButtons = _ref.shareButtons;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "convenient_buttons"
+  }, "or use one of these convenient buttons:"), React__default.createElement("div", {
+    className: "social-media-btns"
+  }, showDefaultShareButtons && React__default.createElement(React__default.Fragment, null, React__default.createElement(reactShare.FacebookShareButton, {
+    url: shareLink,
+    quote: name
+  }, React__default.createElement("div", {
+    className: 'social-media-sharing'
+  }, React__default.createElement("div", {
+    className: 'share-icon'
+  }, React__default.createElement(reactShare.FacebookIcon, {
+    size: 32,
+    round: true
+  })), React__default.createElement("span", {
+    className: "share-text"
+  }, "Share on", React__default.createElement("br", null), " Facebook"))), React__default.createElement(reactShare.TwitterShareButton, {
+    url: shareLink,
+    title: name
+  }, React__default.createElement("div", {
+    className: 'social-media-sharing'
+  }, React__default.createElement("div", {
+    className: 'share-icon'
+  }, React__default.createElement(reactShare.TwitterIcon, {
+    size: 32,
+    round: true
+  })), React__default.createElement("span", {
+    className: "share-text"
+  }, "Tweet to your", React__default.createElement("br", null), " Followers"))), React__default.createElement(reactShare.FacebookMessengerShareButton, {
+    url: shareLink,
+    appId: appId
+  }, React__default.createElement("div", {
+    className: 'social-media-sharing'
+  }, React__default.createElement("div", {
+    className: 'share-icon'
+  }, React__default.createElement(reactShare.FacebookMessengerIcon, {
+    size: 32,
+    round: true
+  })), React__default.createElement("span", {
+    className: "share-text"
+  }, "Message friends on", React__default.createElement("br", null), " Facebook"))), React__default.createElement(reactShare.WhatsappShareButton, {
+    url: shareLink,
+    title: name
+  }, React__default.createElement("div", {
+    className: 'social-media-sharing'
+  }, React__default.createElement("div", {
+    className: 'share-icon'
+  }, React__default.createElement(reactShare.WhatsappIcon, {
+    size: 32,
+    round: true
+  })), React__default.createElement("span", {
+    className: "share-text"
+  }, "Message friends on", React__default.createElement("br", null), " Whatsapp")))), shareButtons.map(function (shareButton, index) {
+    return React__default.createElement("div", {
+      className: 'sharing-btn',
+      key: index
+    }, React__default.createElement("a", {
+      href: shareButton.link,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, React__default.createElement("div", {
+      className: 'social-media-sharing'
+    }, React__default.createElement("div", {
+      className: 'share-icon'
+    }, React__default.createElement(SVG, {
+      width: '32px',
+      height: '32px',
+      fill: '#FFF',
+      src: getImage(shareButton.icon)
+    })), React__default.createElement("span", {
+      className: "share-text"
+    }, shareButton.mainLabel, React__default.createElement("br", null), " ", shareButton.subLabel))));
+  })));
+};
+
 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 = React.useRef(null);
 
-  var _useState = React.useState({}),
+  var _useState = React.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/
 
   React.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) {
@@ -3211,7 +3336,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
               dataEncoded = typeof window !== 'undefined' && window.localStorage.getItem('checkoutData');
 
               if (!dataEncoded) {
-                _context.next = 16;
+                _context.next = 18;
                 break;
               }
 
@@ -3224,27 +3349,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__default.createElement("div", {
     className: "confirmation-page"
-  }, React__default.createElement("p", {
+  }, data && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
     className: "title"
   }, "Your Tickets are Confirmed!"), React__default.createElement("div", {
     className: "share-message-section"
@@ -3269,7 +3427,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, " Invite friends "), "and we'll refund up to", React__default.createElement("span", {
     className: "strong-text"
   }, " 100% "), "of your ticket money, if they buy tickets as well!")), React__default.createElement("img", {
-    src: "https://www.ticketfairy.com/uploaded/thumbnails/db_file_img_123847_400xauto.jpg",
+    src: data.product_image,
     alt: "No Data"
   })), React__default.createElement("div", {
     className: "share_wrapper"
@@ -3282,65 +3440,46 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, "How do you invite your friends?"), React__default.createElement("div", {
     className: "share_buttons"
   }, React__default.createElement("div", {
-    className: "sharing-btn share-by-link"
+    className: "share-by-link"
   }, React__default.createElement("h5", {
-    className: "sharing-btn share-by-link label"
+    className: "share-by-link label"
   }, "Send them this link:"), React__default.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__default.createElement("input", {
     ref: inputRef,
     className: "share-input",
-    value: shareLink,
-    disabled: true
+    value: data.personal_share_link,
+    onChange: onChangeShareLink
   }), React__default.createElement("div", {
-    className: "svg_wrapper"
-  }, React__default.createElement(SVG, {
-    className: "share-icon",
-    width: "25px",
-    height: "25px",
-    fill: "#FFF",
-    src: defaultSvg
-  })))), showShareButtons && React__default.createElement("div", null, React__default.createElement("div", {
-    className: "convenient_buttons sharing-btn"
-  }, "or use one of these convenient buttons:"), React__default.createElement("div", {
-    className: "social-media-btns"
-  }, _map(shareButtons, function (shareButtonItem) {
-    return React__default.createElement("div", {
-      className: "sharing-btn " + shareButtonItem.containerClassName
-    }, React__default.createElement("div", {
-      "aria-hidden": true,
-      className: "share-btn-inner " + shareButtonItem.containerInnerClassName,
-      onClick: function onClick() {}
-    }, React__default.createElement(SVG, {
-      className: shareButtonItem.svgClassName || 'share-icon',
-      width: shareButtonItem.svgWidth || '40px',
-      height: shareButtonItem.svgHeight || '40px',
-      fill: shareButtonItem.svgFill || '#FFF',
-      src: shareButtonItem.svgSrc || defaultSvg
-    }), React__default.createElement("span", {
-      className: "share-text"
-    }, shareButtonItem.mainLabel, React__default.createElement("br", null), " ", shareButtonItem.subLabel)));
-  })))))), showReferralPromotions && React__default.createElement("div", {
+    className: 'share-by-link-copy-icon',
+    onClick: function onClick() {
+      return navigator.clipboard.writeText(_get(inputRef, 'current.value'));
+    }
+  }, React__default.createElement("img", {
+    src: "https://img.icons8.com/office/50/000000/copy.png",
+    alt: 'copy'
+  })))), (showDefaultShareButtons || !!shareButtons.length) && React__default.createElement(SocialButtons, {
+    showDefaultShareButtons: showDefaultShareButtons,
+    name: data.product_name,
+    appId: messengerAppId,
+    shareLink: data.personal_share_link,
+    shareButtons: shareButtons
+  })))), React__default.createElement("div", {
     className: "pricing-section"
   }, React__default.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__default.createElement("div", {
-      key: pricing.id,
-      className: "pricing-section_wrapper " + (isFree && 'free_price')
+      key: index,
+      className: 'pricing-section_wrapper'
     }, React__default.createElement("div", {
       className: "pricing-section_label"
-    }, pricing.label || 'Your ticket is currently', pricing.subLabel && React__default.createElement("div", {
+    }, pricing.label, pricing.subLabel && React__default.createElement("div", {
       className: "pricing-section_sublabel"
-    }, pricing.subLabel || 'Your ticket becomes')), React__default.createElement("div", {
+    }, pricing.subLabel)), React__default.createElement("div", {
       className: "pricing-section_price"
     }, ' ', pricing.price));
-  })))));
+  }))))));
 };
 
 var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount, multiplier) {