tf-checkout-react 1.2.30 → 1.3.0

package/src/components/addonsContainer/utils/index.tsx

@@ -0,0 +1,207 @@
+import _isNull from 'lodash/isNull'
+import _reverse from 'lodash/reverse'
+import _sortBy from 'lodash/sortBy'
+
+interface ObjectLiteral {
+  [key: string]: any;
+}
+
+export const generateSelectOptions = (minCount = 1, maxCount = 10) => {
+  const options = []
+  for (let i = minCount; i <= maxCount; i++) {
+    options.push({ label: i, value: i })
+  }
+  return options
+}
+
+const generateStockBasedOnLimitations = (
+  addon: any,
+  ticketQuantity: number
+) => {
+  // Generate addon available stock count based on limitations
+  const { flagLimitToTicketQuantity, maxQuantity, limitPerTicket } = addon
+
+  let allowedStockCount
+
+  // Generate stock
+  if (flagLimitToTicketQuantity) {
+    // Limited to ticket quantity case
+    allowedStockCount = ticketQuantity
+  } else if (maxQuantity && limitPerTicket) {
+    const stockBasedOnLimitPerTicket = limitPerTicket * ticketQuantity
+    // Both maximum quantity and limited to per ticket selected case, stock is minimum of them
+    allowedStockCount =
+      maxQuantity <= stockBasedOnLimitPerTicket
+        ? maxQuantity
+        : stockBasedOnLimitPerTicket
+  } else if (maxQuantity && !limitPerTicket) {
+    // Limited to maximum quantity case
+    allowedStockCount = maxQuantity
+  } else if (!maxQuantity && limitPerTicket) {
+    // Limited to per ticket case
+    allowedStockCount = limitPerTicket * ticketQuantity
+  }
+
+  return Number(allowedStockCount)
+}
+
+const filterStockBasedOnAvailability = (
+  generatedStock: any,
+  availableStock: any
+) => {
+  //  Check generated stock count admissibility with addon stock availability
+  let filteredStockCount = generatedStock
+
+  if (generatedStock) {
+    if (generatedStock > availableStock && !_isNull(availableStock)) {
+      filteredStockCount = availableStock
+    }
+  } else {
+    // Not setted any restriction
+    if (_isNull(availableStock)) {
+      filteredStockCount = 10
+    } else {
+      filteredStockCount = availableStock
+    }
+  }
+
+  return filteredStockCount
+}
+
+export const getAddonSelectOptions = (addons: any, choosedTicketCount: any) => {
+  const addonsWithOptions: ObjectLiteral = {}
+  const groupsWithSelectedVariantsInfo: ObjectLiteral = {}
+  const groupsWithVariants: ObjectLiteral = {}
+
+  addons.forEach((addon: any) => {
+    // Here addon can act either as simple Addon or Addon Group
+    const {
+      id,
+      stock: simpleAddonStock,
+      variants,
+      active,
+      flagLimitToTicketQuantity,
+      maxQuantity,
+      limitPerTicket,
+    } = addon
+
+    if (variants) {
+      // Addon Group with inside addon variants case
+      variants.forEach((variant: any) => {
+        const { id: variantId, stock: variantStock } = variant
+
+        // null checking is for unlimited stock value
+        if (active && (variantStock > 0 || _isNull(variantStock))) {
+          // Generate Addon Group allowed stock count based on limitations
+          const stockBasedOnLimitation = generateStockBasedOnLimitations(
+            addon,
+            choosedTicketCount
+          )
+
+          // Detect if group has limitation or not
+          if (flagLimitToTicketQuantity || maxQuantity || limitPerTicket) {
+            // Generate Group with inside variants info
+            if (groupsWithSelectedVariantsInfo[id]) {
+              // Set group limit
+              if (
+                groupsWithSelectedVariantsInfo[id].limit <
+                stockBasedOnLimitation
+              ) {
+                groupsWithSelectedVariantsInfo[
+                  id
+                ].limit = stockBasedOnLimitation
+              }
+
+              // Set choosed variants info
+              groupsWithSelectedVariantsInfo[id] = {
+                ...groupsWithSelectedVariantsInfo[id],
+                choosedVariants: {
+                  ...groupsWithSelectedVariantsInfo[id].choosedVariants,
+                  [variantId]: 0,
+                },
+              }
+            } else {
+              groupsWithSelectedVariantsInfo[id] = {
+                limit: stockBasedOnLimitation,
+                selectedCount: 0,
+                choosedVariants: { [variantId]: 0 },
+              }
+            }
+          }
+
+          // Check stock admissibility with addon stock availability
+          const allowedVariantStockCount = filterStockBasedOnAvailability(
+            stockBasedOnLimitation,
+            variantStock
+          )
+
+          // Generate options for variant
+          const variantOptions = generateSelectOptions(
+            0,
+            allowedVariantStockCount
+          )
+
+          addonsWithOptions[variantId] = [...variantOptions]
+
+          // Generate Group with its variants list
+          groupsWithVariants[id] = {
+            ...groupsWithVariants[id],
+            [variantId]: allowedVariantStockCount,
+          }
+        }
+      })
+    } else {
+      // Simple addon case, null checking is for unlimited stock value
+      if (active && (simpleAddonStock > 0 || _isNull(simpleAddonStock))) {
+        // Generate Addon Group allowed stock count based on limitations
+        const stockBasedOnLimitation = generateStockBasedOnLimitations(
+          addon,
+          choosedTicketCount
+        )
+
+        // Check stock admissibility with addon stock availability
+        const allowedVariantStockCount = filterStockBasedOnAvailability(
+          stockBasedOnLimitation,
+          simpleAddonStock
+        )
+
+        const addonOptions = generateSelectOptions(0, allowedVariantStockCount)
+        addonsWithOptions[id] = [...addonOptions]
+      }
+    }
+  })
+
+  return {
+    addonsWithOptions,
+    groupsWithSelectedVariantsInfo,
+    groupsWithVariants,
+  }
+}
+
+export const getTicketRelatedAddons = (addons: any, ticketId: any) => {
+  // Filter addons based on choosed ticket
+  const filteredAddons: any = addons.filter((addon: any) => (
+    _isNull(addon.prerequisiteTicketTypeIds) || addon.prerequisiteTicketTypeIds.includes(ticketId)
+  ))
+
+  return filteredAddons
+}
+
+export const getSortedAddons = (addons: any, sortDirection = "asc") => {
+  const addonsCopy = [...addons]
+
+  addonsCopy.forEach(addon => {
+    if (addon.variants) {
+      addon.sortOrder = Number(addon.variants[0].sortOrder)
+    } else {
+      addon.sortOrder = Number(addon.sortOrder)
+    }
+  })
+
+  const sortedAddons = _sortBy(addonsCopy, addon => addon.sortOrder)
+  if (sortDirection === "desc") {
+    return _reverse(sortedAddons)
+  }
+
+  return sortedAddons
+}

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

@@ -310,6 +310,11 @@ export const BillingInfoContainer = React.memo(
     // Get prevProps
     const prevData = useRef(data)
 
+    const addAddOnsInAttributes = (checkoutBody: any) => {
+      const selectedAddOns = window.localStorage.getItem('add_ons') || '{}'
+      checkoutBody.attributes.add_ons = JSON.parse(selectedAddOns)
+    }
+
     useEffect(() => {
       const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
       const isEqualData = _isEqual(prevData.current, data)
@@ -414,6 +419,10 @@ export const BillingInfoContainer = React.memo(
           )
 
           try {
+            if (isWindowDefined) {
+              addAddOnsInAttributes(checkoutBody)
+            }
+
             const res = await postOnCheckout(checkoutBody, access_token)
             removeReferralKey()
             onSkipBillingPage(_get(res, 'data.data.attributes'))
@@ -429,9 +438,9 @@ export const BillingInfoContainer = React.memo(
     }, [skipPage, ticketsQuantity])
 
     const collectCheckoutBody = (
-      values: Record<string, unknown>,
+      values: Record<string, any>,
       profileData?: any
-    ): Record<string, unknown> => {
+    ): Record<string, any> => {
       let checkoutBody = {}
 
       // Auto collect ticket holders name when it was skipped optionally
@@ -509,19 +518,24 @@ export const BillingInfoContainer = React.memo(
             try {
               if (isLoggedIn) {
                 const checkoutBody = collectCheckoutBody(values, userData)
+
+                if (isWindowDefined) {
+                  addAddOnsInAttributes(checkoutBody)
+                }
+
                 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)
                   window.localStorage.setItem(
-                      'user_data',
-                      JSON.stringify(profileDataObj)
+                    'user_data',
+                    JSON.stringify(profileDataObj)
                   )
                 }
 
@@ -608,6 +622,11 @@ export const BillingInfoContainer = React.memo(
               }
 
               const checkoutBody = collectCheckoutBody(values, profileDataObj)
+
+              if (isWindowDefined) {
+                addAddOnsInAttributes(checkoutBody)
+              }
+
               const res = await postOnCheckout(checkoutBody)
               removeReferralKey()
               handleSubmit(
@@ -731,7 +750,11 @@ export const BillingInfoContainer = React.memo(
                                   ].includes(element.name) &&
                                   isLoggedIn ? null : (
                                     <React.Fragment key={element.uniqueId}>
-                                      <div className={element.className}>
+                                      <div
+                                        className={`${element.className} ${
+                                          props?.errors[element.name]
+                                        }`}
+                                      >
                                         {element.component ? (
                                           element.component
                                         ) : (

package/src/components/common/SelectField.tsx

@@ -1,11 +1,10 @@
-import React from 'react'
+import { FormControl, FormHelperText, InputLabel } from '@mui/material'
 import Select from '@mui/material/Select'
-import _map from 'lodash/map'
-import _get from 'lodash/get'
-
-import { FieldInputProps, FormikProps } from 'formik'
-import { FormControl, InputLabel, FormHelperText } from '@mui/material'
 import { useTheme } from '@mui/styles'
+import { FieldInputProps, FormikProps } from 'formik'
+import _get from 'lodash/get'
+import _map from 'lodash/map'
+import React from 'react'
 
 export interface ISelectOption {
   label: string | number;
@@ -23,6 +22,7 @@ export interface ISelectField {
   // optional
   type?: string;
   selectOptions?: ISelectOption[];
+  onChange?: (e: any) => void;
 }
 
 interface IOtherProps {
@@ -34,8 +34,9 @@ export const SelectField = ({
   type = 'text',
   field,
   selectOptions = [] as ISelectOption[],
-  form: { touched, errors },
+  form: { touched, errors, setFieldValue },
   theme,
+  onChange = () => {},
 }: ISelectField & IOtherProps) => {
   const isTouched = Boolean(_get(touched, field.name))
   const error = _get(errors, field.name)
@@ -44,7 +45,12 @@ export const SelectField = ({
 
   return (
     <FormControl fullWidth={true}>
-      <InputLabel style={customTheme?.input} htmlFor={field.name} error={!!error && isTouched} shrink={true}>
+      <InputLabel
+        style={customTheme?.input}
+        htmlFor={field.name}
+        error={!!error && isTouched}
+        shrink={true}
+      >
         {label}
       </InputLabel>
       <Select
@@ -61,6 +67,10 @@ export const SelectField = ({
         MenuProps={{ className: theme }}
         {...field}
         style={customTheme?.input}
+        onChange={e => {
+          onChange(e)
+          setFieldValue(field.name, e.target.value)
+        }}
       >
         {_map(selectOptions, option => (
           <option

package/src/components/index.ts

@@ -6,3 +6,4 @@ export { MyTicketsContainer } from './myTicketsContainer'
 export { OrderDetailsContainer } from './orderDetailsContainer'
 export { ResetPasswordContainer } from './resetPasswordContainer'
 export { TicketResaleContainer } from './ticketResale'
+export { AddonsContainter } from './addonsContainer'

package/src/components/orderDetailsContainer/index.tsx

@@ -49,6 +49,7 @@ 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 || !_has(data, 'items.ticket_types.length')) return ''
 
   return data.items.ticket_types[0].currency + data.total
@@ -234,26 +235,28 @@ export const OrderDetailsContainer = ({
                 </div>
               </div>
             </div>
-            <div className="personal-link">
-              <div className="link-item">
-                <span>Personal Share Link: </span>
-                <a
-                  href={data?.personal_share_link}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {Boolean(personalLinkIcon) && (
-                    <img src={personalLinkIcon} alt="Icon" />
-                  )}
-                  {data?.personal_share_link}
-                </a>
-              </div>
-              {data?.sales_referred ? (
+            {!data?.disable_referral &&
+              (<div className="personal-link">
                 <div className="link-item">
-                  <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
+                  <span>Personal Share Link: </span>
+                  <a
+                      href={data?.personal_share_link}
+                      target="_blank"
+                      rel="noreferrer"
+                  >
+                    {Boolean(personalLinkIcon) && (
+                        <img src={personalLinkIcon} alt="Icon"/>
+                    )}
+                    {data?.personal_share_link}
+                  </a>
                 </div>
-              ) : null}
-            </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>)
+            }
             <TableContainer component={Paper}>
               <Table className="tt-type" aria-label="collapsible table">
                 <TableHead>

package/src/components/paymentContainer/index.tsx

@@ -26,7 +26,11 @@ import {
   handleFreeSuccess,
   handlePaymentSuccess,
 } from '../../api'
-import { IOrderData, IPaymentField } from '../../types'
+import {
+  createFixedFloatNormalizer,
+  currencyNormalizerCreator,
+} from '../../normalizers'
+import { IAddOn, IOrderData, IPaymentField } from '../../types'
 import { CONFIGS } from '../../utils'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 import { Loader } from '../common/index'
@@ -81,6 +85,7 @@ const initialOrderValues: IOrderData = {
   price: '',
   total: '',
   currency: '',
+  add_ons: [] as IAddOn[],
 }
 const initialReviewValues = {
   order_details: {
@@ -146,6 +151,7 @@ export const PaymentContainer = ({
             price: ticket?.price,
             total: order_details?.total,
             currency: order_details?.currency,
+            add_ons: order_details?.add_ons || [],
           }
           setOrderData(orderData)
           onGetPaymentDataSuccess(response.data)
@@ -235,11 +241,35 @@ export const PaymentContainer = ({
                   className = '',
                   normalizer = _identity,
                 } = field
+                const { currency } = orderData
+                const value = orderData[id as keyof IOrderData]
+
                 return (
                   <div key={id} className="order_info_block">
                     <div className="order_info_title">{label}</div>
                     <div className={`${className} order_info_text`}>
-                      {normalizer(orderData[id], orderData.currency)}
+                      {typeof value === 'string'
+                        ? normalizer(value, currency)
+                        : _map(value, item => (
+                            <div key={item.id} className="add-on-container">
+                              <span>{item.quantity}</span>
+                              <span className="add-on-x">{' x '}</span>
+                              <span>
+                                {item.groupName ? item.groupName + ' - ' : ''}
+                              </span>
+                              <span>{item.name}</span>
+                              <span>{' - '}</span>
+                              <span>
+                                {currencyNormalizerCreator(
+                                  createFixedFloatNormalizer(2)(
+                                    parseFloat(item.price)
+                                  ),
+                                  currency
+                                )}
+                              </span>
+                              <span className="add-on-each">{' each'}</span>
+                            </div>
+                          ))}
                     </div>
                   </div>
                 )

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -9,8 +9,8 @@ interface ITicketsSectionProps {
   selectedTickets: any;
   handleTicketSelect: any;
   sortBySoldOut: boolean;
-  ticketsHeaderComponent?: ReactNode,
-  hideTicketsHeader: boolean,
+  ticketsHeaderComponent?: ReactNode;
+  hideTicketsHeader: boolean;
 }
 
 export const TicketsSection = ({
@@ -60,7 +60,7 @@ export const TicketsSection = ({
                 {ticketIsDiscounted && (
                   <p className="old-price">$ {(+ticket.oldPrice).toFixed(2)}</p>
                 )}
-                <p>{ticketPrice}</p>
+                <p className={isSoldOut ? 'sold-out' : ''}>{ticketPrice}</p>
                 {!isSoldOut && !ticketIsFree && (
                   <p className="fees">
                     {ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}

package/src/components/ticketsContainer/index.tsx

@@ -8,6 +8,7 @@ import axios, { AxiosError } from 'axios'
 import jwt_decode from 'jwt-decode'
 import _find from 'lodash/find'
 import _get from 'lodash/get'
+import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _some from 'lodash/some'
 import React, { ReactNode, useEffect, useRef, useState } from 'react'
@@ -15,6 +16,7 @@ import Button from 'react-bootstrap/Button'
 
 import {
   addToCart,
+  getCheckoutPageConfigs,
   getEvent,
   getTickets,
   logout,
@@ -43,6 +45,7 @@ interface CartSuccess {
   event_id: string;
   hash?: string;
   total?: string;
+  hasAddOn?: boolean;
 }
 
 export interface IGetTickets {
@@ -96,11 +99,11 @@ export const TicketsContainer = ({
   eventId,
   onAddToCartSuccess,
   contentStyle = {},
-  onAddToCartError = () => {},
-  onGetTicketsSuccess = () => {},
-  onGetTicketsError = () => {},
-  onLogoutSuccess = () => {},
-  onLogoutError = () => {},
+  onAddToCartError = _identity,
+  onGetTicketsSuccess = _identity,
+  onGetTicketsError = _identity,
+  onLogoutSuccess = _identity,
+  onLogoutError = _identity,
   theme = 'light',
   queryPromoCode = '',
   isPromotionsEnabled = true,
@@ -216,6 +219,7 @@ export const TicketsContainer = ({
     } catch (e) {
       if (axios.isAxiosError(e)) {
         onGetTicketsError(e)
+        setError(_get(e, 'response.data.message'))
       }
     } finally {
       setIsLoading(false)
@@ -274,22 +278,24 @@ export const TicketsContainer = ({
 
     try {
       const result = await addToCart(eventId, data)
-      if (result.status === 200) {
-        const skipBillingPage =
-          result?.data?.data?.attributes?.skip_billing_page ?? false
-        const nameIsRequired =
-          result?.data?.data?.attributes?.names_required ?? false
-        const ageIsRequired =
-          result?.data?.data?.attributes?.age_required ?? false
-        const phoneIsRequired =
-          result?.data?.data?.attributes?.phone_required ?? false
+      const pageConfigsDataResponse = await getCheckoutPageConfigs()
+      if (result.status === 200 && pageConfigsDataResponse.status === 200) {
+        const pageConfigsData =
+          _get(pageConfigsDataResponse, 'data.attributes') || {}
+
+        const skipBillingPage = pageConfigsData.skip_billing_page ?? false
+        const nameIsRequired = pageConfigsData.names_required ?? false
+        const ageIsRequired = pageConfigsData.age_required ?? false
+        const phoneIsRequired = pageConfigsData.phone_required ?? false
+        const hasAddOn = pageConfigsData.has_add_on ?? false
 
         let hash = ''
         let total = ''
 
-        if (skipBillingPage) {
+        const isWindowDefined = typeof window !== 'undefined'
+
+        if (skipBillingPage && !hasAddOn) {
           // Get user data for checkout data
-          const isWindowDefined = typeof window !== 'undefined'
           const userData =
             isWindowDefined && window.localStorage.getItem('user_data')
               ? JSON.parse(window.localStorage.getItem('user_data') || '')
@@ -313,6 +319,13 @@ export const TicketsContainer = ({
           total = _get(checkoutResult, 'data.data.attributes.total')
         }
 
+        if (hasAddOn && isWindowDefined) {
+          window.localStorage.setItem(
+            'tickets_quantity',
+            String(ticketQuantity)
+          )
+        }
+
         onAddToCartSuccess({
           skip_billing_page: skipBillingPage,
           names_required: nameIsRequired,
@@ -321,6 +334,7 @@ export const TicketsContainer = ({
           event_id: String(eventId),
           hash,
           total,
+          hasAddOn,
         })
       }
     } catch (e) {
@@ -411,7 +425,12 @@ export const TicketsContainer = ({
       {!isLoading && <ReferralLogic eventId={eventId} />}
       <div className={`get-tickets-page ${theme}`} style={contentStyle}>
         {error && (
-          <Alert severity="error" onClose={onErrorClose} variant="filled" style={{ width:'350px' }}>
+          <Alert
+            severity="error"
+            onClose={onErrorClose}
+            variant="filled"
+            style={{ width: '350px' }}
+          >
             {error}
           </Alert>
         )}

package/src/components/ticketsContainer/utils.ts

@@ -1,7 +1,7 @@
 export const getTicketSelectOptions = (
-  maxCount: number = 10,
-  minCount: number = 1,
-  multiplier: number = 1
+  maxCount = 10,
+  minCount = 1,
+  multiplier = 1
 ) => {
   const options = [{ label: 0, value: 0 }]
   for (let i = minCount; i <= Math.min(50, maxCount); i += multiplier) {

package/src/index.ts

@@ -14,4 +14,5 @@ export { TicketResaleContainer } from './components'
 export { RedirectModal } from './components/common/RedirectModal'
 export { RsvpContainer } from './components/rsvpContainer'
 export { ResetPasswordContainer } from './components/resetPasswordContainer'
-export { ForgotPasswordModal } from './components/forgotPasswordModal'
+export { ForgotPasswordModal } from './components/forgotPasswordModal'
+export { AddonsContainter } from './components/addonsContainer'

package/src/types/add_on.ts

@@ -0,0 +1,7 @@
+export interface IAddOn {
+  id: string | number;
+  name: string;
+  groupName: string | null;
+  price: string;
+  quantity: string | number;
+}

package/src/types/checkoutPageConfigs.ts

@@ -0,0 +1,9 @@
+export interface ICheckoutPageConfigs {
+  age_required: boolean;
+  event_id: string;
+  has_add_on: boolean;
+  minimum_age: number | string | null;
+  names_required: boolean;
+  phone_required: boolean;
+  skip_billing_page: boolean;
+}

package/src/types/index.ts

@@ -2,3 +2,5 @@ export { IBillingInfoData, IFieldData, IGroupItem } from './billing-info-data'
 export { IOrderData } from './order-data'
 export { IPaymentField } from './payment-field'
 export { IReferralPromotion } from './referral-promotion'
+export { ICheckoutPageConfigs } from './checkoutPageConfigs'
+export { IAddOn } from './add_on'

package/src/types/order-data.ts

@@ -1,10 +1,11 @@
+import { IAddOn } from './add_on'
+
 export interface IOrderData {
   product_name: string;
   ticketType: string;
   quantity: string;
   price: string;
   total: string;
-  currency: string,
-  [key: string]: string;
+  currency: string;
+  add_ons: IAddOn[];
 }
-