tf-checkout-react 1.7.14 → 1.7.15

package/dist/tf-checkout-react.esm.js

@@ -3,7 +3,7 @@ import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import axios from 'axios';
-import { connect, Field, Formik, Form } from 'formik';
+import { connect, Field, useFormikContext, Formik, Form } from 'formik';
 import _find from 'lodash-es/find';
 import _forEach from 'lodash-es/forEach';
 import _get from 'lodash-es/get';
@@ -3598,19 +3598,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 = 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.createElement("div", {
+    className: classNamePrefix + "_stepper"
+  }, React.createElement("button", {
+    type: "button",
+    className: classNamePrefix + "_stepper__btn",
+    onClick: function onClick() {
+      return change(qty - 1);
+    },
+    disabled: qty <= 0,
+    "aria-label": "Decrease quantity"
+  }, "\u2212"), React.createElement("span", {
+    className: classNamePrefix + "_stepper__count"
+  }, qty), React.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,
@@ -3629,7 +3668,12 @@ var AddonComponent = function AddonComponent(_ref) {
     className: "sold_out"
   }, "SOLD OUT") : React.createElement(React.Fragment, null, React.createElement("div", {
     className: classNamePrefix + "_product_qty_select"
-  }, React.createElement(Field, {
+  }, useStepperQty ? React.createElement(AddonStepper, {
+    id: id,
+    selectOptions: selectOptions,
+    handleAddonChange: handleAddonChange,
+    classNamePrefix: classNamePrefix
+  }) : React.createElement(Field, {
     name: id,
     selectOptions: selectOptions,
     component: NativeSelectField,
@@ -3657,13 +3701,13 @@ var AddonComponent = function AddonComponent(_ref) {
       }, React.createElement(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);
         };
@@ -4195,7 +4239,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,
@@ -4355,7 +4401,8 @@ var AddonsContainter = function AddonsContainter(_ref) {
             addOnDataWithCustomFields: addOnDataWithCustomFields,
             configs: configs,
             values: values,
-            errors: errors
+            errors: errors,
+            useStepperQty: useStepperQty
           })
         );
       }) :
@@ -4406,6 +4453,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,
@@ -4677,7 +4726,8 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
             addOnDataWithCustomFields: addOnDataWithCustomFields,
             configs: configs,
             values: values,
-            errors: errors
+            errors: errors,
+            useStepperQty: useStepperQty
           })
         );
       }) :