tf-checkout-react 1.7.20 → 1.7.30

package/dist/types/checkoutPageConfigs.d.ts

@@ -9,4 +9,5 @@ export interface ICheckoutPageConfigs {
     free_ticket: boolean;
     collect_optional_wallet_address: boolean;
     collect_mandatory_wallet_address: boolean;
+    addon_max_quantity_groups?: number | null;
 }

package/package.json

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

package/src/api/index.ts

@@ -132,6 +132,7 @@ export interface AttributesConfig {
   collect_mandatory_instagram: boolean;
   collect_optional_instagram: boolean;
   skip_billing_page: boolean;
+  addon_max_quantity_groups: number | null;
   cart: ICart[];
 }
 

package/src/components/addonsContainer/AddonComponent.tsx

@@ -24,6 +24,8 @@ interface IAddonComponentProps {
   errors: any;
   useStepperQty?: boolean;
   siblingIds?: string[];
+  allAddonIds?: string[];
+  maxTotalQuantity?: number;
   onCustomFieldChange?: (
     addon: any,
     groupId: string | number,
@@ -32,19 +34,29 @@ interface IAddonComponentProps {
   ) => void;
 }
 
-const AddonStepper = ({ id, selectOptions, handleAddonChange, classNamePrefix, siblingIds = [] }: any) => {
+const AddonStepper = ({ id, selectOptions, handleAddonChange, classNamePrefix, siblingIds = [], allAddonIds = [], maxTotalQuantity }: any) => {
   const { values, setFieldValue } = useFormikContext<any>()
   const qty = Number(values[id] ?? 0)
   const max = selectOptions?.length > 0 ? selectOptions[selectOptions.length - 1].value : 0
 
+  const totalSelected = allAddonIds.length > 0
+    ? allAddonIds.reduce((sum: number, aid: string) => sum + Number(values[aid] ?? 0), 0)
+    : 0
+
   const change = (next: number) => {
-    if (next > 0) {
-      siblingIds.forEach((siblingId: string) => setFieldValue(siblingId, 0))
+    if (next > qty) {
+      if (maxTotalQuantity != null) {
+        allAddonIds.forEach((aid: string) => { if (aid !== id) setFieldValue(aid, 0) })
+      } else {
+        siblingIds.forEach((siblingId: string) => setFieldValue(siblingId, 0))
+      }
     }
     setFieldValue(id, next)
     handleAddonChange(id, next)
   }
 
+  const incrementDisabled = qty >= max || (maxTotalQuantity != null && totalSelected >= maxTotalQuantity && qty === 0)
+
   return (
     <div className={`${classNamePrefix}_stepper`}>
       <button
@@ -61,7 +73,7 @@ const AddonStepper = ({ id, selectOptions, handleAddonChange, classNamePrefix, s
         type="button"
         className={`${classNamePrefix}_stepper__btn`}
         onClick={() => change(qty + 1)}
-        disabled={qty >= max}
+        disabled={incrementDisabled}
         aria-label="Increase quantity"
       >
         +
@@ -81,6 +93,8 @@ const AddonComponent = ({
   errors,
   useStepperQty = false,
   siblingIds = [],
+  allAddonIds = [],
+  maxTotalQuantity,
   onCustomFieldChange = _identity,
 }: IAddonComponentProps) => {
   const { id, name, active, stock } = data
@@ -107,6 +121,8 @@ const AddonComponent = ({
                       handleAddonChange={handleAddonChange}
                       classNamePrefix={classNamePrefix}
                       siblingIds={siblingIds}
+                      allAddonIds={allAddonIds}
+                      maxTotalQuantity={maxTotalQuantity}
                     />
                   </div>
                 ) : (

package/src/components/addonsContainer/SimpleAddonsContainer.tsx

@@ -31,6 +31,8 @@ export interface ISimpleAddonContainerProps {
   configs: any;
   eventId: string;
   useStepperQty?: boolean;
+  maxTotalQuantity?: number;
+  addonMaxQuantityGroups?: number;
   onAddOnSelect?: (id: string, value: string, addon: any, fieldUpdates: any) => void;
   handleConfirm?: (values: any) => void;
 }
@@ -48,6 +50,7 @@ export const SimpleAddonsContainer = ({
   configs,
   eventId,
   useStepperQty = false,
+  addonMaxQuantityGroups,
   onAddOnSelect = _identity,
   handleConfirm = _identity,
 }: ISimpleAddonContainerProps) => {
@@ -56,6 +59,7 @@ export const SimpleAddonsContainer = ({
   const [groupsWithSelectedVariants, setGroupsWithSelectedVariants] = useState<any>({})
   const [groupsWithInitialVariantsValues, setGroupsWithInitialVariantsValues] =
     useState<any>({})
+  const [crossGroupSelections, setCrossGroupSelections] = useState<ObjectLiteral>({})
   const [loading, setLoading] = useState(true)
 
   const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
@@ -206,6 +210,34 @@ export const SimpleAddonsContainer = ({
     }
   }
 
+  // Cross-group cap: when addonMaxQuantityGroups is set, limits total selections
+  // across ALL addon groups to that number by capping each stepper's max.
+  const effectiveAddonsOptions = useMemo(() => {
+    if (!addonMaxQuantityGroups) return addonsOptions
+
+    const totalSelected = Object.values(crossGroupSelections).reduce(
+      (sum: number, v: any) => sum + Number(v), 0
+    )
+    const globalRemaining = addonMaxQuantityGroups - totalSelected
+    const result: ObjectLiteral = {}
+
+    for (const id in addonsOptions) {
+      const opts = addonsOptions[id] || []
+      const sdkMax = opts.length ? opts[opts.length - 1].value : 0
+      const currSelected = Number(crossGroupSelections[id] || 0)
+      const allowedMax = Math.max(0, Math.min(sdkMax, globalRemaining + currSelected))
+      result[id] = opts.filter((opt: any) => opt.value <= allowedMax)
+    }
+
+    return result
+  }, [addonsOptions, crossGroupSelections, addonMaxQuantityGroups])
+
+  const handleCrossGroupChange = (id: any, value: any) => {
+    if (addonMaxQuantityGroups) {
+      setCrossGroupSelections((prev: ObjectLiteral) => ({ ...prev, [id]: Number(value) }))
+    }
+  }
+
   const initialValues = useMemo(() => {
     const addOnsData: any = {}
     if (addons?.length > 0 && addOnDataWithCustomFields?.fields?.length > 0) {
@@ -252,7 +284,8 @@ export const SimpleAddonsContainer = ({
             // Real-time validation can be handled here if needed
           }}
         >
-          {({ values, errors, setFieldTouched }) => (
+          {({ values, errors, setFieldTouched }) => {
+            return (
             <Form autoComplete="off" className="form_holder">
               <>
                 {addons.map((addon: any) => {
@@ -359,11 +392,11 @@ export const SimpleAddonsContainer = ({
                             <AddonComponent
                               key={variant.id}
                               data={variant}
-                              selectOptions={addonsOptions[variant.id]}
+                              selectOptions={effectiveAddonsOptions[variant.id]}
                               classNamePrefix={classNamePrefix}
                               siblingIds={addon.variants.filter((v: any) => v.id !== variant.id).map((v: any) => v.id)}
                               handleAddonChange={(id, value) => {
-                                console.log('handleAddonChange', id, value)
+                                handleCrossGroupChange(id, value)
                                 onFieldChange(id, value, addon)
                                 const fieldUpdates = collectAddonFieldUpdates(
                                   addon,
@@ -384,9 +417,10 @@ export const SimpleAddonsContainer = ({
                           <AddonComponent
                             key={addon.id}
                             data={addon}
-                            selectOptions={addonsOptions[addon.id]}
+                            selectOptions={effectiveAddonsOptions[addon.id]}
                             classNamePrefix={classNamePrefix}
                             handleAddonChange={(id, value) => {
+                              handleCrossGroupChange(id, value)
                               onFieldChange(id, value, addon)
                               const fieldUpdates = collectAddonFieldUpdates(addon, values)
                               onAddOnSelect(id, value, addon, fieldUpdates)
@@ -415,7 +449,7 @@ export const SimpleAddonsContainer = ({
                 })}
               </>
             </Form>
-          )}
+          )}}
         </Formik>
       </div>
     </div>

package/src/components/addonsContainer/index.tsx

@@ -38,6 +38,7 @@ export interface IAddonContainterProps {
 
   onAddOnSelect?: (id: string, value: string, addon: any) => void;
   useStepperQty?: boolean;
+  addonMaxQuantityGroups?: number;
 }
 
 

package/src/components/billing-info-container/hooks/usePaymentRedirect.ts

@@ -50,7 +50,6 @@ export const usePaymentRedirect = ({
       const clientSecret = urlParams.get('payment_intent_client_secret')
 
       if (isPaymentReturn && clientSecret && stripeRef.current) {
-        console.log('Detected payment redirect return, checking status')
         setLoading(true)
 
         try {
@@ -68,7 +67,6 @@ export const usePaymentRedirect = ({
           )
 
           if (paymentIntent?.status === 'succeeded') {
-            console.log('Payment succeeded after redirect, continuing flow')
 
             // Clean up stored context
             localStorage.removeItem('stripe_payment_context')

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

@@ -495,6 +495,7 @@ const BillingInfoContainer = React.memo(
     const collectMandatoryBusinessCategory = configs?.collect_mandatory_business_category
     const collectOptionalBusinessCategory = configs?.collect_optional_business_category
     const eventHasAddons = configs?.has_add_on
+    const addonMaxQuantityGroups = configs?.addon_max_quantity_groups ?? undefined
     const hideBusinessCategoryField =
       !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
 
@@ -636,8 +637,6 @@ const BillingInfoContainer = React.memo(
               is_from_resale: additionalConfigs?.resale,
             },
           })
-          console.log('Stripe in [useEffect] fetchCheckoutUpdate', checkoutUpdateResponse)
-
           if (checkoutUpdateResponse.success) {
             const checkoutAttributes = checkoutUpdateResponse.data.attributes
             const cartPriceBreakdown = _get(
@@ -649,10 +648,6 @@ const BillingInfoContainer = React.memo(
               'checkoutData',
               JSON.stringify({ hash: '', total: _get(cartPriceBreakdown, 'total', 0) })
             )
-            console.log(
-              'Stripe in [useEffect] fetchCheckoutUpdate | checkoutAttributes',
-              checkoutAttributes
-            )
             setCheckoutUpdateData(checkoutAttributes)
             onCheckoutUpdateSuccess({ expires_at: expirationTime, ...cartPriceBreakdown })
           }
@@ -923,7 +918,6 @@ const BillingInfoContainer = React.memo(
       },
       [eventId, isSinglePageCheckout, onCheckoutUpdateError, onCheckoutUpdateSuccess]
     )
-    console.log({ checkoutData })
 
     const handleAddOnSelect = useCallback(
       async (selectedAddOns: { [key: string]: number }) => {
@@ -1150,11 +1144,6 @@ const BillingInfoContainer = React.memo(
                     is_from_resale: additionalConfigs?.resale,
                   },
                 })
-                console.log(
-                  'Stripe checkoutUpdateResponse in billing-info-container',
-                  checkoutUpdateResponse
-                )
-
                 setCheckoutUpdateData(checkoutUpdateResponse.data.attributes)
 
                 let paymentResponse = null
@@ -1167,7 +1156,6 @@ const BillingInfoContainer = React.memo(
 
                   if (paymentDataResponse.success) {
                     const { attributes } = paymentDataResponse.data
-                    console.log('Stripe confirmPayment success in billing-info-container')
                     setReviewData(attributes)
 
                     const { order_details, cart } = attributes
@@ -1196,9 +1184,6 @@ const BillingInfoContainer = React.memo(
                     const isFreeTickets =
                       (!Number(total) && !Number(updatedOrderData.total)) ||
                       !Number(updatedOrderData?.pay_now || 0)
-                    const paymentMethod = attributes.payment_method || {}
-                    const paymentPlanAvailable = paymentMethod.stripe_payment_plan_enabled
-                    console.log({ paymentPlanAvailable })
                     // Process payment using the hook
                     paymentResponse = await processPayment(
                       paymentDataResponse,
@@ -1353,6 +1338,7 @@ const BillingInfoContainer = React.memo(
                       addOnDataWithCustomFields={addOnDataWithCustomFields}
                       configs={configs}
                       onAddOnSelect={onAddOnSelect}
+                      addonMaxQuantityGroups={addonMaxQuantityGroups}
                     />
                   ) : !addOnsIncludedOnInvitation &&
                     includeAddons &&

package/src/components/paymentContainer/index.tsx

@@ -20,10 +20,9 @@ import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
-import { nanoid } from 'nanoid'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
-import { getConditions, getPaymentData } from '../../api'
+import { getPaymentData } from '../../api'
 import { FEES_STYLES } from '../../constants'
 import { usePixel } from '../../hooks/usePixel'
 import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
@@ -177,7 +176,6 @@ export const PaymentContainer = ({
   const [error, setError] = useState(null)
   const [paymentIsLoading, setPaymentIsLoading] = useState(false)
   const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
-  const [conditions, setConditions] = useState<{ id: string, text: string }[]>([])
   const [currency, setCurrency] = useState('')
   const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
 
@@ -201,7 +199,6 @@ export const PaymentContainer = ({
   const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
   usePixel(eventId, { page: 'review', pageUrl })
 
-  console.log({ conditions })
 
   useEffect(() => {
     const fetchPaymentData = async () => {
@@ -270,27 +267,6 @@ export const PaymentContainer = ({
     onGetPaymentDataSuccess,
   ])
 
-  //just once
-  useEffect(() => {
-    // fetch conditions data
-    const fetchConditions = async () => {
-      if (eventId) {
-        const conditionsResponse = await getConditions(eventId)
-        const conditionsInfo = conditionsResponse.data.attributes
-        setConditions(
-          conditionsInfo
-            ? conditionsInfo.map((item: { text: any }) => ({
-                id: nanoid(),
-                text: item.text,
-                checked: false,
-              }))
-            : []
-        )
-      }
-    }
-    fetchConditions()
-  }, [eventId])
-
   const showPaymentForm = () => {
     if (hidePaymentForm) {
       return false
@@ -375,10 +351,6 @@ export const PaymentContainer = ({
 
   useEffect(() => {
     const paymentMethod = reviewData.payment_method || {}
-    console.log({
-      paymentMethod,
-      enablePaymentPlan,
-    })
     const paymentPlanAvailable =
       paymentMethod.stripe_payment_plan_enabled && enablePaymentPlan
     setPaymentPlanIsAvailable(paymentPlanAvailable)

package/src/components/registerForm/index.tsx

@@ -114,7 +114,6 @@ export const RegistrationForm: FC<IRegistrationProps> = ({
       onRegisterAccountSuccess(profileRes)
     } catch (e) {
       if (axios.isAxiosError(e)) {
-        console.log(e)
         const errorMessage = _get(e, 'response.data.message') || 'Error'
         onRegisterAccountError(e)
         setshowErrorModal(true)

package/src/types/checkoutPageConfigs.ts

@@ -9,4 +9,5 @@ export interface ICheckoutPageConfigs {
   free_ticket: boolean;
   collect_optional_wallet_address: boolean;
   collect_mandatory_wallet_address: boolean;
+  addon_max_quantity_groups?: number | null;
 }