tf-checkout-react 1.7.20 → 1.7.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/addonsContainer/AddonComponent.d.ts +3 -1
- package/dist/components/addonsContainer/SimpleAddonsContainer.d.ts +3 -1
- package/dist/components/addonsContainer/index.d.ts +1 -0
- package/dist/tf-checkout-react.cjs.development.js +71 -16
- package/dist/tf-checkout-react.cjs.development.js.map +1 -1
- package/dist/tf-checkout-react.cjs.production.min.js +1 -1
- package/dist/tf-checkout-react.cjs.production.min.js.map +1 -1
- package/dist/tf-checkout-react.esm.js +71 -16
- package/dist/tf-checkout-react.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/addonsContainer/AddonComponent.tsx +20 -4
- package/src/components/addonsContainer/SimpleAddonsContainer.tsx +39 -5
- package/src/components/addonsContainer/index.tsx +1 -0
|
@@ -10,7 +10,9 @@ interface IAddonComponentProps {
|
|
|
10
10
|
errors: any;
|
|
11
11
|
useStepperQty?: boolean;
|
|
12
12
|
siblingIds?: string[];
|
|
13
|
+
allAddonIds?: string[];
|
|
14
|
+
maxTotalQuantity?: number;
|
|
13
15
|
onCustomFieldChange?: (addon: any, groupId: string | number, fieldName: string, value: any) => void;
|
|
14
16
|
}
|
|
15
|
-
declare const AddonComponent: ({ classNamePrefix, data, selectOptions, handleAddonChange, addOnDataWithCustomFields, configs, values, errors, useStepperQty, siblingIds, onCustomFieldChange, }: IAddonComponentProps) => JSX.Element;
|
|
17
|
+
declare const AddonComponent: ({ classNamePrefix, data, selectOptions, handleAddonChange, addOnDataWithCustomFields, configs, values, errors, useStepperQty, siblingIds, allAddonIds, maxTotalQuantity, onCustomFieldChange, }: IAddonComponentProps) => JSX.Element;
|
|
16
18
|
export default AddonComponent;
|
|
@@ -8,11 +8,13 @@ export interface ISimpleAddonContainerProps {
|
|
|
8
8
|
configs: any;
|
|
9
9
|
eventId: string;
|
|
10
10
|
useStepperQty?: boolean;
|
|
11
|
+
maxTotalQuantity?: number;
|
|
12
|
+
addonMaxQuantityGroups?: number;
|
|
11
13
|
onAddOnSelect?: (id: string, value: string, addon: any, fieldUpdates: any) => void;
|
|
12
14
|
handleConfirm?: (values: any) => void;
|
|
13
15
|
}
|
|
14
16
|
export interface ObjectLiteral {
|
|
15
17
|
[key: string]: any;
|
|
16
18
|
}
|
|
17
|
-
export declare const SimpleAddonsContainer: ({ classNamePrefix, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, descriptionTrigger, addOnDataWithCustomFields, configs, eventId, useStepperQty, onAddOnSelect, handleConfirm, }: ISimpleAddonContainerProps) => JSX.Element;
|
|
19
|
+
export declare const SimpleAddonsContainer: ({ classNamePrefix, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, descriptionTrigger, addOnDataWithCustomFields, configs, eventId, useStepperQty, addonMaxQuantityGroups, onAddOnSelect, handleConfirm, }: ISimpleAddonContainerProps) => JSX.Element;
|
|
18
20
|
export default SimpleAddonsContainer;
|
|
@@ -17,5 +17,6 @@ export interface IAddonContainterProps {
|
|
|
17
17
|
configs: any;
|
|
18
18
|
onAddOnSelect?: (id: string, value: string, addon: any) => void;
|
|
19
19
|
useStepperQty?: boolean;
|
|
20
|
+
addonMaxQuantityGroups?: number;
|
|
20
21
|
}
|
|
21
22
|
export declare const AddonsContainter: ({ classNamePrefix, enableBillingInfoAutoCreate, enableTimer, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, onPostCheckoutSuccess, onPostCheckoutError, onConfirmSelectionSuccess, onConfirmSelectionError, onCountdownFinish, onPendingVerification, samePage, descriptionTrigger, addOnDataWithCustomFields, configs, onAddOnSelect, useStepperQty, }: IAddonContainterProps) => JSX.Element | null;
|
|
@@ -3612,21 +3612,35 @@ var AddonStepper = function AddonStepper(_ref) {
|
|
|
3612
3612
|
handleAddonChange = _ref.handleAddonChange,
|
|
3613
3613
|
classNamePrefix = _ref.classNamePrefix,
|
|
3614
3614
|
_ref$siblingIds = _ref.siblingIds,
|
|
3615
|
-
siblingIds = _ref$siblingIds === void 0 ? [] : _ref$siblingIds
|
|
3615
|
+
siblingIds = _ref$siblingIds === void 0 ? [] : _ref$siblingIds,
|
|
3616
|
+
_ref$allAddonIds = _ref.allAddonIds,
|
|
3617
|
+
allAddonIds = _ref$allAddonIds === void 0 ? [] : _ref$allAddonIds,
|
|
3618
|
+
maxTotalQuantity = _ref.maxTotalQuantity;
|
|
3616
3619
|
var _useFormikContext = formik.useFormikContext(),
|
|
3617
3620
|
values = _useFormikContext.values,
|
|
3618
3621
|
setFieldValue = _useFormikContext.setFieldValue;
|
|
3619
3622
|
var qty = Number((_values$id = values[id]) != null ? _values$id : 0);
|
|
3620
3623
|
var max = (selectOptions == null ? void 0 : selectOptions.length) > 0 ? selectOptions[selectOptions.length - 1].value : 0;
|
|
3624
|
+
var totalSelected = allAddonIds.length > 0 ? allAddonIds.reduce(function (sum, aid) {
|
|
3625
|
+
var _values$aid;
|
|
3626
|
+
return sum + Number((_values$aid = values[aid]) != null ? _values$aid : 0);
|
|
3627
|
+
}, 0) : 0;
|
|
3621
3628
|
var change = function change(next) {
|
|
3622
|
-
if (next >
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3629
|
+
if (next > qty) {
|
|
3630
|
+
if (maxTotalQuantity != null) {
|
|
3631
|
+
allAddonIds.forEach(function (aid) {
|
|
3632
|
+
if (aid !== id) setFieldValue(aid, 0);
|
|
3633
|
+
});
|
|
3634
|
+
} else {
|
|
3635
|
+
siblingIds.forEach(function (siblingId) {
|
|
3636
|
+
return setFieldValue(siblingId, 0);
|
|
3637
|
+
});
|
|
3638
|
+
}
|
|
3626
3639
|
}
|
|
3627
3640
|
setFieldValue(id, next);
|
|
3628
3641
|
handleAddonChange(id, next);
|
|
3629
3642
|
};
|
|
3643
|
+
var incrementDisabled = qty >= max || maxTotalQuantity != null && totalSelected >= maxTotalQuantity && qty === 0;
|
|
3630
3644
|
return React__default.createElement("div", {
|
|
3631
3645
|
className: classNamePrefix + "_stepper"
|
|
3632
3646
|
}, React__default.createElement("button", {
|
|
@@ -3645,7 +3659,7 @@ var AddonStepper = function AddonStepper(_ref) {
|
|
|
3645
3659
|
onClick: function onClick() {
|
|
3646
3660
|
return change(qty + 1);
|
|
3647
3661
|
},
|
|
3648
|
-
disabled:
|
|
3662
|
+
disabled: incrementDisabled,
|
|
3649
3663
|
"aria-label": "Increase quantity"
|
|
3650
3664
|
}, "+"));
|
|
3651
3665
|
};
|
|
@@ -3664,6 +3678,9 @@ var AddonComponent = function AddonComponent(_ref2) {
|
|
|
3664
3678
|
useStepperQty = _ref2$useStepperQty === void 0 ? false : _ref2$useStepperQty,
|
|
3665
3679
|
_ref2$siblingIds = _ref2.siblingIds,
|
|
3666
3680
|
siblingIds = _ref2$siblingIds === void 0 ? [] : _ref2$siblingIds,
|
|
3681
|
+
_ref2$allAddonIds = _ref2.allAddonIds,
|
|
3682
|
+
allAddonIds = _ref2$allAddonIds === void 0 ? [] : _ref2$allAddonIds,
|
|
3683
|
+
maxTotalQuantity = _ref2.maxTotalQuantity,
|
|
3667
3684
|
_ref2$onCustomFieldCh = _ref2.onCustomFieldChange,
|
|
3668
3685
|
onCustomFieldChange = _ref2$onCustomFieldCh === void 0 ? _identity : _ref2$onCustomFieldCh;
|
|
3669
3686
|
var id = data.id,
|
|
@@ -3697,7 +3714,9 @@ var AddonComponent = function AddonComponent(_ref2) {
|
|
|
3697
3714
|
selectOptions: selectOptions,
|
|
3698
3715
|
handleAddonChange: handleAddonChange,
|
|
3699
3716
|
classNamePrefix: classNamePrefix,
|
|
3700
|
-
siblingIds: siblingIds
|
|
3717
|
+
siblingIds: siblingIds,
|
|
3718
|
+
allAddonIds: allAddonIds,
|
|
3719
|
+
maxTotalQuantity: maxTotalQuantity
|
|
3701
3720
|
})) : React__default.createElement(formik.Field, {
|
|
3702
3721
|
name: id,
|
|
3703
3722
|
selectOptions: selectOptions,
|
|
@@ -4485,6 +4504,7 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4485
4504
|
eventId = _ref.eventId,
|
|
4486
4505
|
_ref$useStepperQty = _ref.useStepperQty,
|
|
4487
4506
|
useStepperQty = _ref$useStepperQty === void 0 ? false : _ref$useStepperQty,
|
|
4507
|
+
addonMaxQuantityGroups = _ref.addonMaxQuantityGroups,
|
|
4488
4508
|
_ref$onAddOnSelect = _ref.onAddOnSelect,
|
|
4489
4509
|
onAddOnSelect = _ref$onAddOnSelect === void 0 ? _identity : _ref$onAddOnSelect,
|
|
4490
4510
|
_ref$handleConfirm = _ref.handleConfirm,
|
|
@@ -4501,12 +4521,15 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4501
4521
|
var _useState4 = React.useState({}),
|
|
4502
4522
|
groupsWithInitialVariantsValues = _useState4[0],
|
|
4503
4523
|
setGroupsWithInitialVariantsValues = _useState4[1];
|
|
4504
|
-
var _useState5 = React.useState(
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
var _useState6 = React.useState(
|
|
4508
|
-
|
|
4509
|
-
|
|
4524
|
+
var _useState5 = React.useState({}),
|
|
4525
|
+
crossGroupSelections = _useState5[0],
|
|
4526
|
+
setCrossGroupSelections = _useState5[1];
|
|
4527
|
+
var _useState6 = React.useState(true),
|
|
4528
|
+
loading = _useState6[0],
|
|
4529
|
+
setLoading = _useState6[1];
|
|
4530
|
+
var _useState7 = React.useState(null),
|
|
4531
|
+
visibleDescription = _useState7[0],
|
|
4532
|
+
setVisibleDescription = _useState7[1];
|
|
4510
4533
|
var handleDescriptionToggle = function handleDescriptionToggle(ticketId) {
|
|
4511
4534
|
setVisibleDescription(function (current) {
|
|
4512
4535
|
return current === ticketId ? null : ticketId;
|
|
@@ -4635,6 +4658,37 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4635
4658
|
recreateGroupVariantsSelectOptions(currGroupId, updatedGroupsWithSelectedVariants[currGroupId]);
|
|
4636
4659
|
}
|
|
4637
4660
|
};
|
|
4661
|
+
// Cross-group cap: when addonMaxQuantityGroups is set, limits total selections
|
|
4662
|
+
// across ALL addon groups to that number by capping each stepper's max.
|
|
4663
|
+
var effectiveAddonsOptions = React.useMemo(function () {
|
|
4664
|
+
if (!addonMaxQuantityGroups) return addonsOptions;
|
|
4665
|
+
var totalSelected = Object.values(crossGroupSelections).reduce(function (sum, v) {
|
|
4666
|
+
return sum + Number(v);
|
|
4667
|
+
}, 0);
|
|
4668
|
+
var globalRemaining = addonMaxQuantityGroups - totalSelected;
|
|
4669
|
+
var result = {};
|
|
4670
|
+
var _loop = function _loop() {
|
|
4671
|
+
var opts = addonsOptions[id] || [];
|
|
4672
|
+
var sdkMax = opts.length ? opts[opts.length - 1].value : 0;
|
|
4673
|
+
var currSelected = Number(crossGroupSelections[id] || 0);
|
|
4674
|
+
var allowedMax = Math.max(0, Math.min(sdkMax, globalRemaining + currSelected));
|
|
4675
|
+
result[id] = opts.filter(function (opt) {
|
|
4676
|
+
return opt.value <= allowedMax;
|
|
4677
|
+
});
|
|
4678
|
+
};
|
|
4679
|
+
for (var id in addonsOptions) {
|
|
4680
|
+
_loop();
|
|
4681
|
+
}
|
|
4682
|
+
return result;
|
|
4683
|
+
}, [addonsOptions, crossGroupSelections, addonMaxQuantityGroups]);
|
|
4684
|
+
var handleCrossGroupChange = function handleCrossGroupChange(id, value) {
|
|
4685
|
+
if (addonMaxQuantityGroups) {
|
|
4686
|
+
setCrossGroupSelections(function (prev) {
|
|
4687
|
+
var _extends6;
|
|
4688
|
+
return _extends({}, prev, (_extends6 = {}, _extends6[id] = Number(value), _extends6));
|
|
4689
|
+
});
|
|
4690
|
+
}
|
|
4691
|
+
};
|
|
4638
4692
|
var initialValues = React.useMemo(function () {
|
|
4639
4693
|
var _addOnDataWithCustomF2;
|
|
4640
4694
|
var addOnsData = {};
|
|
@@ -4744,7 +4798,7 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4744
4798
|
React__default.createElement(AddonComponent, {
|
|
4745
4799
|
key: variant.id,
|
|
4746
4800
|
data: variant,
|
|
4747
|
-
selectOptions:
|
|
4801
|
+
selectOptions: effectiveAddonsOptions[variant.id],
|
|
4748
4802
|
classNamePrefix: classNamePrefix,
|
|
4749
4803
|
siblingIds: addon.variants.filter(function (v) {
|
|
4750
4804
|
return v.id !== variant.id;
|
|
@@ -4752,7 +4806,7 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4752
4806
|
return v.id;
|
|
4753
4807
|
}),
|
|
4754
4808
|
handleAddonChange: function handleAddonChange(id, value) {
|
|
4755
|
-
|
|
4809
|
+
handleCrossGroupChange(id, value);
|
|
4756
4810
|
onFieldChange(id, value, addon);
|
|
4757
4811
|
var fieldUpdates = collectAddonFieldUpdates(addon, values);
|
|
4758
4812
|
onAddOnSelect(id, value, addon, fieldUpdates);
|
|
@@ -4770,9 +4824,10 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4770
4824
|
React__default.createElement(AddonComponent, {
|
|
4771
4825
|
key: addon.id,
|
|
4772
4826
|
data: addon,
|
|
4773
|
-
selectOptions:
|
|
4827
|
+
selectOptions: effectiveAddonsOptions[addon.id],
|
|
4774
4828
|
classNamePrefix: classNamePrefix,
|
|
4775
4829
|
handleAddonChange: function handleAddonChange(id, value) {
|
|
4830
|
+
handleCrossGroupChange(id, value);
|
|
4776
4831
|
onFieldChange(id, value, addon);
|
|
4777
4832
|
var fieldUpdates = collectAddonFieldUpdates(addon, values);
|
|
4778
4833
|
onAddOnSelect(id, value, addon, fieldUpdates);
|