tf-checkout-react 1.7.14 → 1.7.16

package/package.json

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

package/src/components/addonsContainer/AddonComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Field } from 'formik'
+import { Field, useFormikContext } from 'formik'
 import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _isNull from 'lodash/isNull'
@@ -13,10 +13,6 @@ import {
 } from '../billing-info-container/utils'
 import { NativeSelectField } from '../common'
 
-// TO DO:
-// - Need to add custom fields validations
-// - Need to apply correct styles
-
 interface IAddonComponentProps {
   classNamePrefix: string;
   data: any;
@@ -26,6 +22,7 @@ interface IAddonComponentProps {
   configs: any;
   values: any;
   errors: any;
+  useStepperQty?: boolean;
   onCustomFieldChange?: (
     addon: any,
     groupId: string | number,
@@ -34,6 +31,41 @@ interface IAddonComponentProps {
   ) => void;
 }
 
+const AddonStepper = ({ id, selectOptions, handleAddonChange, classNamePrefix }: any) => {
+  const { values, setFieldValue } = useFormikContext<any>()
+  const qty = Number(values[id] ?? 0)
+  const max = selectOptions?.length > 0 ? selectOptions[selectOptions.length - 1].value : 0
+
+  const change = (next: number) => {
+    setFieldValue(id, next)
+    handleAddonChange(id, next)
+  }
+
+  return (
+    <div className={`${classNamePrefix}_stepper`}>
+      <button
+        type="button"
+        className={`${classNamePrefix}_stepper__btn`}
+        onClick={() => change(qty - 1)}
+        disabled={qty <= 0}
+        aria-label="Decrease quantity"
+      >
+        −
+      </button>
+      <span className={`${classNamePrefix}_stepper__count`}>{qty}</span>
+      <button
+        type="button"
+        className={`${classNamePrefix}_stepper__btn`}
+        onClick={() => change(qty + 1)}
+        disabled={qty >= max}
+        aria-label="Increase quantity"
+      >
+        +
+      </button>
+    </div>
+  )
+}
+
 const AddonComponent = ({
   classNamePrefix = '',
   data,
@@ -43,6 +75,7 @@ const AddonComponent = ({
   configs,
   values,
   errors,
+  useStepperQty = false,
   onCustomFieldChange = _identity,
 }: IAddonComponentProps) => {
   const { id, name, active, stock } = data
@@ -57,15 +90,24 @@ const AddonComponent = ({
           ) : (
             <>
               <div className={`${classNamePrefix}_product_qty_select`}>
-                <Field
-                  name={id}
-                  selectOptions={selectOptions}
-                  component={NativeSelectField}
-                  onChange={(e: any) => {
-                    const { value } = e.target
-                    handleAddonChange(id, value)
-                  }}
-                />
+                {useStepperQty ? (
+                  <AddonStepper
+                    id={id}
+                    selectOptions={selectOptions}
+                    handleAddonChange={handleAddonChange}
+                    classNamePrefix={classNamePrefix}
+                  />
+                ) : (
+                  <Field
+                    name={id}
+                    selectOptions={selectOptions}
+                    component={NativeSelectField}
+                    onChange={(e: any) => {
+                      const { value } = e.target
+                      handleAddonChange(id, value)
+                    }}
+                  />
+                )}
               </div>
               {!_isEmpty(addOnDataWithCustomFields?.fields) && values[id] > 0 && (
                 <div className="add-on-fields">

package/src/components/addonsContainer/SimpleAddonsContainer.tsx

@@ -30,6 +30,7 @@ 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;
 }
@@ -46,6 +47,7 @@ export const SimpleAddonsContainer = ({
   addOnDataWithCustomFields,
   configs,
   eventId,
+  useStepperQty = false,
   onAddOnSelect = _identity,
   handleConfirm = _identity,
 }: ISimpleAddonContainerProps) => {
@@ -373,6 +375,7 @@ export const SimpleAddonsContainer = ({
                               configs={configs}
                               values={values}
                               errors={errors}
+                              useStepperQty={useStepperQty}
                             />
                           ))
                         ) : (
@@ -402,6 +405,7 @@ export const SimpleAddonsContainer = ({
                             configs={configs}
                             values={values}
                             errors={errors}
+                            useStepperQty={useStepperQty}
                           />
                         )}
                       </div>

package/src/components/addonsContainer/index.tsx

@@ -37,6 +37,7 @@ export interface IAddonContainterProps {
   configs: any;
 
   onAddOnSelect?: (id: string, value: string, addon: any) => void;
+  useStepperQty?: boolean;
 }
 
 
@@ -57,6 +58,7 @@ export const AddonsContainter = ({
   addOnDataWithCustomFields,
   configs,
   onAddOnSelect = _identity,
+  useStepperQty = false,
 }: IAddonContainterProps) => {
   const eventId = getQueryVariable('event_id') || null
 
@@ -285,6 +287,7 @@ export const AddonsContainter = ({
                                   configs={configs}
                                   values={values}
                                   errors={errors}
+                                  useStepperQty={useStepperQty}
                                 />
                               ))
                             ) : (