tf-checkout-react 1.2.7 → 1.2.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.7",
+  "version": "1.2.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/index.ts

@@ -4,7 +4,7 @@ import _get from 'lodash/get'
 import { CONFIGS, getCookieByName, setCustomCookie } from '../utils'
 
 const isWindowDefined = typeof window !== 'undefined'
-// const isDocumentDefined = typeof document !== 'undefined'
+const isDocumentDefined = typeof document !== 'undefined'
 
 const ttfHeaders: { [key: string]: any } = {
   Accept: 'application/vnd.api+json',
@@ -172,15 +172,14 @@ export function getEvent(id: string | number) {
       referralIdlocal = referral_key.split('.')[1]
     }
     referralValue = referralId || referralIdlocal
-    console.log(referralValue)
   }
 
   const response = publicRequest
     .get(`v1/event/${id}`, {
       headers: {
         ...ttfHeaders,
-        // 'Referer-Url': isDocumentDefined ? document.referrer : '',
-        // 'Referrer-Id': isWindowDefined ? referralValue : '',
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+        'Referrer-Id': isWindowDefined ? referralValue : '',
       },
     })
     .catch(error => {
@@ -212,7 +211,7 @@ export const addToCart = (id: string | number, data: any) => {
     { data },
     {
       headers: {
-        // 'Referer-Url': isDocumentDefined ? document.referrer : '',
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
       },
     }
   )
@@ -254,7 +253,7 @@ export const getPaymentData = (hash: string) => {
   const response = publicRequest
     .get(`v1/order/${hash}/review/`, {
       headers: {
-        // 'Referer-Url': isDocumentDefined ? document.referrer : '',
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
       },
     })
     .catch(error => {
@@ -278,7 +277,7 @@ export const handlePaymentSuccess = (orderHash: string) => {
   const res = publicRequest
     .post(`v1/order/${orderHash}/success`, undefined, {
       headers: {
-        // 'Referer-Url': isDocumentDefined ? document.referrer : '',
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
       },
     })
     .catch(error => {
@@ -291,7 +290,7 @@ export const handleFreeSuccess = (orderHash: string) => {
   const res = publicRequest
     .post(`v1/order/${orderHash}/complete_free_registration`, undefined, {
       headers: {
-        // 'Referer-Url': isDocumentDefined ? document.referrer : '',
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
       },
     })
     .catch(error => {

package/src/components/common/dist/PhoneNumberField.js

@@ -0,0 +1,96 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.PhoneNumberField = void 0;
+var TextField_1 = require("@mui/material/TextField");
+var debounce_1 = require("lodash/debounce");
+var get_1 = require("lodash/get");
+var react_1 = require("react");
+var api_1 = require("../../api");
+exports.PhoneNumberField = function (_a) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? 'text' : _b, field = _a.field, _c = _a.form, errors = _c.errors, setFieldError = _c.setFieldError, setStatus = _c.setStatus;
+    var error = get_1["default"](errors, field.name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var debounceCb = react_1.useCallback(debounce_1["default"](function (cb) { return void cb(); }, 1000), []);
+    react_1.useEffect(function () {
+        var _a;
+        if (field.value) {
+            setStatus((_a = {}, _a[field.name] = true, _a));
+        }
+        debounceCb(function () { return __awaiter(void 0, void 0, void 0, function () {
+            var error_1, message;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 3, 4, 5]);
+                        if (!field.value) return [3 /*break*/, 2];
+                        return [4 /*yield*/, api_1.validatePhoneNumber(field.value)];
+                    case 1:
+                        _b.sent();
+                        _b.label = 2;
+                    case 2:
+                        setFieldError(field.name, '');
+                        return [3 /*break*/, 5];
+                    case 3:
+                        error_1 = _b.sent();
+                        message = get_1["default"](error_1, 'response.data.message', 'Invalid phone number');
+                        setFieldError(field.name, message);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setStatus((_a = {}, _a[field.name] = false, _a));
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); });
+        // eslint-disable-next-line
+    }, [field.value]);
+    return (react_1["default"].createElement(TextField_1["default"], __assign({}, field, { id: field.name, label: label, type: type, fullWidth: true, error: !!error, helperText: error, value: field.value || '', inputProps: { pattern: '[+0-9]/d+' } })));
+};

package/src/components/myTicketsContainer/index.tsx

@@ -17,6 +17,7 @@ import _identity from 'lodash/identity'
 import React, { useEffect, useState } from 'react'
 
 import { getOrders } from '../../api'
+import { getCookieByName } from '../../utils'
 import { LoginModal } from '../loginModal'
 import MyTicketsRow, { RowItems } from './row'
 import tableConfig from './tableConfig'
@@ -48,7 +49,7 @@ export const MyTicketsContainer = ({
 
   const isWindowDefined = typeof window !== 'undefined'
   const [isLogged, setIsLogged] = useState(
-    isWindowDefined ? !!window.localStorage.getItem('access_token') : false
+    isWindowDefined ? !!getCookieByName('X-TF-ECOMMERCE') : false
   )
   const [showModalLogin, setShowModalLogin] = useState(false)
   const [userExpired, setUserExpired] = useState(false)

package/src/components/orderDetailsContainer/index.tsx

@@ -215,15 +215,12 @@ export const OrderDetailsContainer = ({
                   {data?.personal_share_link}
                 </a>
               </div>
-              <div className="link-item">
-                <p>{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
-              </div>
+              {data?.sales_referred ? (
+                <div className="link-item">
+                  <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
+                </div>
+              ) : null}
             </div>
-            {data?.sales_referred ? (
-              <div className="total-referrer">
-                <b>So far, you've referred {data.sales_referred} tickets.</b>
-              </div>
-            ) : null}
             <TableContainer component={Paper}>
               <Table className="tt-type" aria-label="collapsible table">
                 <TableHead>

package/src/components/paymentContainer/index.tsx

@@ -1,37 +1,37 @@
-import React, { useEffect, useState } from 'react'
-import { AxiosError } from 'axios'
-import Container from '@mui/material/Container'
-import CircularProgress from '@mui/material/CircularProgress'
+import './style.css'
+
+import { ThemeOptions } from '@mui/material'
 import Alert from '@mui/material/Alert'
+import CircularProgress from '@mui/material/CircularProgress'
+import Container from '@mui/material/Container'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { CSSProperties } from '@mui/styles'
 import { Elements } from '@stripe/react-stripe-js'
 import {
   loadStripe,
+  StripeCardNumberElementOptions,
   StripeConstructorOptions,
   StripeElementsOptions,
 } from '@stripe/stripe-js'
-import _map from 'lodash/map'
+import { AxiosError } from 'axios'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
-import { CONFIGS } from '../../utils'
+import _map from 'lodash/map'
 import { nanoid } from 'nanoid'
-import { getQueryVariable } from '../../utils/getQueryVariable'
-
-import './style.css'
-import StripePayment from '../stripePayment'
-import { IOrderData, IPaymentField } from '../../types'
+import React, { useEffect, useState } from 'react'
 
 import {
-  getPaymentData,
-  handlePaymentSuccess,
   getConditions,
+  getPaymentData,
   handleFreeSuccess,
+  handlePaymentSuccess,
 } from '../../api'
-import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { ThemeOptions } from '@mui/material'
-import { CSSProperties } from '@mui/styles'
-import TimerWidget from '../timerWidget'
+import { IOrderData, IPaymentField } from '../../types'
+import { CONFIGS } from '../../utils'
+import { getQueryVariable } from '../../utils/getQueryVariable'
 import { Loader } from '../common/index'
+import StripePayment from '../stripePayment'
+import TimerWidget from '../timerWidget'
 
 const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
 
@@ -99,17 +99,17 @@ export const PaymentContainer = ({
   errorText,
   checkoutData,
   onErrorClose = _identity,
-  onGetPaymentDataSuccess = () => { },
-  onGetPaymentDataError = () => { },
-  onPaymentError = () => { },
+  onGetPaymentDataSuccess = _identity,
+  onGetPaymentDataError = _identity,
+  onPaymentError = _identity,
   stripeCardOptions = {},
   disableZipSection = false,
   themeOptions,
   elementsOptions,
-  onCountdownFinish = () => { },
+  onCountdownFinish = _identity,
   enableTimer = false,
   enablePaymentPlan = false,
-  paymentButtonText
+  paymentButtonText,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -117,15 +117,16 @@ export const PaymentContainer = ({
   const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
   const [paymentIsLoading, setPaymentIsLoading] = useState(false)
   const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
-  const [conditions, setConditions] = useState<{ id: string; text: string }[]>(
+  const [conditions, setConditions] = useState<{ id: string, text: string }[]>(
     []
   )
 
-  const showFormTitle: boolean = Boolean(formTitle)
-  const showErrorText: boolean = Boolean(errorText)
+  const showFormTitle = Boolean(formTitle)
+  const showErrorText = Boolean(errorText)
 
   const eventId = getQueryVariable('event_id')
   const { hash, total } = checkoutData
+  const isFreeTickets = !Number(total) && !Number(orderData.total)
 
   useEffect(() => {
     (async () => {
@@ -168,10 +169,10 @@ export const PaymentContainer = ({
         setConditions(
           conditionsInfo
             ? conditionsInfo.map((item: string) => ({
-              id: nanoid(),
-              text: item,
-              checked: false,
-            }))
+                id: nanoid(),
+                text: item,
+                checked: false,
+              }))
             : []
         )
       }
@@ -245,22 +246,24 @@ export const PaymentContainer = ({
                 )
               })}
             </div>
-            {enablePaymentPlan && <div className="payment_toggle">
-              <label htmlFor="togBtn" className="switch">
-                <input
-                  type="checkbox"
-                  id="togBtn"
-                  disabled={true}
-                  onChange={() =>
-                    setShowPaymentPlanSection(!showPaymentPlanSection)
-                  }
-                />
-                <div className="slider round"></div>
-                <span className="tog_text">
-                  Click to checkout using Payment Plan
-                </span>
-              </label>
-            </div>}
+            {enablePaymentPlan && (
+              <div className="payment_toggle">
+                <label htmlFor="togBtn" className="switch">
+                  <input
+                    type="checkbox"
+                    id="togBtn"
+                    disabled={true}
+                    onChange={() =>
+                      setShowPaymentPlanSection(!showPaymentPlanSection)
+                    }
+                  />
+                  <div className="slider round" />
+                  <span className="tog_text">
+                    Click to checkout using Payment Plan
+                  </span>
+                </label>
+              </div>
+            )}
             {showPaymentPlanSection && (
               <div className="payment_plan">
                 <h2>PAYMENT PLAN</h2>
@@ -292,7 +295,7 @@ export const PaymentContainer = ({
                 </div>
               </div>
             )}
-            {total !== '0.00' ? (
+            {!isFreeTickets ? (
               <div className="payment_info">
                 <div className="payment_info_label">ORDER CONFIRMATION</div>
                 {showErrorText && (
@@ -325,8 +328,9 @@ export const PaymentContainer = ({
               </div>
             ) : (
               <div
-                className={`payment_button ${paymentIsLoading ? 'disabled-payment-button' : ''
-                  }`}
+                className={`payment_button ${
+                  paymentIsLoading ? 'disabled-payment-button' : ''
+                }`}
               >
                 <button
                   disabled={paymentIsLoading}