tf-checkout-react 1.7.14 → 1.7.16

package/dist/components/addonsContainer/AddonComponent.d.ts

@@ -8,7 +8,8 @@ interface IAddonComponentProps {
     configs: any;
     values: any;
     errors: any;
+    useStepperQty?: boolean;
     onCustomFieldChange?: (addon: any, groupId: string | number, fieldName: string, value: any) => void;
 }
-declare const AddonComponent: ({ classNamePrefix, data, selectOptions, handleAddonChange, addOnDataWithCustomFields, configs, values, errors, onCustomFieldChange, }: IAddonComponentProps) => JSX.Element;
+declare const AddonComponent: ({ classNamePrefix, data, selectOptions, handleAddonChange, addOnDataWithCustomFields, configs, values, errors, useStepperQty, onCustomFieldChange, }: IAddonComponentProps) => JSX.Element;
 export default AddonComponent;

package/dist/components/addonsContainer/SimpleAddonsContainer.d.ts

@@ -7,11 +7,12 @@ export interface ISimpleAddonContainerProps {
     addOnDataWithCustomFields: any;
     configs: any;
     eventId: string;
+    useStepperQty?: boolean;
     onAddOnSelect?: (id: string, value: string, addon: any, fieldUpdates: any) => void;
     handleConfirm?: (values: any) => void;
 }
 export interface ObjectLiteral {
     [key: string]: any;
 }
-export declare const SimpleAddonsContainer: ({ classNamePrefix, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, descriptionTrigger, addOnDataWithCustomFields, configs, eventId, onAddOnSelect, handleConfirm, }: ISimpleAddonContainerProps) => JSX.Element;
+export declare const SimpleAddonsContainer: ({ classNamePrefix, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, descriptionTrigger, addOnDataWithCustomFields, configs, eventId, useStepperQty, onAddOnSelect, handleConfirm, }: ISimpleAddonContainerProps) => JSX.Element;
 export default SimpleAddonsContainer;

package/dist/components/addonsContainer/index.d.ts

@@ -16,5 +16,6 @@ export interface IAddonContainterProps {
     addOnDataWithCustomFields: any;
     configs: any;
     onAddOnSelect?: (id: string, value: string, addon: any) => void;
+    useStepperQty?: boolean;
 }
-export declare const AddonsContainter: ({ classNamePrefix, enableBillingInfoAutoCreate, enableTimer, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, onPostCheckoutSuccess, onPostCheckoutError, onConfirmSelectionSuccess, onConfirmSelectionError, onCountdownFinish, onPendingVerification, samePage, descriptionTrigger, addOnDataWithCustomFields, configs, onAddOnSelect, }: IAddonContainterProps) => JSX.Element | null;
+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;

package/dist/tf-checkout-react.cjs.development.js

@@ -3605,19 +3605,58 @@ var filterBillingInfoFields = function filterBillingInfoFields(fields, options)
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-var AddonComponent = function AddonComponent(_ref) {
-  var _ref$classNamePrefix = _ref.classNamePrefix,
-    classNamePrefix = _ref$classNamePrefix === void 0 ? '' : _ref$classNamePrefix,
-    data = _ref.data,
+var AddonStepper = function AddonStepper(_ref) {
+  var _values$id;
+  var id = _ref.id,
     selectOptions = _ref.selectOptions,
-    _ref$handleAddonChang = _ref.handleAddonChange,
-    handleAddonChange = _ref$handleAddonChang === void 0 ? _identity : _ref$handleAddonChang,
-    addOnDataWithCustomFields = _ref.addOnDataWithCustomFields,
-    configs = _ref.configs,
-    values = _ref.values,
-    errors = _ref.errors,
-    _ref$onCustomFieldCha = _ref.onCustomFieldChange,
-    onCustomFieldChange = _ref$onCustomFieldCha === void 0 ? _identity : _ref$onCustomFieldCha;
+    handleAddonChange = _ref.handleAddonChange,
+    classNamePrefix = _ref.classNamePrefix;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var qty = Number((_values$id = values[id]) != null ? _values$id : 0);
+  var max = (selectOptions == null ? void 0 : selectOptions.length) > 0 ? selectOptions[selectOptions.length - 1].value : 0;
+  var change = function change(next) {
+    setFieldValue(id, next);
+    handleAddonChange(id, next);
+  };
+  return React__default.createElement("div", {
+    className: classNamePrefix + "_stepper"
+  }, React__default.createElement("button", {
+    type: "button",
+    className: classNamePrefix + "_stepper__btn",
+    onClick: function onClick() {
+      return change(qty - 1);
+    },
+    disabled: qty <= 0,
+    "aria-label": "Decrease quantity"
+  }, "\u2212"), React__default.createElement("span", {
+    className: classNamePrefix + "_stepper__count"
+  }, qty), React__default.createElement("button", {
+    type: "button",
+    className: classNamePrefix + "_stepper__btn",
+    onClick: function onClick() {
+      return change(qty + 1);
+    },
+    disabled: qty >= max,
+    "aria-label": "Increase quantity"
+  }, "+"));
+};
+var AddonComponent = function AddonComponent(_ref2) {
+  var _ref2$classNamePrefix = _ref2.classNamePrefix,
+    classNamePrefix = _ref2$classNamePrefix === void 0 ? '' : _ref2$classNamePrefix,
+    data = _ref2.data,
+    selectOptions = _ref2.selectOptions,
+    _ref2$handleAddonChan = _ref2.handleAddonChange,
+    handleAddonChange = _ref2$handleAddonChan === void 0 ? _identity : _ref2$handleAddonChan,
+    addOnDataWithCustomFields = _ref2.addOnDataWithCustomFields,
+    configs = _ref2.configs,
+    values = _ref2.values,
+    errors = _ref2.errors,
+    _ref2$useStepperQty = _ref2.useStepperQty,
+    useStepperQty = _ref2$useStepperQty === void 0 ? false : _ref2$useStepperQty,
+    _ref2$onCustomFieldCh = _ref2.onCustomFieldChange,
+    onCustomFieldChange = _ref2$onCustomFieldCh === void 0 ? _identity : _ref2$onCustomFieldCh;
   var id = data.id,
     name = data.name,
     active = data.active,
@@ -3636,7 +3675,12 @@ var AddonComponent = function AddonComponent(_ref) {
     className: "sold_out"
   }, "SOLD OUT") : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: classNamePrefix + "_product_qty_select"
-  }, React__default.createElement(formik.Field, {
+  }, useStepperQty ? React__default.createElement(AddonStepper, {
+    id: id,
+    selectOptions: selectOptions,
+    handleAddonChange: handleAddonChange,
+    classNamePrefix: classNamePrefix
+  }) : React__default.createElement(formik.Field, {
     name: id,
     selectOptions: selectOptions,
     component: NativeSelectField,
@@ -3664,13 +3708,13 @@ var AddonComponent = function AddonComponent(_ref) {
       }, React__default.createElement(formik.Field, Object.assign({}, element, {
         name: fieldName,
         validate: getValidateFunctions(element, [], values, errors)
-      }), function (_ref2) {
-        var field = _ref2.field,
-          form = _ref2.form;
+      }), function (_ref3) {
+        var field = _ref3.field,
+          form = _ref3.form;
         var handleChange = function handleChange(e) {
-          var _ref3, _e$target$value, _e$target;
+          var _ref4, _e$target$value, _e$target;
           // extract value from native events or custom widgets
-          var v = (_ref3 = (_e$target$value = e == null ? void 0 : (_e$target = e.target) == null ? void 0 : _e$target.value) != null ? _e$target$value : e == null ? void 0 : e.value) != null ? _ref3 : e; // allow custom components to pass raw value
+          var v = (_ref4 = (_e$target$value = e == null ? void 0 : (_e$target = e.target) == null ? void 0 : _e$target.value) != null ? _e$target$value : e == null ? void 0 : e.value) != null ? _ref4 : e; // allow custom components to pass raw value
           form.setFieldValue(field.name, v);
           onCustomFieldChange == null ? void 0 : onCustomFieldChange(data, id, element.name, v);
         };
@@ -4202,7 +4246,9 @@ var AddonsContainter = function AddonsContainter(_ref) {
     addOnDataWithCustomFields = _ref.addOnDataWithCustomFields,
     configs = _ref.configs,
     _ref$onAddOnSelect = _ref.onAddOnSelect,
-    onAddOnSelect = _ref$onAddOnSelect === void 0 ? _identity : _ref$onAddOnSelect;
+    onAddOnSelect = _ref$onAddOnSelect === void 0 ? _identity : _ref$onAddOnSelect,
+    _ref$useStepperQty = _ref.useStepperQty,
+    useStepperQty = _ref$useStepperQty === void 0 ? false : _ref$useStepperQty;
   var eventId = getQueryVariable('event_id') || null;
   var _useAddons = useAddons(eventId, {
       enableBillingInfoAutoCreate: enableBillingInfoAutoCreate,
@@ -4362,7 +4408,8 @@ var AddonsContainter = function AddonsContainter(_ref) {
             addOnDataWithCustomFields: addOnDataWithCustomFields,
             configs: configs,
             values: values,
-            errors: errors
+            errors: errors,
+            useStepperQty: useStepperQty
           })
         );
       }) :
@@ -4413,6 +4460,8 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
     addOnDataWithCustomFields = _ref.addOnDataWithCustomFields,
     configs = _ref.configs,
     eventId = _ref.eventId,
+    _ref$useStepperQty = _ref.useStepperQty,
+    useStepperQty = _ref$useStepperQty === void 0 ? false : _ref$useStepperQty,
     _ref$onAddOnSelect = _ref.onAddOnSelect,
     onAddOnSelect = _ref$onAddOnSelect === void 0 ? _identity : _ref$onAddOnSelect,
     _ref$handleConfirm = _ref.handleConfirm,
@@ -4684,7 +4733,8 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
             addOnDataWithCustomFields: addOnDataWithCustomFields,
             configs: configs,
             values: values,
-            errors: errors
+            errors: errors,
+            useStepperQty: useStepperQty
           })
         );
       }) :
@@ -4710,7 +4760,8 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
         addOnDataWithCustomFields: addOnDataWithCustomFields,
         configs: configs,
         values: values,
-        errors: errors
+        errors: errors,
+        useStepperQty: useStepperQty
       })));
     })));
   })));