tf-checkout-react 1.2.23 → 1.2.26

package/dist/utils/setConfigs.d.ts

@@ -1,4 +1,13 @@
-interface IConfigs {
+import { AxiosInstance } from 'axios';
+export declare const ttfHeaders: {
+    [key: string]: any;
+};
+interface IPublicRequest extends AxiosInstance {
+    setGuestToken: (token: string) => void;
+    setAccessToken: (token: string) => void;
+    setBaseUrl: (baseUrl: string) => void;
+}
+export interface IConfigs {
     BASE_URL: string;
     CLIENT_ID: string;
     CLIENT_SECRET: string;
@@ -7,5 +16,7 @@ interface IConfigs {
     [key: string]: string | number;
 }
 export declare const CONFIGS: IConfigs;
+export declare const publicRequest: IPublicRequest;
+export declare const setXSourceOrigin: (sourceOrigin: string) => void;
 export declare const setConfigs: (configs: IConfigs) => void;
 export {};

package/package.json

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

package/src/api/index.ts

@@ -1,31 +1,16 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { AxiosRequestConfig, AxiosResponse } from 'axios'
 import _get from 'lodash/get'
 
 import { CONFIGS, getCookieByName, setCustomCookie } from '../utils'
+import { publicRequest, ttfHeaders } from '../utils/setConfigs'
 
 const isWindowDefined = typeof window !== 'undefined'
 const isDocumentDefined = typeof document !== 'undefined'
 
-const ttfHeaders: { [key: string]: any } = {
-  Accept: 'application/vnd.api+json',
-  'Content-Type': 'application/vnd.api+json',
-}
-
 if (isWindowDefined && localStorage.getItem('auth_guest_token')) {
   ttfHeaders['Authorization-Guest'] = localStorage.getItem('auth_guest_token')
 }
 
-interface IPublicRequest extends AxiosInstance {
-  setGuestToken: (token: string) => void;
-  setAccessToken: (token: string) => void;
-  setBaseUrl: (baseUrl: string) => void;
-}
-
-export const publicRequest: IPublicRequest = axios.create({
-  baseURL: CONFIGS.BASE_URL || `https://www.ticketfairy.com/api`,
-  headers: ttfHeaders,
-}) as IPublicRequest
-
 publicRequest.interceptors.response.use(
   response => {
     const authGuestToken = _get(response, 'headers.authorization-guest')
@@ -131,10 +116,6 @@ publicRequest.setBaseUrl = (baseUrl: string) =>
 publicRequest.setAccessToken = token =>
   (publicRequest.defaults.headers.common.Authorization = token)
 
-export const setXSourceOrigin = (sourceOrigin: string) => {
-  ttfHeaders['X-Source-Origin'] = sourceOrigin
-}
-
 export const setCustomHeader = (response: any) => {
   const guestHeaderResponseValue = _get(response, 'headers.authorization-guest')
   const guestHeaderExistingValue = _get(

package/src/components/billing-info-container/index.tsx

@@ -508,24 +508,23 @@ export const BillingInfoContainer = React.memo(
           onSubmit={async (values, formikHelpers) => {
             try {
               if (isLoggedIn) {
-                if (access_token) {
+                const checkoutBody = collectCheckoutBody(values, userData)
+                const res = await postOnCheckout(checkoutBody, access_token)
+                removeReferralKey()
+                // After checkout is successful recover updated profile and store it on local storage if needed
+                if (isWindowDefined) {
                   const updatedUserData = await getProfileData(access_token)
                   const profileSpecifiedData = _get(
-                    updatedUserData,
-                    'data.data'
+                      updatedUserData,
+                      'data.data'
                   )
                   const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                  if (isWindowDefined) {
-                    window.localStorage.setItem(
+                  window.localStorage.setItem(
                       'user_data',
                       JSON.stringify(profileDataObj)
-                    )
-                  }
+                  )
                 }
 
-                const checkoutBody = collectCheckoutBody(values, userData)
-                const res = await postOnCheckout(checkoutBody, access_token)
-                removeReferralKey()
                 handleSubmit(
                   values,
                   formikHelpers as FormikHelpers<any>,

package/src/components/myTicketsContainer/row.tsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import TableRow from '@mui/material/TableRow'
 import TableCell from '@mui/material/TableCell'
+import TableRow from '@mui/material/TableRow'
+import React from 'react'
+
 import tableConfig from './tableConfig'
 
 export interface RowItems {
@@ -17,25 +18,23 @@ interface RowPropsTypes {
   handleDetailsInfo: (id: string) => void;
 }
 
-const Row = ({ row, handleDetailsInfo }: RowPropsTypes) => {
-  return (
-    <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-      {tableConfig().body.map((column: any, index: number) => (
-        <TableCell component="th" scope="row" key={index}>
-          {column(row)}
-        </TableCell>
-      ))}
-      <TableCell component="th" scope="row">
-        <button
-          type='button'
-          className="order-details-button"
-          onClick={() => handleDetailsInfo(row.id)}
-        >
-          Details
-        </button>
+const Row = ({ row, handleDetailsInfo }: RowPropsTypes) => (
+  <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+    {tableConfig().body.map((column: any, index: number) => (
+      <TableCell component="th" scope="row" key={index}>
+        {column(row)}
       </TableCell>
-    </TableRow>
-  );
-}
+    ))}
+    <TableCell component="th" scope="row">
+      <button
+        type="button"
+        className="order-details-button"
+        onClick={() => handleDetailsInfo(row.id)}
+      >
+        Details
+      </button>
+    </TableCell>
+  </TableRow>
+)
 
 export default Row

package/src/components/orderDetailsContainer/index.tsx

@@ -11,6 +11,7 @@ import TableRow from '@mui/material/TableRow'
 import _find from 'lodash/find'
 import _get from 'lodash/get'
 import _has from 'lodash/has'
+import _identity from 'lodash/identity'
 import _map from 'lodash/map'
 import moment from 'moment-timezone'
 import React, { useEffect, useState } from 'react'
@@ -18,7 +19,7 @@ import React, { useEffect, useState } from 'react'
 import { getOrderDetails, removeFromResale, resaleTicket } from '../../api'
 import ConfirmModal from '../confirmModal'
 import { InitialValuesTypes, TicketResaleModal } from '../ticketResaleModal'
-import TicketsTable, { ITicketTypes } from './ticketsTable'
+import TicketsTable, { IActionColumns, ITicketTypes } from './ticketsTable'
 
 interface TicketTypes {
   currency: string;
@@ -39,6 +40,12 @@ interface OrderDetailsTypes {
   onResaleTicketSuccess: () => void;
   onResaleTicketError: (err: any) => void;
   personalLinkIcon?: string;
+  displayColumnNameInRow?: boolean;
+  ticketsTableColumns?: Array<{
+    id?: string | number;
+    key: keyof ITicketTypes & keyof IActionColumns;
+    label: string | number | null | undefined;
+  }>;
 }
 
 const getTotal = (data: any) => {
@@ -49,14 +56,16 @@ const getTotal = (data: any) => {
 
 export const OrderDetailsContainer = ({
   columns = [],
-  onGetOrdersSuccess = () => {},
-  onGetOrdersError = () => {},
-  onRemoveFromResaleSuccess = () => {},
-  onRemoveFromResaleError = () => {},
-  onResaleTicketSuccess = () => {},
-  onResaleTicketError = () => {},
+  onGetOrdersSuccess = _identity,
+  onGetOrdersError = _identity,
+  onRemoveFromResaleSuccess = _identity,
+  onRemoveFromResaleError = _identity,
+  onResaleTicketSuccess = _identity,
+  onResaleTicketError = _identity,
   onReturnButtonClick,
   personalLinkIcon = '',
+  displayColumnNameInRow = false,
+  ticketsTableColumns,
 }: OrderDetailsTypes) => {
   const [data, setData] = useState<any>({})
   const [loading, setLoading] = useState(true)
@@ -259,8 +268,7 @@ export const OrderDetailsContainer = ({
                     (ticket: TicketTypes, index: number) => (
                       <TableRow key={index}>
                         <TableCell>
-                          <b>Ticket Type: </b>
-                          {ticket.name}
+                          <b>Ticket Type:</b> {ticket.name}
                         </TableCell>
                         <TableCell>{ticket.currency + ticket.price}</TableCell>
                         <TableCell>{ticket.quantity}</TableCell>
@@ -293,8 +301,21 @@ export const OrderDetailsContainer = ({
           </div>
           <TicketsTable
             tickets={data.tickets}
+            columns={
+              ticketsTableColumns?.length
+                ? ticketsTableColumns
+                : [
+                    { key: 'hash' as never, label: 'Ticket ID' },
+                    { key: 'ticket_type' as never, label: 'Ticket Type' },
+                    { key: 'holder_name' as never, label: 'Ticket Holder' },
+                    { key: 'status' as never, label: 'Status' },
+                    { key: 'download' as never, label: '' },
+                    { key: 'sell_ticket' as never, label: '' },
+                  ]
+            }
             handleSellTicket={handleSellTicket}
             handleRemoveFromResale={handleRemoveFromResale}
+            displayColumnNameInRow={displayColumnNameInRow}
           />
           <div className="return-button-container">
             <button

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -6,6 +6,7 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import _identity from 'lodash/identity'
+import _map from 'lodash/map'
 import React, { Fragment, useState } from 'react'
 
 import { downloadPDF } from '../../utils'
@@ -31,21 +32,105 @@ export interface ITicketTypes {
   ticket_type_is_active?: boolean;
 }
 
+export interface IActionColumns {
+  download?: boolean;
+  sell_ticket?: boolean;
+}
+
 interface TicketsTableTypes {
   tickets: ITicketTypes[];
+  columns: Array<{
+    id?: string | number;
+    key: keyof ITicketTypes & keyof IActionColumns;
+    label: string | number | null | undefined;
+  }>;
   handleSellTicket: (ticket: ITicketTypes) => void;
   handleRemoveFromResale: (ticket: ITicketTypes) => void;
 
   icon?: string;
+  displayColumnNameInRow?: boolean;
 }
 
 const TicketsTable = ({
   tickets = [],
+  columns = [],
   handleSellTicket = _identity,
   handleRemoveFromResale = _identity,
   icon = '',
+  displayColumnNameInRow = false,
 }: TicketsTableTypes) => {
   const [pdfError, setPdfError] = useState<string | null>(null)
+
+  const getRow = (ticket: ITicketTypes) =>
+    _map(columns, (column, columnIndex) => {
+      if (column.key === 'download') {
+        if (ticket.pdf_link && ticket.status === 'Sold') return null
+        return (
+          <TableCell key={columnIndex}>
+            {Boolean(icon) && <img src={icon} alt="nodata" />}
+            <span
+              aria-hidden={true}
+              className="action-button"
+              onClick={async () => {
+                try {
+                  const pdfDownloadError = await downloadPDF(ticket.pdf_link)
+                  if (pdfDownloadError) {
+                    setPdfError(pdfDownloadError?.message)
+                  }
+                } catch (err) {
+                  if (err && typeof err === 'string') {
+                    setPdfError(err)
+                  }
+                }
+              }}
+            >
+              Download
+            </span>
+          </TableCell>
+        )
+      }
+
+      if (column.key === 'sell_ticket') {
+        return (
+          <TableCell key={columnIndex}>
+            {ticket.is_sellable && (
+              <span
+                aria-hidden={true}
+                className="action-button"
+                onClick={() => handleSellTicket(ticket)}
+              >
+                Sell Ticket
+              </span>
+            )}
+            {ticket.is_on_sale && (
+              <span
+                aria-hidden={true}
+                className="action-button"
+                onClick={() => handleRemoveFromResale(ticket)}
+              >
+                Remove from Resale
+              </span>
+            )}
+          </TableCell>
+        )
+      }
+
+      return displayColumnNameInRow ? (
+        <TableCell key={columnIndex}>
+          <div className="cell-block">
+            <span>{column.label}</span>
+            <span>{ticket[column.key]}</span>
+          </div>
+        </TableCell>
+      ) : (
+        <TableCell key={columnIndex}>
+          <div className="cell-block">
+            <span>{ticket[column.key]}</span>
+          </div>
+        </TableCell>
+      )
+    })
+
   return (
     <div className="tickets-box">
       <SnackbarAlert
@@ -57,90 +142,19 @@ const TicketsTable = ({
       <h4 className="sub-title">Your Tickets</h4>
       <TableContainer component={Paper}>
         <Table aria-label="collapsible table">
-          <TableHead>
-            <TableRow>
-              <TableCell />
-              <TableCell />
-              <TableCell />
-              <TableCell />
-              <TableCell />
-              <TableCell />
-            </TableRow>
-          </TableHead>
+          {displayColumnNameInRow ? null : (
+            <TableHead>
+              <TableRow>
+                {_map(columns, item => (
+                  <TableCell key={item.key}>{item.label || ''}</TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+          )}
           <TableBody>
             {tickets.map((ticket: ITicketTypes, index: number) => (
               <Fragment key={index}>
-                <TableRow>
-                  <TableCell>
-                    <div className="cell-block">
-                      <span>Ticket ID</span>
-                      <span>{ticket.hash}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="cell-block">
-                      <span>Ticket Type</span>
-                      <span>{ticket.ticket_type}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="cell-block">
-                      <span>Ticket Holder</span>
-                      <span>{ticket.holder_name}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="cell-block">
-                      <span>Status</span>
-                      <span>{ticket.status}</span>
-                    </div>
-                  </TableCell>
-                  {ticket.pdf_link && ticket.status !== "Sold" ? (
-                    <TableCell>
-                      {Boolean(icon) && <img src={icon} alt="nodata" />}
-                      <span
-                        aria-hidden={true}
-                        className="action-button"
-                        onClick={async () => {
-                          try {
-                            const pdfDownloadError = await downloadPDF(
-                              ticket.pdf_link
-                            )
-                            if (pdfDownloadError) {
-                              setPdfError(pdfDownloadError?.message)
-                            }
-                          } catch (err) {
-                            if (err && typeof err === 'string') {
-                              setPdfError(err)
-                            }
-                          }
-                        }}
-                      >
-                        Download
-                      </span>
-                    </TableCell>
-                  ) : null}
-                  <TableCell>
-                    {ticket.is_sellable && (
-                      <span
-                        aria-hidden={true}
-                        className="action-button"
-                        onClick={() => handleSellTicket(ticket)}
-                      >
-                        Sell Ticket
-                      </span>
-                    )}
-                    {ticket.is_on_sale && (
-                      <span
-                        aria-hidden={true}
-                        className="action-button"
-                        onClick={() => handleRemoveFromResale(ticket)}
-                      >
-                        Remove from Resale
-                      </span>
-                    )}
-                  </TableCell>
-                </TableRow>
+                <TableRow>{getRow(ticket)}</TableRow>
                 {!!ticket.add_ons?.length && (
                   <TableRow>
                     <TableCell colSpan={6}>
@@ -174,4 +188,4 @@ const TicketsTable = ({
   )
 }
 
-export default TicketsTable
+export default TicketsTable

package/src/components/ticketsContainer/index.tsx

@@ -177,22 +177,6 @@ export const TicketsContainer = ({
     }
   }
 
-  useEffect(() => {
-    try {
-      if (typeof window !== 'undefined') {
-        const userData = window.localStorage.getItem('user_data')
-          ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
-          : {}
-        if (userData.country === '') {
-          handleLogout()
-          window.open(
-            'https://www.ticketfairy.com/account/change_information?need_country=true'
-          )
-        }
-      }
-    } catch (e) {}
-  }, [])
-
   const handleExternalLogin = () => {
     setIsLogged(true)
   }

package/src/utils/setConfigs.ts

@@ -1,18 +1,37 @@
+import axios, { AxiosInstance } from 'axios';
 import _forEach from 'lodash/forEach'
-import { publicRequest, setXSourceOrigin } from '../api'
 
-interface IConfigs {
+export const ttfHeaders: { [key: string]: any } = {
+  Accept: 'application/vnd.api+json',
+  'Content-Type': 'application/vnd.api+json',
+}
+
+interface IPublicRequest extends AxiosInstance {
+  setGuestToken: (token: string) => void;
+  setAccessToken: (token: string) => void;
+  setBaseUrl: (baseUrl: string) => void;
+}
+
+export interface IConfigs {
   BASE_URL: string;
   CLIENT_ID: string;
   CLIENT_SECRET: string;
   STRIPE_PUBLISHABLE_KEY: string;
   X_SOURCE_ORIGIN: string;
-
   [key: string]: string | number;
 }
 
 export const CONFIGS: IConfigs = {} as IConfigs
 
+export const publicRequest: IPublicRequest = axios.create({
+  baseURL: CONFIGS.BASE_URL || `https://www.ticketfairy.com/api`,
+  headers: ttfHeaders,
+}) as IPublicRequest
+
+export const setXSourceOrigin = (sourceOrigin: string) => {
+  ttfHeaders['X-Source-Origin'] = sourceOrigin
+}
+
 export const setConfigs = (configs: IConfigs) => {
   _forEach(configs, (value, key) => {
     CONFIGS[key] = value
@@ -23,4 +42,4 @@ export const setConfigs = (configs: IConfigs) => {
   if (CONFIGS.X_SOURCE_ORIGIN) {
     setXSourceOrigin(CONFIGS.X_SOURCE_ORIGIN)
   }
-}
+}