tf-checkout-react 1.7.19 → 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 +4 -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 +87 -12
- 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 +87 -12
- package/dist/tf-checkout-react.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/addonsContainer/AddonComponent.tsx +24 -2
- package/src/components/addonsContainer/SimpleAddonsContainer.tsx +40 -5
- package/src/components/addonsContainer/index.tsx +2 -0
|
@@ -9,7 +9,10 @@ interface IAddonComponentProps {
|
|
|
9
9
|
values: any;
|
|
10
10
|
errors: any;
|
|
11
11
|
useStepperQty?: boolean;
|
|
12
|
+
siblingIds?: string[];
|
|
13
|
+
allAddonIds?: string[];
|
|
14
|
+
maxTotalQuantity?: number;
|
|
12
15
|
onCustomFieldChange?: (addon: any, groupId: string | number, fieldName: string, value: any) => void;
|
|
13
16
|
}
|
|
14
|
-
declare const AddonComponent: ({ classNamePrefix, data, selectOptions, handleAddonChange, addOnDataWithCustomFields, configs, values, errors, useStepperQty, onCustomFieldChange, }: IAddonComponentProps) => JSX.Element;
|
|
17
|
+
declare const AddonComponent: ({ classNamePrefix, data, selectOptions, handleAddonChange, addOnDataWithCustomFields, configs, values, errors, useStepperQty, siblingIds, allAddonIds, maxTotalQuantity, onCustomFieldChange, }: IAddonComponentProps) => JSX.Element;
|
|
15
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;
|
|
@@ -3610,16 +3610,37 @@ var AddonStepper = function AddonStepper(_ref) {
|
|
|
3610
3610
|
var id = _ref.id,
|
|
3611
3611
|
selectOptions = _ref.selectOptions,
|
|
3612
3612
|
handleAddonChange = _ref.handleAddonChange,
|
|
3613
|
-
classNamePrefix = _ref.classNamePrefix
|
|
3613
|
+
classNamePrefix = _ref.classNamePrefix,
|
|
3614
|
+
_ref$siblingIds = _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;
|
|
3614
3619
|
var _useFormikContext = formik.useFormikContext(),
|
|
3615
3620
|
values = _useFormikContext.values,
|
|
3616
3621
|
setFieldValue = _useFormikContext.setFieldValue;
|
|
3617
3622
|
var qty = Number((_values$id = values[id]) != null ? _values$id : 0);
|
|
3618
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;
|
|
3619
3628
|
var change = function change(next) {
|
|
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
|
+
}
|
|
3639
|
+
}
|
|
3620
3640
|
setFieldValue(id, next);
|
|
3621
3641
|
handleAddonChange(id, next);
|
|
3622
3642
|
};
|
|
3643
|
+
var incrementDisabled = qty >= max || maxTotalQuantity != null && totalSelected >= maxTotalQuantity && qty === 0;
|
|
3623
3644
|
return React__default.createElement("div", {
|
|
3624
3645
|
className: classNamePrefix + "_stepper"
|
|
3625
3646
|
}, React__default.createElement("button", {
|
|
@@ -3638,7 +3659,7 @@ var AddonStepper = function AddonStepper(_ref) {
|
|
|
3638
3659
|
onClick: function onClick() {
|
|
3639
3660
|
return change(qty + 1);
|
|
3640
3661
|
},
|
|
3641
|
-
disabled:
|
|
3662
|
+
disabled: incrementDisabled,
|
|
3642
3663
|
"aria-label": "Increase quantity"
|
|
3643
3664
|
}, "+"));
|
|
3644
3665
|
};
|
|
@@ -3655,6 +3676,11 @@ var AddonComponent = function AddonComponent(_ref2) {
|
|
|
3655
3676
|
errors = _ref2.errors,
|
|
3656
3677
|
_ref2$useStepperQty = _ref2.useStepperQty,
|
|
3657
3678
|
useStepperQty = _ref2$useStepperQty === void 0 ? false : _ref2$useStepperQty,
|
|
3679
|
+
_ref2$siblingIds = _ref2.siblingIds,
|
|
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,
|
|
3658
3684
|
_ref2$onCustomFieldCh = _ref2.onCustomFieldChange,
|
|
3659
3685
|
onCustomFieldChange = _ref2$onCustomFieldCh === void 0 ? _identity : _ref2$onCustomFieldCh;
|
|
3660
3686
|
var id = data.id,
|
|
@@ -3687,7 +3713,10 @@ var AddonComponent = function AddonComponent(_ref2) {
|
|
|
3687
3713
|
id: id,
|
|
3688
3714
|
selectOptions: selectOptions,
|
|
3689
3715
|
handleAddonChange: handleAddonChange,
|
|
3690
|
-
classNamePrefix: classNamePrefix
|
|
3716
|
+
classNamePrefix: classNamePrefix,
|
|
3717
|
+
siblingIds: siblingIds,
|
|
3718
|
+
allAddonIds: allAddonIds,
|
|
3719
|
+
maxTotalQuantity: maxTotalQuantity
|
|
3691
3720
|
})) : React__default.createElement(formik.Field, {
|
|
3692
3721
|
name: id,
|
|
3693
3722
|
selectOptions: selectOptions,
|
|
@@ -4409,6 +4438,11 @@ var AddonsContainter = function AddonsContainter(_ref) {
|
|
|
4409
4438
|
data: variant,
|
|
4410
4439
|
selectOptions: addonsOptions[variant.id],
|
|
4411
4440
|
classNamePrefix: classNamePrefix,
|
|
4441
|
+
siblingIds: addon.variants.map(function (v) {
|
|
4442
|
+
return v.id;
|
|
4443
|
+
}).filter(function (vid) {
|
|
4444
|
+
return vid !== variant.id;
|
|
4445
|
+
}),
|
|
4412
4446
|
handleAddonChange: function handleAddonChange(id, value) {
|
|
4413
4447
|
onAddOnSelect(id, value, addon);
|
|
4414
4448
|
onFieldChange(id, value, addon);
|
|
@@ -4470,6 +4504,7 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4470
4504
|
eventId = _ref.eventId,
|
|
4471
4505
|
_ref$useStepperQty = _ref.useStepperQty,
|
|
4472
4506
|
useStepperQty = _ref$useStepperQty === void 0 ? false : _ref$useStepperQty,
|
|
4507
|
+
addonMaxQuantityGroups = _ref.addonMaxQuantityGroups,
|
|
4473
4508
|
_ref$onAddOnSelect = _ref.onAddOnSelect,
|
|
4474
4509
|
onAddOnSelect = _ref$onAddOnSelect === void 0 ? _identity : _ref$onAddOnSelect,
|
|
4475
4510
|
_ref$handleConfirm = _ref.handleConfirm,
|
|
@@ -4486,12 +4521,15 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4486
4521
|
var _useState4 = React.useState({}),
|
|
4487
4522
|
groupsWithInitialVariantsValues = _useState4[0],
|
|
4488
4523
|
setGroupsWithInitialVariantsValues = _useState4[1];
|
|
4489
|
-
var _useState5 = React.useState(
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
var _useState6 = React.useState(
|
|
4493
|
-
|
|
4494
|
-
|
|
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];
|
|
4495
4533
|
var handleDescriptionToggle = function handleDescriptionToggle(ticketId) {
|
|
4496
4534
|
setVisibleDescription(function (current) {
|
|
4497
4535
|
return current === ticketId ? null : ticketId;
|
|
@@ -4620,6 +4658,37 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4620
4658
|
recreateGroupVariantsSelectOptions(currGroupId, updatedGroupsWithSelectedVariants[currGroupId]);
|
|
4621
4659
|
}
|
|
4622
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
|
+
};
|
|
4623
4692
|
var initialValues = React.useMemo(function () {
|
|
4624
4693
|
var _addOnDataWithCustomF2;
|
|
4625
4694
|
var addOnsData = {};
|
|
@@ -4729,10 +4798,15 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4729
4798
|
React__default.createElement(AddonComponent, {
|
|
4730
4799
|
key: variant.id,
|
|
4731
4800
|
data: variant,
|
|
4732
|
-
selectOptions:
|
|
4801
|
+
selectOptions: effectiveAddonsOptions[variant.id],
|
|
4733
4802
|
classNamePrefix: classNamePrefix,
|
|
4803
|
+
siblingIds: addon.variants.filter(function (v) {
|
|
4804
|
+
return v.id !== variant.id;
|
|
4805
|
+
}).map(function (v) {
|
|
4806
|
+
return v.id;
|
|
4807
|
+
}),
|
|
4734
4808
|
handleAddonChange: function handleAddonChange(id, value) {
|
|
4735
|
-
|
|
4809
|
+
handleCrossGroupChange(id, value);
|
|
4736
4810
|
onFieldChange(id, value, addon);
|
|
4737
4811
|
var fieldUpdates = collectAddonFieldUpdates(addon, values);
|
|
4738
4812
|
onAddOnSelect(id, value, addon, fieldUpdates);
|
|
@@ -4750,9 +4824,10 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
|
|
|
4750
4824
|
React__default.createElement(AddonComponent, {
|
|
4751
4825
|
key: addon.id,
|
|
4752
4826
|
data: addon,
|
|
4753
|
-
selectOptions:
|
|
4827
|
+
selectOptions: effectiveAddonsOptions[addon.id],
|
|
4754
4828
|
classNamePrefix: classNamePrefix,
|
|
4755
4829
|
handleAddonChange: function handleAddonChange(id, value) {
|
|
4830
|
+
handleCrossGroupChange(id, value);
|
|
4756
4831
|
onFieldChange(id, value, addon);
|
|
4757
4832
|
var fieldUpdates = collectAddonFieldUpdates(addon, values);
|
|
4758
4833
|
onAddOnSelect(id, value, addon, fieldUpdates);
|