tf-checkout-react 1.3.51 → 1.4.0

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/confirmationContainer/index.tsx

@@ -4,6 +4,7 @@ import './style.css'
 import Modal from '@mui/material/Modal'
 import { AxiosError } from 'axios'
 import _get from 'lodash/get'
+import _identity from 'lodash/identity'
 import _map from 'lodash/map'
 import React, { useEffect, useRef, useState } from 'react'
 
@@ -50,10 +51,10 @@ export const ConfirmationContainer = ({
   showDefaultShareButtons,
   messengerAppId = '',
   shareButtons = [],
-  onGetConfirmationDataSuccess = () => {},
-  onGetConfirmationDataError = () => {},
+  onGetConfirmationDataSuccess = _identity,
+  onGetConfirmationDataError = _identity,
   orderHash,
-  onLinkCopied = () => {},
+  onLinkCopied = _identity,
   clientLabel,
   showReferralsInfoText = false,
   showCopyInfoModal = false,
@@ -61,12 +62,13 @@ export const ConfirmationContainer = ({
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
   const [data, setData] = useState<any>(null)
-
-  const dataEncoded = (isBrowser && window.localStorage.getItem('checkoutData')) || ''
-  const dataDecoded = dataEncoded ? JSON.parse(dataEncoded): { hash: orderHash }
+  const dataEncoded =
+    (isBrowser && window.localStorage.getItem('checkoutData')) || ''
+  const dataDecoded = dataEncoded
+    ? JSON.parse(dataEncoded)
+    : { hash: orderHash }
   const { hash } = dataDecoded
-
-  // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
+  const eventId = data?.product_id || ''
 
   useEffect(() => {
     (async () => {
@@ -120,7 +122,6 @@ export const ConfirmationContainer = ({
     confirmationHelper = 'Please bring them with you to the event',
   } = confirmationLabels
 
-  const eventId = data?.product_id || ''
   const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
   usePixel(eventId, { page: 'complete', pageUrl, orderHash: hash })
 
@@ -240,6 +241,7 @@ export const ConfirmationContainer = ({
                             onChange={onChangeShareLink}
                           />
                           <div
+                            aria-hidden={true}
                             className="share-by-link-copy-icon"
                             onClick={() => {
                               navigator.clipboard.writeText(

package/src/components/idVerificationContainer/constants.ts

@@ -3,6 +3,7 @@ export const VERIFICATION_STATUSES = {
   PENDING: 'PENDING',
   APPROVED: 'APPROVED_VERIFIED',
   FAILED: 'FAILED',
+  WRONG_CUSTOMER: 'WRONG_CUSTOMER',
 }
 
 export const TRANSACTION_STATUSES = {
@@ -14,4 +15,5 @@ export const VERIFICATION_MESSAGES = {
   PENDING: 'Your ID verification is currently being processed. We will notify you as soon as it is completed. Thank you for your patience.',
   APPROVED: 'Your ID verification is approved!',
   FAILED: 'Unfortunately your ID verification has failed. Please try again.',
+  WRONG_CUSTOMER: 'The order does not belong to the customer.'
 }

package/src/components/idVerificationContainer/index.tsx

@@ -5,11 +5,15 @@ import _isEmpty from 'lodash/isEmpty'
 import React, { useEffect, useState } from 'react'
 
 import {
+  checkCustomerOrder,
   checkVerificationStatus,
   getNetverifyUrl,
   updateVerificationStatus,
 } from '../../api'
-import { GetNetverifyUrlResponseData, VerificationStatusResponseData } from '../../types/verification'
+import {
+  GetNetverifyUrlResponseData,
+  VerificationStatusResponseData,
+} from '../../types/verification'
 import { getQueryVariable, isJson } from '../../utils'
 import Modal from '../common/ModalComponent'
 import { VERIFICATION_MESSAGES, VERIFICATION_STATUSES } from './constants'
@@ -56,8 +60,9 @@ export const IDVerification = (props: IDVerificationProps) => {
   })
 
   const isAccountVerifiedOrPending =
-    verificationStatus === VERIFICATION_STATUSES.APPROVED ||
-    verificationStatus === VERIFICATION_STATUSES.PENDING
+    (verificationStatus === VERIFICATION_STATUSES.APPROVED ||
+      verificationStatus === VERIFICATION_STATUSES.PENDING) &&
+    verificationStatus !== VERIFICATION_STATUSES.WRONG_CUSTOMER
 
   const handleClose = () => {
     setModalData({
@@ -103,6 +108,9 @@ export const IDVerification = (props: IDVerificationProps) => {
   }, [])
 
   useEffect(() => {
+    let intervalId: any = null
+    const orderHash = getQueryVariable('order_hash') || ''
+
     const getUrl = async () => {
       try {
         const urlResponse = await getNetverifyUrl()
@@ -141,17 +149,46 @@ export const IDVerification = (props: IDVerificationProps) => {
       }
     }
 
-    getUrl()
-    getVerificationStatus()
+    const getCustomerOrderStatus = async () => {
+      try {
+        const customerOrderResponse = await checkCustomerOrder(orderHash)
+        return customerOrderResponse
+      } catch (error) {
+        throw error
+      }
+    }
 
-    // Check the verification status every 30 seconds
-    const intervalId = setInterval(() => {
-      getVerificationStatus()
-    }, 10000)
+    const makeRequests = async () => {
+      try {
+        if (orderHash) {
+          await getCustomerOrderStatus()
+        }
+        getUrl()
+        getVerificationStatus()
+
+        // Check the verification status every 30 seconds
+        intervalId = setInterval(() => {
+          getVerificationStatus()
+        }, 10000)
+      } catch (error) {
+        if (
+          error.response?.data?.message === VERIFICATION_MESSAGES.WRONG_CUSTOMER
+        ) {
+          setVerificationStatus(VERIFICATION_STATUSES.WRONG_CUSTOMER)
+          setModalData({
+            displaModal: true,
+            hideCancelBtn: true,
+            message: VERIFICATION_MESSAGES.WRONG_CUSTOMER,
+          })
+        }
+      }
+    }
+
+    makeRequests()
 
     // Clear the interval when the component unmounts
     return () => clearInterval(intervalId)
-  }, [verificationStatus])
+  }, [])
 
   const iframe = (netverifyUrl: string) => {
     // eslint-disable-next-line max-len
@@ -166,14 +203,18 @@ export const IDVerification = (props: IDVerificationProps) => {
     const orderHash = getQueryVariable('order_hash')
 
     if (isWindowDefined) {
-      const checkoutData = JSON.parse(window.localStorage.getItem('checkoutData') || '{}')
+      const checkoutData = JSON.parse(
+        window.localStorage.getItem('checkoutData') || '{}'
+      )
       if (_isEmpty(checkoutData) && orderHash) {
-        window.localStorage.setItem('checkoutData', JSON.stringify({ hash: orderHash }))
+        window.localStorage.setItem(
+          'checkoutData',
+          JSON.stringify({ hash: orderHash })
+        )
       }
     }
   }, [])
 
-
   return (
     <div>
       <h2 className="page-header">Account Verification</h2>

package/src/components/index.ts

@@ -7,4 +7,5 @@ export { OrderDetailsContainer } from './orderDetailsContainer'
 export { ResetPasswordContainer } from './resetPasswordContainer'
 export { TicketResaleContainer } from './ticketResale'
 export { AddonsContainter } from './addonsContainer'
-export { IDVerification } from './idVerificationContainer'
+export { SeatMapContainer } from './seatMapContainer'
+export { IDVerification } from './idVerificationContainer'

package/src/components/orderDetailsContainer/index.tsx

@@ -28,6 +28,9 @@ interface TicketTypes {
   price: string;
   quantity: string;
   total: string;
+  guests_count: string;
+  deposit_paid: string;
+  remaining: string;
 }
 
 interface OrderDetailsTypes {
@@ -50,7 +53,8 @@ interface OrderDetailsTypes {
 }
 
 const getTotal = (data: any) => {
-  if (data?.total && data?.tickets && data.tickets[0]?.currency) return data.tickets[0].currency + data.total
+  if (data?.total && data?.tickets && data.tickets[0]?.currency)
+    return data.tickets[0].currency + data.total
   if (!data?.total || !_has(data, 'items.ticket_types.length')) return ''
 
   return data.items.ticket_types[0].currency + data.total
@@ -206,6 +210,16 @@ export const OrderDetailsContainer = ({
     orderSummery += ` ${date}`
   }
 
+  const columnsProps =
+    data.tickets && data.tickets[0].is_table
+      ? [
+          { label: 'Items' },
+          { label: 'Price' },
+          { label: 'Guests count' },
+          { label: 'Deposit paid' },
+          { label: 'Remaining' },
+        ]
+      : columns
   return (
     <div className="order-details">
       {loading ? (
@@ -237,49 +251,66 @@ export const OrderDetailsContainer = ({
                 </div>
               </div>
             </div>
-            {!data?.disable_referral &&
-              (<div className="personal-link">
+            {!data?.disable_referral && (
+              <div className="personal-link">
                 <div className="link-item">
                   <span>Personal Share Link: </span>
                   <a
-                      href={data?.personal_share_link}
-                      target="_blank"
-                      rel="noreferrer"
+                    href={data?.personal_share_link}
+                    target="_blank"
+                    rel="noreferrer"
                   >
                     {Boolean(personalLinkIcon) && (
-                        <img src={personalLinkIcon} alt="Icon"/>
+                      <img src={personalLinkIcon} alt="Icon" />
                     )}
                     {data?.personal_share_link}
                   </a>
                 </div>
                 {data?.sales_referred ? (
-                    <div className="link-item">
-                      <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
-                    </div>
+                  <div className="link-item">
+                    <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
+                  </div>
                 ) : null}
-              </div>)
-            }
+              </div>
+            )}
             <TableContainer component={Paper}>
               <Table className="tt-type" aria-label="collapsible table">
                 <TableHead>
                   <TableRow>
-                    {_map(columns, item => (
+                    {_map(columnsProps, item => (
                       <TableCell>{item.label || ''}</TableCell>
                     ))}
                   </TableRow>
                 </TableHead>
                 <TableBody>
                   {data?.items?.ticket_types?.map(
-                    (ticket: TicketTypes, index: number) => (
-                      <TableRow key={index}>
-                        <TableCell>
-                          <b>Ticket Type:</b> {ticket.name}
-                        </TableCell>
-                        <TableCell>{ticket.currency + ticket.price}</TableCell>
-                        <TableCell>{ticket.quantity}</TableCell>
-                        <TableCell>{ticket.currency + ticket.total}</TableCell>
-                      </TableRow>
-                    )
+                    (ticket: TicketTypes, index: number) =>
+                      data?.tickets && !data?.tickets[0].is_table ? (
+                        <TableRow key={index}>
+                          <TableCell>
+                            <b>Ticket Type:</b> {ticket.name}
+                          </TableCell>
+                          <TableCell>
+                            {ticket.currency + ticket.price}
+                          </TableCell>
+                          <TableCell>{ticket.quantity}</TableCell>
+                          <TableCell>
+                            {ticket.currency + ticket.total}
+                          </TableCell>
+                        </TableRow>
+                      ) : (
+                        <TableRow key={index}>
+                          <TableCell>
+                            <b>Ticket Type:</b> {ticket.name}
+                          </TableCell>
+                          <TableCell>
+                            {ticket.currency + ticket.price}
+                          </TableCell>
+                          <TableCell>{ticket.guests_count}</TableCell>
+                          <TableCell>{ticket.deposit_paid}</TableCell>
+                          <TableCell>{ticket.remaining}</TableCell>
+                        </TableRow>
+                      )
                   )}
                   {data?.items?.add_ons?.map(
                     (ticket: TicketTypes, index: number) => (