tf-checkout-react 1.7.20 → 1.7.23

package/package.json

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

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;
 }