tf-checkout-react 1.4.24 → 1.4.25

package/src/components/ticketsContainer/index.tsx

@@ -56,8 +56,8 @@ interface CartSuccess {
   phone_required: boolean;
   hide_phone_field: boolean;
   event_id: string;
-  hash?: string;
-  total?: string;
+  hash?: string | number;
+  total?: string | number;
   hasAddOn?: boolean;
   free_ticket: boolean;
   collect_optional_wallet_address?: boolean;
@@ -168,12 +168,9 @@ export const TicketsContainer = ({
   showAlertIcons = true,
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState({} as ISelectedTickets)
-  const isWindowDefined = typeof window !== 'undefined'
-  const [isLogged, setIsLogged] = useState(
-    Boolean(getCookieByName(X_TF_ECOMMERCE))
-  )
+  const [isLogged, setIsLogged] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
   const [showLoginModal, setShowLoginModal] = useState(false)
-  const [tickets, setTickets] = useState([] as ITicket[])
+  const [tickets, setTickets] = useState([] as ITicketData[])
   const [event, setEvent] = useState<any>(null)
   const [showWaitingList, setShowWaitingList] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
@@ -183,12 +180,8 @@ export const TicketsContainer = ({
   const [showPromoInput, setShowPromoInput] = useState(false)
   const [codeIsApplied, setCodeIsApplied] = useState(false)
   const [codeIsInvalid, setCodeIsInvalid] = useState(false)
-  const [showAccessCodeSection, setShowAccessCodeSection] = useState(
-    isAccessCodeEnabled
-  )
-  const [showPromoCodeSection, setShowPromoCodeSection] = useState(
-    isPromotionsEnabled
-  )
+  const [showAccessCodeSection, setShowAccessCodeSection] = useState(isAccessCodeEnabled)
+  const [showPromoCodeSection, setShowPromoCodeSection] = useState(isPromotionsEnabled)
   const [error, setError] = useState(null)
   const [isNotInvitedError, setIsNotInvitedError] = useState('')
   const [isInvalidLinkError, setIsInvalidLinkError] = useState('')
@@ -237,7 +230,7 @@ export const TicketsContainer = ({
     try {
       await logout()
       onLogoutSuccess()
-      if (isWindowDefined) {
+      if (isBrowser) {
         window.localStorage.removeItem('access_token')
         window.localStorage.removeItem('user_data')
         setIsLogged(false)
@@ -272,22 +265,22 @@ export const TicketsContainer = ({
       const previewKey = getQueryVariable('pk') || undefined
       const response = await getTickets(eventId, code, previewKey)
       const eventResponse = await getEvent(eventId, previewKey)
-      if (response.data.success) {
-        const attributes = _get(response, 'data.data.attributes')
+      if (response.success) {
+        const attributes = response?.data?.attributes
         type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode)
         type === 'promo' && setCodeIsInvalid(!attributes.ValidPromoCode)
-        setTickets(_get(attributes, 'tickets'))
+        setTickets(attributes.tickets)
         setShowWaitingList(attributes.showWaitingList)
         onGetTicketsSuccess(response.data)
         setCode('')
         setShowAccessCodeSection(attributes.is_access_code)
         setShowPromoCodeSection(attributes.isPromotionsEnabled)
       }
-      if (eventResponse.data.success) {
-        const event = _get(eventResponse, 'data.data.attributes')
+      if (eventResponse.success) {
+        const event = eventResponse.data.attributes
         setEvent(event)
 
-        if (event.country && isWindowDefined) {
+        if (event.country && isBrowser) {
           window.localStorage.setItem('eventCountry', event.country)
         }
       }
@@ -302,11 +295,7 @@ export const TicketsContainer = ({
     }
   }
 
-  const handleTicketSelect = (
-    key: string,
-    value: number | string,
-    isTable = false
-  ) => {
+  const handleTicketSelect = (key: string, value: number | string, isTable = false) => {
     setSelectedTickets(prevState => {
       if (Object.keys(prevState)[0] !== key && !value) {
         return prevState
@@ -319,7 +308,7 @@ export const TicketsContainer = ({
   }
 
   const handleOrdersClick = () => {
-    if (isWindowDefined) {
+    if (isBrowser) {
       window.location.href = ordersPath ?? '/orders'
     }
   }
@@ -330,15 +319,14 @@ export const TicketsContainer = ({
 
   const handleBook = async () => {
     setHandleBookIsLoading(true)
-    const ticket =
-      _find(tickets, item => selectedTickets[item.id] > 0) || ({} as ITicket)
+    const ticket = _find(tickets, item => selectedTickets[item.id] > 0) || ({} as ITicket)
     const optionName = _get(ticket, 'optionName')
     const ticketId = _get(ticket, 'id')
     const isTableType = _get(ticket, 'isTable', false)
     const productCartQuantity = +selectedTickets[ticket.id]
     const ticketQuantity = isTableType ? 1 : +selectedTickets[ticket.id]
 
-    const data = {
+    const data: ICartRequestData = {
       attributes: {
         alternative_view_id: null,
         product_cart_quantity: productCartQuantity,
@@ -364,12 +352,11 @@ export const TicketsContainer = ({
         ? await getCheckoutPageConfigs()
         : {
             status: 200,
-            data: { attributes: _get(result, 'data.data.attributes') },
+            data: { attributes: _get(result, 'data.attributes') },
           }
 
       if (result.status === 200 && pageConfigsDataResponse.status === 200) {
-        const pageConfigsData =
-          _get(pageConfigsDataResponse, 'data.attributes') || {}
+        const pageConfigsData = _get(pageConfigsDataResponse, 'data.attributes') || {}
 
         const skipBillingPage = pageConfigsData.skip_billing_page ?? false
         const nameIsRequired = pageConfigsData.names_required ?? false
@@ -383,21 +370,20 @@ export const TicketsContainer = ({
         const collectMandatoryWalletAddress =
           pageConfigsData.collect_mandatory_wallet_address ?? false
 
-        let hash = ''
-        let total = ''
+        let hash: string | number | undefined = ''
+        let total: string | number | undefined = ''
 
-        const isWindowDefined = typeof window !== 'undefined'
-        isWindowDefined && window.localStorage.removeItem('add_ons')
+        isBrowser && window.localStorage.removeItem('add_ons')
 
         if (skipBillingPage && !hasAddOn) {
           // Get user data for checkout data
           const userData =
-            isWindowDefined && window.localStorage.getItem('user_data')
+            isBrowser && window.localStorage.getItem('user_data')
               ? JSON.parse(window.localStorage.getItem('user_data') || '')
               : {}
 
           const access_token =
-            isWindowDefined && window.localStorage.getItem('access_token')
+            isBrowser && window.localStorage.getItem('access_token')
               ? window.localStorage.getItem('access_token') || ''
               : ''
 
@@ -406,12 +392,12 @@ export const TicketsContainer = ({
             userData
           )
 
-          const checkoutResult = enableBillingInfoAutoCreate
+          const checkoutResponse = enableBillingInfoAutoCreate
             ? await postOnCheckout(checkoutBody, access_token, freeTicket)
             : null
 
-          hash = _get(checkoutResult, 'data.data.attributes.hash')
-          total = _get(checkoutResult, 'data.data.attributes.total')
+          hash = checkoutResponse?.data?.attributes?.hash || ''
+          total = checkoutResponse?.data?.attributes?.total || ''
         }
 
         onAddToCartSuccess({
@@ -464,7 +450,7 @@ export const TicketsContainer = ({
   const fetchUserData = async () => {
     try {
       const userDataResponse = await getProfileData()
-      const profileData = _get(userDataResponse, 'data.data')
+      const profileData = _get(userDataResponse, 'data')
       const profileDataObj = setLoggedUserData(profileData)
       return profileDataObj
     } catch (e) {
@@ -500,11 +486,7 @@ export const TicketsContainer = ({
     ) {
       handleBook()
     } else {
-      if (
-        isButtonScrollable &&
-        ticketsContainerRef &&
-        ticketsContainerRef.current
-      ) {
+      if (isButtonScrollable && ticketsContainerRef && ticketsContainerRef.current) {
         ticketsContainerRef.current.scrollIntoView({
           behavior: 'smooth',
           block: 'center',
@@ -525,9 +507,7 @@ export const TicketsContainer = ({
     ticket => ticket.displayTicket && !ticket.soldOut && ticket.salesStarted
   )
 
-  const wrappedActionsSectionComponent = React.isValidElement(
-    ActionsSectionComponent
-  )
+  const wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent)
     ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, {
         handleGetTicketClick,
         isTicketOnSale,
@@ -620,12 +600,8 @@ export const TicketsContainer = ({
                 sortBySoldOut={sortBySoldOut}
                 ticketsHeaderComponent={ticketsHeaderComponent}
                 tableTicketsHeaderComponent={tableTicketsHeaderComponent}
-                hideTableTicketsHeader={
-                  hideTableTicketsHeader || _isEmpty(tableTickets)
-                }
-                hideTicketsHeader={
-                  hideTicketsHeader || _isEmpty(ordinarTickets)
-                }
+                hideTableTicketsHeader={hideTableTicketsHeader || _isEmpty(tableTickets)}
+                hideTicketsHeader={hideTicketsHeader || _isEmpty(ordinarTickets)}
                 showGroupNameBlock={showGroupNameBlock}
                 currencySybmol={currencySybmol}
                 isSeatMapAllowed={isSeatMapAllowed}

package/src/components/waitingList/index.tsx

@@ -1,17 +1,15 @@
-import React, { useState } from 'react'
+import './style.css'
+
 import Button from '@mui/material/Button'
 import CircularProgress from '@mui/material/CircularProgress'
 import { Field, Form, Formik } from 'formik'
-import { CustomField } from '../common/index'
+import React, { useState } from 'react'
+
 import { addToWaitingList } from '../../api'
-import {
-  combineValidators,
-  requiredValidator,
-  emailValidator,
-} from '../../validators'
+import { isBrowser } from '../../utils'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
-
-import './style.css'
+import { combineValidators, emailValidator, requiredValidator } from '../../validators'
+import { CustomField } from '../common/index'
 
 interface WaitingListProps {
   tickets: any;
@@ -34,11 +32,14 @@ const generateQuantity = (n: number) => {
   }
   return quantityList
 }
- 
-const WaitingList = ({ tickets = {}, eventId, defaultMaxQuantity = 10 }: WaitingListProps) => {
-  const isWindowDefined = typeof window !== 'undefined'
+
+const WaitingList = ({
+  tickets = {},
+  eventId,
+  defaultMaxQuantity = 10,
+}: WaitingListProps) => {
   const userData =
-    isWindowDefined && window.localStorage.getItem('user_data')
+    isBrowser && window.localStorage.getItem('user_data')
       ? JSON.parse(window.localStorage.getItem('user_data') || '')
       : {}
 
@@ -54,14 +55,9 @@ const WaitingList = ({ tickets = {}, eventId, defaultMaxQuantity = 10 }: Waiting
   const handleSubmit = async (values: WaitingListFields) => {
     try {
       setLoading(true)
-      const requestData = {
-        data: {
-          attributes: values,
-        },
-      }
-      const { data } = await addToWaitingList(eventId, requestData)
+      const response = await addToWaitingList(eventId, values)
 
-      if (data.success) {
+      if (response.success) {
         setShowSuccessMessage(true)
       }
     } catch (error) {
@@ -157,16 +153,8 @@ const WaitingList = ({ tickets = {}, eventId, defaultMaxQuantity = 10 }: Waiting
                 />
               </div>
 
-              <Button
-                type="submit"
-                variant="contained"
-                className="waiting-list-button"
-              >
-                {loading ? (
-                  <CircularProgress size="22px" />
-                ) : (
-                  'ADD TO WAITING LIST'
-                )}
+              <Button type="submit" variant="contained" className="waiting-list-button">
+                {loading ? <CircularProgress size="22px" /> : 'ADD TO WAITING LIST'}
               </Button>
             </Form>
           </Formik>

package/src/types/api/auth.d.ts

@@ -4,30 +4,38 @@ interface IAuthorizeRequestData {
   password: string;
 }
 
+// ticket holder data
+interface ITicketHolderData {
+  firstName: string | null;
+  lastName: string | null;
+  phone: string | null;
+  email: string | null;
+}
+
 // authorize, get user data
 interface IProfileData {
   id: number | string;
   firstName: string;
   lastName: string;
   email: string;
-  phone: string;
-  streetAddress: string;
-  zipCode: number;
-  countryId: number;
-  company: string;
-  state: string | number;
-  stateId: number;
-  city: string;
+  phone?: string;
+  streetAddress?: string;
+  zipCode?: string | number;
+  countryId: string | number;
+  company: string | null;
+  stateId?: string | number;
+  city?: string;
   username: string;
   screenName: string | null;
-  bio: string;
+  bio: string | null;
   shortBio: string | null;
   region: string | null;
-  image: string;
+  image: string | null;
   recommendedEvents: Array<any>;
   rnRoles: Array<string>;
   hasDashboardAccess: boolean;
-  ticketHolders: Array<any>;
+  ticketHolders: ITicketHolderData[];
+  linkedCryptoWallets: string[];
 }
 
 interface IProfileResponse extends IAxiosResponseData {
@@ -49,7 +57,7 @@ interface ISignupRequestDataExtended extends ISignupRequestData {
   phone: string | number;
   countryId: string | number;
   city: string;
-  stateId: string | number;
+  stateId?: string | number;
   streetAddress: string;
   zip: string | number;
 }

package/src/types/api/axiosResponse.d.ts

@@ -0,0 +1,6 @@
+interface IAxiosResponseData {
+  error: boolean;
+  message: string;
+  status: number;
+  success: boolean;
+}

package/src/types/api/cart.d.ts

@@ -0,0 +1,65 @@
+// Add to Cart
+interface ICartData {
+  alternative_view_id: string | null;
+  product_cart_quantity: number;
+  product_id: string | number;
+  product_options: {
+    [key: string]: string | number;
+  };
+  ticket_types: {
+    [key: string]: {
+      product_options: {
+        [key: string]: string | number;
+        ticket_price: string | number;
+      };
+      quantity: number;
+    };
+  };
+}
+
+interface ICartRequestData {
+  attributes: ICartData;
+}
+
+interface ICartResponseData {
+  ageRequired: boolean;
+  namesRequired: boolean;
+  phoneRequired: boolean;
+  skipBillingPage: boolean;
+  minimumAge?: string | null;
+}
+
+interface ICartResponseExtendedData extends ICartResponseData {
+  eventId: number;
+  hash?: string;
+  total?: string | number;
+}
+
+interface ICartResponse extends IAxiosResponseData {
+  data: {
+    attributes: ICartResponseData;
+    relationships: Array<unknown>;
+    type: string;
+  };
+}
+
+// Get cart data
+interface IGetCartData {
+  cartName: string;
+  quantity: number;
+}
+
+interface IGetCartAttributes {
+  cart: Array<IGetCartData>;
+  hideTtfOptIn: boolean;
+  optedIn: boolean;
+  ttfOptIn: boolean;
+}
+
+interface IGetCartResponse {
+  data: {
+    relationships: Array<unknown>;
+    type: string;
+    attributes: IGetCartAttributes;
+  };
+}

package/src/types/api/checkout.d.ts

@@ -0,0 +1,41 @@
+interface ITicketHolderData {
+  firstName?: string;
+  lastName?: string;
+  email?: string | null;
+  phone?: string | null;
+}
+
+interface ICheckoutData {
+  ticketHolders?: Array<ITicketHolderData>;
+
+  brandOptIn?: boolean;
+  ttfOptIn?: boolean;
+
+  dobDay?: number;
+  dobMonth?: number;
+  dobYear?: number;
+
+  streetAddress?: string;
+  city?: string;
+  stateId?: number;
+  zip?: string;
+  countryId?: string | number;
+}
+
+interface ICheckoutResponseData {
+  id: string | number;
+  hash: string | number;
+  total: string | number;
+  debt: string | number;
+  pay_now: string | number;
+  guest_count: number | null;
+  status: string;
+}
+
+interface ICheckoutResponse extends IAxiosResponseData {
+  data: {
+    attributes: ICheckoutResponseData;
+    relationships: Array<unknown>;
+    type: string;
+  };
+}

package/src/types/api/common.d.ts

@@ -0,0 +1,117 @@
+// Event
+interface IEventResponseData {
+  alwaysShowWaitingList: boolean | null;
+  isTimeSlotEvent: boolean;
+  minimumAge: number | string | null;
+  name: string;
+  redirectUrl: string | null;
+  referralsEnabled: boolean;
+  salesEnd: string;
+  salesEnded: boolean;
+  salesStart: boolean | null;
+  salesStarted: boolean;
+  slug: string;
+  startDate: string;
+  timezone: string;
+  country: any;
+}
+interface IEventResponse extends IAxiosResponseData {
+  data: {
+    attributes: IEventResponseData;
+    relationships: Array<unknown>;
+    type: string;
+  };
+}
+
+// Tickets
+interface ITicketData {
+  displayName: string;
+  displayTicket: boolean;
+  feeIncluded: boolean;
+  feeText: string;
+  id: string;
+  maxQuantity: number;
+  minQuantity: number;
+  multiplier: number;
+  oldPrice: number;
+  optionName: string;
+  price: number;
+  priceCurrency: string;
+  priceSymbol: string;
+  salesEnded: boolean;
+  salesStarted: boolean;
+  soldOut: number;
+  soldOutMessage: number | string;
+  sortOrder: number;
+  tags: Array<string>;
+  taxName: string;
+  taxesIncluded: boolean;
+}
+interface ITicketItemData {
+  [key: number]: ITicketData;
+}
+interface ITicketsResponseData {
+  promoCodeValidationMessage: string | null;
+  validPromoCode: boolean;
+  is_access_code: boolean;
+  isPromotionsEnabled: boolean;
+  showWaitingList: boolean;
+  tickets: ITicketItemData;
+  ValidPromoCode: boolean;
+}
+interface ITicketsAdaptedResponseData extends ITicketsResponseData {
+  tickets: ITicketData[];
+}
+interface ITicketsResponse extends IAxiosResponseData {
+  data: {
+    attributes: ITicketsResponseData;
+    relationships: Array<unknown>;
+    type: string;
+  };
+}
+interface ITicketsAdaptedResponse extends IAxiosResponseData {
+  data: {
+    attributes: ITicketsAdaptedResponseData;
+    relationships: Array<unknown>;
+    type: string;
+  };
+}
+
+// Countries
+interface ICountriesAdaptedData {
+  label: string;
+  value: string;
+}
+interface ICountriesResponseData {
+  [key: number]: string;
+  code: string;
+  id: string;
+  name: string;
+}
+interface ICountriesResponse extends IAxiosResponseData {
+  data: ICountriesResponseData[];
+}
+
+// Country States
+interface IStatesData {
+  [key: number]: string;
+}
+interface IStatesResponse extends IAxiosResponseData {
+  data: IStatesData;
+}
+
+// Waiting List
+interface IWaitingListRequestData {
+  email: string;
+  firstName: string;
+  lastName: string;
+  quantity: string;
+  ticketTypeId: string;
+}
+type IWaitingListResponse = IAxiosResponseData
+
+// RSVP
+interface IRSVPRequestData {
+  email: string;
+}
+type IRSVPResponse = IAxiosResponseData

package/src/types/api/orders.d.ts

@@ -0,0 +1,100 @@
+// Orders
+interface IPurchasedEventData {
+  urlName: string;
+  eventName: string;
+}
+
+interface IOrdersItemData {
+  id: string;
+  date: string;
+  currency: string;
+  amount: string;
+  eventName: string;
+  eventUrl: string;
+  image: string;
+}
+
+interface IOrdersData {
+  page: number;
+  limit: number;
+  totalCount: number;
+  totalPages: number;
+  filter: string | null;
+  brandFilter: string | null;
+  subBrands: boolean;
+  purchasedEvents: IPurchasedEventData[];
+  orders: IOrdersItemData[];
+}
+
+interface IOrdersResponse extends IAxiosResponseData {
+  data: {
+    attributes: IOrdersData;
+    relationships: Array<unknown>;
+    type: string;
+  };
+}
+
+// Single Order
+interface IOrderTicketType {
+  name: string;
+  currency: string;
+  price: string;
+  discount: string;
+  quantity: string;
+  total: string;
+  active: boolean;
+  hash: string;
+}
+
+interface IOrderAddOn {
+  currency: string;
+  name: string;
+  price: string;
+  quantity: string;
+  total: string;
+}
+
+interface IOrderTicketAddOn {
+  status: string;
+  name: string;
+}
+
+interface IOrderTicketData {
+  hash: string;
+  qrData: string;
+  ticketType: string;
+  description: string | null;
+  descriptionPlain: string | null;
+  holderName: string;
+  status: string;
+  eventName: string;
+  currency: string;
+  resaleFeeAmount: number;
+  holderEmail: string;
+  holderPhone: string | null;
+  isSellable: boolean;
+  pdfLink: string;
+  isOnSale: boolean;
+  addOns: IOrderTicketAddOn[];
+  ticketTypeHash: string;
+}
+
+interface IOrderData {
+  disableReferral: boolean;
+  personalShareLink: string;
+  salesReferred: string;
+  total: string;
+  items: {
+    ticketTypes: IOrderTicketType[];
+    addOns: IOrderAddOn[];
+  };
+  tickets: IOrderTicketData[];
+}
+
+interface IOrderResponse extends IAxiosResponseData {
+  data: {
+    attributes: IOrderData;
+    relationships: Array<unknown>;
+    type: string;
+  };
+}